mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Adjust the titlebar/menubar xml and styling.

Browse source 
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.
This commit is contained in:
Adomas Venčkauskas 2024-02-14 13:21:31 +02:00 • committed by Dan Stillman
parent 34b389d118
commit beb7b51cb3
10 changed files with 104 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

5
chrome/content/zotero-platform/win/overlay.css
View file

@ -2,11 +2,6 @@
--theme-border-color: #cecece; --theme-border-color: #cecece;
} }
/* Hide horrible blue effect for menu bar and toolbar */
#navigator-toolbox {
-moz-appearance: none;
}
tree { tree {
border-width: 0; border-width: 0;
} }

153
chrome/content/zotero/zoteroPane.xhtml
View file

@ -101,8 +101,53 @@
<!--EDIT--> <!--EDIT-->
<command id="cmd_find" <command id="cmd_find"
oncommand="document.getElementById('zotero-tb-search-textbox').select()"/> oncommand="document.getElementById('zotero-tb-search-textbox').select()"/>
<command id="cmd_zotero_reportErrors" oncommand="ZoteroPane_Local.reportErrors();"/>
<command id="cmd_zotero_import" oncommand="Zotero_File_Interface.showImportWizard();"/>
<command id="cmd_zotero_importFromClipboard" oncommand="Zotero_File_Interface.importFromClipboard();"/>
<command id="cmd_zotero_exportLibrary" oncommand="Zotero_File_Interface.exportFile();"/>
<command id="cmd_zotero_advancedSearch" oncommand="ZoteroPane_Local.openAdvancedSearchWindow();"/>
<command id="cmd_zotero_copyCitation"
oncommand="ZoteroPane_Local.copySelectedItemsToClipboard(true);"
disabled="true"/>
<command id="cmd_zotero_copyBibliography"
oncommand="ZoteroPane_Local.copySelectedItemsToClipboard();"
disabled="true"/>
<command id="cmd_zotero_createTimeline" oncommand="Zotero_Timeline_Interface.loadTimeline();"/>
<command id="cmd_zotero_rtfScan" oncommand="window.openDialog('chrome://zotero/content/rtfScan.xhtml', 'rtfScan', 'chrome,centerscreen')"/>
<command id="cmd_zotero_newCollection" oncommand="ZoteroPane_Local.newCollection(ZoteroPane_Local.getSelectedCollection()?.key)"/>
<command id="cmd_zotero_newFeed_fromURL" oncommand="ZoteroPane_Local.newFeedFromURL()"/>
<command id="cmd_zotero_newSavedSearch" oncommand="ZoteroPane_Local.newSearch()"/>
<command id="cmd_zotero_addByIdentifier" oncommand="Zotero_Lookup.showPanel()"/>
<command id="cmd_zotero_newStandaloneFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog()"/>
<command id="cmd_zotero_newStandaloneLinkedFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(true)"/>
<command id="cmd_zotero_newChildFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(false, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newChildLinkedFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(true, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newChildURLAttachment" oncommand="ZoteroPane.addAttachmentFromURI(true, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newStandaloneNote" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>
<command id="cmd_zotero_newChildNote" oncommand="ZoteroPane_Local.newChildNote(event.shiftKey);"/>
</commandset> </commandset>
<commandset id="macCommandSet"> <!-- was mainCommandSet -->
<command id="minimizeWindow"
label="&minimizeWindow.label;"
oncommand="window.minimize();" />
<command id="zoomWindow"
label="&zoomWindow.label;"
oncommand="zoomWindow();" />
</commandset>
<keyset id="macKeyset"> <!-- was mainKeySet -->
<key id="key_minimizeWindow"
command="minimizeWindow"
key="&minimizeWindow.key;"
modifiers="accel"/>
<key id="key_openHelpMac"
oncommand="ZoteroStandalone.openHelp();"
key="&helpMac.commandkey;"
modifiers="accel"/>
</keyset>
<keyset id="mainKeyset"> <keyset id="mainKeyset">
<key id="key_close" key="&closeCmd.key;" command="cmd_close" modifiers="accel"/> <key id="key_close" key="&closeCmd.key;" command="cmd_close" modifiers="accel"/>
<key id="key_quitApplication" <key id="key_quitApplication"
@ -153,33 +198,6 @@
<hbox class="titlebar-icon-container"> <hbox class="titlebar-icon-container">
<image class="titlebar-icon" src="chrome://zotero/skin/z.svg"></image> <image class="titlebar-icon" src="chrome://zotero/skin/z.svg"></image>
</hbox> </hbox>
<hbox class="titlebar-buttonbox-container" skipintoolbarset="true">
<hbox class="titlebar-buttonbox titlebar-color">
<!-- TODO: remove `titlebar-btn` when we are on FX115. See https://phabricator.services.mozilla.com/D162757 -->
<toolbarbutton class="titlebar-button titlebar-min"
titlebar-btn="min"
oncommand="window.minimize();"
data-l10n-id="browser-window-minimize-button"
/>
<toolbarbutton class="titlebar-button titlebar-max"
titlebar-btn="max"
oncommand="window.maximize();"
data-l10n-id="browser-window-maximize-button"
/>
<toolbarbutton class="titlebar-button titlebar-restore"
titlebar-btn="max"
oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
data-l10n-id="browser-window-restore-down-button"
/>
<toolbarbutton class="titlebar-button titlebar-close"
titlebar-btn="close"
oncommand="window.close();"
data-l10n-id="browser-window-close-button"
/>
</hbox>
</hbox>
</vbox>
<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
<!-- Menu --> <!-- Menu -->
<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true" <toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
defaultset="menubar-items" defaultset="menubar-items"
@ -685,27 +703,8 @@
</menu> </menu>
</menupopup> </menupopup>
</menu> </menu>
<commandset id="macCommandSet"> <!-- was mainCommandSet --> <!-- Only on macOS -->
<command id="minimizeWindow"
label="&minimizeWindow.label;"
oncommand="window.minimize();" />
<command id="zoomWindow"
label="&zoomWindow.label;"
oncommand="zoomWindow();" />
</commandset>
<keyset id="macKeyset"> <!-- was mainKeySet -->
<key id="key_minimizeWindow"
command="minimizeWindow"
key="&minimizeWindow.key;"
modifiers="accel"/>
<key id="key_openHelpMac"
oncommand="ZoteroStandalone.openHelp();"
key="&helpMac.commandkey;"
modifiers="accel"/>
</keyset>
<menu id="windowMenu" <menu id="windowMenu"
label="&windowMenu.label;" label="&windowMenu.label;"
datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
@ -799,7 +798,32 @@
</menubar> </menubar>
</toolbaritem> </toolbaritem>
</toolbar> </toolbar>
</toolbox>
<hbox class="titlebar-buttonbox titlebar-color">
<!-- TODO: remove `titlebar-btn` when we are on FX115. See https://phabricator.services.mozilla.com/D162757 -->
<toolbarbutton class="titlebar-button titlebar-min"
titlebar-btn="min"
oncommand="window.minimize();"
data-l10n-id="browser-window-minimize-button"
/>
<toolbarbutton class="titlebar-button titlebar-max"
titlebar-btn="max"
oncommand="window.maximize();"
data-l10n-id="browser-window-maximize-button"
/>
<toolbarbutton class="titlebar-button titlebar-restore"
titlebar-btn="max"
oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
data-l10n-id="browser-window-restore-down-button"
/>
<toolbarbutton class="titlebar-button titlebar-close"
titlebar-btn="close"
oncommand="window.close();"
data-l10n-id="browser-window-close-button"
/>
</hbox>
</vbox>
<!-- Keep in sync with Zotero.test conditional block in overlay.js --> <!-- Keep in sync with Zotero.test conditional block in overlay.js -->
<hbox id="zotero-title-bar"> <hbox id="zotero-title-bar">
<div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container" style="-moz-box-flex: 1;"/> <div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container" style="-moz-box-flex: 1;"/>
@ -855,35 +879,6 @@
</toolbarbutton> </toolbarbutton>
</hbox> </hbox>
</hbox> </hbox>
<commandset id="mainCommandSet">
<command id="cmd_zotero_reportErrors" oncommand="ZoteroPane_Local.reportErrors();"/>
<command id="cmd_zotero_import" oncommand="Zotero_File_Interface.showImportWizard();"/>
<command id="cmd_zotero_importFromClipboard" oncommand="Zotero_File_Interface.importFromClipboard();"/>
<command id="cmd_zotero_exportLibrary" oncommand="Zotero_File_Interface.exportFile();"/>
<command id="cmd_zotero_advancedSearch" oncommand="ZoteroPane_Local.openAdvancedSearchWindow();"/>
<command id="cmd_zotero_copyCitation"
oncommand="ZoteroPane_Local.copySelectedItemsToClipboard(true);"
disabled="true"/>
<command id="cmd_zotero_copyBibliography"
oncommand="ZoteroPane_Local.copySelectedItemsToClipboard();"
disabled="true"/>
<command id="cmd_zotero_createTimeline" oncommand="Zotero_Timeline_Interface.loadTimeline();"/>
<command id="cmd_zotero_rtfScan" oncommand="window.openDialog('chrome://zotero/content/rtfScan.xhtml', 'rtfScan', 'chrome,centerscreen')"/>
<command id="cmd_zotero_newCollection" oncommand="ZoteroPane_Local.newCollection(ZoteroPane_Local.getSelectedCollection()?.key)"/>
<command id="cmd_zotero_newFeed_fromURL" oncommand="ZoteroPane_Local.newFeedFromURL()"/>
<command id="cmd_zotero_newSavedSearch" oncommand="ZoteroPane_Local.newSearch()"/>
<command id="cmd_zotero_addByIdentifier" oncommand="Zotero_Lookup.showPanel()"/>
<command id="cmd_zotero_newStandaloneFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog()"/>
<command id="cmd_zotero_newStandaloneLinkedFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(true)"/>
<command id="cmd_zotero_newChildFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(false, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newChildLinkedFileAttachment" oncommand="ZoteroPane.addAttachmentFromDialog(true, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newChildURLAttachment" oncommand="ZoteroPane.addAttachmentFromURI(true, ZoteroPane.getSelectedItems()[0].id)"/>
<command id="cmd_zotero_newStandaloneNote" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>
<command id="cmd_zotero_newChildNote" oncommand="ZoteroPane_Local.newChildNote(event.shiftKey);"/>
</commandset>
<hbox flex="1" id="browser"> <hbox flex="1" id="browser">
<vbox id="appcontent" flex="1"> <vbox id="appcontent" flex="1">
<stack id="zotero-pane-stack" flex="1"> <stack id="zotero-pane-stack" flex="1">

