feat: Added blur to compact mode sidebar and the urlbar, b=(no-bug), c=common, compact-mode, workspaces

src/browser/app/profile/features.inc

@@ -55,12 +55,9 @@ pref('zen.urlbar.show-domain-only-in-sidebar', true);
 pref('zen.urlbar.hide-one-offs', true);
 pref('zen.urlbar.enable-overrides', false);
 
-#ifdef XP_MACOSX
+// Exoerimental: Apply a blend mode to the websites so they can render rounded corners
-// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
+// IMPORTANT: Remove once firefox 139 is released
-pref('zen.view.experimental-rounded-view', false);
-#else
 pref('zen.view.experimental-rounded-view', true);
-#endif
 
 // Glance
 pref('zen.glance.enabled', true);

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

@@ -164,18 +164,26 @@
   }
 
   & #urlbar-background {
-    /* We cant have a transparent background with a backdrop-filter because on normal websites,
+    --zen-urlbar-background-base: light-dark(
-      the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
-      due to performance issues */
-    background-color: light-dark(
       hsl(0, 0%, 100%),
       color-mix(in srgb, hsl(0, 0%, 5%) 70%, var(--zen-colors-primary) 30%)
-    ) !important;
+    );
+    @media -moz-pref('zen.view.experimental-rounded-view') {
+      --zen-urlbar-background: color-mix(
+        in srgb,
+        var(--zen-urlbar-background-base) 70%,
+        transparent 30%
+      );
+    }
+    background-color: var(--zen-urlbar-background, var(--zen-urlbar-background-base)) !important;
     box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
     backdrop-filter: none !important;
     border-radius: 12px !important;
     outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;
     outline-offset: -2px;
+    @media -moz-pref('zen.view.experimental-rounded-view') {
+      backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
+    }
   }
 }
 

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

@@ -110,18 +110,13 @@
       }
 
       #navigator-toolbox:not([animate='true']) #titlebar {
-        border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
         padding: var(--zen-toolbox-padding) !important;
         :root:not([zen-sidebar-expanded='true']) & {
           padding: var(--zen-toolbox-padding) 0 !important;
           max-width: var(--zen-sidebar-width);
         }
         position: relative;
-        background: var(--zen-dialog-background);
-        outline: 1px solid var(--zen-colors-border-contrast);
-        outline-offset: -1px;
         min-width: var(--zen-toolbox-min-width);
-        box-shadow: var(--zen-big-shadow);
         transition: visibility 0.15s; /* Same as the toolbox */
         visibility: hidden;
 
@@ -134,16 +129,31 @@
           margin-left: 0 !important;
         }
 
-        @media -moz-pref('zen.view.compact.color-sidebar') {
+        &::before {
-          background: var(--zen-main-browser-background-toolbar) !important;
+          content: '';
-          background-attachment: fixed !important;
+          position: absolute;
-          background-size: 2000px !important; /* Dont ask me why */
+          top: 0;
-          /* NOTE: We MUST not add a backdrop-filter if we want the URL
+          left: 0;
-          * bar to be floating correctly:
+          right: 0;
-          * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
+          bottom: 0;
+          background: var(--zen-dialog-background);
+          outline: 1px solid var(--zen-colors-border-contrast);
+          outline-offset: -1px;
+          box-shadow: var(--zen-big-shadow);
+          pointer-events: none;
+          z-index: -1;
+          border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
+          @media -moz-pref('zen.view.compact.color-sidebar') {
+            background: var(--zen-main-browser-background-toolbar) !important;
+            background-attachment: fixed !important;
+            background-size: 2000px !important;
+            @media -moz-pref('zen.view.experimental-rounded-view') {
+              backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
+            }
+          }
         }
 
-        &::before {
+        &::after {
           content: '';
           position: absolute;
           top: 0;

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -11,6 +11,12 @@
     currentRotation = -45;
     dots = [];
     useAlgo = '';
+
+    #allowTransparencyOnSidebar = Services.prefs.getBoolPref(
+      'zen.view.experimental-rounded-view',
+      false
+    );
+
     constructor() {
       super();
       if (
@@ -922,9 +928,10 @@
     }
 
     getToolbarModifiedBase() {
+      const opacity = this.#allowTransparencyOnSidebar ? 0.6 : 1;
       return this.isDarkMode
-        ? 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, #fff 20%)'
+        ? `color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, rgba(255,255,255,${opacity}) 4%)`
-        : 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 95%, #000 6%)';
+        : `color-mix(in srgb, var(--zen-themed-toolbar-bg) 95%, rgba(0,0,0,${opacity}) 4%)`;
     }
 
     getSingleRGBColor(color, forToolbar = false) {