Closed Bug 1499987 Opened Last year Closed Last year

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

Categories

(DevTools :: Framework, enhancement)

enhancement
Not set

Tracking

(firefox64 fixed)

RESOLVED FIXED
Firefox 64
Tracking Status
firefox64 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(2 files)

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.
Assignee: nobody → florens
Status: NEW → ASSIGNED
- 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
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.
Result of this patch on macOS (2dppr) and all three buttons in "active" state.
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/e688352c431d
Add an active state to toolbox SVG icons; r=gl
https://hg.mozilla.org/mozilla-central/rev/e688352c431d
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
You need to log in before you can comment on or make changes to this bug.