DevTools: [SSP] render selectors effectively

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 27 matching lines @@
 
     WebInspector.moduleSetting("colorFormat").addChangeListener(this.update.bind(this));
     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
 
     this._sectionsContainer = this.element.createChild("div");
     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     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);
 
      /** @type {!Array<!WebInspector.SectionBlock>} */
     this._sectionBlocks = [];
 
     WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
 }
 
 /**
@@ skipping 488 matching lines @@
     {
         this.element.ownerDocument.body.removeEventListener("keydown", this._keyDownBound, false);
         this.element.ownerDocument.body.removeEventListener("keyup", this._keyUpBound, false);
         this._stylesPopoverHelper.hide();
         this._discardElementUnderMouse();
         WebInspector.ElementsSidebarPane.prototype.willHide.call(this);
     },
 
     _discardElementUnderMouse: function()
     {
-        if (this._elementUnderMouse)
-            this._elementUnderMouse.classList.remove("styles-panel-hovered");
-        delete this._elementUnderMouse;
+        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.toggle("styles-panel-hovered", value);
+        if (this._sectionUnderMouse)
+            this._sectionUnderMouse.setHoverableSelectorsMode(value);
+    },
+
+    /**
      * @param {!Event} event
      */
     _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);
     },
 
     /**
      * @param {!Event} event
      */
     _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);
     },
 
     /**
      * @param {!Event} event
      */
     _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);
     },
 
     /**
      * @return {!Array<!WebInspector.StylePropertiesSection>}
      */
     allSections: function()
     {
         var sections = [];
         for (var block of this._sectionBlocks)
             sections = sections.concat(block.sections);
@@ skipping 180 matching lines @@
     this._updateRuleOrigin();
     this._titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
 
-    this._markSelectorMatches();
+    this.setHoverableSelectorsMode(false);
     this.onpopulate();
 }
 
 WebInspector.StylePropertiesSection.prototype = {
     /**
      * @param {!Element} container
      */
     _createHoverMenuToolbar: function(container)
     {
         if (!this.editable)
@@ skipping 373 matching lines @@
             hasMatchingChild |= child._updateFilter();
 
         var regex = this._parentPane.filterRegex();
         var hideRule = !hasMatchingChild && !!regex && !regex.test(this.element.textContent);
         this.element.classList.toggle("hidden", hideRule);
         if (!hideRule && this._style.parentRule)
             this._markSelectorHighlights();
         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;
         if (!rule)
             return;
 
         this._mediaListElement.classList.toggle("media-matches", this._matchedStyles.mediaMatches(this._style));
 
         if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
             return;
 
-        var selectors = rule.selectors;
-        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);
-        }
-
+        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;
+        for (var i = 0; i < selectors.length ; ++i) {
+            if (i)
+                fragment.createTextChild(", ");
+            var isSelectorMatching = matchingSelectorIndexes[currentMatch] === i;
+            if (isSelectorMatching)
+                ++currentMatch;
+            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;
+    },
+
+    /**
+     * @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;
+
+        /**
+         * @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()
     {
         var selectors = this._selectorElement.getElementsByClassName("simple-selector");
         var regex = this._parentPane.filterRegex();
         for (var i = 0; i < selectors.length; ++i) {
             var selectorMatchesFilter = !!regex && regex.test(selectors[i].textContent);
             selectors[i].classList.toggle("filter-match", selectorMatchesFilter);
         }
     },
 
@@ skipping 220 matching lines @@
 
         this.startEditingSelector();
     },
 
     startEditingSelector: function()
     {
         var element = this._selectorElement;
         if (WebInspector.isBeingEdited(element))
             return;
 
+        this._editingSelector = true;
         element.scrollIntoViewIfNeeded(false);
         element.textContent = element.textContent; // Reset selector marks in group.
 
         var config = new WebInspector.InplaceEditor.Config(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this));
         WebInspector.InplaceEditor.startEditing(this._selectorElement, config);
 
         element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
         this._parentPane.setEditingStyle(true);
         if (element.classList.contains("simple-selector"))
             this._navigateToSelectorSource(0, false);
@@ skipping 108 matching lines @@
     _editingSelectorCommittedForTest: function() { },
 
     _updateRuleOrigin: function()
     {
         this._selectorRefElement.removeChildren();
         this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._matchedStyles, this._parentPane._linkifier, this._style.parentRule));
     },
 
     _editingSelectorEnded: function()
     {
+        this._editingSelector = false;
         this._parentPane.setEditingStyle(false);
     },
 
     editingSelectorCancelled: function()
     {
         this._editingSelectorEnded();
 
         // Mark the selectors in group if necessary.
         // This is overridden by BlankStylePropertiesSection.
         this._markSelectorMatches();
@@ skipping 1535 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }