From 6bff554976998deb4728acd224d85e8cb44ed1e5 Mon Sep 17 00:00:00 2001
From: LinuxMercedes <LinuxMercedes@gmail.com>
Date: Fri, 27 May 2016 19:57:29 -0500
Subject: [PATCH] Add a second horizontal layout to Zotero for small screens
 (#1010)

---
 .../content/zotero-platform/mac/overlay.css   |  32 +-
 chrome/content/zotero/itemPane.xul            |   2 +-
 .../preferences/preferences_general.xul       |  11 +
 chrome/content/zotero/xpcom/zotero.js         |   3 +
 chrome/content/zotero/zoteroPane.js           |  69 +--
 chrome/content/zotero/zoteroPane.xul          | 425 +++++++++---------
 chrome/locale/en-US/zotero/preferences.dtd    |   3 +
 chrome/skin/default/zotero/overlay.css        |  11 +
 defaults/preferences/zotero.js                |   1 +
 9 files changed, 308 insertions(+), 249 deletions(-)

diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css
index f31f07f5f8..40995cc265 100644
--- a/chrome/content/zotero-platform/mac/overlay.css
+++ b/chrome/content/zotero-platform/mac/overlay.css
@@ -302,20 +302,44 @@
 	-moz-appearance: none;
 	-moz-border-start: none !important;
 	-moz-border-end: none !important;
+	background-color: #8b8b8b !important;
+}
+
+#zotero-collections-splitter, #zotero-items-splitter[orient=horizontal]
+{
 	max-width: 1px !important;
 	min-width: 1px !important;
 	width: 1px !important;
-	background-color: #8b8b8b !important;
+}
+
+#zotero-items-splitter[orient=vertical]
+{
+	max-height: 1px !important;
+	min-height: 1px !important;
+	height: 1px !important;
 }
 
 #zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed] {
 	border: 0 solid #d6d6d6 !important;
+	padding: 0;
+}
+
+#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed][orient=horizontal]
+{
+	background-image: url("chrome://zotero/skin/mac/vsplitter.png");
+	background-repeat: repeat-y;
 	max-width: 8px !important;
 	min-width: 8px !important;
 	width: 8px !important;
-	background-image: url("chrome://zotero/skin/mac/vsplitter.png");
-	background-repeat: repeat-y;
-	padding: 0;
+}
+
+#zotero-items-splitter[state=collapsed][orient=vertical]
+{
+	background-image: url("chrome://zotero/skin/mac/hsplitter.png");
+	background-repeat: repeat-x;
+	max-height: 8px !important;
+	min-height: 8px !important;
+	height: 8px !important;
 }
 
 #zotero-collections-splitter[state=collapsed] {
diff --git a/chrome/content/zotero/itemPane.xul b/chrome/content/zotero/itemPane.xul
index c3a64a8833..19a73c323a 100644
--- a/chrome/content/zotero/itemPane.xul
+++ b/chrome/content/zotero/itemPane.xul
@@ -32,7 +32,7 @@
 	<script src="include.js"/>
 	<script src="itemPane.js" type="application/javascript;version=1.8"/>
 	
-	<vbox id="zotero-item-pane" zotero-persist="width">
+	<vbox id="zotero-item-pane" zotero-persist="width height" flex="1">
 		<!-- Trash -->
 		<hbox id="zotero-item-pane-top-buttons-trash" class="zotero-item-pane-top-buttons" hidden="true">
 			<button id="zotero-item-restore-button" label="&zotero.items.menu.restoreToLibrary;"
diff --git a/chrome/content/zotero/preferences/preferences_general.xul b/chrome/content/zotero/preferences/preferences_general.xul
index ec5347cd92..0776e9bbbb 100644
--- a/chrome/content/zotero/preferences/preferences_general.xul
+++ b/chrome/content/zotero/preferences/preferences_general.xul
@@ -32,6 +32,7 @@
 		
 		<preferences id="zotero-prefpane-general-preferences">
 			<preference id="pref-fontSize" name="extensions.zotero.fontSize" type="string"/>
