From c85eff18a9e59bdd4337d286a5b57c9e70d01d2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Tue, 6 Sep 2016 21:53:28 +0200 Subject: [PATCH] Bug 1162441 - Use CSS border instead of background for the separator between toolbars and content for more predictable high-DPI behavior. r=jaws --- browser/themes/linux/browser.css | 5 ++--- browser/themes/osx/browser.css | 8 +++++--- browser/themes/osx/devedition.css | 3 ++- browser/themes/shared/devedition.inc.css | 2 +- browser/themes/windows/browser-aero.css | 9 +++++++-- browser/themes/windows/browser.css | 9 ++++----- 6 files changed, 21 insertions(+), 15 deletions(-) diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 9eb35973bc5b..e43f838251ca 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -55,12 +55,11 @@ content: ""; display: -moz-box; -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ - height: 1px; - background-color: ThreeDShadow; + border-bottom: 1px solid ThreeDShadow; } #navigator-toolbox:-moz-lwtheme::after { - background-color: rgba(0,0,0,.3); + border-bottom-color: rgba(0,0,0,.3); } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#addon-bar) { diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 05988d845c50..78c27d581ce6 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -55,10 +55,10 @@ #navigator-toolbox::after { -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ - background-image: linear-gradient(to top, hsla(0,0%,0%,.15), hsla(0,0%,0%,.15) 1px, hsla(0,0%,100%,.15) 1px, hsla(0,0%,100%,.15) 2px, transparent 3px); content: ""; display: -moz-box; - height: 2px; + 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 */ @@ -66,7 +66,9 @@ @media (-moz-mac-yosemite-theme) { #navigator-toolbox:-moz-window-inactive::after { - background-image: linear-gradient(to top, hsla(0,0%,0%,.1), hsla(0,0%,0%,.1) 1px, hsla(0,0%,100%,0) 1px, hsla(0,0%,100%,0) 2px, transparent 3px); + border-top-style: none; + border-bottom-color: hsla(0,0%,0%,.1); + margin-top: -1px; } } diff --git a/browser/themes/osx/devedition.css b/browser/themes/osx/devedition.css index 0cce31393d25..8fdbf4f9e66e 100644 --- a/browser/themes/osx/devedition.css +++ b/browser/themes/osx/devedition.css @@ -10,7 +10,8 @@ /* Use only 1px separator between nav toolbox and page content */ #navigator-toolbox::after { - background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px); + border-top-style: none; + margin-top: -1px; } /* Include extra space on left/right for dragging since there is no space above diff --git a/browser/themes/shared/devedition.inc.css b/browser/themes/shared/devedition.inc.css index 2c54c1f7b6f9..c309295a7d09 100644 --- a/browser/themes/shared/devedition.inc.css +++ b/browser/themes/shared/devedition.inc.css @@ -146,7 +146,7 @@ } #navigator-toolbox:-moz-lwtheme::after { - background: var(--chrome-navigator-toolbox-separator-color); + border-bottom-color: var(--chrome-navigator-toolbox-separator-color); } #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 4d6f61ad9746..5ff9d8250ac2 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -335,16 +335,21 @@ (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Vertical toolbar border */ - #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after, #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::after, #main-window[customizing] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { 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 { + 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; diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 526e04fe536b..d5f05c7f1aad 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -122,28 +122,27 @@ content: ""; display: -moz-box; -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ - height: 1px; - background-color: ThreeDShadow; + border-bottom: 1px solid ThreeDShadow; } @media (-moz-windows-default-theme) { @media (-moz-os-version: windows-vista), (-moz-os-version: windows-win7) { #navigator-toolbox::after { - background-color: #aabccf; + border-bottom-color: #aabccf; } } @media (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { #navigator-toolbox::after { - background-color: #c2c2c2; + border-bottom-color: #c2c2c2; } } } #navigator-toolbox:-moz-lwtheme::after { - background-color: rgba(0,0,0,.3); + border-bottom-color: rgba(0,0,0,.3); } #navigator-toolbox > toolbar {