Bug 1398103 - Adjust toolbar and toolbar button spacing to match photon spec. r?daleharvey
MozReview-Commit-ID: 4Pcqahw2Mwu
--- 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