Bug 1198326 - Prevent event propagation on click events of the inplace editor;r=bgrins

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

@@ -93,6 +93,7 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_rules_edit-property_06.js]
 [browser_rules_edit-property_07.js]
 [browser_rules_edit-property_08.js]
+[browser_rules_edit-selector-click.js]
 [browser_rules_edit-selector-commit.js]
 [browser_rules_edit-selector_01.js]
 [browser_rules_edit-selector_02.js]

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

@@ -0,0 +1,63 @@
+/* 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";
+
+// Testing selector inplace-editor remains available and focused after clicking
+// in its input.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(function*() {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode(".testclass", inspector);
+  yield testClickOnSelectorEditorInput(view);
+});
+
+function* testClickOnSelectorEditorInput(view) {
+  info("Test clicking inside the selector editor input");
+
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  let editor = yield focusEditableField(view, ruleEditor.selectorText);
+  let editorInput = editor.input;
+  is(inplaceEditor(ruleEditor.selectorText), editor,
+    "The selector editor got focused");
+
+  info("Click inside the editor input");
+  let onClick = once(editorInput, "click");
+  EventUtils.synthesizeMouse(editor.input, 1, 1, {}, view.styleWindow);
+  yield onClick;
+  is(editor.input, view.styleDocument.activeElement,
+    "The editor input should still be focused");
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Doubleclick inside the editor input");
+  let onDoubleClick = once(editorInput, "dblclick");
+  EventUtils.synthesizeMouse(editor.input, 1, 1, { clickCount: 2 },
+    view.styleWindow);
+  yield onDoubleClick;
+  is(editor.input, view.styleDocument.activeElement,
+    "The editor input should still be focused");
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Click outside the editor input");
+  let onBlur = once(editorInput, "blur");
+  let rect = editorInput.getBoundingClientRect();
+  EventUtils.synthesizeMouse(editorInput, rect.width + 5, 0, {},
+    view.styleWindow);
+  yield onBlur;
+
+  isnot(editorInput, view.styleDocument.activeElement,
+    "The editor input should no longer be focused");
+}

devtools/client/shared/inplace-editor.js

@@ -251,11 +251,9 @@ function InplaceEditor(options, event) {
   this.input.addEventListener("blur", this._onBlur, false);
   this.input.addEventListener("keypress", this._onKeyPress, false);
   this.input.addEventListener("input", this._onInput, false);
-
-  this.input.addEventListener("dblclick",
-    (e) => { e.stopPropagation(); }, false);
-  this.input.addEventListener("mousedown",
-    (e) => { e.stopPropagation(); }, false);
+  this.input.addEventListener("dblclick", this._stopEventPropagation, false);
+  this.input.addEventListener("click", this._stopEventPropagation, false);
+  this.input.addEventListener("mousedown", this._stopEventPropagation, false);
 
   this.validate = options.validate;
 
@@ -306,7 +304,11 @@ InplaceEditor.prototype = {
     this.input.removeEventListener("blur", this._onBlur, false);
     this.input.removeEventListener("keypress", this._onKeyPress, false);
     this.input.removeEventListener("keyup", this._onKeyup, false);
-    this.input.removeEventListener("oninput", this._onInput, false);
+    this.input.removeEventListener("input", this._onInput, false);
+    this.input.removeEventListener("dblclick", this._stopEventPropagation, false);
+    this.input.removeEventListener("click", this._stopEventPropagation, false);
+    this.input.removeEventListener("mousedown", this._stopEventPropagation, false);
+
     this._stopAutosize();
 
     this.elt.style.display = this.originalDisplay;
@@ -1063,6 +1065,13 @@ InplaceEditor.prototype = {
     }
   },
 
+  /**
+   * Stop propagation on the provided event
+   */
+  _stopEventPropagation: function(e) {
+    e.stopPropagation();
+  },
+
   /**
    * Fire validation callback with current input
    */