Bug 761665: [rule view] double clicking on a property value does weird things. r=paul

browser/devtools/styleinspector/CssRuleView.jsm

@@ -1551,8 +1551,11 @@ TextPropertyEditor.prototype = {
       class: "ruleview-namecontainer"
     });
     this.nameContainer.addEventListener("click", function(aEvent) {
-      this.nameSpan.click();
+      // Clicks within the name shouldn't propagate any further.
       aEvent.stopPropagation();
+      if (aEvent.target === propertyContainer) {
+        this.nameSpan.click();
+      }
     }.bind(this), false);
 
     // Property name, editable when focused.  Property name
@@ -1578,8 +1581,11 @@ TextPropertyEditor.prototype = {
       class: "ruleview-propertycontainer"
     });
     propertyContainer.addEventListener("click", function(aEvent) {
-      this.valueSpan.click();
+      // Clicks within the value shouldn't propagate any further.
       aEvent.stopPropagation();
+      if (aEvent.target === propertyContainer) {
+        this.valueSpan.click();
+      }
     }.bind(this), false);
 
     // Property value, editable when focused.  Changes to the
@@ -1746,6 +1752,10 @@ TextPropertyEditor.prototype = {
   _onNameDone: function TextPropertyEditor_onNameDone(aValue, aCommit)
   {
     if (!aCommit) {
+      if (this.prop.overridden) {
+        this.element.classList.add("ruleview-overridden");
+      }
+
       return;
     }
     if (!aValue) {
@@ -2305,4 +2315,3 @@ XPCOMUtils.defineLazyGetter(this, "_strings", function() {
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
-

browser/devtools/styleinspector/test/browser_ruleview_ui.js

@@ -88,7 +88,15 @@ function testCreateNew()
   let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
   waitForEditorFocus(elementRuleEditor.element, function onNewElement(aEditor) {
     is(inplaceEditor(elementRuleEditor.newPropSpan), aEditor, "Next focused editor should be the new property editor.");
+
     let input = aEditor.input;
+
+    ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
+
+    // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
+    EventUtils.synthesizeMouse(input, 1, 1, { }, ruleDialog);
+    input.select();
+
     input.value = "background-color";
 
     waitForEditorFocus(elementRuleEditor.element, function onNewValue(aEditor) {
@@ -121,12 +129,28 @@ function testEditProperty()
   let propEditor = idRuleEditor.rule.textProps[0].editor;
   waitForEditorFocus(propEditor.element, function onNewElement(aEditor) {
     is(inplaceEditor(propEditor.nameSpan), aEditor, "Next focused editor should be the name editor.");
+
     let input = aEditor.input;
+
+    dump("SELECTION END IS: " + input.selectionEnd + "\n");
+    ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
+
+    // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
+    EventUtils.synthesizeMouse(input, 1, 1, { }, ruleDialog);
+    input.select();
+
     waitForEditorFocus(propEditor.element, function onNewName(aEditor) {
       expectChange();
-      input = aEditor.input;
       is(inplaceEditor(propEditor.valueSpan), aEditor, "Focus should have moved to the value.");
 
+      input = aEditor.input;
+
+      ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
+
+      // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
+      EventUtils.synthesizeMouse(input, 1, 1, { }, ruleDialog);
+      input.select();
+
       waitForEditorBlur(aEditor, function() {
         expectChange();
         is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",