Bug 1369415 - Share bookmarks toolbar styling to remove cross-platform inconsistencies, adjust bottom padding on Mac to compensate border. r?johannh
MozReview-Commit-ID: CTMPI5Yp0nJ
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -70,50 +70,29 @@
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
-moz-appearance: none;
border-style: none;
}
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
- overflow: -moz-hidden-unscrollable;
- max-height: 4em;
- transition: min-height 170ms ease-out, max-height 170ms ease-out;
- padding: 1px 4px;
-}
-
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
- min-height: 0.1px;
- max-height: 0;
- transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
-}
-
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
border-top: 1px solid var(--tabs-border) !important;
background-clip: padding-box;
/* Position the toolbar above the bottom of background tabs */
position: relative;
z-index: 1;
}
#nav-bar {
padding-top: 2px;
padding-bottom: 2px;
}
-/* This only has an effect when this element is placed on the bookmarks toolbar.
- * It's 30px to make sure buttons with 18px icons fit along with the default 16px
- * icons, without changing the size of the toolbar.
- */
-#personal-bookmarks {
- min-height: 30px;
-}
-
#browser-bottombox {
/* opaque for layers optimization */
background-color: -moz-Dialog;
}
#bookmarks-toolbar-placeholder {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
}
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -137,25 +137,18 @@
}
#navigator-toolbox > toolbar:not(#TabsToolbar) {
-moz-appearance: none;
background: var(--toolbar-bgcolor);
}
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
- overflow: -moz-hidden-unscrollable;
- max-height: 4em;
- transition: min-height 170ms ease-out, max-height 170ms ease-out;
-}
-
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
- min-height: 0.1px;
- max-height: 0;
- transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+ /* add extra padding to compensate the bottom border */
+ padding-bottom: 2px;
}
/* Draw the bottom border of the tabs toolbar when it's not using
-moz-appearance: toolbar. */
#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
#main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
#TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
border-top: 1px solid var(--tabs-border);
@@ -185,36 +178,23 @@
}
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
/* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
The animations use position:absolute and require a positioned #nav-bar. */
position: relative;
}
-#PersonalToolbar {
- padding: 0 4px 4px;
-}
-
-#PersonalToolbar:not([collapsed=true]) {
- /* 4px padding ^ plus 19px personal-bookmarks (see below) */
- min-height: 23px;
-}
-
#PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
#nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
background-color: -moz-mac-chrome-inactive;
}
/* ----- BOOKMARK TOOLBAR ----- */
-#personal-bookmarks {
- min-height: 19px; /* 16px button height + 2px padding + 1px margin-bottom */
-}
-
#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
min-height: 32px;
-moz-box-align: center;
}
toolbarbutton.chevron {
list-style-image: url("chrome://global/skin/icons/chevron.png");
margin: 1px 0 0;
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -11,16 +11,31 @@
%else
:root[tabsintitlebar][sizemode=normal] #TabsToolbar
%endif
{
padding-inline-start: 40px;
}
%endif
+/* Bookmark toolbar */
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
+ overflow: -moz-hidden-unscrollable;
+ max-height: 4em;
+ transition: min-height 170ms ease-out, max-height 170ms ease-out;
+ padding: 0 4px 1px;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
+ min-height: 0.1px;
+ max-height: 0;
+ transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+}
+
/* Go button */
.urlbar-go-button {
padding: 0 3px;
list-style-image: url("chrome://browser/skin/reload-stop-go.png");
}
.urlbar-go-button {
-moz-image-region: rect(0, 42px, 14px, 28px);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -107,29 +107,16 @@
}
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-clip: padding-box;
}
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
- overflow: -moz-hidden-unscrollable;
- max-height: 4em;
- transition: min-height 170ms ease-out, max-height 170ms ease-out;
- padding: 0 5px;
-}
-
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
- min-height: 0.1px;
- max-height: 0;
- transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
-}
-
#toolbar-menubar,
#TabsToolbar {
color: var(--titlebar-text-color);
}
@media (-moz-windows-compositor: 0),
(-moz-windows-default-theme: 0) {
/* Please keep the menu text colors in this media block in sync with
@@ -239,20 +226,16 @@
border-top: 1px solid var(--tabs-border) !important;
}
@media (-moz-windows-compositor: 0) {
#TabsToolbar[collapsed="true"] + #nav-bar {
border-top-style: none !important;
}
}
-#personal-bookmarks {
- min-height: 24px;
-}
-
#print-preview-toolbar:not(:-moz-lwtheme) {
-moz-appearance: toolbox;
}
#browser-bottombox:not(:-moz-lwtheme) {
background-color: -moz-dialog;
}