Bug 1391191 - Consolidate navigator toolbox bottom border styling. r?johannh
MozReview-Commit-ID: 4xjHHqIayP5
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -25,52 +25,41 @@
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
--panel-separator-color: ThreeDShadow;
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
--urlbar-separator-color: ThreeDShadow;
+
+ --toolbox-border-bottom-color: ThreeDShadow;
}
:root:-moz-lwtheme {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
+
+ --toolbox-border-bottom-color: rgba(0,0,0,.3);
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
#navigator-toolbox {
-moz-appearance: none;
background-color: transparent;
border-top: none;
}
-#navigator-toolbox::after {
- content: "";
- display: -moz-box;
- -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
- border-bottom: 1px solid ThreeDShadow;
-}
-
-#navigator-toolbox:-moz-lwtheme::after {
- border-bottom-color: rgba(0,0,0,.3);
-}
-
-:root[customizing] #navigator-toolbox::after {
- display: none;
-}
-
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
-moz-appearance: none;
border-style: none;
}
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -26,44 +26,25 @@
--toolbarbutton-border-radius: 4px;
--panel-separator-color: hsla(210,4%,10%,.14);
--arrowpanel-dimmed: hsla(210,4%,10%,.07);
--arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
--arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
--urlbar-separator-color: hsla(0,0%,16%,.2);
+
+ --toolbox-border-bottom-color: #e1e1e2;
}
:root:-moz-lwtheme {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
-}
-#navigator-toolbox::after {
- -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
- content: "";
- display: -moz-box;
- border-top: 1px solid hsla(0,0%,100%,.15);
- border-bottom: 1px solid hsla(0,0%,0%,.15);
- margin-top: -2px;
- position: relative;
- z-index: 2; /* navbar is at 1 */
-}
-
-@media (-moz-mac-yosemite-theme) {
- #navigator-toolbox:-moz-window-inactive::after {
- border-top-style: none;
- border-bottom-color: hsla(0,0%,0%,.1);
- margin-top: -1px;
- }
-}
-
-:root[customizing] #navigator-toolbox::after {
- display: none;
+ --toolbox-border-bottom-color: rgba(0,0,0,.3);
}
#navigator-toolbox toolbarbutton:-moz-lwtheme {
color: inherit;
text-shadow: inherit;
}
#main-window {
@@ -129,21 +110,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) {
- /* add extra padding to compensate the bottom border */
- padding-bottom: 2px;
-}
-
/* 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 */
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -11,16 +11,28 @@
%else
:root[tabsintitlebar][sizemode=normal] #TabsToolbar
%endif
{
padding-inline-start: 40px;
}
%endif
+/* Toolbar / content area border */
+
+#navigator-toolbox::after {
+ content: "";
+ display: -moz-box;
+ border-bottom: 1px solid var(--toolbox-border-bottom-color);
+}
+
+:root[customizing] #navigator-toolbox::after {
+ display: none;
+}
+
/* Bookmark toolbar */
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
overflow: -moz-hidden-unscrollable;
max-height: 4em;
transition: min-height 170ms ease-out, max-height 170ms ease-out;
padding: 0 4px 1px;
}
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -16,17 +16,17 @@
--tab-line-color: highlight;
}
:root:-moz-lwtheme-brighttext {
/* Chrome */
--chrome-background-color: hsl(240, 5%, 5%);
--chrome-color: rgb(249, 249, 250);
--chrome-secondary-background-color: hsl(240, 1%, 20%);
- --chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
+ --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
--chrome-nav-bar-separator-color: rgba(0,0,0,.2);
--chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
--chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
--chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
--chrome-selection-color: #fff;
--chrome-selection-background-color: #5675B9;
/* Url and search bars */
@@ -35,17 +35,17 @@
}
:root:-moz-lwtheme-darktext {
--url-and-searchbar-background-color: #fff;
--chrome-background-color: #E3E4E6;
--chrome-color: #18191a;
--chrome-secondary-background-color: #f5f6f7;
- --chrome-navigator-toolbox-separator-color: #cccccc;
+ --toolbox-border-bottom-color: #cccccc;
--chrome-nav-bar-separator-color: #B6B6B8;
--chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
--chrome-nav-buttons-hover-background: #DADBDB;
--chrome-nav-bar-controls-border-color: #ccc;
--chrome-selection-color: #f5f7fa;
--chrome-selection-background-color: #4c9ed9;
}
@@ -63,20 +63,16 @@ toolbar[brighttext] .toolbarbutton-1 {
/* Change the base colors for the browser chrome */
#TabsToolbar,
#browser-panel {
background: var(--chrome-background-color);
color: var(--chrome-color);
}
-#navigator-toolbox:-moz-lwtheme::after {
- border-bottom-color: var(--chrome-navigator-toolbox-separator-color);
-}
-
#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
.browserContainer > findbar,
#browser-bottombox {
background-color: var(--chrome-secondary-background-color) !important;
background-image: none !important;
color: var(--chrome-color);
}
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -289,26 +289,24 @@
:root[darkwindowframe="true"]:not(:-moz-lwtheme):not(:-moz-window-inactive) {
--titlebar-text-color: white;
}
/* Show borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7),
(-moz-os-version: windows-win8) {
/* Vertical toolbar border */
- #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
- #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:-moz-lwtheme,
- #main-window[customizing] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+ #main-window[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
+ #main-window[sizemode=normal] #navigator-toolbox:-moz-lwtheme {
border-left: 1px solid @toolbarShadowColor@;
border-right: 1px solid @toolbarShadowColor@;
background-clip: padding-box;
}
- #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after,
- #main-window[customizing] #navigator-toolbox::after {
+ #main-window[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after {
box-shadow: 1px 0 0 @toolbarShadowColor@, -1px 0 0 @toolbarShadowColor@;
margin-left: 1px;
margin-right: 1px;
}
#main-window[sizemode=normal] #browser-border-start,
#main-window[sizemode=normal] #browser-border-end {
display: -moz-box;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -25,35 +25,41 @@
--toolbarbutton-border-radius: 2px;
--panel-separator-color: ThreeDLightShadow;
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
--urlbar-separator-color: ThreeDLightShadow;
+
+ --toolbox-border-bottom-color: ThreeDShadow;
}
@media (-moz-windows-default-theme) {
:root {
--tabs-border: rgba(0,0,0,.3);
--toolbar-non-lwt-bgcolor: #f9f9fa;
--toolbar-non-lwt-textcolor: #0c0c0d;
--toolbar-non-lwt-bgimage: none;
--panel-separator-color: hsla(210,4%,10%,.14);
+
+ --toolbox-border-bottom-color: #e1e1e2;
}
}
:root:-moz-lwtheme {
--tabs-border: rgba(0,0,0,.3);
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
+
+ --toolbox-border-bottom-color: rgba(0,0,0,.3);
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
@@ -65,40 +71,16 @@
display: none;
}
#navigator-toolbox,
#navigator-toolbox > toolbar {
-moz-appearance: none;
}
-#navigator-toolbox::after {
- content: "";
- display: -moz-box;
- -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
- border-bottom: 1px solid ThreeDShadow;
-}
-
-@media (-moz-windows-default-theme) {
- @media (-moz-os-version: windows-win8),
- (-moz-os-version: windows-win10) {
- #navigator-toolbox::after {
- border-bottom-color: #c2c2c2;
- }
- }
-}
-
-#navigator-toolbox:-moz-lwtheme::after {
- border-bottom-color: rgba(0,0,0,.3);
-}
-
-:root[customizing] #navigator-toolbox::after {
- display: none;
-}
-
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-clip: padding-box;
}
#toolbar-menubar,
#TabsToolbar {
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -123,26 +123,16 @@
border-right: none !important;
}
/* Disable dragging like in the default theme: */
#main-window[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme {
-moz-window-dragging: no-drag;
}
-@media (-moz-os-version: windows-win7),
- (-moz-os-version: windows-win8) {
- /* And then we add them back on toolbars so that they don't look borderless: */
- #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after,
- #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
- border-left: 1px solid hsla(209,67%,12%,0.35);
- border-right: 1px solid hsla(209,67%,12%,0.35);
- }
-}
-
@media (-moz-os-version: windows-win10) {
.titlebar-button:-moz-lwtheme {
-moz-context-properties: stroke;
stroke: currentColor;
}
#titlebar-min:-moz-lwtheme {
list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}
--- a/testing/web-platform/meta/scroll-anchoring/anchoring-with-bounds-clamping.html.ini
+++ b/testing/web-platform/meta/scroll-anchoring/anchoring-with-bounds-clamping.html.ini
@@ -1,6 +1,5 @@
[anchoring-with-bounds-clamping.html]
type: testharness
[Anchoring combined with scroll bounds clamping in the document.]
- expected:
- if os != "mac": FAIL
+ expected: FAIL