Restore tags and related tabs, display note links box

chrome/content/zotero/bindings/noteeditor.xml

@@ -274,6 +274,7 @@
 							}
 							
 							this.initEditor();
+							this._id('links-box').item = this._item;
 						})();
 					]]></setter>
 			</property>
@@ -392,6 +393,15 @@
 						this.id('tags').item = this.item;
 						this.id('related').item = this.item;
 						this.refresh();
+						
+						// Hide popup to prevent it being visible out of the context or
+						// in some cases even invisible but still blocking the next click
+						this.id('relatedPopup').addEventListener('click', (event) => {
+							let target = event.originalTarget;
+							if (target.classList.contains('zotero-box-label')) {
+								this.id('relatedPopup').hidePopup();
+							}
+						});
 					]]>
 				</setter>
 			</property>
@@ -568,7 +578,7 @@
 					<xul:menupopup id="tagsPopup" ignorekeys="true"
 								   onpopupshown="if (!document.commandDispatcher.focusedElement || document.commandDispatcher.focusedElement.tagName=='xul:label'){ /* DEBUG: it would be nice to make this work -- if (this.firstChild.count==0){ this.firstChild.newTag(); } */ this.setAttribute('showing', 'true'); }"
 								   onpopuphidden="if (!document.commandDispatcher.focusedElement || document.commandDispatcher.focusedElement.tagName=='xul:label'){ this.setAttribute('showing', 'false'); }">
-						<xul:tagsbox id="tags" flex="1" mode="edit" style="display: flex"/>
+						<xul:tagsbox id="tags" flex="1" mode="edit"/>
 					</xul:menupopup>
 				</xul:popupset>
 			</xul:vbox>

chrome/content/zotero/contextPane.js