+			<preference id="pref-layout" name="extensions.zotero.layout" type="string"/>
 			<preference id="pref-automaticScraperUpdates" name="extensions.zotero.automaticScraperUpdates" type="bool"/>
 			<preference id="pref-reportTranslationFailure" name="extensions.zotero.reportTranslationFailure" type="bool"/>
 			<preference id="pref-automaticSnapshots" name="extensions.zotero.automaticSnapshots" type="bool"/>
@@ -56,6 +57,16 @@
 				</columns>
 			
 				<rows id="zotero-prefpane-general-rows">
+					<row>
+						<hbox align="center">
+							<label value="&zotero.preferences.layout;" control="layout"/>
+						</hbox>
+						<radiogroup id="layout" orient="horizontal" align="center" preference="pref-layout">
+							<radio id="horizontal" label="&zotero.preferences.layout.standard;" value="standard"/>
+							<radio id="vertical" label="&zotero.preferences.layout.stacked;" value="stacked"/>
+						</radiogroup>
+					</row>
+
 					<row>
 						<hbox align="center">
 							<label value="&zotero.preferences.fontSize;" control="fontSize"/>
diff --git a/chrome/content/zotero/xpcom/zotero.js b/chrome/content/zotero/xpcom/zotero.js
index b23906b7a6..32eaa2a943 100644
--- a/chrome/content/zotero/xpcom/zotero.js
+++ b/chrome/content/zotero/xpcom/zotero.js
@@ -2328,6 +2328,9 @@ Zotero.Prefs = new function(){
 				Zotero.Schema.stopRepositoryTimer();
 			}
 		}],
