DevTools: [SSP] update ranges for all section in sidebar pane

There is a bug due to which source ranges in inherited styles sections
and pseudo elements style sections are not updated on the front-end
as the editing happens. This patch fixes it.

BUG=430129
R=vsevik

Review URL: https://codereview.chromium.org/698113006

git-svn-id: svn://svn.chromium.org/blink/trunk@184861 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -368,11 +368,17 @@ InspectorTest.getElementStylePropertyTreeItem = function(propertyName)
 // FIXME: this returns the first tree item found (may fail for same-named properties in a style).
 InspectorTest.getMatchedStylePropertyTreeItem = function(propertyName)
 {
-    var styleSections = WebInspector.panels.elements.sidebarPanes.styles.sections[0];
-    for (var i = 1; i < styleSections.length; ++i) {
-        var treeItem = InspectorTest.getFirstPropertyTreeItemForSection(styleSections[i], propertyName);
-        if (treeItem)
-            return treeItem;
+    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 section = styleSections[i];
+            if (section.computedStyle)
+                continue;
+            var treeItem = InspectorTest.getFirstPropertyTreeItemForSection(section, propertyName);
+            if (treeItem)
+                return treeItem;
+        }
     }
     return null;
 };

third_party/WebKit/LayoutTests/inspector/elements/styles/styles-update-links-expected.txt

 Tests that removal of property following its disabling works.
 
 Red text here.
