Closed Bug 579373 Opened 14 years ago Closed 14 years ago

app tabs look grody on Linux


(Firefox :: Theme, defect)

Not set





(Reporter: dietrich, Assigned: KWierso)



(Keywords: meta)


(4 files, 1 obsolete file)

- too narrow. need some heft on those things. at least another couple of pixels on either side.

- the "big" look when an app tab is selected is funky. the button shading makes it look like it's fatter on the bottom.

- whereas regular tabs have border contrast that makes them fit with most personas, the app tabs look like they've been hot-glued onto the tab strip. could be because they hang below the normal tabstrip bottom border.
Attached image screenshot
Because of the different height, the tab UI doesn't look like a single whole.

Also, App Tabs take some space from the Back button.
Blocks: 563730
Component: Tabbed Browser → Theme
Depends on: 579683
QA Contact: tabbed.browser → theme
blocking2.0: --- → ?
We'll need shorlander to tell us what they should look like, but they can't look like that.
blocking2.0: ? → beta5+
They should like they do on other platforms with Linux specifics detailed in bug 572488.
To anyone not familiar w/ Firefox development who is interested in fixing this:

The CSS that needs to be tweaked are tabs that are pinned, in the Linux theme, see the selector here:[pinned]

And you can test out your changes via the technique described here:

The way it should look is described in bug 572488 - see it's attachments for screenshots/mockups of the visual styles.
I'll try giving it a shot.
I will try too
Attached patch v1 wip (obsolete) — Splinter Review
This adds a bit of padding to app tabs' right and left sides, to make them a bit wider.

It also moves the tabs container 3px away from the edge of the window, to better match the mockup posted in that other bug.

It also adds a bit of space between tabs, also to match the mockup.

My original Minefield build looked nothing like the screenshot posted earlier in this bug, though.

This is only a work in progress. Just noticed that if the notification bar is showing, and if an app tab is selected, the app tab bleeds over into the notification bar. (This kinda looks like the original screenshot in this bug, so maybe app tabs are just too tall?)
Attached patch v2Splinter Review
This is the same as the last one, but sets a height of 25px for pinned tabs. Seems to fix the problem of it bleeding out for me.
Not really sure what else needs to be done for this bug, since the other bug talks about porting tab style over from winstripe.
Attachment #469152 - Attachment is obsolete: true
Fantastic, thanks Wes. Can you attach a screenshot of what the app tabs look like with your changes applied?
Attached image screenshot
I think this has everything from that patch.

I don't actually have enough free space on my Ubuntu VM to compile from my checked out copy of Firefox's source. This screenshot's from a pre-compiled nightly, with the changes made to /chrome/browser/content/browser/browser.css, while the patch to the source files is to /browser/themes/gnomestripe/browser/browser.css.

I'll try to clone my virtual hard drive over to a larger one tomorrow so I can actually build Firefox with the changes made in the correct place. (Or I'll just make a completely new VM and apply the patch again.)
Comment on attachment 469157 [details] [diff] [review]

Dao, can you do a first-pass review of this?
Attachment #469157 - Flags: feedback?(dao)
The padding and height changes look good to me. Changes to the treatment of non-app-tabs, and the whole tab bar should probably be in a separate patch/bug, so we can keep the changes and discussion focused on app-tabs in this bug.

(Stephen, can you see if we want the non-app-tab changes that Wes made? and file bugs if so?)
Wes, if you haven't yet, should check that the changes still work as expected when tabs are on top.
Assignee: nobody → kwierso
To the other peeps interested in helping fix the appearance of Firefox on Linux - check out bug 572482, it's got a bunch of bugs listed where we need more help!
Depends on: 587576
Comment on attachment 469157 [details] [diff] [review]

> .tabbrowser-tab {
>   padding: 0 2px 2px;
>   margin-bottom: 1px;
>+  margin-left: 1px;
>+  margin-right: 1px;

We don't want this, see bug 482965.

>+.tabbrowser-tab[pinned] {
>+  padding-left: 4px;
>+  padding-right: 4px;

This is bug 587576.

>+  height: 25px;

This is bug 579683 (and not the right way to address it, as it doesn't accommodate different font sizes).
Attachment #469157 - Flags: feedback?(dao) → feedback-
Keywords: meta
Should bug 572488 (tab style in general) be fixed before we do anything here (app tab style specifically)?
(In reply to comment #17)
> Should bug 572488 (tab style in general) be fixed before we do anything here
> (app tab style specifically)?

Ideally yes, but just fixing this in the short term is probably better than waiting for bug 572488.
The general fixes in bug 587576 and bug 579683 would cover everything, right?

I don't know how else to get the tab bar to look like the mockup (a pixel or three of space between the tabs) without using margin. How is that handled on the Windows side? The patch in bug 482965 just removes the margin, I don't see how Windows is getting the space between the tabs.
(In reply to comment #19)
> I don't know how else to get the tab bar to look like the mockup (a pixel or
> three of space between the tabs) without using margin. How is that handled on
> the Windows side?

The gap is part of the tab borders.
Attached image screenshot ontop
This is what the patch makes it look like with tabs on top.

> #TabsToolbar {
>+  -moz-margin-start: 7px;
> }

I think this needs to go to one of #TabsToolbar's children, or the bottom border doesn't extend to the edge of the window.
Unsetting blocking+ since this has become a meta bug. I transferred blocking over to the specific dependents.
blocking2.0: beta5+ → ---
Fixed by bug 572488.
Closed: 14 years ago
Depends on: 572488
Resolution: --- → FIXED
Fixed by bug 579683 and bug 587576, really.
No longer depends on: 572488
You need to log in before you can comment on or make changes to this bug.