From c38a9a824ab6d96f96b5930349bf31e6147653ee Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Wed, 25 Oct 2023 11:39:02 +0200
Subject: [PATCH] [FIX] devtools: remove highlights when out of devtools

This commit fixes an issue with the highlight element functionality
which would leave the highlight active when the search bar is not empty
and the user changes view. It will now disappear as long as the user
moves his cursor anywhere in the page. Also, highlights are now removed
when the user scrolls while the html selector is active.
---
 .../page_scripts/owl_devtools_global_hook.js  | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
index aff5b9092..7ec4fa7aa 100644
--- a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
+++ b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
@@ -49,6 +49,7 @@
       this.traceRenderings = false;
       this.traceSubscriptions = false;
       this.requestedFrame = false;
+      this.enabledSelector = false;
       this.eventsBatch = [];
       // Object which defines how different types of data should be displayed when passed to the devtools
       this.serializer = {
@@ -175,6 +176,7 @@
 
     initDevtools(frame = "top") {
       if (!this.devtoolsInit) {
+        document.addEventListener("mouseover", this.HTMLSelector, { capture: true });
         this.frame = frame;
         const self = this;
         // Flush the events batcher when a root render is completed
@@ -606,28 +608,33 @@
     // Identify the hovered component based on the corresponding DOM element and send the Select message
     // when the target changes
     HTMLSelector = (ev) => {
-      const target = ev.target;
-      if (!this.currentSelectedElement || !target.isEqualNode(this.currentSelectedElement)) {
-        const path = this.getElementPath(target);
-        this.highlightComponent(path);
-        this.currentSelectedElement = target;
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "SelectElement",
-          data: path,
-        });
+      if (this.enabledSelector) {
+        const target = ev.target;
+        if (!this.currentSelectedElement || !target.isEqualNode(this.currentSelectedElement)) {
+          const path = this.getElementPath(target);
+          this.highlightComponent(path);
+          this.currentSelectedElement = target;
+          window.top.postMessage({
+            source: "owl-devtools",
+            type: "SelectElement",
+            data: path,
+          });
+        }
+      } else {
+        this.removeHighlights();
       }
     };
 
     // Activate the HTML selector tool
     enableHTMLSelector() {
-      document.addEventListener("mouseover", this.HTMLSelector, { capture: true });
+      this.enabledSelector = true;
       document.addEventListener("click", this.disableHTMLSelector, { capture: true });
-      document.addEventListener("mouseout", this.removeHighlights, { capture: true });
+      document.addEventListener("scroll", this.removeHighlights, { capture: true });
     }
 
     // Diasble the HTML selector tool
     disableHTMLSelector = (ev = undefined) => {
+      this.enabledSelector = false;
       if (ev) {
         if (!ev.isTrusted) {
           return;
@@ -636,9 +643,8 @@
         ev.preventDefault();
       }
       this.removeHighlights();
-      document.removeEventListener("mouseover", this.HTMLSelector, { capture: true });
       document.removeEventListener("click", this.disableHTMLSelector, { capture: true });
-      document.removeEventListener("mouseout", this.removeHighlights, { capture: true });
+      document.removeEventListener("scroll", this.removeHighlights, { capture: true });
       window.top.postMessage({
         source: "owl-devtools",
         type: "StopSelector",