826689 - Implement new tab dimensions

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement)

Description

[u428464]

Once the new shape has been implemented on every platform, tab size should be reduced to 180 px width and 28 px height.

Comment 1

[Justin Dolske [:Dolske]]

I don't think bugs like this are useful unless you're the person actively working on the feature (or are actively coordinating with them).

Australis is still under heavy initial development -- bugs on specific things we just haven't gotten to are generally more of a paperwork hassle than a benefit.

MattN / mconley -- please close this unless you find it find it helpful.

Comment 2

[Matthew N. [:MattN]]

This is fine to track the change of the tab width.

Comment 3

[Matthew N. [:MattN]]

The positioning[1] of the favicon+throbber and close button can also be handled here and the change can go in tabs.inc.css since it's consistent across platforms in the specs.

[1] https://people.mozilla.com/~shorlander/files/australis-designSpecs/images-linux/dimensions-tab.png

Comment 4

[Matthew N. [:MattN]]

Attachment: v.1 Australis tab dimensions

Since this patch is changing the max-width of tabs, it seems like the transition time should also change to reflect that.  In this patch I change the transition time by the same proportion that the max-width changed relative to former difference between max-width and min-width.

Width:
(250px - 178px new spread) / (250px - 100px old spread) =  48% of the spread between max and min

Transition time:
(250ms - A ms) / (250ms - 200ms) = 48% of the spread between max and min
which gives A = 226 ms.  

Does this method make sense? Any better suggestions? Should the other transitions/delays also be scaled?

The Linux font family and size didn't match the spec on my Fedora 17 machine (Cantarell 14.6667px) but I didn't have Ubuntu to check its default. The proposed 12px font-size wasn't a nice multiple of my default font-size either so I wasn't sure how to proceed.  Dão/Mike, do you know what the computed font-size is by default on the browser window in the Linux distros you use? I suspect we may want to move the font-size change to a new bug and focus just on the positioning of the elements in this bug.

Note that some of the margins/padding differ in the CSS by one pixel from the measurements in the spec because it uses a different reference point for the middles of the curve (we use 15px [half the curve width] from the outside whereas the spec seems to use 14px).

I confirmed using image tools that the icon, label, and close button positions match the spec images except for the Linux close button which needs to be swapped with a different size image in bug 851001. I aligned the centre of the close buttons for now.

Stephen, do you have any opinion on the transitions and Linux font family/size?

Comment 5

[Matthew N. [:MattN]]

Attachment: Screenshot on OS X

Comment 6

[Dão Gottwald [:dao]]

