DevTools: [SSP] refactor internal representations of sections

LayoutTests/http/tests/inspector/elements-test.js

 var initialize_ElementTest = function() {
 
 InspectorTest.preloadPanel("elements");
 
 InspectorTest.inlineStyleSection = function()
 {
-    return WebInspector.panels.elements.sidebarPanes.styles.sections[0][0];
+    return WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks[0].sections()[0];
 }
 
 InspectorTest.computedStyleSidebarPane = function()
 {
     return WebInspector.panels.elements.sidebarPanes.styles._computedStylePane;
 }
 
 InspectorTest.dumpComputedStyle = function()
 {
     var computed = InspectorTest.computedStyleSidebarPane();
@@ skipping 15 matching lines @@
         var item = items[i];
         var property = item[WebInspector.ComputedStyleSidebarPane._propertySymbol];
         if (property.name === name)
             return item;
     }
     return null;
 }
 
 InspectorTest.firstMatchedStyleSection = function()
 {
-    return WebInspector.panels.elements.sidebarPanes.styles.sections[0][1];
+    return WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks[0].sections()[1];
 }
 
 InspectorTest.firstMediaTextElementInSection = function(section)
 {
     return section.element.querySelector(".media-text");
 }
 
 InspectorTest.findNode = function(matchFunction, callback)
 {
     callback = InspectorTest.safeWrap(callback);
@@ skipping 198 matching lines @@
 
 InspectorTest.filterMatchedStyles = function(text)
 {
     var regex = text ? new RegExp(text, "i") : null;
     InspectorTest.addResult("Filtering styles by: " + text);
     WebInspector.panels.elements.sidebarPanes.styles._onFilterChanged(regex);
 }
 
 InspectorTest.dumpRenderedMatchedStyles = function()
 {
-    var styleSections = WebInspector.panels.elements.sidebarPanes.styles.sections;
-    for (var pseudoId in styleSections) {
-        var sections = styleSections[pseudoId].slice();
-        for (var i = 0; i < sections.length; ++i) {
-            var section = sections[i];
+    var sectionBlocks = WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks;
+    for (var block of sectionBlocks) {
+        for (var section of block.sections()) {
             // Skip sections which were filtered out.
             if (section.element.classList.contains("hidden"))
                 continue;
             dumpRenderedSection(section);
         }
     }
 
     function dumpRenderedSection(section)
     {
         InspectorTest.addResult(section._selectorElement.textContent + " {");
@@ skipping 25 matching lines @@
             text += String.sprintf("%s: %s", childProperty.nameElement.textContent, childProperty.valueElement.textContent);
             if (childProperty.listItemElement.classList.contains("filter-match"))
                 text = "F" + text.substring(1);
             InspectorTest.addResult(text);
         }
     }
 }
 
 InspectorTest.dumpSelectedElementStyles = function(excludeComputed, excludeMatched, omitLonghands, includeSelectorGroupMarks)
 {
-    var styleSections = WebInspector.panels.elements.sidebarPanes.styles.sections;
+    var sectionBlocks = WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks;
     if (!excludeComputed)
         InspectorTest.dumpComputedStyle();
-    for (var pseudoId in styleSections) {
-        var sections = styleSections[pseudoId].slice();
-        for (var i = 0; i < sections.length; ++i) {
-            var section = sections[i];
+    for (var block of sectionBlocks) {
+        for (var section of block.sections()) {
             if (section.rule() && excludeMatched)
                 continue;
             if (section.element.previousSibling && section.element.previousSibling.className === "sidebar-separator") {
                 var nodeDescription = "";
                 if (section.element.previousSibling.firstElementChild)
                     nodeDescription = section.element.previousSibling.firstElementChild.shadowRoot.lastChild.textContent;
                 InspectorTest.addResult("======== " + section.element.previousSibling.textContent + nodeDescription + " ========");
             }
             printStyleSection(section, omitLonghands, includeSelectorGroupMarks);
         }
-        InspectorTest.addResult("");
     }
 }
 
 function printStyleSection(section, omitLonghands, includeSelectorGroupMarks)
 {
     if (!section)
         return;
     InspectorTest.addResult("[expanded] " + (section.element.classList.contains("no-affect") ? "[no-affect] " : ""));
     var chainEntries = section.titleElement.querySelectorAll(".media-list .media");
     chainEntries = Array.prototype.slice.call(chainEntries);
@@ skipping 122 matching lines @@
 
 // FIXME: this returns the first tree item found (may fail for same-named properties in a style).
 InspectorTest.getElementStylePropertyTreeItem = function(propertyName)
 {
     return InspectorTest.getFirstPropertyTreeItemForSection(InspectorTest.inlineStyleSection(), propertyName);
 };
 
 // FIXME: this returns the first tree item found (may fail for same-named properties in a style).
 InspectorTest.getMatchedStylePropertyTreeItem = function(propertyName)
 {
-    var sections = WebInspector.panels.elements.sidebarPanes.styles.sections;
-    for (var pseudoId in sections) {
-        var styleSections = sections[pseudoId];
-        for (var i = 0; i < styleSections.length; ++i) {
-            var treeItem = InspectorTest.getFirstPropertyTreeItemForSection(styleSections[i], propertyName);
+    var sectionBlocks = WebInspector.panels.elements.sidebarPanes.styles._sectionBlocks;
+    for (var block of sectionBlocks) {
+        for (var section of block.sections()) {
+            var treeItem = InspectorTest.getFirstPropertyTreeItemForSection(section, propertyName);
             if (treeItem)
                 return treeItem;
         }
     }
     return null;
 };
 
 InspectorTest.getFirstPropertyTreeItemForSection = function(section, propertyName)
 {
     var outline = section.propertiesTreeOutline.rootElement();
@@ skipping 481 matching lines @@
     for (var nodeUI of timeline._nodesMap.values()) {
         for (nodeRow of nodeUI._rows) {
             for (var ui of nodeRow.animations) {
                 InspectorTest.addResult(ui._svg.innerHTML);
             }
         }
     }
 }
 
 };