Bug 1241126 - ruleview property: open editor for prop. name on click on ":";r=gl

When clicking on the ":" next to the name of a property, the editor is now opened
for the name of the property instead of the value,

Added a test to check this behaviour as well.

--HG--
extra : commitid : IPqHIwjcHna

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

@@ -78,6 +78,7 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_rules_custom.js]
 [browser_rules_cycle-color.js]
 [browser_rules_edit-property-cancel.js]
+[browser_rules_edit-property-click.js]
 [browser_rules_edit-property-commit.js]
 [browser_rules_edit-property-computed.js]
 [browser_rules_edit-property-increments.js]

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

@@ -0,0 +1,69 @@
+/* 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 the property name and value editors can be triggered when
+// clicking on the property-name, the property-value, the colon or semicolon.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    margin: 0;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode("#testid", inspector);
+  yield testEditPropertyAndCancel(inspector, view);
+});
+
+function* testEditPropertyAndCancel(inspector, view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let propEditor = ruleEditor.rule.textProps[0].editor;
+
+  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"]);
+
+  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"]);
+
+  info("Test editor is created when clicking on property value");
+  yield focusEditableField(view, propEditor.valueSpan);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // 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 onRuleviewChanged;
+
+  info("Test editor is created when clicking on ';' next to property value");
+  let valueRect = propEditor.valueSpan.getBoundingClientRect();
+  yield focusEditableField(view, propEditor.valueSpan, valueRect.width + 1);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // 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 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/views/text-property-editor.js

@@ -118,14 +118,14 @@ TextPropertyEditor.prototype = {
     // Create a span that will hold the property and semicolon.
     // Use this span to create a slightly larger click target
     // for the value.
-    let propertyContainer = createChild(this.container, "span", {
+    this.valueContainer = createChild(this.container, "span", {
       class: "ruleview-propertyvaluecontainer"
     });
 
     // Property value, editable when focused.  Changes to the
     // property value are applied as they are typed, and reverted
     // if the user presses escape.
-    this.valueSpan = createChild(propertyContainer, "span", {
+    this.valueSpan = createChild(this.valueContainer, "span", {
       class: "ruleview-propertyvalue theme-fg-color1",
       tabindex: this.ruleEditor.isEditable ? "0" : "-1",
     });
@@ -149,7 +149,7 @@ TextPropertyEditor.prototype = {
                        value: parsedValue,
                        priority: this.prop.priority };
 
-    appendText(propertyContainer, ";");
+    appendText(this.valueContainer, ";");
 
     this.warning = createChild(this.container, "div", {
       class: "ruleview-warning",
@@ -183,7 +183,9 @@ TextPropertyEditor.prototype = {
       this.nameContainer.addEventListener("click", (event) => {
         // Clicks within the name shouldn't propagate any further.
         event.stopPropagation();
-        if (event.target === propertyContainer) {
+
+        // Forward clicks on nameContainer to the editable nameSpan
+        if (event.target === this.nameContainer) {
           this.nameSpan.click();
         }
       }, false);
@@ -202,11 +204,12 @@ TextPropertyEditor.prototype = {
       this.nameContainer.addEventListener("paste",
         blurOnMultipleProperties, false);
 
-      propertyContainer.addEventListener("click", (event) => {
+      this.valueContainer.addEventListener("click", (event) => {
         // Clicks within the value shouldn't propagate any further.
         event.stopPropagation();
 
-        if (event.target === propertyContainer) {
+        // Forward clicks on valueContainer to the editable valueSpan
+        if (event.target === this.valueContainer) {
           this.valueSpan.click();
         }
       }, false);