fix: Fixed a bunch of small styling issues, b=(no-bug), c=common, compact-mode

Author: mr-cheffy

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -122,7 +122,7 @@ export var ZenCustomizableUI = new (class {
 
   _hideToolbarButtons(window) {
     const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
-    const elementsToHide = ['alltabs-button', 'new-tab-button'];
+    const elementsToHide = ['new-tab-button'];
     for (let id of elementsToHide) {
       const elem = window.document.getElementById(id);
       if (elem) {

src/zen/common/ZenUIManager.mjs

@@ -416,14 +416,27 @@ var gZenUIManager = {
 
   // Section: Notification messages
   _createToastElement(messageId, options) {
+    const createButton = () => {
+      const button = document.createXULElement('button');
+      button.id = options.button.id;
+      button.classList.add('footer-button');
+      button.classList.add('primary');
+      button.addEventListener('command', options.button.command);
+      return button;
+    };
+
     // Check if this message ID already exists
     for (const child of this._toastContainer.children) {
       if (child._messageId === messageId) {
-        if (options.button && child.querySelector('button')) {
-          const button = child.querySelector('button');
-          const clone = button.cloneNode(true);
-          button.replaceWith(clone);
-          clone.addEventListener('command', options.button.command);
+        child.removeAttribute('button');
+        if (options.button) {
+          const button = createButton();
+          const existingButton = child.querySelector('button');
+          if (existingButton) {
+            existingButton.remove();
+          }
+          child.appendChild(button);
+          child.setAttribute('button', true);
         }
         return [child, true];
       }
@@ -441,11 +454,7 @@ var gZenUIManager = {
     }
     wrapper.appendChild(element);
     if (options.button) {
-      const button = document.createXULElement('button');
-      button.id = options.button.id;
-      button.classList.add('footer-button');
-      button.classList.add('primary');
-      button.addEventListener('command', options.button.command);
+      const button = createButton();
       wrapper.appendChild(button);
       wrapper.setAttribute('button', true);
     }

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

@@ -373,15 +373,15 @@ menuitem {
     gap: 10px;
     z-index: 1000;
     padding: var(--zen-toast-padding);
-    border-radius: 14px;
+    border-radius: calc(var(--zen-native-inner-radius) + 6px);
     background: linear-gradient(
       170deg,
       var(--zen-primary-color) -40%,
       color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
     );
     color: var(--button-primary-color);
     box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
     display: flex;
     font-weight: 600;
     align-items: center;
@@ -408,7 +408,7 @@ menuitem {
       padding: 0 12px !important;
       min-width: unset !important;
       margin: 0px !important;
-      border-radius: 8px !important;
+      border-radius: var(--zen-native-inner-radius) !important;
 
       :root[zen-right-side='true'] & {
         order: -1;

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

@@ -8,7 +8,7 @@
 #zen-tabbox-wrapper {
   & #sidebar-splitter {
     opacity: 0;
-    margin: 0 calc(-1 * var(--zen-element-separation));
+    margin: 0 calc(-1 * var(--zen-element-separation) + 2px);
   }
 
   & #sidebar-box {
@@ -27,11 +27,11 @@
 
   & #tabbrowser-tabbox[sidebar-positionend] {
     & #sidebar-box {
-      order: 7 !important;
+      order: 8 !important;
     }
 
     & #sidebar-splitter {
-      order: 6 !important;
+      order: 7 !important;
     }
   }
 }

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

@@ -175,7 +175,7 @@
       --zen-urlbar-background-transparent,
       var(--zen-urlbar-background-base)
     ) !important;
-    box-shadow: 0px 0px 10rem -2px rgba(0, 0, 0, 0.9) !important;
+    box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
     backdrop-filter: none !important;
     border-radius: 12px !important;
     outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;

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

@@ -299,9 +299,9 @@
               visibility: visible;
             }
 
-            left: calc(var(--zen-element-separation) / -2);
+            left: calc(var(--zen-element-separation) / -2 - 1px);
             :root[zen-right-side='true'] & {
-              right: calc(var(--zen-element-separation) / -2);
+              right: calc(var(--zen-element-separation) / -2 - 1px);
               left: auto;
             }          
           }

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.12.4b",
+        "displayVersion": "1.12.5b",
         "github": {
           "repo": "zen-browser/desktop"
         },