Bug 1398103 - Adjust toolbar and toolbar button spacing to match photon spec. r?daleharvey draft
authorDão Gottwald <dao@mozilla.com>
Wed, 01 Nov 2017 11:17:50 +0100
changeset 690033 3a61cdcf68bbbf08ab33a8ab3a2d7118bed00741
parent 689820 ee21e5f7f1c1726e0ed2697eb45df54cdceedd36
child 738459 6569f5da91c814870379d98276d7ab2f74439d81
push id87178
push userdgottwald@mozilla.com
push dateWed, 01 Nov 2017 10:18:16 +0000
reviewersdaleharvey
bugs1398103
milestone58.0a1
Bug 1398103 - Adjust toolbar and toolbar button spacing to match photon spec. r?daleharvey MozReview-Commit-ID: 4Pcqahw2Mwu
browser/themes/linux/browser.css
browser/themes/shared/toolbarbuttons.inc.css
testing/web-platform/meta/css/css-values-3/viewport-units-css2-001.html.ini
--- 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 -@navbarTabsShadowSize@ 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 {
--- a/testing/web-platform/meta/css/css-values-3/viewport-units-css2-001.html.ini
+++ b/testing/web-platform/meta/css/css-values-3/viewport-units-css2-001.html.ini
@@ -2,21 +2,19 @@
   type: testharness
   [vw length applied to border-top-width]
     expected:
       if not debug and not e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL
       if debug and e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL
       if not debug and e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL
 
   [vh length applied to border-top-width]
-    expected:
-      if os != "linux": FAIL
+    expected: FAIL
 
   [vmin length applied to border-top-width]
-    expected:
-      if os != "linux": FAIL
+    expected: FAIL
 
   [vmax length applied to border-top-width]
     expected:
       if not debug and not e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL
       if debug and e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL
       if not debug and e10s and (os == "win") and (version == "6.2.9200") and (processor == "x86_64") and (bits == 64): FAIL