(In reply to Matthew N. [:MattN] from comment #4)
> The Linux font family and size didn't match the spec on my Fedora 17 machine
> (Cantarell 14.6667px) but I didn't have Ubuntu to check its default. The
> proposed 12px font-size wasn't a nice multiple of my default font-size
> either so I wasn't sure how to proceed.  Dão/Mike, do you know what the
> computed font-size is by default on the browser window in the Linux distros
> you use? I suspect we may want to move the font-size change to a new bug and
> focus just on the positioning of the elements in this bug.

It's unclear to me why the font size should change. We currently use whatever the system's default UI font size is.

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 741741 [details] [diff] [review]
v.1 Australis tab dimensions

> .tabbrowser-tab:not([pinned]) {
>   -moz-box-flex: 100;
>-  max-width: 250px;
>+  max-width: 178px;

Since I suspect this specific value wasn't determined scientifically and doesn't follow some magic aesthetic rule, can we just use 180?

>   min-width: 100px;
>   width: 0;
>   transition: min-width 200ms ease-out,
>-              max-width 250ms ease-out,
>+              max-width 226ms ease-out,

And 130 here?

> .tabbrowser-tab:not([pinned]):not([fadein]) {
>   max-width: 0.1px;
>   min-width: 0.1px;
>   opacity: 0 !important;
>   transition: min-width 200ms ease-out,
>-              max-width 250ms ease-out,
>+              max-width 226ms ease-out,
>               opacity 50ms ease-out 180ms /* hide the tab for the last 20ms of the max-width transition */;

The opacity transition delay needs adjustment.

>--- a/browser/themes/osx/browser.css
>+++ b/browser/themes/osx/browser.css

> .tab-label {
>   margin: 0;
> }

>+.tab-label {
>+  margin-top: 3px;
>+}

Merge these rules. Note that you also set -moz-margin-end/start in the shared file. It might be more straightforward to have all .tab-label margins in the theme-specific files if they aren't consistent.

> .tabbrowser-tab:not([pinned]):not([fadein]) {
>   transition: min-width 200ms ease-out /* copied from browser/base/content/browser.css */,
>               max-width 250ms ease-out /* copied from browser/base/content/browser.css */,

You missed this (which means that you didn't see the full effect of the transition length change on OS X).

>--- a/browser/themes/shared/tabs.inc.css
>+++ b/browser/themes/shared/tabs.inc.css

>+.tab-close-button {
>+  margin-top: 1px;

>+.tab-close-button {
>+  -moz-margin-start: 4px;
>+  -moz-margin-end: -2px;
>+  padding: 0;
> }

Might be better not to share this stuff as long as it's not the same across platforms.

Comment 8

[Dão Gottwald [:dao]]

> >   min-width: 100px;
> >   width: 0;
> >   transition: min-width 200ms ease-out,
> >-              max-width 250ms ease-out,
> >+              max-width 226ms ease-out,
> 
> And 130 here?

I obviously meant 230

Comment 9

[Mike Conley (:mconley) (:⚙️)]

(In reply to Dão Gottwald [:dao] from comment #7)
> Comment on attachment 741741 [details] [diff] [review]
> v.1 Australis tab dimensions
> 
> > .tabbrowser-tab:not([pinned]) {
> >   -moz-box-flex: 100;
> >-  max-width: 250px;
> >+  max-width: 178px;
> 
> Since I suspect this specific value wasn't determined scientifically and
> doesn't follow some magic aesthetic rule, can we just use 180?
> 

I don't exactly see how 180 improves things, except for making the number rounder. If I'm not mistaken (and MattN can correct me if I'm wrong), the number was derived from shorlander's spec. Adjusting these numbers takes us off of spec.

Is that not correct, MattN?

> >   min-width: 100px;
> >   width: 0;
> >   transition: min-width 200ms ease-out,
> >-              max-width 250ms ease-out,
> >+              max-width 226ms ease-out,
> 
> And 130 here?
> 
> > .tabbrowser-tab:not([pinned]):not([fadein]) {
> >   max-width: 0.1px;
> >   min-width: 0.1px;
> >   opacity: 0 !important;
> >   transition: min-width 200ms ease-out,
> >-              max-width 250ms ease-out,
> >+              max-width 226ms ease-out,
> >               opacity 50ms ease-out 180ms /* hide the tab for the last 20ms of the max-width transition */;
> 
> The opacity transition delay needs adjustment.
> 
> >--- a/browser/themes/osx/browser.css
> >+++ b/browser/themes/osx/browser.css
> 
> > .tab-label {
> >   margin: 0;
> > }
> 
> >+.tab-label {
> >+  margin-top: 3px;
> >+}
> 
> Merge these rules. Note that you also set -moz-margin-end/start in the
> shared file. It might be more straightforward to have all .tab-label margins
> in the theme-specific files if they aren't consistent.
> 
> > .tabbrowser-tab:not([pinned]):not([fadein]) {
> >   transition: min-width 200ms ease-out /* copied from browser/base/content/browser.css */,
> >               max-width 250ms ease-out /* copied from browser/base/content/browser.css */,
> 
> You missed this (which means that you didn't see the full effect of the
> transition length change on OS X).
> 
> >--- a/browser/themes/shared/tabs.inc.css
> >+++ b/browser/themes/shared/tabs.inc.css
> 
> >+.tab-close-button {
> >+  margin-top: 1px;
> 
> >+.tab-close-button {
> >+  -moz-margin-start: 4px;
> >+  -moz-margin-end: -2px;
> >+  padding: 0;
> > }
> 
> Might be better not to share this stuff as long as it's not the same across
> platforms.

Comment 10

[Mike Conley (:mconley) (:⚙️)]

Argh, submitted before I meant to.

MattN - is what I'm saying above accurate?

Comment 11

[Dão Gottwald [:dao]]

(In reply to Mike Conley (:mconley) from comment #9)
> > >+  max-width: 178px;
> > 
> > Since I suspect this specific value wasn't determined scientifically and
> > doesn't follow some magic aesthetic rule, can we just use 180?
> > 
> 
> I don't exactly see how 180 improves things, except for making the number
> rounder.

That alone makes it better, e.g. easier to remember.

Comment 12

[u428464]

(In reply to Mike Conley (:mconley) from comment #9)
> (In reply to Dão Gottwald [:dao] from comment #7)
> > Comment on attachment 741741 [details] [diff] [review]
> > v.1 Australis tab dimensions
> > 
> > > .tabbrowser-tab:not([pinned]) {
> > >   -moz-box-flex: 100;
> > >-  max-width: 250px;
> > >+  max-width: 178px;
> > 
> > Since I suspect this specific value wasn't determined scientifically and
> > doesn't follow some magic aesthetic rule, can we just use 180?
> > 
> 
> I don't exactly see how 180 improves things, except for making the number
> rounder. If I'm not mistaken (and MattN can correct me if I'm wrong), the
> number was derived from shorlander's spec. Adjusting these numbers takes us
> off of spec.

The spec indicates 180 px without the end of the curves (see http://people.mozilla.com/~shorlander/files/australis-designSpecs/images-win7/dimensions-tab.png ).

Comment 13

[Mike Conley (:mconley) (:⚙️)]

(In reply to Guillaume C. [:ge3k0s] from comment #12)
> (In reply to Mike Conley (:mconley) from comment #9)
> > (In reply to Dão Gottwald [:dao] from comment #7)
> > > Comment on attachment 741741 [details] [diff] [review]
> > > v.1 Australis tab dimensions
> > > 
> > > > .tabbrowser-tab:not([pinned]) {
> > > >   -moz-box-flex: 100;
> > > >-  max-width: 250px;
> > > >+  max-width: 178px;
> > > 
> > > Since I suspect this specific value wasn't determined scientifically and
> > > doesn't follow some magic aesthetic rule, can we just use 180?
> > > 
> > 
> > I don't exactly see how 180 improves things, except for making the number
> > rounder. If I'm not mistaken (and MattN can correct me if I'm wrong), the
> > number was derived from shorlander's spec. Adjusting these numbers takes us
> > off of spec.
> 
> The spec indicates 180 px without the end of the curves (see
> http://people.mozilla.com/~shorlander/files/australis-designSpecs/images-
> win7/dimensions-tab.png ).

Oh. If that's the case, then I stand corrected. Sorry about that Dão, and thanks ge3k0s.

Comment 14

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 741741 [details] [diff] [review]
v.1 Australis tab dimensions

I think Dão's r- stands - clearing review request.

Comment 15

[Matthew N. [:MattN]]

(In reply to Mike Conley (:mconley) from comment #13)
> (In reply to Guillaume C. [:ge3k0s] from comment #12)
> > (In reply to Mike Conley (:mconley) from comment #9)
> > > (In reply to Dão Gottwald [:dao] from comment #7)
> > > > Comment on attachment 741741 [details] [diff] [review]
> > > > v.1 Australis tab dimensions
> > > > 
> > > > > .tabbrowser-tab:not([pinned]) {
> > > > >   -moz-box-flex: 100;
> > > > >-  max-width: 250px;
> > > > >+  max-width: 178px;
> > > > 
> > > > Since I suspect this specific value wasn't determined scientifically and
> > > > doesn't follow some magic aesthetic rule, can we just use 180?
> > > > 
> > > 
> > > I don't exactly see how 180 improves things, except for making the number
> > > rounder. If I'm not mistaken (and MattN can correct me if I'm wrong), the
> > > number was derived from shorlander's spec. Adjusting these numbers takes us
> > > off of spec.
> > 
> > The spec indicates 180 px without the end of the curves (see
> > http://people.mozilla.com/~shorlander/files/australis-designSpecs/images-
> > win7/dimensions-tab.png ).
> 
> Oh. If that's the case, then I stand corrected. Sorry about that Dão, and
> thanks ge3k0s.

Mike was right that I used 178px to exactly match the spec and as I said in comment 4 when I attached the patch, the reference point for the sides differs by one pixel on each side and hence differs by 2px total. I don't feel strongly about 2px but I didn't get a reply from shorlander to know if he is fine with the rounding.

(In reply to Dão Gottwald [:dao] from comment #7)
> The opacity transition delay needs adjustment.
Should I scale using the same method and then round to the nearest 5/10?

Comment 16

[Dão Gottwald [:dao]]

(In reply to Matthew N. [:MattN] from comment #15)
> (In reply to Dão Gottwald [:dao] from comment #7)
> > The opacity transition delay needs adjustment.
> Should I scale using the same method and then round to the nearest 5/10?

No, you need to subtract the same absolute number that you uses to reduce the max-width transition duration.

Comment 17

[Matthew N. [:MattN]]

Attachment: v.2 address Dão's comments

(In reply to Dão Gottwald [:dao] from comment #6)
> It's unclear to me why the font size should change. We currently use
> whatever the system's default UI font size is.

I was just trying to match the spec because I suspect it's showing what the browser would look like with the default OS theme.

(In reply to Dão Gottwald [:dao] from comment #16)
> (In reply to Matthew N. [:MattN] from comment #15)
> > (In reply to Dão Gottwald [:dao] from comment #7)
> > > The opacity transition delay needs adjustment.
> > Should I scale using the same method and then round to the nearest 5/10?
> 
> No, you need to subtract the same absolute number that you uses to reduce
> the max-width transition duration.

Sorry, I realized it was a dumb question once I looked closer.

(In reply to Dão Gottwald [:dao] from comment #7)
> >--- a/browser/themes/osx/browser.css
> >+++ b/browser/themes/osx/browser.css
> 
> > .tab-label {
> >   margin: 0;
> > }
> 
> >+.tab-label {
> >+  margin-top: 3px;
> >+}
> 
> Merge these rules. Note that you also set -moz-margin-end/start in the
> shared file. It might be more straightforward to have all .tab-label margins
> in the theme-specific files if they aren't consistent.

Perhaps. In this case the horizontal styles are shared but the vertical styles differ so there is some distinction between the two. I think it's nicer to have the horizontal styles closer to other styles from the spec. We should definitely consider whether the vertical position can be unified across platforms.

> >--- a/browser/themes/shared/tabs.inc.css
> >+++ b/browser/themes/shared/tabs.inc.css
> 
> >+.tab-close-button {
> >+  margin-top: 1px;
> 
> >+.tab-close-button {
> >+  -moz-margin-start: 4px;
> >+  -moz-margin-end: -2px;
> >+  padding: 0;
> > }
> 
> Might be better not to share this stuff as long as it's not the same across
> platforms.

This will be consistent once Linux stops using the larger gtk icon in bug 851001. At that point these differing styles will get deleted.

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 744054 [details] [diff] [review]
v.2 address Dão's comments

>--- a/browser/themes/osx/browser.css
>+++ b/browser/themes/osx/browser.css

> .tab-label {
>-  margin: 0;
>   text-align: center;
> }

>+.tab-label {
>+  margin-top: 3px;
>+  margin-bottom: 0;
>+}

Merge these two rules into one.

Comment 19

[Matthew N. [:MattN]]

shorlander was fine 182px wide tabs. Thanks for the reviews.

Comment 20

[u428464]

This hasn't been pushed to UX yet ?

Comment 21

[u428464]

(In reply to Guillaume C. [:ge3k0s] from comment #20)
> This hasn't been pushed to UX yet ?

I can answer myself yes.

Comment 22

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

This was pushed a long time ago, but never got the changeset URL as a comment. (Also setting a priority to help clean up our priority tracking, P- since this already landed and I'm not sure what we would prioritize this otherwise.)

http://hg.mozilla.org/projects/ux/rev/67639b842cb4

Comment 23

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/67639b842cb4