Add disableFontSizeScaling prop to HTML tree (#2155)

Removes `defaultRowHeight` prop added in adb8aa39f in favor of a prop
that disables font size scaling. A non-default row height can still be
specified with `rowHeight`.

Most of our existing trees need to disable font size scaling, but the
idea is that pretty much everything _should_ scale with font size for
accessibility, and it's a limitation of the current prefs and other UIs
that they don't currently, so it's better to default to scaling and
gradually remove uses of this prop.

This fixes a bug where the HTML trees other than the collection and item
trees would have larger rows but without larger text when font size was
increased.

Also:

- Fixes #2157 by fixing line height adjustment on macOS when at the
  default font size, applying it to all trees, and moving the explicit
  `rowHeight` override from the item tree to the collection tree, which
  should have more spacing than all other trees (rather than the item tree
  having less).

chrome/content/zotero/collectionTree.jsx

@@ -373,6 +373,8 @@ var CollectionTree = class CollectionTree extends LibraryTree {
 				ref: ref => this.tree = ref,
 				treeboxRef: ref => this._treebox = ref,
 				renderItem: this.renderItem,
+				// Extra space on macOS (which gets reduced by 2, so this really means 20)
+				...(Zotero.isMac && { rowHeight: 22 }),
 
 				onSelectionChange: this._handleSelectionChange,
 				isSelectable: this.isSelectable,

chrome/content/zotero/components/virtualized-table.jsx

@@ -290,15 +290,15 @@ class VirtualizedTable extends React.Component {
 		
 		this._columns = new Columns(this);
 		
-		this._rowHeight = props.rowHeight;
-		if (!this._rowHeight) {
-			this._rowHeight = props.defaultRowHeight || DEFAULT_ROW_HEIGHT;
+		this._rowHeight = props.rowHeight || DEFAULT_ROW_HEIGHT;
+		if (!props.disableFontSizeScaling) {
 			this._rowHeight *= Zotero.Prefs.get('fontSize');
-			if (Zotero.isMac && this._rowHeight > (props.defaultRowHeight || DEFAULT_ROW_HEIGHT)) {
-				this._rowHeight -= 2;
-			}
 		}
-			
+		// A bit less row spacing on macOS
+		if (Zotero.isMac && this._rowHeight >= (props.rowHeight || DEFAULT_ROW_HEIGHT)) {
+			this._rowHeight -= 2;
+		}
+		
 		this.selection = new TreeSelection(this);
 		
 
@@ -367,6 +367,8 @@ class VirtualizedTable extends React.Component {
 		
 		renderItem: PropTypes.func,
 		rowHeight: PropTypes.number,
+		// Use rowHeight or default row height without adjusting for current UI font size
+		disableFontSizeScaling: PropTypes.bool,
 		// An array of two elements for alternating row colors
 		alternatingRowColors: PropTypes.array,
 		// For screen-readers
@@ -1058,16 +1060,17 @@ class VirtualizedTable extends React.Component {
 	}
 	
 	updateFontSize = () => {
-		if (typeof this.props.rowHeight == 'number') {
-			Zotero.debug("Attempting to update virtualized-table font size with a prop-specified rowHeight."
-				+ "You should change the prop on the React component instead");
+		if (this.props.disableFontSizeScaling) {
+			Zotero.warn("Attempting to update font size on a VirtualizedTable with a font scaling "
+				+ "disabled. Change the prop instead.");
+			return;
 		}
-		this._rowHeight = this.props.defaultRowHeight || DEFAULT_ROW_HEIGHT;
+		this._rowHeight = this.props.rowHeight || DEFAULT_ROW_HEIGHT;
 		this._rowHeight *= Zotero.Prefs.get('fontSize');
-		if (Zotero.isMac && this._rowHeight > (this.props.defaultRowHeight || DEFAULT_ROW_HEIGHT)) {
+		if (Zotero.isMac && this._rowHeight >= (this.props.rowHeight || DEFAULT_ROW_HEIGHT)) {
 			this._rowHeight -= 2;
 		}
-
+		
 		if (!this._jsWindow) return;
 		this._jsWindow.update(this._getWindowedListOptions());
 		this._setAlternatingRows();

chrome/content/zotero/itemTree.jsx

@@ -1130,7 +1130,6 @@ var ItemTree = class ItemTree extends LibraryTree {
 					hide: showMessage,
 					key: "virtualized-table",
 					label: Zotero.getString('pane.items.title'),
-					defaultRowHeight: 18, // px
 					alternatingRowColors: Zotero.isMac ? ['-moz-OddTreeRow', '-moz-EvenTreeRow'] : null,
 
 					showHeader: true,

chrome/content/zotero/locateManager.jsx

@@ -50,6 +50,7 @@ function init() {
 				showHeader={true}
 				multiSelect={true}
 				columns={columns}
+				disableFontSizeScaling={true}
 				onActivate={handleActivate}
 			/>
 		</IntlProvider>

chrome/content/zotero/preferences/preferences_cite.jsx

@@ -126,6 +126,7 @@ Zotero_Preferences.Cite = {
 						multiSelect={true}
 						columns={columns}
 						staticColumns={true}
+						disableFontSizeScaling={true}
 						onSelectionChange={() => document.getElementById('styleManager-delete').disabled = undefined}
 						onKeyDown={handleKeyDown}
 					/>

chrome/content/zotero/preferences/preferences_export.jsx

@@ -301,6 +301,7 @@ Zotero_Preferences.Export = {
 						showHeader={true}
 						columns={columns}
 						staticColumns={true}
+						disableFontSizeScaling={true}
 						onSelectionChange={() => Zotero_Preferences.Export.enableQuickCopySiteButtons()}
 						onKeyDown={handleKeyDown}
 						onActivate={(event, indices) => Zotero_Preferences.Export.showQuickCopySiteEditor()}

chrome/content/zotero/preferences/preferences_sync.jsx

@@ -319,6 +319,7 @@ Zotero_Preferences.Sync = {
 					showHeader={true}
 					columns={columns}
 					staticColumns={true}
+					disableFontSizeScaling={true}
 					onActivate={Zotero_Preferences.Sync.toggleLibraryToSync.bind(this)}
 					onKeyDown={handleKeyDown}
 				/>

chrome/content/zotero/progressQueueDialog.jsx

@@ -101,6 +101,7 @@ function _init() {
 				renderItem={_rowToTreeItem}
 				showHeader={true}
 				columns={tableColumns}
+				disableFontSizeScaling={true}
 				onActivate={_handleActivate}
 			/>
 		</IntlProvider>

chrome/content/zotero/rtfScan.jsx

@@ -775,6 +775,7 @@ var Zotero_RTFScan = new function() {
 					renderItem={this._renderItem}
 					showHeader={true}
 					columns={columns}
+					disableFontSizeScaling={true}
 				/>
 			</IntlProvider>
 		);