1728912 - DevTools inspector highlighter doesn't work for browser panels/popups

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[:Gijs (he/him)]

Attachment: Screenshot of the highlighter not working well

STR:

0. if not on a local build, enable browser toolbox by enabling chrome + remote debugging
1. open browser toolbox
2. disable popup autohide from the browser toolbox meatball menu on the top right
3. in Firefox, open e.g. the hamburger menu, downloads panel, etc.
4. in the toolbox, click the inspect button on the top left, then try to inspect items in the panels/popups

ER:

the same highlight we show for main window content shows up in the panel

AR:
the highlight appears in the main window, behind the popup/panel, making it impossible to see the outline of items (and padding/margin/border highlighting) for the item you're inspecting.

This really hinders figuring out layouts in panels/popups, and it would be great if we could get it fixed. When talking to Brian, he suggested you might know how to fix this, Emilio? It's using the CanvasFrame stuff, which I guess doesn't deal well with panels/popups...

Comment 1

[Julian Descottes [:jdescottes]]

FWIW, I tried tweaking the z-index for the highlighter frame container: https://searchfox.org/mozilla-central/source/browser/base/content/browser.css#1486 but it didn't really help.

Comment 2

[:Gijs (he/him)]

(In reply to Julian Descottes [:jdescottes] from comment #1)

FWIW, I tried tweaking the z-index for the highlighter frame container: https://searchfox.org/mozilla-central/source/browser/base/content/browser.css#1486 but it didn't really help.

Yeah, I think because popups/panels are their own OS-level widgets, we need to convince graphics to render the highlighter in that widget rather than the main/parent widget, if items in the panel/popup are selected. I have no idea how easy/hard that is.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, that's what I was going to say... Since panels are their own OS windows I don't think it's easy to tell graphics to draw there. Perhaps we can create the display list for the highlighter in all popups, but I suspect that'd interact poorly with retained display lists.

Another thing we could do is to let devtools put the highlighter inside the panel or somesuch. we could create similar anonymous content for the popup frame like we do for the canvas frame, I think, so it might not be terrible depending on what devtools is doing, and which APIs do they need.

Comment 4

[Julian Descottes [:jdescottes]]

P3/S3 nice to have

Comment 5

[Greg Tatum [:gregtatum]]

For what it's worth, that has been a big source of friction on working on a new popup panel.

Comment 6

[Greg Tatum [:gregtatum]]

A work-around I have been doing to debug margin and padding values in a popup panel is to make it semi-transparent. Then I can at least debug and sort of see what's going on, e.g.:

panel {
  opacity: 0.5;
}

Comment 7

[Alexandre Poirot [:ochameau]]

Out of curiosity, what panels are you trying to debug?

As said in comment 3, there might be ways to inject the highlighter into the panel instead of browser.xhtml.
But I can't find an easy and efficient way to detect when an element is within a <panel>?

Comment 8

[Greg Tatum [:gregtatum]]

I'm creating a new translations panel, see Bug 971044.

Set browser.translations.enable to true, and go to a page not in your browser's language. The translations button will appear in the urlbar, which when clicked shows the panel.