feat: Added better toast management, b=(no-bug), c=common, compact-mode

src/browser/app/profile/features.inc

@@ -45,7 +45,7 @@ pref('zen.view.compact.color-toolbar', true);
 pref('zen.view.compact.color-sidebar', true);
 pref('zen.view.compact.animate-sidebar', true);
 pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);
-pref('zen.view.compact.show-background-tab-toast', false);
+pref('zen.view.compact.show-background-tab-toast', true);
 
 pref('zen.urlbar.replace-newtab', true);
 pref('zen.urlbar.show-protections-icon', false);

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

@@ -1,12 +1,13 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..d113b439888d26629ce5f6b5d35f8fa12249774b 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..ef670b93d3e8b653c4da54b65aa4042fce6b0aa9 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,13 @@
+@@ -23,7 +23,14 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
 +<vbox flex="1" id="zen-appcontent-wrapper">
++  <vbox id="zen-toast-container"></vbox>
 +  <html:div id="zen-appcontent-navbar-container"></html:div>
 +  <hbox id="zen-tabbox-wrapper" flex="1">
    <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">

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 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..b49984c8711fc9f5f19f0cf6ecca07a8cca0d125 100644
+index 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..08809c25c01d159a9903f1921936b178d51f9875 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
 @@ -26,6 +26,7 @@
@@ -22,12 +22,11 @@ index 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..b49984c8711fc9f5f19f0cf6ecca07a8
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -127,9 +131,12 @@
+@@ -127,9 +131,11 @@
      </vbox>
    </html:template>
  
 +<hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
-+  <vbox id="zen-toast-container"></vbox>
  #include navigator-toolbox.inc.xhtml
  
  #include browser-box.inc.xhtml

src/zen/common/ZenUIManager.mjs

@@ -4,6 +4,8 @@ var gZenUIManager = {
   _hasLoadedDOM: false,
   testingEnabled: Services.prefs.getBoolPref('zen.testing.enabled', false),
 
+  _toastTimeouts: [],
+
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
@@ -409,24 +411,24 @@ var gZenUIManager = {
     this._toastContainer.appendChild(toast);
     if (reused) {
       await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
-      toast._useCount++;
-    } else {
-      toast._useCount = 1;
     }
     if (!toast.style.hasOwnProperty('transform')) {
       toast.style.transform = 'scale(0)';
     }
     await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
-    await new Promise((resolve) => setTimeout(resolve, 3000));
+    if (this._toastTimeouts[messageId]) {
-    if (toast._useCount <= 1) {
+      clearTimeout(this._toastTimeouts[messageId]);
-      await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 });
+    }
+    this._toastTimeouts[messageId] = setTimeout(() => {
+      this.motion
+        .animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 })
+        .then(() => {
           toast.remove();
-      if (!this._toastContainer.hasChildNodes()) {
+          if (this._toastContainer.children.length === 0) {
-        this._toastContainer.setAttribute('hidden', 'true');
+            this._toastContainer.setAttribute('hidden', true);
           }
-      return;
+        });
-    }
+    }, options.timeout || 3000);
-    toast._useCount--;
   },
 
   get panelUIPosition() {

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

@@ -369,13 +369,13 @@ menuitem {
     font-weight: 600;
     flex-direction: column;
     width: max-content;
-    font-size: medium;
+    font-size: small;
     position: absolute;
     transform-origin: top center;
 
     & .description {
       opacity: 0.6;
-      font-size: small;
+      font-size: smaller;
     }
   }
 }

src/zen/compact-mode/ZenCompactMode.mjs

@@ -560,7 +560,7 @@ var gZenCompactModeManager = {
   },
 
   async _onTabOpen(tab, inBackground) {
-    if (inBackground && this.preference && !this.isSidebarPotentiallyOpen() && this._canShowBackgroundTabToast) {
+    if (inBackground && this.preference && !this.isSidebarPotentiallyOpen() && this._canShowBackgroundTabToast  && !gZenGlanceManager._animating) {
       gZenUIManager.showToast('zen-background-tab-opened-toast');
     }
   },