Bug 1237885 - fix add-rules_01 intermittent by splitting in two tests;r=gl

Intermittent test add-rules_01 has been split in two test. The original test
was checking trying to create a set of rules first using the "add rule" button
and then using the context menu.

add-rules_01 only tests using the "add rule" button now. The context-menu tests
have been moved to add-rules_05. Both tests are well under 45 seconds on Linux
debug.

devtools/client/inspector/rules/test/browser.ini

@@ -41,6 +41,7 @@ support-files =
 [browser_rules_add-rule_02.js]
 [browser_rules_add-rule_03.js]
 [browser_rules_add-rule_04.js]
+[browser_rules_add-rule_05.js]
 [browser_rules_add-rule_pseudo_class.js]
 [browser_rules_authored.js]
 [browser_rules_authored_color.js]

devtools/client/inspector/rules/test/browser_rules_add-rule_01.js

@@ -4,7 +4,7 @@
 
 "use strict";
 
-// Tests the behaviour of adding a new rule to the rule view and the
+// Tests the behaviour of adding a new rule using the add rule button and the
 // various inplace-editor behaviours in the new rule editor.
 
 const TEST_URI = `
@@ -37,45 +37,16 @@ add_task(function*() {
   let {inspector, view} = yield openRuleView();
 
   for (let data of TEST_DATA) {
-    yield runTestData(inspector, view, data, "context-menu");
-    yield runTestData(inspector, view, data, "button");
+    let {node, expected} = data;
+    yield selectNode(node, inspector);
+    yield addNewRule(inspector, view);
+    yield testNewRule(view, expected, 1);
+
+    info("Resetting page content");
+    content.document.body.innerHTML = TEST_URI;
   }
 });
 
-function* runTestData(inspector, view, data, method) {
-  let {node, expected} = data;
-  yield selectNode(node, inspector);
-  yield addNewRule(inspector, view, method);
-  yield testNewRule(view, expected, 1);
-
-  info("Resetting page content");
-  content.document.body.innerHTML = TEST_URI;
-}
-
-function* addNewRule(inspector, view, method) {
-  if (method == "context-menu") {
-    info("Waiting for context menu to be shown");
-    let onPopup = once(view._contextmenu._menupopup, "popupshown");
-    let win = view.styleWindow;
-
-    EventUtils.synthesizeMouseAtCenter(view.element,
-      {button: 2, type: "contextmenu"}, win);
-    yield onPopup;
-
-    ok(!view._contextmenu.menuitemAddRule.hidden, "Add rule is visible");
-
-    info("Adding the new rule");
-    view._contextmenu.menuitemAddRule.click();
-    view._contextmenu._menupopup.hidePopup();
-  } else {
-    info("Adding the new rule using the button");
-    view.addRuleButton.click();
-  }
-
-  info("Waiting for rule view to change");
-  yield view.once("ruleview-changed");
-}
-
 function* testNewRule(view, expected, index) {
   let idRuleEditor = getRuleViewRuleEditor(view, index);
   let editor = idRuleEditor.selectorText.ownerDocument.activeElement;

devtools/client/inspector/rules/test/browser_rules_add-rule_02.js

@@ -22,10 +22,7 @@ add_task(function*() {
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
-  let onRuleViewChanged = once(view, "ruleview-changed");
-  view.addRuleButton.click();
-  yield onRuleViewChanged;
-
+  yield addNewRule(inspector, view);
   yield testEditSelector(view, "span");
 
   info("Selecting the modified element with the new rule");

devtools/client/inspector/rules/test/browser_rules_add-rule_03.js

@@ -22,9 +22,7 @@ add_task(function*() {
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
-  let onRuleViewChanged = once(view, "ruleview-changed");
-  view.addRuleButton.click();
-  yield onRuleViewChanged;
+  yield addNewRule(inspector, view);
 
   info("Adding new properties to the new rule");
   yield testNewRule(view, "#testid", 1);

devtools/client/inspector/rules/test/browser_rules_add-rule_05.js

@@ -0,0 +1,90 @@
+/* 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 the behaviour of adding a new rule to the rule view using the context
+// menu and the various inplace-editor behaviours in the new rule editor.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span class="testclass2">This is a span</span>
+  <span class="class1 class2">Multiple classes</span>
+  <span class="class3      class4">Multiple classes</span>
+  <p>Empty<p>
+  <h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>
+  <h2 id="asd@@@a!!2a">Invalid characters in id</h2>
+`;
+
+const TEST_DATA = [
+  { node: "#testid", expected: "#testid" },
+  { node: ".testclass2", expected: ".testclass2" },
+  { node: ".class1.class2", expected: ".class1.class2" },
+  { node: ".class3.class4", expected: ".class3.class4" },
+  { node: "p", expected: "p" },
+  { node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" },
+  { node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" }
+];
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  for (let data of TEST_DATA) {
+    let {node, expected} = data;
+    yield selectNode(node, inspector);
+    yield addNewRuleFromContextMenu(inspector, view);
+    yield testNewRule(view, expected, 1);
+
+    info("Resetting page content");
+    content.document.body.innerHTML = TEST_URI;
+  }
+});
+
+function* addNewRuleFromContextMenu(inspector, view) {
+  info("Waiting for context menu to be shown");
+  let onPopup = once(view._contextmenu._menupopup, "popupshown");
+  let win = view.styleWindow;
+
+  EventUtils.synthesizeMouseAtCenter(view.element,
+    {button: 2, type: "contextmenu"}, win);
+  yield onPopup;
+
+  ok(!view._contextmenu.menuitemAddRule.hidden, "Add rule is visible");
+
+  info("Adding the new rule");
+  view._contextmenu.menuitemAddRule.click();
+  view._contextmenu._menupopup.hidePopup();
+
+  info("Waiting for rule view to change");
+  yield view.once("ruleview-changed");
+}
+
+function* testNewRule(view, expected, index) {
+  let idRuleEditor = getRuleViewRuleEditor(view, index);
+  let editor = idRuleEditor.selectorText.ownerDocument.activeElement;
+  is(editor.value, expected,
+      "Selector editor value is as expected: " + expected);
+
+  info("Entering the escape key");
+  EventUtils.synthesizeKey("VK_ESCAPE", {});
+
+  is(idRuleEditor.selectorText.textContent, expected,
+      "Selector text value is as expected: " + expected);
+
+  info("Adding new properties to new rule: " + expected);
+  let onRuleViewChanged = view.once("ruleview-changed");
+  idRuleEditor.addProperty("font-weight", "bold", "");
+  yield onRuleViewChanged;
+
+  let textProps = idRuleEditor.rule.textProps;
+  let lastRule = textProps[textProps.length - 1];
+  is(lastRule.name, "font-weight", "Last rule name is font-weight");
+  is(lastRule.value, "bold", "Last rule value is bold");
+}

devtools/client/inspector/rules/test/head.js

@@ -659,3 +659,20 @@ function reloadPage(inspector) {
     inspector.markup._waitForChildren();
   });
 }
+
+/**
+ * Create a new rule by clicking on the "add rule" button.
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @return a promise that resolves after the rule has been added
+ */
+function* addNewRule(inspector, view) {
+  info("Adding the new rule using the button");
+  view.addRuleButton.click();
+
+  info("Waiting for rule view to change");
+  yield view.once("ruleview-changed");
+}