Inspector highlighter may not hide when the element is no longer hovered (race condition)
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(firefox85 fixed)
| Tracking | Status | |
|---|---|---|
| firefox85 | --- | fixed |
People
(Reporter: Oriol, Assigned: Oriol)
References
Details
Attachments
(2 files)
problem.gif
- Open inspector devtool
- Move the mouse in a way that some element in the inspector is temporarily hovered, but the mouse ends up outside of the inspector
See attached recording for more clarity.
Expected: elements should stop being highlighted once I'm no longer hovering them
Actual: lots of times they continue being highlighted, obscuring the screen. Very annoying.
This is because HighlightersOverlay is asynchronic, and if multiple requests to show or hide highlighters are performed before the former ones have completed, then everything breaks.
The issue can be triggered programmatically. Just enter this code into the browser console:
var { require, loader } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
var { TargetFactory } = require("devtools/client/framework/target");
var { gDevTools } = require("devtools/client/framework/devtools");
var target = await TargetFactory.forTab(gBrowser.selectedTab);
var toolbox = await gDevTools.showToolbox(target, "inspector");
var inspector = toolbox.getPanel("inspector");
var tags = [...inspector.markup._elt.querySelectorAll(".open > .tag")];
var html = tags.filter(el => el.textContent === "html")[0].closest("li").container.node;
inspector.highlighters.showHighlighterTypeForNode(inspector.highlighters.TYPES.BOXMODEL, html);
inspector.highlighters.hideHighlighterType(inspector.highlighters.TYPES.BOXMODEL);
Expected: no highlighter
Actual: the <html> is highlighted
If you run it again, now the hightlighter disappears, if you run it a 3rd time it appears again, etc.
Or another problem:
var { require, loader } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
var { TargetFactory } = require("devtools/client/framework/target");
var { gDevTools } = require("devtools/client/framework/devtools");
var target = await TargetFactory.forTab(gBrowser.selectedTab);
var toolbox = await gDevTools.showToolbox(target, "inspector");
var inspector = toolbox.getPanel("inspector");
var tags = [...inspector.markup._elt.querySelectorAll(".open > .tag")];
var html = tags.filter(el => el.textContent === "html")[0].closest("li").container.node;
var body = tags.filter(el => el.textContent === "body")[0].closest("li").container.node;
inspector.highlighters.showHighlighterTypeForNode(inspector.highlighters.TYPES.BOXMODEL, body);
inspector.highlighters.showHighlighterTypeForNode(inspector.highlighters.TYPES.BOXMODEL, html);
inspector.highlighters.showHighlighterTypeForNode(inspector.highlighters.TYPES.BOXMODEL, body);
Expected: the <html> is highlighted
Actual: the <body> is highlighted
If you run it again, now the <html> is highlighted, if you run it a 3rd time it's the <body> again, etc.
|
Assignee | |
Comment 1•3 years ago
|
||
|
||
Updated•3 years ago
|
Pushed by rcaliman@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/7608e7cdc663 Fix inspector highlighter race conditions. r=rcaliman
|
||
Comment 4•3 years ago
|
||
| bugherder | ||
|
||
Comment 5•3 years ago
|
||
Verified on Firefox Nightly 85.0a1 (2020-12-09)
Thanks a lot Oriol!
|
||
Updated•3 years ago
|
Description
•