Add sidenav#showByDefault option to ItemPaneManager#register

chrome/content/zotero/elements/itemDetails.js

@@ -375,11 +375,13 @@
 		}
 
 		notify = async (action, type, ids, _extraData) => {
-			if (action == 'refresh' && this.item) {
+			if (action == 'refresh') {
 				if (type == 'itempane') {
 					this.renderCustomSections();
 				}
-				await this.render();
+				if (this.item) {
+					await this.render();
+				}
 			}
 
 			if (action == 'select' && type == 'tab') {

chrome/content/zotero/elements/itemPaneSidenav.js

@@ -29,13 +29,13 @@
 	class ItemPaneSidenav extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<html:div class="inherit-flex highlight-notes-inactive">
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-info"
 						data-pane="info"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-abstract"
@@ -47,13 +47,13 @@
 						data-l10n-id="sidenav-attachment-preview"
 						data-pane="attachment-preview"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-attachments"
 						data-pane="attachments"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-notes"
@@ -71,19 +71,19 @@
 						data-l10n-id="sidenav-attachment-annotations"
 						data-pane="attachment-annotations"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-libraries-collections"
 						data-pane="libraries-collections"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-tags"
 						data-pane="tags"/>
 				</html:div>
-				<html:div class="pin-wrapper">
+				<html:div class="pin-wrapper show-by-default">
 					<toolbarbutton
 						disabled="true"
 						data-l10n-id="sidenav-related"
@@ -101,7 +101,7 @@
 			
 			<html:div class="divider"/>
 			
-			<html:div class="pin-wrapper">
+			<html:div class="pin-wrapper show-by-default">
 				<toolbarbutton
 					tooltiptext="&zotero.toolbar.openURL.label;"
 					type="menu"
@@ -297,14 +297,15 @@
 				sidenavOptions = JSON.parse(pane.dataset.sidenavOptions);
 			}
 			catch (e) {}
-			let { icon, darkIcon, l10nID, l10nArgs } = sidenavOptions;
+			let { icon, darkIcon, l10nID, l10nArgs, showByDefault } = sidenavOptions;
 			if (!darkIcon) darkIcon = icon;
 			toolbarbutton = document.createXULElement("toolbarbutton");
 			toolbarbutton.setAttribute("custom", "true");
 			toolbarbutton.dataset.pane = paneID;
 			toolbarbutton.dataset.l10nId = l10nID;
 			toolbarbutton.dataset.l10nArgs = l10nArgs;
-			toolbarbutton.style = `--custom-sidenav-icon-light: url('${icon}'); --custom-sidenav-icon-dark: url('${darkIcon}');`;
+			toolbarbutton.style.setProperty("--custom-sidenav-icon-light", `url('${icon}'`);
+			toolbarbutton.style.setProperty("--custom-sidenav-icon-dark", `url('${darkIcon}'`);
 			toolbarbutton.addEventListener('contextmenu', (event) => {
 				this._contextMenuTarget = paneID;
 				this.querySelector('.zotero-menuitem-pin').hidden = this.pinnedPane == paneID;
@@ -316,6 +317,9 @@
 			let container = document.createElement("div");
 			container.classList.add("pin-wrapper");
 			container.classList.add("pinnable");
+			if (showByDefault) {
+				container.classList.add("show-by-default");
+			}
 			container.append(toolbarbutton);
 			if (this._defaultStatus) toolbarbutton.disabled = true;
 			toolbarbutton.parentElement.hidden = this._defaultStatus || !this.container.getEnabledPane(paneID);
@@ -350,6 +354,7 @@
 
 		toggleDefaultStatus(isDefault) {
 			this._defaultStatus = isDefault;
+			this.classList.toggle("default-status", isDefault);
 			this.renderDefaultStatus();
 		}
 
@@ -357,9 +362,6 @@
 			if (this._defaultStatus) {
 				this.querySelectorAll('toolbarbutton[data-pane]').forEach((elem) => {
 					elem.disabled = true;
-					elem.parentElement.hidden = !(
-						["info", "abstract", "attachments", "notes", "libraries-collections", "tags", "related"]
-							.includes(elem.dataset.pane));
 				});
 
 				this.querySelectorAll('toolbarbutton[data-action]').forEach((elem) => {

chrome/content/zotero/xpcom/itemPaneManager.js

@@ -69,7 +69,9 @@
  * @property {string} paneID - Unique pane ID
  * @property {string} pluginID - Set plugin ID to auto remove section when plugin is disabled/removed
  * @property {SectionL10n & SectionIcon} header - Header options. Icon should be 16*16 and `label` need to be localized
- * @property {SectionL10n & SectionIcon} sidenav - Sidenav options. Icon should be 20*20 and `tooltiptext` need to be localized
+ * @property {SectionL10n & SectionIcon & { showByDefault?: boolean }} sidenav
+ * Sidenav options. Icon should be 20*20 and `tooltiptext` need to be localized
+ * `showByDefault` indicates the button should always show in sidenav's default status, e.g. no/multiple item selected.
  * @property {string} [bodyXHTML] - Pane body's innerHTML, default to XUL namespace
  * @property {(props: SectionInitHookArgs) => void} [onInit]
  * Lifecycle hook called when section is initialized.

scss/elements/_itemPaneSidenav.scss

@@ -112,6 +112,16 @@ item-pane-sidenav {
 			-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
 		}
 	}
+
+	&.default-status {
+		.pin-wrapper {
+			display: none;
+
+			&.show-by-default {
+				display: flex;
+			}
+		}
+	}
 	
 	&:not(.stacked) > .divider {
 		width: 20px;