[Debugger] Paused Overlay

[digitarald]

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:

1. 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.
2. Keep it small to not avoid hiding critical website aspects
3. Keep it vibrant enough to make it easy to identify
4. 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]

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

CSS changes

--- 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]

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

[jasonLaster]

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

[digitarald]

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

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

[violasong]

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]

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]

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]

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]

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]

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]

Mockup: a more configurable overlay experience.

[digitarald]

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]

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

[nchevobbe]

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]

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

[nchevobbe]

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]

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]

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]

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]

@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]

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