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

@@ -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");

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];

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

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];
 

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();
 		

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;

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");

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'));
 		

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);

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];
 	

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;

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];

chrome/content/zotero/xpcom/prefs.js

@@ -268,13 +268,11 @@ Zotero.Prefs = new function() {
 				Zotero.Schema.stopRepositoryTimer();
 			}
 		}],
-		["fontSize", function (val) {
+		["fontSize", function () {
-			Zotero.setFontSize(
+			Zotero.UIProperties.setAll();
-				Zotero.getActiveZoteroPane().document.getElementById('zotero-pane')
+		}],
-			);
+		["uiDensity", function () {
-			Zotero.setFontSize(Zotero.getActiveZoteroPane().document.getElementById('zotero-context-pane'));
+			Zotero.UIProperties.setAll();
-			Zotero.getActiveZoteroPane().collectionsView && Zotero.getActiveZoteroPane().collectionsView.updateFontSize();
-			Zotero.getActiveZoteroPane().itemsView && Zotero.getActiveZoteroPane().itemsView.updateFontSize();
 		}],
 		["recursiveCollections", function() {
 			Zotero.getActiveZoteroPane().itemsView.refreshAndMaintainSelection();

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')

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 <http://www.gnu.org/licenses/>.
+	
+	***** 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);
+	}
+};

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');
+		Zotero.debug("setFontSize() is deprecated -- use Zotero.UIProperties");
-		rootElement.style.fontSize = rootElement.style['--zotero-font-size'] = size + 'em';
+		Zotero.UIProperties.set(rootElement);
-		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');
-		}
 	},
 
 	getAncestorByTagName: function (elem, tagName){

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.UIProperties.registerRoot(zp);
-		Zotero.setFontSize(document.getElementById('zotero-context-pane'));
+		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();

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 **/