Bug 902966 - Pressing escape while editing a style property should undo current changes; r=mratcliffe

browser/devtools/shared/inplace-editor.js

@@ -794,7 +794,6 @@ InplaceEditor.prototype = {
       let direction = FOCUS_FORWARD;
       if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_TAB &&
           aEvent.shiftKey) {
-        this.cancelled = true;
         direction = FOCUS_BACKWARD;
       }
       if (this.stopOnReturn && aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RETURN) {
@@ -858,7 +857,6 @@ InplaceEditor.prototype = {
     // Validate the entered value.
     this.warning.hidden = this.validate(this.input.value);
     this._applied = false;
-    this._onBlur(null, true);
   },
 
   /**

browser/devtools/styleinspector/rule-view.js

@@ -1449,8 +1449,9 @@ RuleEditor.prototype = {
  */
 function TextPropertyEditor(aRuleEditor, aProperty)
 {
-  this.doc = aRuleEditor.doc;
+  this.ruleEditor = aRuleEditor;
-  this.popup = aRuleEditor.ruleView.popup;
+  this.doc = this.ruleEditor.doc;
+  this.popup = this.ruleEditor.ruleView.popup;
   this.prop = aProperty;
   this.prop.editor = this;
   this.browserWindow = this.doc.defaultView.top;
@@ -1849,6 +1850,7 @@ TextPropertyEditor.prototype = {
     let name = this.prop.name;
     let value = typeof aValue == "undefined" ? this.prop.value : aValue;
     let val = this._parseValue(value);
+
     let style = this.doc.createElementNS(HTML_NS, "div").style;
     let prefs = Services.prefs;
 
@@ -1858,6 +1860,8 @@ TextPropertyEditor.prototype = {
 
     try {
       style.setProperty(name, val.value, val.priority);
+      // Live previewing the change without committing yet just yet, that'll be done in _onValueDone
+      this.ruleEditor.rule.setPropertyValue(this.prop, val.value, val.priority);
     } finally {
       prefs.setBoolPref("layout.css.report_errors", prefVal);
     }

browser/devtools/styleinspector/test/Makefile.in

@@ -29,6 +29,7 @@ MOCHITEST_BROWSER_FILES = \
   browser_ruleview_override.js \
   browser_ruleview_ui.js \
   browser_ruleview_update.js \
+  browser_ruleview_livepreview.js \
   browser_bug705707_is_content_stylesheet.js \
   browser_bug722196_property_view_media_queries.js \
   browser_bug722196_rule_view_media_queries.js \
@@ -41,6 +42,7 @@ MOCHITEST_BROWSER_FILES = \
   browser_bug893965_css_property_completion_existing_property.js \
   browser_bug894376_css_value_completion_new_property_value_pair.js \
   browser_bug894376_css_value_completion_existing_property_value_pair.js \
+  browser_ruleview_bug_902966_revert_value_on_ESC.js \
   head.js \
   $(NULL)
 

browser/devtools/styleinspector/test/browser_bug894376_css_value_completion_new_property_value_pair.js

@@ -29,7 +29,7 @@ let testData = [
   ["VK_BACK_SPACE", {}, "", -1, 0],
   ["c", {}, "caption-side", 0, 10],
   ["o", {}, "color", 0, 6],
-  ["VK_TAB", {}, "n", -1, 0],
+  ["VK_TAB", {}, "none", -1, 0],
   ["r", {}, "red", 0, 5],
   ["VK_DOWN", {}, "rgb", 1, 5],
   ["VK_DOWN", {}, "rgba", 2, 5],

browser/devtools/styleinspector/test/browser_ruleview_bug_902966_revert_value_on_ESC.js

@@ -0,0 +1,91 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test original value is correctly displayed when ESCaping out of the
+// inplace editor in the style inspector.
+
+let doc;
+let ruleWindow;
+let ruleView;
+let inspector;
+let originalValue = "blue";
+
+// Test data format
+// {
+//  value: what char sequence to type,
+//  commitKey: what key to type to "commit" the change,
+//  modifiers: commitKey modifiers,
+//  expected: what value is expected as a result
+// }
+let testData = [
+  {value: "red", commitKey: "VK_ESCAPE", modifiers: {}, expected: originalValue},
+  {value: "red", commitKey: "VK_RETURN", modifiers: {}, expected: "red"},
+  {value: "blue", commitKey: "VK_TAB", modifiers: {shiftKey: true}, expected: "blue"}
+];
+
+function startTests()
+{
+  let style = '' +
+    '#testid {' +
+    '  color: ' + originalValue + ';' +
+    '}';
+
+  let styleNode = addStyle(doc, style);
+  doc.body.innerHTML = '<div id="testid">Styled Node</div>';
+  let testElement = doc.getElementById("testid");
+
+  openRuleView((aInspector, aRuleView) => {
+    inspector = aInspector;
+    ruleView = aRuleView;
+    ruleWindow = aRuleView.doc.defaultView;
+    inspector.selection.setNode(testElement);
+    inspector.once("inspector-updated", () => runTestData(0));
+  });
+}
+
+function runTestData(index)
+{
+  if (index === testData.length) {
+    finishTest();
+    return;
+  }
+
+  let idRuleEditor = ruleView.element.children[1]._ruleEditor;
+  let propEditor = idRuleEditor.rule.textProps[0].editor;
+  waitForEditorFocus(propEditor.element, function(aEditor) {
+    is(inplaceEditor(propEditor.valueSpan), aEditor, "Focused editor should be the value.");
+
+    for (let ch of testData[index].value) {
+      EventUtils.sendChar(ch, ruleWindow);
+    }
+    EventUtils.synthesizeKey(testData[index].commitKey, testData[index].modifiers);
+
+    is(propEditor.valueSpan.innerHTML, testData[index].expected);
+
+    runTestData(index + 1);
+  });
+
+  EventUtils.synthesizeMouse(propEditor.valueSpan, 1, 1, {}, ruleWindow);
+}
+
+function finishTest()
+{
+  inspector = ruleWindow = ruleView = null;
+  doc = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function escapePropertyChange_load(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, escapePropertyChange_load, true);
+    doc = content.document;
+    waitForFocus(startTests, content);
+  }, true);
+
+  content.location = "data:text/html,test escaping property change reverts back to original value";
+}

browser/devtools/styleinspector/test/browser_ruleview_livepreview.js

@@ -0,0 +1,90 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that changes are previewed when editing a property value
+
+let doc;
+let testElement;
+let ruleWindow;
+let ruleView;
+let inspector;
+
+// Format
+// {
+//   value : what to type in the field
+//   expected : expected computed style on the targeted element
+// }
+let testData = [
+  {value: "inline", expected: "inline"},
+  {value: "something", expected: "inline"}
+];
+
+function startTest()
+{
+  let style = '#testid {display:block;}';
+
+  let styleNode = addStyle(doc, style);
+  doc.body.innerHTML = '<div id="testid">Styled Node</div><span>inline element</span>';
+  testElement = doc.getElementById("testid");
+
+  openRuleView((aInspector, aRuleView) => {
+    inspector = aInspector;
+    ruleView = aRuleView;
+    ruleWindow = aRuleView.doc.defaultView;
+    inspector.selection.setNode(testElement);
+    inspector.once("inspector-updated", () => loopTestData(0));
+  });
+}
+
+function loopTestData(index)
+{
+  if(index === testData.length) {
+    finishTest();
+    return;
+  }
+
+  let idRuleEditor = ruleView.element.children[1]._ruleEditor;
+  let propEditor = idRuleEditor.rule.textProps[0].editor;
+  waitForEditorFocus(propEditor.element, function(aEditor) {
+    is(inplaceEditor(propEditor.valueSpan), aEditor, "Focused editor should be the value.");
+
+    // Entering a correct value for the property
+    for (let ch of testData[index].value) {
+      EventUtils.sendChar(ch, ruleWindow);
+    }
+
+    // While the editor is still focused in, the display should have changed already
+    executeSoon(() => {
+      is(content.getComputedStyle(testElement).display,
+        testData[index].expected,
+        "Element should be previewed as " + testData[index].expected);
+
+      EventUtils.synthesizeKey("VK_RETURN", {});
+      loopTestData(index + 1);
+    });
+  });
+
+  EventUtils.synthesizeMouse(propEditor.valueSpan, 1, 1, {}, ruleWindow);
+}
+
+function finishTest()
+{
+  inspector = ruleWindow = ruleView = null;
+  doc = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function changedValues_load(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, changedValues_load, true);
+    doc = content.document;
+    waitForFocus(startTest, content);
+  }, true);
+
+  content.location = "data:text/html,test rule view live preview on user changes";
+}