Bug 826689 - Implement Australis tab dimensions. r=dao, ui-r=shorlander
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 02 May 2013 12:05:50 -0400
changeset 155214 67639b842cb4f7ad799706b48c983d0c95ff2d71
parent 155213 1cbed63f3eea4232731c3a46eca03f52db29af2b
child 155215 05203bc5dfc484de203a47553c9e5236998d3ddf
push id25666
push userjwein@mozilla.com
push dateMon, 18 Nov 2013 15:56:58 +0000
treeherdermozilla-central@f2adb62d07eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, shorlander
bugs826689
milestone23.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 826689 - Implement Australis tab dimensions. r=dao, ui-r=shorlander
browser/base/content/browser.css
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -34,31 +34,31 @@ tabbrowser {
 }
 
 .tabbrowser-tab {
   -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
 }
 
 .tabbrowser-tab:not([pinned]) {
   -moz-box-flex: 100;
-  max-width: 250px;
+  max-width: 180px;
   min-width: 100px;
   width: 0;
   transition: min-width 200ms ease-out,
-              max-width 250ms ease-out,
+              max-width 230ms ease-out,
               opacity 50ms ease-out 20ms /* hide the tab for the first 20ms of the max-width transition */;
 }
 
 .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,
-              opacity 50ms ease-out 180ms /* hide the tab for the last 20ms of the max-width transition */;
+              max-width 230ms ease-out,
+              opacity 50ms ease-out 160ms /* hide the tab for the last 20ms of the max-width transition */;
 }
 
 .tab-throbber:not([fadein]):not([pinned]),
 .tab-label:not([fadein]):not([pinned]),
 .tab-icon-image:not([fadein]):not([pinned]),
 .tab-close-button:not([fadein]):not([pinned]) {
   display: none;
 }
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1605,36 +1605,16 @@ toolbar[iconsize="small"] #bookmarks-men
 #TabsToolbar[tabsontop=false] {
   background-image: linear-gradient(to top, rgba(0,0,0,.3) 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
   outline: 1px dotted;
 }
 
-.tab-throbber,
-.tab-icon-image {
-  -moz-margin-end: 3px;
-}
-
-.tab-throbber {
-  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
-}
-
-.tab-throbber[progress] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
-}
-
-.tab-throbber[pinned],
-.tab-icon-image[pinned],
-.tabs-newtab-button > .toolbarbutton-icon {
-  -moz-margin-start: 2px;
-  -moz-margin-end: 2px;
-}
-
 #context_reloadTab {
   list-style-image: url("moz-icon://stock/gtk-refresh?size=menu");
 }
 
 #context_closeOtherTabs {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
 }
 
