Citation explorer: macOS styling

- Refactor alternating row colors from item tree into virtualized table
- Adjust the way twisty and spacer are aligned for regularOnly item
  trees

chrome/content/zotero/collectionTree.jsx

@@ -487,7 +487,6 @@ var CollectionTree = class CollectionTree extends LibraryTree {
 				ref: ref => this.tree = ref,
 				treeboxRef: ref => this._treebox = ref,
 				renderItem: this.renderItem,
-				alternatingRowColors: null,
 
 				onSelectionChange: this._handleSelectionChange,
 				isSelectable: this.isSelectable,

chrome/content/zotero/itemTree.jsx

@@ -27,6 +27,7 @@ const { noop, getDragTargetOrient } = require("components/utils");
 const PropTypes = require("prop-types");
 const React = require('react');
 const ReactDOM = require('react-dom');
+const cx = require('classnames');
 const LibraryTree = require('./libraryTree');
 const VirtualizedTable = require('components/virtualized-table');
 const { VirtualizedTree, formatColumnName } = VirtualizedTable;
@@ -1446,8 +1447,10 @@ var ItemTree = class ItemTree extends LibraryTree {
 				renderItem: this._renderItem.bind(this),
 				hide: showMessage,
 				key: "virtualized-table",
+				className: cx([{ "regular-only": this.props.regularOnly }]),
 
 				showHeader: true,
+				alternateRowColors: true,
 				columns: this._getColumns(),
 				onColumnPickerMenu: this._displayColumnPickerMenu.bind(this),
 				onColumnSort: this.isSortable ? this._handleColumnSort : null,

scss/components/_citationExplorer.scss

@@ -3,7 +3,6 @@
 
 	dialog {
 		max-height: 100vh;
-		padding: 0 0 .3em;
 		background: var(--material-sidepane);
 	}
 
@@ -16,6 +15,7 @@
 		grid-template-columns: 4fr 6fr;
 		grid-template-rows: auto auto minmax(0, 1fr) auto;
 		height: 100%;
+		margin: -16px;
 		
 		.citation-explorer-grid-left {
 			border-right: solid 1px ThreeDShadow;
@@ -34,12 +34,19 @@
 		display: flex;
 	}
 	
-	.searchbox-container {
-		border-bottom: 1px solid ThreeDShadow;
-	}
-
 	.virtualized-table-container {
 		height: 100%;
+		border-block: 1px solid ThreeDShadow;
+	}
+
+	.virtualized-table .row {
+		&.odd:not(.selected) {
+			background-color: var(--material-stripe);
+		}
+
+		&.even:not(.selected) {
+			background-color: var(--material-background);
+		}
 	}
 
 	.virtualized-table:focus-within .row.highlighted:not(.selected) {
@@ -47,16 +54,44 @@
 	}
 
 	.button-container {
-		border-block: 1px solid ThreeDShadow;
+		border-bottom: 1px solid ThreeDShadow;
 		display: flex;
 	}
 	
 	@media (-moz-platform: macos) {
-		tab[visuallyselected="true"]:not(:-moz-window-inactive) {
-			color: initial !important;
+		.tabbox-container, #citations-label {
+			padding-top: 16px !important;
 		}
-		#citations-label {
-			font-size: 1.2em;
+
+		.button-container {
+			padding-bottom: 0px;
+			margin-bottom: -16px;
+		}
+		
+		tabbox {
+			flex: 1;
+			flex-direction: row;
+			
+			tabs {
+				flex: 1;
+				margin-bottom: 0;
+				
+				tab {
+					flex: 1;
+
+					&[visuallyselected="true"]:not(:-moz-window-inactive) {
+						color: initial !important;
+					}
+					label.tab-text {
+						flex-direction: column;
+						align-items: center;
+					}
+				}
+				
+				spacer.tabs-right {
+					flex: 0;
+				}
+			}
 		}
 	}