NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] devtools: remove highlights when out of devtools

Browse Source 
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.
This commit is contained in:
Julien Carion (juca)
2023-10-25 11:39:02 +02:00
committed by Géry Debongnie
parent db3499f5e5
commit aa6a4a5d46
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/devtools/src/page_scripts/owl_devtools_global_hook.js
+10 -4
View File
@@ -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,6 +608,7 @@
// Identify the hovered component based on the corresponding DOM element and send the Select message
// when the target changes
HTMLSelector = (ev) => {
if (this.enabledSelector) {
const target = ev.target;
if (!this.currentSelectedElement || !target.isEqualNode(this.currentSelectedElement)) {
const path = this.getElementPath(target);
@@ -617,17 +620,21 @@
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",