1544967 - Reflect paused/disabled state in Debugger's tab icon

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[:Harald Kirschner :digitarald]

Continues https://github.com/firefox-devtools/debugger/issues/8007#issuecomment-465917915

To track future work around this general issue, this could be part of a general meta of improving paused state visibility.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Harald, what icon should be used for this, any tips?

Honza

Comment 2

[:Harald Kirschner :digitarald]

:fversch had some initial icons in https://github.com/firefox-devtools/debugger/issues/8007#issuecomment-465917915. The paused breakpoint icon makes some sense.

It makes sense to iteratively improve this, as the current color change in the tab icon is hard to see. So just replacing the icon would be a good MVP.

Comment 3

[Florens Verschelde :fvsch]

Attachment: debugger-toolbox-icons.svg

I have a draft design at:
https://www.figma.com/file/L2UYAu7ux4qRFEWiCZUGrYtC/Debugger-icon-states

The "disabled" state is alright, but I'm not fully convinced by the "paused" one. The 1px strokes look awkward, but 2px ones are maybe a bit too big? Tried 1.5px one but it's too blurry on 1x displays IMO.

Comment 4

[Florens Verschelde :fvsch]

We can also fill the body of the Debugger icon with a partial-opacity color, like we do for the "Inspect an element" and RDM icons when they're active. But maybe that's too subtle.

Comment 5

[David Walsh :davidwalsh]

These icons look amazing Florens! When can I get my hands on the SVGs? :)

Comment 6

[Jason Laster [:jlast]]

paused variant

<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 9.5V2.5C1 1.67157 1.67157 1 2.5 1H10.5L15 6L10.5 11H2.5C1.67157 11 1 10.3284 1 9.5Z" stroke="#3B3B3C" stroke-width="2" stroke-linejoin="round"/>
    <rect x="4" y="3" width="2" height="6" rx="1" fill="#3B3B3C"/>
    <rect x="7" y="3" width="2" height="6" rx="1" fill="#3B3B3C"/>
</svg>

disabled variant

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.129 4.42631L12.0079 6.1703L13.6546 8L10.0546 12H8.26024L6.97452 14H10.5C10.7835 14 11.0537 13.8797 11.2433 13.669L15.7433 8.66896C16.0856 8.28866 16.0856 7.71134 15.7433 7.33104L13.129 4.42631ZM4.59691 14H2.5C1.11929 14 0 12.8807 0 11.5V4.5C0 3.11929 1.11929 2 2.5 2H10.5C10.7835 2 11.0537 2.12032 11.2433 2.33104L11.7421 2.88526L10.621 4.62925L10.0546 4H2.5C2.22386 4 2 4.22386 2 4.5V11.5C2 11.7761 2.22386 12 2.5 12H5.88262L4.59691 14Z" fill="#3B3B3C"/>
    <path d="M3.5 15L12.5 1" stroke="#3B3B3C" stroke-width="2" stroke-linecap="round"/>
</svg>

P.S. in Figma you can select some layers, right click, and copy as svg

P.P.S. It would be nice as part of this change to drop the green styling for paused and instead just swap icons.

Comment 7

[:Harald Kirschner :digitarald]

P.P.S. It would be nice as part of this change to drop the green styling for paused and instead just swap icons.

Lets discuss. I don't see how just the icon change will be very visible. Related, https://github.com/firefox-devtools/ux/issues/60 should probably be considered in this context as well.

Comment 8

[David Walsh :davidwalsh]

I agree that the icon needs a color, and I'd actually love if the entire panel header turned a very light green. There've been times I've paused and the only quick way to know I had paused was the green icon. Without an overlay (like other browsers), I feel that icon color is crucial.

Comment 9

[Jason Laster [:jlast]]

Yep, we definitely need to emphasize pause state. It seems like the best solution is to make the application clearly paused (mask+overlay).

Once we have that, it would be nice to revisit the current approach. We currently show the same pause state in many different places: tab (green icon), top right (yellow background), paused line (blue background), active breakpoint (green border), threads pane (right icon)...

https://bugzilla.mozilla.org/show_bug.cgi?id=1354679

Comment 10

[:Harald Kirschner :digitarald]

The idea in https://github.com/firefox-devtools/ux/issues/60#issuecomment-485977784 might satisfy how we can use the icons for now, with color.

Lets try to pick up bug 1354679 in the medium term but not block this work (I agree that its one of the highest impact parity features; as it can cause some cognitive dissonance for Chrome-trained users to now have it).

