579373 - app tabs look grody on Linux

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Dietrich Ayala (:dietrich)]

- 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.

Comment 1

[Dietrich Ayala (:dietrich)]

Attachment: screenshot

Comment 2

[[:Aleksej]]

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.

Comment 3

[Johnathan Nightingale [:johnath]]

We'll need shorlander to tell us what they should look like, but they can't look like that.

Comment 4

[Stephen Horlander [:shorlander]]

They should like they do on other platforms with Linux specifics detailed in bug 572488.

Comment 5

[Dietrich Ayala (:dietrich)]

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: http://mxr.mozilla.org/mozilla-central/search?string=.tabbrowser-tab[pinned]

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

https://developer.mozilla.org/en/XUL_Tutorial/Modifying_the_Default_Skin

The way it should look is described in bug 572488 - see it's attachments for screenshots/mockups of the visual styles.

Comment 6

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

I'll try giving it a shot.

Comment 7

[Guillermo Movia [:deimidis]]

I will try too

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: v1 wip

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?)

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: v2

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.

Comment 10

[Dietrich Ayala (:dietrich)]

Fantastic, thanks Wes. Can you attach a screenshot of what the app tabs look like with your changes applied?

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: 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 12

[Dietrich Ayala (:dietrich)]

Comment on attachment 469157 [details] [diff] [review]
v2

Dao, can you do a first-pass review of this?

Comment 13

[Dietrich Ayala (:dietrich)]

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?)

Comment 14

[Dietrich Ayala (:dietrich)]

Wes, if you haven't yet, should check that the changes still work as expected when tabs are on top.

Comment 15

[Dietrich Ayala (:dietrich)]

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!

Comment 16

[Dão Gottwald [:dao]]

Comment on attachment 469157 [details] [diff] [review]
v2

> .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).

Comment 17

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Should bug 572488 (tab style in general) be fixed before we do anything here (app tab style specifically)?

Comment 18

[Stephen Horlander [:shorlander]]

(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.

Comment 19

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

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.

Comment 20

[Dão Gottwald [:dao]]

(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.

Comment 21

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Attachment: 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.

Comment 22

[Dietrich Ayala (:dietrich)]

Unsetting blocking+ since this has become a meta bug. I transferred blocking over to the specific dependents.

Comment 23

[Matt Brubeck (:mbrubeck)]

Fixed by bug 572488.

Comment 24

[Dão Gottwald [:dao]]

Fixed by bug 579683 and bug 587576, really.