DevTools: [SSP] simplify Control-Click functionality

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 fa7c928eefcdda468926ae07ce14d819d972ddd4..653e9ada9c1e79e30799634b4721a81446f43d99 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -44,9 +44,6 @@ WebInspector.StylesSidebarPane = function()
     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._keyDownBound = this._keyDown.bind(this);
-    this._keyUpBound = this._keyUp.bind(this);
 
      /** @type {!Array<!WebInspector.SectionBlock>} */
     this._sectionBlocks = [];
@@ -230,8 +227,6 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     doUpdate: function()
     {
-        this._discardElementUnderMouse();
-
         return this._fetchMatchedCascade()
             .then(this._innerRebuildUpdate.bind(this));
     },
@@ -476,72 +471,12 @@ WebInspector.StylesSidebarPane.prototype = {
     /**
      * @override
      */
-    wasShown: function()
-    {
-        WebInspector.ElementsSidebarPane.prototype.wasShown.call(this);
-        this.element.ownerDocument.body.addEventListener("keydown", this._keyDownBound, false);
-        this.element.ownerDocument.body.addEventListener("keyup", this._keyUpBound, false);
-    },
-
-    /**
-     * @override
-     */
     willHide: function()
     {
-        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;
-    },
-
-    /**
-     * @param {!Event} event
-     */
-    _mouseMovedOverElement: function(event)
-    {
-        if (this._elementUnderMouse && event.target !== this._elementUnderMouse)
-            this._discardElementUnderMouse();
-        this._elementUnderMouse = event.target;
-        if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event))) {
-            this._elementUnderMouse.classList.add("styles-panel-hovered");
-            var selectorElement = this._elementUnderMouse.enclosingNodeOrSelfWithClass("selector");
-            var sectionElement = selectorElement ? selectorElement.enclosingNodeOrSelfWithClass("styles-section") : null;
-            if (sectionElement)
-                sectionElement._section.makeHoverableSelectorsMode();
-        }
-    },
-
-    /**
-     * @param {!Event} event
-     */
-    _keyDown: function(event)
-    {
-        if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||

[pfeldman, 2016/07/18 18:22:19]

What happened to this code?

[lushnikov, 2016/07/19 01:19:48]

Usually, mouse has at least a minor movement when you hit "ctrl", so the
mousemove handler gets executed.

-            (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
-            if (this._elementUnderMouse)
-                this._elementUnderMouse.classList.add("styles-panel-hovered");
-        }
-    },
-
-    /**
-     * @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();
-        }
-    },
-
     /**
      * @return {!Array<!WebInspector.StylePropertiesSection>}
      */
@@ -715,6 +650,8 @@ WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style)
     this._selectorElement.addEventListener("click", this._handleSelectorClick.bind(this), false);
     this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this), false);
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
+    this.element.addEventListener("mouseleave", this._setSectionHovered.bind(this, false), false);
 
     if (rule) {
         // Prevent editing the user agent and user rules.
@@ -746,6 +683,27 @@ WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style)
 
 WebInspector.StylePropertiesSection.prototype = {
     /**
+     * @param {boolean} isHovered
+     */
+    _setSectionHovered: function(isHovered)
+    {
+        this.element.classList.toggle("styles-panel-hovered", isHovered);
+        if (this._hoverableSelectorsMode !== isHovered) {
+            this._hoverableSelectorsMode = isHovered;
+            this._markSelectorMatches();
+        }
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _onMouseMove: function(event)
+    {
+        var hasCtrlOrMeta = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event));
+        this._setSectionHovered(hasCtrlOrMeta);
+    },
+
+    /**
      * @param {!Element} container
      */
     _createHoverMenuToolbar: function(container)
@@ -1134,14 +1092,6 @@ WebInspector.StylePropertiesSection.prototype = {
         return !hideRule;
     },
 
-    makeHoverableSelectorsMode: function()
-    {
-        if (this._hoverableSelectorsMode)
-            return;
-        this._hoverableSelectorsMode = true;
-        this._markSelectorMatches();
-    },
-
     _markSelectorMatches: function()
     {
         var rule = this._style.parentRule;
@@ -1150,11 +1100,7 @@ WebInspector.StylePropertiesSection.prototype = {
 
         this._mediaListElement.classList.toggle("media-matches", this._matchedStyles.mediaMatches(this._style));
 
-        if (!this._matchedStyles.hasMatchingSelectors(/** @type {!WebInspector.CSSStyleRule} */(rule)))
-            return;
-
         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)