tor-browser

commit 8119732ff45409e03e195550e25772fa0d90381e
parent 6fddeb8926d444cecb942fcfd7e44208a718aae1
Author: Julien Wajsberg <felash@gmail.com>
Date:   Tue, 16 Dec 2025 14:04:16 +0000

Bug 2005725 - Fix <moz-page-nav> to assign a currentView when the list of children changes in the primary navigation part r=mstriemer

This can be useful when the list of options isn't known at load time.

Differential Revision: https://phabricator.services.mozilla.com/D276163

Diffstat:
M
toolkit/content/tests/widgets/test_moz_page_nav.html
 | 
45
+++++++++++++++++++++++++++++++++++++++++++++
M
toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
 | 
38
++++++++++++++++++++++----------------

2 files changed, 67 insertions(+), 16 deletions(-)
diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html
@@ -445,6 +445,51 @@
           "The search input is in the subheading slot."
         );
       });
+
+      /**
+       * Tests that the right button is selected when the children change
+       */
+      add_task(async function test_children_change() {
+        const container = document.createElement("div");
+        container.classList.add("container");
+        document.body.append(container);
+
+        const mozPageNav = document.createElement("moz-page-nav");
+        container.append(mozPageNav);
+        await mozPageNav.updateComplete;
+
+        // Now add children to moz-page-nav
+        const firstPageNavButton = document.createElement(
+          "moz-page-nav-button"
+        );
+        firstPageNavButton.setAttribute("view", "view-one");
+        firstPageNavButton.setAttribute(
+          "iconSrc",
+          "chrome://mozapps/skin/extensions/category-extensions.svg"
+        );
+        firstPageNavButton.innerHTML = `<span class="view-name">View 1</span>`;
+
+        const secondPageNavButton = document.createElement(
+          "moz-page-nav-button"
+        );
+        secondPageNavButton.setAttribute("view", "view-two");
+        secondPageNavButton.setAttribute(
+          "iconSrc",
+          "chrome://mozapps/skin/extensions/category-extensions.svg"
+        );
+        secondPageNavButton.innerHTML = `<span class="view-name">View 2</span>`;
+
+        mozPageNav.append(firstPageNavButton, secondPageNavButton);
+        await mozPageNav.updateComplete;
+
+        is(
+          mozPageNav.currentView,
+          firstPageNavButton.view,
+          "The first page nav button is selected"
+        );
+
+        container.remove();
+      });
     </script>
   </body>
 </html>
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
@@ -107,12 +107,30 @@ export default class MozPageNav extends MozLitElement {
     }
   }
 
+  onPrimaryNavChange() {
+    this.updateNavButtonsState();
+  }
+
   onSecondaryNavChange(event) {
     let secondaryNavElements = event.target.assignedElements();
     this.hasSecondaryNav = !!secondaryNavElements.length;
-    secondaryNavElements?.forEach(el => {
-      el.classList.add("secondary-nav-item");
-    });
+  }
+
+  updated() {
+    this.updateNavButtonsState();
+  }
+
+  updateNavButtonsState() {
+    let isViewSelected = false;
+    let assignedPageNavButtons = this.pageNavButtons;
+    for (let button of assignedPageNavButtons) {
+      button.selected = button.view == this.currentView;
+      isViewSelected = isViewSelected || button.selected;
+    }
+    if (!isViewSelected && assignedPageNavButtons.length) {
+      // Current page nav has no matching view, reset to the first view.
+      assignedPageNavButtons[0].activate();
+    }
   }
 
   render() {
@@ -145,6 +163,7 @@ export default class MozPageNav extends MozLitElement {
           <slot
             @change-view=${this.onChangeView}
             @keydown=${this.handleFocus}
+            @slotchange=${this.onPrimaryNavChange}
           ></slot>
         </div>
         ${when(this.hasSecondaryNav, () => html`<hr />`)}
@@ -157,19 +176,6 @@ export default class MozPageNav extends MozLitElement {
       </nav>
     `;
   }
-
-  updated() {
-    let isViewSelected = false;
-    let assignedPageNavButtons = this.pageNavButtons;
-    for (let button of assignedPageNavButtons) {
-      button.selected = button.view == this.currentView;
-      isViewSelected = isViewSelected || button.selected;
-    }
-    if (!isViewSelected && assignedPageNavButtons.length) {
-      // Current page nav has no matching view, reset to the first view.
-      assignedPageNavButtons[0].activate();
-    }
-  }
 }
 customElements.define("moz-page-nav", MozPageNav);