Tab bar: Improve tab close button

chrome/content/zotero/components/icons.jsx

@@ -55,4 +55,5 @@ function i(name, svgOrSrc, hasDPI=true) {
 
 i('TagSelectorMenu', "chrome://zotero/skin/tag-selector-menu.png")
 i('DownChevron', "chrome://zotero/skin/searchbar-dropmarker.png")
+i('Xmark', "chrome://zotero/skin/xmark.png")
 

chrome/content/zotero/components/tabBar.jsx

@@ -27,6 +27,7 @@
 
 import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import cx from 'classnames';
+const { IconXmark } = require('./icons');
 
 const TabBar = forwardRef(function (props, ref) {
 	const [tabs, setTabs] = useState([]);
@@ -44,6 +45,9 @@ const TabBar = forwardRef(function (props, ref) {
 	useImperativeHandle(ref, () => ({ setTabs }));
 
 	function handleMouseDown(event, id, index) {
+		if (event.target.closest('.tab-close')) {
+			return;
+		}
 		if (index != 0) {
 			draggingID.current = id;
 		}
@@ -109,7 +113,7 @@ const TabBar = forwardRef(function (props, ref) {
 					className="tab-close"
 					onClick={(event) => handleTabClose(event, id)}
 				>
-					x
+					<IconXmark/>
 				</div>
 			</div>
 		);

chrome/content/zotero/standalone/standalone.xul

@@ -416,7 +416,7 @@
 			</toolbaritem>
 		</toolbar>
 	</toolbox>
-	<vbox id="tab-bar-container"/>
+	<div xmlns="http://www.w3.org/1999/xhtml" id="tab-bar-container"/>
 	<!--<toolbarpalette/>
 
 	<toolbar id="nav-bar" class="toolbar-primary chromeclass-toolbar"

scss/components/_tabBar.scss

@@ -24,6 +24,7 @@
 }
 
 .tab {
+	box-sizing: border-box;
 	-moz-appearance: none;
 	max-width: 200px;
 	flex: 1 1 200px;
@@ -51,23 +52,30 @@
 		display: -moz-box;
 		position: relative;
 		top: -2px;
+		overflow-y: hidden;
 	}
 
 	.tab-close {
 		position: absolute;
-		left: 6px;
-		top: 7px;
+		right: 6px;
+		top: 6px;
 		width: 16px;
 		height: 16px;
 		text-align: center;
 		line-height: 16px;
-		font-size: 14px;
-		margin-top: -2px;
-		display: none;
+		border-radius: 3px;
+		
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.08);
+		}
+		
+		&:active {
+			background-color: rgba(0, 0, 0, 0.16);
+		}
 	}
 	
-	&:hover:not(:first-child) .tab-close {
-		display: block;
+	&:first-child .tab-close {
+		display: none;
 	}
 
 	&:not(.selected) {