Initial stabs at styling the user context newtab button
MozReview-Commit-ID: 7e3QMNJJ1ia
--- 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;
+}