Bug 1850591 - Convert Firefox View's domain-specific navigation component to a global component r=desktop-theme-reviewers,fxview-reviewers,reusable-components-reviewers,sclements,jules,hjones,fluent-reviewers,flod

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

Author: kcochrane-mozilla

browser/components/customizableui/test/browser_1856572_ensure_Fluent_works_in_customizeMode.js

@@ -10,52 +10,69 @@ const {
   "resource://testing-common/FirefoxViewTestUtils.sys.mjs"
 );
 
+/**
+ * Bug 1856572 - This test is to ensure that fluent strings in Firefox View
+ * can be updated after opening Customize Mode
+ * **/
 add_task(async function test_data_l10n_customize_mode() {
   FirefoxViewTestUtilsInit(this);
   await withFirefoxView({ win: window }, async function (browser) {
     /**
      * Bug 1856572, Bug 1857622: Without requesting two animation frames
      * the "missing Fluent strings" issue will not reproduce.
+     *
+     * Given the precondition that we open Firefox View, then open Customize Mode, then
+     * navigate back to Firefox View in a quick succession, as long as Fluent
+     * controlled strings can be updated by changing their Fluent IDs then this
+     * test is valid.
      */
     await new Promise(r =>
       requestAnimationFrame(() => requestAnimationFrame(r))
     );
     await startCustomizing();
     await endCustomizing();
     await openFirefoxViewTab(window);
-
     const { document } = browser.contentWindow;
-    let header = document.querySelector("h1");
-    document.l10n.setAttributes(header, "firefoxview-overview-header");
+    let secondPageNavButton = document.querySelectorAll(
+      "moz-page-nav-button"
+    )[0];
+    document.l10n.setAttributes(
+      secondPageNavButton,
+      "firefoxview-overview-header"
+    );
     let previousText = await document.l10n.formatValue(
-      "firefoxview-page-title"
+      "firefoxview-opentabs-nav"
+    );
+    let translatedText = await window.content.document.l10n.formatValue(
+      "firefoxview-overview-header"
     );
     /**
      * This should be replaced with
-     * BrowserTestUtils.waitForMutationCondition(header, {characterData: true}, ...)
+     * BrowserTestUtils.waitForMutationCondition(secondPageNavButton, {characterData: true}, ...)
      * but apparently Fluent manipulation of textContent doesn't result
      * in a characterData mutation occurring.
      */
     await BrowserTestUtils.waitForCondition(() => {
-      return header.textContent != previousText;
+      return (
+        secondPageNavButton.textContent !== previousText &&
+        secondPageNavButton.textContent === translatedText
+      );
     }, "waiting for text content to change");
 
     Assert.equal(
-      header.getAttribute("data-l10n-id"),
+      secondPageNavButton.getAttribute("data-l10n-id"),
       "firefoxview-overview-header",
       "data-l10n-id should be updated"
     );
     Assert.notEqual(
       previousText,
-      header.textContent,
-      "The header's text content should be updated"
-    );
-    let translatedText = await window.content.document.l10n.formatValue(
-      "firefoxview-overview-header"
+      secondPageNavButton.textContent,
+      "The second page-nav button text content should be updated"
     );
+
     Assert.equal(
       translatedText,
-      header.textContent,
+      secondPageNavButton.textContent,
       "The changed text should be the translated value of 'firefoxview-overview-header"
     );
   });

browser/components/firefoxview/content/category-history.svg renamed to browser/components/firefoxview/content/view-history.svg

@@ -69,6 +69,10 @@ body {
   grid-template-columns: var(--fxview-sidebar-width) 1fr;
   background-color: var(--fxview-background-color);
   color: var(--fxview-text-primary-color);
+
+  @media (max-width: 52rem) {
+    display: flex;
+  }
 }
 
 .main-container {
@@ -88,26 +92,6 @@ body {
   margin: 0;
 }
 
-fxview-category-button:focus-visible {
-  outline-offset: var(--in-content-focus-outline-inset);
-}
-
-fxview-category-button[name="recentbrowsing"]::part(icon) {
-  background-image: url("chrome://browser/content/firefoxview/category-recentbrowsing.svg");
-}
-fxview-category-button[name="opentabs"]::part(icon) {
-  background-image: url("chrome://browser/content/firefoxview/category-opentabs.svg");
-}
-fxview-category-button[name="recentlyclosed"]::part(icon) {
-  background-image: url("chrome://browser/content/firefoxview/category-recentlyclosed.svg");
-}
-fxview-category-button[name="syncedtabs"]::part(icon) {
-  background-image: url("chrome://browser/content/firefoxview/category-syncedtabs.svg");
-}
-fxview-category-button[name="history"]::part(icon) {
-  background-image: url("chrome://browser/content/firefoxview/category-history.svg");
-}
-
 fxview-tab-list.with-dismiss-button::part(secondary-button) {
   background-image: url("chrome://global/skin/icons/close.svg");
 }
@@ -174,14 +158,6 @@ panel-list {
   overflow-y: visible;
 }
 
-fxview-category-navigation {
-  overflow-y: auto;
-}
-
-fxview-category-navigation h1 {
-  margin-block: 0;
-}
-
 fxview-empty-state:not([isSelectedTab]) button[slot="primary-action"] {
   margin-inline-start: 0;
 }

browser/components/firefoxview/content/category-opentabs.svg renamed to browser/components/firefoxview/content/view-opentabs.svg

@@ -41,54 +41,51 @@
     ></script>
     <script
       type="module"
-      src="chrome://browser/content/firefoxview/fxview-category-navigation.mjs"
+      src="chrome://browser/content/firefoxview/syncedtabs.mjs"
     ></script>
     <script
       type="module"
-      src="chrome://browser/content/firefoxview/syncedtabs.mjs"
+      src="chrome://global/content/elements/moz-page-nav.mjs"
     ></script>
     <script src="chrome://browser/content/contentTheme.js"></script>
   </head>
 
   <body>
-    <fxview-category-navigation>
-      <h1 slot="category-nav-header" data-l10n-id="firefoxview-page-title"></h1>
-      <fxview-category-button
-        class="category"
-        slot="category-button"
-        name="recentbrowsing"
+    <moz-page-nav
+      data-l10n-id="firefoxview-page-heading"
+      data-l10n-attrs="heading"
+    >
+      <moz-page-nav-button
+        view="recentbrowsing"
         data-l10n-id="firefoxview-overview-nav"
+        iconSrc="chrome://browser/content/firefoxview/view-recentbrowsing.svg"
       >
-      </fxview-category-button>
-      <fxview-category-button
-        class="category"
-        slot="category-button"
-        name="opentabs"
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="opentabs"
         data-l10n-id="firefoxview-opentabs-nav"
+        iconSrc="chrome://browser/content/firefoxview/view-opentabs.svg"
       >
-      </fxview-category-button>
-      <fxview-category-button
-        class="category"
-        slot="category-button"
-        name="recentlyclosed"
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="recentlyclosed"
         data-l10n-id="firefoxview-recently-closed-nav"
+        iconSrc="chrome://browser/content/firefoxview/view-recentlyclosed.svg"
       >
-      </fxview-category-button>
-      <fxview-category-button
-        class="category"
-        slot="category-button"
-        name="syncedtabs"
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="syncedtabs"
         data-l10n-id="firefoxview-synced-tabs-nav"
+        iconSrc="chrome://browser/content/firefoxview/view-syncedtabs.svg"
       >
-      </fxview-category-button>
-      <fxview-category-button
-        class="category"
-        slot="category-button"
-        name="history"
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="history"
         data-l10n-id="firefoxview-history-nav"
+        iconSrc="chrome://browser/content/firefoxview/view-history.svg"
       >
-      </fxview-category-button>
-    </fxview-category-navigation>
+      </moz-page-nav-button>
+    </moz-page-nav>
     <main id="pages" role="application" data-l10n-id="firefoxview-page-label">
       <div class="main-container">
         <named-deck>

browser/components/firefoxview/content/category-recentbrowsing.svg renamed to browser/components/firefoxview/content/view-recentbrowsing.svg

@@ -3,35 +3,35 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 let pageList = [];
-let categoryPagesDeck = null;
-let categoryNavigation = null;
+let viewsDeck = null;
+let pageNav = null;
 let activeComponent = null;
 let searchKeyboardShortcut = null;
 
 const { topChromeWindow } = window.browsingContext;
 
 function onHashChange() {
-  let page = document.location?.hash.substring(1);
-  if (!page || !pageList.includes(page)) {
-    page = "recentbrowsing";
+  let view = document.location?.hash.substring(1);
+  if (!view || !pageList.includes(view)) {
+    view = "recentbrowsing";
   }
-  changePage(page);
+  changeView(view);
 }
 
-function changePage(page) {
-  categoryPagesDeck.selectedViewName = page;
-  categoryNavigation.currentCategory = page;
-  if (categoryNavigation.categoryButtons.includes(document.activeElement)) {
-    let currentCategoryButton = categoryNavigation.categoryButtons.find(
-      categoryButton => categoryButton.name === page
+function changeView(view) {
+  viewsDeck.selectedViewName = view;
+  pageNav.currentPage = view;
+  if (pageNav.pageNavButtons.includes(document.activeElement)) {
+    let currentPageButton = pageNav.pageNavButtons.find(
+      pageButton => pageButton.view === view
     );
-    (currentCategoryButton || categoryNavigation.categoryButtons[0]).focus();
+    (currentPageButton || pageNav.pageNavButtons[0]).focus();
   }
 }
 
-function onPagesDeckViewChange() {
-  for (const child of categoryPagesDeck.children) {
-    if (child.getAttribute("name") == categoryPagesDeck.selectedViewName) {
+function onViewsDeckViewChange() {
+  for (const child of viewsDeck.children) {
+    if (child.getAttribute("name") == viewsDeck.selectedViewName) {
       child.enter();
       activeComponent = child;
     } else {
@@ -41,11 +41,11 @@ function onPagesDeckViewChange() {
 }
 
 function recordNavigationTelemetry(source, eventTarget) {
-  let page = "recentbrowsing";
+  let view = "recentbrowsing";
   if (source === "category-navigation") {
-    page = eventTarget.parentNode.currentCategory;
+    view = eventTarget.parentNode.currentView;
   } else if (source === "view-all") {
-    page = eventTarget.shortPageName;
+    view = eventTarget.shortPageName;
   }
   // Record telemetry
   Services.telemetry.recordEvent(
@@ -54,7 +54,7 @@ function recordNavigationTelemetry(source, eventTarget) {
     "navigation",
     null,
     {
-      page,
+      page: view,
       source,
     }
   );
@@ -73,7 +73,7 @@ async function updateSearchTextboxSize() {
     const placeholder = msg.attributes[0].value;
     maxLength = Math.max(maxLength, placeholder.length);
   }
-  for (const child of categoryPagesDeck.children) {
+  for (const child of viewsDeck.children) {
     child.searchTextboxSize = maxLength;
   }
 }
@@ -89,27 +89,27 @@ async function updateSearchKeyboardShortcut() {
 window.addEventListener("DOMContentLoaded", async () => {
   recordEnteredTelemetry();
 
-  categoryNavigation = document.querySelector("fxview-category-navigation");
-  categoryPagesDeck = document.querySelector("named-deck");
+  pageNav = document.querySelector("moz-page-nav");
+  viewsDeck = document.querySelector("named-deck");
 
-  for (const item of categoryNavigation.categoryButtons) {
-    pageList.push(item.getAttribute("name"));
+  for (const item of pageNav.pageNavButtons) {
+    pageList.push(item.getAttribute("view"));
   }
   window.addEventListener("hashchange", onHashChange);
-  window.addEventListener("change-category", function (event) {
-    location.hash = event.target.getAttribute("name");
+  window.addEventListener("change-view", function (event) {
+    location.hash = event.target.getAttribute("view");
     window.scrollTo(0, 0);
     recordNavigationTelemetry("category-navigation", event.target);
   });
   window.addEventListener("card-container-view-all", function (event) {
     recordNavigationTelemetry("view-all", event.originalTarget);
   });
 
-  categoryPagesDeck.addEventListener("view-changed", onPagesDeckViewChange);
+  viewsDeck.addEventListener("view-changed", onViewsDeckViewChange);
 
   // set the initial state
   onHashChange();
-  onPagesDeckViewChange();
+  onViewsDeckViewChange();
   await updateSearchTextboxSize();
   await updateSearchKeyboardShortcut();