Toolbox “checked” background might be confusing

[fvsch]

I’m seeing an issue with the Toolbox buttons: some buttons, when clicked, get a “checked” style (that’s the name of the CSS class used), which:

• turns the icon’s color blue
• changes the background (a bit darker or lighter depending on the theme)

I’m having an issue with the background change, because it’s the same color used for keyboard focus, hover, and the “expanded” state of the menu button. As a result, I interpret that background color as “we are currently interacting with this button or its dropdown menu”.

The “checked” state is a bit different, it means “the feature controlled by this button is currently active”, which can be seen with the “Inspect an element” and the RDM buttons.

By mixing both styles, we can get a situation where several items looks like they’re hovered or focused:

I suggest removing the background change from the “checked” style, keeping it only for hover, focus and “expanded” (menu open) states.

Accessibility considerations

The current “checked” state does not conform to WCAG success criterion 1.4.1, so removing the background does not hurt more.

We might want to have another indication than just the blue color for “active” features, such as a small change in the icon or adding a contrasted visual marker. For example, Firefox does this for updated pages:

There’s also the tab's top border which means “active”, this could perhaps be adapted to buttons.

Quick try:

Not sure I like any of those, they might be more confusing than helpful. Maybe just keep the blue icon color for now.

[fvsch]

I think someone suggested inverted colors for the "Select an element" button's active state. E.g. in the light theme, use a blue background and a white icon.

It might look like this:

The goal was to make the "active" state more prominent, since it's easy to miss right now and has a lot of impact on user interaction. I think @captainbrosset liked the idea?

[captainbrosset]

I don't remember discussing about this color change. But I wouldn't be against it.

[violasong]

Wait, first of all, I see you have your way better looking iframe icon in your screenshot - could that get landed :D? (I know there was the question of all the other non-photon icons but I felt it would still be worth it as the one default toolbox icon. I'll check with Martin on this.)

Secondly, am I going nuts or are the thick lines in the icons doorhanger menu thinner than the thick lines in the iframe icon? I really like that less thick look.

Back to the topic at hand: agreed that this is important to fix, though I feel the white on blue seems too strong for the toolbar. Maybe the blue background just needs to be a little smaller and rounded?

Or even just a medium gray background like these icons of Firefox

There's probably a better solution but in my quick survey I didn't come up with one yet.

[violasong]

Probably my favorite solution would change the look of the icon to emphasize the action, as you explored in your iframe ideas

E.g. a few quick ideas

[fvsch]

The patch implementing the frame picker two-state icon is in bug 1488012, currently in review.

I'm also in favor of having unfilled and filled icon variants for the "Select and element" and RDM icons.

[fvsch]

I tried the picker icon with a darker fill for the arrow, but the difference was not striking at the icon's actual size. So I did another test which adds a background to the frame, and removes the arrow's background to make it more contrasted:

(Actual result at 1x.)

In practice I like the background option more, because it's more visible. It's kind of like the "inverse colors" idea, but limited to the icon itself.

[fvsch]

Here's the result of using the "when active, color the background of a meaningful part of the icon" pattern for the Pick an element, Frame picker button and RDM button:

Some notes:

• The frame picker is already implemented like this and just landed.
• The other two are made with working SVG and CSS code, so I can make a cleaned up patch easily.
• I've used 0.3 opacity for the backgrounds of the active states. This looks alright in light mode, but is maybe a bit weak in dark mode. We could try to use 0.3 on light and 0.4 on dark.
• The active "rectangle" looks weaker in the Frames icon because the backdrop is darker.

If we choose to use those visual differences in icons, I would like to go on and remove the light gray background from the active/checked states of the "Pick an element" and RDM buttons. This would restore this background style as only a hover/focus marker, fixing a usability issue at the same time, and fixing this UX issue.

[violasong]

Nice - this is actually the next thing I started working on yesterday, but I wasn't sure if the cursor stood out enough, even with 2px outlines:

What if we made the cursor arrowhead 1px larger? Also, I would actually suggest a lighter opacity in light mode (.15 here), because the .3 makes makes it look a bit too much like a plain rectangle to me, in light mode.

In context - here with no deeper gray background, as you mentioned. Seems good to me!

This subtly different version uses 17% Blue 50 on white (instead of the toolbar color), for a slightly brighter look, which might improve the legibility at cost of not fitting quite as well

Argh ok, here's one final idea - filling in the larger cursor and making the point a little sharper, and a slightly smaller rectangle. Bit more similar to Chrome but maybe a bit more clear than the others.

CC: @gabrielluong - in case you want to weigh in on this semi-major visual tweak before Florens tries to uplift this tomorrow :)

[violasong]

picker icons.zip SVGs attached.

Apologies for the jankiness in both these files - I'm expecting you'll have a much easier time fixing them than I will 😅

[fvsch]

I like the bigger arrowhead. Slight preference for the stroke-only one:

But the other one looks good too. Edit: I've come around and may like the filled one (in the "final idea" version) more. :D

Have we already tried using a 2px stroke for the frame? This would be closer to the Photon guidelines, but one risk is making all our icons looks the same. Still worth a try maybe?

PS: no worries about the SVGs, they're easy enough to clean using SVGOMG and some manual code tweaks.

[fvsch]

All three buttons at 1x, with the highlight backgrounds at 0.15 opacity (using the same color as the strokes) with running code:

I made the arrow a bit less strong because otherwise it looked too blurry at 1x.

[violasong]

Ah nice, looks like you might have enlarged the whitespace in the arrow? It seems a bit more clear than in my versions.

I gave a attempt at 2px and it seems pretty intense due to no use of 1px, and because it's pretty far away from the other photon style icons.

Your latest screenshot looks good! Happy to go with that.

[fvsch]

For implementation: bug 1499987

[fvsch]

Thanks for the 2px box test. Indeed it looks a bit out of place for now. Let's go with my screenshot above, and I'll try to work on the arrow a bit in Sketch or Illustrator to prevent some of the blurry pixels that remain (there are two blurry pixels on the left and top of the arrow's point, I'd like to avoid them).

I think the arrow's hollow is larger because I made the stroke a bit thinner, which left more room in the middle. If it's a good look, let's work with that.

[fvsch]

I've redrawn the arrow to make it crisper at 1x:

Active look:

And I've fixed the command-pick-accessibility.svg image which had a misaligned (and thus blurry at 1x) frame, give it a 15% opacity background in the active state, and I've redrawn the "human" shape on the pixel grid so that the legs and arms are crisp; the head is a bit more challenging because it's 2px and the body is 3px large, so unless we do a 4px-wide body like this:

... it's going to keep a 2px head that looks like a 1px head on 1x screens (it should look better on retina):

[fvsch]

I pushed the icon changes, so it should be in tomorrow's Nightly.

Remaining issue: the background color.