Bug 733747 - Highlight changed items in the rule view. r=msucan

browser/devtools/styleinspector/CssRuleView.jsm

@@ -438,8 +438,13 @@ Rule.prototype = {
    * Reapply all the properties in this rule, and update their
    * computed styles.  Store disabled properties in the element
    * style's store.  Will re-mark overridden properties.
+   *
+   * @param {string} [aName]
+   *        A text property name (such as "background" or "border-top") used
+   *        when calling from setPropertyValue & setPropertyName to signify that
+   *        the property should be saved in store.userProperties.
    */
-  applyProperties: function Rule_applyProperties()
+  applyProperties: function Rule_applyProperties(aName)
   {
     let disabledProps = [];
     let store = this.elementStyle.store;
@@ -454,7 +459,9 @@ Rule.prototype = {
         continue;
       }
 
-      store.userProperties.setProperty(this.style, prop.name, prop.value);
+      if (aName && prop.name == aName) {
+        store.userProperties.setProperty(this.style, prop.name, prop.value);
+      }
 
       this.style.setProperty(prop.name, prop.value, prop.priority);
       // Refresh the property's priority from the style, to reflect
@@ -486,7 +493,7 @@ Rule.prototype = {
     }
     this.style.removeProperty(aProperty.name);
     aProperty.name = aName;
-    this.applyProperties();
+    this.applyProperties(aName);
   },
 
   /**
@@ -506,7 +513,7 @@ Rule.prototype = {
     }
     aProperty.value = aValue;
     aProperty.priority = aPriority;
-    this.applyProperties();
+    this.applyProperties(aProperty.name);
   },
 
   /**
@@ -1422,7 +1429,8 @@ TextPropertyEditor.prototype = {
       this.element.classList.remove("ruleview-overridden");
     }
 
-    this.nameSpan.textContent = this.prop.name;
+    let name = this.prop.name;
+    this.nameSpan.textContent = name;
 
     // Combine the property's value and priority into one string for
     // the value.
@@ -1433,6 +1441,14 @@ TextPropertyEditor.prototype = {
     this.valueSpan.textContent = val;
     this.warning.hidden = this._validate();
 
+    let store = this.prop.rule.elementStyle.store;
+    let propDirty = store.userProperties.contains(this.prop.rule.style, name);
+    if (propDirty) {
+      this.element.setAttribute("dirty", "");
+    } else {
+      this.element.removeAttribute("dirty");
+    }
+
     // Populate the computed styles.
     this._updateComputed();
   },
@@ -1879,6 +1895,19 @@ UserProperties.prototype = {
       this.weakMap.set(aStyle, props);
     }
   },
+
+  /**
+   * Check whether a named property for a given CSSStyleDeclaration is stored.
+   *
+   * @param {CSSStyleDeclaration} aStyle
+   *        The CSSStyleDeclaration against which the property would be mapped.
+   * @param {String} aName
+   *        The name of the property to check.
+   */
+  contains: function UP_contains(aStyle, aName) {
+    let entry = this.weakMap.get(aStyle, null);
+    return !!entry && aName in entry;
+  },
 };
 
 /**

browser/devtools/styleinspector/test/browser_ruleview_ui.js

@@ -155,6 +155,12 @@ function testEditProperty()
         expectChange();
         is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",
            "border-color should have been set.");
+
+        let props = ruleView.element.querySelectorAll(".ruleview-property");
+        for (let i = 0; i < props.length; i++) {
+          is(props[i].hasAttribute("dirty"), i <= 1,
+            "props[" + i + "] marked dirty as appropriate");
+        }
         testDisableProperty();
       });
 

browser/themes/gnomestripe/devtools/csshtmltree.css

@@ -276,3 +276,11 @@
   padding: 0;
   box-shadow: 2px 2px 2px #CCC;
 }
+
+.ruleview-property {
+  border-left: 2px solid transparent;
+}
+
+.ruleview-property[dirty] {
+  border-left-color: #68E268;
+}

browser/themes/pinstripe/devtools/csshtmltree.css

@@ -278,3 +278,11 @@
   padding: 0;
   box-shadow: 2px 2px 2px #CCC;
 }
+
+.ruleview-property {
+  border-left: 2px solid transparent;
+}
+
+.ruleview-property[dirty] {
+  border-left-color: #68E268;
+}

browser/themes/winstripe/devtools/csshtmltree.css

@@ -277,3 +277,11 @@
   padding: 0;
   box-shadow: 2px 2px 2px #CCC;
 }
+
+.ruleview-property {
+  border-left: 2px solid transparent;
+}
+
+.ruleview-property[dirty] {
+  border-left-color: #68E268;
+}