From 88ce8343853813d237f86e2078d984a72574b34f Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Thu, 23 Mar 2023 11:26:50 -0400 Subject: [PATCH 1/2] Monkey-patch toolbarbutton CE to display a native menu on macOS --- chrome/content/scaffold/scaffold.xhtml | 2 - .../content/zotero-platform/mac/overlay.css | 10 ++++ .../zotero/elements/menuToolbarbutton.js | 60 ------------------- chrome/content/zotero/platformKeys.js | 17 ++++++ chrome/content/zotero/zoteroPane.xhtml | 6 -- 5 files changed, 27 insertions(+), 68 deletions(-) delete mode 100644 chrome/content/zotero/elements/menuToolbarbutton.js diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml index defac3e795..203b7fbe27 100644 --- a/chrome/content/scaffold/scaffold.xhtml +++ b/chrome/content/scaffold/scaffold.xhtml @@ -69,7 +69,6 @@ // Custom elements Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this); - Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menuToolbarbutton.js", this); @@ -353,7 +352,6 @@ .toolbarbutton-menu-dropmarker { + -moz-default-appearance: none; + background-image: url("chrome://zotero/skin/searchbar-dropmarker.png"); + width: 7px; + height: 4px; + background-repeat: no-repeat; + background-size: 100%; +} + /* A decent hack: reverse the effective order of the dropmarker and icon in RTL mode so that the above CSS, which places the menubutton-start.png background on the toolbarbutton-icon, will make sense. (Otherwise the dropmarker appears @@ -395,6 +404,7 @@ treechildren::-moz-tree-image { @media (min-resolution: 1.25dppx) { .zotero-tb-button,.zotero-tb-button:first-child,.zotero-tb-button:last-child { background: url("chrome://zotero/skin/mac/menubutton-end@2x.png") right center/auto 24px no-repeat; } .zotero-tb-button > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start@2x.png") left center/auto 24px no-repeat; } + .zotero-tb-button[type=menu] > .toolbarbutton-menu-dropmarker { background-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); } .zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window@2x.png") left center/auto 24px no-repeat; } .zotero-tb-button:-moz-window-inactive,.zotero-tb-button:-moz-window-inactive:first-child,.zotero-tb-button:-moz-window-inactive:last-child { background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window@2x.png") right center/auto 24px no-repeat; } .zotero-tb-button[open="true"],.zotero-tb-button:not([disabled="true"]):hover:active { background: url("chrome://zotero/skin/mac/menubutton-end-pressed@2x.png") right center/auto 24px no-repeat; } diff --git a/chrome/content/zotero/elements/menuToolbarbutton.js b/chrome/content/zotero/elements/menuToolbarbutton.js deleted file mode 100644 index 4f8b7b2307..0000000000 --- a/chrome/content/zotero/elements/menuToolbarbutton.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - ***** BEGIN LICENSE BLOCK ***** - - Copyright © 2022 Corporation for Digital Scholarship - Vienna, Virginia, USA - https://www.zotero.org - - This file is part of Zotero. - - Zotero is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - Zotero is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with Zotero. If not, see . - - ***** END LICENSE BLOCK ***** -*/ - -"use strict"; - -{ - /** - * Extends MozToolbarbutton to use our own dropmarker image and native menus. - */ - class MenuToolbarbutton extends customElements.get('toolbarbutton') { - constructor() { - super(); - this.addEventListener('mousedown', (event) => { - if (this.getAttribute('nonnativepopup') != 'true' - && Zotero.Utilities.Internal.showNativeElementPopup(this)) { - event.preventDefault(); - } - }); - } - - static get dropmarkerFragment() { - // Zotero.hiDPI[Suffix] may not have been initialized yet, so calculate it ourselves - let hiDPISuffix = window.devicePixelRatio > 1 ? '@2x' : ''; - let frag = document.importNode( - MozXULElement.parseXULToFragment(` - - `), - true - ); - Object.defineProperty(this, "dropmarkerFragment", { value: frag }); - return frag; - } - } - - customElements.define("menu-toolbarbutton", MenuToolbarbutton, { - extends: "toolbarbutton", - }); -} diff --git a/chrome/content/zotero/platformKeys.js b/chrome/content/zotero/platformKeys.js index 34d9bdc6b1..1303c29ecf 100644 --- a/chrome/content/zotero/platformKeys.js +++ b/chrome/content/zotero/platformKeys.js @@ -38,6 +38,23 @@ window.addEventListener('DOMContentLoaded', () => { if (fileQuitItemUnix) fileQuitItemUnix.hidden = true; if (editPreferencesSeparator) editPreferencesSeparator.hidden = true; if (editPreferencesItem) editPreferencesItem.hidden = true; + + // Monkey-patch the toolbarbutton CE so it shows a native menu popup + let MozToolbarbutton = customElements.get('toolbarbutton'); + if (MozToolbarbutton) { + let originalRender = MozToolbarbutton.prototype.render; + MozToolbarbutton.prototype.render = function () { + originalRender(); + this.addEventListener('mousedown', (event) => { + if (!event.defaultPrevented + && !this.disabled + && this.getAttribute('nonnativepopup') != 'true' + && Zotero.Utilities.Internal.showNativeElementPopup(this)) { + event.preventDefault(); + } + }); + }; + } } else { // Set behavior on all non-macOS platforms diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml index 351dcb52fc..d6a5c2d236 100644 --- a/chrome/content/zotero/zoteroPane.xhtml +++ b/chrome/content/zotero/zoteroPane.xhtml @@ -86,7 +86,6 @@ Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this); Services.scriptloader.loadSubScript("chrome://zotero/content/elements/relatedBox.js", this); Services.scriptloader.loadSubScript("chrome://zotero/content/elements/attachmentBox.js", this); - Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menuToolbarbutton.js", this); Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this); Services.scriptloader.loadSubScript("chrome://zotero/content/elements/splitMenuButton.js", this); @@ -736,7 +735,6 @@ --> Date: Thu, 23 Mar 2023 13:35:36 -0400 Subject: [PATCH 2/2] Fix the toolbarbutton dropmarker style --- .../content/zotero-platform/mac/overlay.css | 10 --------- .../content/zotero-platform/unix/overlay.css | 6 +++--- .../content/zotero-platform/win/overlay.css | 6 +++++- chrome/content/zotero/platformKeys.js | 21 +++++++++++-------- chrome/skin/default/zotero/overlay.css | 16 ++++++++++++-- 5 files changed, 34 insertions(+), 25 deletions(-) diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index 00bc02330b..d8c075e7ac 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -40,15 +40,6 @@ max-width: 29px; } -.zotero-tb-button[type=menu] > .toolbarbutton-menu-dropmarker { - -moz-default-appearance: none; - background-image: url("chrome://zotero/skin/searchbar-dropmarker.png"); - width: 7px; - height: 4px; - background-repeat: no-repeat; - background-size: 100%; -} - /* A decent hack: reverse the effective order of the dropmarker and icon in RTL mode so that the above CSS, which places the menubutton-start.png background on the toolbarbutton-icon, will make sense. (Otherwise the dropmarker appears @@ -404,7 +395,6 @@ treechildren::-moz-tree-image { @media (min-resolution: 1.25dppx) { .zotero-tb-button,.zotero-tb-button:first-child,.zotero-tb-button:last-child { background: url("chrome://zotero/skin/mac/menubutton-end@2x.png") right center/auto 24px no-repeat; } .zotero-tb-button > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start@2x.png") left center/auto 24px no-repeat; } - .zotero-tb-button[type=menu] > .toolbarbutton-menu-dropmarker { background-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); } .zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window@2x.png") left center/auto 24px no-repeat; } .zotero-tb-button:-moz-window-inactive,.zotero-tb-button:-moz-window-inactive:first-child,.zotero-tb-button:-moz-window-inactive:last-child { background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window@2x.png") right center/auto 24px no-repeat; } .zotero-tb-button[open="true"],.zotero-tb-button:not([disabled="true"]):hover:active { background: url("chrome://zotero/skin/mac/menubutton-end-pressed@2x.png") right center/auto 24px no-repeat; } diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css index 079b039233..8b4b72e699 100644 --- a/chrome/content/zotero-platform/unix/overlay.css +++ b/chrome/content/zotero-platform/unix/overlay.css @@ -8,9 +8,9 @@ } } -/* Dropmarker added automatically on Linux */ -.toolbarbutton-menu-dropmarker { - list-style-image: none; +.zotero-tb-button[type="menu"] > .toolbarbutton-menu-dropmarker { + -moz-default-appearance: toolbarbutton-dropdown; + margin-left: 4px; } .zotero-tb-button:not([type=menu]) { diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css index 61b774f75f..68bbf38796 100644 --- a/chrome/content/zotero-platform/win/overlay.css +++ b/chrome/content/zotero-platform/win/overlay.css @@ -24,6 +24,10 @@ } } +.zotero-tb-button[type="menu"] > .toolbarbutton-menu-dropmarker { + margin-left: 4px; +} + #zotero-tb-sync-error { margin-right: 4px; padding-top: 4px; @@ -151,4 +155,4 @@ tree { .zotero-view-item > tabpanel > vbox { padding-left: 5px; -} \ No newline at end of file +} diff --git a/chrome/content/zotero/platformKeys.js b/chrome/content/zotero/platformKeys.js index 1303c29ecf..8172846597 100644 --- a/chrome/content/zotero/platformKeys.js +++ b/chrome/content/zotero/platformKeys.js @@ -44,15 +44,18 @@ window.addEventListener('DOMContentLoaded', () => { if (MozToolbarbutton) { let originalRender = MozToolbarbutton.prototype.render; MozToolbarbutton.prototype.render = function () { - originalRender(); - this.addEventListener('mousedown', (event) => { - if (!event.defaultPrevented - && !this.disabled - && this.getAttribute('nonnativepopup') != 'true' - && Zotero.Utilities.Internal.showNativeElementPopup(this)) { - event.preventDefault(); - } - }); + originalRender.apply(this); + if (!this._zoteroMouseDownListenerAdded) { + this.addEventListener('mousedown', (event) => { + if (!event.defaultPrevented + && !this.disabled + && this.getAttribute('nonnativepopup') != 'true' + && Zotero.Utilities.Internal.showNativeElementPopup(this)) { + event.preventDefault(); + } + }); + this._zoteroMouseDownListenerAdded = true; + } }; } } diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css index daba3fd480..c8e7fcfe50 100644 --- a/chrome/skin/default/zotero/overlay.css +++ b/chrome/skin/default/zotero/overlay.css @@ -237,6 +237,19 @@ margin-inline-end: 2px; } +.zotero-tb-button[type="menu"] > .toolbarbutton-menu-dropmarker { + -moz-default-appearance: none; + background-image: url("chrome://zotero/skin/searchbar-dropmarker.png"); + width: 7px; + height: 4px; + background-repeat: no-repeat; + background-size: 100%; +} + +.zotero-tb-button[type="menu"] > .toolbarbutton-menu-dropmarker::part(icon) { + display: none; +} + .zotero-tb-button:hover:active { mix-blend-mode: multiply; } @@ -715,8 +728,7 @@ /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */ @media (min-resolution: 1.25dppx) { - #zotero-items-column-hasAttachment { list-style-image: url(chrome://zotero/skin/attach-small@2x.png); } - #zotero-items-column-numNotes { list-style-image: url(chrome://zotero/skin/treeitem-note-small@2x.png); } + .zotero-tb-button[type="menu"] > .toolbarbutton-menu-dropmarker { background-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); } #zotero-tb-collection-add { list-style-image: url('chrome://zotero/skin/toolbar-collection-add@2x.png'); } .zotero-menuitem-new-feed { list-style-image: url('chrome://zotero/skin/toolbar-feed-add@2x.png'); } #zotero-tb-library-add-menu { list-style-image: url('chrome://zotero/skin/library_add@2x.png'); }