feat: Fixed blending modes for backgrounds on linux, b=no-bug, c=compact-mode, common

locales/en-US/browser/browser/preferences/zen-preferences.ftl

@@ -57,8 +57,6 @@ zen-tabs-unloader-enabled =
 
 zen-look-and-feel-compact-toolbar-themed =
     .label = Use themed background for compact toolbar
-zen-look-and-feel-compact-sidebar-themed =
-    .label = Use themed background for compact sidebar
 
 zen-workspace-continue-where-left-off =
     .label = Continue where you left off

prefs/compact-mode.yaml

@@ -20,9 +20,6 @@
 - name: zen.view.compact.color-toolbar
   value: true
 
-- name: zen.view.compact.color-sidebar
-  value: true
-
 - name: zen.view.compact.animate-sidebar
   value: true
 

src/browser/components/preferences/zen-settings.js

@@ -1135,11 +1135,6 @@ Preferences.addAll([
     type: 'string',
     default: 'float',
   },
-  {
-    id: 'zen.view.compact.color-sidebar',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.workspaces.separate-essentials',
     type: 'bool',

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -100,9 +100,6 @@
             <checkbox id="zenLooksAndFeelEnableThemedToolbarCompactMode"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-themed"
                       preference="zen.view.compact.color-toolbar"/>
-            <checkbox id="zenLooksAndFeelEnableThemedSidebarCompactMode"
-                      data-l10n-id="zen-look-and-feel-compact-sidebar-themed"
-                      preference="zen.view.compact.color-sidebar"/>
       </vbox>
 </groupbox>
 

src/browser/themes/linux/browser-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index 9723a8199cc5b8d25bb92c46992792b8c94a3565..3496c3ae4bacf39b788f1b0f740e89cdd9d7de5b 100644
+index 9723a8199cc5b8d25bb92c46992792b8c94a3565..302f5b675abd1970e64f56a5a4592bb174f9a72a 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
 @@ -43,7 +43,8 @@
@@ -12,7 +12,7 @@ index 9723a8199cc5b8d25bb92c46992792b8c94a3565..3496c3ae4bacf39b788f1b0f740e89cd
        dialog::backdrop {
          border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
          border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-@@ -51,13 +52,10 @@
+@@ -51,13 +52,11 @@
  
        /* stylelint-disable-next-line media-query-no-invalid */
        @media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
@@ -24,6 +24,7 @@ index 9723a8199cc5b8d25bb92c46992792b8c94a3565..3496c3ae4bacf39b788f1b0f740e89cd
          body,
 -        dialog::backdrop {
 +        dialog::backdrop,
++        #zen-main-app-wrapper,
 +        #zen-browser-background {
            /* Use an uniform clip to allow WebRender to optimize it better */
            border-radius: env(-moz-gtk-csd-titlebar-radius);

src/zen/common/styles/zen-browser-ui.css

@@ -47,7 +47,6 @@
   overflow: clip;
 
   isolation: isolate;
-  background: var(--zen-themed-toolbar-bg-transparent);
 
   &::after,
   &::before {
@@ -71,12 +70,6 @@
       }
     }
 
-    @media (-moz-pref('zen.view.grey-out-inactive-windows')) {
-      &:-moz-window-inactive {
-        background: InactiveCaption;
-      }
-    }
-
     &::before {
       background: var(--zen-main-browser-background-old);
       opacity: calc(1 - var(--zen-background-opacity));
@@ -140,10 +133,16 @@
 }
 
 #zen-main-app-wrapper {
-  background: transparent;
+  background: var(--zen-themed-toolbar-bg-transparent);
   /* See bug #8814, don't an overflow here as it causes issues 
    * with firefox's rendering of the tab bar */
 
+  @media (-moz-pref('zen.view.grey-out-inactive-windows')) {
+    &:-moz-window-inactive {
+      background: InactiveCaption;
+    }
+  }
+
   & > * {
     z-index: 1;
   }

src/zen/common/styles/zen-theme.css

@@ -206,7 +206,7 @@
   --tab-close-button-padding: 5px !important;
 
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg-transparent: transparent;
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
 
   --zen-workspace-indicator-height: 46px;
 
@@ -265,9 +265,14 @@
 #main-window:not([chromehidden~='toolbar']) {
   min-height: 495px !important;
 
-  background: transparent;
-  @media (-moz-windows-mica) and (not (-moz-pref('widget.windows.mica.toplevel-backdrop', 1))) and (not (-moz-pref('widget.windows.mica.toplevel-backdrop', 2))) {
-    --zen-themed-toolbar-bg-transparent: rgba(255, 255, 255, 0.2);
+  @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and 
+        -moz-pref('zen.widget.linux.transparency')) {
+    background: transparent;
+    --zen-themed-toolbar-bg-transparent: transparent;
+
+    @media (-moz-windows-mica) and (not (-moz-pref('widget.windows.mica.toplevel-backdrop', 1))) and (not (-moz-pref('widget.windows.mica.toplevel-backdrop', 2))) {
+      --zen-themed-toolbar-bg-transparent: rgba(255, 255, 255, 0.2);
+    }
   }
 
   &,

src/zen/compact-mode/zen-compact-mode.css

@@ -154,11 +154,15 @@
           @media -moz-pref('zen.theme.acrylic-elements') {
             backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
           }
+
           &::before,
           &::after {
             outline: 1px solid rgba(255, 255, 255, .15);
             outline-offset: -1px;
+            background-attachment: fixed !important;
+            background-size: 2000px !important;
           }
+
           &,
           &::before,
           &::after {