1701943 - New Tab button styling looks different from tabs

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[Marco Bonardo [:mak]]

The new tab button is commonly grouped with tabs, but its styling looks different from them:

1. it's misaligned by 1px, more specifically it's 1px too high on my screen
2. the button hover color is different from tabs hover color, it looks the same as toolbarbuttons hover color
3. the button hover color is also different from the selected tab color (so when the last tab is selected there's many shades of gray close each other)

This has been tested with the Dark theme on Windows 10.

Comment 1

[Marco Bonardo [:mak]]

Attachment: example.png

This shows the many shades of gray and misalignment

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

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

The new tab button is commonly grouped with tabs, but its styling looks different from them:

1. it's misaligned by 1px, more specifically it's 1px too high on my screen

Can you please test again? I just tested with latest m-c build and in both the overflow and underflow states the bottom edge of the New Tab button is equal to the bottom edge of the selected tab.

2. the button hover color is different from tabs hover color, it looks the same as toolbarbuttons hover color
3. the button hover color is also different from the selected tab color (so when the last tab is selected there's many shades of gray close each other)

For both #2 and #3, the tab hover color needs to be a different shade than the button hover color, otherwise the hover color of the close button on top of the selected tab would need to be different.

Comment 3

[Marco Bonardo [:mak]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)

Can you please test again? I just tested with latest m-c build and in both the overflow and underflow states the bottom edge of the New Tab button is equal to the bottom edge of the selected tab.

I still see it. I suspect it's a problem with rounding, I'm on Windows 10 at 125% DPI.

For both #2 and #3, the tab hover color needs to be a different shade than the button hover color, otherwise the hover color of the close button on top of the selected tab would need to be different.

I understand that, I think my concern is mostly that there's too many grays and differ just a little bit, causing a patchwork effect. This is less important than the misalignment anyway.

Comment 4

[Dão Gottwald [:dao]]

We should fix the button alignment at 125% DPI, but we're less concerned about the color difference as the new tab button matches other toolbar buttons.