From c93263ccea010af1d021ff03902bd7db4b8a3472 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 11 Jan 2025 23:53:59 +0100
Subject: [PATCH] Add support for essentials favicon background in tab styles

---
 src/browser/app/profile/zen-browser.js        |  1 +
 .../zen-styles/zen-tabs/vertical-tabs.css     | 54 ++++++++++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 3dcd11da4..6da43313e 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -85,6 +85,7 @@ pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
+pref('zen.theme.essentials-favicon-bg', true);
 
 pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', true);
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 58e573579..63acad020 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -948,36 +948,38 @@
     margin-inline-end: 0 !important;
   }
 
-  &[selected] .tab-background {
-    &::after {
-      content: "";
-      inset: -50%;
-      filter: blur(15px);
-      position: absolute;
-      background-size: 100% 100%;
-      background-clip: padding-box;
-      background-image: var(--zen-tab-icon);
-      z-index: -1;
+  @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
+    &[selected] .tab-background {
+      &::after {
+        content: "";
+        inset: -50%;
+        filter: blur(15px);
+        position: absolute;
+        background-size: 100% 100%;
+        background-clip: padding-box;
+        background-image: var(--zen-tab-icon);
+        z-index: -1;
+      }
+
+      background: transparent;
+      overflow: hidden;
+
+      &::before {
+        background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
+        margin: 2px;
+        border-radius: calc(var(--tab-border-radius) - 2px);
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        content: "";
+        transition: background 0.2s ease-in-out;
+      }
     }
 
-    background: transparent;
-    overflow: hidden;
-
-    &::before {
-      background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
-      margin: 2px;
-      border-radius: calc(var(--tab-border-radius) - 2px);
-      position: absolute;
-      inset: 0;
-      z-index: 0;
-      content: "";
-      transition: background 0.2s ease-in-out;
+    &[selected]:hover .tab-background::before {
+      background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
     }
   }
-
-  &[selected]:hover .tab-background::before {
-    background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
-  }
 }