+		[ "layout", function(val) {
+			Zotero.getActiveZoteroPane().updateLayout();
+		}],
 		[ "note.fontSize", function(val) {
 			if (val < 6) {
 				Zotero.Prefs.set('note.fontSize', 11);
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index 8e4227b93e..0908c56b6e 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -93,6 +93,7 @@ var ZoteroPane = new function()
 		
 		var zp = document.getElementById('zotero-pane');
 		Zotero.setFontSize(zp);
+		ZoteroPane_Local.updateLayout();
 		ZoteroPane_Local.updateToolbarPosition();
 		window.addEventListener("resize", ZoteroPane_Local.updateToolbarPosition, false);
 		window.setTimeout(ZoteroPane_Local.updateToolbarPosition, 0);
@@ -375,6 +376,7 @@ var ZoteroPane = new function()
 		_madeVisible = true;
 		
 		this.unserializePersist();
+		this.updateLayout();
 		this.updateToolbarPosition();
 		this.updateTagSelectorSize();
 		
@@ -4578,7 +4580,24 @@ var ZoteroPane = new function()
 		var browserWindow = wm.getMostRecentWindow("navigator:browser");
 		if(browserWindow.ZoteroOverlay) browserWindow.ZoteroOverlay.toggleTab();
 	}
-	
+
+	/**
+	 * Sets the layout to either a three-vertical-pane layout and a layout where itemsPane is above itemPane
+	 */
+	this.updateLayout = function() {
+		var layoutSwitcher = document.getElementById("zotero-layout-switcher");
+		var itemsSplitter = document.getElementById("zotero-items-splitter");
+
+		if(Zotero.Prefs.get("layout") === "stacked") { // itemsPane above itemPane
+			layoutSwitcher.setAttribute("orient", "vertical");
+			itemsSplitter.setAttribute("orient", "vertical");
+		} else {  // three-vertical-pane
+			layoutSwitcher.setAttribute("orient", "horizontal");
+			itemsSplitter.setAttribute("orient", "horizontal");
+		}
+
+		this.updateToolbarPosition();
+	}
 	/**
 	 * Shows the Zotero pane, making it visible if it is not and switching to the appropriate tab
 	 * if necessary.
@@ -4607,7 +4626,7 @@ var ZoteroPane = new function()
 			var elValues = serializedValues[id];
 			for(var attr in elValues) {
 				// TEMP: For now, ignore persisted collapsed state for item pane splitter
-				if (el.id == 'zotero-items-splitter') continue;
+				if (el.id == 'zotero-items-splitter' && attr == 'state') continue;
 				// And don't restore to min-width if splitter was collapsed
 				if (el.id == 'zotero-item-pane' && attr == 'width' && elValues[attr] == 250
 						&& 'zotero-items-splitter' in serializedValues
@@ -4650,48 +4669,32 @@ var ZoteroPane = new function()
 	 * Moves around the toolbar when the user moves around the pane
 	 */
 	this.updateToolbarPosition = function() {
-		if(document.getElementById("zotero-pane-stack").hidden) return;
-		
+		var paneStack = document.getElementById("zotero-pane-stack");
+		if(paneStack.hidden) return;
+
+		var stackedLayout = Zotero.Prefs.get("layout") === "stacked";
+
 		var collectionsPane = document.getElementById("zotero-collections-pane");
 		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");
 		
-		var collectionsPaneComputedStyle = window.getComputedStyle(collectionsPane, null);
-		var collectionsSplitterComputedStyle = window.getComputedStyle(collectionsSplitter, null);
-		var itemsPaneComputedStyle = window.getComputedStyle(itemsPane, null);
-		var itemsSplitterComputedStyle = window.getComputedStyle(itemsSplitter, null);
-		var itemPaneComputedStyle = window.getComputedStyle(itemPane, null);
+		collectionsToolbar.style.width = collectionsPane.boxObject.width + 'px';
 		
-		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');
+		if (stackedLayout || itemPane.collapsed) {
+		// 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.setAttribute("flex", "1");
 			itemToolbar.setAttribute("flex", "0");
 		} else {
- 			itemsToolbar.style.width = itemsToolbarWidthNumber + "px";
+			var itemsToolbarWidth = itemsPane.boxObject.width;
+
+			if (collectionsPane.collapsed) {
+				itemsToolbarWidth -= collectionsToolbar.boxObject.width;
+			}
+
+			itemsToolbar.style.width = itemsToolbarWidth + "px";
 			itemsToolbar.setAttribute("flex", "0");
 			itemToolbar.setAttribute("flex", "1");
 		}
diff --git a/chrome/content/zotero/zoteroPane.xul b/chrome/content/zotero/zoteroPane.xul
index 20b95a94b9..b7c7aec9f0 100644
--- a/chrome/content/zotero/zoteroPane.xul
+++ b/chrome/content/zotero/zoteroPane.xul
@@ -248,6 +248,7 @@
 						</tooltip>
 					</toolbarbutton>
 					<toolbarseparator id="zotero-fullscreen-close-separator" class="standalone-no-display"/>
+
 					<toolbarbutton id="zotero-tb-fullscreen" tooltiptext="&zotero.toolbar.tab.tooltip;" oncommand="ZoteroPane_Local.toggleTab();" class="zotero-tb-button standalone-no-display"/>
 					<toolbarbutton id="zotero-close-button" class="tabs-closebutton close-icon standalone-no-display" oncommand="ZoteroOverlay.toggleDisplay()"/>
 				</hbox>
@@ -357,218 +358,220 @@
 					<grippy id="zotero-collections-grippy"/>
 				</splitter>
 				
-				<vbox id="zotero-items-pane" zotero-persist="width" flex="1">
-					<deck id="zotero-items-pane-content" selectedIndex="0" flex="1">
-						<!-- Key navigation is handled by listener in itemTreeView.js -->
-						<tree 
-							id="zotero-items-tree"
-							enableColumnDrag="true"
-							disableKeyNavigation="true"
-							onfocus="if (ZoteroPane_Local.itemsView.rowCount &amp;&amp; !ZoteroPane_Local.itemsView.selection.count) { ZoteroPane_Local.itemsView.selection.select(0); }"
-							onkeydown="ZoteroPane_Local.handleKeyDown(event, this.id)"
-							onselect="ZoteroPane_Local.itemSelected(event)"
-							oncommand="ZoteroPane_Local.serializePersist()"
-							flex="1">
-							<treecols id="zotero-items-columns-header">
-								<treecol
-									id="zotero-items-column-title" primary="true"
-									label="&zotero.items.title_column;"
-									flex="4" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-firstCreator"
-									label="&zotero.items.creator_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-itemType" hidden="true"
-									label="&zotero.items.type_column;"
-									width="40" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-date" hidden="true"
-									label="&zotero.items.date_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-year" hidden="true"
-									label="&zotero.items.year_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-publisher" hidden="true"
-									label="&zotero.items.publisher_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-publicationTitle" hidden="true"
-									label="&zotero.items.publication_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-journalAbbreviation" hidden="true"
-									submenu="true"
-									label="&zotero.items.journalAbbr_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-language" hidden="true"
-									submenu="true"
-									label="&zotero.items.language_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-accessDate" hidden="true"
-									submenu="true"
-									label="&zotero.items.accessDate_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-libraryCatalog" hidden="true"
-									submenu="true"
-									label="&zotero.items.libraryCatalog_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-callNumber" hidden="true"
-									submenu="true"
-									label="&zotero.items.callNumber_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-rights" hidden="true"
-									submenu="true"
-									label="&zotero.items.rights_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-dateAdded" hidden="true"
-									label="&zotero.items.dateAdded_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-dateModified" hidden="true"
-									label="&zotero.items.dateModified_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-archive" hidden="true"
-									submenu="true"
-									label="&zotero.items.archive_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>								
-								<treecol
-									id="zotero-items-column-archiveLocation" hidden="true"
-									submenu="true"
-									label="&zotero.items.archiveLocation_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-place" hidden="true"
-									submenu="true"
-									label="&zotero.items.place_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-volume" hidden="true"
-									submenu="true"
-									label="&zotero.items.volume_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-edition" hidden="true"
-									submenu="true"
-									label="&zotero.items.edition_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-pages" hidden="true"
-									submenu="true"
-									label="&zotero.items.pages_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-issue" hidden="true"
-									submenu="true"
-									label="&zotero.items.issue_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-series" hidden="true"
-									submenu="true"
-									label="&zotero.items.series_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-seriesTitle" hidden="true"
-									submenu="true"
-									label="&zotero.items.seriesTitle_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-court" hidden="true"
-									submenu="true"
-									label="&zotero.items.court_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-medium" hidden="true"
-									submenu="true"
-									label="&zotero.items.medium_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-genre" hidden="true"
-									submenu="true"
-									label="&zotero.items.genre_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-system" hidden="true"
-									submenu="true"
-									label="&zotero.items.system_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-extra" hidden="true"
-									label="&zotero.items.extra_column;"
-									flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-hasAttachment"
-									class="treecol-image"
-									label="&zotero.tabs.attachments.label;"
-									src="chrome://zotero/skin/attach-small.png"
-									fixed="true"
-									zotero-persist="ordinal hidden sortActive sortDirection"/>
-								<splitter class="tree-splitter"/>
-								<treecol
-									id="zotero-items-column-numNotes" hidden="true"
-									class="treecol-image"
-									label="&zotero.tabs.notes.label;"
-									src="chrome://zotero/skin/treeitem-note-small.png"
-									zotero-persist="width ordinal hidden sortActive sortDirection"/>
-							</treecols>
-							<treechildren ondragstart="ZoteroPane_Local.itemsView.onDragStart(event)"
-								ondragenter="return ZoteroPane_Local.itemsView.onDragEnter(event)"
-								ondragover="return ZoteroPane_Local.itemsView.onDragOver(event)"
-								ondrop="return ZoteroPane_Local.itemsView.onDrop(event)"/>
-						</tree>
-						
-						<!-- Label for displaying messages when items pane is hidden
+				<box id="zotero-layout-switcher" orient="horizontal" zotero-persist="orient" flex="1">
+					<vbox id="zotero-items-pane" zotero-persist="width height" flex="1">
+						<deck id="zotero-items-pane-content" selectedIndex="0" flex="1">
+							<!-- Key navigation is handled by listener in itemTreeView.js -->
+							<tree 
+								id="zotero-items-tree"
+								enableColumnDrag="true"
+								disableKeyNavigation="true"
+								onfocus="if (ZoteroPane_Local.itemsView.rowCount &amp;&amp; !ZoteroPane_Local.itemsView.selection.count) { ZoteroPane_Local.itemsView.selection.select(0); }"
+								onkeydown="ZoteroPane_Local.handleKeyDown(event, this.id)"
+								onselect="ZoteroPane_Local.itemSelected(event)"
+								oncommand="ZoteroPane_Local.serializePersist()"
+								flex="1">
+								<treecols id="zotero-items-columns-header">
+									<treecol
+										id="zotero-items-column-title" primary="true"
+										label="&zotero.items.title_column;"
+										flex="4" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-firstCreator"
+										label="&zotero.items.creator_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-itemType" hidden="true"
+										label="&zotero.items.type_column;"
+										width="40" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-date" hidden="true"
+										label="&zotero.items.date_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-year" hidden="true"
+										label="&zotero.items.year_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-publisher" hidden="true"
+										label="&zotero.items.publisher_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-publicationTitle" hidden="true"
+										label="&zotero.items.publication_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-journalAbbreviation" hidden="true"
+										submenu="true"
+										label="&zotero.items.journalAbbr_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-language" hidden="true"
+										submenu="true"
+										label="&zotero.items.language_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-accessDate" hidden="true"
+										submenu="true"
+										label="&zotero.items.accessDate_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-libraryCatalog" hidden="true"
+										submenu="true"
+										label="&zotero.items.libraryCatalog_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-callNumber" hidden="true"
+										submenu="true"
+										label="&zotero.items.callNumber_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-rights" hidden="true"
+										submenu="true"
+										label="&zotero.items.rights_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-dateAdded" hidden="true"
+										label="&zotero.items.dateAdded_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-dateModified" hidden="true"
+										label="&zotero.items.dateModified_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-archive" hidden="true"
+										submenu="true"
+										label="&zotero.items.archive_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>								
+									<treecol
+										id="zotero-items-column-archiveLocation" hidden="true"
+										submenu="true"
+										label="&zotero.items.archiveLocation_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-place" hidden="true"
+										submenu="true"
+										label="&zotero.items.place_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-volume" hidden="true"
+										submenu="true"
+										label="&zotero.items.volume_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-edition" hidden="true"
+										submenu="true"
+										label="&zotero.items.edition_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-pages" hidden="true"
+										submenu="true"
+										label="&zotero.items.pages_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-issue" hidden="true"
+										submenu="true"
+										label="&zotero.items.issue_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-series" hidden="true"
+										submenu="true"
+										label="&zotero.items.series_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-seriesTitle" hidden="true"
+										submenu="true"
+										label="&zotero.items.seriesTitle_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-court" hidden="true"
+										submenu="true"
+										label="&zotero.items.court_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-medium" hidden="true"
+										submenu="true"
+										label="&zotero.items.medium_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-genre" hidden="true"
+										submenu="true"
+										label="&zotero.items.genre_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-system" hidden="true"
+										submenu="true"
+										label="&zotero.items.system_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-extra" hidden="true"
+										label="&zotero.items.extra_column;"
+										flex="1" zotero-persist="width ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-hasAttachment"
+										class="treecol-image"
+										label="&zotero.tabs.attachments.label;"
+										src="chrome://zotero/skin/attach-small.png"
+										fixed="true"
+										zotero-persist="ordinal hidden sortActive sortDirection"/>
+									<splitter class="tree-splitter"/>
+									<treecol
+										id="zotero-items-column-numNotes" hidden="true"
+										class="treecol-image"
+										label="&zotero.tabs.notes.label;"
+										src="chrome://zotero/skin/treeitem-note-small.png"
+										zotero-persist="width ordinal hidden sortActive sortDirection"/>
+								</treecols>
+								<treechildren ondragstart="ZoteroPane_Local.itemsView.onDragStart(event)"
+									ondragenter="return ZoteroPane_Local.itemsView.onDragEnter(event)"
+									ondragover="return ZoteroPane_Local.itemsView.onDragOver(event)"
+									ondrop="return ZoteroPane_Local.itemsView.onDrop(event)"/>
+							</tree>
+
+							<!-- Label for displaying messages when items pane is hidden
 							 (e.g. "Advanced search mode — press Enter to search.")-->
-						<vbox id="zotero-items-pane-message-box" pack="center" align="center"/>
-					</deck>
-				</vbox>
-				
-				<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" zotero-persist="state"
-					onmousemove="ZoteroPane_Local.updateToolbarPosition()"
-					oncommand="ZoteroPane_Local.updateToolbarPosition()">
-					<grippy id="zotero-items-grippy"/>
-				</splitter>
-				
-				<!-- itemPane.xul -->
-				<vbox id="zotero-item-pane"/>
+							<vbox id="zotero-items-pane-message-box" pack="center" align="center"/>
+						</deck>
+					</vbox>
+
+					<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" orient="horizontal" zotero-persist="state orient"
+						onmousemove="ZoteroPane_Local.updateToolbarPosition()"
+						oncommand="ZoteroPane_Local.updateToolbarPosition()">
+						<grippy id="zotero-items-grippy"/>
+					</splitter>
+
+					<!-- itemPane.xul -->
+					<vbox id="zotero-item-pane"/>
+				</box>
 			</hbox>
 		</vbox>
 		
diff --git a/chrome/locale/en-US/zotero/preferences.dtd b/chrome/locale/en-US/zotero/preferences.dtd
index df99093f89..621b71a7be 100644
--- a/chrome/locale/en-US/zotero/preferences.dtd
+++ b/chrome/locale/en-US/zotero/preferences.dtd
@@ -12,6 +12,9 @@
 <!ENTITY zotero.preferences.showIn.browserPane					"Browser pane">
 <!ENTITY zotero.preferences.showIn.separateTab					"Separate tab">
 <!ENTITY zotero.preferences.showIn.appTab					"App tab">
+<!ENTITY zotero.preferences.layout							"Layout:">
+<!ENTITY zotero.preferences.layout.standard		"Standard">
+<!ENTITY zotero.preferences.layout.stacked			"Stacked">
 <!ENTITY zotero.preferences.fontSize						"Font size:">
 <!ENTITY zotero.preferences.fontSize.small				"Small">
 <!ENTITY zotero.preferences.fontSize.medium				"Medium">
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 669969ecfd..9236129518 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -224,6 +224,7 @@
 #zotero-items-pane
 {
 	min-width: 290px;
+	min-height: 150px;
 }
 
 /* Used for intro text for My Publications */
@@ -249,6 +250,11 @@
 	min-width: 250px;
 }
 
+#zotero-layout-switcher
+{
+	min-width: 560px;
+}
+
 #zotero-pane .toolbar
 {
 	height: 32px !important; /* Hard-code this to fix toolbar icon compression on Linux */
@@ -263,9 +269,14 @@
 }
 
 #zotero-collections-toolbar {
+	margin-right: 10px; /* Set to width of splitter for visual aesthetics */
 	padding-left: 2px;
 }
 
+#zotero-items-toolbar {
+	margin-right: 10px;
+}
+
 .zotero-tb-button {
 	padding-left: 5px;
 	padding-right: 5px;
diff --git a/defaults/preferences/zotero.js b/defaults/preferences/zotero.js
index 9ef02ed09e..b8f63c46bf 100644
--- a/defaults/preferences/zotero.js
+++ b/defaults/preferences/zotero.js
@@ -36,6 +36,7 @@ pref("extensions.zotero.downloadAssociatedFiles",true);
 pref("extensions.zotero.reportTranslationFailure",true);
 pref("extensions.zotero.automaticTags",true);
 pref("extensions.zotero.fontSize", "1.0");
+pref("extensions.zotero.layout", "standard");
 pref("extensions.zotero.recursiveCollections", false);
 pref("extensions.zotero.attachmentRenameFormatString", '{%c - }{%y - }{%t{50}}');
 pref("extensions.zotero.capitalizeTitles", false);