36
scss/components/_mainWindow.scss
View file

@ -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 :::::: */ /* ::::: Tabs in Titlebar :::::: */
&:not([chromemargin]) > #titlebar { &:not([chromemargin]) > #titlebar {
@ -90,10 +72,6 @@
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar)); 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 { &:not([tabsintitlebar]) .titlebar-placeholder {
visibility: collapse; visibility: collapse;
} }
@ -110,15 +88,6 @@
.titlebar-buttonbox { .titlebar-buttonbox {
-moz-appearance: -moz-window-button-box; -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 { .titlebar-icon {
display: none; display: none;
@ -131,7 +100,10 @@
display: none; display: none;
} }
#navigator-toolbox { #titlebar {
display: flex;
align-items: center;
-moz-window-dragging: drag;
menu { menu {
font-size: var(--zotero-font-size); font-size: var(--zotero-font-size);
} }

2
scss/linux/_tabBar.scss
View file

@ -1,4 +1,4 @@
#tab-bar-container { #tab-bar-container {
--safe-area-start: 30px; --safe-area-start: 8px;
--safe-area-end: 0px; --safe-area-end: 0px;
} }

42
scss/linux/_titleBar.scss
View file

@ -8,18 +8,21 @@
background: var(--material-tabbar); background: var(--material-tabbar);
} }
#navigator-toolbox { #titlebar {
height: var(--tab-min-height); height: var(--tab-min-height);
-moz-box-pack: center; -moz-box-pack: center;
pointer-events: none; pointer-events: none;
-moz-appearance: -moz-window-titlebar;
} }
#toolbar-menubar { #toolbar-menubar {
pointer-events: none; pointer-events: none;
visibility: visible; visibility: visible;
// space for 30*30 icon // space for 30*30 icon
padding-left: var(--tab-min-height); margin: 0 8px;
height: var(--tab-min-height); height: var(--tab-min-height);
appearance: none;
flex: 1;
} }
#menubar-items { #menubar-items {
@ -30,39 +33,19 @@
height: var(--tab-min-height); height: var(--tab-min-height);
} }
#titlebar {
pointer-events: none;
}
.titlebar-buttonbox { .titlebar-buttonbox {
pointer-events: all; pointer-events: all;
margin: 0 4px; margin: 0 10px;
} }
.titlebar-button { .titlebar-button {
margin: 4px 0; position: static;
width: calc(var(--tab-min-height) - 8px);
height: calc(var(--tab-min-height) - 8px);
position: relative;
// Fix KDE rendering bug // Fix KDE rendering bug
z-index: 1; z-index: 1;
} }
.titlebar-icon-container { .titlebar-icon-container {
margin-bottom: calc(0px - var(--tab-min-height)); display: none;
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);
} }
// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/linux/browser.css // Following rules from https://searchfox.org/mozilla-central/source/browser/themes/linux/browser.css
@ -73,9 +56,9 @@
* can swallow those events. */ * can swallow those events. */
.titlebar-buttonbox { .titlebar-buttonbox {
z-index: 1; z-index: 1;
display: flex;
align-items: center; align-items: center;
// Disable button stretch height: var(--tab-min-height);
-moz-box-align: baseline;
} }
/* Render titlebar command buttons according to system config. /* Render titlebar command buttons according to system config.
@ -156,7 +139,8 @@
} }
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container { .titlebar-buttonbox {
order: -1; order: -1;
margin-right: 0;
} }
} }

4
scss/mac/_tabBar.scss
View file

@ -8,7 +8,3 @@
--safe-area-start: 8px; --safe-area-start: 8px;
} }
} }
#navigator-toolbox {
border: 0;
}

3
scss/mac/_titleBar.scss Normal file
View file

@ -0,0 +1,3 @@
#titlebar {
margin-bottom: calc(0px - var(--tab-min-height));
}

2
scss/win/_tabBar.scss
View file

@ -1,4 +1,4 @@
#tab-bar-container { #tab-bar-container {
--safe-area-start: 30px; --safe-area-start: 8px;
--safe-area-end: 0px; --safe-area-end: 0px;
} }

39
scss/win/_titleBar.scss
View file

@ -2,29 +2,26 @@
// Allow right-click context menu on menubar // Allow right-click context menu on menubar
pointer-events: none; pointer-events: none;
visibility: visible; visibility: visible;
// Space for 36*36 icon flex: 1;
padding-left: var(--tab-min-height);
} }
#menubar-items { #menubar-items {
pointer-events: all; pointer-events: all;
} }
#titlebar {
pointer-events: none;
height: var(--tab-min-height);
margin-bottom: calc(0px - var(--tab-min-height));
}
.titlebar-buttonbox { .titlebar-buttonbox {
height: 100%;
pointer-events: all; pointer-events: all;
} }
#navigator-toolbox { #titlebar {
height :var(--tab-min-height); height :var(--tab-min-height);
-moz-box-pack: center; -moz-box-pack: center;
pointer-events: none; pointer-events: none;
border-bottom: var(--material-border); border-bottom: var(--material-border);
toolbar {
appearance: none;
}
menubar { menubar {
height :var(--tab-min-height); height :var(--tab-min-height);
padding: 5px 1px 5px 1px !important; 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 { .titlebar-icon {
-moz-window-dragging: no-drag; -moz-window-dragging: no-drag;
pointer-events: all; pointer-events: all;
@ -54,13 +46,6 @@
object-fit: none; 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 // Following rules from https://searchfox.org/mozilla-central/source/browser/themes/windows/browser.css
:root { :root {
@ -108,7 +93,7 @@
} }
} }
&[sizemode="normal"] #navigator-toolbox { &[sizemode="normal"] #titlebar {
border-top: .5px solid ActiveBorder; border-top: .5px solid ActiveBorder;
&:-moz-window-inactive { &:-moz-window-inactive {
border-top-color: InactiveBorder; border-top-color: InactiveBorder;
@ -130,16 +115,6 @@
z-index: 1; 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 */ /* Window control buttons */
.titlebar-button { .titlebar-button {

1
scss/zotero-mac.scss
View file

@ -8,6 +8,7 @@
@import "mac/editable"; @import "mac/editable";
@import "mac/tabBar"; @import "mac/tabBar";
@import "mac/tabbox"; @import "mac/tabbox";
@import "mac/titleBar";
@import "mac/menupopup"; @import "mac/menupopup";
// Elements // Elements