@@ -1659,21 +1639,20 @@ toolbar[iconsize="small"] #bookmarks-men
 /* In-tab close button */
 .tab-close-button > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
   margin: -4px;
 }
 
 .tab-close-button {
-  padding: 0;
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: -1px;
+  margin-top: 0;
   margin-bottom: -1px;
-  -moz-margin-end: -1px;
+  -moz-margin-end: -4px;
 }
 
 /* Tabstrip new tab button */
 .tabs-newtab-button,
 #TabsToolbar > #new-tab-button ,
 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button {
   list-style-image: url("moz-icon://stock/gtk-add?size=menu");
   -moz-image-region: auto;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2177,33 +2177,21 @@ toolbarbutton.chevron > .toolbarbutton-m
 
 .tabbrowser-tabbox {
   margin: 0;
 }
 
 %include ../shared/tabs.inc.css
 
 .tab-label {
-  margin: 0;
+  margin-top: 3px;
+  margin-bottom: 0;
   text-align: center;
 }
 
-.tab-throbber:not([pinned]),
-.tab-icon-image:not([pinned]) {
-  -moz-margin-end: 6px;
-}
-
-.tab-throbber {
-  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
-}
-
-.tab-throbber[progress] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
-}
-
 @media (min-resolution: 2dppx) {
   .tab-icon-image {
     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
     image-rendering: -moz-crisp-edges;
   }
 
   .tab-throbber {
     list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
@@ -2219,18 +2207,18 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 .tab-label:not([selected="true"]) {
   opacity: .7;
 }
 
 .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 */,
-              opacity 50ms ease-out 100ms /* hide the tab for the last 100ms of the max-width transition */;
+              max-width 230ms ease-out /* copied from browser/base/content/browser.css */,
+              opacity 50ms ease-out 80ms /* hide the tab for the last 100ms of the max-width transition */;
 }
 
 .tabbrowser-tab,
 .tabs-newtab-button {
   font: message-box;
   font-weight: bold;
   text-shadow: @loweredShadow@;
   border: none;
@@ -2352,18 +2340,16 @@ toolbarbutton.chevron > .toolbarbutton-m
 .tab-close-button > .toolbarbutton-icon {
   -moz-margin-end: 0px !important;
 }
 
 .tab-close-button {
   list-style-image: url("chrome://global/skin/icons/close.png");
   -moz-appearance: none;
   border: none !important;
-  padding: 0;
-  margin: 0;
   background: none;
   cursor: default;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .tab-close-button:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -42,18 +42,58 @@
   -moz-box-flex: 1;
   background-clip: padding-box;
   border-left: @tabCurveHalfWidth@ solid transparent;
   border-right: @tabCurveHalfWidth@ solid transparent;
   margin: 0 -@tabCurveHalfWidth@;
 }
 
 .tab-content {
-  -moz-padding-end: 10px;
-  -moz-padding-start: 10px;
+  -moz-padding-end: 9px;
+  -moz-padding-start: 9px;
+}
+
+.tab-throbber,
+.tab-icon-image,
+.tab-close-button {
+  margin-top: 1px;
+}
+
+.tab-throbber,
+.tab-icon-image {
+  height: 16px;
+  width: 16px;
+}
+
+.tab-icon-image {
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+}
+
+.tab-throbber {
+  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
+}
+
+.tab-throbber[progress] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
+}
+
+.tab-throbber:not([pinned]),
+.tab-icon-image:not([pinned]) {
+  -moz-margin-end: 6px;
+}
+
+.tab-label {
+  -moz-margin-end: 0;
+  -moz-margin-start: 0;
+}
+
+.tab-close-button {
+  -moz-margin-start: 4px;
+  -moz-margin-end: -2px;
+  padding: 0;
 }
 
 .tab-background,
 .tabs-newtab-button {
   /* overlap the tab curves */
   -moz-margin-end: -@tabCurveHalfWidth@;
   -moz-margin-start: -@tabCurveHalfWidth@;
 }
@@ -199,21 +239,8 @@
 }
 
 /* New tab button */
 
 .tabs-newtab-button {
   clip-path: url(chrome://browser/content/browser.xul#tab-clip-path-outer);
   width: 66px;
 }
-
-
-/* Tab icons */
-
-.tab-throbber,
-.tab-icon-image {
-  width: 16px;
-  height: 16px;
-}
-
-.tab-icon-image {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
-}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1982,47 +1982,32 @@ richlistitem[type~="action"][actiontype=
   color: inherit;
 }
 
 .tabbrowser-tab[selected=true]:-moz-lwtheme {
   /* Copied from :root:-moz-lwtheme-darktext in global.css */
   text-shadow: 0 -0.5px 1.5px white;
 }
 
-.tab-throbber {
-  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
-}
-
-.tab-throbber[progress] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
-}
-
-.tab-throbber:not([pinned]),
-.tab-icon-image:not([pinned]) {
-  -moz-margin-end: 6px;
-}
-
 /* tabbrowser-tab focus ring */
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
   outline: 1px dotted;
 }
 
 /* Tab DnD indicator */
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -11px;
 }
 
 /* Tab close button */
 .tab-close-button {
   -moz-appearance: none;
   -moz-image-region: rect(0, 16px, 16px, 0);
-  -moz-margin-start: 6px;
   border: none;
-  padding: 0px;
   list-style-image: url("chrome://global/skin/icons/close.png");
 }
 
 .tab-close-button:hover,
 .tab-close-button:hover[selected="true"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }