DevTools: [SSP] refactor internal representations of sections

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 237 matching lines @@
 
     /**
      * @param {!WebInspector.CSSRule} editedRule
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
      */
     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
     {
         if (!editedRule.styleSheetId)
             return;
-        for (var pseudoId in this.sections) {
-            var styleRuleSections = this.sections[pseudoId];
-            for (var i = 0; i < styleRuleSections.length; ++i) {
-                var section = styleRuleSections[i];
-                if (section.computedStyle)
-                    continue;
+        for (var block of this._sectionBlocks) {
+            for (var section of block.sections)
                 section._styleSheetRuleEdited(editedRule, oldRange, newRange);
-            }
         }
     },
 
     /**
      * @param {!WebInspector.CSSMedia} oldMedia
      * @param {!WebInspector.CSSMedia}  newMedia
      */
     _styleSheetMediaEdited: function(oldMedia, newMedia)
     {
         if (!oldMedia.parentStyleSheetId)
             return;
-        for (var pseudoId in this.sections) {
-            var styleRuleSections = this.sections[pseudoId];
-            for (var i = 0; i < styleRuleSections.length; ++i) {
-                var section = styleRuleSections[i];
-                if (section.computedStyle)
-                    continue;
+        for (var block of this._sectionBlocks) {
+            for (var section of block.sections)
                 section._styleSheetMediaEdited(oldMedia, newMedia);
-            }
         }
     },
 
     /**
      * @param {!Event} event
      */
     _contextMenuEventFired: function(event)
     {
         // We start editing upon click -> default navigation to resources panel is not available
         // Hence we add a soft context menu for hrefs.
@@ skipping 107 matching lines @@
         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
         this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._updateAnimationsPlaybackRate, this);
         this._updateAnimationsPlaybackRate();
     },
 
     /**
      * @param {!WebInspector.StylePropertiesSection=} editedSection
      */
     _refreshUpdate: function(editedSection)
     {
-        var node = this._validateNode();
+        var node = this.node();
         if (!node)
             return;
 
-        this._innerRefreshUpdate(node, editedSection);
+        for (var block of this._sectionBlocks) {
+            for (var section of block.sections) {
+                if (section.isBlank)
+                    continue;
+                section.update(section === editedSection);
+            }
+        }
+
+        this._computedStylePane.update();
         if (this._filterRegex)
             this._updateFilter();
+        this._nodeStylesUpdatedForTest(node, false);
     },
 
     /**
      * @override
      * @param {!WebInspector.Throttler.FinishCallback} finishedCallback
      */
     doUpdate: function(finishedCallback)
     {
         this._updateForcedPseudoStateInputs();
 
-        var node = this._validateNode();
-        if (!node) {
-            finishedCallback();
-            return;
-        }
-
         this._fetchMatchedCascade()
             .then(this._innerRebuildUpdate.bind(this))
             .then(finishedCallback);
     },
 
     _resetCache: function()
     {
         delete this._matchedCascadePromise;
         this._resetComputedCache();
     },
@@ skipping 163 matching lines @@
                 var keyframes = player.source().keyframesRule().keyframes();
                 for (var j = 0; j < keyframes.length; j++)
                     animationCascade.appendModelFromStyle(keyframes[j].style(), "");
                 for (var property of animationCascade.allUsedProperties())
                     animationProperties.set(property, player.name());
             }
             callback(animationProperties);
         }
     },
 
