732583 - (australis-tabs) [meta] Implement Australis tab shape & styling

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement)

Description

[Stephen Horlander [:shorlander]]

Feature page: https://wiki.mozilla.org/Tab_Strip_Visual_Redesign

Specs for revised tabs:

* Windows 7 (Aero)
  - http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-windows7-mainWindow.html#sectionTabs

* Windows XP
  - Luna Blue: http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-windowsXP-lunaBlue-mainWindow.html#sectionTabs

  - Olive: http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-windowsXP-olive-mainWindow.html#sectionTabs

  - Silver: http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-windowsXP-silver-mainWindow.html#sectionTabs


* OSX
  - http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-osx-mainWindow.html#sectionTabs


* Linux
  - http://people.mozilla.com/~shorlander/files/australis-designSpecs/australis-designSpecs-linux-mainWindow.html#sectionTabs

Comment 1

[bogas04]

Is restyling menu button into a wrench button in nav bar, covered in this bug?

Comment 2

[Stephen Horlander [:shorlander]]

(In reply to bogas04 from comment #1)
> Is restyling menu button into a wrench button in nav bar, covered in this
> bug?

No all the menu work will be in a different set of bugs.

Comment 3

[u428464]

Could be nice for the on hover tab : http://littlebigdetails.com/post/1448633666/chrome-browser-tabs-gradient-follows-cursor

Comment 4

[Valerio]

maybe this can help: http://userstyles.org/styles/61129/australis-styles?r=1330946309

Comment 5

[u428464]

Is this bug also covering the new minimize-maximize-close buttons in the tab strip ?

Comment 6

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

(In reply to Guillaume C. [:GE3K0S] from comment #5)
> Is this bug also covering the new minimize-maximize-close buttons in the tab
> strip ?

I'm not sure, but I think we should move that to a different bug since it is dependent on drawing the full window frame in XUL (bug 590945).

Comment 7

[jonrandy]

Is this all going to play nice with custom OS themes on XP etc?

Comment 8

[jonrandy]

(In reply to jonrandy from comment #7)
> Is this all going to play nice with custom OS themes on XP etc?

I only ask because none of the default XP colours are close to my theme which is kinda black. I guess if all the window chrome is now implemented in XUL then this isn't really an issue as a dark theme/persona would probably work to get closer to any custom theme on XP (or even win7)

Comment 9

[Frank Yan (:fryn)]

Attachment: WIP patch - <30% done; lots of stuff broken

Dão and Jared, see the bits in pinstripe's browser.css and the SVG clip-path in browser.xul for the work done so far.

Comment 10

[Richard Marti (:Paenglab)]

A problem I'm seeing, also on Thunderbird, is the tab overflow begins earlier with the negative margins than with 0px margin.

Here a snippet to test it in userChrome.css with a normal Firefox (isn't perfect and doesn't look good but shows the effect):

.tabs-newtab-button,
.tabbrowser-tab:not([pinned]) {
  margin: -14px !important;
  padding: 14px !important;
}

.tabbrowser-tab:not([pinned]):first-child {
  -moz-margin-start: 0 !important;
}

.tabbrowser-tab[selected] {
  position: relative;
  z-index: 100;
}

With this on my FX the overflow starts after 5 new tabs and without after 8 new tabs.

Should I already file a bug for this?

Comment 11

[Frank Yan (:fryn)]

(In reply to Richard Marti [:paenglab] from comment #10)

That's why we don't have negative margins on the tabs themselves. You're causing the bug by adding your own custom CSS. Don't file a bug on code not in the browser.
If you're seeing problems with my patch, it's because my patch is <30% done. Don't file bugs on code we haven't landed.

Comment 12

[Richard Marti (:Paenglab)]

Attachment: Screenshot of gap

When resizing the window and the tabs begins to shrink I'm seeing a gap between tabBackgroundMiddle.png and tabBackgroundEnd.png every time when the tab width is odd. I think this could be a rounding error in alignment of the boxes .tab-background-start, .tab-background-middle and .tab-background-end. The gap is also visible when I, only for testing, apply the background images directly to this three boxes.

The same happens with Thunderbird with a different (but in the future same) tab implementation.

The LW theme is only applied for a better visibility of the gap.

Comment 13

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

(In reply to Richard Marti [:paenglab] from comment #12)
> Created attachment 627139 [details]
> Screenshot of gap
> 
> When resizing the window and the tabs begins to shrink I'm seeing a gap
> between tabBackgroundMiddle.png and tabBackgroundEnd.png every time when the
> tab width is odd. I think this could be a rounding error in alignment of the
> boxes .tab-background-start, .tab-background-middle and .tab-background-end.
> The gap is also visible when I, only for testing, apply the background
> images directly to this three boxes.

Are you using the "Australis theme" from addons.mozilla.org? That is not the official implementation of the Australis tabs. The official Australis tabs are still a work-in-progress. Please see bug 738491 for more information on the Australis tabs and when they will be available in Nightly.

Comment 14

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

(In reply to Jared Wein [:jaws] from comment #13)
> Please see bug 738491 for more information on
> the Australis tabs and when they will be available in Nightly.

Sorry, I didn't realize that this bug was the meta bug. Sigh, I should go to sleep :)

Comment 15

[Richard Marti (:Paenglab)]

(In reply to Jared Wein [:jaws] from comment #13)
> 
> Are you using the "Australis theme" from addons.mozilla.org? That is not the
> official implementation of the Australis tabs.

No, this is with the 30% patch applied.

Comment 16

[Frank Yan (:fryn)]

Comment on attachment 627139 [details]
Screenshot of gap

Thanks for trying it out, but we don't need feedback on the 30% patch, which is why I didn't push it to the UX branch. Things are known to be highly broken.

(In reply to Richard Marti [:paenglab] from comment #12)
> The same happens with Thunderbird with a different (but in the future same)
> tab implementation.

Please file a bug for Thunderbird then. We don't expect the implementations to converge much. The Thunderbird folks wrote a simpler implementation that doesn't really handle edge cases and provides the wrong clickable areas for the tabs, but it works well enough for the case of 1-3 tabs, which is what people almost always have in Thunderbird anyways.

Comment 17

[Frank Yan (:fryn)]

(In reply to Frank Yan (:fryn) from comment #16)

I just learned that you wrote the Thunderbird implementation of Australis tabs, but most of my comment still stands. I was encouraged to upload a patch despite its brokenness, just so people know that work is happening and so we could pull in any usable pieces for the theme bits on Windows.

Thunderbird doesn't really need to handle things like tab overflow, and the tabs stay large enough that having a rectangular clickable area that doesn't match the shape of the tab isn't really noticeable for tabs of that size. Making that work correctly requires a lot of additional complexity. If you wish to handle these sort of things, that's fine too. :)

Comment 18

[bogas04]

Doesn't that imply that since firefox has a requirement of handling tab overflow and more tabs , the design of curve tabs might not benefit over rectangular ones for Firefox ?

Comment 19

[u428464]

According to the mockups maximum tab size must be reduced and that hasn't been done for Thunderbird.

Comment 20

[Frank Yan (:fryn)]

(In reply to bogas04 from comment #18)
> Doesn't that imply that since firefox has a requirement of handling tab
> overflow and more tabs , the design of curve tabs might not benefit over
> rectangular ones for Firefox ?

You misunderstood.

(In reply to Guillaume C. [:ge3k0s] from comment #19)
> According to the mockups maximum tab size must be reduced and that hasn't
> been done for Thunderbird.

That's not part of any final proposal. Mockups are not sacred.
This bug isn't for Thunderbird.

Comment 21

[Richard Marti (:Paenglab)]

(In reply to Frank Yan (:fryn) from comment #17)
> (In reply to Frank Yan (:fryn) from comment #16)
> 
> I just learned that you wrote the Thunderbird implementation of Australis
> tabs, but most of my comment still stands. I was encouraged to upload a
> patch despite its brokenness, just so people know that work is happening and
> so we could pull in any usable pieces for the theme bits on Windows.

I made my comment to inform you that both tab implementations of FX and TB have problems with the aligning of the images which end in this gaps. The problem is, I don't know where the problem lays (XUL/CSS/JS) and until now nobody could help. I did it also in the hope, when it comes from FX it could be better solved.

> Thunderbird doesn't really need to handle things like tab overflow, and the
> tabs stay large enough that having a rectangular clickable area that doesn't
> match the shape of the tab isn't really noticeable for tabs of that size.
> Making that work correctly requires a lot of additional complexity. If you
> wish to handle these sort of things, that's fine too. :)

In the latest patch for TB on OSX the clickable area is solved. :)

(In reply to Guillaume C. [:ge3k0s] from comment #19)
> According to the mockups maximum tab size must be reduced and that hasn't
> been done for Thunderbird.

Please don't comment for TB bugs here. I'm aware of the tab width issue but until not all systems have the new tabs, I don't want to change a global setting.

Comment 22

[u428464]

(In reply to Richard Marti [:paenglab] from comment #21)
> (In reply to Guillaume C. [:ge3k0s] from comment #19)
> > According to the mockups maximum tab size must be reduced and that hasn't
> > been done for Thunderbird.
> 
> Please don't comment for TB bugs here. I'm aware of the tab width issue but
> until not all systems have the new tabs, I don't want to change a global
> setting.

In fact I was commenting about both Firefox and Thunderbird tabs, but I got an answer about tab width from Frank Yan in comment 20.

Comment 23

[Frank Yan (:fryn)]

To avoid confusion with its dependent platform-specific bugs, I'm renaming this bug.

Comment 24

[Terrell Kelley]

You are leaving out use cases in this meta bug, Not only do the other alternate themes in Windows XP need to be dealt with (especially the black and power blue ones developed by Microsoft), but we also need Aero Basic and Windows Classic themes. While the former is implemented with XP style themes in Windows 7 and Vista, it uses a different, lighter coloration. The latter means we have to deal with arbitrary color settings, but we already do that now for the tabs-on-top App Button version, so it shouldn't be that hard.

Now, all of these will look pretty much the same as the other mockups, just in different colors, but that didn't stop you from creating separate mockups for the default three Windows XP themes.

Speaking of which, I notice that the mockups do not quite correspond with the actual colors of the themes in question. Is this intentional? It seems to me that, if we're going to go to the trouble of color matching for different themes, we should go all the way.

Comment 25

[henryfhchan]

The big red stop button was exchanged for the current small one because it snatched focused.  I would hope the attention of the refresh/pause/stop button stay low.  showing a contrasted background on hover is not in line with other parts of the theme either...

Comment 26

[alex_mayorga]

(In reply to henry.fai.hang.chan from comment #25)
> The big red stop button was exchanged for the current small one because it
> snatched focused.  I would hope the attention of the refresh/pause/stop
> button stay low.  showing a contrasted background on hover is not in line
> with other parts of the theme either...

I agree, I'd say stick to the low key Go/Stop/Reload Button design that's currently in Nightly instead of the one shown at http://people.mozilla.com/~shorlander/files/australis-designSpecs/images-win7/style-goStopReload-pressed.png
It's too flashy IMHO.

Mr. Horlander,

Would you please consider fixing bug 594050 as part of this redesign?
Is the "down arrow" scheduled for complete removal? If so, I for one would miss it a lot.

Comment 27

[Dennis Jakobsen]

I have seen the butt ugly space wasting curvy tabs on the latest thunderbird and with that derogatory intro, do i need to say i disapprove of this look?

I'm assuming my $.02 are irrelevant, so i'm pleading you to make it a preference to turn it off! Please?!

But I like the colorful icons from the link in comment #26

Comment 28

[Terrell Kelley]

Rudeness aside, the above user has a point: the last major UI change was optional. (The one before that was optional, too, although it took a little more work to figure out.) This one should be, too. Forcing changes on users is not what Firefox is about.

I hadn't said anything before, as I just assumed it would be optional, as that's just what Firefox does. It is the user's browser--it actually listens to its users. Don't pull a Microsoft Office here: if the new look is actually superior, people will use it.

Comment 29

[Paul [pwd]]

All changes in Firefox are optional. You will be able to install a skin that will provide you legacy tabs.

Comment 30

[Terrell Kelley]

That's not what I mean by optional. I mean optional in the same way that I can still to this day disable the Firefox button to get back to the basic UI of Firefox 3.x. No extra download required. 

If it has to be done with a skin, please be sure to ship that skin with Firefox. If you don't, you will receive a very strong outcry. People in general don't like having change foisted on them. If it's not better, yet people feel forced to use it, they will change browsers, even though changing browsers requires even more change.

User psychology is something all software development needs to take into account. I wish it were more common in open source software.

Comment 31

[Greg Karz]

(In reply to Terrell Kelley from comment #30)
> That's not what I mean by optional. I mean optional in the same way that I
> can still to this day disable the Firefox button to get back to the basic UI
> of Firefox 3.x. No extra download required. 
> 
> If it has to be done with a skin, please be sure to ship that skin with
> Firefox. If you don't, you will receive a very strong outcry. People in
> general don't like having change foisted on them. If it's not better, yet
> people feel forced to use it, they will change browsers, even though
> changing browsers requires even more change.
> 
> User psychology is something all software development needs to take into
> account. I wish it were more common in open source software.

I do prefer this change to come to firefox, but I also second this opinion.

Comment 32

[Mozilla Marsu]

(In reply to Terrell Kelley from comment #28)
> Rudeness aside, the above user has a point: the last major UI change was
> optional.This one should be, too. Forcing changes on users
> is not what Firefox is about.

Since this meta-bug seems to be about posting personal 2ct opinions, I'd like to comment that I like the tabs on the latest test build and they work just fine (Win7 Aero)...

... but more to the point, who ever decided that ff is about sticking to legacy designs no matter what? If that was so, we'd be using Seamonkey with Win3.1 widgets. Most successful designs encounter some resistance, but if it's been thought through it'll be successful - look at what Apple does. If there's a legacy skin shipped with ff, no one will switch to IE because of rounded tabs.

Comment 33

[Peter Henkel [:Terepin]]

GUI is NOT a feature. There is nothing to urn off or on. If you don't like the stock look, install custom skin. It's been this way since the beginning and it'll surely not change just because of bunch of moaning kids.
Deal with it.

Comment 34

[Hans Schmucker]

I'm not at all sure if this is the correct place to discuss this, but to be honest I can't find a better one. I've worked on some adjustments to make Firefox not stick out so much on Windows 8 DESKTOP. Right now a lot of the work is focused on Metro, but the Windows 8 desktop will very likely be around for the whole lifecycle of Windows 8. The problem is that Australis so far runs afoul of quite a few basic Windows 8 design principles. Most notably: Tabs & Curves. Windows 8 desktop applications have no curves. Never. So what do we do now? Do we sacrifice any chance of it looking like a native application or do we abandon the principles laid out for Australis. And it's not just that. There's the app button, which has become part of the tab/menu bar on Windows 8 and the extra-buttons that are now part of the title bar. I know this isn't an easy topic and very likely won't be solved for a while.

My current sketch (and a userChrome to make some of it work) can be found on Bug #808403 . I really just want to raise some awareness for this issue.

Attachment #678850 [details] ( http://goo.gl/dlRv5 ) shows a screenshot of my work so far, but I really need some feedback on how things should go from here before I invest more time and work.

Comment 35

[Erdin Kacan]

(In reply to Hans Schmucker from comment #34)
> I'm not at all sure if this is the correct place to discuss this, but to be
> honest I can't find a better one. I've worked on some adjustments to make
> Firefox not stick out so much on Windows 8 DESKTOP. Right now a lot of the
> work is focused on Metro, but the Windows 8 desktop will very likely be
> around for the whole lifecycle of Windows 8. The problem is that Australis
> so far runs afoul of quite a few basic Windows 8 design principles. Most
> notably: Tabs & Curves. Windows 8 desktop applications have no curves.
> Never. So what do we do now? Do we sacrifice any chance of it looking like a
> native application or do we abandon the principles laid out for Australis.
> And it's not just that. There's the app button, which has become part of the
> tab/menu bar on Windows 8 and the extra-buttons that are now part of the
> title bar. I know this isn't an easy topic and very likely won't be solved
> for a while.
> 
> My current sketch (and a userChrome to make some of it work) can be found on
> Bug #808403 . I really just want to raise some awareness for this issue.
> 
> Attachment #678850 [details] ( http://goo.gl/dlRv5 ) shows a screenshot of
> my work so far, but I really need some feedback on how things should go from
> here before I invest more time and work.

I agree with you.I think that making an exception for Windows 8 could be a good idea.Since the Windows explorer in Windows 8 is still has a main role on OS and current styling is quite the contrary of the Windows 8 design principles.

Comment 36

[cris]

it looks awful on windows 8 tablet right now. The tab background color is all wrong, the curve sides of the tab are glitched. Guess there is a long way to go.

Comment 37

[Dennis Jakobsen]

If you make an exception on windows 8 because of the respective os design principles you got nothing left? .. cause no os has these space wasting australis tabs and if it does, i'm sure it looks just as horrible! Just give it up already! It looks like ****, it wastes space and noone wants it!

Comment 38

[Zibi Braniecki [:zbraniecki][:gandalf]]

can you stop imposing your personal opinions on others? 
Also, this is not a place to share your aesthetic opinions. Please, go somewhere else.

Comment 39

[Dennis Jakobsen]

Sorry for the harsh words, but i still believe i have a point. I care for Firefox and Thunderbird and i will express my opinion because it matters to me. I will not go away so you can ruin my experience in silence.

Comment 40

[Zibi Braniecki [:zbraniecki][:gandalf]]

Please, familiarize yourself with Bugzilla etiquette - https://bugzilla.mozilla.org/page.cgi?id=etiquette.html . This is not a place to express your opinion or discuss project direction. There are mozilla.dev.* newsgroups for that.

Comment 41

[Notlost]

The reference links are broken. 500 internal error.

Comment 42

[Notlost]

Musta been maintenance or something, bc they just came back up.

Comment 44

[rexyrexy2]

they changed it from a gear to a mimick of chrome... :(

Comment 45

[rexyrexy2]

they changed it from a gear to a mimick of chrome... :(

Comment 46

[rexyrexy2]

sorry for double post of mimic statement

Comment 47

[jklferrer]

could the tint of the UI be customizable? I don't think the blue used in win7 aero looks good in Win8 desktop.

Comment 48

[Stephen Horlander [:shorlander]]

(In reply to jklferrer from comment #47)
> could the tint of the UI be customizable? I don't think the blue used in
> win7 aero looks good in Win8 desktop.

Will be fixed by bug 859751

Comment 49

[rexyrexy2]

could there some sort of way to make it the white with black shadow instead of blue background like in some of the concepts. I find that version appeals to me better.

Comment 50

[Leman Bennett [Omega]]

(In reply to rexyrexy2 from comment #49)
> could there some sort of way to make it the white with black shadow instead
> of blue background like in some of the concepts. I find that version appeals
> to me better.

Why not just use a white persona background instead? That's what its there for.

Comment 51

[rexyrexy2]

*facepalm* I meant the buttons and (some) text are white with black shadows on them, and the background being aero, like it was in many concepts (the majority of them) (especially the earlier ones).

Comment 52

[Dominic Spitaler]

Can someone put an end to this?

Comment 53

[Kuba Niewiarowski]

Should be mass wontfixed soon due to Photon?

Comment 54

[Matthew N. [:MattN]]

Australis tabs have been replaced and the primary goal was acheived.