1 files changed, 62 insertions, 0 deletions
diff --git a/browser/components/firefoxview/firefoxview-next.mjs b/browser/components/firefoxview/firefoxview-next.mjs
new file mode 100644
index 0000000000..2e504ed5fd
--- /dev/null
+++ b/browser/components/firefoxview/firefoxview-next.mjs
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+let pageList = [];
+
+function onHashChange() {
+  changePage(document.location.hash.substring(1));
+}
+
+function changePage(page) {
+  let navigation = document.querySelector("fxview-category-navigation");
+  let currentCategoryButton;
+  if (pageList.includes(page)) {
+    document.querySelector("named-deck").selectedViewName = page;
+    navigation.currentCategory = page;
+    // Move focus if activeElement is a category button when changing page
+    if (navigation.categoryButtons.includes(document.activeElement)) {
+      currentCategoryButton = navigation.categoryButtons.filter(
+        categoryButton => categoryButton.name === page
+      );
+      currentCategoryButton[0]?.focus();
+    }
+  } else {
+    // Select first category if page not found in pageList
+    document.location.hash = pageList[0];
+    navigation.currentCategory = pageList[0];
+    // Move focus if activeElement is a category button when changing page
+    if (navigation.categoryButtons.includes(document.activeElement)) {
+      currentCategoryButton = navigation.categoryButtons[0];
+      currentCategoryButton?.focus();
+    }
+  }
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+  if (document.location.hash) {
+    changePage(document.location.hash.substring(1));
+  }
+  window.addEventListener("hashchange", onHashChange);
+  let navigation = document.querySelector("fxview-category-navigation");
+  for (const item of navigation.categoryButtons) {
+    pageList.push(item.getAttribute("name"));
+  }
+  window.addEventListener("change-category", function (event) {
+    location.hash = event.target.getAttribute("name");
+  });
+});
+
+document
+  .querySelector("named-deck")
+  .addEventListener("view-changed", async event => {
+    for (const child of event.target.children) {
+      if (child.getAttribute("name") == event.target.selectedViewName) {
+        child.enter();
+      } else {
+        child.exit();
+      }
+    }
+  });
+
+window.addEventListener("unload", () => {});