DevTools: [SSP] refactoring to remove styleRule.section property

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 115 matching lines @@
         format = (color.hasAlpha() ? cf.HSLA : cf.HSL);
     else if (!color.hasAlpha())
         format = (color.canBeShortHex() ? cf.ShortHEX : cf.HEX);
     else
         format = cf.RGBA;
 
     return format;
 }
 
 /**
+ * @return {boolean}
+ */
+WebInspector.StylesSidebarPane._affectsNode = function(styleRule)

[vsevik, 2014/11/05 08:04:50]

Let's name it _hasMatchingSelectors

[lushnikov, 2014/11/05 11:02:17]

Done.

+{
+    return styleRule.rule ? styleRule.rule.matchingSelectors.length > 0 : true;
+}
+
+/**
  * @param {!WebInspector.CSSProperty} property
  */
 WebInspector.StylesSidebarPane._ignoreErrorsForProperty = function(property) {
     function hasUnknownVendorPrefix(string)
     {
         return !string.startsWith("-webkit-") && /^[-_][\w\d]+-\w/.test(string);
     }
 
     var name = property.name.toLowerCase();
 
@@ skipping 478 matching lines @@
     },
 
     _canAffectCurrentStyles: function(node)
     {
         return this._node && (this._node === node || node.parentNode === this._node.parentNode || node.isAncestor(this._node));
     },
 
     _innerRefreshUpdate: function(node, computedStyle, editedSection)
     {
         for (var pseudoId in this.sections) {
-            var styleRules = this._refreshStyleRules(this.sections[pseudoId], computedStyle);
+            var filteredSections = this.sections[pseudoId] ? this.sections[pseudoId].filter(nonBlankSections) : [];
+            var styleRules = this._refreshStyleRules(filteredSections, computedStyle);
             var usedProperties = {};
             this._markUsedProperties(styleRules, usedProperties);
-            this._refreshSectionsForStyleRules(styleRules, usedProperties, editedSection);
+            this._refreshSectionsForStyleRules(filteredSections, styleRules, usedProperties, editedSection);
         }
         if (computedStyle)
             this.sections[0][0].rebuildComputedTrace(this.sections[0]);
 
         this._nodeStylesUpdatedForTest(node, false);
+
+        /**
+         * @param {!WebInspector.PropertiesSection} section
+         * @return {boolean}
+         */
+        function nonBlankSections(section)
+        {
+            return !section.isBlank;
+        }
     },
 
     _innerRebuildUpdate: function(node, styles)
     {
         this._sectionsContainer.removeChildren();
         this._computedStylePane.bodyElement.removeChildren();
         this._linkifier.reset();
 
         var styleRules = this._rebuildStyleRules(node, styles);
         var usedProperties = {};
@@ skipping 31 matching lines @@
     {
         // Tests override this method.
     },
 
     _refreshStyleRules: function(sections, computedStyle)
     {
         var nodeComputedStyle = computedStyle;
         var styleRules = [];
         for (var i = 0; sections && i < sections.length; ++i) {
             var section = sections[i];
-            if (section.isBlank)
-                continue;
             if (section.computedStyle)
                 section.styleRule.style = nodeComputedStyle;
-            var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.styleRule.style && section.styleRule.style.styleSheetId),
+            var styleRule = { style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.styleRule.style && section.styleRule.style.styleSheetId),
                 isAttribute: section.styleRule.isAttribute, isInherited: section.styleRule.isInherited, parentNode: section.styleRule.parentNode };
             styleRules.push(styleRule);
         }
         return styleRules;
     },
 
     _rebuildStyleRules: function(node, styles)
     {
         var nodeComputedStyle = styles.computedStyle;
         this.sections = {};
@@ skipping 78 matching lines @@
 
     _markUsedProperties: function(styleRules, usedProperties)
     {
         var foundImportantProperties = {};
         var propertyToEffectiveRule = {};
         var inheritedPropertyToNode = {};
         for (var i = 0; i < styleRules.length; ++i) {
             var styleRule = styleRules[i];
             if (styleRule.computedStyle || styleRule.isStyleSeparator)
                 continue;
-            if (styleRule.section && styleRule.section.noAffect)
+            if (!WebInspector.StylesSidebarPane._affectsNode(styleRule))
                 continue;
 
             styleRule.usedProperties = {};
 
             var style = styleRule.style;
             var allProperties = style.allProperties;
             for (var j = 0; j < allProperties.length; ++j) {
                 var property = allProperties[j];
                 if (!property.isLive || !property.parsedOk)
                     continue;
@@ skipping 22 matching lines @@
                         delete propertyToEffectiveRule[canonicalName].usedProperties[canonicalName];
                 }
 
                 styleRule.usedProperties[canonicalName] = true;
                 usedProperties[canonicalName] = true;
                 propertyToEffectiveRule[canonicalName] = styleRule;
             }
         }
     },
 
-    _refreshSectionsForStyleRules: function(styleRules, usedProperties, editedSection)
+    _refreshSectionsForStyleRules: function(sections, styleRules, usedProperties, editedSection)
     {
         // Walk the style rules and update the sections with new overloaded and used properties.
         for (var i = 0; i < styleRules.length; ++i) {
             var styleRule = styleRules[i];
-            var section = styleRule.section;
+            var section = sections[i];
             if (styleRule.computedStyle) {
                 section._usedProperties = usedProperties;
                 section.update();
             } else {
                 section._usedProperties = styleRule.usedProperties;
                 section.update(section === editedSection);
             }
         }
     },
 
