Fix context pane return button and background

* Fix context pane return button and background
* Remove unused code
* Fix tab notes container background
* Fix context pane sections background

chrome/content/zotero/contextPane.js

@@ -23,8 +23,6 @@
     ***** END LICENSE BLOCK *****
 */
 
-var { getCSSItemTypeIcon } = require('components/icons');
-
 var ZoteroContextPane = new function () {
 	var _tabCover;
 	var _contextPane;
@@ -71,7 +69,6 @@ var ZoteroContextPane = new function () {
 		_itemPaneDeck = document.createXULElement('deck');
 		// Notes pane deck
 		_notesPaneDeck = document.createXULElement('deck');
-		_notesPaneDeck.style.backgroundColor = 'white';
 		_notesPaneDeck.setAttribute('flex', 1);
 		_notesPaneDeck.className = 'notes-pane-deck';
 
@@ -393,21 +390,27 @@ var ZoteroContextPane = new function () {
 		list.setAttribute('flex', 1);
 		list.className = 'zotero-context-notes-list';
 
-		var noteContainer = document.createXULElement('vbox');
+		let noteContainer = document.createXULElement('vbox');
-		var title = document.createXULElement('vbox');
+		noteContainer.classList.add('zotero-context-note-container');
+		let title = document.createXULElement('vbox');
 		title.className = 'zotero-context-pane-editor-parent-line';
-		var editor = new (customElements.get('note-editor'));
+		let divider = document.createElement("div");
+		divider.classList.add("divider");
+		let editor = new (customElements.get('note-editor'));
 		editor.className = 'zotero-context-pane-pinned-note';
 		editor.setAttribute('flex', 1);
-		noteContainer.append(title, editor);
+		noteContainer.append(title, divider, editor);
 
-		var tabNotesContainer = document.createXULElement('vbox');
+		let tabNotesContainer = document.createXULElement('vbox');
-		var title = document.createXULElement('vbox');
+		tabNotesContainer.classList.add('zotero-context-note-container');
+		title = document.createXULElement('vbox');
 		title.className = 'zotero-context-pane-editor-parent-line';
+		divider = document.createElement("div");
+		divider.classList.add("divider");
 		let tabNotesDeck = document.createXULElement('deck');
 		tabNotesDeck.className = 'zotero-context-pane-tab-notes-deck';
 		tabNotesDeck.setAttribute('flex', 1);
-		tabNotesContainer.append(title, tabNotesDeck);
+		tabNotesContainer.append(title, divider, tabNotesDeck);
 		
 		let contextNode = document.createXULElement('deck');
 		contextNode.append(list, noteContainer, tabNotesContainer);
@@ -417,11 +420,6 @@ var ZoteroContextPane = new function () {
 		contextNode.setAttribute('data-library-id', libraryID);
 		contextNode.setAttribute('selectedIndex', 0);
 		
-		editor.returnHandler = () => {
-			contextNode.setAttribute('selectedIndex', 0);
-			_updateAddToNote();
-		};
-		
 		var head = document.createXULElement('hbox');
 		head.style.display = 'flex';
 		
@@ -762,15 +760,6 @@ var ZoteroContextPane = new function () {
 				editor.mode = readOnly ? 'view' : 'edit';
 				editor.item = item;
 				editor.parentItem = null;
-				editor.returnHandler = () => {
-					// Immediately save note content before vbox with note-editor iframe is destroyed below
-					editor.saveSync();
-					_panesDeck.setAttribute('selectedIndex', 1);
-					_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 0);
-					vbox.remove();
-					_updateAddToNote();
-					_preventGlobalDeckChange = true;
-				};
 
 				_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 2);
 				tabNotesDeck.setAttribute('selectedIndex', tabNotesDeck.children.length - 1);
@@ -788,18 +777,28 @@ var ZoteroContextPane = new function () {
 
 			editor.focus();
 
-			parentTitleContainer.innerHTML = '';
+			let parentItem = item.parentItem;
-			var parentItem = item.parentItem;
+			if (!parentTitleContainer.querySelector(".parent-title-container")) {
-			if (parentItem) {
+				let container = document.createElement('div');
-				var container = document.createElement('div');
+				container.classList.add("parent-title-container");
-				var icon = getCSSItemTypeIcon(parentItem.getItemTypeIconName());
+				let returnBtn = document.createXULElement("toolbarbutton");
-				icon.classList.add('parent-item-type');
+				returnBtn.classList.add("zotero-tb-note-return");
-				var title = document.createElement('div');
+				returnBtn.addEventListener("command", () => {
-				title.append(parentItem.getDisplayTitle());
+					// Immediately save note content before vbox with note-editor iframe is destroyed below
+					editor.saveSync();
+					_panesDeck.setAttribute('selectedIndex', 1);
+					_notesPaneDeck.selectedPanel.setAttribute('selectedIndex', 0);
+					vbox.remove();
+					_updateAddToNote();
+					_preventGlobalDeckChange = true;
+				});
+				let title = document.createElement('div');
 				title.className = 'parent-title';
-				container.append(icon, title);
+				container.append(returnBtn, title);
 				parentTitleContainer.append(container);
 			}
+			parentTitleContainer.querySelector(".parent-title").textContent
+				= parentItem?.getDisplayTitle() || "";
 			_updateAddToNote();
 		}
 	}
@@ -836,7 +835,7 @@ var ZoteroContextPane = new function () {
 		if (!item) {
 			return;
 		}
-		var libraryID = item.libraryID;
+		libraryID = item.libraryID;
 		var readOnly = _isLibraryReadOnly(libraryID);
 		var parentID = item.parentID;
 		

chrome/content/zotero/zoteroPane.xhtml

@@ -29,7 +29,6 @@
 <?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/standalone.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero/skin/contextPane.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
 <?xml-stylesheet href="chrome://zotero/skin/itemPane.css" type="text/css"?>

chrome/skin/default/zotero/contextPane.css

@@ -1,77 +0,0 @@
-#tabs-deck {
-    min-width: 600px;
-}
-
-#zotero-context-pane {
-    display: flex;
-    min-width: 360px;
-}
-
-#zotero-context-pane.stacked {
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    font-size: 0;
-    pointer-events: none;
-}
-
-#zotero-context-pane .stacked-context-placeholder {
-    min-height: 300px;
-}
-
-#zotero-context-pane.standard .stacked-context-placeholder {
-    display: none;
-}
-
-#zotero-context-splitter-stacked {
-    pointer-events: auto;
-}
-
-#zotero-context-pane-inner {
-    width: 0;
-    background: var(--material-sidepane);
-    font: message-box;
-    font-size: inherit;
-    min-height: 100px;
-    height: 0;
-    pointer-events: auto;
-}
-
-#zotero-item-toolbar {
-    height: 32px;
-}
-
-.zotero-context-notes-list {
-    background-color: var(--material-sidepane);
-}
-
-.zotero-context-pane-editor-parent-line {
-    border-bottom: 1px solid #d9d9d9;
-}
-
-.zotero-context-pane-editor-parent-line > div {
-    display: flex;
-    align-items: center;
-    padding: 5px 5px;
-}
-
-.zotero-context-pane-editor-parent-line .parent-item-type {
-    margin-inline-end: 3px;
-    width: 16px;
-}
-
-.zotero-context-pane-editor-parent-line .parent-title {
-    flex-grow: 1;
-    width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-#zotero-context-pane[collapsed=true] .notes-list-container,
-#zotero-context-pane-inner[collapsed=true] .notes-list-container,
-#zotero-context-pane[collapsed=true] .zotero-view-item > tabpanel > *,
-#zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
-    overflow: unset !important;
-}

