Bug 1143742 - part1: multiline inplace editor: cleanup existing tests;r=gl

In preparation for using a multiline editor for property values, tests
need to be updated :
- some tests used the "input" selector, which will no longer work with a
  textarea
- some tests are relying on EventUtils.sendChar to send keys such as
  "VK_RETURN". Doing so also applies the shift key modifier, which has
  a specific behavior with multiline editors

MozReview-Commit-ID: HkFxH3Go49E

--HG--
extra : rebase_source : 58ea640905b4acc2574c47b2bc87fcf0780db59b

devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js

@@ -25,8 +25,8 @@ add_task(function*() {
   let propEditor = ruleEditor.rule.textProps[0].editor;
 
   yield focusEditableField(view, propEditor.nameSpan);
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element,
-    ["VK_DELETE", "VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+    ["DELETE", "ESCAPE"]);
 
   is(propEditor.nameSpan.textContent, "background-color",
     "'background-color' property name is correctly set.");
@@ -35,8 +35,8 @@ add_task(function*() {
 
   yield focusEditableField(view, propEditor.valueSpan);
   let onValueDeleted = view.once("ruleview-changed");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element,
-    ["VK_DELETE", "VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+    ["DELETE", "ESCAPE"]);
   yield onValueDeleted;
 
   is(propEditor.valueSpan.textContent, "#00F",
@@ -44,11 +44,3 @@ add_task(function*() {
   is((yield getComputedStyleProperty("#testid", null, "background-color")),
     "rgb(0, 0, 255)", "#00F background color is set.");
 });
-
-function* sendCharsAndWaitForFocus(view, element, chars) {
-  let onFocus = once(element, "focus", true);
-  for (let ch of chars) {
-    EventUtils.sendChar(ch, view.styleWindow);
-  }
-  yield onFocus;
-}

devtools/client/inspector/rules/test/browser_rules_edit-property-click.js

@@ -30,13 +30,13 @@ function* testEditPropertyAndCancel(inspector, view) {
   info("Test editor is created when clicking on property name");
   yield focusEditableField(view, propEditor.nameSpan);
   ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
 
   info("Test editor is created when clicking on ':' next to property name");
   let nameRect = propEditor.nameSpan.getBoundingClientRect();
   yield focusEditableField(view, propEditor.nameSpan, nameRect.width + 1);
   ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
 
   info("Test editor is created when clicking on property value");
   yield focusEditableField(view, propEditor.valueSpan);
@@ -45,7 +45,7 @@ function* testEditPropertyAndCancel(inspector, view) {
   // a modification to make sure the property is back to its original value
   // => need to wait on "ruleview-changed" to avoid unhandled promises
   let onRuleviewChanged = view.once("ruleview-changed");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
   yield onRuleviewChanged;
 
   info("Test editor is created when clicking on ';' next to property value");
@@ -56,14 +56,6 @@ function* testEditPropertyAndCancel(inspector, view) {
   // a modification to make sure the property is back to its original value
   // => need to wait on "ruleview-changed" to avoid unhandled promises
   onRuleviewChanged = view.once("ruleview-changed");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_ESCAPE"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
   yield onRuleviewChanged;
 }
-
-function* sendCharsAndWaitForFocus(view, element, chars) {
-  let onFocus = once(element, "focus", true);
-  for (let ch of chars) {
-    EventUtils.sendChar(ch, view.styleWindow);
-  }
-  yield onFocus;
-}

devtools/client/inspector/rules/test/browser_rules_edit-property_03.js

@@ -34,25 +34,17 @@ add_task(function*() {
 
   info("Deleting all the text out of a value field");
   let onRuleViewChanged = view.once("ruleview-changed");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element,
-    ["VK_DELETE", "VK_RETURN"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element,
+    ["DELETE", "RETURN"]);
   yield onRuleViewChanged;
 
   info("Pressing enter a couple times to cycle through editors");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
   onRuleViewChanged = view.once("ruleview-changed");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
+  yield sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
   yield onRuleViewChanged;
 
   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(view, element, chars) {
-  let onFocus = once(element, "focus", true);
-  for (let ch of chars) {
-    EventUtils.sendChar(ch, element.ownerDocument.defaultView);
-  }
-  yield onFocus;
-}

devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js

@@ -32,7 +32,8 @@ add_task(function*() {
   // Value is focused, lets add multiple rules here and make sure they get added
   onMutation = inspector.once("markupmutation");
   onRuleViewChanged = view.once("ruleview-changed");
-  let valueEditor = ruleEditor.propertyList.children[1].querySelector("input");
+  let valueEditor = ruleEditor.propertyList.children[1].
+    querySelector(".styleinspector-propertyeditor");
   valueEditor.value = "10px;background:orangered;color: black;";
   EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
   yield onMutation;

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

@@ -877,3 +877,24 @@ function* addNewRule(inspector, view) {
   info("Waiting for rule view to change");
   yield view.once("ruleview-changed");
 }
+
+/**
+ * Simulate a sequence of non-character keys (return, escape, tab) and wait for
+ * a given element to receive the focus.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {DOMNode} element
+ *        The element that should be focused
+ * @param {Array} keys
+ *        Array of non-character keys, the part that comes after "DOM_VK_" eg.
+ *        "RETURN", "ESCAPE"
+ * @return a promise that resolves after the element received the focus
+ */
+function* sendKeysAndWaitForFocus(view, element, keys) {
+  let onFocus = once(element, "focus", true);
+  for (let key of keys) {
+    EventUtils.sendKey(key, view.styleWindow);
+  }
+  yield onFocus;
+}