Item pane improvements for contextual/pinned modes

- Show item title at top of item pane in contextual mode not in a
  library tab
- Show "All Notes" at top of standalone notes pane
- Add background color when clicking notes in standalone notes list
- Clean up back buttons

Mode button is still a placeholder but uses emoji to show the mode

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

@@ -129,7 +129,7 @@ input {
 
 .zotero-editpane-tabs {
 	-moz-appearance: none;
-	background: -moz-linear-gradient(top, #ededed, #cccccc);
+	/*background: -moz-linear-gradient(top, #ededed, #cccccc);*/
 	border-style: solid;
 	border-width: 0 0 1px 0;
 	border-color: #bdbdbd;

chrome/content/zotero/itemPane.js

@@ -29,6 +29,8 @@ import TagsBoxContainer from 'containers/tagsBoxContainer';
 import NotesList from 'components/itemPane/notesList';
 
 var ZoteroItemPane = new function() {
+	const HTML_NS = 'http://www.w3.org/1999/xhtml';
+	
 	var _lastItem, _itemBox, _notesLabel, _notesButton, _notesList, _tagsBox, _relatedBox;
 	var _selectedNoteID;
 	var _translationTarget;
@@ -113,6 +115,8 @@ var ZoteroItemPane = new function() {
 		
 		_lastItem = item;
 		
+		_updateTitle();
+		
 		var viewBox = document.getElementById('zotero-view-item');
 		viewBox.classList.remove('no-tabs');
 		
@@ -476,6 +480,11 @@ var ZoteroItemPane = new function() {
 	};
 	
 	
+	function _updateTitle() {
+		document.getElementById('item-pane-title').textContent = _lastItem.getDisplayTitle();
+	}
+	
+	
 	function _updateNoteCount() {
 		var c = _notesList.childNodes.length;
 		
@@ -516,6 +525,7 @@ var ZoteroItemPane = new function() {
 	}
 
 	this.togglePane = function (forceItem) {
+		var pane = document.getElementById('zotero-item-pane');
 		let mainDeck = document.getElementById('zotero-item-pane-main-deck');
 		let value;
 		if (forceItem !== undefined) {
@@ -525,15 +535,15 @@ var ZoteroItemPane = new function() {
 			value = mainDeck.selectedIndex == 0 ? 1 : 0;
 		}
 
-		document.getElementById('temp-toggle-1').firstChild.remove();
-		document.getElementById('temp-toggle-2').firstChild.remove();
 		if (value == 0) {
-			document.getElementById('temp-toggle-1').append('■ □');
-			document.getElementById('temp-toggle-2').append('■ □');
+			pane.setAttribute('data-mode', 'item');
+			document.getElementById('temp-toggle-1').innerHTML = '[📄] 📒';
+			document.getElementById('temp-toggle-2').innerHTML = '[📄] 📒';
 		}
 		else {
-			document.getElementById('temp-toggle-1').append('□ ■');
-			document.getElementById('temp-toggle-2').append('□ ■');
+			pane.setAttribute('data-mode', 'notes');
+			document.getElementById('temp-toggle-1').innerHTML = '📄 [📒]';
+			document.getElementById('temp-toggle-2').innerHTML = '📄 [📒]';
 		}
 
 		mainDeck.selectedIndex = value;
@@ -553,35 +563,33 @@ var ZoteroItemPane = new function() {
 		inner.setAttribute('flex', 1);
 		container.appendChild(inner);
 		
-		let returnButton = document.createElement('toolbarbutton');
-		returnButton.className = 'zotero-tb-button';
-		returnButton.id = 'zotero-tb-return';
-		returnButton.style.listStyleImage = 'url(\'chrome://zotero/skin/citation-delete.png\')'
-		returnButton.addEventListener('click', () => {
-			inner.setAttribute('selectedIndex', 0);
-		});
-
-
-		bar.append(returnButton, 'Standalone Notes');
-		bar.style.overflowX = 'hidden';
-		bar.style.textOverflow = 'ellipsis';
-		bar.style.fontWeight = 'bold';
-
+		var listLabel = document.createElementNS(HTML_NS, 'div');
+		listLabel.className = 'notes-list-label';
+		listLabel.textContent = Zotero.getString('pane.item.notes.allNotes');
 		
 		let list = document.createElement('vbox');
 		list.setAttribute('flex', 1);
 		list.className = 'zotero-box';
 		
+		list.appendChild(listLabel);
 		
+		var noteContainer = document.createElement('vbox');
+		var backButton = document.createElementNS(HTML_NS, 'div');
+		backButton.className = 'item-pane-back-button';
+		backButton.textContent = (Zotero.dir == 'ltr' ? '←' : '→') + ' '
+			+ Zotero.getString('general.back');
+		backButton.addEventListener('click', () => {
+			inner.setAttribute('selectedIndex', 0);
+		});
 		let note = document.createElement('zoteronoteeditor');
 		note.id = 'zotero-item-pane-pinned-note';
 		note.setAttribute('flex', 1);
-		inner.appendChild(list);
-		inner.appendChild(note);
+		noteContainer.appendChild(backButton);
+		noteContainer.appendChild(note);
 		
+		inner.append(list, noteContainer);
 		inner.setAttribute('selectedIndex', 0);
 		
-
 		let head = document.createElement('hbox');
 		let label = document.createElement('label');
 		let button = document.createElement('button');
@@ -625,7 +633,6 @@ var ZoteroItemPane = new function() {
 		listBox.style.display = 'flex';
 		listBox.setAttribute('flex', '1')
 
-		const HTML_NS = 'http://www.w3.org/1999/xhtml';
 		var listInner = document.createElementNS(HTML_NS, 'div');
 		listInner.className = 'notes-list-container';
 		list.append(head, listBox);
@@ -753,6 +760,9 @@ var ZoteroItemPane = new function() {
 	};
 	
 	this.selectTabContext = function (tabID, type) {
+		var pane = document.getElementById('zotero-item-pane');
+		pane.setAttribute('data-type', type);
+		
 		let contextualDeck = document.getElementById('zotero-item-pane-contextual-deck');
 		let prevIndex = contextualDeck.selectedIndex;
 		contextualDeck.selectedIndex = Array.from(contextualDeck.children).findIndex(x => x.id == tabID + '-context');
@@ -778,16 +788,16 @@ var ZoteroItemPane = new function() {
 		
 		let state = contextualDeck.children[contextualDeck.selectedIndex].getAttribute('state');
 		let mainDeck = document.getElementById('zotero-item-pane-main-deck');
-		document.getElementById('temp-toggle-1').firstChild.remove();
-		document.getElementById('temp-toggle-2').firstChild.remove();
 		if (state == 0) {
-			document.getElementById('temp-toggle-1').append('■ □');
-			document.getElementById('temp-toggle-2').append('■ □');
+			pane.setAttribute('data-mode', 'item');
+			document.getElementById('temp-toggle-1').innerHTML = '[📄] 📒';
+			document.getElementById('temp-toggle-2').innerHTML = '[📄] 📒';
 			mainDeck.selectedIndex = state;
 		}
 		else if (state == 1) {
-			document.getElementById('temp-toggle-1').append('□ ■');
-			document.getElementById('temp-toggle-2').append('□ ■');
+			pane.setAttribute('data-mode', 'notes');
+			document.getElementById('temp-toggle-1').innerHTML = '📄 [📒]';
+			document.getElementById('temp-toggle-2').innerHTML = '📄 [📒]';
 			mainDeck.selectedIndex = state;
 		}
 	};
@@ -859,26 +869,18 @@ var ZoteroItemPane = new function() {
 
 		var vbox2 = document.createElement('vbox');
 
-
-		let returnButton = document.createElement('toolbarbutton');
-		returnButton.className = 'zotero-tb-button';
-		returnButton.id = 'zotero-tb-return';
-		returnButton.style.listStyleImage = 'url(\'chrome://zotero/skin/citation-delete.png\')'
-		returnButton.addEventListener('click', () => {
+		var backButton = document.createElementNS(HTML_NS, 'div');
+		backButton.className = 'item-pane-back-button';
+		backButton.textContent = (Zotero.dir == 'ltr' ? '←' : '→') + ' '
+			+ Zotero.getString('general.back');
+		backButton.addEventListener('click', () => {
 			deck.setAttribute('selectedIndex', 0);
 		});
 		
-		var bar = document.createElement('hbox')
-		bar.append(returnButton, 'Child Notes');
-		bar.style.overflowX = 'hidden';
-		bar.style.textOverflow = 'ellipsis';
-		bar.style.fontWeight = 'bold';
-
 		let note = document.createElement('zoteronoteeditor');
-
 		note.setAttribute('flex', 1);
 		
-		vbox2.append(bar, note);
+		vbox2.append(backButton, note);
 
 
 		var vbox = document.createElement('vbox');
@@ -929,7 +931,7 @@ var ZoteroItemPane = new function() {
 		panelTags.setAttribute('context', 'tags-context-menu');
 		panelTags.className = 'tags-pane';
 		panelTags.style.display = 'flex';
-		const HTML_NS = 'http://www.w3.org/1999/xhtml';
+		
 		var div = document.createElementNS(HTML_NS, 'div');
 		div.className = 'tags-box-container';
 		div.style.display = 'flex';

chrome/content/zotero/itemPane.xul

@@ -34,11 +34,17 @@
 	<script src="include.js"/>
 	<script src="itemPane.js"></script>
 	
-	<vbox id="zotero-item-pane" zotero-persist="width height">
+	<vbox id="zotero-item-pane"
+			zotero-persist="width height"
+			data-type="library"
+			data-mode="item"
+	>
 		<hbox id="zotero-item-pane-padding-top" height="32" hidden="true" align="right">
-			<button id="temp-toggle-2" style="min-width: 37px; font-size: 16px;">■ □</button>
+			<button id="temp-toggle-2" style="min-width: 37px; padding: 2px; font-size: 13px;">[&#128196;] &#128210;</button>
 		</hbox>
 		
+		<html:div id="item-pane-title"/>
+		
 		<deck id="zotero-item-pane-main-deck" flex="1" selectedIndex="0">
 			<deck id="zotero-item-pane-contextual-deck" selectedIndex="0">
 				<vbox id="zotero-pane-context">

chrome/content/zotero/zoteroPane.xul

@@ -214,7 +214,7 @@
 								<div xmlns="http://www.w3.org/1999/xhtml" class="sync-button-tooltip-messages"/>
 							</tooltip>
 						</toolbarbutton>
-						<button id="temp-toggle-1" style="min-width: 37px; font-size: 16px;">■ □</button>
+						<button id="temp-toggle-1" style="min-width: 37px; padding: 2px; font-size: 13px;">[&#128196;] &#128210;</button>
 					</hbox>
 				</toolbar>
 						

chrome/locale/en-US/zotero/zotero.properties

@@ -77,6 +77,7 @@ general.describeProblem			= Briefly describe the problem:
 general.nMegabytes                 = %S MB
 general.item                       = Item
 general.pdf                        = PDF
+general.back                       = Back
 
 general.operationInProgress = A Zotero operation is currently in progress.
 general.operationInProgress.waitUntilFinished = Please wait until it has finished.
@@ -364,6 +365,7 @@ pane.item.switchFieldMode.two	= Switch to two fields
 pane.item.creator.moveToTop    = Move to Top
 pane.item.creator.moveUp		= Move Up
 pane.item.creator.moveDown		= Move Down
+pane.item.notes.allNotes        = All Notes
 pane.item.notes.untitled        = Untitled Note
 pane.item.notes.delete.confirm  = Are you sure you want to delete this note?
 pane.item.notes.count.zero      = %S notes:

chrome/skin/default/zotero/itemPane.css

@@ -45,6 +45,52 @@
 	margin-left: 5px;
 }
 
+#zotero-item-pane[data-type='library'] #item-pane-title,
+#zotero-item-pane[data-mode='notes'] #item-pane-title {
+	display: none;
+}
+
+#item-pane-title {
+	font-size: 16px;
+	padding: 0 10px 6px;
+}
+
+#zotero-item-pane-contextual-deck .item-pane-back-button {
+	font-size: 12px;
+	margin: 4px 5px 5px;
+}
+
+#zotero-item-pane-pin-deck .item-pane-back-button {
+	font-size: 12px;
+	margin: 7px 6px;
+}
+
+#zotero-item-pane-padding-top {
+	/*border-bottom: 1px solid lightgray;*/
+}
+
+#zotero-item-pane-pinned-note {
+	border-top: 1px solid #d9d9d9;
+}
+
+.zotero-editpane-tabs {
+	background: #ececec;
+}
+
+#temp-toggle-1.mode-item, #temp-toggle-2.mode-item {
+	list-style-image: url(chrome://zotero/skin/treeitem.png);
+}
+
+#temp-toggle-1.mode-notes, #temp-toggle-2.mode-notes {
+	list-style-image: url(chrome://zotero/skin/treeitem-note.png);
+}
+
+.notes-list-label {
+	font-size: 16px;
+	font-weight: bold;
+	padding: 8px 10px 5px;
+}
+
 #retraction-box {
 	cursor: default;
 }

chrome/skin/default/zotero/overlay.css

@@ -710,7 +710,7 @@
 
 
 .zotero-box {
-	margin-left: 5px;
+	/*margin-left: 5px;*/
 }
 
 .zotero-box-icon {

scss/components/_notesList.scss

@@ -13,12 +13,16 @@
 }
 
 .note-row {
-	padding: 8px 0;
+	padding: 8px 12px;
 
 	&:not(:last-child) {
 		border-bottom: 1px solid $shade-3;
 	}
 	
+	&:active {
+		background: #e2e2e2;
+	}
+	
 	.inner {
 		.first-line {
 			display: flex;