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..085258735a32d3217959513d1814525ca01bb738 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -45,6 +45,7 @@ WebInspector.StylesSidebarPane = function()
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
+    this.element.addEventListener("mouseleave", this._discardElementUnderMouse.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
 
@@ -553,9 +554,37 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _discardElementUnderMouse: function()
     {
+        this._toggleCtrlHoverState(false);
+        this._updateElementsUnderMouse(null, null);
+    },
+
+    /**
+     * @param {?Element} newElement
+     * @param {?WebInspector.StylePropertiesSection} newSection
+     */
+    _updateElementsUnderMouse: function(newElement, newSection)
+    {
+        if (newElement !== this._elementUnderMouse) {
+            if (this._elementUnderMouse)
+                this._elementUnderMouse.classList.remove("styles-panel-hovered");
+            this._elementUnderMouse = newElement;
+        }
+        if (this._sectionUnderMouse !== newSection) {

[pfeldman, 2016/07/14 23:14:41]

I don't think you need sectionUnderMouse field.

[lushnikov, 2016/07/15 00:49:23]

Done.

+            if (this._sectionUnderMouse)
+                this._sectionUnderMouse.setHoverableSelectorsMode(false);
+            this._sectionUnderMouse = newSection;
+        }
+    },
+
+    /**
+     * @param {boolean} value
+     */
+    _toggleCtrlHoverState: function(value)
+    {
         if (this._elementUnderMouse)
-            this._elementUnderMouse.classList.remove("styles-panel-hovered");
-        delete this._elementUnderMouse;
+            this._elementUnderMouse.classList.toggle("styles-panel-hovered", value);
+        if (this._sectionUnderMouse)
+            this._sectionUnderMouse.setHoverableSelectorsMode(value);
     },
 
     /**
@@ -563,11 +592,13 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     _mouseMovedOverElement: function(event)
     {
-        if (this._elementUnderMouse && event.target !== this._elementUnderMouse)
-            this._discardElementUnderMouse();
-        this._elementUnderMouse = event.target;
+        var newElement = /** @type {!Element} */(event.target);
+        var sectionElement = event.target.enclosingNodeOrSelfWithClass("styles-section");
+        var newSection = sectionElement ? sectionElement._section : null;
+        this._updateElementsUnderMouse(newElement, newSection);
+
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)))
-            this._elementUnderMouse.classList.add("styles-panel-hovered");
+            this._toggleCtrlHoverState(true);
     },
 
     /**
@@ -575,11 +606,8 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     _keyDown: function(event)
     {
-        if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||
-            (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
-            if (this._elementUnderMouse)
-                this._elementUnderMouse.classList.add("styles-panel-hovered");
-        }
+        if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!KeyboardEvent} */(event)))
+            this._toggleCtrlHoverState(true);
     },
 
     /**
@@ -587,10 +615,8 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     _keyUp: function(event)
     {
-        if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||
-            (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
-            this._discardElementUnderMouse();
-        }
+        if (WebInspector.KeyboardShortcut.Keys.CtrlOrMeta.code === event.keyCode)
+            this._toggleCtrlHoverState(false);
     },
 
     /**
@@ -791,7 +817,7 @@ WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style)
     if (!this.editable)
         this.element.classList.add("read-only");
 
-    this._markSelectorMatches();
+    this.setHoverableSelectorsMode(false);
     this.onpopulate();
 }
 
@@ -1185,6 +1211,18 @@ WebInspector.StylePropertiesSection.prototype = {
         return !hideRule;
     },
 
+    /**
+     * @param {boolean} value
+     */
+    setHoverableSelectorsMode: function(value)

[pfeldman, 2016/07/14 23:14:41]

Merge this with the method below and only trigger when necessary?
_hoverableSelectorsMode would not be needed then. Also, you don't need to go
back. Once expanded, it can stay detailed.

[lushnikov, 2016/07/15 00:49:22]

