From 4e3b79f9bb61faa8ac94b5e5e05412f3c01b2a6e Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Fri, 3 Jul 2009 11:11:13 +0000
Subject: [PATCH] Metadata pane tab fixes

- Connect tabs to pane
- Allow switching between metadata pane tabs using standard Firefox shortcuts (Ctrl-Tab, Ctrl-Shift-Tab)
- Fixed squished look in Firefox 3.5
- Remove some unnecessary padding, providing a little bit more room in the metadata pane

Needs a little testing

Closes #711, Improve keyboard support
---
 chrome/content/zotero/itemPane.js      |  5 +---
 chrome/content/zotero/itemPane.xul     | 24 +++++++++++-------
 chrome/content/zotero/overlay.js       |  9 +------
 chrome/content/zotero/overlay.xul      | 34 +++++++++++++-------------
 chrome/skin/default/zotero/overlay.css | 20 ++++++++++++++-
 5 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/chrome/content/zotero/itemPane.js b/chrome/content/zotero/itemPane.js
index 3e66ea2c3..628abf3a5 100644
--- a/chrome/content/zotero/itemPane.js
+++ b/chrome/content/zotero/itemPane.js
@@ -30,7 +30,6 @@ var ZoteroItemPane = new function() {
 	var _lastPane;
 	var _loaded;
 	
-	var _tabs;
 	var _lastTabIndex;
 	var _tabDirection;
 	var _tabIndexMaxTagsFields = 0;
@@ -51,10 +50,8 @@ var ZoteroItemPane = new function() {
 			return;
 		}
 		
-		_tabs = document.getElementById('zotero-view-tabs');
-		
 		// Not in item pane, so skip the introductions
-		if (!_tabs) {
+		if (!document.getElementById('zotero-view-tabbox')) {
 			return;
 		}
 		
diff --git a/chrome/content/zotero/itemPane.xul b/chrome/content/zotero/itemPane.xul
index bd4879ecf..1d65c2199 100644
--- a/chrome/content/zotero/itemPane.xul
+++ b/chrome/content/zotero/itemPane.xul
@@ -31,10 +31,12 @@
 	<script src="include.js"/>
 	<script src="itemPane.js"/>
 	
-	<deck id="zotero-view-item" flex="1" onselect="if (this.selectedIndex !== '') { ZoteroItemPane.loadPane(this.selectedIndex); }">
-		<zoteroitembox id="zotero-editpane-item-box" flex="1"/>
+	<tabpanels id="zotero-view-item" flex="1" oncommand="if (this.selectedIndex !== '') { ZoteroItemPane.loadPane(this.selectedIndex); }">
+		<tabpanel>
+			<zoteroitembox id="zotero-editpane-item-box" flex="1"/>
+		</tabpanel>
 		
-		<vbox flex="1">
+		<tabpanel flex="1" align="top">
 			<hbox align="center">
 				<label id="zotero-editpane-notes-label"/>
 				<button label="&zotero.item.add;" oncommand="ZoteroItemPane.addNote();"/>
@@ -46,9 +48,9 @@
 				</columns>
 				<rows id="zotero-editpane-dynamic-notes" flex="1"/>
 			</grid>
-		</vbox>
+		</tabpanel>
 		
-		<vbox flex="1">
+		<tabpanel flex="1" align="top">
 			<hbox align="center">
 				<label id="zotero-editpane-attachments-label"/>
 				<button id="zotero-tb-item-attachments-add" type="menu" label="&zotero.item.add;">
@@ -67,10 +69,14 @@
 				</columns>
 				<rows id="zotero-editpane-dynamic-attachments" flex="1"/>
 			</grid>
-		</vbox>
+		</tabpanel>
 		
-		<tagsbox id="zotero-editpane-tags" flex="1"/>
+		<tabpanel>
+			<tagsbox id="zotero-editpane-tags" flex="1"/>
+		</tabpanel>
 		
-		<seealsobox id="zotero-editpane-related" flex="1"/>
-	</deck>
+		<tabpanel>
+			<seealsobox id="zotero-editpane-related" flex="1"/>
+		</tabpanel>
+	</tabpanels>
 </overlay>
\ No newline at end of file
diff --git a/chrome/content/zotero/overlay.js b/chrome/content/zotero/overlay.js
index c27a483ec..3251684d8 100644
--- a/chrome/content/zotero/overlay.js
+++ b/chrome/content/zotero/overlay.js
@@ -991,15 +991,13 @@ var ZoteroPane = new function()
 			document.getElementById('zotero-item-restore-button').hidden = true;
 		}
 		
-		var tabs = document.getElementById('zotero-view-tabs');
+		var tabs = document.getElementById('zotero-view-tabbox');
 		
 		if (this.itemsView && this.itemsView.selection.count == 1 && this.itemsView.selection.currentIndex != -1)
 		{
 			var item = this.itemsView._getItemAtRow(this.itemsView.selection.currentIndex);
 			
 			if(item.ref.isNote()) {
-				tabs.hidden = true;
-				
 				var noteEditor = document.getElementById('zotero-note-editor');
 				noteEditor.mode = this.collectionsView.editable ? 'edit' : 'view';
 				
@@ -1033,8 +1031,6 @@ var ZoteroPane = new function()
 			}
 			
 			else if(item.ref.isAttachment()) {
-				tabs.hidden = true;
-				
 				var attachmentBox = document.getElementById('zotero-attachment-box');
 				attachmentBox.mode = this.collectionsView.editable ? 'edit' : 'view';
 				attachmentBox.item = item.ref;
@@ -1049,18 +1045,15 @@ var ZoteroPane = new function()
 				if (this.collectionsView.editable) {
 					ZoteroItemPane.viewItem(item.ref);
 					tabs.selectedIndex = document.getElementById('zotero-view-item').selectedIndex;
-					tabs.hidden = false;
 				}
 				else {
 					document.getElementById('zotero-view-item').selectedIndex = 0;
 					ZoteroItemPane.viewItem(item.ref, 'view');
-					tabs.hidden = true;
 				}
 			}
 		}
 		else
 		{
-			tabs.hidden = true;
 			document.getElementById('zotero-item-pane-content').selectedIndex = 0;
 			
 			var label = document.getElementById('zotero-view-selected-label');
diff --git a/chrome/content/zotero/overlay.xul b/chrome/content/zotero/overlay.xul
index 98ca9c539..76fd87fcc 100644
--- a/chrome/content/zotero/overlay.xul
+++ b/chrome/content/zotero/overlay.xul
@@ -370,30 +370,30 @@
 				<!-- TODO: localize -->
 				<button id="zotero-item-restore-button" label="Restore to Library"
 					oncommand="ZoteroPane.restoreSelectedItems()" hidden="true"/>
-				<groupbox flex="1">
-					<caption>
-						<tabs id="zotero-view-tabs" onselect="document.getElementById('zotero-view-item').selectedIndex = this.selectedIndex;" hidden="true">
+				<deck id="zotero-item-pane-content" selectedIndex="0" flex="1">
+					<groupbox pack="center" align="center">
+						<label id="zotero-view-selected-label"/>
+					</groupbox>
+					<tabbox id="zotero-view-tabbox">
+						<tabs>
 							<tab label="&zotero.tabs.info.label;"/>
 							<tab label="&zotero.tabs.notes.label;"/>
 							<tab label="&zotero.tabs.attachments.label;"/>
 							<tab label="&zotero.tabs.tags.label;"/>
 							<tab label="&zotero.tabs.related.label;"/>
 						</tabs>
-					</caption>
-					<deck id="zotero-item-pane-content" selectedIndex="0" flex="1">
-						<box pack="center" align="center">
-							<label id="zotero-view-selected-label"/>
-						</box>
-						<deck id="zotero-view-item" flex="1"/>
-						<!-- Note info pane -->
-						<vbox id="zotero-view-note" flex="1">
-							<zoteronoteeditor id="zotero-note-editor" flex="1"/>
-							<button id="zotero-view-note-button" label="&zotero.notes.separate;" oncommand="ZoteroPane.openNoteWindow(this.getAttribute('noteID')); if(this.hasAttribute('sourceID')) ZoteroPane.selectItem(this.getAttribute('sourceID'));"/>
-						</vbox>
-						<!-- Attachment info pane -->
+						<tabpanels id="zotero-view-item" flex="1"/>
+					</tabbox>
+					<!-- Note info pane -->
+					<groupbox id="zotero-view-note" flex="1">
+						<zoteronoteeditor id="zotero-note-editor" flex="1"/>
+						<button id="zotero-view-note-button" label="&zotero.notes.separate;" oncommand="ZoteroPane.openNoteWindow(this.getAttribute('noteID')); if(this.hasAttribute('sourceID')) ZoteroPane.selectItem(this.getAttribute('sourceID'));"/>
+					</groupbox>
+					<!-- Attachment info pane -->
+					<groupbox flex="1">
 						<zoteroattachmentbox id="zotero-attachment-box" flex="1"/>
-					</deck>
-				</groupbox>
+					</groupbox>
+				</deck>
 			</vbox>
 		</hbox>
 		
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 6bb28aba1..b6bbaeb40 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -289,8 +289,26 @@ window[active="true"] #zotero-pane[fullscreenmode="true"][platform="mac"]
 	list-style-image: url('chrome://zotero/skin/search-cancel-active.png');
 }
 
-#zotero-view-tabs tab
+#zotero-view-tabbox, #zotero-item-pane-content > groupbox
 {
+	margin: 0;
+}
+
+#zotero-view-tabbox tabs tab
+{
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
+
+#zotero-view-tabbox tabs tab .tab-text
+{
+	margin-top: .2em !important;
+	margin-bottom: .25em !important;
+}
+
+#zotero-view-item
+{
+	padding: 1.5em .25em .25em;
 }
 
 #zotero-view-item > vbox