chrome/skin/default/zotero/itemPane.css

@@ -22,6 +22,7 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
+	background: var(--material-sidepane);
 }
 
 .zotero-view-item {

scss/_zotero.scss

@@ -24,6 +24,7 @@
 @import "components/autosuggest";
 @import "components/button";
 @import "components/clicky";
+@import "components/contextPane";
 @import "components/collection-tree";
 @import "components/createParent";
 @import "components/dictionaryManager";

scss/components/_contextPane.scss

@@ -0,0 +1,94 @@
+#tabs-deck {
+	min-width: 600px;
+}
+
+#zotero-context-pane {
+	display: flex;
+	min-width: 360px;
+
+	.divider {
+		border-bottom: 1px solid var(--fill-quinary);
+		margin: 0 8px;
+	}
+
+	&.stacked {
+		position: fixed;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		font-size: 0;
+		pointer-events: none;
+	}
+
+	&.stacked-context-placeholder {
+		min-height: 300px;
+	}
+	&.standard .stacked-context-placeholder {
+		display: none;
+	}
+}
+
+#zotero-context-splitter-stacked {
+	pointer-events: auto;
+}
+
+#zotero-context-pane-inner {
+	width: 0;
+	background: var(--material-background);
+	font: message-box;
+	font-size: inherit;
+	min-height: 100px;
+	height: 0;
+	pointer-events: auto;
+}
+
+#zotero-item-toolbar {
+	height: 32px;
+}
+
+.zotero-context-notes-list {
+	background-color: var(--material-sidepane);
+}
+
+.zotero-context-note-container {
+	background-color: var(--material-background);
+}
+
+.zotero-context-pane-editor-parent-line {
+	height: 40px;
+
+	& .parent-title-container {
+		display: flex;
+		align-items: center;
+		padding: 6px 8px;
+	}
+
+	& .parent-item-type {
+		margin-inline-end: 3px;
+		width: 16px;
+	}
+
+	& .parent-title {
+		flex-grow: 1;
+		width: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-left: 8px;
+	}
+}
+
+.zotero-tb-note-return {
+	@include svgicon-menu("chevron", "universal", "20");
+	rotate: 90deg;
+	padding: 4px;
+	width: 28px;
+	height: 28px;
+}
+
+#zotero-context-pane[collapsed=true] .notes-list-container,
+#zotero-context-pane-inner[collapsed=true] .notes-list-container,
+#zotero-context-pane[collapsed=true] .zotero-view-item > tabpanel > *,
+#zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
+	overflow: unset !important;
+}