[Debugger] Paused Overlay

digitarald commented 4 years ago

Overlay landed in bug 1354679 as MVP. Nightly has it enabled by default, and it looks like:

This issue is to discuss basic UX follow up, not much diverging from what we have to get this out to users quickly but in a polished look & feel.

Constrains:

Don't stray too much from existing debugger overlays, as users should be able to quickly identify what is going on – an overlay popping in is jarring enough, especially with many websites overdoing it, so staying close helps anchor the experience.
Keep it small to not avoid hiding critical website aspects
Keep it vibrant enough to make it easy to identify
Should probably build on the existing paused reason shows in DevTools, which shows the type of parsing (event, xhr, etc) and additional parameter (click, mousemove, etc).
- …

cc @jasonLaster

digitarald commented 4 years ago

In-product mockup of design closer to photon, using the paused-reason colors that are also in the Debugger:

CSS changes

```changes.diff --- a/devtools/server/actors/highlighters.css +++ b/devtools/server/actors/highlighters.css @@ -597,11 +597,11 @@ /* We don't have access to DevTools themes here, but some of these colors come from the themes. Theme variable names are given in comments. */ - --text-color: #585959; /* --theme-body-color-alt */ - --toolbar-background: #fcfcfc; /* --theme-toolbar-background */; + --text-color: #0c0c0d; /* --grey-90 */ + --toolbar-background: hsl(54, 100%, 92%); /* --theme-toolbar-background */; --toolbar-border: #dde1e4; /* --theme-splitter-color */ - --toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */ - --overlay-background: #dde1e4a8; + --toolbar-box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1); /* https://design.firefox.com/photon/patterns/shadows.html */ + --overlay-background: rgba(12, 12, 13, 0.6); } :-moz-native-anonymous .paused-dbg-root[overlay] { @@ -610,7 +610,7 @@ } :-moz-native-anonymous .paused-dbg-toolbar { - margin-top: 15px; + margin-top: 16px; display: inline-flex; -moz-user-select: none; @@ -618,8 +618,6 @@ border-radius: 2px; box-shadow: var(--toolbar-box-shadow); background-color: var(--toolbar-background); - border: 1px solid var(--toolbar-border); - border-radius: 4px; font: var(--highlighter-font-family); font-size: var(--highlighter-font-size); @@ -661,12 +659,10 @@ } :-moz-native-anonymous .paused-dbg-reason { - padding: 1px 16px; - margin: 6px 0px; - line-height: 16px; - font-size: 14px; + padding: 4px 6px; + line-height: 28px; + font-size: 12px; font: var(--highlighter-font-family); - font-size: var(--highlighter-font-size); } ```

wisniewskit commented 4 years ago

Will this overlay interfere with the "pick an element" tool?

jasonLaster commented 4 years ago

@wisniewskit nope - when you open the picker it goes away

digitarald commented 4 years ago

Will this overlay interfere with the "pick an element" tool?

Another clarification, this is enabled on Nightly now for testing.

violasong commented 4 years ago

Your mockup looks great! Maybe we should match Chrome for "Paused in Debugger" wording for the overlay, to make it a bit more clear that this is coming from DevTools.

digitarald commented 4 years ago

Maybe we should match Chrome for "Paused in Debugger" wording for the overlay, to make it a bit more clear that this is coming from DevTools.

I like the idea. Thinking about when users encounter this, in all cases DevTools should be open. Maybe it can re-use the iconography that we come up with in #60?

violasong commented 4 years ago

As in a decorative pause icon? That could make sense, though if we want to match Chrome, we might want to just add icons for Resume/Step Over buttons.

digitarald commented 4 years ago

As in a decorative pause icon?

Yes

we might want to just add icons for Resume/Step Over buttons.

@jasonLaster landed those behind devtools.debugger.features.overlay-step-buttons.

digitarald commented 4 years ago

Related, we got some feedback: https://bugzilla.mozilla.org/show_bug.cgi?id=1579768 cc @jasonLaster

One thought would have been to have a debugger preference to disable it; but the pref got removed when we enabled it by default in Nightly.

@violasong any idea on how to tweak the overlay to less obtrusive?

fvsch commented 4 years ago

Just noticed that the overlay currently plays nice with "Pick an element…" mode, but not with:

Color Picker (works, but we don't hide the overlay)
Measure an element (doesn't work)

how to tweak the overlay to less obtrusive?

Brainstorming:

Making the overlay toolbar a tad smaller (its around 36-38px, could be around 28-32 maybe)
Not having the overlay background, just the toolbar (as an option?)
Allowing users to move the overlay toolbar to the bottom? (useful if you're working on a header component)

fvsch commented 4 years ago

Mockup: a more configurable overlay experience.

Pause overlay toolbar with menu

digitarald commented 4 years ago

Making the overlay toolbar a tad smaller (its around 36-38px, could be around 28-32 maybe)

Yeah, takes a bit of space, https://github.com/firefox-devtools/ux/issues/88#issuecomment-517795698 addressed part of this.

Mockup: a more configurable overlay experience.

Maybe just a single toggle. Adding interactive UI to the overlays has been proven not easy.

Other ideas:

Only show the model initially when pause is triggered
Any time the page is hovered over, don't show the modal overlay
Highlight the modal on click to remind user of the paused state

YousufSSyed commented 11 months ago

Has there been any updates on this? I've come across it now and its very annoying.

nchevobbe commented 11 months ago

Has there been any updates on this? I've come across it now and its very annoying.

Hello, several things were discussed here, so I'm not sure what you're running into?

YousufSSyed commented 11 months ago

Well its been almost 4 years since there's been an any updates on it.

nchevobbe commented 11 months ago

Well its been almost 4 years since there's been an any updates on it.

on what? Please can you describe the issue you're running into precisely?

YousufSSyed commented 11 months ago

I mean there hasn't been a reply on this overlay issue since 2019, and I've come across it myself today. I looked up what to do anything and didn't find any answers but found this issue.

nchevobbe commented 11 months ago

As said before, there are multiple issues being discussed here:

selecting color pickers does not hide paused overlay
measuring tool does not hide paused overlay
add some configuration to the overlay
new design ideas

I'm genuinely wondering which specific issues you're running into (it might be something else), so we can file proper bugs and work on them :)

JeremyLeland commented 11 months ago

Not the person you are replying to, but I found this thread while trying figure out how to hide the debug overlay in Firefox Nightly 118. (The white overlay is kind of blinding with my otherwise-dark setup, and it makes it hard for me to see the canvas drawing operations that I'm trying to step through).

Supposedly devtools.debugger.features.overlay could be used to hide the overlay in the past, but doesn't seem to now. I logged https://bugzilla.mozilla.org/show_bug.cgi?id=1846825 to track this.

izogfif commented 6 months ago

@JeremyLeland and others who might find this thread via googling: the preference devtools.debugger.features.overlay was removed in Firefox 115. You have to use Firefox version 71, 72, ... till 114.0.1 where this preference is still present.

nchevobbe commented 4 months ago

There's a WIP patch to add teh option back https://bugzilla.mozilla.org/show_bug.cgi?id=1865439

firefox-devtools / ux

[Debugger] Paused Overlay #88