DevTools: only hide highlight when active property is set

When highlighting the active property, we used to always hide the
overlay highlight, even if no active property was being highlighted.
This CL checks that we do not hide unrelated highlights.

Screenshot: https://imgur.com/a/W0zFEqq

Bug: 918957
Change-Id: I118369e64af4062994221a5a79e8b0e16989b665
Reviewed-on: https://chromium-review.googlesource.com/c/1394986Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#620002}

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -64,6 +64,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
     this._isEditingStyle = false;
     /** @type {?RegExp} */
     this._filterRegex = null;
+    this._isActivePropertyHighlighted = false;
 
     this.contentElement.classList.add('styles-pane');
 
@@ -392,10 +393,13 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
    * @param {?Elements.StylePropertyTreeElement} treeElement
    */
   _setActiveProperty(treeElement) {
+    if (this._isActivePropertyHighlighted)
+      SDK.OverlayModel.hideDOMNodeHighlight();
+    this._isActivePropertyHighlighted = false;
+
     if (!this.node())
       return;
 
-    SDK.OverlayModel.hideDOMNodeHighlight();
     if (!treeElement || treeElement.overloaded() || treeElement.inherited())
       return;
 
@@ -405,6 +409,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
       if (!treeElement.name.startsWith(mode))
         continue;
       this.node().domModel().overlayModel().highlightDOMNodeWithConfig(this.node().id, {mode, selectors});
+      this._isActivePropertyHighlighted = true;
       break;
     }
   }