feat: Make folder search popup ignore outside clicks, b=no-bug, c=folders, common

src/browser/base/content/zen-panels/folders-search.inc

@@ -2,7 +2,13 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-<panel id="zen-folder-tabs-popup" hidepopovertail="true" type="arrow" orient="vertical" side="left">
+<panel id="zen-folder-tabs-popup"
+    followanchor="false"
+    hidepopovertail="true"
+    type="arrow"
+    orient="vertical"
+    side="left"
+    consumeoutsideclicks="never">
   <hbox class="tabs-list-header" flex="1">
     <image class="zen-folder-tabs-list-search-icon" src="chrome://global/skin/icons/search-glass.svg"/>
     <html:input id="zen-folder-tabs-list-search" 

src/browser/base/content/zen-panels/popups.inc

@@ -8,11 +8,11 @@
       <menuitem
         data-l10n-id="zen-live-folder-github-pull-requests"
         command="cmd_zenNewLiveFolder"
-        image="chrome://browser/content/zen-images/favicons/github.svg" />
+        image="chrome://browser/skin/zen-icons/selectable/logo-github.svg" />
       <menuitem
         data-l10n-id="zen-live-folder-github-issues"
         command="cmd_zenNewLiveFolder"
-        image="chrome://browser/content/zen-images/favicons/github.svg" />
+        image="chrome://browser/skin/zen-icons/selectable/logo-github.svg" />
       <menuitem
         data-l10n-id="zen-live-folder-type-rss"
         command="cmd_zenNewLiveFolder"

src/zen/common/styles/zen-panel-ui.css

@@ -30,6 +30,12 @@ panel[type="arrow"]:not(#feature-callout) {
   }
 
   @media (-moz-platform: macos) {
+    &[followanchor="false"] {
+      appearance: auto !important;
+      -moz-default-appearance: menupopup;
+      background-color: Menu !important;
+    }
+
     --panel-shadow-margin: 0px !important;
     --panel-background: transparent !important;
     --panel-border-color: transparent;

src/zen/common/styles/zen-single-components.css

@@ -616,13 +616,24 @@
 }
 
 /* Feature allouts */
-#feature-callout #mainContentHeader {
-  --special-color: color-mix(in srgb, light-dark(white, black), currentColor 50%);
-  --specia-color-2: color-mix(in srgb, light-dark(white, black), currentColor 90%);
-  background: linear-gradient(135deg, var(--specia-color-2), var(--special-color), var(--specia-color-2));
-  background-size: 400%;
-  background-clip: text;
-  /* Still works on firefox */
-  -webkit-text-fill-color: transparent;
-  animation: zen-text-gradient 5s linear infinite;
+#feature-callout {
+  #mainContentHeader {
+    --special-color: color-mix(in srgb, light-dark(white, black), currentColor 50%);
+    --specia-color-2: color-mix(in srgb, light-dark(white, black), currentColor 90%);
+    background: linear-gradient(135deg, var(--specia-color-2), var(--special-color), var(--specia-color-2));
+    background-size: 400%;
+    background-clip: text;
+    /* Still works on firefox */
+    -webkit-text-fill-color: transparent;
+    animation: zen-text-gradient 5s linear infinite;
+    font-size: initial;
+  }
+
+  #mainContentSubheader {
+    text-wrap: balance;
+  }
+
+  #multi-stage-message-welcome-text {
+    gap: 4px;
+  }
 }

src/zen/folders/ZenFolder.mjs

