Move context pane toggle into reader toolbar

Related #3648

chrome/content/zotero/contextPane.js

@@ -46,6 +46,7 @@ var ZoteroContextPane = new function () {
 	this.update = _update;
 	this.getActiveEditor = _getActiveEditor;
 	this.focus = _focus;
+	this.togglePane = _togglePane;
 
 	this.init = function () {
 		if (!Zotero) {
@@ -335,7 +336,7 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.add('stacked');
 			_contextPane.classList.remove('standard');
 			_sidenav.classList.add('stacked');
-			_contextPaneInner.after(_sidenav);
+			_contextPaneInner.append(_sidenav);
 		}
 		else {
 			_contextPaneSplitter.setAttribute('hidden', false);
@@ -344,14 +345,16 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.add('standard');
 			_contextPane.classList.remove('stacked');
 			_sidenav.classList.remove('stacked');
-			_contextPane.after(_sidenav);
+			_contextPane.append(_sidenav);
 		}
 		
 		if (Zotero_Tabs.selectedIndex > 0) {
-			var height = 0;
-			if (Zotero.Prefs.get('layout') == 'stacked'
-				&& _contextPane.getAttribute('collapsed') != 'true') {
-				height = _contextPaneInner.getBoundingClientRect().height;
+			var height = null;
+			if (Zotero.Prefs.get('layout') == 'stacked') {
+				height = 0;
+				if (_contextPane.getAttribute('collapsed') != 'true') {
+					height = _contextPaneInner.getBoundingClientRect().height;
+				}
 			}
 			Zotero.Reader.setBottomPlaceholderHeight(height);
 		}
@@ -361,24 +364,19 @@ var ZoteroContextPane = new function () {
 		_sidenav.showPendingPane();
 	}
 
-	function _togglePane(paneIndex) {
+	function _togglePane() {
 		var splitter = Zotero.Prefs.get('layout') == 'stacked'
 			? _contextPaneSplitterStacked : _contextPaneSplitter;
 
-		var isOpen = splitter.getAttribute('state') != 'collapsed';
-		var hide = false;
-		var currentPane = _panesDeck.selectedIndex;
-		if (isOpen && currentPane == paneIndex) {
-			hide = true;
-		}
-		else {
-			_panesDeck.setAttribute('selectedIndex', paneIndex);
+		var open = true;
+		if (splitter.getAttribute('state') != 'collapsed') {
+			open = false;
 		}
 		
-		splitter.setAttribute('state', hide ? 'collapsed' : 'open');
+		splitter.setAttribute('state', open ? 'open' : 'collapsed');
 		_update();
 
-		if (!hide) {
+		if (open) {
 			ZoteroContextPane.focus();
 		}
 	}

chrome/content/zotero/elements/itemPaneSidenav.js

@@ -189,8 +189,7 @@
 		}
 		
 		get _showCollapseButton() {
-			// Only show in reader
-			return !!this._contextNotesPane;
+			return false;
 		}
 		
 		get _collapsed() {

chrome/content/zotero/xpcom/reader.js

@@ -497,6 +497,12 @@ class ReaderInstance {
 					await this.reload();
 					this._internalReader.unfreeze();
 				}
+			},
+			onToggleContextPane: () => {
+				Zotero.debug('toggle context pane')
+				let win = Zotero.getMainWindow();
+				win.ZoteroContextPane.togglePane();
+
 			}
 		}, this._iframeWindow, { cloneFunctions: true }));
 

chrome/content/zotero/zoteroPane.xhtml

@@ -1325,11 +1325,10 @@
 							>
 								<grippy/>
 							</splitter>
-							<hbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
+							<vbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
 						</vbox>
+						<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 					</box>
-					
-					<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 
 					<popupset>
 						<menupopup id="context-pane-add-child-note-button-popup">

scss/abstracts/_variables.scss

@@ -110,4 +110,5 @@ $tagColorsLookup: (
 $min-width-collections-pane: 200px;
 $min-width-items-pane: 370px;
 $min-width-item-pane: 300px;
+$min-width-context-pane: 340px;
 $width-sidenav: 37px;

scss/components/_contextPane.scss

@@ -4,7 +4,7 @@
 
 #zotero-context-pane {
 	display: flex;
-	min-width: $min-width-item-pane;
+	min-width: $min-width-context-pane;
 
 	.divider {
 		border-bottom: 1px solid var(--fill-quinary);