@@ -238,19 +238,7 @@ var ZoteroContextPane = new function () {
 		}
 
 		if (splitter.getAttribute('state') != 'collapsed') {
-			if (_panesDeck.selectedIndex == 0) {
+			if (_panesDeck.selectedIndex == 1) {
-				let child = _itemPaneDeck.selectedPanel;
-				if (child) {
-					var tabPanels = child.querySelector('tabpanels');
-					if (tabPanels && tabPanels.selectedIndex == 1) {
-						var notesDeck = child.querySelector('.notes-deck');
-						if (notesDeck.selectedIndex == 1) {
-							return child.querySelector('zoteronoteeditor');
-						}
-					}
-				}
-			}
-			else {
 				var node = _notesPaneDeck.selectedPanel;
 				if (node.selectedIndex == 1) {
 					return node.querySelector('zoteronoteeditor');
@@ -702,7 +690,6 @@ var ZoteroContextPane = new function () {
 			editor.mode = readOnly ? 'view' : 'edit';
 			editor.item = item;
 			editor.parentItem = null;
-			editor.hideLinksContainer = true;
 			
 			node.querySelector('.zotero-context-pane-editor-parent-line').innerHTML = '';
 			var parentItem = item.parentItem;
@@ -773,16 +760,89 @@ var ZoteroContextPane = new function () {
 		}
 		var parentItem = Zotero.Items.get(item.parentID);
 		
-		// Info pane
+		// Dynamically create item pane tabs and panels as in itemPane.xul.
-		var panelInfo = document.createElement('vbox');
+		// Keep the code below in sync with itemPane.xul
+
+		// tabbox
+		var tabbox = document.createElement('tabbox');
+		tabbox.setAttribute('flex', '1');
+		tabbox.className = 'zotero-view-tabbox';
+
+		container.append(tabbox);
+
+		// tabs
+		var tabs = document.createElement('tabs');
+		tabs.className = 'zotero-editpane-tabs';
+		// tabpanels
+		var tabpanels = document.createElement('tabpanels');
+		tabpanels.setAttribute('flex', '1');
+		tabpanels.className = 'zotero-view-item';
+		tabpanels.addEventListener('select', () => {
+			_updateAddToNote();
+		});
+
+		tabbox.append(tabs, tabpanels);
+
+		// Info tab
+		var tabInfo = document.createElement('tab');
+		tabInfo.setAttribute('label', Zotero.Intl.strings['zotero.tabs.info.label']);
+		// Tags tab
+		var tabTags = document.createElement('tab');
+		tabTags.setAttribute('label', Zotero.Intl.strings['zotero.tabs.tags.label']);
+		// Related tab
+		var tabRelated = document.createElement('tab');
+		tabRelated.setAttribute('label', Zotero.Intl.strings['zotero.tabs.related.label']);
+
+		tabs.append(tabInfo, tabTags, tabRelated);
+
+		// Info panel
+		var panelInfo = document.createElement('tabpanel');
 		panelInfo.setAttribute('flex', '1');
 		panelInfo.className = 'zotero-editpane-item-box';
 		var itemBox = document.createElement('zoteroitembox');
 		itemBox.setAttribute('flex', '1');
 		panelInfo.append(itemBox);
-		container.append(panelInfo);
+		// Tags panel
+		var panelTags = document.createElement('tabpanel');
+		panelTags.setAttribute('orient', 'vertical');
+		panelTags.setAttribute('context', 'tags-context-menu');
+		panelTags.className = 'tags-pane';
+		panelTags.style.display = 'flex';
+		var div = document.createElementNS(HTML_NS, 'div');
+		div.className = 'tags-box-container';
+		div.style.display = 'flex';
+		div.style.flexGrow = '1';
+		panelTags.append(div);
+		var tagsBoxRef = React.createRef();
+		ReactDOM.render(
+			<TagsBoxContainer
+				key={'tagsBox-' + parentItem.id}
+				item={parentItem}
+				editable={!readOnly}
+				ref={tagsBoxRef}
+			/>,
+			div
+		);
+		// Related panel
+		var panelRelated = document.createElement('tabpanel');
+		var relatedBox = document.createElement('relatedbox');
+		relatedBox.setAttribute('flex', '1');
+		relatedBox.className = 'zotero-editpane-related';
+		panelRelated.addEventListener('click', (event) => {
+			if (event.originalTarget.closest('.zotero-clicky')) {
+				Zotero_Tabs.select('zotero-pane');
+			}
+		});
+		panelRelated.append(relatedBox);
+
+		tabpanels.append(panelInfo, panelTags, panelRelated);
+		tabbox.selectedIndex = 0;
+
 
 		itemBox.mode = readOnly ? 'view' : 'edit';
 		itemBox.item = parentItem;
+
+		relatedBox.mode = readOnly ? 'view' : 'edit';
+		relatedBox.item = parentItem;
 	}
 };

chrome/content/zotero/itemPane.xul

@@ -69,6 +69,10 @@
 			</groupbox>
 			
 			<!-- Regular item -->
+			<!-- 
+				Keep in sync with contextPane.js (_addItemContext function) which
+				dynamically creates this itemPane part for each tab
+			-->
 			<tabbox id="zotero-view-tabbox" class="zotero-view-tabbox" flex="1" onselect="if (!ZoteroPane_Local.getCollectionTreeRow() || event.originalTarget.localName != 'tabpanels') { return; }; ZoteroItemPane.viewItem(ZoteroPane_Local.getSelectedItems()[0], ZoteroPane_Local.collectionsView.editable ? 'edit' : 'view', this.selectedIndex)">
 				<tabs id="zotero-editpane-tabs" class="zotero-editpane-tabs">
 					<tab id="zotero-editpane-info-tab" label="&zotero.tabs.info.label;"/>

chrome/content/zotero/zoteroPane.js

@@ -2205,6 +2205,8 @@ var ZoteroPane = new function()
 		if (found) {
 			document.getElementById('zotero-items-tree').focus();
 		}
+		
+		Zotero_Tabs.select('zotero-pane');
 	};
 	
 	

scss/components/_tagsBox.scss

@@ -65,6 +65,11 @@
 		flex-grow: 1;
 		margin: 0 2px;
 		// width: $item-pane-width - $icon-width - $delete-button-width - ($li-side-margin * 2);
+		
+		// This container shouldn't force any width for its parent,
+		// because tagsBox is used in more places than just item pane,
+		// and it can have smaller width than $item-pane-width
+		width: 0;
 	}
 	
 	ul.tags-box-list > li:not(.multiline) .editable-container {