gh-15157: Add support for squircles on the Chrome UI (gh-14009)

prefs/firefox/browser.yaml

@@ -95,6 +95,9 @@
 - name: browser.search.widget.new
   value: true
 
+- name: layout.css.corner-shape.enabled
+  value: true
+
 # Disabled from https://searchfox.org/firefox-main/rev/d6bfff43852356ca98af848b4705d37f8d41856f/modules/libpref/init/StaticPrefList.yaml#2008
 # Only enabled for windows, doesn't really fit inside Zen.
 - name: browser.startup.preXulSkeletonUI

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index dd2f391096968564086911c532f696dc7ffb8ae1..3de617bf4fb7fa35f7d4d7b618e4673b72b953ee 100644
+index dd2f391096968564086911c532f696dc7ffb8ae1..c968e5f0ebb5f0151fb124bafe10d8d5361e060f 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -19,7 +19,7 @@ index dd2f391096968564086911c532f696dc7ffb8ae1..3de617bf4fb7fa35f7d4d7b618e4673b
    </toolbar>
  
 +<hbox id="titlebar">
-+  <html:div id="zen-toolbar-background" class="zen-toolbar-background zen-browser-generic-background">
++  <html:div id="zen-toolbar-background" class="zen-toolbar-background zen-squircle-before zen-squircle-after zen-browser-generic-background">
 +    <html:div class="zen-browser-grain" />
 +  </html:div>
 +  <box id="zen-overflow-extensions-list" skipintoolbarset="true" contextmenu="toolbar-context-menu" />

src/browser/base/content/zen-panels/site-data.inc

@@ -15,19 +15,23 @@
                 mainview-with-header="true">
       <hbox id="zen-site-data-header">
         <toolbarbutton id="zen-site-data-header-share"
+                        class="zen-squircle-before"
                         data-l10n-id="zen-site-data-header-share"
                         flex="1"
                         closemenu="none" />
         <toolbarbutton id="zen-site-data-header-reader-mode"
+                        class="zen-squircle-before"
                         data-l10n-id="zen-site-data-header-reader-mode"
                         command="View:ReaderView"
                         tooltip="dynamic-shortcut-tooltip"
                         flex="1" />
         <toolbarbutton id="zen-site-data-header-screenshot"
+                        class="zen-squircle-before"
                         data-l10n-id="zen-site-data-header-screenshot"
                         command="Browser:Screenshot"
                         flex="1" />
         <toolbarbutton id="zen-site-data-header-bookmark"
+                        class="zen-squircle-before"
                         data-l10n-id="zen-site-data-header-bookmark"
                         command="Browser:AddBookmarkAs"
                         flex="1" />

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/manifest.json

@@ -56,5 +56,19 @@
     "type": "phabricator",
     "id": "D321446",
     "name": "Issue 14710"
+  },
+  {
+    "type": "local",
+    // CSS corner-shape rendering stack from bug 2047627 (borders),
+    // bug 2048908 (box shadows) and bug 2058091 (inset), squashed into a
+    // single patch: surfer's revert-then-apply on re-import only works for
+    // independently revertible patches, so a stack of separate files fails.
+    // Combined revisions, in stack order: D313684, D314332-D314337,
+    // D316301-D316304, D317056-D317058. The earlier revisions of these
+    // bugs (D306773-D306779, D308243, D311523) already landed in the
+    // current Firefox version and are omitted. D314332, D314336, D316301,
+    // D316303, D316304, D317057 and D317058 are hand-rebased onto
+    // Firefox 154 (the upstream diffs target a newer mozilla-central).
+    "path": "firefox/css_corner_shape_rendering.patch"
   }
 ]

src/zen/boosts/zen-boost-editor.inc.xhtml

@@ -49,9 +49,9 @@
     <vbox flex="1" id="zen-boost-filter-wrapper">
       <hbox class="zen-boost-color-picker-gradient zen-boost-panel-disabled">
         <button data-l10n-id="zen-boost-magic-theme" id="zen-boost-magic-theme" class="subviewbutton mod-button"></button>
-        <html:div id="zen-boost-color-picker-dot-primary" class="zen-boost-color-picker-dot"></html:div>
-        <html:div id="zen-boost-color-picker-dot-secondary" class="zen-boost-color-picker-dot"></html:div>
-        <html:div class="zen-boost-color-picker-circle"></html:div>
+        <html:div id="zen-boost-color-picker-dot-primary" class="zen-boost-color-picker-dot no-squircles"></html:div>
+        <html:div id="zen-boost-color-picker-dot-secondary" class="zen-boost-color-picker-dot no-squircles"></html:div>
+        <html:div class="zen-boost-color-picker-circle no-squircles"></html:div>
       </hbox>
 
       <hbox flex="1" id="zen-boost-toolbar-wrapper-colors">

src/zen/boosts/zen-boosts.css

