From b9e140dbbd45e8a5358ef1ecb8700c842bfdc2df Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Tue, 29 Mar 2022 17:14:40 +0300
Subject: [PATCH] Rewrite combined_favicon_and_tab_close_button.css

This rewrites the style to achieve compatibility with
inline_tab_audio_icons.css. compatibility only requires few small
non-affecting extra rules in inline_tab_audio_icons. This patch also
makes combined_favicon_and_tab_close_button work with themes where tab
background is not full opaque which is a nice bonus :)
---
 .../combined_favicon_and_tab_close_button.css | 44 ++++++-------------
 chrome/inline_tab_audio_icons.css             |  7 ++-
 2 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css
index 3c651a3..bdb00c9 100644
--- a/chrome/combined_favicon_and_tab_close_button.css
+++ b/chrome/combined_favicon_and_tab_close_button.css
@@ -3,43 +3,25 @@ See the above repository for updates as well as full license text. */
 
 /* Show tab close button when cursor is over the tab icon */
 
+/* inline_tab_audio_icons.css is recommended because otherwise you cannot mute the tab using the mute button */
+
+.tab-content{
+  pointer-events: none
+}
+.tab-icon-image:not([busy]){ display: block !important; }
+:where(.tab-content:hover) .tab-icon-image,
+:where(.tab-content:hover) > .tab-icon-stack{
+  visibility: hidden;
+}
 .tab-close-button{
   -moz-box-ordinal-group: 0;
   display: -moz-box !important;
   position: relative;
   margin-inline: -4px -20px !important;
   padding-inline-start: 7px !important;
-  z-index: -1;
-  visibility: hidden;
+  opacity: 0;
   width: unset !important;
+  pointer-events: auto;
 }
+.tab-close-button:hover{ opacity: 1 }
 .tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }
-.tabbrowser-tab:hover .tab-close-button{
-  background-color: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
-  background-image: linear-gradient(var(--toolbarbutton-hover-background),var(--toolbarbutton-hover-background))
-}
-
-/**** ONLY USE ONE OF THE FOLLOWING ****/
-/**** These select the behavior of a scenario where the page has no favicon ****/
-
-/*** Option 1 - no favicon - no close-button ***/
-
-/*
-.tab-icon-stack:hover ~ .tab-close-button, .tab-close-button:hover{ visibility: visible; z-index: 1 }
-*/
-
-/*** Option 2 - No icon - always show close-button ***/
-
-/*
-.tab-icon-stack:hover ~ .tab-close-button,
-.tab-close-button:hover,
-.tabbrowser-tab:not([image]) .tab-close-button{ visibility: visible; z-index: 1 }
-.tabbrowser-tab:not([image]) .tab-close-button{ margin-inline-end: 0 !important; }
-*/
-
-/*** Option 3 - No icon - show close-button when cursor is over the tab ***/
-
-.tab-icon-stack:hover ~ .tab-close-button,
-.tab-close-button:hover,
-.tabbrowser-tab:not([image]):hover .tab-close-button{ visibility: visible; z-index: 1;  }
-.tabbrowser-tab:not([image]):hover .tab-close-button{ margin-inline-end: 0 !important; }
diff --git a/chrome/inline_tab_audio_icons.css b/chrome/inline_tab_audio_icons.css
index 28e26f3..db14a85 100644
--- a/chrome/inline_tab_audio_icons.css
+++ b/chrome/inline_tab_audio_icons.css
@@ -20,4 +20,9 @@ See the above repository for updates as well as full license text. */
 .tab-secondary-label{ display: none }
 
 /* show the secondary label when video is in PiP */
-.tab-secondary-label[pictureinpicture]{ display: -moz-box }
\ No newline at end of file
+.tab-secondary-label[pictureinpicture]{ display: -moz-box }
+
+/* These exist for compatibility with combined_favicon_and_tab_close_button.css */
+.tab-icon-overlay{ pointer-events: auto }
+.tab-content > .tab-icon-stack,
+.tab-icon-stack:hover > .tab-icon-image{ visibility: visible }