DevTools: [SSP] render selectors effectively

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

Index: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
index a2f9a351584786e5a17aacf3c2a3b950061aaa08..5e005c8fa16a9075513af59ca6179713c79afbd8 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -566,8 +566,13 @@ WebInspector.StylesSidebarPane.prototype = {
         if (this._elementUnderMouse && event.target !== this._elementUnderMouse)
             this._discardElementUnderMouse();
         this._elementUnderMouse = event.target;
-        if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)))
+        if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event))) {
             this._elementUnderMouse.classList.add("styles-panel-hovered");
+            var selectorElement = this._elementUnderMouse.enclosingNodeOrSelfWithClass("selector");

[pfeldman, 2016/07/15 21:13:01]

Both are ugly. please fetch section object instead.

[lushnikov, 2016/07/15 21:26:04]

As per offline discussion, I'll simplify this code in a follow-up

+            var sectionElement = selectorElement ? selectorElement.enclosingNodeOrSelfWithClass("styles-section") : null;
+            if (sectionElement)
+                sectionElement._section.setHoverableSelectorsMode(true);

[pfeldman, 2016/07/15 21:13:01]

makeHoverableSelectorsMode()

[lushnikov, 2016/07/15 21:26:04]

Done.

+        }
     },
 
     /**
@@ -1185,6 +1190,17 @@ WebInspector.StylePropertiesSection.prototype = {
         return !hideRule;
     },
 
+    /**
+     * @param {boolean} value
+     */
+    setHoverableSelectorsMode: function(value)
+    {
+        if (this._hoverableSelectorsMode === value)
+            return;
+        this._hoverableSelectorsMode = value;
+        this._markSelectorMatches();
+    },
+
     _markSelectorMatches: function()
     {
         var rule = this._style.parentRule;
@@ -1196,29 +1212,72 @@ WebInspector.StylePropertiesSection.prototype = {
         if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
             return;
 
-        var selectors = rule.selectors;
+        var selectorTexts = rule.selectors.map(selector => selector.text);
+
+        var matchingSelectorIndexes = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
+        var matchingSelectors = new Array(selectorTexts.length).fill(false);
+        for (var matchingIndex of matchingSelectorIndexes)
+            matchingSelectors[matchingIndex] = true;
+
+        var fragment = this._hoverableSelectorsMode ? this._renderHoverableSelectors(selectorTexts, matchingSelectors) : this._renderSimplifiedSelectors(selectorTexts, matchingSelectors);
+        this._selectorElement.removeChildren();
+        this._selectorElement.appendChild(fragment);
+        this._markSelectorHighlights();
+    },
+
+    /**
+     * @param {!Array<string>} selectors
+     * @param {!Array<boolean>} matchingSelectors
+     * @return {!DocumentFragment}
+     */
+    _renderHoverableSelectors: function(selectors, matchingSelectors)
+    {
         var fragment = createDocumentFragment();
-        var currentMatch = 0;
-        var matchingSelectors = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.createTextChild(", ");
-            var isSelectorMatching = matchingSelectors[currentMatch] === i;
-            if (isSelectorMatching)
-                ++currentMatch;
-            var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
-            var selectorElement = createElement("span");
-            selectorElement.className = "simple-selector" + matchingSelectorClass;
-            if (rule.styleSheetId)
-                selectorElement._selectorIndex = i;
-            selectorElement.textContent = selectors[i].text;
-
-            fragment.appendChild(selectorElement);
+            fragment.appendChild(this._createSelectorElement(selectors[i], matchingSelectors[i], i));
         }
+        return fragment;
+    },
 
-        this._selectorElement.removeChildren();
-        this._selectorElement.appendChild(fragment);
-        this._markSelectorHighlights();
+    /**
+     * @param {string} text
+     * @param {boolean} isMatching
+     * @param {number=} navigationIndex
+     * @return {!Element}
+     */
+    _createSelectorElement: function(text, isMatching, navigationIndex)
+    {
+        var element = createElementWithClass("span", "simple-selector");
+        element.classList.toggle("selector-matches", isMatching);
+        if (typeof navigationIndex === "number")
+            element._selectorIndex = navigationIndex;
+        element.textContent = text;
+        return element;
+    },
+
+    /**
+     * @param {!Array<string>} selectors
+     * @param {!Array<boolean>} matchingSelectors
+     * @return {!DocumentFragment}
+     */
+    _renderSimplifiedSelectors: function(selectors, matchingSelectors)
+    {
+        var fragment = createDocumentFragment();
+        var currentMatching = false;
+        var text = "";
+        for (var i = 0; i < selectors.length; ++i) {
+            if (currentMatching !== matchingSelectors[i] && text) {
+                fragment.appendChild(this._createSelectorElement(text, currentMatching));
+                text = "";
+            }
+            currentMatching = matchingSelectors[i];
+            text += selectors[i] + (i === selectors.length - 1 ? "" : ", ");
+        }
+        if (text)
+            fragment.appendChild(this._createSelectorElement(text, currentMatching));
+        return fragment;
     },
 
     _markSelectorHighlights: function()