Merge branch 'zen-browser:dev' into improved-color-picker

src/browser/base/content/ZenUIManager.mjs

@@ -14,6 +14,10 @@ var gZenUIManager = {
       return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
     });
 
+    ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
+      return document.getElementById('zen-toast-container');
+    });
+
     new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));
 
     new ResizeObserver(
@@ -209,6 +213,38 @@ var gZenUIManager = {
       }
     }
   },
+
+  // Section: Notification messages
+  _createToastElement(messageId, options) {
+    const element = document.createXULElement('vbox');
+    const label = document.createXULElement('label');
+    document.l10n.setAttributes(label, messageId, options);
+    element.appendChild(label);
+    if (options.descriptionId) {
+      const description = document.createXULElement('label');
+      description.classList.add('description');
+      document.l10n.setAttributes(description, options.descriptionId, options);
+      element.appendChild(description);
+    }
+    element.classList.add('zen-toast');
+    return element;
+  },
+
+  async showToast(messageId, options = {}) {
+    const toast = this._createToastElement(messageId, options);
+    this._toastContainer.removeAttribute('hidden');
+    this._toastContainer.appendChild(toast);
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', duration: 0.3 });
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
+    const toastHeight = toast.getBoundingClientRect().height;
+    // 5 for the separation between toasts
+    await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
+    toast.remove();
+    if (!this._toastContainer.hasChildNodes()) {
+      this._toastContainer.setAttribute('hidden', 'true');
+    }
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -635,11 +671,15 @@ var gZenVerticalTabsManager = {
       }
 
       // Maybe add some confetti here?!?
-      gZenUIManager.motion.animate(this._tabEdited, {
-        scale: [1, 0.98, 1],
-      }, {
-        duration: 0.25,
-      });
+      gZenUIManager.motion.animate(
+        this._tabEdited,
+        {
+          scale: [1, 0.98, 1],
+        },
+        {
+          duration: 0.25,
+        }
+      );
 
       this._tabEdited.querySelector('.tab-editor-container').remove();
       label.classList.remove('tab-label-container-editing');

src/browser/base/content/browser-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b09d63ac5 100644
+index 891c067d6ad718061c410c04743bed25744504b5..b7ded9691225068b23e4d6a5113242d0c0f5f842 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
 @@ -99,6 +99,8 @@
@@ -19,7 +19,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -164,9 +167,12 @@
+@@ -164,9 +167,13 @@
      </vbox>
    </html:template>
  
@@ -27,6 +27,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b
 -
 -#include browser-box.inc.xhtml
 +  <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
++    <vbox id="zen-toast-container"></vbox>
 +    #include navigator-toolbox.inc.xhtml
 +    <html:span id="zen-sidebar-box-container">
 +    </html:span>

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

@@ -152,12 +152,33 @@
   gap: var(--zen-element-separation);
 }
 
-.titlebar-buttonbox-container {
-  height: 100%;
+@media not (-moz-platform: macos) {
+  .titlebar-buttonbox-container {
+    height: 100%;
+  }
 }
 
 @media (-moz-platform: macos) {
   .titlebar-buttonbox-container {
     margin-inline-end: 8px;
+    padding: 3px 0;
+
+    & > .titlebar-buttonbox {
+      margin-inline-start: var(--zen-toolbox-padding);
+    }
+  }
+
+  @media (-moz-bool-pref: 'zen.widget.mac.mono-window-controls') {
+    .titlebar-buttonbox-container {
+      /* Draw 3 dots as background to represent the window controls,
+        all with the same cololr as the titlebar */
+      background-image: radial-gradient(circle, #4d4c4a 6px, transparent 0.5px);
+      background-size: 20px 22px;
+      background-position: 52% 50%;
+
+      &:not([zen-has-hover='true']) > .titlebar-buttonbox {
+        opacity: 0;
+      }
+    }
   }
 }

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

@@ -349,3 +349,30 @@ menuitem {
 #editBMPanel_workspaceList input[type='checkbox'] {
   margin-right: 8px;
 }
+
+/* Section: Toast notifications */
+
+#zen-toast-container {
+  position: fixed;
+  top: calc(var(--zen-element-separation) * 2);
+  right: calc(var(--zen-element-separation) * 2);
+  z-index: 1000;
+  gap: 1rem;
+
+  & .zen-toast {
+    padding: 0.9rem 0.8rem;
+    border-radius: 12px;
+    background-color: var(--button-primary-bgcolor);
+    color: var(--button-primary-color);
+    box-shadow: var(--zen-big-shadow);
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    gap: 2px;
+    width: fit-content;
+
+    & .description {
+      opacity: 0.6;
+    }
+  }
+}

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

@@ -12,8 +12,8 @@
 :root,
 .zenLooksAndFeelColorOption {
   /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
-  * in the preferences page.
-  */
+   * in the preferences page.
+   */
 
   /* Default values */
   --zen-border-radius: 7px;
@@ -46,21 +46,21 @@
 
   --in-content-primary-button-background: color-mix(
     in srgb,
-    var(--zen-primary-color) 10%,
-    var(--zen-branding-bg) 90%
+    var(--zen-primary-color) 30%,
+    var(--zen-branding-bg-reverse) 70%
   ) !important;
   --in-content-primary-button-background-hover: color-mix(
     in srgb,
-    var(--zen-primary-color) 15%,
-    var(--zen-branding-bg) 85%
+    var(--zen-primary-color) 35%,
+    var(--zen-branding-bg-reverse) 65%
   ) !important;
   --in-content-primary-button-background-active: color-mix(
     in srgb,
-    var(--zen-primary-color) 20%,
-    var(--zen-branding-bg) 80%
+    var(--zen-primary-color) 40%,
+    var(--zen-branding-bg-reverse) 60%
   ) !important;
-  --button-text-color-primary: var(--zen-branding-bg-reverse) !important;
-  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
+  --button-text-color-primary: var(--zen-branding-bg) !important;
+  --in-content-primary-button-text-color: var(--zen-branding-bg) !important;
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -72,7 +72,7 @@
   /* This is like the secondary button */
   --in-content-button-background: transparent !important;
   --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
-  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
+  --in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
   --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
   --button-hover-color: var(--in-content-button-text-color-hover) !important;
@@ -88,7 +88,7 @@
 
   --button-background-color: var(--in-content-button-background) !important;
   --button-background-color-hover: var(--in-content-button-background-hover) !important;
-  --button-background-color-active: var(--in-content-primary-button-background-active) !important;
+  --button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
   --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
@@ -180,9 +180,9 @@
   --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).
-    */
+       * 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(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
   );
 

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

@@ -73,6 +73,10 @@
           filter: grayscale(0);
           opacity: 1;
         }
+
+        &:hover {
+          background-color: var(--zen-toolbar-element-bg);
+        }
       }
     }
   }