Closed
Bug 1472786
Opened 7 years ago
Closed 4 years ago
Too tall borders for multiselected tabs and hovered tabs
Categories
(Firefox :: Tabbed Browser, defect, P3)
Tracking
()
RESOLVED
WORKSFORME
Tracking | Status | |
---|---|---|
firefox-esr52 | --- | unaffected |
firefox-esr60 | --- | affected |
firefox61 | --- | unaffected |
firefox62 | --- | wontfix |
firefox63 | --- | wontfix |
firefox64 | --- | wontfix |
firefox65 | --- | wontfix |
People
(Reporter: Oriol, Assigned: Oriol)
References
(Blocks 1 open bug)
Details
(Keywords: regression)
Attachments
(2 files, 1 obsolete file)
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•7 years ago
|
||
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.
Flags: needinfo?(jaws)
Flags: needinfo?(gijskruitbosch+bugs)
Comment 2•7 years ago
|
||
(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?
Flags: needinfo?(gijskruitbosch+bugs) → needinfo?(oriol-bugzilla)
Assignee | ||
Comment 3•7 years ago
|
||
(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.
Flags: needinfo?(oriol-bugzilla)
Comment 4•7 years ago
|
||
This shouldn't be specific to multiselected tabs, which comment #3 confirms. I've changed which bug this is now blocking.
Updated•7 years ago
|
Comment 5•6 years ago
|
||
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.
Updated•6 years ago
|
Blocks: photon-tabs
Priority: -- → P3
Comment 6•6 years ago
|
||
Happy to take a patch in nightly; if it seems low risk enough please feel free to request uplift to 65 beta.
Updated•6 years ago
|
Assignee | ||
Updated•6 years ago
|
Assignee: nobody → oriol-bugzilla
Status: NEW → ASSIGNED
Summary: Too tall borders for multiselected tabs and hovered tabs on Linux → Too tall borders for multiselected tabs and hovered tabs
Assignee | ||
Comment 7•6 years ago
|
||
Assignee | ||
Comment 8•6 years ago
|
||
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?
Flags: needinfo?(dao+bmo)
Comment 9•4 years ago
|
||
Could you close this? Seems irrelevant with Proton.
Flags: needinfo?(dao+bmo) → needinfo?(oriol-bugzilla)
Assignee | ||
Comment 10•4 years ago
|
||
Irrelevant with Proton.
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Flags: needinfo?(oriol-bugzilla)
Resolution: --- → WORKSFORME
Updated•3 years ago
|
Attachment #9042842 -
Attachment is obsolete: true
You need to log in
before you can comment on or make changes to this bug.
Description
•