@@ -194,7 +194,8 @@ body {
   max-height: 40px;
   align-items: center;
   background-color: var(--zen-boosts-secondary-background);
-  border: solid 1px var(--zen-boosts-primary-border-color);
+  border: solid 1px transparent;
+  border-bottom-color: var(--zen-boosts-primary-border-color);
 
   @media (-moz-windows-mica) {
     background-color: var(--zen-boosts-mica-background);

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

@@ -717,6 +717,10 @@
   display: none;
 }
 
+.urlbarView {
+  overflow: visible;
+}
+
 #urlbar-search-mode-indicator-title {
   font-weight: 600;
   padding: 0;

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

@@ -335,7 +335,7 @@ menuseparator {
     gap: 8px;
     z-index: 1000;
     padding: var(--zen-toast-padding);
-    border-radius: 10px;
+    border-radius: 14px;
     background: linear-gradient(to bottom, var(--zen-primary-color) -40%, color-mix(in srgb, var(--zen-primary-color), #0f0f0f 20%));
     box-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)) 0 0 22px 2px;
     border: none;
@@ -374,7 +374,7 @@ menuseparator {
       min-width: unset !important;
       min-height: 28px;
       margin: 0 !important;
-      border-radius: 6px !important;
+      border-radius: 10px !important;
       border-top: 2px solid light-dark(transparent, rgba(255, 255, 255, 0.1));
       color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)) !important;
       box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);

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-padding-inner: 6px;
   --toolbarbutton-padding-outer: 1px;
@@ -601,6 +601,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
+
       @media (-moz-platform: macos) {
         background: linear-gradient(to bottom, light-dark(rgb(255, 255, 255), rgb(34, 34, 34)), light-dark(rgb(246, 246, 246), rgb(21, 21, 21)));
 

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

@@ -217,6 +217,16 @@
   --toolbarbutton-border-radius: 6px;
   --urlbar-margin-inline: 1px !important;
 
+  --zen-squircle-value: 1.3;
+
+  @media (-moz-platform: windows) {
+    --zen-squircle-value: 2.1;
+  }
+
+  @media (-moz-platform: linux) {
+    --zen-squircle-value: 1.2;
+  }
+
   --tab-icon-overlay-stroke: light-dark(white, black) !important;
   --tab-close-button-padding: 4px !important;
 
@@ -348,3 +358,11 @@
 }
 
 %include zen-buttons.css
+
+@media (-moz-pref('layout.css.corner-shape.enabled')) {
+  *:not(.no-squircles),
+  .zen-squircle-before::before,
+  .zen-squircle-after::after {
+    corner-shape: superellipse(var(--zen-squircle-value));
+  }
+}

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

@@ -29,7 +29,7 @@
   &,
   &::before,
   &::after {
-    border-radius: calc(var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px));
+    border-radius: calc((var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px)) * var(--zen-squircle-value));
   }
 }
 

src/zen/folders/ZenFolder.mjs

@@ -12,7 +12,7 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   #initialized = false;
 
   static markup = `
-      <hbox class="tab-group-label-container zen-drop-target" pack="center">
+      <hbox class="tab-group-label-container zen-squircle-before zen-drop-target" pack="center">
         <html:div class="tab-group-folder-icon"/>
         <label class="tab-group-label" role="button"/>
         <image class="tab-reset-button reset-icon" role="button" keyNav="false" data-l10n-id="zen-folders-unload-all-tooltip"/>

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/ZenSpace.mjs

@@ -52,7 +52,7 @@ export class nsZenWorkspace extends MozXULElement {
 
   static get markup() {
     return `
-        <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator zen-drop-target" flex="1" context="zenWorkspaceMoreActions">
+        <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator zen-squircle-before zen-drop-target" flex="1" context="zenWorkspaceMoreActions">
           <stack class="zen-current-workspace-indicator-stack">
             <image class="zen-current-workspace-indicator-chevron" />
             <hbox class="zen-current-workspace-indicator-icon" />

src/zen/spaces/zen-gradient-generator.css

@@ -231,6 +231,13 @@
     width: var(--zen-thumb-width);
     cursor: pointer;
     border: none;
+    transform: scale(1);
+    transform-origin: center;
+    transition: transform 0.5s;
+  }
+
+  &:hover::-moz-range-thumb {
+    transform: scale(1.1);
   }
 
   &::-moz-range-track {
@@ -338,7 +345,7 @@
       display: none;
     }
 
-    &:hover {
+    &:not([disabled]):hover {
       background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
     }
 

src/zen/spaces/zen-workspaces.css

@@ -31,6 +31,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

@@ -225,19 +225,9 @@
    ========================================================================== */
 #navigator-toolbox {
   /* Define theme variables, including platform specifics for native look */
-  --border-radius-medium: 10px;
-  --tab-border-radius: 6px;
   --zen-toolbox-min-width: 1px;
-
-  @media (-moz-platform: windows) {
-    --border-radius-medium: 6px;
-    --tab-border-radius: 4px;
-  }
-
-  @media (-moz-platform: macos) {
-    --border-radius-medium: 12px;
-    --tab-border-radius: 8px;
-  }
+  --border-radius-medium: 14px;
+  --tab-border-radius: 8px;
 
   min-width: var(--zen-toolbox-min-width);
   margin-top: 0 !important;
@@ -1208,6 +1198,8 @@
         background-position: center;
         fill: currentColor;
         -moz-context-properties: fill, fill-opacity;
+        /* stylelint-disable-next-line property-no-unknown */
+        corner-shape: superellipse(var(--zen-squircle-value));
       }
 
       background: transparent;
@@ -1232,6 +1224,8 @@
         z-index: 0;
         content: "";
         transition: background 0.1s ease-in-out;
+        /* stylelint-disable-next-line property-no-unknown */
+        corner-shape: superellipse(var(--zen-squircle-value));
       }
     }
 
@@ -1340,7 +1334,7 @@
 
 #tabs-newtab-button:not([in-urlbar="true"]) label,
 .zen-current-workspace-indicator-name {
-  opacity: 0.7;
+  color: color-mix(in srgb, currentColor 70%, transparent);
 }
 
 /* stylelint-disable-next-line media-query-no-invalid */