Couldn't get rid of this method, even though i now preserve the selectors
expanded.

+    {
+        if (this._hoverableSelectorsMode === value)
+            return;
+        this._hoverableSelectorsMode = value;
+        if (!this._editingSelector)
+            this._markSelectorMatches();
+    },
+
     _markSelectorMatches: function()
     {
         var rule = this._style.parentRule;
@@ -1196,29 +1234,96 @@ WebInspector.StylePropertiesSection.prototype = {
         if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
             return;
 
-        var selectors = rule.selectors;
+        var matchingSelectors = this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule));
+        var selectorTexts = rule.selectors.map(selector => selector.text);
+        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<number>} matchingSelectorIndexes
+     * @return {!DocumentFragment}
+     */
+    _renderHoverableSelectors: function(selectors, matchingSelectorIndexes)
+    {
         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;
+            var isSelectorMatching = matchingSelectorIndexes[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(this._createSelectorElement(selectors[i], isSelectorMatching, i));
+        }
+        return fragment;
+    },
+
+    /**
+     * @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;
+    },
 
-            fragment.appendChild(selectorElement);
+    /**
+     * @param {!Array<string>} selectors
+     * @param {!Array<number>} matchingSelectorIndexes
+     * @return {!DocumentFragment}
+     */
+    _renderSimplifiedSelectors: function(selectors, matchingSelectorIndexes)

[pfeldman, 2016/07/14 23:14:41]

Replace this with:

function renderSimplifiedSelectors(selectors, matches) {
    var currentMatching = false;
    var text = "";
    for (var i = 0; i < selectors.length; ++i) {
        if (i)
            text += ", ";
        if (currentMatching === matches[i])
            text + selectors[i];
        else if (text !== ", ")
            this._createSelectorElement(text);
        currentMatching = matches[i];
    }
    this._createSelectorElement(text);
}

[lushnikov, 2016/07/15 00:49:23]

Done.

+    {
+        var fragment = createDocumentFragment();
+        var currentMatch = 0;
+        var nonMatchingSelectors = null;
+        for (var i = 0; i < selectors.length ; ++i) {
+            if (i)
+                renderNonMatchingText.call(this, ", ");
+            var isSelectorMatching = matchingSelectorIndexes[currentMatch] === i;
+            if (isSelectorMatching) {
+                ++currentMatch;
+                renderMatchingText.call(this, selectors[i]);
+            } else {
+                renderNonMatchingText.call(this, selectors[i]);
+            }
         }
+        return fragment;
 
-        this._selectorElement.removeChildren();
-        this._selectorElement.appendChild(fragment);
-        this._markSelectorHighlights();
+        /**
+         * @param {string} text
+         * @this {WebInspector.StylePropertiesSection}
+         */
+        function renderNonMatchingText(text)
+        {
+            if (!nonMatchingSelectors) {
+                nonMatchingSelectors = this._createSelectorElement(text, false);
+                fragment.appendChild(nonMatchingSelectors);
+            } else {
+                nonMatchingSelectors.textContent += text;
+            }
+        }
+
+        /**
+         * @param {string} text
+         * @this {WebInspector.StylePropertiesSection}
+         */
+        function renderMatchingText(text)
+        {
+            fragment.appendChild(this._createSelectorElement(text, true));
+            nonMatchingSelectors = null;
+        }
     },
 
     _markSelectorHighlights: function()
@@ -1461,6 +1566,7 @@ WebInspector.StylePropertiesSection.prototype = {
         if (WebInspector.isBeingEdited(element))
             return;
 
+        this._editingSelector = true;
         element.scrollIntoViewIfNeeded(false);
         element.textContent = element.textContent; // Reset selector marks in group.
 
@@ -1589,6 +1695,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
     _editingSelectorEnded: function()
     {
+        this._editingSelector = false;
         this._parentPane.setEditingStyle(false);
     },