From beb7b51cb3cd1dd01a35ec596cc302f1cffd0dbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adomas=20Ven=C4=8Dkauskas?= Date: Wed, 14 Feb 2024 13:21:31 +0200 Subject: [PATCH] Adjust the titlebar/menubar xml and styling. Reasoning: - Different Linux DEs specify different titlebar button (min, max, close) locations which we did not and could not support before. - Previous approach copied from Firefox depended on custom offsets specified in CSS instead of allowing the browser engine to place elements Changes: - Titlebar and menubar no longer collapsed into each other with a negative margin, instead just a single flexbox (on macOS the titlebar is still collapsed into the tab bar) - Support for -moz-gtk-csd-reversed-placement to correctly place the titlebar buttons on Linux - Removed/changed some code copied from Firefox that does not apply or uses the wrong selectors - Fixed the display of Linux Unity DE buttons with icons appearing outside of button borders - Removed the Z in the titlebar on Linux since only a few DEs use that. - Aligned the tabbar on Linux and Windows to the left margin of the window. --- .../content/zotero-platform/win/overlay.css | 5 - chrome/content/zotero/zoteroPane.xhtml | 153 +++++++++--------- scss/components/_mainWindow.scss | 36 +---- scss/linux/_tabBar.scss | 2 +- scss/linux/_titleBar.scss | 42 ++--- scss/mac/_tabBar.scss | 4 - scss/mac/_titleBar.scss | 3 + scss/win/_tabBar.scss | 2 +- scss/win/_titleBar.scss | 39 +---- scss/zotero-mac.scss | 1 + 10 files changed, 104 insertions(+), 183 deletions(-) create mode 100644 scss/mac/_titleBar.scss diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css index 318b0876d6..a602ca7596 100644 --- a/chrome/content/zotero-platform/win/overlay.css +++ b/chrome/content/zotero-platform/win/overlay.css @@ -2,11 +2,6 @@ --theme-border-color: #cecece; } -/* Hide horrible blue effect for menu bar and toolbar */ -#navigator-toolbox { - -moz-appearance: none; -} - tree { border-width: 0; } diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml index 85dd01e72e..672b467ec0 100644 --- a/chrome/content/zotero/zoteroPane.xhtml +++ b/chrome/content/zotero/zoteroPane.xhtml @@ -101,8 +101,53 @@ + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - + + - + + + + + + + + + +
@@ -855,35 +879,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss index 694e7c6698..57204061cd 100644 --- a/scss/components/_mainWindow.scss +++ b/scss/components/_mainWindow.scss @@ -58,24 +58,6 @@ } - - - #titlebar { - margin-bottom: calc(0px - var(--tab-min-height)); - -moz-box-pack: center; - } - - .titlebar-buttonbox-container { - -moz-box-ordinal-group: 1000; - } - - - - - - - - /* ::::: Tabs in Titlebar :::::: */ &:not([chromemargin]) > #titlebar { @@ -90,10 +72,6 @@ min-height: calc(var(--tab-min-height) + var(--space-above-tabbar)); } - &[tabsintitlebar="true"]:not(:-moz-lwtheme) > #titlebar { - -moz-appearance: -moz-window-titlebar; - } - &:not([tabsintitlebar]) .titlebar-placeholder { visibility: collapse; } @@ -110,15 +88,6 @@ .titlebar-buttonbox { -moz-appearance: -moz-window-button-box; } - - /* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */ - .titlebar-buttonbox-container:-moz-locale-dir(rtl) { - -moz-box-ordinal-group: 1000; - } - - .titlebar-buttonbox-container:-moz-locale-dir(ltr) { - -moz-box-ordinal-group: 0; - } .titlebar-icon { display: none; @@ -131,7 +100,10 @@ display: none; } -#navigator-toolbox { +#titlebar { + display: flex; + align-items: center; + -moz-window-dragging: drag; menu { font-size: var(--zotero-font-size); } diff --git a/scss/linux/_tabBar.scss b/scss/linux/_tabBar.scss index c3559c25b2..da9ffbe88c 100644 --- a/scss/linux/_tabBar.scss +++ b/scss/linux/_tabBar.scss @@ -1,4 +1,4 @@ #tab-bar-container { - --safe-area-start: 30px; + --safe-area-start: 8px; --safe-area-end: 0px; } diff --git a/scss/linux/_titleBar.scss b/scss/linux/_titleBar.scss index 1d1a232e3d..9f9fcb0cd7 100644 --- a/scss/linux/_titleBar.scss +++ b/scss/linux/_titleBar.scss @@ -8,18 +8,21 @@ background: var(--material-tabbar); } -#navigator-toolbox { +#titlebar { height: var(--tab-min-height); -moz-box-pack: center; pointer-events: none; + -moz-appearance: -moz-window-titlebar; } #toolbar-menubar { pointer-events: none; visibility: visible; // space for 30*30 icon - padding-left: var(--tab-min-height); + margin: 0 8px; height: var(--tab-min-height); + appearance: none; + flex: 1; } #menubar-items { @@ -30,39 +33,19 @@ height: var(--tab-min-height); } -#titlebar { - pointer-events: none; -} - .titlebar-buttonbox { pointer-events: all; - margin: 0 4px; + margin: 0 10px; } .titlebar-button { - margin: 4px 0; - width: calc(var(--tab-min-height) - 8px); - height: calc(var(--tab-min-height) - 8px); - position: relative; + position: static; // Fix KDE rendering bug z-index: 1; } .titlebar-icon-container { - margin-bottom: calc(0px - var(--tab-min-height)); - height: var(--tab-min-height); -} - -.titlebar-icon { - -moz-window-dragging: drag; - // to make the icon 30*30 - margin: 7px; - object-fit: none; -} - -.titlebar-buttonbox-container { - -moz-box-pack: end; - height: var(--tab-min-height); + display: none; } // Following rules from https://searchfox.org/mozilla-central/source/browser/themes/linux/browser.css @@ -73,9 +56,9 @@ * can swallow those events. */ .titlebar-buttonbox { z-index: 1; + display: flex; align-items: center; - // Disable button stretch - -moz-box-align: baseline; + height: var(--tab-min-height); } /* Render titlebar command buttons according to system config. @@ -156,7 +139,8 @@ } @media (-moz-gtk-csd-reversed-placement) { - .titlebar-buttonbox-container { - order: -1; + .titlebar-buttonbox { + order: -1; + margin-right: 0; } } diff --git a/scss/mac/_tabBar.scss b/scss/mac/_tabBar.scss index ab45d39c11..65ea552cf0 100644 --- a/scss/mac/_tabBar.scss +++ b/scss/mac/_tabBar.scss @@ -8,7 +8,3 @@ --safe-area-start: 8px; } } - -#navigator-toolbox { - border: 0; -} diff --git a/scss/mac/_titleBar.scss b/scss/mac/_titleBar.scss new file mode 100644 index 0000000000..7b8df59c08 --- /dev/null +++ b/scss/mac/_titleBar.scss @@ -0,0 +1,3 @@ +#titlebar { + margin-bottom: calc(0px - var(--tab-min-height)); +} \ No newline at end of file diff --git a/scss/win/_tabBar.scss b/scss/win/_tabBar.scss index c3559c25b2..da9ffbe88c 100644 --- a/scss/win/_tabBar.scss +++ b/scss/win/_tabBar.scss @@ -1,4 +1,4 @@ #tab-bar-container { - --safe-area-start: 30px; + --safe-area-start: 8px; --safe-area-end: 0px; } diff --git a/scss/win/_titleBar.scss b/scss/win/_titleBar.scss index 151acc2956..7d0dea9e41 100644 --- a/scss/win/_titleBar.scss +++ b/scss/win/_titleBar.scss @@ -2,29 +2,26 @@ // Allow right-click context menu on menubar pointer-events: none; visibility: visible; - // Space for 36*36 icon - padding-left: var(--tab-min-height); + flex: 1; } #menubar-items { pointer-events: all; } -#titlebar { - pointer-events: none; - height: var(--tab-min-height); - margin-bottom: calc(0px - var(--tab-min-height)); -} - .titlebar-buttonbox { + height: 100%; pointer-events: all; } -#navigator-toolbox { +#titlebar { height :var(--tab-min-height); -moz-box-pack: center; pointer-events: none; border-bottom: var(--material-border); + toolbar { + appearance: none; + } menubar { height :var(--tab-min-height); padding: 5px 1px 5px 1px !important; @@ -41,11 +38,6 @@ } } -.titlebar-icon-container { - margin-bottom: calc(0px - var(--tab-min-height)); - height :var(--tab-min-height); -} - .titlebar-icon { -moz-window-dragging: no-drag; pointer-events: all; @@ -54,13 +46,6 @@ object-fit: none; } -.titlebar-buttonbox-container { - -moz-box-pack: end; - height :var(--tab-min-height); - background: var(--material-tabbar); -} - - // Following rules from https://searchfox.org/mozilla-central/source/browser/themes/windows/browser.css :root { @@ -108,7 +93,7 @@ } } - &[sizemode="normal"] #navigator-toolbox { + &[sizemode="normal"] #titlebar { border-top: .5px solid ActiveBorder; &:-moz-window-inactive { border-top-color: InactiveBorder; @@ -130,16 +115,6 @@ z-index: 1; } -.titlebar-buttonbox-container { - align-items: stretch; - - /* Prevent window controls from overlapping the nav bar's shadow on the tab - * bar. */ - #TabsToolbar > & { - margin-bottom: var(--tabs-navbar-shadow-size); - } -} - /* Window control buttons */ .titlebar-button { diff --git a/scss/zotero-mac.scss b/scss/zotero-mac.scss index 61f934fc99..6dc3511d49 100644 --- a/scss/zotero-mac.scss +++ b/scss/zotero-mac.scss @@ -8,6 +8,7 @@ @import "mac/editable"; @import "mac/tabBar"; @import "mac/tabbox"; +@import "mac/titleBar"; @import "mac/menupopup"; // Elements