Implement toast notifications for user actions and enhance UI feedback

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 = {

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-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/zen-components/ZenCommonUtils.mjs

@@ -69,7 +69,7 @@ var gZenCommonActions = {
       transferable.addDataFlavor('text/plain');
       transferable.setTransferData('text/plain', str);
       Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
-      ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-copy-current-url-confirmation');
+      gZenUIManager.showToast('zen-copy-current-url-confirmation');
     }
   },
   copyCurrentURLAsMarkdownToClipboard() {
@@ -84,7 +84,7 @@ var gZenCommonActions = {
       transferable.addDataFlavor('text/plain');
       transferable.setTransferData('text/plain', str);
       Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
-      ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-copy-current-url-confirmation');
+      gZenUIManager.showToast('zen-copy-current-url-confirmation');
     }
   },
 

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -725,7 +725,7 @@
       if (!skipSave) {
         await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
         await ZenWorkspaces._propagateWorkspaceData();
-        ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-panel-ui-gradient-generator-saved-message');
+        gZenUIManager.showToast('zen-panel-ui-gradient-generator-saved-message');
         currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
       }
 

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -192,14 +192,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
 
   afterRearangeAction() {
     document.getElementById('zenSplitViewModifier').hidePopup();
-    ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-enabled-toast', {
+    gZenUIManager.showToast('zen-split-view-modifier-enabled-toast', {
       descriptionId: 'zen-split-view-modifier-enabled-toast-description',
-      showDescription: true,
     });
   }
 
   afterRearangeRemove() {
-    ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-disabled-toast');
+    gZenUIManager.showToast('zen-split-view-modifier-disabled-toast');
   }
 
   toggleWrapperDisplay(value) {