DevTools: [SSP] simplify Control-Click functionality

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 26 matching lines @@
     this.setMinimumSize(96, 26);
 
     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._keyDownBound = this._keyDown.bind(this);
-    this._keyUpBound = this._keyUp.bind(this);
 
      /** @type {!Array<!WebInspector.SectionBlock>} */
     this._sectionBlocks = [];
     WebInspector.StylesSidebarPane._instance = this;
 
     WebInspector.targetManager.addModelListener(WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this.forceUpdate, this);
 }
 
 /**
@@ skipping 163 matching lines @@
             this._updateFilter();
         this._nodeStylesUpdatedForTest(node, false);
     },
 
     /**
      * @override
      * @return {!Promise.<?>}
      */
     doUpdate: function()
     {
-        this._discardElementUnderMouse();
-
         return this._fetchMatchedCascade()
             .then(this._innerRebuildUpdate.bind(this));
     },
 
     _resetCache: function()
     {
         if (this.cssModel())
             this.cssModel().discardCachedMatchedCascade();
     },
 
@@ skipping 224 matching lines @@
 
     _updateFilter: function()
     {
         for (var block of this._sectionBlocks)
             block.updateFilter();
     },
 
     /**
      * @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>}
      */
     allSections: function()
     {
         var sections = [];
         for (var block of this._sectionBlocks)
             sections = sections.concat(block.sections);
         return sections;
     },
@@ skipping 153 matching lines @@
     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
 
     var closeBrace = this.element.createChild("div", "sidebar-pane-closing-brace");
     closeBrace.textContent = "}";
 
     this._createHoverMenuToolbar(closeBrace);
 
     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.
         if (rule.isUserAgent() || rule.isInjected()) {
             this.editable = false;
         } else {
             // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
             if (rule.styleSheetId)
                 this.navigable = !!rule.resourceURL();
         }
@@ skipping 11 matching lines @@
 
     if (!this.editable)
         this.element.classList.add("read-only");
 
     this._markSelectorMatches();
     this.onpopulate();
 }
 
 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)
     {
         if (!this.editable)
             return;
         var items = [];
         var colorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Add color"), "foreground-color-toolbar-item");
         colorButton.addEventListener("click", this._onInsertColorPropertyClick.bind(this));
         items.push(colorButton);
@@ skipping 368 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;
     },
 
-    makeHoverableSelectorsMode: function()
-    {
-        if (this._hoverableSelectorsMode)
-            return;
-        this._hoverableSelectorsMode = true;
-        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 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();
     },
@@ skipping 1997 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }