Bug 1369415 - Consolidate bookmark toolbar styling across platforms to the new Photon design. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 27 Jul 2017 15:11:40 +0200
changeset 618441 70c0f04b725afd4fcd0d0f88febead8a10f2bb3f
parent 618383 26516ba270816a6cc90f5c42a9b66701369a551f
child 640066 15c3a13759289fc219c03936a1a006876c475822
push id71329
push userbmo:jhofmann@mozilla.com
push dateMon, 31 Jul 2017 13:26:12 +0000
reviewersdao
bugs1369415
milestone56.0a1
Bug 1369415 - Consolidate bookmark toolbar styling across platforms to the new Photon design. r=dao MozReview-Commit-ID: IEha4s8h9ix
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/browser.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -79,53 +79,32 @@
 }
 
 #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
   -moz-appearance: none;
   border-style: none;
   background-color: -moz-Dialog;
 }
 
-#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 hsla(0,0%,0%,.3) !important;
   background-clip: padding-box;
   /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
   margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 #nav-bar {
   box-shadow: 0 1px 0 @navbarInsetHighlight@ inset;
   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
@@ -190,28 +190,16 @@ toolbar:-moz-lwtheme {
   }
 
   #navigator-toolbox > toolbar:-moz-window-inactive:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
     background-color: hsl(0,0%,95%);
   }
 }
 %endif
 
-#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;
-}
-
 %ifndef MOZ_PHOTON_THEME
 #nav-bar {
   -moz-appearance: none;
   background: url(chrome://browser/skin/Toolbar-background-noise.png),
               linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%));
   background-clip: border-box;
   background-origin: border-box !important;
 
@@ -268,43 +256,30 @@ toolbar:-moz-lwtheme {
     z-index: 1;
   }
 
   #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-window-inactive:not(:-moz-lwtheme) {
     border-top-color: hsla(0,0%,0%,.05);
   }
 }
 
-#PersonalToolbar {
-  padding: 0 4px 4px;
-}
-
-#PersonalToolbar:not([collapsed=true]) {
-  /* 4px padding ^  plus 19px personal-bookmarks (see below) */
-  min-height: 23px;
-}
-
 %ifndef MOZ_PHOTON_THEME
 #navigator-toolbox > toolbar:not(#TabsToolbar):-moz-lwtheme {
   background-color: @toolbarColorLWT@;
   background-image: url(chrome://browser/skin/Toolbar-background-noise.png);
 }
 %endif
 
 #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
@@ -32,16 +32,30 @@
   --toolbar-foreground-color: #0c0c0d;
 }
 %ifdef XP_WIN
 }
 %endif
 %endif
 %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 6px 2px;
+}
+
+#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 {
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -457,28 +457,28 @@ toolbarbutton.bookmark-item[open="true"]
 #BMB_bookmarksPopup[side="right"] {
   margin-top: -20px;
   margin-bottom: -20px;
 }
 
 /* ::::: bookmark buttons ::::: */
 
 toolbarbutton.bookmark-item:not(.subviewbutton) {
-  margin: 0;
-  padding: 2px 3px;
+  margin: 0 2px;
+  padding: 0 4px;
   -moz-appearance: none;
 }
 
 .bookmark-item > .toolbarbutton-icon,
 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 /* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text,
 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
   display: -moz-box !important;
 }
 
 #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
-  margin-inline-end: 5px;
+  margin-inline-end: 4px;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -151,29 +151,16 @@ toolbar[brighttext] {
     background-image: none;
   }
 }
 %endif
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
   background-color: -moz-Dialog;
 }
 
-#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
@@ -311,20 +298,16 @@ toolbar[brighttext] {
   box-shadow: 0 1px 0 @toolbarHighlight@ inset;
 }
 @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;
 }