Bug 1150780 - Refactor ruleview tests and add 'empty value' inplace editor test;r=pbrosset

browser/devtools/styleinspector/test/browser.ini

@@ -80,6 +80,7 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_ruleview_edit-property-order.js]
 [browser_ruleview_edit-property_01.js]
 [browser_ruleview_edit-property_02.js]
+[browser_ruleview_edit-property_03.js]
 [browser_ruleview_edit-selector-commit.js]
 [browser_ruleview_edit-selector_01.js]
 [browser_ruleview_edit-selector_02.js]

browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js

@@ -4,28 +4,34 @@
 
 "use strict";
 
-// Testing various inplace-editor behaviors in the rule-view
-// FIXME: To be split in several test files, and some of the inplace-editor
-// focus/blur/commit/revert stuff should be factored out in head.js
+// Testing adding new properties via the inplace-editors in the rule
+// view.
+// FIXME: some of the inplace-editor focus/blur/commit/revert stuff
+// should be factored out in head.js
 
-let TEST_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
-let PAGE_CONTENT = [
+let BACKGROUND_IMAGE_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
+let TEST_URI = [
   '<style type="text/css">',
-  '  #testid {',
-  '    background-color: blue;',
-  '  }',
-  '  .testclass {',
-  '    background-color: green;',
-  '  }',
+  '#testid {',
+  '  color: red;',
+  '  background-color: blue;',
+  '}',
+  '.testclass, .unmatched {',
+  '  background-color: green;',
+  '}',
   '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>'
+  '<div id="testid" class="testclass">Styled Node</div>',
+  '<div id="testid2">Styled Node</div>'
 ].join("\n");
 
-add_task(function*() {
-  let tab = yield addTab("data:text/html;charset=utf-8,test rule view user changes");
+let TEST_DATA = [
+  { name: "border-color", value: "red", isValid: true },
+  { name: "background-image", value: BACKGROUND_IMAGE_URL, isValid: true },
+  { name: "border", value: "solid 1px foo", isValid: false },
+];
 
-  info("Creating the test document");
-  content.document.body.innerHTML = PAGE_CONTENT;
+add_task(function*() {
+  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
@@ -33,15 +39,17 @@ add_task(function*() {
   info("Selecting the test element");
   yield selectNode("#testid", inspector);
 
-  yield testEditProperty(view, "border-color", "red", tab.linkedBrowser);
-  yield testEditProperty(view, "background-image", TEST_URL, tab.linkedBrowser);
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  for (let {name, value, isValid} of TEST_DATA) {
+    yield testEditProperty(ruleEditor, name, value, isValid);
+  }
 });
 
-function* testEditProperty(view, name, value, browser) {
+function* testEditProperty(ruleEditor, name, value, isValid) {
   info("Test editing existing property name/value fields");
 
-  let idRuleEditor = getRuleViewRuleEditor(view, 1);
-  let propEditor = idRuleEditor.rule.textProps[0].editor;
+  let doc = ruleEditor.doc;
+  let propEditor = ruleEditor.rule.textProps[0].editor;
 
   info("Focusing an existing property name in the rule-view");
   let editor = yield focusEditableField(propEditor.nameSpan, 32, 1);
@@ -50,29 +58,29 @@ function* testEditProperty(view, name, value, browser) {
   let input = editor.input;
 
   info("Entering a new property name, including : to commit and focus the value");
-  let onValueFocus = once(idRuleEditor.element, "focus", true);
-  let onModifications = idRuleEditor.rule._applyingModifications;
+  let onValueFocus = once(ruleEditor.element, "focus", true);
+  let onModifications = ruleEditor.rule._applyingModifications;
   for (let ch of name + ":") {
-    EventUtils.sendChar(ch, view.doc.defaultView);
+    EventUtils.sendChar(ch, doc.defaultView);
   }
   yield onValueFocus;
   yield onModifications;
 
   // Getting the value editor after focus
-  editor = inplaceEditor(view.doc.activeElement);
+  editor = inplaceEditor(doc.activeElement);
   input = editor.input;
   is(inplaceEditor(propEditor.valueSpan), editor, "Focus moved to the value.");
 
   info("Entering a new value, including ; to commit and blur the value");
   let onBlur = once(input, "blur");
-  onModifications = idRuleEditor.rule._applyingModifications;
+  onModifications = ruleEditor.rule._applyingModifications;
   for (let ch of value + ";") {
-    EventUtils.sendChar(ch, view.doc.defaultView);
+    EventUtils.sendChar(ch, doc.defaultView);
   }
   yield onBlur;
   yield onModifications;
 
-  is(propEditor.isValid(), true, value + " is a valid entry");
+  is(propEditor.isValid(), isValid, value + " is " + isValid ? "valid" : "invalid");
 
   info("Checking that the style property was changed on the content page");
   let propValue = yield executeInContent("Test:GetRulePropertyValue", {
@@ -80,5 +88,10 @@ function* testEditProperty(view, name, value, browser) {
     ruleIndex: 0,
     name
   });
-  is(propValue, value, name + " should have been set.");
-}
+
+  if (isValid) {
+    is(propValue, value, name + " should have been set.");
+  } else {
+    isnot(propValue, value, name + " shouldn't have been set.");
+  }
+}

browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js

@@ -6,28 +6,28 @@
 
 // Test several types of rule-view property edition
 
-add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
-  let {toolbox, inspector, view} = yield openRuleView();
+let TEST_URI = [
+  '<style type="text/css">',
+  '#testid {',
+  '  background-color: blue;',
+  '}',
+  '.testclass, .unmatched {',
+  '  background-color: green;',
+  '}',
+  '</style>',
+  '<div id="testid" class="testclass">Styled Node</div>',
+  '<div id="testid2">Styled Node</div>'
+].join("\n");
 
-  info("Creating the test document");
-  let style = "" +
-    "#testid {" +
-    "  background-color: blue;" +
-    "}" +
-    ".testclass, .unmatched {" +
-    "  background-color: green;" +
-    "}";
-  let styleNode = addStyle(content.document, style);
-  content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
-                                    "<div id='testid2'>Styled Node</div>";
+add_task(function*() {
+  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let {toolbox, inspector, view} = yield openRuleView();
 
   yield selectNode("#testid", inspector);
   yield testEditProperty(inspector, view);
   yield testDisableProperty(inspector, view);
   yield testPropertyStillMarkedDirty(inspector, view);
-
-  gBrowser.removeCurrentTab();
 });
 
 function* testEditProperty(inspector, ruleView) {

browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js

@@ -0,0 +1,60 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that emptying out an existing value removes the property and
+// doesn't cause any other issues.  See also Bug 1150780.
+
+let TEST_URI = [
+  '<style type="text/css">',
+  '#testid {',
+  '  color: red;',
+  '  background-color: blue;',
+  '  font-size: 12px;',
+  '}',
+  '.testclass, .unmatched {',
+  '  background-color: green;',
+  '}',
+  '</style>',
+  '<div id="testid" class="testclass">Styled Node</div>',
+  '<div id="testid2">Styled Node</div>'
+].join("\n");
+
+add_task(function*() {
+  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Opening the rule-view");
+  let {toolbox, inspector, view} = yield openRuleView();
+
+  info("Selecting the test element");
+  yield selectNode("#testid", inspector);
+
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let doc = ruleEditor.doc;
+
+  let propEditor = ruleEditor.rule.textProps[1].editor;
+  let editor = yield focusEditableField(propEditor.valueSpan);
+
+  info("Deleting all the text out of a value field");
+  yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_DELETE", "VK_RETURN"]);
+  yield ruleEditor.rule._applyingModifications;
+
+  info("Pressing enter a couple times to cycle through editors");
+  yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_RETURN"]);
+  yield sendCharsAndWaitForFocus(ruleEditor.element, ["VK_RETURN"]);
+
+  yield ruleEditor.rule._applyingModifications;
+
+  isnot (ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none", "The name span is visible");
+  is (ruleEditor.rule.textProps.length, 2, "Correct number of props");
+});
+
+function* sendCharsAndWaitForFocus(element, chars) {
+  let onFocus = once(element, "focus", true);
+  for (let ch of chars) {
+    EventUtils.sendChar(ch, element.ownerDocument.defaultView);
+  }
+  yield onFocus;
+}