Bug 1521407 - Avoid rendering the computed property list if it is not necessary. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 21 Jan 2019 14:38:00 -0500
changeset 514775 8ae27ed8d8618522cd921dd85c51b500ad9f11a9
parent 514774 7d46c1872ba7920465cdf33b52672a374a66e360
child 514776 9cd21938464de36b922639cb91b5f92d3ff7a502
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1521407
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 1521407 - Avoid rendering the computed property list if it is not necessary. r=rcaliman - Avoid rendering the computed property list is not expanded. - Avoid rendering the shorthand overridden computed property list if there is no overridden properties in the computed property list.
devtools/client/inspector/rules/components/Declaration.js
--- a/devtools/client/inspector/rules/components/Declaration.js
+++ b/devtools/client/inspector/rules/components/Declaration.js
@@ -41,31 +41,29 @@ class Declaration extends PureComponent 
 
   onToggleDeclarationClick(event) {
     event.stopPropagation();
     const { id, ruleId } = this.props.declaration;
     this.props.onToggleDeclaration(ruleId, id);
   }
 
   renderComputedPropertyList() {
-    const { computedProperties } = this.props.declaration;
-
-    if (!computedProperties.length) {
+    if (!this.state.isComputedListExpanded) {
       return null;
     }
 
     return (
       dom.ul(
         {
           className: "ruleview-computedlist",
           style: {
-            display: this.state.isComputedListExpanded ? "block" : "",
+            display: "block",
           },
         },
-        computedProperties.map(({ name, value, isOverridden }) => {
+        this.props.declaration.computedProperties.map(({ name, value, isOverridden }) => {
           return (
             dom.li(
               {
                 key: `${name}${value}`,
                 className: "ruleview-computed" +
                            (isOverridden ? " ruleview-overridden" : ""),
               },
               dom.span({ className: "ruleview-namecontainer" },
@@ -79,29 +77,30 @@ class Declaration extends PureComponent 
             )
           );
         })
       )
     );
   }
 
   renderShorthandOverriddenList() {
-    const { declaration } = this.props;
+    if (this.state.isComputedListExpanded || this.props.declaration.isOverridden) {
+      return null;
+    }
 
-    if (this.state.isComputedListExpanded || declaration.isOverridden) {
+    const overriddenComputedProperties = this.props.declaration.computedProperties
+      .filter(prop => prop.isOverridden);
+
+    if (!overriddenComputedProperties.length) {
       return null;
     }
 
     return (
       dom.ul({ className: "ruleview-overridden-items" },
-        declaration.computedProperties.map(({ name, value, isOverridden }) => {
-          if (!isOverridden) {
-            return null;
-          }
-
+        overriddenComputedProperties.map(({ name, value }) => {
           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),