Bug 1388676 - 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 643174 e311022b53662c5cef4b4d2df74e92c43cddf025
parent 643173 4c5fbf49376351679dcc49f4cff26c3c2e055ccc
child 725215 9e4dbec7ae5e47cd8b61c89dd5789de81a98ef74
push id73001
push userbmo:jhofmann@mozilla.com
push dateWed, 09 Aug 2017 09:47:41 +0000
reviewersdao
bugs1388676
milestone57.0a1
Bug 1388676 - Consolidate bookmark toolbar styling across platforms to the new Photon design. r=dao MozReview-Commit-ID: HRSVdUU4PbG
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
@@ -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
@@ -136,28 +136,16 @@
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 #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;
-}
-
 /* 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);
   background-clip: padding-box;
   /* Position the toolbar above the bottom of background tabs */
@@ -185,36 +173,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 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 {
   -moz-image-region: rect(0, 42px, 14px, 28px);
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -259,28 +259,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
@@ -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;
 }