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 453606 b7e4f51b79a9
parent 453605 922c3f0e3d8c
child 453607 1f686d42d43e
push id35361
push usernbeleuzu@mozilla.com
push dateSat, 12 Jan 2019 09:41:19 +0000
treeherdermozilla-central@a44934afe25e [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,
   })),