@@ skipping 569 matching lines @@
         return false;
     },
 
     /**
      * @param {string} propertyName
      * @param {boolean=} isShorthand
      * @return {boolean}
      */
     isPropertyOverloaded: function(propertyName, isShorthand)
     {
-        if (!this._usedProperties || this.noAffect)
+        if (!this._usedProperties || !WebInspector.StylesSidebarPane._affectsNode(this.styleRule))
             return false;
 
         if (this.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(propertyName)) {
             // In the inherited sections, only show overrides for the potentially inherited properties.
             return false;
         }
 
         var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName);
         var used = (canonicalName in this._usedProperties);
         if (used || !isShorthand)
@@ skipping 77 matching lines @@
     },
 
     _afterUpdateFinishedForTest: function()
     {
     },
 
     onpopulate: function()
     {
         var style = this.styleRule.style;
         var allProperties = style.allProperties;
-        this.uniqueProperties = [];
 
         var styleHasEditableSource = this.editable && !!style.range;
         if (styleHasEditableSource) {
             for (var i = 0; i < allProperties.length; ++i) {
                 var property = allProperties[i];
-                this.uniqueProperties.push(property);
                 if (property.styleBased)
                     continue;
 
                 var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
                 var inherited = this.isPropertyInherited(property.name);
                 var overloaded = property.inactive || this.isPropertyOverloaded(property.name);
                 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
                 this.propertiesTreeOutline.appendChild(item);
             }
             return;
         }
 
         var generatedShorthands = {};
         // For style-based properties, generate shorthands with values when possible.
         for (var i = 0; i < allProperties.length; ++i) {
             var property = allProperties[i];
-            this.uniqueProperties.push(property);
             var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
 
             // For style-based properties, try generating shorthands.
             var shorthands = isShorthand ? null : WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name);
             var shorthandPropertyAvailable = false;
             for (var j = 0; shorthands && !shorthandPropertyAvailable && j < shorthands.length; ++j) {
                 var shorthand = shorthands[j];
                 if (shorthand in generatedShorthands) {
                     shorthandPropertyAvailable = true;
                     continue;  // There already is a shorthand this longhands falls under.
@@ skipping 44 matching lines @@
     },
 
     _markSelectorMatches: function()
     {
         var rule = this.styleRule.rule;
         if (!rule)
             return;
 
         var matchingSelectors = rule.matchingSelectors;
         // .selector is rendered as non-affecting selector by default.
-        if (this.noAffect || matchingSelectors)
+        if (!WebInspector.StylesSidebarPane._affectsNode(this.styleRule) || matchingSelectors)
             this._selectorElement.className = "selector";
         if (!matchingSelectors)
             return;
 
         var selectors = rule.selectors;
         var fragment = createDocumentFragment();
         var currentMatch = 0;
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.createTextChild(", ");
@@ skipping 241 matching lines @@
 
         var selectedNode = this._parentPane._node;
 
         /**
          * @param {!WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
         function successCallback(newRule)
         {
             var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
-            if (!doesAffectSelectedNode) {
-                this.noAffect = true;
-                this.element.classList.add("no-affect");
-            } else {
-                delete this.noAffect;
-                this.element.classList.remove("no-affect");
-            }
+            this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
 
             var oldSelectorRange = this.rule.selectorRange;
             this.rule = newRule;
-            this.styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, rule: newRule };
+            this.styleRule = { style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, rule: newRule };
 
             this._parentPane.update(selectedNode);
             this._parentPane._styleSheetRuleEdited(this.rule, oldSelectorRange, this.rule.selectorRange);
 
             finishOperationAndMoveEditor.call(this, moveDirection);
         }
 
         /**
          * @this {WebInspector.StylePropertiesSection}
          */
@@ skipping 144 matching lines @@
                 name.textContent = WebInspector.UIString("Animation") + " " + this._animationProperties[property];
                 treeElement.appendChild(new TreeElement(fragment, null, false));
             }
         }
 
         for (var i = 0; i < sections.length; ++i) {
             var section = sections[i];
             if (section.computedStyle || section.isBlank)
                 continue;
 
-            for (var j = 0; j < section.uniqueProperties.length; ++j) {
-                var property = section.uniqueProperties[j];
+            var properties = section.styleRule.style.allProperties;
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
                 if (property.disabled)
                     continue;
                 if (section.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name))
                     continue;
 
                 var treeElement = this._propertyTreeElements[property.name.toLowerCase()];
                 if (treeElement) {
                     var fragment = createDocumentFragment();
                     var selector = fragment.createChild("span");
                     selector.style.color = "gray";
@@ skipping 86 matching lines @@
             return;
         }
 
         /**
          * @param {!WebInspector.CSSRule} newRule
          * @this {WebInspector.StylePropertiesSection}
          */
         function successCallback(newRule)
         {
             var doesSelectorAffectSelectedNode = newRule.matchingSelectors.length > 0;
-            var styleRule = { media: newRule.media, section: this, style: newRule.style, selectorText: newRule.selectorText, rule: newRule };
+            var styleRule = { media: newRule.media, style: newRule.style, selectorText: newRule.selectorText, rule: newRule };
             this._makeNormal(styleRule);
 
-            if (!doesSelectorAffectSelectedNode) {
-                this.noAffect = true;
+            if (!doesSelectorAffectSelectedNode)
                 this.element.classList.add("no-affect");
-            }
 
             var ruleTextLines = ruleText.split("\n");
             var startLine = this._ruleLocation.startLine;
             var startColumn = this._ruleLocation.startColumn;
             var newRange = new WebInspector.TextRange(startLine, startColumn, startLine + ruleTextLines.length - 1, startColumn + ruleTextLines[ruleTextLines.length - 1].length);
             this._parentPane._styleSheetRuleEdited(newRule, this._ruleLocation, newRange);
 
             this._updateRuleOrigin();
             this.expand();
             if (this.element.parentElement) // Might have been detached already.
@@ skipping 1474 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }