Bug 1518850 - Add the computed property list and shorthand overridden list. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 11 Jan 2019 14:31:10 -0500
changeset 510709 b7e4f51b79a9c739be5e661025fd7e3534031073
parent 510708 922c3f0e3d8cd9c7f8fe752ce38a5df6db19d3fe
child 510710 1f686d42d43ebd73b045dd16d1c167a0ed3e55f7
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1518850
milestone66.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 1518850 - Add the computed property list and shorthand overridden list. r=rcaliman
devtools/client/inspector/rules/components/Declaration.js
devtools/client/inspector/rules/models/text-property.js
devtools/client/inspector/rules/types.js
--- a/devtools/client/inspector/rules/components/Declaration.js
+++ b/devtools/client/inspector/rules/components/Declaration.js
@@ -12,19 +12,112 @@ const Types = require("../types");
 
 class Declaration extends PureComponent {
   static get propTypes() {
     return {
       declaration: PropTypes.shape(Types.declaration).isRequired,
     };
   }
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Whether or not the computed property list is expanded.
+      isComputedListExpanded: false,
+    };
+
+    this.onComputedExpanderClick = this.onComputedExpanderClick.bind(this);
+  }
+
+  onComputedExpanderClick(event) {
+    event.stopPropagation();
+
+    this.setState(prevState => {
+      return { isComputedListExpanded: !prevState.isComputedListExpanded };
+    });
+  }
+
+  renderComputedPropertyList() {
+    const { computedProperties } = this.props.declaration;
+
+    if (!computedProperties.length) {
+      return null;
+    }
+
+    return (
+      dom.ul(
+        {
+          className: "ruleview-computedlist",
+          style: {
+            display: this.state.isComputedListExpanded ? "block" : "",
+          },
+        },
+        computedProperties.map(({ name, value, isOverridden }) => {
+          return (
+            dom.li(
+              {
+                key: `${name}${value}`,
+                className: "ruleview-computed" +
+                           (isOverridden ? " ruleview-overridden" : ""),
+              },
+              dom.span({ className: "ruleview-namecontainer" },
+                dom.span({ className: "ruleview-propertyname theme-fg-color5" }, name),
+                ": "
+              ),
+              dom.span({ className: "ruleview-propertyvaluecontainer" },
+                dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),
+                ";"
+              )
+            )
+          );
+        })
+      )
+    );
+  }
+
+  renderShorthandOverriddenList() {
+    const { declaration } = this.props;
+
+    if (this.state.isComputedListExpanded || declaration.isOverridden) {
+      return null;
+    }
+
+    return (
+      dom.ul({ className: "ruleview-overridden-items" },
+        declaration.computedProperties.map(({ name, value, isOverridden }) => {
+          if (!isOverridden) {
+            return null;
+          }
+
+          return (
+            dom.li(
+              {
+                key: `${name}${value}`,
+                className: "ruleview-overridden-item ruleview-overridden",
+              },
+              dom.span({ className: "ruleview-namecontainer" },
+                dom.span({ className: "ruleview-propertyname theme-fg-color5" }, name),
+                ": "
+              ),
+              dom.span({ className: "ruleview-propertyvaluecontainer" },
+                dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),
+                ";"
+              )
+            )
+          );
+        })
+      )
+    );
+  }
+
   render() {
     const { declaration } = this.props;
     const {
+      computedProperties,
       isEnabled,
       isKnownProperty,
       isOverridden,
       name,
       value,
     } = declaration;
 
     return (
@@ -39,19 +132,27 @@ class Declaration extends PureComponent 
             className: "ruleview-enableproperty theme-checkbox" +
                         (isEnabled ? " checked" : ""),
             tabIndex: -1,
           }),
           dom.span({ className: "ruleview-namecontainer" },
             dom.span({ className: "ruleview-propertyname theme-fg-color5" }, name),
             ": "
           ),
+          dom.span({
+            className: "ruleview-expander theme-twisty" +
+                       (this.state.isComputedListExpanded ? " open" : ""),
+            onClick: this.onComputedExpanderClick,
+            style: { display: computedProperties.length ? "inline-block" : "none" },
+          }),
           dom.span({ className: "ruleview-propertyvaluecontainer" },
             dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),
             ";"
           )
-        )
+        ),
+        this.renderComputedPropertyList(),
+        this.renderShorthandOverriddenList()
       )
     );
   }
 }
 
 module.exports = Declaration;
--- a/devtools/client/inspector/rules/models/text-property.js
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -44,23 +44,26 @@ function TextProperty(rule, name, value,
   this.cssProperties = this.rule.elementStyle.ruleView.cssProperties;
   this.panelDoc = this.rule.elementStyle.ruleView.inspector.panelDoc;
 
   this.updateComputed();
 }
 
 TextProperty.prototype = {
   get computedProperties() {
-    return this.computed.map(computed => {
-      return {
-        name: computed.name,
-        priority: computed.priority,
-        value: computed.value,
-      };
-    });
+    return this.computed
+      .filter(computed => computed.name !== this.name)
+      .map(computed => {
+        return {
+          isOverridden: computed.overridden,
+          name: computed.name,
+          priority: computed.priority,
+          value: computed.value,
+        };
+      });
   },
 
   /**
    * See whether this property's name is known.
    *
    * @return {Boolean} true if the property name is known, false otherwise.
    */
   get isKnownProperty() {
--- a/devtools/client/inspector/rules/types.js
+++ b/devtools/client/inspector/rules/types.js
@@ -7,16 +7,18 @@
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 /**
  * A CSS declaration.
  */
 const declaration = exports.declaration = {
   // Array of the computed properties for a CSS declaration.
   computedProperties: PropTypes.arrayOf(PropTypes.shape({
+    // Whether or not the computed property is overridden.
+    isOverridden: PropTypes.bool,
     // The computed property name.
     name: PropTypes.string,
     // The computed priority (either "important" or an empty string).
     priority: PropTypes.string,
     // The computed property value.
     value: PropTypes.string,
   })),