Toggle card popovers when re-clicked

js/ui/components/VideoCard.js

@@ -1421,7 +1421,7 @@ export class VideoCard {
         event.stopPropagation();
 
         if (this.onRequestCloseAllMenus) {
-          this.onRequestCloseAllMenus(this);
+          this.onRequestCloseAllMenus({ restoreFocus: false });
         } else {
           this.closeSettingsMenu({ restoreFocus: false });
         }
@@ -1446,10 +1446,28 @@ export class VideoCard {
         event.preventDefault();
         event.stopPropagation();
 
+        const trigger = this.moreMenuButton;
+        const isExpanded =
+          typeof trigger?.getAttribute === "function" &&
+          trigger.getAttribute("aria-expanded") === "true";
+
         if (this.onRequestCloseAllMenus) {
-          this.onRequestCloseAllMenus(this);
+          const options = { restoreFocus: false };
+          if (isExpanded) {
+            options.skipCard = this;
+            options.skipTrigger = trigger;
+          }
+          this.onRequestCloseAllMenus(options);
         }
 
+        if (isExpanded) {
+          this.closeSettingsMenu({ restoreFocus: false });
+          this.closeMoreMenu({ restoreFocus: false });
+          return;
+        }
+
+        this.closeSettingsMenu({ restoreFocus: false });
+
         if (this.callbacks.onRequestMoreMenu) {
           const actionForwarder = this.callbacks.onMoreAction
             ? ({ action, dataset, event: actionEvent }) => {
@@ -1468,7 +1486,7 @@ export class VideoCard {
 
           this.callbacks.onRequestMoreMenu({
             event,
-            trigger: this.moreMenuButton,
+            trigger,
             video: this.video,
             card: this,
             pointerInfo: this.pointerInfo,

js/ui/moreMenuController.js

@@ -425,23 +425,32 @@ export default class MoreMenuController {
   closeAllMoreMenus(options = {}) {
     const skipView = options?.skipView === true;
     const restoreFocus = options?.restoreFocus !== false;
+    const skipTrigger = options?.skipTrigger || null;
 
-    if (!skipView && this.videoListView && typeof this.videoListView.closeAllMenus === "function") {
-      this.videoListView.closeAllMenus({
+    if (
+      !skipView &&
+      this.videoListView &&
+      typeof this.videoListView.closeAllMenus === "function"
+    ) {
+      const viewOptions = {
         skipController: true,
         restoreFocus,
-      });
+      };
+      if (skipTrigger) {
+        viewOptions.skipTrigger = skipTrigger;
+      }
+      this.videoListView.closeAllMenus(viewOptions);
     }
 
     this.popoversByTrigger.forEach((entry) => {
-      if (entry?.popover && typeof entry.popover.close === "function") {
-        entry.popover.close({ restoreFocus });
+      if (!entry?.popover || typeof entry.popover.close !== "function") {
+        return;
       }
+      if (skipTrigger && entry.trigger === skipTrigger) {
+        return;
+      }
+      entry.popover.close({ restoreFocus });
     });
-
-    if (this.activePopover) {
-      this.activePopover = null;
-    }
   }
 
   attachMoreMenuHandlers(container) {

js/ui/views/VideoListView.js

@@ -441,7 +441,8 @@ export class VideoListView {
         },
         ensureGlobalMoreMenuHandlers: () =>
           this.utils.ensureGlobalMoreMenuHandlers(),
-        onRequestCloseAllMenus: () => this.closeAllMenus({ restoreFocus: false }),
+        onRequestCloseAllMenus: (detail = {}) =>
+          this.closeAllMenus({ restoreFocus: false, ...detail }),
         formatters: {
           formatTimeAgo: this.formatters.formatTimeAgo,
         },
@@ -1033,12 +1034,22 @@ export class VideoListView {
 
   closeAllMenus(options = {}) {
     const restoreFocus = options?.restoreFocus !== false;
+    const skipCard = options?.skipCard || null;
+    const skipTrigger = options?.skipTrigger || null;
 
     if (Array.isArray(this.videoCardInstances) && this.videoCardInstances.length) {
       this.videoCardInstances.forEach((card) => {
         if (!card) {
           return;
         }
+
+        if (skipCard && card === skipCard) {
+          if (typeof card.closeSettingsMenu === "function") {
+            card.closeSettingsMenu({ restoreFocus });
+          }
+          return;
+        }
+
         if (typeof card.closeMoreMenu === "function") {
           card.closeMoreMenu({ restoreFocus });
         }
@@ -1053,7 +1064,11 @@ export class VideoListView {
     }
 
     if (typeof this.utils.closeAllMenus === "function") {
-      this.utils.closeAllMenus({ skipView: true, restoreFocus });
+      const payload = { skipView: true, restoreFocus };
+      if (skipTrigger) {
+        payload.skipTrigger = skipTrigger;
+      }
+      this.utils.closeAllMenus(payload);
     }
   }