-    _validateNode: function()
-    {
-        if (!this.node()) {
-            this._sectionsContainer.removeChildren();
-            this.sections = {};
-            return null;
-        }
-        return this.node();
-    },
-
     /**
      * @param {boolean} editing
      */
     setEditingStyle: function(editing)
     {
         this._isEditingStyle = editing;
     },
 
     _styleSheetOrMediaQueryResultChanged: function()
     {
@@ skipping 45 matching lines @@
     /**
      * @param {?WebInspector.DOMNode} node
      */
     _canAffectCurrentStyles: function(node)
     {
         var currentNode = this.node();
         return currentNode && (currentNode === node || node.parentNode === currentNode.parentNode || node.isAncestor(currentNode));
     },
 
     /**
-     * @param {!WebInspector.DOMNode} node
-     * @param {!WebInspector.StylePropertiesSection=} editedSection
-     */
-    _innerRefreshUpdate: function(node, editedSection)
-    {
-        for (var pseudoId in this.sections) {
-            var sections = this.sections[pseudoId].filter(nonBlankSections);
-            for (var section of sections)
-                section.update(section === editedSection);
-        }
-
-        this._computedStylePane.update();
-
-        this._nodeStylesUpdatedForTest(node, false);
-
-        /**
-         * @param {!WebInspector.StylePropertiesSection} section
-         * @return {boolean}
-         */
-        function nonBlankSections(section)
-        {
-            return !section.isBlank;
-        }
-    },
-
-    /**
      * @param {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} cascades
      */
     _innerRebuildUpdate: function(cascades)
     {
         this._linkifier.reset();
         this._sectionsContainer.removeChildren();
-        this.sections = {};
+        this._sectionBlocks = [];
 
         var node = this.node();
         if (!cascades || !node)
             return;
 
+        this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(cascades.matched);
+        var pseudoIds = cascades.pseudo.keysArray().sort();
+        for (var pseudoId of pseudoIds) {
+            var block = WebInspector.SectionBlock.createPseudoIdBlock(pseudoId);
+            var cascade = cascades.pseudo.get(pseudoId);
+            for (sectionModel of cascade.sectionModels()) {
+                var section = new WebInspector.StylePropertiesSection(this, sectionModel);
+                block.sections.push(section);
+            }
+            this._sectionBlocks.push(block);
+        }
+
         if (!!node.pseudoType())
             this._appendTopPadding();
 
-        this.sections[0] = this._rebuildSectionsForStyleRules(cascades.matched);
-        this._computedStylePane.update();
-
-        var pseudoIds = cascades.pseudo.keysArray().sort();
-        for (var pseudoId of pseudoIds) {
-            this._appendSectionPseudoIdSeparator(pseudoId);
-            this.sections[pseudoId] = this._rebuildSectionsForStyleRules(cascades.pseudo.get(pseudoId));
+        for (var block of this._sectionBlocks) {
+            var titleElement = block.titleElement();
+            if (titleElement)
+                this._sectionsContainer.appendChild(titleElement);
+            for (var section of block.sections)
+                this._sectionsContainer.appendChild(section.element);
         }
 
         if (this._filterRegex)
             this._updateFilter();
 
         this._nodeStylesUpdatedForTest(node, true);
+        this._computedStylePane.update();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.StylesSidebarPane.MatchedRulesPayload} styles
      * @return {!Map<number, !WebInspector.SectionCascade>}
      */
     _buildPseudoCascades: function(node, styles)
     {
         var pseudoCascades = new Map();
@@ skipping 83 matching lines @@
     },
 
     _appendTopPadding: function()
     {
         var separatorElement = createElement("div");
         separatorElement.className = "styles-sidebar-placeholder";
         this._sectionsContainer.appendChild(separatorElement);
     },
 
     /**
-     * @param {number} pseudoId
+     * @param {!WebInspector.SectionCascade} matchedCascade
+     * @return {!Array.<!WebInspector.SectionBlock>}
      */
-    _appendSectionPseudoIdSeparator: function(pseudoId)
+    _rebuildSectionsForMatchedStyleRules: function(matchedCascade)
     {
-        var separatorElement = createElement("div");
-        separatorElement.className = "sidebar-separator";
-        var pseudoName = WebInspector.StylesSidebarPane.PseudoIdNames[pseudoId];
-        if (pseudoName)
-            separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoName);
-        else
-            separatorElement.textContent = WebInspector.UIString("Pseudo element");
-        this._sectionsContainer.appendChild(separatorElement);
+        var blocks = [new WebInspector.SectionBlock(null)];
+        var lastParentNode = null;
+        for (var sectionModel of matchedCascade.sectionModels()) {
+            var parentNode = sectionModel.parentNode();
+            if (parentNode && parentNode !== lastParentNode) {
+                lastParentNode = parentNode;
+                var block = WebInspector.SectionBlock.createInheritedNodeBlock(lastParentNode);
+                blocks.push(block);
+            }
+
+            var section = new WebInspector.StylePropertiesSection(this, sectionModel);
+            blocks.peekLast().sections.push(section);
+        }
+        return blocks;
     },
 
     /**
-     * @param {!WebInspector.DOMNode} node
-     */
-    _appendSectionInheritedNodeSeparator: function(node)
-    {
-        var separatorElement = createElement("div");
-        separatorElement.className = "sidebar-separator";
-        var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        separatorElement.createTextChild(WebInspector.UIString("Inherited from") + " ");
-        separatorElement.appendChild(link);
-        this._sectionsContainer.appendChild(separatorElement);
-    },
-
-    /**
-     * @param {!WebInspector.SectionCascade} cascade
-     * @return {!Array.<!WebInspector.StylePropertiesSection>}
-     */
-    _rebuildSectionsForStyleRules: function(cascade)
-    {
-        var sections = [];
-        var lastParentNode = null;
-        for (var sectionModel of cascade.sectionModels()) {
-            var parentNode = sectionModel.parentNode();
-            if (parentNode && parentNode !== lastParentNode) {
-                lastParentNode = parentNode;
-                this._appendSectionInheritedNodeSeparator(lastParentNode);
-            }
-
-            var section = new WebInspector.StylePropertiesSection(this, sectionModel);
-            section._markSelectorMatches();
-            section.onpopulate();
-            this._sectionsContainer.appendChild(section.element);
-            sections.push(section);
-        }
-        return sections;
-    },
-
-    /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      * @return {boolean}
      */
     _containsInherited: function(style)
     {
         var properties = style.allProperties;
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
             // Does this style contain non-overridden inherited property?
             if (property.isLive && WebInspector.CSSMetadata.isPropertyInherited(property.name))
                 return true;
         }
         return false;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _colorFormatSettingChanged: function(event)
     {
-        for (var pseudoId in this.sections) {
-            var sections = this.sections[pseudoId];
-            for (var i = 0; i < sections.length; ++i)
-                sections[i].update(true);
+        for (var block of this._sectionBlocks) {
+            for (var section of block.sections)
+                section.update(true);
         }
     },
 
     /**
      * @param {?Event} event
      */
     _createNewRuleInViaInspectorStyleSheet: function(event)
     {
         var cssModel = this._target.cssModel;
         this._userOperation = true;
@@ skipping 21 matching lines @@
 
         /**
          * @param {string} styleSheetId
          * @param {string} text
          * @this {WebInspector.StylesSidebarPane}
          */
         function onStyleSheetContent(styleSheetId, text)
         {
             var lines = text.split("\n");
             var range = WebInspector.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
-            this._addBlankSection(this.sections[0][0], styleSheetId, range);
+            this._addBlankSection(this._sectionBlocks[0].sections[0], styleSheetId, range);
         }
     },
 
     /**
      * @param {!WebInspector.StylePropertiesSection} insertAfterSection
      * @param {string} styleSheetId
      * @param {!WebInspector.TextRange} ruleLocation
      */
     _addBlankSection: function(insertAfterSection, styleSheetId, ruleLocation)
     {
         this.expand();
         var node = this.node();
         var blankSection = new WebInspector.BlankStylePropertiesSection(this, node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "", styleSheetId, ruleLocation, insertAfterSection.styleRule);
 
         this._sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
-        var index = this.sections[0].indexOf(insertAfterSection);
-        this.sections[0].splice(index + 1, 0, blankSection);
-        blankSection.startEditingSelector();
+        for (var block of this._sectionBlocks) {
+            var index = block.sections.indexOf(insertAfterSection);
+            if (index === -1)
+                continue;
+            block.sections.splice(index + 1, 0, blankSection);
+            blankSection.startEditingSelector();
+        }
     },
 
     /**
      * @param {!WebInspector.StylePropertiesSection} section
      */
     removeSection: function(section)
     {
-        for (var pseudoId in this.sections) {
-            var sections = this.sections[pseudoId];
-            var index = sections.indexOf(section);
+        for (var block of this._sectionBlocks) {
+            var index = block.sections.indexOf(section);
             if (index === -1)
                 continue;
-            sections.splice(index, 1);
+            block.sections.splice(index, 1);
             section.element.remove();
         }
     },
 
     /**
      * @param {!Event} event
      */
     _toggleElementStatePane: function(event)
     {
         event.consume();
@@ skipping 15 matching lines @@
 
         var inputs = [];
         this._elementStatePane.inputs = inputs;
 
         /**
          * @param {!Event} event
          * @this {WebInspector.StylesSidebarPane}
          */
         function clickListener(event)
         {
-            var node = this._validateNode();
+            var node = this.node();
             if (!node)
                 return;
             node.target().cssModel.forcePseudoState(node, event.target.state, event.target.checked);
         }
 
         /**
          * @param {string} state
          * @return {!Element}
          * @this {WebInspector.StylesSidebarPane}
          */
@@ skipping 112 matching lines @@
     /**
      * @return {?RegExp}
      */
     filterRegex: function()
     {
         return this._filterRegex;
     },
 
     _updateFilter: function()
     {
-        for (var pseudoId in this.sections) {
-            var sections = this.sections[pseudoId];
-            for (var i = 0; i < sections.length; ++i) {
-                var section = sections[i];
+        for (var block of this._sectionBlocks) {
+            for (var section of block.sections)
                 section._updateFilter();
-            }
         }
     },
 
     /**
      * @override
      */
     wasShown: function()
     {
         WebInspector.ElementsSidebarPane.prototype.wasShown.call(this);
         this.element.ownerDocument.body.addEventListener("keydown", this._keyDownBound, false);
@@ skipping 100 matching lines @@
         input.value = value;
         input.focus();
         searchHandler();
     }
 
     return input;
 }
 
 /**
  * @constructor
+ * @param {?Element} titleElement
+ */
+WebInspector.SectionBlock = function(titleElement)
+{
+    this._titleElement = titleElement;
+    this.sections = [];
+}
+
+/**
+ * @param {number} pseudoId
+ * @return {!WebInspector.SectionBlock}
+ */
+WebInspector.SectionBlock.createPseudoIdBlock = function(pseudoId)
+{
+    var separatorElement = createElement("div");
+    separatorElement.className = "sidebar-separator";
+    var pseudoName = WebInspector.StylesSidebarPane.PseudoIdNames[pseudoId];
+    if (pseudoName)
+        separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoName);
+    else
+        separatorElement.textContent = WebInspector.UIString("Pseudo element");
+    return new WebInspector.SectionBlock(separatorElement);
+}
+
+/**
+ * @param {!WebInspector.DOMNode} node
+ * @return {!WebInspector.SectionBlock}
+ */
+WebInspector.SectionBlock.createInheritedNodeBlock = function(node)
+{
+    var separatorElement = createElement("div");
+    separatorElement.className = "sidebar-separator";
+    var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+    separatorElement.createTextChild(WebInspector.UIString("Inherited from") + " ");
+    separatorElement.appendChild(link);
+    return new WebInspector.SectionBlock(separatorElement);
+}
+
+WebInspector.SectionBlock.prototype = {
+    /**
+     * @return {?Element}
+     */
+    titleElement: function()
+    {
+        return this._titleElement;
+    }
+}
+
+/**
+ * @constructor
  * @param {!WebInspector.StylesSidebarPane} parentPane
  * @param {!WebInspector.StylesSectionModel} styleRule
  */
 WebInspector.StylePropertiesSection = function(parentPane, styleRule)
 {
     this._parentPane = parentPane;
     this.styleRule = styleRule;
     this.editable = styleRule.editable();
 
     var rule = styleRule.rule();
@@ skipping 49 matching lines @@
     this._updateRuleOrigin();
     selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild);
     this.titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
+
+    this._markSelectorMatches();
+    this.onpopulate();
 }
 
 WebInspector.StylePropertiesSection.prototype = {
     /**
      * @return {?WebInspector.StylePropertiesSection}
      */
     firstSibling: function()
     {
         var parent = this.element.parentElement;
         if (!parent)
@@ skipping 2223 matching lines @@
 
 WebInspector.StylesSidebarPane.MatchedRulesPayload.prototype = {
     /**
      * @return {boolean}
      */
     fulfilled: function()
     {
         return !!(this.matchedCSSRules && this.pseudoElements && this.inherited);
     }
 }