Tab bar: Fix tabs on Windows & Linux

chrome/content/zotero/components/tabBar.jsx

@@ -31,7 +31,7 @@ import cx from 'classnames';
 const TabBar = forwardRef(function (props, ref) {
 	const [tabs, setTabs] = useState([]);
 	const draggingID = useRef(null);
-	const tabsHolderRef = useRef();
+	const tabsRef = useRef();
 	const mouseMoveWaitUntil = useRef(0);
 
 	useEffect(() => {
@@ -55,7 +55,7 @@ const TabBar = forwardRef(function (props, ref) {
 		if (!draggingID.current || mouseMoveWaitUntil.current > Date.now()) {
 			return;
 		}
-		let points = Array.from(tabsHolderRef.current.children).map((child) => {
+		let points = Array.from(tabsRef.current.children).map((child) => {
 			let rect = child.getBoundingClientRect();
 			return rect.left + rect.width / 2;
 		});
@@ -116,12 +116,8 @@ const TabBar = forwardRef(function (props, ref) {
 	}
 
 	return (
-		<div className="tabs" onMouseMove={handleMouseMove}>
+		<div className="tabs" ref={tabsRef} onMouseMove={handleMouseMove}>
-			<div className="tabs-spacer-before"/>
+			{tabs.map((tab, index) => renderTab(tab, index))}
-			<div className="tabs-holder" ref={tabsHolderRef}>
-				{tabs.map((tab, index) => renderTab(tab, index))}
-			</div>
-			<div className="tabs-spacer-after"/>
 		</div>
 	);
 });

chrome/content/zotero/standalone/standalone.js

@@ -42,6 +42,12 @@ const ZoteroStandalone = new function() {
 			window.document.documentElement.setAttribute('sizemode', 'normal');
 		}
 
+		if (Zotero.isMac) {
+			document.documentElement.setAttribute('drawintitlebar', true);
+			document.documentElement.setAttribute('tabsintitlebar', true);
+			document.documentElement.setAttribute('chromemargin', '0,-1,-1,-1');
+		}
+		
 		Zotero.Promise.try(function () {
 			if(!Zotero) {
 				throw true;

chrome/content/zotero/standalone/standalone.xul

@@ -47,9 +47,6 @@
 				windowtype="navigator:browser" 
 				title="&brandShortName;"
 				width="1000" height="600"
-				drawintitlebar="true"
-				tabsintitlebar="true"
-				chromemargin="0,-1,-1,-1"
 				persist="screenX screenY width height sizemode">
 	<script type="application/javascript" src="resource://zotero/require.js"/>
 	<script type="application/javascript" src="standalone.js"/>
@@ -124,7 +121,6 @@
 			</hbox>
 		</hbox>
 	</vbox>
-	<vbox id="tab-bar-container"/>
 	<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
 		<!-- Menu -->
 		<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
@@ -385,6 +381,7 @@
 			</toolbaritem>
 		</toolbar>
 	</toolbox>
+	<vbox id="tab-bar-container"/>
 	<!--<toolbarpalette/>
 
 	<toolbar id="nav-bar" class="toolbar-primary chromeclass-toolbar"

chrome/content/zotero/tabs.js

@@ -63,6 +63,8 @@ var Zotero_Tabs = new function () {
 			title: tab.title,
 			selected: tab.id == this._selectedID
 		})));
+		var { tab } = this._getTab(this._selectedID);
+		document.title = (tab.title.length ? tab.title + ' - ' : '') + 'Zotero';
 	};
 
 	this.init = function () {

scss/components/_mainWindow.scss

@@ -90,6 +90,10 @@ toolbarpaletteitem {
 
 /* ::::: Tabs in Titlebar :::::: */
 
+#main-window:not([chromemargin]) > #titlebar {
+  display: none;
+}
+
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
  * tabstrip can overlap it.

scss/components/_tabBar.scss

@@ -4,16 +4,29 @@
 
 .tabs {
 	display: flex;
-}
 
-.tabs-holder {
+	&:before {
-	display: flex;
+		content: "";
+		width: 0px;
+		min-width: 0px;
+		border-bottom: $tab-border;
+		border-inline-end: $tab-border;
+	}
+
+	&:after {
+		content: "";
+		flex: 1 0 0%;
+		width: 100%;
+		min-width: 0px;
+		border-bottom: $tab-border;
+		border-inline-start: $tab-border;
+	}
 }
 
 .tab {
 	-moz-appearance: none;
 	max-width: 200px;
-	flex: 1;
+	flex: 1 1 200px;
 	height: 30px;
 	line-height: 30px;
 	position: relative;
@@ -24,7 +37,7 @@
 	padding: 0 30px;
 	
 	&:not(:last-child) {
-		border-right: $tab-border;
+		border-inline-end: $tab-border;
 	}
 	
 	&.selected {
@@ -56,4 +69,8 @@
 	&:hover:not(:first-child) .tab-close {
 		display: block;
 	}
+
+	&:not(.selected) {
+		border-bottom: $tab-border;
+	}
 }

scss/linux/_tabBar.scss

@@ -1,3 +0,0 @@
-.tabs-holder {
-	flex: 1;
-}

scss/mac/_tabBar.scss

@@ -2,30 +2,17 @@
 	-moz-window-dragging: drag;
 }
 
-.tabs-spacer-before {
-	width: 78px;
-	border-bottom: $tab-border;
-	border-inline-end: $tab-border;
-}
-
-.tabs-spacer-after {
-	flex: 1;
-	border-inline-start: $tab-border;
-	border-bottom: $tab-border;
-}
-
 .tab {
 	-moz-window-dragging: no-drag;
 }
 
-.tab:not(.selected) {
+.tabs {
-	border-bottom: $tab-border;
+	&:before {
-}
+		width: 78px;
+		min-width: 78px;
+	}
 
-.tab:first-child {
+	&:after {
-	border-left: 0;
+		min-width: 20px;
-}
+	}
-
-.tab:last-child {
-	border-right: 0;
 }

scss/zotero-react-client-unix.scss

@@ -7,5 +7,4 @@
 @import "linux/createParent";
 @import "linux/editable";
 @import "linux/search";
-@import "linux/tabBar";
 @import "linux/tagsBox";