Refactor initialization scripts and update CSS variables for consistent styling across components

package.json

@@ -11,7 +11,7 @@
     "start": "cd engine && ./mach run --noprofile",
     "import": "surfer import",
     "export": "surfer export",
-    "init": "npm run bootstrap && npm run import",
+    "init": "npm run download && npm run bootstrap && npm run import",
     "download": "surfer download",
     "bootstrap": "surfer bootstrap && surfer bootstrap",
     "package": "surfer package",

src/browser/app/profile/zen-browser.js

@@ -102,14 +102,10 @@ pref('zen.injections.match-urls', 'http://localhost/*', locked);
 pref('zen.rice.share.notice.accepted', false);
 
 #ifdef XP_MACOSX
-pref('zen.theme.border-radius', 10); // In pixels
+pref('zen.theme.border-radius', 11); // In pixels
-#else
-#ifdef XP_WIN
-pref('zen.theme.border-radius', 6); // In pixels
 #else
 pref('zen.theme.border-radius', 8); // In pixels
 #endif
-#endif
 
 pref('zen.theme.color-prefs.use-workspace-colors', true);
 pref('zen.theme.color-prefs.amoled', false);

src/browser/base/content/ZenUIManager.mjs

@@ -211,6 +211,7 @@ var gZenVerticalTabsManager = {
       this.__actualWindowButtons = !this.isWindowsStyledButtons
         ? document.querySelector('.titlebar-buttonbox-container') // TODO: test if it works 100% of the time
         : document.querySelector('#nav-bar .titlebar-buttonbox-container');
+      this.__actualWindowButtons.setAttribute('overflows', 'false');
     }
     return this.__actualWindowButtons;
   },

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -7,14 +7,7 @@
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
     --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius, var(--zen-border-radius));
-    border-radius: var(
+    border-radius: var(--zen-native-inner-radius);
-      --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(4px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
-    );
     position: relative;
 
     /* For glance */
@@ -29,7 +22,7 @@
     }
 
     :root:not([zen-no-padding='true']) & {
-      box-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+      box-shadow: var(--zen-big-shadow);
     }
   }
 

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -149,6 +149,7 @@
   display: flex;
   flex-direction: row;
   position: relative;
+  gap: var(--zen-element-separation);
 }
 
 .titlebar-buttonbox-container {

src/browser/base/content/zen-styles/zen-popup.css

@@ -53,7 +53,7 @@
 menupopup,
 panel {
   --panel-background: var(--arrowpanel-background);
-  --panel-border-radius: var(--zen-panel-radius);
+  --panel-border-radius: var(--zen-native-inner-radius);
 }
 
 /* app menu */

src/browser/base/content/zen-styles/zen-rices.css

@@ -15,7 +15,7 @@
 #zen-rice-share-dialog-notice {
   color: var(--panel-color);
   background: var(--arrowpanel-background);
-  border-radius: var(--zen-panel-radius);
+  border-radius: var(--zen-native-inner-radius);
   box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, 0.2);
   border: var(--zen-appcontent-border);
   overflow: hidden;
@@ -130,7 +130,7 @@
     background: rgba(255, 0, 0, 0.1);
     padding: 5px;
     transition: opacity 0.3s ease;
-    border-radius: var(--zen-panel-radius);
+    border-radius: var(--zen-native-inner-radius);
 
     @starting-style {
       opacity: 0;

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -63,6 +63,7 @@
   max-width: 0;
   padding: 0;
   margin: 0;
+  display: none;
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
@@ -79,9 +80,9 @@
 }
 
 #zen-sidebar-web-panel {
-  border-radius: var(--zen-panel-radius);
+  border-radius: var(--zen-native-inner-radius);
   z-index: 2;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--zen-big-shadow);
   border: 1px solid var(--zen-colors-border);
   background: var(--zen-colors-tertiary);
   opacity: 0;
@@ -182,10 +183,6 @@
   display: flex;
 }
 
-#zen-sidebar-web-panel-wrapper {
-  margin: 0 calc(var(--zen-element-separation) / 2) 0 var(--zen-element-separation);
-}
-
 #zen-sidebar-web-panel[pinned='true'] {
   position: absolute;
   z-index: 1;
@@ -289,19 +286,6 @@
   animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
 }
 
-#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([hidden='true'])) {
-  :root:not([zen-right-side='true']) & {
-    margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
-  }
-
-  @media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
-    :root[zen-right-side='true'] & {
-      margin-left: 0 !important;
-      margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
-    }
-  }
-}
-
 /** UNPINNED **/
 #zen-sidebar-web-panel {
   /* Sets perspective */

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -383,15 +383,10 @@
     padding-right: 0;
 
     :root[zen-single-toolbar='true'] & {
-      margin-left: var(--zen-toolbox-padding);
       & #urlbar:not([breakout-extend='true']) .urlbar-input-container {
         padding-left: 4px;
         padding-right: 4px;
       }
-
-      :root[zen-right-side='true'] & {
-        margin-left: 0;
-      }
     }
   }
 
@@ -445,10 +440,8 @@
 
   &:not([zen-right-side='true']) {
     padding-right: 0;
-    & #titlebar {
     padding-left: var(--zen-toolbox-padding);
   }
-  }
 
   & #TabsToolbar-customization-target {
     &::after {

src/browser/base/content/zen-styles/zen-theme.css

@@ -126,7 +126,6 @@
   --browser-area-z-index-toolbox: 2 !important;
 
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
-  --zen-panel-radius: var(--zen-border-radius);
 
   --toolbarbutton-border-radius: 6px;
   --urlbar-margin-inline: 1px !important;
@@ -169,6 +168,18 @@
   --arrowpanel-background: var(--zen-dialog-background) !important;
 
   --tab-selected-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1) !important;
+  --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+
+  /* Nativity */
+  --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius, var(--zen-border-radius));
+  --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(4px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
+  );
 
   /** Other theme-related styles */
   font-family:

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -35,7 +35,7 @@
   border: none !important;
   margin: 1px;
 
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: var(--zen-big-shadow) !important;
   :root[zen-single-toolbar='true'] & {
     box-shadow: none !important;
   }