Bug 1453246 - Part 1: Disable mouseover/mouseover if the target node already highlighted. r=gl

MozReview-Commit-ID: 6kMvLgnx07V

--HG--
extra : rebase_source : 630e2956e9284fd4794ab211e0db676c74f216cb

devtools/client/inspector/animation/components/AnimationTarget.js

@@ -134,10 +134,24 @@ class AnimationTarget extends Component {
           inspectIconTitle: getInspectorStr("inspector.nodePreview.highlightNodeLabel"),
           object: translateNodeFrontToGrip(nodeFront),
           onDOMNodeClick: () => this.select(),
-          onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-          onDOMNodeMouseOver: () => this.highlight(),
+          onDOMNodeMouseOut: () => {
+            if (!isHighlighted) {
+              onHideBoxModelHighlighter();
+            }
+          },
+          onDOMNodeMouseOver: () => {
+            if (!isHighlighted) {
+              this.highlight();
+            }
+          },
           onInspectIconClick: (_, e) => {
             e.stopPropagation();
+
+            if (!isHighlighted) {
+              // At first, hide highlighter which was created by onDOMNodeMouseOver.
+              onHideBoxModelHighlighter();
+            }
+
             setHighlightedNode(isHighlighted ? null : nodeFront);
           }
         }

devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js

@@ -16,10 +16,15 @@
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
   await removeAnimatedElementsExcept([".animated", ".multi"]);
-  const { animationInspector, panel, toolbox } = await openAnimationInspector();
+  const {
+    animationInspector,
+    inspector,
+    panel,
+    toolbox,
+  } = await openAnimationInspector();
 
   info("Check highlighting when mouse over on a target node");
-  let onHighlight = toolbox.once("node-highlight");
+  const onHighlight = toolbox.once("node-highlight");
   mouseOverOnTargetNode(animationInspector, panel, 0);
   let nodeFront = await onHighlight;
   assertNodeFront(nodeFront, "DIV", "ball animated");
@@ -31,9 +36,9 @@ add_task(async function() {
   ok(true, "Unhighlighted the targe node");
 
   info("Check node is highlighted when the inspect icon is clicked");
-  onHighlight = toolbox.once("node-highlight");
+  let onHighlighterShown = inspector.highlighters.once("box-model-highlighter-shown");
   await clickOnInspectIcon(animationInspector, panel, 0);
-  nodeFront = await onHighlight;
+  nodeFront = await onHighlighterShown;
   assertNodeFront(nodeFront, "DIV", "ball animated");
   ok(panel.querySelectorAll(".animation-target")[0].classList.contains("highlighting"),
     "The highlighted animation target element should have 'highlighting' class");
@@ -45,9 +50,9 @@ add_task(async function() {
     "The highlighted element still should have 'highlighting' class");
 
   info("Highlighting another animation target");
-  onHighlight = toolbox.once("node-highlight");
+  onHighlighterShown = inspector.highlighters.once("box-model-highlighter-shown");
   await clickOnInspectIcon(animationInspector, panel, 1);
-  nodeFront = await onHighlight;
+  nodeFront = await onHighlighterShown;
   assertNodeFront(nodeFront, "DIV", "ball multi");
 
   info("Check the highlighted state of the animation targets");
@@ -58,6 +63,17 @@ add_task(async function() {
     "The animation target[1] should have 'highlighting' class");
   ok(animationTargetEls[2].classList.contains("highlighting"),
     "The animation target[2] should have 'highlighting' class");
+
+  info("Hide highlighter");
+  const onHighlighterHidden = inspector.highlighters.once("box-model-highlighter-hidden");
+  await clickOnInspectIcon(animationInspector, panel, 1);
+  await onHighlighterHidden;
+
+  info("Check the highlighted state of the animation targets");
+  ok(!animationTargetEls[1].classList.contains("highlighting"),
+    "The animation target[1] should not have 'highlighting' class");
+  ok(!animationTargetEls[2].classList.contains("highlighting"),
+    "The animation target[2] should not have 'highlighting' class");
 });
 
 function assertNodeFront(nodeFront, tagName, classValue) {

devtools/client/inspector/shared/highlighters-overlay.js

@@ -443,6 +443,7 @@ class HighlightersOverlay {
     }
 
     this.boxModelHighlighterShown = node;
+    this.emit("box-model-highlighter-shown", node);
   }
 
   /**
@@ -454,7 +455,9 @@ class HighlightersOverlay {
     }
 
     await this.highlighters.BoxModelHighlighter.hide();
+    const node = this.boxModelHighlighterShown;
     this.boxModelHighlighterShown = null;
+    this.emit("box-model-highlighter-hidden", node);
   }
 
   /**