+
+Running: selectInitialNode
+
+Running: testInsertProperty
 [expanded] 
 element.style  { ()
 
@@ -92,6 +96,8 @@ display: block;
 3 rule ranges are equal.
 0 rule ranges are equal.
 
+Running: testEditSelector
+
 
 #### AFTER SELECTOR EDIT ####
 
@@ -144,6 +150,8 @@ display: block;
 3 rule ranges are equal.
 0 rule ranges are equal.
 
+Running: testDisableProperty
+
 
 #### AFTER PROPERTY DISABLED ####
 
@@ -196,3 +204,42 @@ display: block;
 3 rule ranges are equal.
 0 rule ranges are equal.
 
+Running: selectNodeWithPseudoElements
+
+Running: testPseudoSectionPropertyEdit
+
+
+#### AFTER PROPERTY INSERTED ####
+
+
+[expanded] 
+element.style  { ()
+
+[expanded] 
+article, aside, footer, header, hgroup, main, nav, section  { (user agent stylesheet)
+display: block;
+
+
+======== Pseudo ::before element ========
+[expanded] 
+#pseudo::before  { (styles-update-links.html:213 -> styles-update-links.html:213:1)
+color: blue;
+
+
+======== Pseudo ::after element ========
+[expanded] 
+#pseudo::after  { (styles-update-links.html:209 -> styles-update-links.html:209:1)
+border: 1px solid black;
+
+[expanded] 
+#pseudo::after  { (styles-update-links.html:203 -> styles-update-links.html:203:1)
+/-- overloaded --/ pseudo-property: "12";
+/-- overloaded --/ PROPERTY: INSERTED;
+color: red;
+
+
+0 rule ranges are equal.
+3 rule ranges are equal.
+3 rule ranges are equal.
+5 rule ranges are equal.
+

third_party/WebKit/LayoutTests/inspector/elements/styles/styles-update-links.html

@@ -75,20 +75,20 @@ function test()
         return true;
     }
 
-    function validateRuleRanges(rules, callback)
+    function validateRuleRanges(selector, rules, callback)
     {
         InspectorTest.selectNodeAndWaitForStyles("other", onOtherSelected);
 
         function onOtherSelected()
         {
-            InspectorTest.selectNodeAndWaitForStyles("container", onContainerSelected);
+            InspectorTest.selectNodeAndWaitForStyles(selector, onContainerSelected);
         }
 
         function onContainerSelected()
         {
             var fetchedRules = getMatchedRules();
             if (fetchedRules.length !== rules.length) {
-                InspectorTest.addResult("Error: rules sizes are not equal!");
+                InspectorTest.addResult(String.sprintf("Error: rules sizes are not equal! Expected: %d, actual: %d", fetchedRules.length, rules.length));
                 InspectorTest.completeTest();
                 return;
             }
@@ -104,70 +104,115 @@ function test()
 
     function getMatchedRules()
     {
-        var matchedStyleSections = WebInspector.panels.elements.sidebarPanes.styles.sections[0];
         var rules = [];
-        for (var i = 1; i < matchedStyleSections.length; ++i) {
-            var rule = matchedStyleSections[i].rule;
-            if (rule)
-                rules.push(rule);
+        for (var pseudoId in WebInspector.panels.elements.sidebarPanes.styles.sections) {
+            var matchedStyleSections = WebInspector.panels.elements.sidebarPanes.styles.sections[pseudoId];
+            for (var i = 0; i < matchedStyleSections.length; ++i) {
+                var section = matchedStyleSections[i];
+                if (section.computedStyle)
+                    continue;
+                var rule = section.rule;
+                if (rule)
+                    rules.push(rule);
+            }
         }
         return rules;
     }
 
-    function insertProperty()
-    {
-        InspectorTest.dumpSelectedElementStyles(true, false, true);
-        var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
-        var treeElement = treeItem.section().addNewBlankProperty(1);
-        InspectorTest.waitForStyleApplied(onPropertyInserted);
-        treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
-    }
-
-    function onPropertyInserted()
-    {
-        InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\n\n");
-        InspectorTest.dumpSelectedElementStyles(true, false, true);
-        var rules = getMatchedRules();
-        validateRuleRanges(rules, editSelector);
-    }
+    InspectorTest.runTestSuite([
+        function selectInitialNode(next)
+        {
+            InspectorTest.selectNodeAndWaitForStyles("container", next);
+        },
 
-    function editSelector()
-    {
-        var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][4];
-        section.startEditingSelector();
-        section._selectorElement.textContent = ".should-change, .INSERTED-OTHER-SELECTOR";
-        InspectorTest.waitForSelectorCommitted(onSelectorEdited);
-        section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
-    }
+        function testInsertProperty(next)
+        {
+            InspectorTest.dumpSelectedElementStyles(true, false, true);
+            var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color");
+            var treeElement = treeItem.section().addNewBlankProperty(1);
+            InspectorTest.waitForStyleApplied(onPropertyInserted);
+            treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
+
+            function onPropertyInserted()
+            {
+                InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTION ####\n\n");
+                InspectorTest.dumpSelectedElementStyles(true, false, true);
+                var rules = getMatchedRules();
+                validateRuleRanges("container", rules, next);
+            }
+        },
 
-    function onSelectorEdited()
-    {
-        InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n");
-        InspectorTest.dumpSelectedElementStyles(true, false, true);
-        var rules = getMatchedRules();
-        validateRuleRanges(rules, disableProperty);
-    }
+        function testEditSelector(next)
+        {
+            var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][4];
+            section.startEditingSelector();
+            section._selectorElement.textContent = ".should-change, .INSERTED-OTHER-SELECTOR";
+            InspectorTest.waitForSelectorCommitted(onSelectorEdited);
+            section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
+
+            function onSelectorEdited()
+            {
+                InspectorTest.addResult("\n\n#### AFTER SELECTOR EDIT ####\n\n");
+                InspectorTest.dumpSelectedElementStyles(true, false, true);
+                var rules = getMatchedRules();
+                validateRuleRanges("container", rules, next);
+            }
+        },
 
-    function disableProperty()
-    {
-        var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border");
-        InspectorTest.waitForStyleApplied(onPropertyDisabled);
-        treeItem.toggleEnabled({ target: { checked: false }, consume: function() { } });
-    }
+        function testDisableProperty(next)
+        {
+            var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border");
+            InspectorTest.waitForStyleApplied(onPropertyDisabled);
+            treeItem.toggleEnabled({ target: { checked: false }, consume: function() { } });
+
+            function onPropertyDisabled()
+            {
+                InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
+                InspectorTest.dumpSelectedElementStyles(true, false, true);
+                var rules = getMatchedRules();
+                validateRuleRanges("container", rules, next);
+            }
+        },
 
-    function onPropertyDisabled()
-    {
-        InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n\n");
-        InspectorTest.dumpSelectedElementStyles(true, false, true);
-        var rules = getMatchedRules();
-        validateRuleRanges(rules, InspectorTest.completeTest.bind(InspectorTest));
-    }
+        function selectNodeWithPseudoElements(next)
+        {
+            InspectorTest.selectNodeAndWaitForStyles("pseudo", next);
+        },
 
-    InspectorTest.selectNodeAndWaitForStyles("container", insertProperty);
+        function testPseudoSectionPropertyEdit(next)
+        {
+            var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("pseudo-property");
+            var treeElement = treeItem.section().addNewBlankProperty(1);
+            InspectorTest.waitForStyleApplied(onPropertyInserted);
+            treeElement.applyStyleText("PROPERTY: INSERTED;", true, true);
+
+            function onPropertyInserted()
+            {
+                InspectorTest.addResult("\n\n#### AFTER PROPERTY INSERTED ####\n\n");
+                InspectorTest.dumpSelectedElementStyles(true, false, true);
+                var rules = getMatchedRules();
+                validateRuleRanges("pseudo", rules, next);
+            }
+        },
+    ]);
 }
 </script>
 <link rel="stylesheet" href="resources/styles-update-links-2.css"></link>
 <link rel="stylesheet" href="resources/styles-update-links.css"></link>
+<style>
+#pseudo::after {
+    pseudo-property: "12";
+    color: red;
+}
+
+#pseudo::after {
+    border: 1px solid black;
+}
+
+#pseudo::before {
+    color: blue;
+}
+</style>
 </head>
 
 <body onload="runTest()">
@@ -181,5 +226,7 @@ Red text here.
 
 <div id="other"></div>
 
+<section id="pseudo"></div>
+
 </body>
 </html>

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

@@ -266,9 +266,15 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
     {
-        var styleRuleSections = this.sections[0];
-        for (var i = 1; i < styleRuleSections.length; ++i)
-            styleRuleSections[i]._styleSheetRuleEdited(editedRule, oldRange, newRange);
+        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;
+                section._styleSheetRuleEdited(editedRule, oldRange, newRange);
+            }
+        }
     },
 
     /**