1499987 - Use 2-state icons for Element picker and RDM buttons in toolbox

Status: RESOLVED FIXED

(DevTools :: Framework, enhancement)

Description

[Florens Verschelde :fvsch]

In bug 1488012 we updated the frame picker button with Photon styling and an "active" state that uses a slightly different design (one area of the icon goes from transparent to a partial fill when active).

Following this work, and discussion in https://github.com/devtools-html/ux/issues/25 ("Toolbox “checked” background might be confusing"), we would like to update other relevant icons in the toolbox:

1. "Pick an element" icon
2. "Pick an accessible element" icon (should match the first one)
3. RDM icon

Victoria provided SVGs in the above GitHub issue.

Two other related details I'd like to address:

A. Following bug 1488012, there is a visual glitch when setting the Frames button to active. We're using a different URL (command-frames.svg#filled), which causes the inactive icon to disappear while the new URL is loaded or rendered. We can fix this by using a single file and URL, and using a context-stroke color to render the optional path. Abusing context-stroke for a fill feels bad, but according to :birtles it's common practice (while we wait for env(--custom-properties) to materialize).

B. The original UX issue was about the light gray background used for checked buttons, as well as the hover and focus styles. Having the same visual signal for when user interacts with a button and when that button gets or retains an "active" state is confusing. With the updated icon designs, we should be able to remove that background in the "checked" state. Only issue is that it's code shared by a bunch of devtools buttons, so maybe we should "fork" the CSS for toolbox buttons to avoid changing the original one; or we could identify if other toolbox buttons have a `.checked` class.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1499987 - Add an active state to toolbox SVG icons; r?gl

- Update 'Pick an element' icon with bigger arrow, background in active state
- Update 'Pick an accessible element' icon with pixel-fitted design, background in active state
- Update 'RDM' icon with background in active state
- Use context-stroke to enable design changes, instead of a different URL, to avoid a visual glitch

Comment 2

[Florens Verschelde :fvsch]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=503aafa5c5ffc821e98755255544df38c7513489

Comment 3

[Florens Verschelde :fvsch]

I've left the gray background issue out of this patch.
It would require more CSS changes, so I'd like to handle it in a follow-up bug.

Comment 4

[Florens Verschelde :fvsch]

Attachment: toolbox-active-buttons-macos.png

Result of this patch on macOS (2dppr) and all three buttons in "active" state.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e688352c431d
Add an active state to toolbox SVG icons; r=gl

Comment 6

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/e688352c431d