Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

prefs/zen/theme.yaml

@@ -41,12 +41,7 @@
 
 # ==== Mark: border radius ====
 
-# macOS border radius
+# -1 will use platform-native values
+# Set to a positive value to override with a custom radius
 - name: zen.theme.border-radius
-  value: 10
-  condition: 'defined(XP_MACOSX)'
-
-# non-macOS border radius
-- name: zen.theme.border-radius
-  value: 8
-  condition: '!defined(XP_MACOSX)'
+  value: -1

src/zen/common/styles/zen-single-components.css

@@ -232,7 +232,7 @@ body > #confetti {
 
 #zen-update-animation-border {
   position: absolute;
-  border-radius: var(--zen-native-content-radius);
+  border-radius: var(--zen-border-radius);
   width: 100%;
   height: 100%;
 }

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

@@ -232,8 +232,8 @@
   --toolbar-field-color: var(--toolbox-textcolor) !important;
 
   &[zen-private-window='true'] {
-    --zen-main-browser-background: linear-gradient(130deg, 
-      color-mix(in srgb, rgb(10, 6, 11) 80%, var(--zen-themed-toolbar-bg-transparent)) 0%, 
+    --zen-main-browser-background: linear-gradient(130deg,
+      color-mix(in srgb, rgb(10, 6, 11) 80%, var(--zen-themed-toolbar-bg-transparent)) 0%,
       color-mix(in srgb, rgb(19, 7, 22) 80%, var(--zen-themed-toolbar-bg-transparent)) 100%
     );
     --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
@@ -268,21 +268,13 @@
   );
   --zen-sidebar-notification-shadow: 0 0 6px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
 
-  /* Nativity */
-  --zen-native-content-radius: var(--zen-border-radius);
-  @media (-moz-platform: linux) {
-    --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius);
-  }
-  @media (-moz-mac-tahoe-theme) {
-    --zen-native-content-radius: 15px;
-  }
   --zen-native-inner-radius: var(
     --zen-webview-border-radius,
     /* Inner radius calculation:
        * 1. If the native radius - the separation is less than 4px, use 4px.
        * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
      */
-      max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
+      max(5px, calc(var(--zen-border-radius) - var(--zen-element-separation) / 2))
   );
 
   /** Other theme-related styles */
@@ -306,7 +298,7 @@
 #main-window:not([chromehidden~='toolbar']) {
   min-height: 495px !important;
 
-  @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and 
+  @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;

src/zen/common/zenThemeModifier.js

@@ -19,7 +19,7 @@ const kZenMaxElementSeparation = 12;
 
 /**
  * ZenThemeModifier controls the application of theme data to the browser,
- * for examplem, it injects the accent color to the document. This is used
+ * for example, it injects the accent color to the document. This is used
  * because we need a way to apply the accent color without having to worry about
  * shadow roots not inheriting the accent color.
  *
@@ -87,8 +87,28 @@ var ZenThemeModifier = {
   },
 
   updateBorderRadius() {
-    const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius');
-    document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
+    const borderRadius = Services.prefs.getIntPref('zen.theme.border-radius', -1);
+
+    // -1 is the default value, will use platform-native values
+    // otherwise, use the custom value
+    if (borderRadius == -1) {
+      if (AppConstants.platform == 'macosx') {
+        const targetRadius = window.matchMedia('(-moz-mac-tahoe-theme)').matches ? 15 : 10;
+        document.documentElement.style.setProperty('--zen-border-radius', targetRadius + 'px');
+      } else if (AppConstants.platform == 'linux') {
+        // Linux uses GTK CSD titlebar radius, default to 8px
+        document.documentElement.style.setProperty(
+          '--zen-border-radius',
+          'env(-moz-gtk-csd-titlebar-radius, 8px)'
+        );
+      } else {
+        // Windows defaults to 8px
+        document.documentElement.style.setProperty('--zen-border-radius', '8px');
+      }
+    } else {
+      // Use the overridden value
+      document.documentElement.style.setProperty('--zen-border-radius', borderRadius + 'px');
+    }
   },
 
   updateElementSeparation() {

src/zen/downloads/zen-download-box-animation.css

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--toolbar-color);
-  border-radius: var(--zen-native-content-radius);
+  border-radius: var(--zen-border-radius);
   box-shadow: var(--zen-big-shadow);
   pointer-events: none;
   z-index: 1100;