Tabsbar: Bring back custom tab close overlay

Revert cd3a91cd27
Manually calcualte all the colors for private windows

theme/colors/dark.css

@@ -68,11 +68,13 @@
 		/* Tabs */
 		--gnome-tabbar-background: var(--gnome-headerbar-background);
 		--gnome-tabbar-tab-separator-color: rgba(255, 255, 255, .15);
-		--gnome-tabbar-tab-hover-background: rgba(255, 255, 255, .07);
+		--gnome-tabbar-tab-hover-background: #3f3f3f; /* Hardcoded color */
-		--gnome-tabbar-tab-active-background: rgba(255, 255, 255, .1);
+		--gnome-tabbar-tab-active-background: #444444; /* Hardcoded color */
-		--gnome-tabbar-tab-active-background-contrast: rgba(255, 255, 255, .3);
+		--gnome-tabbar-tab-active-background-contrast: #4F4F4F; /* Hardcoded color */
-		--gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, .13);
+		--gnome-tabbar-tab-active-hover-background: #4b4b4b; /* Hardcoded color */
 		--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
+		--gnome-inactive-tabbar-tab-hover-background: #2c2c2c; /* Hardcoded color */
+		--gnome-inactive-tabbar-tab-active-background: #2e2e2e; /* Hardcoded color */
 		--gnome-tab-button-background: rgba(0, 0, 0, .5);
 		--gnome-tab-button-hover-background: rgba(0, 0, 0, .6);
 		--gnome-tabbar-tab-identity-base-opacity: 0;
@@ -91,6 +93,13 @@
 		/* Header bar */
 		--gnome-private-headerbar-background: #252F49;
 		--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+		/* Tabs */
+		--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
+		--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
+		--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
+		--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
+		--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
+		--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
 
 		/* Text color for Firefox Logo in new private tab */
 		--gnome-private-wordmark: #FBFBFE;

theme/colors/light.css

@@ -68,13 +68,13 @@
 	/* Tabs */
 	--gnome-tabbar-background: var(--gnome-headerbar-background);
 	--gnome-tabbar-tab-separator-color: var(--gnome-toolbar-border-color);
-	--gnome-tabbar-tab-hover-background: rgba(0, 0, 0, .056);
+	--gnome-tabbar-tab-hover-background: #dedede; /* Hardcoded color */
-	--gnome-tabbar-tab-active-background: rgba(0, 0, 0, .08);
+	--gnome-tabbar-tab-active-background: #d9d9d9; /* Hardcoded color */
-	--gnome-tabbar-tab-active-background-contrast: rgba(0, 0, 0, .24);
+	--gnome-tabbar-tab-active-background-contrast: #c0c0c0; /* Hardcoded color */
-	--gnome-tabbar-tab-active-hover-background: rgba(0, 0, 0, .104);
+	--gnome-tabbar-tab-active-hover-background: #d2d2d2; /* Hardcoded color */
 	--gnome-inactive-tabbar-background: var(--gnome-inactive-headerbar-background);
-	--gnome-tab-button-background: rgba(255, 255, 255, .5);
+	--gnome-inactive-tabbar-tab-hover-background: #f3f3f3; /* Hardcoded color */
-	--gnome-tab-button-hover-background: rgba(255, 255, 255, .6);
+	--gnome-inactive-tabbar-tab-active-background: #f0f0f0; /* Hardcoded color */
 	--gnome-tabbar-tab-identity-base-opacity: .1;
 	--gnome-tabbar-tab-needs-attetion: #84AEE2;
 }
@@ -91,6 +91,13 @@
 	/* Header bar */
 	--gnome-private-headerbar-background: #D7E3F0;
 	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
 
 	/* Text color for Firefox Logo in new private tab */
 	--gnome-private-wordmark: #20123A;

theme/parts/headerbar-private-window.css

@@ -13,6 +13,13 @@
 	/* Change headerbar colors */
 	--gnome-headerbar-background: var(--gnome-private-headerbar-background) !important;
 	--gnome-inactive-headerbar-background: var(--gnome-private-inactive-headerbar-background) !important;