Comment 11

[:Harald Kirschner :digitarald]

David, do we have enough in https://github.com/firefox-devtools/ux/issues/60#issuecomment-486454261 to give the implementation a shot?

Comment 12

[David Walsh :davidwalsh]

Victoria, do we have the icon(s) for the debugger that you're using in those mockups?

Comment 13

[David Walsh :davidwalsh]

My mistake, it looks like the pause icon is overlayed over the first icon.

Are any other panels currently doing this? If so, do we have a standard classname/HTML structure we're using?

Comment 14

[:Harald Kirschner :digitarald]

Are any other panels currently doing this? If so, do we have a standard classname/HTML structure we're using?

Afaik no, this is new UX and you are breaking fresh ground here.

Comment 15

[Tim Nguyen :ntim]

(In reply to :Harald Kirschner :digitarald from comment #14)

Are any other panels currently doing this? If so, do we have a standard classname/HTML structure we're using?

Afaik no, this is new UX and you are breaking fresh ground here.

The badging no, but changing the icon and the text color yes. The perf tool/the memory tool/the debugger all have a notification icon state.

Comment 16

[Victoria Wang [:victoria]]

Oh, it's a photon pause icon that I just realized is deprecated accordingg to the icon site (I'm going to ask about this) and it's overlaid on a circle but with a transparent border, which might be tough to replicate all in css.

We could see how the main Firefox hamburger icon with update badge works. Otherwise maybe :fvsch has an idea about the best way to do this :D.

Comment 17

[Victoria Wang [:victoria]]

On second thought, I think we can use that pause icon anyway — it may be too bold for photon but at this tiny size, it looks great.

Comment 18

[:Harald Kirschner :digitarald]

We could see how the main Firefox hamburger icon with update badge works

The menu icon has a version that leaves a nook for the badge: https://searchfox.org/mozilla-central/source/browser/themes/shared/icons/menu-badged.svg

Comment 19

[David Walsh :davidwalsh]

Alex, could you advise on where to start developing this? Specifically, how we can allow a tool to modify its toolbox icon based on state

Comment 20

[Victoria Wang [:victoria]]

The menu icon has a version that leaves a nook for the badge: https://searchfox.org/mozilla-central/source/browser/themes/shared/icons/menu-badged.svg

Thanks for the sleuthing! Seems like it would be easier just to use a badged version of the icon that includes the yellow/white/black colors inside the SVG, as coloring with CSS seems complicated for this (?). Either way I can work on this next week.

Comment 21

[:Harald Kirschner :digitarald]

Seems like it would be easier just to use a badged version of the icon that includes the yellow/white/black colors inside the SVG, as coloring with CSS seems complicated for this (?)

Unsure about this one. When we badge by overlaying 2 SVGs (like the hamburger menu does) then coloring is possible; as both SVGs can be treated separately.

Comment 22

[Florens Verschelde :fvsch]

We can pass 2 colors to SVG backgrounds: context-fill and context-stroke. Ideally they should be for fills and strokes, but we sometimes abuse the context-stroke color as a secondary fill.

The easiest and possibly cleaner solution would be to have "badged" variants of each tool icon and pass it two colors:

background-image: url(path/to/tool-debugger-paused.svg);
-moz-context-properties: fill, stroke;
fill: var(--theme-icon-color); /* main shape */
stroke: red; /* badge color */

But using a separate badge element or pseudo-element can work too. We may not need to prepare a special "with cutout" version of each tool icon if we can pass the tab's background-color as a secondary color to the badge icon.

Comment 23

[Alexandre Poirot [:ochameau]]

(In reply to David Walsh :davidwalsh from comment #19)

Alex, could you advise on where to start developing this? Specifically, how we can allow a tool to modify its toolbox icon based on state

I don't know this toolbox code much, I think the last significant contributor was Greg, when he refactored the toolbox buttons to React.
But I imagine that would be able tweaking this code:
https://searchfox.org/mozilla-central/rev/8308eb7ea14318f53b55f3289c2bb9b712265318/devtools/client/framework/attach-thread.js#23-34
https://searchfox.org/mozilla-central/rev/8308eb7ea14318f53b55f3289c2bb9b712265318/devtools/client/framework/components/ToolboxController.js#125-137
In order to handle more than just highlight/unhighlight and on top of that control the panel's icon.

Comment 24

[David Walsh :davidwalsh]

This wont be a good first bug, as the overall toolbox needs work.