firefox-devtools/ux

Clarify disabled-pausing state

digitarald opened this issue · 8 comments

digitarald commented

We did some work, like fading out the breakpoint panels, to ensure disabled pausing is clearly communicated.

Seeing reports like https://twitter.com/__jakub_g/status/1260912327702073347 there is more work to do it seems.

Thoughts:

  • Is it just an expectation to look for icons users might be more used to, like Chrome's; then we should just get closer to that icon shape/color
  • As part of "footgun indicator" discussion, we shared mockups of "Pausing is disabled" warning bar similar to the "Debugger is paused"

cc @violasong @darkwing @fvsch @janodvarko

violasong commented

Here's the mockup of the warning bar: firefox-devtools/debugger#6673 (comment)

fvsch commented

Personally I don't find Chrome's icon a good solution.
Pros: there's a clear distinction between the two states because the shape of the icon changes, not just its color.
Cons: a blue breakpoint does not convey "Breakpoints are currently disabled" to me, at all.

Chrome, breakpoints enabled:
Screenshot

Chrome, breakpoints disabled:
Screenshot

IMO we should:

  1. Revise our icon states, but not follow Chrome. We talked about using red for the "on" state of buttons that disable stuff (like the "Request Blocking" icon in Network's toolbar).
  2. Add a warning bar, implementing Victoria's design.
  3. Optionally and like Victoria suggested, remove the graying of pane content because its raison d'être has been superceded by (1) and (2).
violasong commented

Some quick sketches
image
image
image
image

I think I actually like the blue one on top best because it's a simple on-off of this button. The red introduces an extra layer of confusion because it begins to illustrate the double negative of 'stopping the stops.'

digitarald commented

I think I actually like the blue one on top best because it's a simple on-off of this button.

fwiw, request blocking goes also blue.

The struggle is real to have an enabled state for a disabling button. Apart from the strike and the color change, would an enabled button background add context?

violasong commented

Ah yes! That background would be good

image

  • 👍2
darkwing commented

I love those two!

digitarald commented

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1643130 and opened it up as good-first-bug 👋🏻

violasong commented

Closing since this graduated to bugzilla :)