mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats 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;
}
/* Hide horrible blue effect for menu bar and toolbar */
#navigator-toolbox {
-moz-appearance: none;
}
tree {
border-width: 0;
}

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

@ -101,8 +101,53 @@
<!--EDIT-->
<command id="cmd_find"
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 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">
<key id="key_close" key="&closeCmd.key;" command="cmd_close" modifiers="accel"/>
<key id="key_quitApplication"
@ -153,33 +198,6 @@
<hbox class="titlebar-icon-container">
<image class="titlebar-icon" src="chrome://zotero/skin/z.svg"></image>
</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 -->
<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
defaultset="menubar-items"
@ -685,27 +703,8 @@
</menu>
</menupopup>
</menu>
<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>
<!-- Only on macOS -->
<menu id="windowMenu"
label="&windowMenu.label;"
datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
@ -799,7 +798,32 @@
</menubar>
</toolbaritem>
</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 -->
<hbox id="zotero-title-bar">
<div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container" style="-moz-box-flex: 1;"/>
@ -855,35 +879,6 @@
</toolbarbutton>
</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">
<vbox id="appcontent" 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 :::::: */
&: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);
}

2
scss/linux/_tabBar.scss
View file

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

42
scss/linux/_titleBar.scss
View file

@ -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;
}
}

4
scss/mac/_tabBar.scss
View file

@ -8,7 +8,3 @@
--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 {
--safe-area-start: 30px;
--safe-area-start: 8px;
--safe-area-end: 0px;
}

39
scss/win/_titleBar.scss
View file

@ -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 {

1
scss/zotero-mac.scss
View file

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