+	/* Tabs */
+	--gnome-tabbar-tab-hover-background: var(--gnome-private-tabbar-tab-hover-background);
+	--gnome-tabbar-tab-active-background: var(--gnome-private-tabbar-tab-active-background);
+	--gnome-tabbar-tab-active-background-contrast: var(--gnome-private-tabbar-tab-active-background-contrast);
+	--gnome-tabbar-tab-active-hover-background: var(--gnome-private-tabbar-tab-active-hover-background);
+	--gnome-inactive-tabbar-tab-hover-background: var(--gnome-private-inactive-tabbar-tab-hover-background);
+	--gnome-inactive-tabbar-tab-active-background: var(--gnome-private-inactive-tabbar-tab-active-background);
 }
 
 /* Add private window headerbar indicator */

theme/parts/tabsbar.css

@@ -275,9 +275,6 @@ tab {
 }
 
 /* Close tab button */
-:root {
-	--gnome-fill-icon: red !important;
-}
 .tab-close-button {
 	list-style-image: url("../icons/window-close-symbolic.svg") !important;
 	fill: var(--gnome-toolbar-color) !important;
@@ -327,11 +324,38 @@ tab {
 }
 
 /* Close button overlay */
-.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) {
+.tabbrowser-tab:not([pinned]) .tab-content::before {
-	--tab-label-mask-size: 32px !important;
+	border-radius: 0 6px 6px 0;
+	content: "";
+	height: 100%;
+	opacity: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.2s ease-out;
+	width: 55px;
 }
-.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) .tab-label-container:not([textoverflow]) {
+.tabbrowser-tab:not([pinned]) .tab-content::before {
-	mask-image: linear-gradient(to left, transparent calc(var(--tab-label-mask-size) - 20px), black var(--tab-label-mask-size)) !important;
+	background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent);
+	z-index: 99;
+}
+.tabbrowser-tab:not([pinned]):is([selected="true"], :hover) .tab-content::before {
+	opacity: 1;
+}
+.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background);
+}
+.tabbrowser-tab:not([pinned], :-moz-window-inactive)[selected="true"]:hover .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background);
+}
+.tabbrowser-tab:not([pinned]):hover .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background);
+}
+.tabbrowser-tab:not([pinned])[selected="true"]:-moz-window-inactive .tab-content::before {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-active-background);
+}
+.tabbrowser-tab:not([pinned]):hover:-moz-window-inactive .tab-content::before  {
+	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-inactive-tabbar-tab-hover-background);
 }
 
 /* Tab close button etc. positioning */
@@ -347,9 +371,12 @@ tab {
 .tab-background[selected=true]  {
 	background-color: var(--gnome-tabbar-tab-active-background) !important;
 }
+.tab-background[selected=true]:-moz-window-inactive  {
+	background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
+}
 
 /* Tab hover */
-.tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] {
+.tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true]:not(:-moz-window-inactive) {
 	background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
 }
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
@@ -361,6 +388,9 @@ tab {
 	background-color: var(--gnome-tabbar-tab-hover-background) !important;
 	border-image: none !important;
 }
+:root:-moz-window-inactive .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+	background-color: var(--gnome-inactive-tabbar-tab-hover-background) !important;
+}
 
 /* Full width tabs */
 .tabbrowser-tab:not([style^="max-width"]):not([pinned]),
@@ -387,6 +417,12 @@ tab {
 .tabbrowser-tab[class*="identity-color-"] .tab-label-container {
 	color: var(--identity-tab-color) !important;
 }
+/*.tabbrowser-tab.tabbrowser-tab[class*="identity-color-"] {
+	background-image: radial-gradient(ellipse closest-side, var(--identity-icon-color) 1%, transparent 95%);
+	background-repeat: no-repeat;
+	background-position: center 36px;
+	background-size: 150% 100%;
+}*/
 
 /* Needs attetion tab indicator */
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
@@ -434,6 +470,10 @@ tab {
 	:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) {
 		background: var(--gnome-tabbar-tab-active-background-contrast) !important;
 	}
+	.tabbrowser-tab:not([pinned])[selected="true"] .tab-content::before,
+	:root:not(:-moz-window-inactive) .tabbrowser-tab:hover .tab-content::before {
+		--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important;
+	}
 }
 
 /* OPTIONAL: Show the close button on the selected tab only */
@@ -445,7 +485,7 @@ tab {
 	}
 	/* Hide the close button overlay on hover */
 	.tabbrowser-tab:not([pinned]):hover .tab-content::before {
-		--tab-label-mask-size: 2em !important;
+		--gnome-tabbar-tab-close-overlay-bg: unset;
 	}
 	/* Reset the overflow position of the tab label container */
 	.tabbrowser-tab:not([pinned]):not([selected="true"]):hover .tab-label-container[textoverflow="true"] {