1574646 - (dbg-overlay) [meta] Paused Debugger Overlay

Status: NEW

(DevTools :: Debugger, task, P3)

Comment 1

[Sebastian Zartner [:sebo]]

It looks like the overlay initially got implemented in bug 1354679, right?

I've added this to the experimental features in Firefox MDN page.

Once this is fully implemented and shipping, it should be documented in a subpage of https://developer.mozilla.org/en-US/docs/Tools/Debugger.

Sebastian

Comment 2

[:Harald Kirschner :digitarald]

:sebo: Thank you! To clarify, the overlay landed and is preffed on in Nightly, DevEdition, and all channels. The remaining pref was for implementing the buttons which just landed today, which will make the pref void as well.

Comment 3

[Sebastian Zartner [:sebo]]

:digitarald Thanks for the info and for updating the related page!

Comment 4

[Glenn Linderman]

I believe that this feature is a misguided attempt to alert people when debugging that the main browser screen is non-responsive due to the debugging activities. However, debugging often requires examination of the main browser screen at different points during the debugging session, and obscuring the main browser screen with an overlay and text box makes that difficult or impossible (depending on the geometry of the text box, and what gets overlaid).

I highly question whether someone that is running the debugger really needs the overlay, because the DevTools window clearly indicates that the debugger is paused by the color of the Debugger icon. When the main screen is non-responsive, a quick look at the DevTools window tells why.

However, if some strongly feel the need for an indication in the main screen, it should either be made optional, or there should be a way to remove the overlay easily and completely, at least for a configurable time period, so the main screen can be examined in detail and without obstruction.

I was totally blind-sided by the sudden appearance of this overlay in the DevEd release, and find it extremely annoying.

Comment 5

[Michal Čaplygin [:myf]]

It seems that

devtools.debugger.features.overlay = false

about:config pref introduced and documented in bug 1579768 ceased to have any effect few versions back.

Tried stable 119, aurora/dev-ev 120.0b9, Nightly 121.a1 with that pref and fired debugger in the console, and saw the overlay in each.

Should it be reopened?

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Michal Čaplygin [:myf] from comment #5)

It seems that

devtools.debugger.features.overlay = false

about:config pref introduced and documented in bug 1579768 ceased to have any effect few versions back.

Tried stable 119, aurora/dev-ev 120.0b9, Nightly 121.a1 with that pref and fired debugger in the console, and saw the overlay in each.

Should it be reopened?

That's the intended behavior, we want to display the overlay.
Do you with it wasn't displayed? We already hide it if you use the node picker, but maybe you have other needs?

Comment 7

[Glenn Linderman]

See my earlier comment (comment 4). Displaying the overlay may be helpful for some people in some circumstances, but I found it extremely annoying. I hadn't noticed its return, because I've been working on other projects, not doing debugging inside Firefox, but have been hoping to complete/enhance some of the previous projects which live in the browser. I hope by the time I get back to doing that, the above pref, or some other, can be implemented to turn off the overlay again.

Just because 4 years have gone by, doesn't mean the overlay is any more useful, or less obtrusive and obstructive, than it was then. Even a fully-see-through overlay would be annoying when attempting to check colors.

Comment 8

[Michal Čaplygin [:myf]]

Previous comment expresses my POW as well.

We already hide it if you use the node picker,

That's nice and helps a bit, but it would make sense to ditch the "glossy/foggy" layer [a] the entire time while in the Inspector (at least), not only wile picking elements.

but maybe you have other needs?

My use-case is most often inspecting "ephemeral" DOM nodes: i.e. pop-ups/drop-downs triggered by focus or timers, using crude debugger statement pinged to devtools to freeze the page with element of interest present in the DOM. [b] While the backdrop does not prevent me from accomplishing that, it is an unwanted annoyance.

Few remarks in points:

1. Breaks eye dropper: As mentioned, it is not automatically hidden while using the eyedropper colour picker, what doesn't make any sense at all.
2. "That other browser" does not do that: Chromium displays only the floating "Resume - Step" notice [c] without any backdrop overlay.
3. It is redundant to nicely contrasting "Debugger" icon in devtools [d].

---

[a] Brightness of this backdrop overlay does not respect the colour theme, by the way: it should probably be dark in dark mode.
[b] For reference, "that other browser" recently introduced some utility helping with this use-case ("Emulate focused papge" pref) that I learned about from https://twitter.com/CanIDevTools/status/1723756605685256606 what made me revisit.
[c] "Paused in debugger - Resume script execution (f8) - Step over next function call (F10)" - such mnemonics should be present by definition. But it should have a dedicated toolbar and not invade the viewport, IMO.
[d] I agree that it would make sense to give the user heads-up when JS execution gets paused for the first time in the fresh profile, like "now the page is kinda frozen, watch out", maybe even through such aggressive backdrop overlay. But definitely option to not obscure the page in any way or having the overlay as an opt-in would be nice.

Comment 9

[Sebastian Zartner [:sebo]]

I've created separate bug reports to remove the overlay and backdrop while using the eye dropper tool and the Accessibility panel.

And I also added bug 1865439 for adding the feature allowing to hide the overlay back.

Sebastian