no-bug: Apply squircles to elements

prefs/firefox/browser.yaml

@@ -94,3 +94,6 @@
 # See gh-12985 for details on the following preferences
 - name: browser.search.widget.new
   value: true
+
+- name: layout.css.corner-shape.enabled
+  value: true

src/browser/base/content/zen-panels/theme-picker.inc

@@ -131,10 +131,10 @@
             </box>
             <html:input type="range" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity"
 #ifdef XP_MACOSX
-              max="0.9"
+              max="0.8"
               min="0.30"
 #else
-              max="0.9"
+              max="0.8"
               min="0.25"
 #endif
               />

src/external-patches/firefox/corner_shape_support/D303334.patch

@@ -0,0 +1,15 @@
+diff --git a/servo/components/style/values/generics/border.rs b/servo/components/style/values/generics/border.rs
+--- a/servo/components/style/values/generics/border.rs
++++ b/servo/components/style/values/generics/border.rs
+@@ -296,9 +296,9 @@
+     pub fn all(s: S) -> Self {
+         Self {
+             top_left: s.clone(),
+             top_right: s.clone(),
+             bottom_right: s.clone(),
+-            bottom_left: s.clone(),
++            bottom_left: s,
+         }
+     }
+ }
+

src/external-patches/firefox/corner_shape_support/D304517.patch

@@ -0,0 +1,38 @@
+diff --git a/gfx/wr/glsl-to-cxx/src/hir.rs b/gfx/wr/glsl-to-cxx/src/hir.rs
+--- a/gfx/wr/glsl-to-cxx/src/hir.rs
++++ b/gfx/wr/glsl-to-cxx/src/hir.rs
+@@ -3531,10 +3531,11 @@
+         None,
+         Type::new(Float),
+         vec![Type::new(Vec2)],
+     );
+     declare_function(state, "pow", None, Type::new(Vec3), vec![Type::new(Vec3)]);
++    declare_function(state, "pow", None, Type::new(Vec2), vec![Type::new(Vec2)]);
+     declare_function(state, "pow", None, Type::new(Float), vec![Type::new(Float)]);
+     declare_function(state, "exp", None, Type::new(Float), vec![Type::new(Float)]);
+     declare_function(state, "exp2", None, Type::new(Float), vec![Type::new(Float)]);
+     declare_function(state, "log", None, Type::new(Float), vec![Type::new(Float)]);
+     declare_function(state, "log2", None, Type::new(Float), vec![Type::new(Float)]);
+diff --git a/gfx/wr/swgl/src/glsl.h b/gfx/wr/swgl/src/glsl.h
+--- a/gfx/wr/swgl/src/glsl.h
++++ b/gfx/wr/swgl/src/glsl.h
+@@ -800,10 +800,18 @@
+ 
+ Float pow(Float x, Float y) {
+   return if_then_else((x == 0) | (x == 1), x, approx_pow2(approx_log2(x) * y));
+ }
+ 
++vec2 pow(vec2 a, vec2 b) {
++  return vec2(pow(a.x, b.x), pow(a.y, b.y));
++}
++
++vec2_scalar pow(vec2_scalar a, vec2_scalar b) {
++  return vec2_scalar(pow(a.x, b.x), pow(a.y, b.y));
++}
++
+ #define exp __glsl_exp
+ 
+ SI float exp(float x) { return expf(x); }
+ 
+ Float exp(Float y) {
+

src/external-patches/manifest.json

@@ -2,6 +2,16 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 [
+  {
+    "type": "phabricator",
+    "ids": [
+      "D296935",
+      "D303334",
+      "D297660",
+      "D304517"
+    ],
+    "name": "Corner shape support"
+  },
   {
     "type": "phabricator",
     "ids": [

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

@@ -185,7 +185,7 @@
 .toolbarbutton-1:not(#tabs-newtab-button),
 .urlbar-page-action,
 .identity-box-button {
-  --tab-border-radius: 6px;
+  --tab-border-radius: 8px;
   --toolbarbutton-border-radius: var(--tab-border-radius);
   --toolbarbutton-inner-padding: 6px;
   --toolbarbutton-outer-padding: 1px;

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

@@ -213,6 +213,8 @@
   --toolbarbutton-border-radius: 6px;
   --urlbar-margin-inline: 1px !important;
 
+  --zen-squircle-value: 1.3;
+
   --tab-icon-overlay-stroke: light-dark(white, black) !important;
   --tab-close-button-padding: 4px !important;
 
@@ -343,3 +345,7 @@
 }
 
 %include zen-buttons.css
+
+*:not(.no-squircles) {
+  corner-shape: superellipse(var(--zen-squircle-value));
+}

src/zen/glance/zen-glance.css

@@ -41,11 +41,11 @@
 
     &:hover {
       background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
-      scale: 1.05;
+      scale: 1.02;
     }
 
     &:hover:active {
-      scale: 0.95;
+      scale: 0.98;
     }
 
     & label {

src/zen/glance/zen-glance.inc.xhtml

@@ -4,8 +4,8 @@
 
 <html:template id="zen-glance-sidebar-template">
   <vbox class="zen-glance-sidebar-container">
-    <toolbarbutton class="zen-glance-sidebar-close toolbarbutton-1" command="cmd_zenGlanceClose" data-l10n-id="zen-general-confirm" />
-    <toolbarbutton class="zen-glance-sidebar-open toolbarbutton-1" command="cmd_zenGlanceExpand" />
-    <toolbarbutton class="zen-glance-sidebar-split toolbarbutton-1" command="cmd_zenGlanceSplit" />
+    <toolbarbutton class="no-squircles zen-glance-sidebar-close toolbarbutton-1" command="cmd_zenGlanceClose" data-l10n-id="zen-general-confirm" />
+    <toolbarbutton class="no-squircles zen-glance-sidebar-open toolbarbutton-1" command="cmd_zenGlanceExpand" />
+    <toolbarbutton class="no-squircles zen-glance-sidebar-split toolbarbutton-1" command="cmd_zenGlanceSplit" />
   </vbox>
 </html:template>

src/zen/spaces/ZenGradientGenerator.mjs

@@ -1496,7 +1496,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
 
   getToolbarColor(isDarkMode = false, accentColor = null) {
     const opacity = 0.8;
-    let baseColor = isDarkMode ? [255, 255, 255, opacity] : [0, 0, 0, opacity]; // Default toolbar
+    let baseColor = isDarkMode ? [225, 225, 225, opacity] : [30, 30, 30, opacity]; // Default toolbar
     if (accentColor) {
       return this.blendColors(baseColor.slice(0, 3), accentColor, 75).concat(1);
     }

src/zen/spaces/zen-workspaces.css

@@ -32,6 +32,7 @@
   & toolbarbutton {
     margin: 0;
     max-width: 28px;
+    border-radius: var(--toolbarbutton-border-radius);
     height: 28px;
     display: flex;
     justify-content: center;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -235,7 +235,7 @@
   }
 
   @media (-moz-platform: macos) {
-    --border-radius-medium: 12px;
+    --border-radius-medium: 14px;
     --tab-border-radius: 8px;
   }
 
@@ -1241,6 +1241,8 @@
         background: var(--zen-essential-tab-selected-bg);
         margin: var(--zen-essential-bg-margin);
         border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
+        /* stylelint-disable-next-line property-no-unknown */
+        corner-shape: var(--zen-squircle-value);
         position: absolute;
         inset: 0;
         z-index: 0;