Initial stabs at styling the user context newtab button draft
authorMike Conley <mconley@mozilla.com>
Mon, 25 Apr 2016 10:54:02 -0400
changeset 356204 b482948558d951e5ee7f816c62015197b8623267
parent 356100 b62c2c621f4a836810168c9f28c8e683df7af941
child 519369 6517a87f6c448a65ba4793bbe484e2f55c84562b
push id16478
push usermconley@mozilla.com
push dateTue, 26 Apr 2016 01:25:30 +0000
milestone48.0a1
Initial stabs at styling the user context newtab button MozReview-Commit-ID: 7e3QMNJJ1ia
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2572,19 +2572,32 @@ toolbarbutton.chevron > .toolbarbutton-m
   color: inherit;
 }
 
 .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
+.tabs-newtab-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .tabs-newtab-button > .toolbarbutton-icon {
   -moz-box-align: center;
   border: solid transparent;
+  padding: 6px 0 4px;
+}
+
+.tabs-newtab-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+  border-width: 0 15px 0 8px;
+}
+
+.tabs-newtab-button > .toolbarbutton-menubutton-dropmarker {
+  margin-left: -45px;
+}
+
+.tabs-newtab-button > .toolbarbutton-icon {
   border-width: 0 11px;
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label:not([pinned]),
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-icon-image[pinned],
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: @focusRingShadow@;
 }
@@ -2610,20 +2623,16 @@ toolbarbutton.chevron > .toolbarbutton-m
     padding-top: var(--space-above-tabbar);
   }
 }
 
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }
 
-.tabs-newtab-button > .toolbarbutton-icon {
-  padding: 6px 0 4px;
-}
-
 /* Background tabs:
  *
  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
  */
 #main-window[tabsintitlebar]:not([inFullscreen]) .tab-background-middle:not([visuallyselected=true]) {
   clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);
@@ -2868,20 +2877,22 @@ toolbarbutton.chevron > .toolbarbutton-m
     -moz-image-region: rect(0, 72px, 40px, 36px);
   }
 
   .tabs-newtab-button:hover:active,
   #TabsToolbar > #new-tab-button:hover:active {
     -moz-image-region: rect(0, 108px, 40px, 72px);
   }
 
+  .tabs-newtab-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
   .tabs-newtab-button > .toolbarbutton-icon {
     width: 40px;
   }
 
+  #TabsToolbar > #new-tab-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
   #TabsToolbar > #new-tab-button > .toolbarbutton-icon,
   #TabsToolbar > toolbarpaletteitem > #new-tab-button > .toolbarbutton-icon {
     width: 18px;
   }
 }
 
 #alltabs-button {
   list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -488,8 +488,16 @@
   display: -moz-box;
 }
 
 /* New tab button */
 
 .tabs-newtab-button {
   width: calc(36px + @tabCurveWidth@);
 }
+
+.tabs-newtab-button[type="menu-button"] {
+  width: calc(36px + 10px + @tabCurveWidth@);
+}
+
+.tabs-newtab-button > .toolbarbutton-menubutton-button {
+  padding: 0;
+}