1705323 - Adjust "Switch to tab" chiclet colors

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Marco Bonardo [:mak]]

+++ This bug was initially created as a clone of Bug #1702772 +++

Amy reported that Switch to tab chiclet in tab results changes color to hover on selected rows, and looks a bit confusing/distracting.
The reason for which we do that is that switch to tab has been styled as a chiclet, and if we didn't change its background it would disappear since the selected row has the same (or very close) background color.

We don't have a solution at hand yet, so I'm filing this as a placeholder to remember about this issue.
Maybe we could have the chiclet invert color (so take the panel background color) on selection, rather than use the hover color?
My favorite solution would be to go back to simple action text, as it was before, since this is not a button.

Comment 1

[Marco Bonardo [:mak]]

Amy, we discussed this during the review, we're still not sure how to proceed here, you said it needed a bit more brainstorming, thus I wonder if you had any new ideas for it.

Comment 2

[Amy Lee [:amylee] UX]

Hi,

I spoke to Harry about leaving the chicklet as is since if we change it, it ends up creating more complexity.

Comment 3

[Marco Bonardo [:mak]]

Attachment: switch.png

This one below in the sshot is my proposal, instead of using the confusing "active" color, we can just "invert" the chiclet, basically show the background panel color. it may be less confusing than making the chiclet react with tje active color, making it look like a button you can interact with, when it's not.

Comment 4

[Marco Bonardo [:mak]]

Romain, do you think it's worth making my proposed change to reduce confusion where users may thing that entry is a button by seeing the usual hover state? It just makes it a little bit more subtle, I'm happy to prepare a Try build for testing it if necessary.

Comment 5

[Romain Testard [:RT]]

Thanks Marco, I agree that your proposal feels right. A try build would be perfect to that Amy and I can review and validate this could ship.

Comment 6

[Marco Bonardo [:mak]]

I created a Spike in Jira to evaluate this and bug 1705562: https://jira.mozilla.com/browse/FIDEFE-1304
Linux: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/Ug9J4q-dQBO6P6_13WeEhw/runs/0/artifacts/public/build/target.tar.bz2
macOS: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/LnooLMnHTOOx0e0bfpnqQQ/runs/0/artifacts/public/build/target.dmg
Windows: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/Ev_nPM_LRRqKn8ElBJAm_A/runs/0/artifacts/public/build/target.zip

Comment 7

[Marco Bonardo [:mak]]

taking to ensure others dont spend time on this, we're just waiting answers

Comment 8

[Romain Testard [:RT]]

(In reply to Marco Bonardo [:mak] from comment #6)

I created a Spike in Jira to evaluate this and bug 1705562: https://jira.mozilla.com/browse/FIDEFE-1304
Linux: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/Ug9J4q-dQBO6P6_13WeEhw/runs/0/artifacts/public/build/target.tar.bz2
macOS: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/LnooLMnHTOOx0e0bfpnqQQ/runs/0/artifacts/public/build/target.dmg
Windows: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/Ev_nPM_LRRqKn8ElBJAm_A/runs/0/artifacts/public/build/target.zip

This looks good to me, I agree that your proposal feels righter when using the background color. Amy, do you have concerns with this?

Comment 9

[Amy Lee [:amylee] UX]

Attachment: Screen Shot 2021-04-27 at 1.00.44 PM.png

Hi,

There is inconsistency between Light/Dark theme with the new proposed change.

Please see the edits below so Dark theme follows the same "rules" as light theme

Hover state colour of Switch to tab chicklet for dark theme (Mouse/Keyboard) - Dark Grey 30 / #42424D
Default state colour of Switch to tab chicklet for dark theme - #2B2A33
Text - Dark theme text should be #FBFBFE in all states (I noticed 2 different font colours)

Screenshot for reference

Comment 10

[Marco Bonardo [:mak]]

It's possible my mosaic of sshots ended up mixing a focused and an unfocused window, that would explain the different colors. I'll double check that anyway.

Comment 11

[Marco Bonardo [:mak]]

(In reply to Amy Lee [:amylee] UX from comment #9)

Hover state colour of Switch to tab chicklet for dark theme (Mouse/Keyboard) - Dark Grey 30 / #42424D

Ah, we are using 42414D because figma uses that, but then the color palette text says 42424D. I asked on you Slack to confirm a color because I'm not sure what we're supposed to use at this point.
The color we are using is correct, we are using #42414D. The Colors palette had a typo.

Default state colour of Switch to tab chicklet for dark theme - #2B2A33

This looks correct from my measurement.

Text - Dark theme text should be #FBFBFE in all states (I noticed 2 different font colours)

The color is correct on hover and selected, but it's wrong in normal mode.

Comment 12

[Marco Bonardo [:mak]]

Attachment: Bug 1705323 - Change hover and active bgcolor for Switch to tab chiclets. r=harry

Currently we use hover and active colors, that may be confusing for the user
because these are styles as chiclets but are not real buttons.
Using the panel background is a bit more discrete.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fb56b41f91c7
Change hover and active bgcolor for Switch to tab chiclets. r=harry,desktop-theme-reviewers

Comment 14

[Iulian Moraru]

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

Comment 15

[Marco Bonardo [:mak]]

Comment on attachment 9218926 [details]
Bug 1705323 - Change hover and active bgcolor for Switch to tab chiclets. r=harry

Beta/Release Uplift Approval Request

• User impact if declined: Part of MR1 design, fixes design of the Switch to Tab chiclets in the urlbar
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce: This is just visual polish, probably not worth it
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Minor css changes, visual polish
• String changes made/needed:

Comment 16

[Pascal Chevrel:pascalc]

Comment on attachment 9218926 [details]
Bug 1705323 - Change hover and active bgcolor for Switch to tab chiclets. r=harry

Approved for 89 beta 6, thanks.

Comment 17

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/c5ccbaf67801

Comment 18

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

This issue was verified during the pre-release testing of the Proton: Address bar feature.