Web Inspector: Improve runtime of pseudo-element sidebar style ordering

https://bugs.webkit.org/show_bug.cgi?id=146866

Reviewed by Timothy Hatcher.

* UserInterface/Models/CSSRule.js:
(WebInspector.CSSRule.prototype.update): Determines the most specific selector and saves it to a variable.
(WebInspector.CSSRule.prototype.get mostSpecificSelector): Returns the most specific selector.
(WebInspector.CSSRule.prototype.selectorIsGreater): Compares the most specific selector to a given selector.
(WebInspector.CSSRule.prototype._determineMostSpecificSelector):
Searches through the selector list to find and return the selector that is the most specific.
(WebInspector.CSSRule):
* UserInterface/Views/RulesStyleDetailsPanel.js:
(WebInspector.RulesStyleDetailsPanel.prototype.refresh):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@186717 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 261394d..1d4ec12 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,22 @@
 2015-07-11  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Improve runtime of pseudo-element sidebar style ordering
+        https://bugs.webkit.org/show_bug.cgi?id=146866
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Models/CSSRule.js:
+        (WebInspector.CSSRule.prototype.update): Determines the most specific selector and saves it to a variable.
+        (WebInspector.CSSRule.prototype.get mostSpecificSelector): Returns the most specific selector.
+        (WebInspector.CSSRule.prototype.selectorIsGreater): Compares the most specific selector to a given selector.
+        (WebInspector.CSSRule.prototype._determineMostSpecificSelector):
+        Searches through the selector list to find and return the selector that is the most specific.
+        (WebInspector.CSSRule):
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh):
+
+2015-07-11  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Warning icon tooltip for numbers with no units could be improved
         https://bugs.webkit.org/show_bug.cgi?id=146859
 

diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
index 611d3b9..ad12168 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
@@ -80,6 +80,7 @@ WebInspector.CSSRule = class CSSRule extends WebInspector.Object
         this._selectorText = selectorText;
         this._selectors = selectors;
         this._matchedSelectorIndices = matchedSelectorIndices;
+        this._mostSpecificSelector = null;
         this._style = style;
         this._mediaList = mediaList;
 
@@ -182,30 +183,22 @@ WebInspector.CSSRule = class CSSRule extends WebInspector.Object
         return Object.shallowEqual(this._id, rule.id);
     }
 
-    selectorIsGreater(otherSelectors)
+    get mostSpecificSelector()
     {
-        if (!otherSelectors || !otherSelectors.length)
-            return true;
+        if (!this._mostSpecificSelector)
+            this._mostSpecificSelector = this._determineMostSpecificSelector();
 
-        var selectorIsGreater = true;
-
-        var selectors = this.matchedSelectors;
-        if (!selectors.length)
-            selectors = this._selectors;
-
-        for (var selector of selectors) {
-            for (var otherSelector of otherSelectors) {
-                if (selector.isGreaterThan(otherSelector))
-                    continue;
+        return this._mostSpecificSelector;
+    }
 
-                selectorIsGreater = false;
-            }
+    selectorIsGreater(otherSelector)
+    {
+        var mostSpecificSelector = this.mostSpecificSelector;
 
-            if (selectorIsGreater)
-                return true;
-        }
+        if (!mostSpecificSelector)
+            return false;
 
-        return false;
+        return mostSpecificSelector.isGreaterThan(otherSelector);
     }
 
     // Protected
@@ -214,6 +207,28 @@ WebInspector.CSSRule = class CSSRule extends WebInspector.Object
     {
         return this._nodeStyles;
     }
+
+    // Private
+
+    _determineMostSpecificSelector()
+    {
+        if (!this._selectors || !this._selectors.length)
+            return null;
+
+        var selectors = this.matchedSelectors;
+
+        if (!selectors.length)
+            selectors = this._selectors;
+
+        var specificSelector = selectors[0];
+
+        for (var selector of selectors) {
+            if (selector.isGreaterThan(specificSelector))
+                specificSelector = selector;
+        }
+
+        return specificSelector;
+    }
 };
 
 WebInspector.CSSRule.Event = {

diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
index 7bb4c56..a676dd4 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
@@ -279,7 +279,7 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
                         continue;
                     }
 
-                    if (matchedSelectorText.includes(pseudoElement.selectorText) || !ownerRule.selectorIsGreater(pseudoElement.style.ownerRule.selectors))
+                    if (matchedSelectorText.includes(pseudoElement.selectorText) || !ownerRule.selectorIsGreater(pseudoElement.style.ownerRule.mostSpecificSelector))
                         pseudoElement.lastMatchingSelector = matchedSelectorText;
                 }
             }