Bug 1527062 - Show a declaration has changed in the new rules view. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 28 Feb 2019 14:29:37 -0500
changeset 519987 2c8674d20ba67335e850efd59ce5a7c1ad4811f7
parent 519986 0ce0e1ad2096d014f2a6d58d20ba8f9f143dd96b
child 519988 a5009e4ff8296c813335469174a1b7753e8a017d
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1527062
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1527062 - Show a declaration has changed in the new rules view. r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D21589
devtools/client/inspector/rules/components/Declaration.js
devtools/client/inspector/rules/models/text-property.js
devtools/client/inspector/rules/reducers/rules.js
devtools/client/inspector/rules/types.js
devtools/client/themes/rules.css
--- a/devtools/client/inspector/rules/components/Declaration.js
+++ b/devtools/client/inspector/rules/components/Declaration.js
@@ -174,27 +174,33 @@ class Declaration extends PureComponent 
   }
 
   render() {
     const {
       computedProperties,
       isEnabled,
       isKnownProperty,
       isOverridden,
+      isPropertyChanged,
       name,
       value,
     } = this.props.declaration;
 
+    let declarationClassName = "ruleview-property";
+
+    if (!isEnabled || !isKnownProperty || isOverridden) {
+      declarationClassName += " ruleview-overridden";
+    }
+
+    if (isPropertyChanged) {
+      declarationClassName += " ruleview-changed";
+    }
+
     return (
-      dom.li(
-        {
-          className: "ruleview-property" +
-                     (!isEnabled || !isKnownProperty || isOverridden ?
-                      " ruleview-overridden" : ""),
-        },
+      dom.li({ className: declarationClassName },
         dom.div({ className: "ruleview-propertycontainer" },
           dom.div({
             className: "ruleview-enableproperty theme-checkbox" +
                         (isEnabled ? " checked" : ""),
             onClick: this.onToggleDeclarationClick,
             tabIndex: -1,
           }),
           dom.span({ className: "ruleview-namecontainer" },
--- a/devtools/client/inspector/rules/models/text-property.js
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -41,18 +41,20 @@ class TextProperty {
   constructor(rule, name, value, priority, enabled = true, invisible = false) {
     this.id = name + "_" + generateUUID().toString();
     this.rule = rule;
     this.name = name;
     this.value = value;
     this.priority = priority;
     this.enabled = !!enabled;
     this.invisible = invisible;
-    this.cssProperties = this.rule.elementStyle.ruleView.cssProperties;
-    this.panelDoc = this.rule.elementStyle.ruleView.inspector.panelDoc;
+    this.elementStyle = this.rule.elementStyle;
+    this.cssProperties = this.elementStyle.ruleView.cssProperties;
+    this.panelDoc = this.elementStyle.ruleView.inspector.panelDoc;
+    this.userProperties = this.elementStyle.store.userProperties;
 
     this.updateComputed();
   }
 
   get computedProperties() {
     return this.computed
       .filter(computed => computed.name !== this.name)
       .map(computed => {
@@ -61,25 +63,35 @@ class TextProperty {
           name: computed.name,
           priority: computed.priority,
           value: computed.value,
         };
       });
   }
 
   /**
-   * See whether this property's name is known.
+   * Returns whether or not the declaration's name is known.
    *
-   * @return {Boolean} true if the property name is known, false otherwise.
+   * @return {Boolean} true if the declaration name is known, false otherwise.
    */
   get isKnownProperty() {
     return this.cssProperties.isKnown(this.name);
   }
 
   /**
+   * Returns whether or not the declaration is changed by the user.
+   *
+   * @return {Boolean} true if the declaration is changed by the user, false
+   * otherwise.
+   */
+  get isPropertyChanged() {
+    return this.userProperties.contains(this.rule.domRule, this.name);
+  }
+
+  /**
    * Update the editor associated with this text property,
    * if any.
    */
   updateEditor() {
     if (this.editor) {
       this.editor.update();
     }
   }
@@ -90,17 +102,17 @@ class TextProperty {
   updateComputed() {
     if (!this.name) {
       return;
     }
 
     // This is a bit funky.  To get the list of computed properties
     // for this text property, we'll set the property on a dummy element
     // and see what the computed style looks like.
-    const dummyElement = this.rule.elementStyle.ruleView.dummyElement;
+    const dummyElement = this.elementStyle.ruleView.dummyElement;
     const dummyStyle = dummyElement.style;
     dummyStyle.cssText = "";
     dummyStyle.setProperty(this.name, this.value, this.priority);
 
     this.computed = [];
 
     // Manually get all the properties that are set when setting a value on
     // this.name and check the computed style on dummyElement for each one.
@@ -134,20 +146,18 @@ class TextProperty {
     }
 
     if (changed) {
       this.updateEditor();
     }
   }
 
   setValue(value, priority, force = false) {
-    const store = this.rule.elementStyle.store;
-
     if (value !== this.value || force) {
-      store.userProperties.setProperty(this.rule.domRule, this.name, value);
+      this.userProperties.setProperty(this.rule.domRule, this.name, value);
     }
 
     return this.rule.setPropertyValue(this, value, priority)
       .then(() => this.updateEditor());
   }
 
   /**
    * Called when the property's value has been updated externally, and
@@ -160,18 +170,17 @@ class TextProperty {
     if (value !== this.value) {
       this.value = value;
       this.updateEditor();
     }
   }
 
   async setName(name) {
     if (name !== this.name) {
-      const store = this.rule.elementStyle.store;
-      store.userProperties.setProperty(this.rule.domRule, name, this.value);
+      this.userProperties.setProperty(this.rule.domRule, name, this.value);
     }
 
     await this.rule.setPropertyName(this, name);
     this.updateEditor();
   }
 
   setEnabled(value) {
     this.rule.setPropertyEnabled(this, value);
--- a/devtools/client/inspector/rules/reducers/rules.js
+++ b/devtools/client/inspector/rules/reducers/rules.js
@@ -51,16 +51,18 @@ function getDeclarationState(declaration
     // inherited declarations are shown and the rest are considered invisible.
     isInvisible: declaration.invisible,
     // Whether or not the declaration's property name is known.
     isKnownProperty: declaration.isKnownProperty,
     // Whether or not the property name is valid.
     isNameValid: declaration.isNameValid(),
     // Whether or not the the declaration is overridden.
     isOverridden: !!declaration.overridden,
+    // Whether or not the declaration is changed by the user.
+    isPropertyChanged: declaration.isPropertyChanged,
     // The declaration's property name.
     name: declaration.name,
     // The declaration's priority (either "important" or an empty string).
     priority: declaration.priority,
     // The CSS rule id that is associated with this CSS declaration.
     ruleId,
     // The declaration's property value.
     value: declaration.value,
--- a/devtools/client/inspector/rules/types.js
+++ b/devtools/client/inspector/rules/types.js
@@ -51,16 +51,19 @@ const declaration = exports.declaration 
   isKnownProperty: PropTypes.bool,
 
   // Whether or not the property name is valid.
   isNameValid: PropTypes.bool,
 
   // Whether or not the the declaration is overridden.
   isOverridden: PropTypes.bool,
 
+  // Whether or not the declaration is changed by the user.
+  isPropertyChanged: PropTypes.bool,
+
   // The declaration's property name.
   name: PropTypes.string,
 
   // The declaration's priority (either "important" or an empty string).
   priority: PropTypes.string,
 
   // The declaration's property value.
   value: PropTypes.string,
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -556,16 +556,17 @@
   clear: both;
   padding-left: 28px;
 }
 
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
 }
 
+.ruleview-property.ruleview-changed,
 .ruleview-property[dirty] {
   border-left-color: var(--theme-highlight-green);
 }
 
 .ruleview-highlight > .ruleview-expander,
 .ruleview-highlight > .ruleview-namecontainer,
 .ruleview-highlight > .ruleview-propertyvaluecontainer,
 .ruleview-highlight > .ruleview-rule-source-label,