From ed9866819a794ac51ab13af3e734c5c80582b918 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 4 Nov 2024 15:26:00 +0900
Subject: [PATCH] Fix: Tab - Restore overlay icon shape #1011

---
 css/leptonChrome.css                       | 38 ++++++++++++++++++++++
 css/leptonChromeESR.css                    | 18 ++++++++++
 src/tab/sound_tab/_show_with_favicons.scss | 23 +++++++++++++
 3 files changed, 79 insertions(+)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index e03f87e6..02ad6229 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -8331,6 +8331,24 @@
     width: 17px !important;
     height: 17px !important;
   }
+  .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+    -moz-context-properties: fill, fill-opacity, stroke !important;
+    fill: currentColor !important;
+    border: none !important;
+  }
+  .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+    stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
+    color: var(--tab-icon-overlay-fill, light-dark(black, white));
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[muted] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+  }
   .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
     /* Color */
     color: currentColor !important;
@@ -22921,6 +22939,26 @@
     height: 17px !important;
   }
 }
+@media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") {
+  .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+    -moz-context-properties: fill, fill-opacity, stroke !important;
+    fill: currentColor !important;
+    border: none !important;
+  }
+  .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+    stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
+    color: var(--tab-icon-overlay-fill, light-dark(black, white));
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[muted] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+  }
+}
 @media (-moz-bool-pref: "userChrome.tab.sound_with_favicons") {
   .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
     /* Color */
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
index af55d016..4902780e 100644
--- a/css/leptonChromeESR.css
+++ b/css/leptonChromeESR.css
@@ -8761,6 +8761,24 @@
     width: 17px !important;
     height: 17px !important;
   }
+  .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+    -moz-context-properties: fill, fill-opacity, stroke !important;
+    fill: currentColor !important;
+    border: none !important;
+  }
+  .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+    stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
+    color: var(--tab-icon-overlay-fill, light-dark(black, white));
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[muted] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+  }
+  .tab-icon-overlay:not([crashed])[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+  }
   .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
     /* Color */
     color: currentColor !important;
diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss
index 4d1a5db1..c76a3b14 100644
--- a/src/tab/sound_tab/_show_with_favicons.scss
+++ b/src/tab/sound_tab/_show_with_favicons.scss
@@ -60,6 +60,29 @@
   width: 17px !important;
   height: 17px !important;
 }
+.tab-icon-overlay:not([crashed]) {
+  // https://github.com/black7375/Firefox-UI-Fix/issues/1011
+  &:is([soundplaying], [muted], [activemedia-blocked]) {
+    -moz-context-properties: fill, fill-opacity, stroke !important;
+    fill: currentColor !important;
+    border: none !important;
+  }
+  &:is([pinned], [sharing]) {
+    stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
+    color: var(--tab-icon-overlay-fill, light-dark(black, white));
+  }
+
+  // There is a difference in size between background-image and list-style-image due to margins, etc.
+  &[soundplaying] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+  }
+  &[muted] {
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+  }
+  &[soundplaying] {
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+  }
+}
 .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
   /* Color */
   color: currentColor !important;