1472786 - Too tall borders for multiselected tabs and hovered tabs

Status: RESOLVED WORKSFORME

(Firefox :: Tabbed Browser, defect, P3)

Description

[Oriol Brufau [:Oriol]]

Attachment: screenshot.png

1. Enable browser.tabs.multiselect
2. Show menu bar
3. Open various tabs
4. Select a tab, press Ctrl, and click another tab, which becomes highlighted

Result: the borders of the highlighted tab are too tall, they intrude on the menu bar

Regressed by bug 1458018. I would want to see the UX spec, I don't think this was expected.

Comment 1

[Abdoulaye O. LY]

Yes, I can notice this on Linux (ubuntu 18) but not on Windows 10 though. I don't know if it's intentional or a technical limitation but this issue can be observed with hovered tabs too. Indeed, hovered tabs and highlighted tabs have the same design spec except that the horizontal-tab-line at the top remains colored for the latter. Hence my implementation of highlighted tabs design was based on the hovered tabs where I think this issue comes from.

Check spec at https://mozilla.invisionapp.com/share/4NJ8CFDW9DP#/screens/295638953.

Comment 2

[:Gijs (he/him)]

(In reply to Abdoulaye O. LY from comment #1)
> Yes, I can notice this on Linux (ubuntu 18) but not on Windows 10 though.

In the past this type of thing has been a dpi issue, where different rounding of different things led to off-by-one errors in the size of parts of the tabstrip. Perhaps that's the case here... the fact that you have to enable the menu bar to reproduce may hint at that (ie it'll alter the sizes/positions of things, "triggering" the rounding to be just a bit different than without th emenubar). Oriol, what windows scaling factor are you using, and can you also reproduce this issue with hovered tabs, per:

> I
> don't know if it's intentional or a technical limitation but this issue can
> be observed with hovered tabs too. Indeed, hovered tabs and highlighted tabs
> have the same design spec except that the horizontal-tab-line at the top
> remains colored for the latter. Hence my implementation of highlighted tabs
> design was based on the hovered tabs where I think this issue comes from.

?

For sure we should try to fix this if possible, but I don't know off-hand how hard that'd be. A quick look at the patch in bug 1458018 doesn't really give me any clues, unless there are other styles for hovered tabs that should be applied to multiselected tabs that we missed, or something?

Comment 3

[Oriol Brufau [:Oriol]]

(In reply to :Gijs (he/him) from comment #2)
> Oriol, what windows scaling factor are you using

I use 100% scaling in Windows 10. I can also reproduce in Lubuntu 18.

> and can you also reproduce this issue with hovered tabs, per:

Right, it also happens for hovered tabs.

Comment 4

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

This shouldn't be specific to multiselected tabs, which comment #3 confirms. I've changed which bug this is now blocking.

Comment 5

[Pascal Chevrel:pascalc (PTO until April 26)]

esr60 was marked as unaffected probably because it was initially filed as a multiselect bug, but this seems to be a photon polish bug, so 60 should be affected.

Comment 6

[Liz Henry (:lizzard) (relman/hg->git project)]

Happy to take a patch in nightly; if it seems low risk enough please feel free to request uplift to 65 beta.

Comment 7

[Oriol Brufau [:Oriol]]

Attachment: Bug 1472786 - Fix too tall borders for multiselected tabs and hovered tabs. r=dao

Comment 8

[Oriol Brufau [:Oriol]]

Attachment: tab-border-possibilities.png

So the problem is that active and multiselected tabs have a top border, but it's transparent for other tabs. But the vertical separator still reaches the very top, so it seems too tall. Also, for the dark theme, the top border of active and multiselected tabs looks almost like the background, so the vertical separator also seems too tall for multiselected tabs. This is the first row in the image.

The simplest way to solve this is just removing the top border, as seen in the 2nd row.

If this is not acceptable, I guess the solution would be (third row):

• Shorten the tab separator when both adjacent tabs have a transparent top border
• Set the color of the tab separator adjacent to a multiselected tab to be --tabs-border-color instead of --lwt-background-tab-separator-color. This already happens for the selected tab, and without doing it for multiselected ones too the separator will look too tall in the dark theme.
• Properly handle the separator when dragging tabs (e.g. the first multiselected tab should have a separator in ::before, not just in ::after). Doing this properly is not easy.

So what should I do?

Comment 9

[Tim Nguyen :ntim]

Could you close this? Seems irrelevant with Proton.

Comment 10

[Oriol Brufau [:Oriol]]

Irrelevant with Proton.