From 1dd3812e0051e74149e5d073ec7dd7917aecde74 Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Fri, 29 Sep 2023 11:47:24 -0400 Subject: [PATCH] Deprecate setFontSize(), replace with new Zotero.UIProperties This new XPCOM module handles font size and UI density and automatically keeps registered roots up to date when prefs change. Roots receive a UIPropertiesChanged event after their properties are updated. --- chrome/content/scaffold/scaffold.js | 2 +- chrome/content/zotero/advancedSearch.js | 2 +- chrome/content/zotero/bibliography.js | 2 +- chrome/content/zotero/createParentDialog.js | 2 +- chrome/content/zotero/exportOptions.js | 4 +- .../content/zotero/hardConfirmationDialog.js | 2 +- chrome/content/zotero/ingester/selectitems.js | 2 +- chrome/content/zotero/merge.js | 2 +- chrome/content/zotero/note.js | 4 +- chrome/content/zotero/searchDialog.js | 4 +- chrome/content/zotero/selectItemsDialog.js | 4 +- chrome/content/zotero/tagColorChooser.js | 2 +- chrome/content/zotero/xpcom/prefs.js | 12 ++- .../zotero/xpcom/progressQueueDialog.js | 2 +- chrome/content/zotero/xpcom/uiProperties.js | 85 +++++++++++++++++++ .../zotero/xpcom/utilities_internal.js | 25 +----- chrome/content/zotero/zoteroPane.js | 8 +- components/zotero-service.js | 1 + 18 files changed, 116 insertions(+), 49 deletions(-) create mode 100644 chrome/content/zotero/xpcom/uiProperties.js diff --git a/chrome/content/scaffold/scaffold.js b/chrome/content/scaffold/scaffold.js index 3bff2b030d..38f6228b32 100644 --- a/chrome/content/scaffold/scaffold.js +++ b/chrome/content/scaffold/scaffold.js @@ -165,7 +165,7 @@ var Scaffold = new function () { this.initTestsEditor(); // Set font size from general pref - Zotero.setFontSize(document.getElementById('scaffold-pane')); + Zotero.UIProperties.registerRoot(document.getElementById('scaffold-pane')); // Set font size of code editor var size = Zotero.Prefs.get("scaffold.fontSize"); diff --git a/chrome/content/zotero/advancedSearch.js b/chrome/content/zotero/advancedSearch.js index 31990a5642..0cc426585e 100644 --- a/chrome/content/zotero/advancedSearch.js +++ b/chrome/content/zotero/advancedSearch.js @@ -45,7 +45,7 @@ var ZoteroAdvancedSearch = new function() { // Set font size from pref var sbc = document.getElementById('zotero-search-box-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); _searchBox.onLibraryChange = this.onLibraryChange; var io = window.arguments[0]; diff --git a/chrome/content/zotero/bibliography.js b/chrome/content/zotero/bibliography.js index 3498dac6de..b9d629ce28 100644 --- a/chrome/content/zotero/bibliography.js +++ b/chrome/content/zotero/bibliography.js @@ -57,7 +57,7 @@ var Zotero_File_Interface_Bibliography = new function() { // Affects bibliography.xhtml and integrationDocPrefs.xul var bibContainer = document.getElementById("zotero-bibliography-container"); if(bibContainer) { - Zotero.setFontSize(document.getElementById("zotero-bibliography-container")); + Zotero.UIProperties.registerRoot(document.getElementById("zotero-bibliography-container")); } if(window.arguments && window.arguments.length) { diff --git a/chrome/content/zotero/createParentDialog.js b/chrome/content/zotero/createParentDialog.js index cd5448abf9..37321ba4c4 100644 --- a/chrome/content/zotero/createParentDialog.js +++ b/chrome/content/zotero/createParentDialog.js @@ -35,7 +35,7 @@ function toggleAccept(enabled) { function doLoad() { // Set font size from pref let sbc = document.getElementById('zotero-create-parent-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); io = window.arguments[0]; diff --git a/chrome/content/zotero/exportOptions.js b/chrome/content/zotero/exportOptions.js index e3de2cf5fd..e78f51366a 100644 --- a/chrome/content/zotero/exportOptions.js +++ b/chrome/content/zotero/exportOptions.js @@ -45,7 +45,7 @@ var Zotero_File_Interface_Export = new function() { this.init = function () { // Set font size from pref var sbc = document.getElementById('zotero-export-options-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); var addedOptions = new Object(); @@ -286,4 +286,4 @@ var Zotero_File_Interface_Export = new function() { function cancel() { window.arguments[0].selectedTranslator = false; } -} \ No newline at end of file +} diff --git a/chrome/content/zotero/hardConfirmationDialog.js b/chrome/content/zotero/hardConfirmationDialog.js index 758e0c85c3..c53d305a42 100644 --- a/chrome/content/zotero/hardConfirmationDialog.js +++ b/chrome/content/zotero/hardConfirmationDialog.js @@ -31,7 +31,7 @@ Zotero.HardConfirmationDialog = { this.io = window.arguments[0]; - Zotero.setFontSize(document.documentElement); + Zotero.UIProperties.registerRoot(document.documentElement); var dialog = document.getElementById('commonDialog'); var vbox = document.getElementById('infoContainer'); var sep = vbox.firstChild; diff --git a/chrome/content/zotero/ingester/selectitems.js b/chrome/content/zotero/ingester/selectitems.js index efdc762fcb..e2e266b6a8 100644 --- a/chrome/content/zotero/ingester/selectitems.js +++ b/chrome/content/zotero/ingester/selectitems.js @@ -44,7 +44,7 @@ Zotero_Ingester_Interface_SelectItems.init = function () { // Set font size from pref var sbc = document.getElementById('zotero-select-items-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); this.io = window.arguments[0]; var listbox = document.getElementById("zotero-selectitems-links"); diff --git a/chrome/content/zotero/merge.js b/chrome/content/zotero/merge.js index b2d937ecf3..1b44cbedbe 100644 --- a/chrome/content/zotero/merge.js +++ b/chrome/content/zotero/merge.js @@ -48,7 +48,7 @@ var Zotero_Merge_Window = new function () { _wizard.addEventListener('wizardfinish', this.onFinish.bind(this)); // Set font size from pref - Zotero.setFontSize(_wizardPage); + Zotero.UIProperties.registerRoot(_wizardPage); _wizard.getButton('cancel').setAttribute('label', Zotero.getString('sync.cancel')); diff --git a/chrome/content/zotero/note.js b/chrome/content/zotero/note.js index 4520444897..54b1bb5bcd 100644 --- a/chrome/content/zotero/note.js +++ b/chrome/content/zotero/note.js @@ -61,7 +61,7 @@ async function onLoad() { noteEditor.viewMode = 'window'; // Set font size from pref - Zotero.setFontSize(noteEditor); + Zotero.UIProperties.registerRoot(noteEditor); if (itemID) { var ref = await Zotero.Items.getAsync(itemID); @@ -120,4 +120,4 @@ var NotifyCallback = { } addEventListener("load", function(e) { onLoad(e); }, false); -addEventListener("unload", function(e) { onUnload(e); }, false); \ No newline at end of file +addEventListener("unload", function(e) { onUnload(e); }, false); diff --git a/chrome/content/zotero/searchDialog.js b/chrome/content/zotero/searchDialog.js index 1f19522385..08cda5f792 100644 --- a/chrome/content/zotero/searchDialog.js +++ b/chrome/content/zotero/searchDialog.js @@ -33,7 +33,7 @@ function doLoad() { // Set font size from pref var sbc = document.getElementById('zotero-search-box-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); io = window.arguments[0]; @@ -65,4 +65,4 @@ function doAccept() Components.utils.reportError(e); throw (e); } -} \ No newline at end of file +} diff --git a/chrome/content/zotero/selectItemsDialog.js b/chrome/content/zotero/selectItemsDialog.js index f244da2574..700808761a 100644 --- a/chrome/content/zotero/selectItemsDialog.js +++ b/chrome/content/zotero/selectItemsDialog.js @@ -40,7 +40,7 @@ const isAddEditItemsDialog = !!document.querySelector('#zotero-add-citation-dial var doLoad = async function () { // Set font size from pref var sbc = document.getElementById('zotero-select-items-container'); - Zotero.setFontSize(sbc); + Zotero.UIProperties.registerRoot(sbc); io = window.arguments[0]; if(io.wrappedJSObject) io = io.wrappedJSObject; @@ -138,4 +138,4 @@ function onItemSelected() function doAccept() { io.dataOut = itemsView.getSelectedItems(true); -} \ No newline at end of file +} diff --git a/chrome/content/zotero/tagColorChooser.js b/chrome/content/zotero/tagColorChooser.js index d6834a9474..95a95a6047 100644 --- a/chrome/content/zotero/tagColorChooser.js +++ b/chrome/content/zotero/tagColorChooser.js @@ -37,7 +37,7 @@ var Zotero_Tag_Color_Chooser = new function() { try { // Set font size from pref - Zotero.setFontSize(document.getElementById("tag-color-chooser-container")); + Zotero.UIProperties.registerRoot(document.getElementById("tag-color-chooser-container")); if (window.arguments && window.arguments.length) { _io = window.arguments[0]; diff --git a/chrome/content/zotero/xpcom/prefs.js b/chrome/content/zotero/xpcom/prefs.js index fb53f8df75..e3d8376418 100644 --- a/chrome/content/zotero/xpcom/prefs.js +++ b/chrome/content/zotero/xpcom/prefs.js @@ -268,13 +268,11 @@ Zotero.Prefs = new function() { Zotero.Schema.stopRepositoryTimer(); } }], - ["fontSize", function (val) { - Zotero.setFontSize( - Zotero.getActiveZoteroPane().document.getElementById('zotero-pane') - ); - Zotero.setFontSize(Zotero.getActiveZoteroPane().document.getElementById('zotero-context-pane')); - Zotero.getActiveZoteroPane().collectionsView && Zotero.getActiveZoteroPane().collectionsView.updateFontSize(); - Zotero.getActiveZoteroPane().itemsView && Zotero.getActiveZoteroPane().itemsView.updateFontSize(); + ["fontSize", function () { + Zotero.UIProperties.setAll(); + }], + ["uiDensity", function () { + Zotero.UIProperties.setAll(); }], ["recursiveCollections", function() { Zotero.getActiveZoteroPane().itemsView.refreshAndMaintainSelection(); diff --git a/chrome/content/zotero/xpcom/progressQueueDialog.js b/chrome/content/zotero/xpcom/progressQueueDialog.js index cd2dd89b56..ea38dc824c 100644 --- a/chrome/content/zotero/xpcom/progressQueueDialog.js +++ b/chrome/content/zotero/xpcom/progressQueueDialog.js @@ -84,7 +84,7 @@ Zotero.ProgressQueueDialog = function (progressQueue) { function _onWindowLoaded() { var rootElement = _progressWindow.document.getElementById('zotero-progress-box'); - Zotero.setFontSize(rootElement); + Zotero.UIProperties.registerRoot(rootElement); _progressIndicator = _progressWindow.document.getElementById('progress-indicator'); _progressWindow.document.getElementById('cancel-button') diff --git a/chrome/content/zotero/xpcom/uiProperties.js b/chrome/content/zotero/xpcom/uiProperties.js new file mode 100644 index 0000000000..285fbd3ea6 --- /dev/null +++ b/chrome/content/zotero/xpcom/uiProperties.js @@ -0,0 +1,85 @@ +/* + ***** BEGIN LICENSE BLOCK ***** + + Copyright © 2023 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 ***** +*/ + +Zotero.UIProperties = new class { + _roots = new Set(); + + registerRoot(root) { + if (root.nodeType !== Node.ELEMENT_NODE) { + throw new Error('Root must be an element'); + } + + this._roots.add(new WeakRef(root)); + this.set(root); + } + + setAll() { + for (let rootRef of this._roots) { + let root = rootRef.deref(); + if (!root) { + this._roots.delete(rootRef); + continue; + } + this.set(root); + } + } + + set(root) { + this._setFontSize(root); + this._setUIDensity(root); + root.dispatchEvent(new Event('UIPropertiesChanged', { bubbles: false })); + } + + _setFontSize(root) { + let size = Zotero.Prefs.get('fontSize'); + root.style.fontSize = root.style['--zotero-font-size'] = size + 'em'; + if (size <= 1) { + size = 'small'; + } + else if (size <= 1.15) { + size = 'medium'; + } + else if (size <= 1.3) { + size = 'large'; + } + else { + size = 'x-large'; + } + // Custom attribute -- allows for additional customizations in zotero.css + root.setAttribute('zoteroFontSize', size); + if (Zotero.rtl) { + root.setAttribute('dir', 'rtl'); + } + else { + root.removeAttribute('dir'); + } + } + + _setUIDensity(root) { + let density = Zotero.Prefs.get('uiDensity'); + root.style.setProperty('--zotero-ui-density', density); + root.setAttribute('zoteroUIDensity', density); + } +}; diff --git a/chrome/content/zotero/xpcom/utilities_internal.js b/chrome/content/zotero/xpcom/utilities_internal.js index ac7a57c5dc..30ae8f833b 100644 --- a/chrome/content/zotero/xpcom/utilities_internal.js +++ b/chrome/content/zotero/xpcom/utilities_internal.js @@ -1876,30 +1876,9 @@ Zotero.Utilities.Internal = { return returns; }, - /* - * Sets font size based on prefs -- intended for use on root element - * (zotero-pane, note window, etc.) - */ setFontSize: function (rootElement) { - var size = Zotero.Prefs.get('fontSize'); - rootElement.style.fontSize = rootElement.style['--zotero-font-size'] = size + 'em'; - if (size <= 1) { - size = 'small'; - } - else if (size <= 1.15) { - size = 'medium'; - } - else if (size <= 1.3) { - size = 'large'; - } - else { - size = 'x-large'; - } - // Custom attribute -- allows for additional customizations in zotero.css - rootElement.setAttribute('zoteroFontSize', size); - if (Zotero.rtl) { - rootElement.setAttribute('dir', 'rtl'); - } + Zotero.debug("setFontSize() is deprecated -- use Zotero.UIProperties"); + Zotero.UIProperties.set(rootElement); }, getAncestorByTagName: function (elem, tagName){ diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index 41433f281f..3b3c3ead7d 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -103,8 +103,12 @@ var ZoteroPane = new function() _loaded = true; var zp = document.getElementById('zotero-pane'); - Zotero.setFontSize(zp); - Zotero.setFontSize(document.getElementById('zotero-context-pane')); + Zotero.UIProperties.registerRoot(zp); + zp.addEventListener('UIPropertiesChanged', () => { + this.collectionsView?.updateFontSize(); + this.itemsView?.updateFontSize(); + }); + Zotero.UIProperties.registerRoot(document.getElementById('zotero-context-pane')); ZoteroPane_Local.updateLayout(); ZoteroPane_Local.updateToolbarPosition(); this.updateWindow(); diff --git a/components/zotero-service.js b/components/zotero-service.js index 2990e81241..f467b5f4d7 100644 --- a/components/zotero-service.js +++ b/components/zotero-service.js @@ -63,6 +63,7 @@ const xpcomFilesAll = [ 'translation/translate_firefox', 'isbn', 'preferencePanes', + 'uiProperties', ]; /** XPCOM files to be loaded only for local translation and DB access **/