@@ -281,10 +281,15 @@ export class nsZenFolder extends MozTabbrowserTabGroup {
   addTabs(tabs) {
     super.addTabs(tabs);
     if (this.collapsed && !gZenFolders._sessionRestoring && this.isLiveFolder && tabs.length) {
-      for (let tab of tabs) {
+      let activeTabs = this.activeTabs;
+      activeTabs.push(...tabs);
+      gZenFolders._dontAnimateFolder = true;
+      this.collapsed = false;
+      for (let tab of activeTabs) {
         tab.setAttribute("folder-active", "true");
       }
-      gZenFolders.animateCollapse(this);
+      this.collapsed = true;
+      delete gZenFolders._dontAnimateFolder;
     }
   }
 

src/zen/folders/ZenFolders.mjs

@@ -731,12 +731,12 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
 
   get #searchPopupOptions() {
     const isRightSide = gZenVerticalTabsManager._prefsRightSide;
-    const position = isRightSide ? "start_before" : "start_before";
+    const position = isRightSide ? "topleft topright" : "topright topleft";
     let size = Math.min(this.#popup.querySelector("#zen-folder-tabs-list").children.length, 6);
     size *= 48;
     return {
       position,
-      x: -10,
+      x: 10,
       y: size / -2,
     };
   }
@@ -960,7 +960,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       }
       this.#mouseTimer = setTimeout(() => {
         // If popup is focused don't hide it
-        if (this.#popup.matches(":hover")) {
+        if (this.#popup.matches(":hover") || labelContainer.matches(":hover")) {
           return;
         }
         this.#popup.hidePopup(true);
@@ -1262,7 +1262,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
   }
 
   get #folderAnimationDuration() {
-    return this._sessionRestoring ? 0 : 0.12;
+    return this._sessionRestoring || this._dontAnimateFolder ? 0 : 0.12;
   }
 
   async animateCollapse(group) {

src/zen/live-folders/ZenLiveFoldersManager.sys.mjs

@@ -228,14 +228,14 @@ class nsZenLiveFoldersManager {
     let labelElement = folder.labelElement;
     labelElement.setAttribute("live-folder-animation", "true");
     labelElement.style.backgroundPositionX = "0%";
-    let animation = folder.ownerGlobal.gZenUIManager.motion
+    folder.ownerGlobal.gZenUIManager.motion
       .animate(
         labelElement,
         {
           backgroundPositionX: ["0%", "-50%"],
         },
         {
-          duration: 1.5,
+          duration: 1,
         }
       )
       .then(() => {
@@ -256,54 +256,52 @@ class nsZenLiveFoldersManager {
       browser: gBrowser.selectedBrowser,
       theme: { preset: "chrome" },
     });
-    animation.then(() => {
-      callout.showFeatureCallout({
+    callout.showFeatureCallout({
+      id: "ZEN_LIVE_FOLDERS_CALLOUT",
+      template: "feature_callout",
+      groups: ["cfr"],
+      content: {
         id: "ZEN_LIVE_FOLDERS_CALLOUT",
-        template: "feature_callout",
-        groups: ["cfr"],
-        content: {
-          id: "ZEN_LIVE_FOLDERS_CALLOUT",
-          template: "spotlight",
-          backdrop: "transparent",
-          transitions: true,
-          autohide: true,
-          screens: [
-            {
-              id: "ZEN_LIVE_FOLDERS_CALLOUT",
-              anchors: [
-                {
-                  selector: `[id="${folder.id}"]`,
-                  panel_position: {
-                    anchor_attachment: "rightcenter",
-                    callout_attachment: "topleft",
-                  },
-                },
-              ],
-              content: {
-                position: "callout",
-                width: "355px",
-                title_logo: {
-                  imageURL: icon,
-                  width: "18px",
-                  height: "18px",
-                  marginInline: "0 8px",
-                },
-                title: {
-                  string_id: "zen-live-folders-promotion-title",
-                },
-                subtitle: {
-                  string_id: "zen-live-folders-promotion-description",
+        template: "spotlight",
+        backdrop: "transparent",
+        transitions: true,
+        autohide: true,
+        screens: [
+          {
+            id: "ZEN_LIVE_FOLDERS_CALLOUT",
+            anchors: [
+              {
+                selector: `[id="${folder.id}"]`,
+                panel_position: {
+                  anchor_attachment: "rightcenter",
+                  callout_attachment: "topleft",
                 },
               },
+            ],
+            content: {
+              width: "310px",
+              position: "callout",
+              title_logo: {
+                imageURL: icon,
+                width: "18px",
+                height: "18px",
+                marginInline: "0 8px",
+              },
+              title: {
+                string_id: "zen-live-folders-promotion-title",
+              },
+              subtitle: {
+                string_id: "zen-live-folders-promotion-description",
+              },
             },
-          ],
-        },
-      });
-
-      lazy.setTimeout(() => {
-        callout.endTour();
-      }, 8000);
+          },
+        ],
+      },
     });
+
+    lazy.setTimeout(() => {
+      callout.endTour();
+    }, 10000);
   }
 
   deleteFolder(id, deleteFolder = true) {