Implement new tab dimensions

RESOLVED FIXED in Firefox 28

Status

()

enhancement
RESOLVED FIXED
7 years ago
6 years ago

People

(Reporter: ge3k0s, Assigned: MattN)

Tracking

Trunk
Firefox 28
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Australis:P-][Australis:M3], )

Attachments

(2 attachments, 1 obsolete attachment)

Reporter

Description

7 years ago
Once the new shape has been implemented on every platform, tab size should be reduced to 180 px width and 28 px height.
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.
This is fine to track the change of the tab width.
Assignee: nobody → mnoorenberghe+bmo
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
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
Whiteboard: [Australis:M3]
Posted patch v.1 Australis tab dimensions (obsolete) — Splinter Review
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?
Attachment #741741 - Flags: ui-review?(shorlander)
Attachment #741741 - Flags: review?(mconley)
Attachment #741741 - Flags: review?(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 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.
Attachment #741741 - Flags: review?(dao) → review-
> >   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
(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.
Argh, submitted before I meant to.

MattN - is what I'm saying above accurate?
Flags: needinfo?(mnoorenberghe+bmo)
(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.
Reporter

Comment 12

6 years ago
(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 ).
(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 on attachment 741741 [details] [diff] [review]
v.1 Australis tab dimensions

I think Dão's r- stands - clearing review request.
Attachment #741741 - Flags: review?(mconley)
(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?
Flags: needinfo?(mnoorenberghe+bmo) → needinfo?(shorlander)
(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.
(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.
Attachment #741741 - Attachment is obsolete: true
Attachment #744054 - Flags: review?(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.
Attachment #744054 - Flags: review?(dao) → review+
shorlander was fine 182px wide tabs. Thanks for the reviews.
Flags: needinfo?(shorlander)
Whiteboard: [Australis:M3] → [Australis:M3][fixed-in-ux]
Reporter

Comment 20

6 years ago
This hasn't been pushed to UX yet ?
Reporter

Comment 21

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

I can answer myself yes.
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
Whiteboard: [Australis:M3][fixed-in-ux] → [Australis:P-][Australis:M3][fixed-in-ux]

Comment 23

6 years ago
https://hg.mozilla.org/mozilla-central/rev/67639b842cb4
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Whiteboard: [Australis:P-][Australis:M3][fixed-in-ux] → [Australis:P-][Australis:M3]
Target Milestone: --- → Firefox 28
Depends on: 941430
You need to log in before you can comment on or make changes to this bug.