Bug 1398103 - Adjust toolbar and toolbar button spacing to match photon spec. r=daleharvey
☠☠ backed out by c99501471321 ☠ ☠
authorDão Gottwald <dao@mozilla.com>
Fri, 27 Oct 2017 15:34:07 +0200
changeset 389387 afc2cbb9370f0d83bd5e64ea2477f917b0339926
parent 389386 1abbf079b653304fea50a3736597f289584ac94e
child 389388 919fd0a3bad512a682495deefae6baf083fd699c
push id96855
push userarchaeopteryx@coole-files.de
push dateTue, 31 Oct 2017 23:40:37 +0000
treeherdermozilla-inbound@285362745f60 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaleharvey
bugs1398103
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1398103 - Adjust toolbar and toolbar button spacing to match photon spec. r=daleharvey MozReview-Commit-ID: CzvlxUprMKL
browser/themes/linux/browser.css
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -51,35 +51,34 @@
 }
 
 #navigator-toolbox {
   -moz-appearance: none;
   background-color: transparent;
   border-top: none;
 }
 
+#navigator-toolbox > toolbar {
+  padding: 0;
+}
+
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   color: var(--toolbar-color, inherit);
   -moz-appearance: none;
   border-style: none;
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
   box-shadow: 0 calc(-1 * var(--tab-toolbar-navbar-overlap)) 0 var(--tabs-border);
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
 }
 
-#nav-bar {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
 #browser-bottombox {
   /* opaque for layers optimization */
   background-color: -moz-Dialog;
 }
 
 /* Bookmark menus */
 menu.bookmark-item,
 menuitem.bookmark-item {
@@ -532,17 +531,16 @@ html|span.ac-emphasize-text-url {
 
 #tabbrowser-tabs {
   /* override the global style to allow the selected tab to be above the nav-bar */
   z-index: auto;
 }
 
 #TabsToolbar {
   min-height: 0;
-  padding: 0;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: menubar;
   color: -moz-menubartext;
 }
 
 #nav-bar {
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-transition-duration: 150ms;
 
+  --toolbarbutton-outer-padding: 2px;
   --toolbarbutton-inner-padding: 6px;
 
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
   --toolbarbutton-hover-background: hsla(0,0%,70%,.4);
   --toolbarbutton-active-background: hsla(0,0%,70%,.6);
 
@@ -20,17 +21,17 @@
 
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
      as a more specific value should be set when the value will be used. */
   --toolbarbutton-height: 0;
 }
 
 :root[uidensity=compact] {
-  --toolbarbutton-inner-padding: 5px;
+  --toolbarbutton-outer-padding: 1px;
 }
 
 :root[uidensity=touch] {
   --toolbarbutton-inner-padding: 9px;
 }
 
 /* We use :-moz-lwtheme-* for toolbarbuttons that aren't inside a toolbar, and
    [brighttext] to cater for OS themes where :-moz-lwtheme-* doesn't apply. */
@@ -95,21 +96,21 @@ toolbar[brighttext] {
 .findbar-button {
   -moz-appearance: none;
   padding: 0;
 }
 
 toolbar .toolbarbutton-1 {
   -moz-appearance: none;
   margin: 0;
-  padding: 0 2px;
+  padding: 0 var(--toolbarbutton-outer-padding);
   -moz-box-pack: center;
 }
 
-#PanelUI-menu-button {
+:root:not([uidensity=compact]) #PanelUI-menu-button {
   padding-inline-start: 5px;
   padding-inline-end: 5px;
 }
 
 toolbar .toolbarbutton-1 > menupopup {
   margin-top: -3px;
 }
 
@@ -195,17 +196,17 @@ toolbar .toolbarbutton-1:not([disabled=t
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 
 :root:not([uidensity=compact]) #back-button {
   padding-top: 3px;
   padding-bottom: 3px;
-  padding-inline-start: 5px !important;
+  padding-inline-start: 3px;
   padding-inline-end: 0 !important;
   position: relative !important;
   z-index: 1 !important;
   border-radius: 0 10000px 10000px 0;
 }
 
 :root:not([uidensity=compact]) #back-button:-moz-locale-dir(rtl) {
   border-radius: 10000px 0 0 10000px;
@@ -216,25 +217,26 @@ toolbar .toolbarbutton-1[checked]:not(:a
 }
 
 :root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
   background-color: var(--backbutton-background);
   background-origin: padding-box;
   background-clip: padding-box;
   border: 1px solid var(--backbutton-border-color);
   border-radius: 10000px;
-  width: 32px;
-  padding: 7px;
+  width: 34px;
+  padding: 8px;
   transition-property: box-shadow;
   transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
 :root[uidensity=touch] #back-button {
   padding-top: 1px;
   padding-bottom: 1px;
+  padding-inline-start: 1px;
 }
 
 :root[uidensity=touch] #back-button > .toolbarbutton-icon {
   width: 38px;
   padding: 10px;
 }
 
 :root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {