1696469 - Tweak panel design to better match spec

Status: RESOLVED FIXED

(Firefox :: Address Bar, enhancement, P1)

Description

[Harry Twyford]

UX recently reviewed Proton work on the address bar and asked us to make some changes:

• List item height looks shorter than spec. List height should 36px and hover state height should be 32px. URL bar in closed state/default state should be 32px tall.

• The bottom “This time, search with:” row height looks taller than the spec.

• The colour on the “Selected” and “Hover” state looks inverted. The colour for hover/pressed states should be
  universal in the browser. The “Selected” state is using “Secondary” in the colour palette.

• Can you confirm if the hairline colour is from the spec? It looks a bit dark. Hairline colours should be the same across the browser and should be using “Secondary” in the colour palette (F0F0F4).

• The “This time search with:” favicons are missing pressed states - These should be the same as list item hover/pressed states (see above spec link)

• Please remove the green text for “Search with Google”. All green text should be updated to match standard text on light theme colour (#15141A).

• Remove vertical hairline between the Shield/Lock icon in the URL bar.

• Update the URL Focused state on New Tab to have 40% opacity on the blue border (#0061E0, 40%)

All of these are pretty small on their own, so I'm going to handle them all in this one bug. This is also a good opportunity to move colours into browser-custom-colors.inc.css that we have a plan for how to manage colours.

Comment 1

[Marco Bonardo [:mak]]

(In reply to Harry Twyford [:harry] from comment #0)

• Remove vertical hairline between the Shield/Lock icon in the URL bar.

This is part of the chiclet patch, that didn't land yet. It was maybe a bit too early to do a review pass on the urlbar considered it was missing both that and your new dark theme patch. But better more feedback than less.

Comment 2

[Harry Twyford]

Attachment: Bug 1696469 - Part 1 - Tweak address bar panel design to better match Proton spec. r?mak!,dao!

List of requested changes and resolutions:

List item height looks shorter than spec. List height should 36px and hover state height should be 32px. URL bar in closed state/default state should be 32px tall.

• List height addressed. Urlbar height addressed in D107422.

The bottom “This time, search with:” row height looks taller than the spec.

• Addressed.

The colour on the “Selected” and “Hover” state looks inverted. The colour for hover/pressed states should be universal in the browser. The “Selected” state is using “Secondary” in the colour palette.

• I spoke with UX and we're going with Secondary Hover for hover and Secondary Pressed for selected. I moved this into a second patch since I expect it will require more review/UX discussion.

Can you confirm if the hairline colour is from the spec? It looks a bit dark. Hairline colours should be the same across the browser and should be using “Secondary” in the colour palette (F0F0F4).

• Changed to F0F0F4.

The “This time search with:” favicons are missing pressed states - These should be the same as list item hover/pressed states (see above spec link)

• Colour changes are included in Part 2. Adding an :active state may require more engineering effort than is scoped for this bug. In SearchOneOffs._on_mousedown, we call event.preventDefault(). This means an :active state is not set on the buttons, so we can't have a separate pressed/:active state. I confirmed that line is still needed on Linux to get catch clicks. We could gate it behind a platform check so at least we have an :active state on macOS and Windows, but the slight behaviour change might cause headaches in the future. I left it as-is for now.

Please remove the green text for “Search with Google”. All green text should be updated to match standard text on light theme colour (#15141A).

• Addressed.

Remove vertical hairline between the Shield/Lock icon in the URL bar.

• Addressed in 1691531.

Update the URL Focused state on New Tab to have 40% opacity on the blue border (#0061E0, 40%)

• Addressed.

Depends on D107011

Comment 3

[Harry Twyford]

Attachment: Bug 1696469 - Part 2 - Use Proton color system colors for color/background-color in the address bar and arrowpanels.

Depends on D107561

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/852d2b730c70
Part 1 - Tweak address bar panel design to better match Proton spec. r=mak,dao
https://hg.mozilla.org/integration/autoland/rev/fa6296b81200
Part 2 - Use Proton color system colors for color/background-color in the address bar and arrowpanels. r=dao,mak

Comment 5

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/852d2b730c70
https://hg.mozilla.org/mozilla-central/rev/fa6296b81200