Right pane (item-pane) can be collapsed

This belongs to issue #509 and was asked several times in the forum.

 * Add attribute `collapse="after"` to the splitter and add a grippy element.
 * To remember its state after restart I copied `zotero-persist="state"`.
 * Handle zotero-items-splitter the same as zotero-collections-splitter in zotero-platform/mac/overlay.css
 * Change min-width to 250px for #zotero-item-pane in zotero/overlay.css.
 * Update the function `updateToolbarPosition` in zotero/zoteroPane.js:
   * The width of the items-toolbar is corrected if the left pane is collapsed (and the icons are grouped on the left margin together).
   * If the right pane is collapsed, then the items-toolbar is made flexible while making the item-toolbar unflexible. As a result the search box and locate icon are flushed right to the other icons.

chrome/content/zotero-platform/mac/overlay.css

@@ -255,7 +255,7 @@
 	background-color: #8b8b8b !important;
 }
 
-#zotero-collections-splitter[state=collapsed]
+#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed]
 {
 	border-right: 1px;
 	border-color: #A5A5A5;
@@ -267,7 +267,7 @@
 	padding: 0;
 }
 
-#zotero-collections-splitter[state=collapsed] > grippy
+#zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy
 {
 	-moz-appearance: none;
 	background-image: url("chrome://zotero/skin/mac/vgrippy.png");
@@ -297,7 +297,7 @@
 	height: 8px;
 }
 
-#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover
+#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover, #zotero-items-splitter  > grippy:hover
 {
 	background-color:transparent;
 }

chrome/content/zotero/zoteroPane.js

@@ -4100,18 +4100,51 @@ var ZoteroPane = new function()
 	 */
 	this.updateToolbarPosition = function() {
 		if(document.getElementById("zotero-pane-stack").hidden) return;
-		const PANES = ["collections", "items"];
-		for each(var paneName in PANES) {
-			var pane = document.getElementById("zotero-"+paneName+"-pane");
-			var splitter = document.getElementById("zotero-"+paneName+"-splitter");
-			var toolbar = document.getElementById("zotero-"+paneName+"-toolbar");
 		
-			var paneComputedStyle = window.getComputedStyle(pane, null);
+		var collectionsPane = document.getElementById("zotero-collections-pane");
-			var splitterComputedStyle = window.getComputedStyle(splitter, null);
+		var collectionsToolbar = document.getElementById("zotero-collections-toolbar");
+		var collectionsSplitter = document.getElementById("zotero-collections-splitter");
+		var itemsPane = document.getElementById("zotero-items-pane");
+		var itemsToolbar = document.getElementById("zotero-items-toolbar");
+		var itemsSplitter = document.getElementById("zotero-items-splitter");
+		var itemPane = document.getElementById("zotero-item-pane");
+		var itemToolbar = document.getElementById("zotero-item-toolbar");
 		
-			toolbar.style.width = paneComputedStyle.getPropertyValue("width");
+		var collectionsPaneComputedStyle = window.getComputedStyle(collectionsPane, null);
-			toolbar.style.marginRight = splitterComputedStyle.getPropertyValue("width");
+		var collectionsSplitterComputedStyle = window.getComputedStyle(collectionsSplitter, null);
+		var itemsPaneComputedStyle = window.getComputedStyle(itemsPane, null);
+		var itemsSplitterComputedStyle = window.getComputedStyle(itemsSplitter, null);
+		var itemPaneComputedStyle = window.getComputedStyle(itemPane, null);
+		
+		var collectionsPaneWidth = collectionsPaneComputedStyle.getPropertyValue("width");
+		var collectionsSplitterWidth = collectionsSplitterComputedStyle.getPropertyValue("width");
+		var itemsPaneWidth = itemsPaneComputedStyle.getPropertyValue("width");
+		var itemsSplitterWidth = itemsSplitterComputedStyle.getPropertyValue("width");
+		var itemPaneWidth = itemPaneComputedStyle.getPropertyValue("width");
+		
+		collectionsToolbar.style.width = collectionsPaneWidth;
+		collectionsToolbar.style.marginRight = collectionsSplitterWidth;
+		itemsToolbar.style.marginRight = itemsSplitterWidth;
+		
+		var itemsToolbarWidthNumber = parseInt(itemsPaneWidth, 10);
+
+		if (collectionsPane.collapsed) {
+			var collectionsToolbarComputedStyle = window.getComputedStyle(collectionsToolbar, null);
+			var collectionsToolbarWidth = collectionsToolbarComputedStyle.getPropertyValue("width");// real width (nonzero) after the new definition
+			itemsToolbarWidthNumber = itemsToolbarWidthNumber-parseInt(collectionsToolbarWidth, 10);
 		}
+
+		if (itemPane.collapsed) {
+		// Then the itemsToolbar and itemToolbar share the same space, and it seems best to use some flex attribute from right (because there might be other icons appearing or vanishing).
+			itemsToolbar.style.removeProperty('width');
+			itemsToolbar.setAttribute("flex", "1");
+			itemToolbar.setAttribute("flex", "0");
+		} else {
+ 			itemsToolbar.style.width = itemsToolbarWidthNumber + "px";
+			itemsToolbar.setAttribute("flex", "0");
+			itemToolbar.setAttribute("flex", "1");
+		}
+
 	}
 	
 	/**

chrome/content/zotero/zoteroPane.xul

@@ -538,9 +538,11 @@
 					</deck>
 				</vbox>
 				
-				<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest"
+				<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" zotero-persist="state"
 					onmousemove="ZoteroPane_Local.updateToolbarPosition()"
-					oncommand="ZoteroPane_Local.updateToolbarPosition()"/>
+					oncommand="ZoteroPane_Local.updateToolbarPosition()">
+					<grippy id="zotero-items-grippy"/>
+				</splitter>
 				
 				<!-- itemPane.xul -->
 				<vbox id="zotero-item-pane"/>

chrome/skin/default/zotero/overlay.css

@@ -222,7 +222,7 @@
 #zotero-item-pane
 {
 	width: 338px;
-	min-width: 338px;
+	min-width: 250px;
 }
 
 #zotero-pane .toolbar