Clarify disabled-pausing state

[digitarald]

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]

Here's the mockup of the warning bar: https://github.com/firefox-devtools/debugger/issues/6673#issuecomment-623780401

[fvsch]

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:

Chrome, breakpoints disabled:

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]

Some quick sketches

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]

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]

Ah yes! That background would be good

[darkwing]

I love those two!

[digitarald]

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

[violasong]

Closing since this graduated to bugzilla :)