feat: Imrove border spacing for no-separation in compact mode and other small tweaks, b=no-bug, c=compact-mode, folders, workspaces

prefs/urlbar.yaml

@@ -23,7 +23,7 @@
   value: true
 
 - name: browser.urlbar.maxRichResults
-  value: 7
+  value: 5
 
 # Enable private suggestions
 - name: browser.search.suggest.enabled

src/browser/themes/shared/urlbarView-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
-index 428ce749239be2a54c86e0feff123772d1a1d697..9f33c10add207c7971c07743147a458e19b469bb 100644
+index 428ce749239be2a54c86e0feff123772d1a1d697..bfef48f520dac8968f79d06cbef2e5a047ded748 100644
 --- a/browser/themes/shared/urlbarView.css
 +++ b/browser/themes/shared/urlbarView.css
 @@ -20,7 +20,7 @@
@@ -11,3 +11,11 @@ index 428ce749239be2a54c86e0feff123772d1a1d697..9f33c10add207c7971c07743147a458e
    --urlbarView-row-gutter: 2px;
    --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
    --urlbarView-item-block-padding: 6px;
+@@ -168,7 +168,6 @@
+       min-height: 32px;
+     }
+     :root[uidensity="touch"] & {
+-      padding-block: 11px;
+     }
+   }
+ 

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

@@ -50,6 +50,9 @@
       #navigator-toolbox {
         --zen-toolbox-max-width: 74px !important;
         --zen-compact-float: var(--zen-element-separation);
+        :root[zen-no-padding='true'] & {
+          --zen-compact-float: 10px;
+        }
 
         /* Initial padding for when we are animating */
         padding: 0 0 0 var(--zen-toolbox-padding) !important;
@@ -62,14 +65,14 @@
             right 0.15s ease,
             visibility 0.15s ease;
           top: 0;
-          bottom: var(--zen-element-separation);
+          bottom: var(--zen-compact-float);
           padding: 0 var(--zen-compact-float) !important;
           :root[zen-single-toolbar='true'] & {
-            top: calc(var(--zen-element-separation) / 2);
-            height: calc(100% - var(--zen-element-separation));
+            top: calc(var(--zen-compact-float) / 2);
+            height: calc(100% - var(--zen-compact-float));
           }
           :root:not([zen-single-toolbar='true']) & {
-            top: calc(var(--zen-element-separation) / -2);
+            top: calc(var(--zen-compact-float) / -2);
             height: calc(100% - var(--zen-toolbar-height));
             @media -moz-pref('zen.view.compact.hide-toolbar') {
               height: 100%;
@@ -289,10 +292,6 @@
             1.003423 100%
           );
           --zen-compact-mode-time: 0.25s;
-          :root[zen-no-padding='true'] & {
-            --zen-compact-mode-func: ease-out;
-            --zen-compact-mode-time: 0.1s;
-          }
           transition:
             left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
             right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
@@ -303,9 +302,9 @@
               visibility: visible;
             }
 
-            left: calc(var(--zen-element-separation) / -2 - 1px);
+            left: calc(var(--zen-compact-float) / -2);
             :root[zen-right-side='true'] & {
-              right: calc(var(--zen-element-separation) / -2 - 1px);
+              right: calc(var(--zen-compact-float) / -2);
               left: auto;
             }          
           }

src/zen/folders/ZenFolders.mjs

@@ -42,6 +42,8 @@
     #foldersEnabled = false;
     #folderAnimCache = new Map();
 
+    #animationCount = 0;
+
     init() {
       this.#foldersEnabled = !gZenWorkspaces.privateWindowOrDisabled;
 
@@ -373,11 +375,14 @@
           {
             marginTop: [0, -(heightUntilSelected + 4 * !selectedItem)],
           },
-          { duration: 0.15, ease: 'easeInOut' }
+          { duration: 0.1, ease: 'easeInOut' }
         )
       );
+      this.#animationCount += 1;
       await Promise.all(animations);
-      if (!selectedItem) tabsContainer.setAttribute('hidden', true);
+      // Prevent hiding if we spam the group animations
+      this.#animationCount -= 1;
+      if (!selectedItem && !this.#animationCount) tabsContainer.setAttribute('hidden', true);
     }
 
     async #onTabGroupExpand(event) {
@@ -452,12 +457,17 @@
             marginTop: 0,
           },
           {
-            duration: 0.15,
+            duration: 0.1,
             ease: 'linear',
           }
         )
       );
+      this.#animationCount += 1;
       await Promise.all(animations);
+      this.#animationCount -= 1;
+      if (this.#animationCount) {
+        return;
+      }
       tabsContainer.style.overflow = '';
       groupItems.map((item) => {
         // Cleanup just in case

src/zen/folders/zen-folders.css

@@ -182,7 +182,7 @@ zen-folder {
   flex-direction: column;
   --zen-folder-behind-bgcolor: light-dark(
     color-mix(in srgb, var(--zen-primary-color) 85%, white),
-    color-mix(in srgb, var(--zen-primary-color) 75%, white)
+    color-mix(in srgb, var(--zen-primary-color) 75%, black)
   );
   --zen-folder-front-bgcolor: light-dark(
     color-mix(in srgb, var(--zen-primary-color), white 70%),
@@ -244,7 +244,7 @@ zen-folder {
     --tab-group-color: transparent !important;
     padding-block-end: 0 !important;
     margin: 0 !important;
-    height: 40px;
+    height: calc(var(--tab-block-margin) * 2 + var(--tab-min-height));
     padding-inline: var(--tab-group-label-padding);
     align-items: center;
     font-weight: 600;

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1143,7 +1143,7 @@
         return forToolbar
           ? this.getToolbarModifiedBase()
           : this.isDarkMode
-            ? 'linear-gradient(-45deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.4))'
+            ? 'rgba(0, 0, 0, 0.4)'
             : 'transparent';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);