Adding upstream version 125.0.1.upstream/125.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

48 files changed, 2535 insertions, 1605 deletions

diff --git a/browser/components/firefoxview/OpenTabs.sys.mjs b/browser/components/firefoxview/OpenTabs.sys.mjs
index ac247f5e8f..0771bf9e65 100644
--- a/browser/components/firefoxview/OpenTabs.sys.mjs
+++ b/browser/components/firefoxview/OpenTabs.sys.mjs
@@ -36,6 +36,8 @@ const TAB_RECENCY_CHANGE_EVENTS = Object.freeze([
   "TabAttrModified",
   "TabClose",
   "TabOpen",
+  "TabPinned",
+  "TabUnpinned",
   "TabSelect",
   "TabAttrModified",
 ]);
@@ -329,17 +331,21 @@ class OpenTabsTarget extends EventTarget {
     return [];
   }
 
+  /**
+   * Get an aggregated list of tabs from all the same-privateness browser windows.
+   *
+   * @returns {MozTabbrowserTab[]}
+   */
+  getAllTabs() {
+    return this.currentWindows.flatMap(win => this.getTabsForWindow(win));
+  }
+
   /*
    * @returns {Array<Tab>}
    *    A by-recency-sorted, aggregated list of tabs from all the same-privateness browser windows.
    */
   getRecentTabs() {
-    const tabs = [];
-    for (let win of this.currentWindows) {
-      tabs.push(...this.getTabsForWindow(win));
-    }
-    tabs.sort(lastSeenActiveSort);
-    return tabs;
+    return this.getAllTabs().sort(lastSeenActiveSort);
   }
 
   handleEvent({ detail, target, type }) {
diff --git a/browser/components/firefoxview/content/category-history.svg b/browser/components/firefoxview/content/view-history.svg
index a6dc259483..a6dc259483 100644
--- a/browser/components/firefoxview/content/category-history.svg
+++ b/browser/components/firefoxview/content/view-history.svg
diff --git a/browser/components/firefoxview/content/category-opentabs.svg b/browser/components/firefoxview/content/view-opentabs.svg
index 2172558a42..2172558a42 100644
--- a/browser/components/firefoxview/content/category-opentabs.svg
+++ b/browser/components/firefoxview/content/view-opentabs.svg
diff --git a/browser/components/firefoxview/content/category-recentbrowsing.svg b/browser/components/firefoxview/content/view-recentbrowsing.svg
index f4c523dafa..f4c523dafa 100644
--- a/browser/components/firefoxview/content/category-recentbrowsing.svg
+++ b/browser/components/firefoxview/content/view-recentbrowsing.svg
diff --git a/browser/components/firefoxview/content/category-recentlyclosed.svg b/browser/components/firefoxview/content/view-recentlyclosed.svg
index 7cac65ac58..7cac65ac58 100644
--- a/browser/components/firefoxview/content/category-recentlyclosed.svg
+++ b/browser/components/firefoxview/content/view-recentlyclosed.svg
diff --git a/browser/components/firefoxview/content/category-syncedtabs.svg b/browser/components/firefoxview/content/view-syncedtabs.svg
index bd9749743c..bd9749743c 100644
--- a/browser/components/firefoxview/content/category-syncedtabs.svg
+++ b/browser/components/firefoxview/content/view-syncedtabs.svg
diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css
index 48cf5a9490..6811ca54c4 100644
--- a/browser/components/firefoxview/firefoxview.css
+++ b/browser/components/firefoxview/firefoxview.css
@@ -16,6 +16,7 @@
   --fxview-text-color-hover: var(--newtab-text-primary-color);
   --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
   --fxview-border: var(--fc-border-light, #CFCFD8);
+  --fxview-indicator-stroke-color-hover: #DEDDDE;
 
   /* ensure utility button hover states match those of the rest of the page */
   --in-content-button-background-hover: var(--fxview-element-background-hover);
@@ -37,6 +38,7 @@
     --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
     --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
     --fxview-border: #8F8F9D;
+    --fxview-indicator-stroke-color-hover:#5D5C66;
 
     /* copy over newtab colors from activity-stream-[os].css files */
     --newtab-background-color: #2B2A33;
@@ -69,6 +71,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,34 +94,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");
-}
-
-fxview-tab-list.with-context-menu::part(secondary-button) {
-  background-image: url("chrome://global/skin/icons/more.svg");
-}
-
 .sticky-container {
   position: sticky;
   top: 0;
@@ -170,18 +148,6 @@ panel-item::part(button):hover:active {
   background-color: var(--fxview-element-background-active);
 }
 
-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;
 }
diff --git a/browser/components/firefoxview/firefoxview.html b/browser/components/firefoxview/firefoxview.html
index 1f53a1d0c9..6fa0f59a8f 100644
--- a/browser/components/firefoxview/firefoxview.html
+++ b/browser/components/firefoxview/firefoxview.html
@@ -15,8 +15,6 @@
     <link rel="localization" href="branding/brand.ftl" />
     <link rel="localization" href="toolkit/branding/accounts.ftl" />
     <link rel="localization" href="browser/firefoxView.ftl" />
-    <link rel="localization" href="branding/brand.ftl" />
-    <link rel="localization" href="toolkit/branding/accounts.ftl" />
     <link rel="localization" href="toolkit/branding/brandings.ftl" />
     <link rel="localization" href="browser/migrationWizard.ftl" />
     <link
@@ -41,54 +39,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>
diff --git a/browser/components/firefoxview/firefoxview.mjs b/browser/components/firefoxview/firefoxview.mjs
index 77f4c06cc7..3e61482cc0 100644
--- a/browser/components/firefoxview/firefoxview.mjs
+++ b/browser/components/firefoxview/firefoxview.mjs
@@ -3,35 +3,29 @@
  * 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
-    );
-    (currentCategoryButton || categoryNavigation.categoryButtons[0]).focus();
-  }
+function changeView(view) {
+  viewsDeck.selectedViewName = view;
+  pageNav.currentView = view;
 }
 
-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 +35,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 +48,7 @@ function recordNavigationTelemetry(source, eventTarget) {
     "navigation",
     null,
     {
-      page,
+      page: view,
       source,
     }
   );
@@ -73,7 +67,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,15 +83,15 @@ 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);
   });
@@ -105,11 +99,11 @@ window.addEventListener("DOMContentLoaded", async () => {
     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();
 
diff --git a/browser/components/firefoxview/fxview-category-button.css b/browser/components/firefoxview/fxview-category-button.css
deleted file mode 100644
index 1bce29f343..0000000000
--- a/browser/components/firefoxview/fxview-category-button.css
+++ /dev/null
@@ -1,125 +0,0 @@
-/* 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/. */
-
-:host {
-  border-radius: 4px;
-}
-
-button {
-  background-color: initial;
-  border: 1px solid var(--in-content-primary-button-border-color);
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  gap: 12px;
-  align-items: center;
-  font-size: inherit;
-  width: 100%;
-  font-weight: normal;
-  border-radius: 4px;
-  color: inherit;
-  text-align: start;
-  transition: background-color 150ms;
-  padding: var(--fxviewcategorynav-button-padding);
-}
-
-button:hover {
-  cursor: pointer;
-}
-
-@media not (prefers-contrast) {
-  button {
-    border-inline-start: 2px solid transparent;
-    border-inline-end: none;
-    border-block: none;
-  }
-
-  button:hover,
-  button[selected]:hover {
-    background-color: var(--in-content-button-background-hover);
-    border-color: var(--in-content-button-border-color-hover);
-  }
-
-  button[selected]:hover {
-    border-inline-start-color: inherit;
-  }
-
-  button[selected],
-  button[selected]:hover {
-    border-inline-start: 2px solid;
-  }
-
-  button[selected]:not(:focus-visible) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  button[selected]:not(:hover) {
-    color: var(--in-content-accent-color);
-    background-color: color-mix(in srgb, var(--fxview-primary-action-background) 5%, transparent);
-    border-inline-start-color: var(--in-content-accent-color);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  button[selected] {
-    background-color: color-mix(in srgb, var(--fxview-primary-action-background) 12%, transparent);
-  }
-}
-
-button:focus-visible,
-button[selected]:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-}
-
-.category-icon {
-  background-color: initial;
-  background-size: 20px;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 20px;
-  width: 20px;
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-@media (prefers-contrast) {
-  button {
-    transition: none;
-    border-color: ButtonText;
-    background-color: var(--in-content-button-background);
-  }
-
-  button:hover {
-    color: SelectedItem;
-  }
-
-  button[selected] {
-    color: SelectedItemText;
-    background-color: SelectedItem;
-    border-color: SelectedItem;
-  }
-}
-
-slot {
-  font-size: 1.13em;
-  line-height: 1.4;
-  margin: 0;
-  padding-inline-start: 0;
-  user-select: none;
-}
-
-@media (max-width: 52rem) {
-  button {
-    grid-template-columns: min-content;
-    justify-content: center;
-    margin-inline: 0;
-  }
-
-  slot {
-    display: none;
-  }
-}
diff --git a/browser/components/firefoxview/fxview-category-navigation.css b/browser/components/firefoxview/fxview-category-navigation.css
deleted file mode 100644
index 571059699b..0000000000
--- a/browser/components/firefoxview/fxview-category-navigation.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/* 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/. */
-
-:host {
-  --fxviewcategorynav-button-padding: 8px;
-  margin-inline-start: 42px;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-}
-
-nav {
-  display: grid;
-  grid-template-rows: min-content 1fr auto;
-  gap: 25px;
-  margin-block-start: var(--fxview-margin-top);
-}
-
-.category-nav-header {
-  /* Align the header text/icon with the category button icons */
-  margin-inline-start: var(--fxviewcategorynav-button-padding);
-}
-
-.category-nav-buttons,
-::slotted(.category-nav-footer) {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: min-content;
-  gap: 4px;
-}
-
-@media (prefers-contrast) {
-  .category-nav-buttons {
-    gap: 8px;
-  }
-}
-
-@media (prefers-reduced-motion) {
-  /* (See Bug 1610081) Setting border-inline-end to add clear differentiation between side navigation and main content area */
-  :host {
-    border-inline-end: 1px solid var(--in-content-border-color);
-  }
-}
-
-@media (max-width: 52rem) {
-  :host {
-    grid-template-rows: 1fr auto;
-  }
-
-  .category-nav-header {
-    display: none;
-  }
-
-  .category-nav-buttons,
-  ::slotted(.category-nav-footer) {
-    justify-content: center;
-    grid-template-columns: min-content;
-  }
-}
diff --git a/browser/components/firefoxview/fxview-category-navigation.mjs b/browser/components/firefoxview/fxview-category-navigation.mjs
deleted file mode 100644
index abacd17df1..0000000000
--- a/browser/components/firefoxview/fxview-category-navigation.mjs
+++ /dev/null
@@ -1,150 +0,0 @@
-/* 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/. */
-
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
-import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-
-export default class FxviewCategoryNavigation extends MozLitElement {
-  static properties = {
-    currentCategory: { type: String },
-  };
-
-  static queries = {
-    categoryButtonsSlot: "slot[name=category-button]",
-  };
-
-  get categoryButtons() {
-    return this.categoryButtonsSlot
-      .assignedNodes()
-      .filter(node => !node.hidden);
-  }
-
-  onChangeCategory(e) {
-    this.currentCategory = e.target.name;
-  }
-
-  handleFocus(e) {
-    if (e.key == "ArrowDown" || e.key == "ArrowRight") {
-      e.preventDefault();
-      this.focusNextCategory();
-    } else if (e.key == "ArrowUp" || e.key == "ArrowLeft") {
-      e.preventDefault();
-      this.focusPreviousCategory();
-    }
-  }
-
-  focusPreviousCategory() {
-    let categoryButtons = this.categoryButtons;
-    let currentIndex = categoryButtons.findIndex(b => b.selected);
-    let prev = categoryButtons[currentIndex - 1];
-    if (prev) {
-      prev.activate();
-      prev.focus();
-    }
-  }
-
-  focusNextCategory() {
-    let categoryButtons = this.categoryButtons;
-    let currentIndex = categoryButtons.findIndex(b => b.selected);
-    let next = categoryButtons[currentIndex + 1];
-    if (next) {
-      next.activate();
-      next.focus();
-    }
-  }
-
-  render() {
-    return html`
-      <link
-        rel="stylesheet"
-        href="chrome://browser/content/firefoxview/fxview-category-navigation.css"
-      />
-      <nav>
-        <div class="category-nav-header">
-          <slot name="category-nav-header"></slot>
-        </div>
-        <div
-          class="category-nav-buttons"
-          role="tablist"
-          aria-orientation="vertical"
-        >
-          <slot
-            name="category-button"
-            @change-category=${this.onChangeCategory}
-            @keydown=${this.handleFocus}
-          ></slot>
-        </div>
-        <div class="category-nav-footer">
-          <slot name="category-nav-footer"></slot>
-        </div>
-      </nav>
-    `;
-  }
-
-  updated() {
-    let categorySelected = false;
-    let assignedCategories = this.categoryButtons;
-    for (let button of assignedCategories) {
-      button.selected = button.name == this.currentCategory;
-      categorySelected = categorySelected || button.selected;
-    }
-    if (!categorySelected && assignedCategories.length) {
-      // Current category has no matching category, reset to the first category.
-      assignedCategories[0].activate();
-    }
-  }
-}
-customElements.define("fxview-category-navigation", FxviewCategoryNavigation);
-
-export class FxviewCategoryButton extends MozLitElement {
-  static properties = {
-    selected: { type: Boolean },
-  };
-
-  static queries = {
-    buttonEl: "button",
-  };
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "tab");
-  }
-
-  get name() {
-    return this.getAttribute("name");
-  }
-
-  activate() {
-    this.dispatchEvent(
-      new CustomEvent("change-category", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    return html`
-      <link
-        rel="stylesheet"
-        href="chrome://browser/content/firefoxview/fxview-category-button.css"
-      />
-      <button
-        aria-hidden="true"
-        tabindex="-1"
-        ?selected=${this.selected}
-        @click=${this.activate}
-      >
-        <span class="category-icon" part="icon"></span>
-        <slot></slot>
-      </button>
-    `;
-  }
-
-  updated() {
-    this.setAttribute("aria-selected", this.selected);
-    this.setAttribute("tabindex", this.selected ? 0 : -1);
-  }
-}
-customElements.define("fxview-category-button", FxviewCategoryButton);
diff --git a/browser/components/firefoxview/fxview-tab-list.css b/browser/components/firefoxview/fxview-tab-list.css
index d32d9c9c08..5a4bff023a 100644
--- a/browser/components/firefoxview/fxview-tab-list.css
+++ b/browser/components/firefoxview/fxview-tab-list.css
@@ -2,14 +2,33 @@
  * 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/. */
 
- .fxview-tab-list {
+:host {
   display: grid;
-  grid-template-columns: min-content 3fr min-content 2fr 1fr 1fr min-content min-content;
-  gap: 6px;
+  row-gap: var(--space-xsmall);
 }
 
-:host([compactRows]) .fxview-tab-list {
-  grid-template-columns: min-content 1fr min-content min-content min-content;
+.fxview-tab-list {
+  display: grid;
+  grid-template-columns: min-content 3fr min-content 2fr 1fr 1fr min-content min-content;
+  gap: var(--space-xsmall);
+
+  &.pinned {
+    display: flex;
+    flex-wrap: wrap;
+
+    > virtual-list {
+      display: block;
+    }
+
+    > fxview-tab-row {
+      display: block;
+      margin-block-end: var(--space-xsmall);
+    }
+  }
+
+  :host([compactRows]) & {
+    grid-template-columns: min-content 1fr min-content min-content min-content;
+  }
 }
 
 virtual-list {
diff --git a/browser/components/firefoxview/fxview-tab-list.mjs b/browser/components/firefoxview/fxview-tab-list.mjs
index 055540722a..978ab79724 100644
--- a/browser/components/firefoxview/fxview-tab-list.mjs
+++ b/browser/components/firefoxview/fxview-tab-list.mjs
@@ -45,8 +45,11 @@ if (!window.IS_STORYBOOK) {
  * @property {string} dateTimeFormat - Expected format for date and/or time
  * @property {string} hasPopup - The aria-haspopup attribute for the secondary action, if required
  * @property {number} maxTabsLength - The max number of tabs for the list
+ * @property {boolean} pinnedTabsGridView - Whether to show pinned tabs in a grid view
  * @property {Array} tabItems - Items to show in the tab list
  * @property {string} searchQuery - The query string to highlight, if provided.
+ * @property {string} secondaryActionClass - The class used to style the secondary action element
+ * @property {string} tertiaryActionClass - The class used to style the tertiary action element
  */
 export default class FxviewTabList extends MozLitElement {
   constructor() {
@@ -59,6 +62,9 @@ export default class FxviewTabList extends MozLitElement {
     this.dateTimeFormat = "relative";
     this.maxTabsLength = 25;
     this.tabItems = [];
+    this.pinnedTabs = [];
+    this.pinnedTabsGridView = false;
+    this.unpinnedTabs = [];
     this.compactRows = false;
     this.updatesPaused = true;
     this.#register();
@@ -71,9 +77,12 @@ export default class FxviewTabList extends MozLitElement {
     dateTimeFormat: { type: String },
     hasPopup: { type: String },
     maxTabsLength: { type: Number },
+    pinnedTabsGridView: { type: Boolean },
     tabItems: { type: Array },
     updatesPaused: { type: Boolean },
     searchQuery: { type: String },
+    secondaryActionClass: { type: String },
+    tertiaryActionClass: { type: String },
   };
 
   static queries = {
@@ -99,8 +108,20 @@ export default class FxviewTabList extends MozLitElement {
       }
     }
 
-    if (this.maxTabsLength > 0) {
+    // Move pinned tabs to the beginning of the list
+    if (this.pinnedTabsGridView) {
       // Can set maxTabsLength to -1 to have no max
+      this.unpinnedTabs = this.tabItems.filter(
+        tab => !tab.indicators?.includes("pinned")
+      );
+      this.pinnedTabs = this.tabItems.filter(tab =>
+        tab.indicators?.includes("pinned")
+      );
+      if (this.maxTabsLength > 0) {
+        this.unpinnedTabs = this.unpinnedTabs.slice(0, this.maxTabsLength);
+      }
+      this.tabItems = [...this.pinnedTabs, ...this.unpinnedTabs];
+    } else if (this.maxTabsLength > 0) {
       this.tabItems = this.tabItems.slice(0, this.maxTabsLength);
     }
   }
@@ -176,56 +197,93 @@ export default class FxviewTabList extends MozLitElement {
     if (e.code == "ArrowUp") {
       // Focus either the link or button of the previous row based on this.currentActiveElementId
       e.preventDefault();
-      this.focusPrevRow();
+      if (
+        (this.pinnedTabsGridView &&
+          this.activeIndex >= this.pinnedTabs.length) ||
+        !this.pinnedTabsGridView
+      ) {
+        this.focusPrevRow();
+      }
     } else if (e.code == "ArrowDown") {
       // Focus either the link or button of the next row based on this.currentActiveElementId
       e.preventDefault();
-      this.focusNextRow();
+      if (
+        this.pinnedTabsGridView &&
+        this.activeIndex < this.pinnedTabs.length
+      ) {
+        this.focusIndex(this.pinnedTabs.length);
+      } else {
+        this.focusNextRow();
+      }
     } else if (e.code == "ArrowRight") {
       // Focus either the link or the button in the current row and
       // set this.currentActiveElementId to that element's ID
       e.preventDefault();
       if (document.dir == "rtl") {
-        if (
-          (fxviewTabRow.soundPlaying || fxviewTabRow.muted) &&
-          this.currentActiveElementId === "fxview-tab-row-secondary-button"
-        ) {
-          this.currentActiveElementId = fxviewTabRow.focusMediaButton();
-        } else {
-          this.currentActiveElementId = fxviewTabRow.focusLink();
-        }
-      } else if (
-        (fxviewTabRow.soundPlaying || fxviewTabRow.muted) &&
-        this.currentActiveElementId === "fxview-tab-row-main"
-      ) {
-        this.currentActiveElementId = fxviewTabRow.focusMediaButton();
+        this.moveFocusLeft(fxviewTabRow);
       } else {
-        this.currentActiveElementId = fxviewTabRow.focusButton();
+        this.moveFocusRight(fxviewTabRow);
       }
     } else if (e.code == "ArrowLeft") {
       // Focus either the link or the button in the current row and
       // set this.currentActiveElementId to that element's ID
       e.preventDefault();
       if (document.dir == "rtl") {
-        if (
-          (fxviewTabRow.soundPlaying || fxviewTabRow.muted) &&
-          this.currentActiveElementId === "fxview-tab-row-main"
-        ) {
-          this.currentActiveElementId = fxviewTabRow.focusMediaButton();
-        } else {
-          this.currentActiveElementId = fxviewTabRow.focusButton();
-        }
-      } else if (
-        (fxviewTabRow.soundPlaying || fxviewTabRow.muted) &&
-        this.currentActiveElementId === "fxview-tab-row-secondary-button"
-      ) {
-        this.currentActiveElementId = fxviewTabRow.focusMediaButton();
+        this.moveFocusRight(fxviewTabRow);
       } else {
-        this.currentActiveElementId = fxviewTabRow.focusLink();
+        this.moveFocusLeft(fxviewTabRow);
       }
     }
   }
 
+  moveFocusRight(fxviewTabRow) {
+    if (
+      this.pinnedTabsGridView &&
+      fxviewTabRow.indicators?.includes("pinned")
+    ) {
+      this.focusNextRow();
+    } else if (
+      (fxviewTabRow.indicators?.includes("soundplaying") ||
+        fxviewTabRow.indicators?.includes("muted")) &&
+      this.currentActiveElementId === "fxview-tab-row-main"
+    ) {
+      this.currentActiveElementId = fxviewTabRow.focusMediaButton();
+    } else if (
+      this.currentActiveElementId === "fxview-tab-row-media-button" ||
+      this.currentActiveElementId === "fxview-tab-row-main"
+    ) {
+      this.currentActiveElementId = fxviewTabRow.focusSecondaryButton();
+    } else if (
+      fxviewTabRow.tertiaryButtonEl &&
+      this.currentActiveElementId === "fxview-tab-row-secondary-button"
+    ) {
+      this.currentActiveElementId = fxviewTabRow.focusTertiaryButton();
+    }
+  }
+
+  moveFocusLeft(fxviewTabRow) {
+    if (
+      this.pinnedTabsGridView &&
+      (fxviewTabRow.indicators?.includes("pinned") ||
+        (this.currentActiveElementId === "fxview-tab-row-main" &&
+          this.activeIndex === this.pinnedTabs.length))
+    ) {
+      this.focusPrevRow();
+    } else if (
+      this.currentActiveElementId === "fxview-tab-row-tertiary-button"
+    ) {
+      this.currentActiveElementId = fxviewTabRow.focusSecondaryButton();
+    } else if (
+      (fxviewTabRow.indicators?.includes("soundplaying") ||
+        fxviewTabRow.indicators?.includes("muted")) &&
+      this.currentActiveElementId === "fxview-tab-row-secondary-button"
+    ) {
+      this.currentActiveElementId = fxviewTabRow.focusMediaButton();
+    } else {
+      this.currentActiveElementId = fxviewTabRow.focusLink();
+    }
+  }
+
   focusPrevRow() {
     this.focusIndex(this.activeIndex - 1);
   }
@@ -236,12 +294,18 @@ export default class FxviewTabList extends MozLitElement {
 
   async focusIndex(index) {
     // Focus link or button of item
-    if (lazy.virtualListEnabledPref) {
-      let row = this.rootVirtualListEl.getItem(index);
+    if (
+      ((this.pinnedTabsGridView && index > this.pinnedTabs.length) ||
+        !this.pinnedTabsGridView) &&
+      lazy.virtualListEnabledPref
+    ) {
+      let row = this.rootVirtualListEl.getItem(index - this.pinnedTabs.length);
       if (!row) {
         return;
       }
-      let subList = this.rootVirtualListEl.getSubListForItem(index);
+      let subList = this.rootVirtualListEl.getSubListForItem(
+        index - this.pinnedTabs.length
+      );
       if (!subList) {
         return;
       }
@@ -286,23 +350,30 @@ export default class FxviewTabList extends MozLitElement {
     return html`
       <fxview-tab-row
         exportparts="secondary-button"
+        class=${classMap({
+          pinned:
+            this.pinnedTabsGridView && tabItem.indicators?.includes("pinned"),
+        })}
         ?active=${i == this.activeIndex}
         ?compact=${this.compactRows}
         .hasPopup=${this.hasPopup}
-        .containerObj=${tabItem.containerObj}
+        .containerObj=${ifDefined(tabItem.containerObj)}
         .currentActiveElementId=${this.currentActiveElementId}
         .dateTimeFormat=${this.dateTimeFormat}
         .favicon=${tabItem.icon}
-        .isBookmark=${ifDefined(tabItem.isBookmark)}
-        .muted=${ifDefined(tabItem.muted)}
-        .pinned=${ifDefined(tabItem.pinned)}
+        .indicators=${ifDefined(tabItem.indicators)}
+        .pinnedTabsGridView=${ifDefined(this.pinnedTabsGridView)}
         .primaryL10nId=${tabItem.primaryL10nId}
         .primaryL10nArgs=${ifDefined(tabItem.primaryL10nArgs)}
-        role="listitem"
+        role=${this.pinnedTabsGridView && tabItem.indicators?.includes("pinned")
+          ? "none"
+          : "listitem"}
         .secondaryL10nId=${tabItem.secondaryL10nId}
         .secondaryL10nArgs=${ifDefined(tabItem.secondaryL10nArgs)}
-        .attention=${ifDefined(tabItem.attention)}
-        .soundPlaying=${ifDefined(tabItem.soundPlaying)}
+        .tertiaryL10nId=${ifDefined(tabItem.tertiaryL10nId)}
+        .tertiaryL10nArgs=${ifDefined(tabItem.tertiaryL10nArgs)}
+        .secondaryActionClass=${this.secondaryActionClass}
+        .tertiaryActionClass=${ifDefined(this.tertiaryActionClass)}
         .sourceClosedId=${ifDefined(tabItem.sourceClosedId)}
         .sourceWindowId=${ifDefined(tabItem.sourceWindowId)}
         .closedId=${ifDefined(tabItem.closedId || tabItem.closedId)}
@@ -311,7 +382,6 @@ export default class FxviewTabList extends MozLitElement {
         .time=${ifDefined(time)}
         .timeMsPref=${ifDefined(this.timeMsPref)}
         .title=${tabItem.title}
-        .titleChanged=${ifDefined(tabItem.titleChanged)}
         .url=${tabItem.url}
       ></fxview-tab-row>
     `;
@@ -326,9 +396,26 @@ export default class FxviewTabList extends MozLitElement {
         rel="stylesheet"
         href="chrome://browser/content/firefoxview/fxview-tab-list.css"
       />
+      ${when(
+        this.pinnedTabsGridView && this.pinnedTabs.length,
+        () => html`
+          <div
+            id="fxview-tab-list"
+            class="fxview-tab-list pinned"
+            data-l10n-id="firefoxview-pinned-tabs"
+            role="tablist"
+            @keydown=${this.handleFocusElementInRow}
+          >
+            ${this.pinnedTabs.map((tabItem, i) =>
+              this.itemTemplate(tabItem, i)
+            )}
+          </div>
+        `
+      )}
       <div
         id="fxview-tab-list"
         class="fxview-tab-list"
+        data-l10n-id="firefoxview-tabs"
         role="list"
         @keydown=${this.handleFocusElementInRow}
       >
@@ -337,7 +424,12 @@ export default class FxviewTabList extends MozLitElement {
           () => html`
             <virtual-list
               .activeIndex=${this.activeIndex}
-              .items=${this.tabItems}
+              .pinnedTabsIndexOffset=${this.pinnedTabsGridView
+                ? this.pinnedTabs.length
+                : 0}
+              .items=${this.pinnedTabsGridView
+                ? this.unpinnedTabs
+                : this.tabItems}
               .template=${this.itemTemplate}
             ></virtual-list>
           `
@@ -374,23 +466,23 @@ customElements.define("fxview-tab-list", FxviewTabList);
  * @property {string} currentActiveElementId - ID of currently focused element within each tab item
  * @property {string} dateTimeFormat - Expected format for date and/or time
  * @property {string} hasPopup - The aria-haspopup attribute for the secondary action, if required
- * @property {boolean} isBookmark - Whether an open tab is bookmarked
+ * @property {string} indicators - An array of tab indicators if any are present
  * @property {number} closedId - The tab ID for when the tab item was closed.
  * @property {number} sourceClosedId - The closedId of the closed window its from if applicable
  * @property {number} sourceWindowId - The sessionstore id of the window its from if applicable
  * @property {string} favicon - The favicon for the tab item.
- * @property {boolean} muted - Whether an open tab is muted
- * @property {boolean} pinned - Whether an open tab is pinned
+ * @property {boolean} pinnedTabsGridView - Whether the show pinned tabs in a grid view
  * @property {string} primaryL10nId - The l10n id used for the primary action element
  * @property {string} primaryL10nArgs - The l10n args used for the primary action element
  * @property {string} secondaryL10nId - The l10n id used for the secondary action button
  * @property {string} secondaryL10nArgs - The l10n args used for the secondary action element
- * @property {boolean} attention - Whether to show a notification dot
- * @property {boolean} soundPlaying - Whether an open tab has soundPlaying
+ * @property {string} secondaryActionClass - The class used to style the secondary action element
+ * @property {string} tertiaryL10nId - The l10n id used for the tertiary action button
+ * @property {string} tertiaryL10nArgs - The l10n args used for the tertiary action element
+ * @property {string} tertiaryActionClass - The class used to style the tertiary action element
  * @property {object} tabElement - The MozTabbrowserTab element for the tab item.
  * @property {number} time - The timestamp for when the tab was last accessed.
  * @property {string} title - The title for the tab item.
- * @property {boolean} titleChanged - Whether the title has changed for an open tab
  * @property {string} url - The url for the tab item.
  * @property {number} timeMsPref - The frequency in milliseconds of updates to relative time
  * @property {string} searchQuery - The query string to highlight, if provided.
@@ -410,31 +502,33 @@ export class FxviewTabRow extends MozLitElement {
     dateTimeFormat: { type: String },
     favicon: { type: String },
     hasPopup: { type: String },
-    isBookmark: { type: Boolean },
-    muted: { type: Boolean },
-    pinned: { type: Boolean },
+    indicators: { type: Array },
+    pinnedTabsGridView: { type: Boolean },
     primaryL10nId: { type: String },
     primaryL10nArgs: { type: String },
     secondaryL10nId: { type: String },
     secondaryL10nArgs: { type: String },
-    soundPlaying: { type: Boolean },
+    secondaryActionClass: { type: String },
+    tertiaryL10nId: { type: String },
+    tertiaryL10nArgs: { type: String },
+    tertiaryActionClass: { type: String },
     closedId: { type: Number },
     sourceClosedId: { type: Number },
     sourceWindowId: { type: String },
     tabElement: { type: Object },
     time: { type: Number },
     title: { type: String },
-    titleChanged: { type: Boolean },
-    attention: { type: Boolean },
     timeMsPref: { type: Number },
     url: { type: String },
     searchQuery: { type: String },
   };
 
   static queries = {
-    mainEl: ".fxview-tab-row-main",
-    buttonEl: "#fxview-tab-row-secondary-button:not([hidden])",
+    mainEl: "#fxview-tab-row-main",
+    secondaryButtonEl: "#fxview-tab-row-secondary-button:not([hidden])",
+    tertiaryButtonEl: "#fxview-tab-row-tertiary-button",
     mediaButtonEl: "#fxview-tab-row-media-button",
+    pinnedTabButtonEl: "button#fxview-tab-row-main",
   };
 
   get currentFocusable() {
@@ -445,13 +539,40 @@ export class FxviewTabRow extends MozLitElement {
     return focusItem;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
+
+  handleKeydown(e) {
+    if (
+      this.active &&
+      this.pinnedTabsGridView &&
+      this.indicators?.includes("pinned") &&
+      e.key === "m" &&
+      e.ctrlKey
+    ) {
+      this.muteOrUnmuteTab();
+    }
+  }
+
   focus() {
     this.currentFocusable.focus();
   }
 
-  focusButton() {
-    this.buttonEl.focus();
-    return this.buttonEl.id;
+  focusSecondaryButton() {
+    this.secondaryButtonEl.focus();
+    return this.secondaryButtonEl.id;
+  }
+
+  focusTertiaryButton() {
+    this.tertiaryButtonEl.focus();
+    return this.tertiaryButtonEl.id;
   }
 
   focusMediaButton() {
@@ -562,6 +683,9 @@ export class FxviewTabRow extends MozLitElement {
 
   secondaryActionHandler(event) {
     if (
+      (this.pinnedTabsGridView &&
+        this.indicators?.includes("pinned") &&
+        event.type == "contextmenu") ||
       (event.type == "click" && event.detail && !event.altKey) ||
       // detail=0 is from keyboard
       (event.type == "click" && !event.detail)
@@ -577,12 +701,108 @@ export class FxviewTabRow extends MozLitElement {
     }
   }
 
-  muteOrUnmuteTab() {
+  tertiaryActionHandler(event) {
+    if (
+      (event.type == "click" && event.detail && !event.altKey) ||
+      // detail=0 is from keyboard
+      (event.type == "click" && !event.detail)
+    ) {
+      event.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("fxview-tab-list-tertiary-action", {
+          bubbles: true,
+          composed: true,
+          detail: { originalEvent: event, item: this },
+        })
+      );
+    }
+  }
+
+  muteOrUnmuteTab(e) {
+    e?.preventDefault();
+    // If the tab has no sound playing, the mute/unmute button will be removed when toggled.
+    // We should move the focus to the right in that case. This does not apply to pinned tabs
+    // on the Open Tabs page.
+    let shouldMoveFocus =
+      (!this.pinnedTabsGridView ||
+        (!this.indicators.includes("pinned") && this.pinnedTabsGridView)) &&
+      this.mediaButtonEl &&
+      !this.indicators.includes("soundplaying") &&
+      this.currentActiveElementId === "fxview-tab-row-media-button";
+
+    // detail=0 is from keyboard
+    if (e?.type == "click" && !e?.detail && shouldMoveFocus) {
+      let tabList = this.getRootNode().host;
+      if (document.dir == "rtl") {
+        tabList.moveFocusLeft(this);
+      } else {
+        tabList.moveFocusRight(this);
+      }
+    }
     this.tabElement.toggleMuteAudio();
-    this.muted = !this.muted;
   }
 
-  render() {
+  #faviconTemplate() {
+    return html`<span
+      class="${classMap({
+        "fxview-tab-row-favicon-wrapper": true,
+        pinned: this.indicators?.includes("pinned"),
+        pinnedOnNewTab: this.indicators?.includes("pinnedOnNewTab"),
+        attention: this.indicators?.includes("attention"),
+        bookmark: this.indicators?.includes("bookmark"),
+      })}"
+    >
+      <span
+        class="fxview-tab-row-favicon icon"
+        id="fxview-tab-row-favicon"
+        style=${styleMap({
+          backgroundImage: `url(${this.getImageUrl(this.favicon, this.url)})`,
+        })}
+      ></span>
+      ${when(
+        this.pinnedTabsGridView &&
+          this.indicators?.includes("pinned") &&
+          (this.indicators?.includes("muted") ||
+            this.indicators?.includes("soundplaying")),
+        () => html`
+          <button
+            class="fxview-tab-row-pinned-media-button ghost-button icon-button"
+            id="fxview-tab-row-media-button"
+            tabindex="-1"
+            data-l10n-id=${this.indicators?.includes("muted")
+              ? "fxviewtabrow-unmute-tab-button-no-context"
+              : "fxviewtabrow-mute-tab-button-no-context"}
+            muted=${this.indicators?.includes("muted")}
+            soundplaying=${this.indicators?.includes("soundplaying") &&
+            !this.indicators?.includes("muted")}
+            @click=${this.muteOrUnmuteTab}
+          ></button>
+        `
+      )}
+    </span>`;
+  }
+
+  #pinnedTabItemTemplate() {
+    return html` <button
+      class="fxview-tab-row-main ghost-button semi-transparent"
+      id="fxview-tab-row-main"
+      aria-haspopup=${ifDefined(this.hasPopup)}
+      data-l10n-id=${ifDefined(this.primaryL10nId)}
+      data-l10n-args=${ifDefined(this.primaryL10nArgs)}
+      tabindex=${this.active &&
+      this.currentActiveElementId === "fxview-tab-row-main"
+        ? "0"
+        : "-1"}
+      role="tab"
+      @click=${this.primaryActionHandler}
+      @keydown=${this.primaryActionHandler}
+      @contextmenu=${this.secondaryActionHandler}
+    >
+      ${this.#faviconTemplate()}
+    </button>`;
+  }
+
+  #unpinnedTabItemTemplate() {
     const title = this.title;
     const relativeString = this.relativeTime(
       this.time,
@@ -598,25 +818,8 @@ export class FxviewTabRow extends MozLitElement {
     const timeString = this.timeFluentId(this.dateTimeFormat);
     const time = this.time;
     const timeArgs = JSON.stringify({ time });
-    return html`
-      ${when(
-        this.containerObj,
-        () => html`
-          <link
-            rel="stylesheet"
-            href="chrome://browser/content/usercontext/usercontext.css"
-          />
-        `
-      )}
-      <link
-        rel="stylesheet"
-        href="chrome://global/skin/in-content/common.css"
-      />
-      <link
-        rel="stylesheet"
-        href="chrome://browser/content/firefoxview/fxview-tab-row.css"
-      />
-      <a
+
+    return html`<a
         href=${ifDefined(this.url)}
         class="fxview-tab-row-main"
         id="fxview-tab-row-main"
@@ -628,29 +831,9 @@ export class FxviewTabRow extends MozLitElement {
         data-l10n-args=${ifDefined(this.primaryL10nArgs)}
         @click=${this.primaryActionHandler}
         @keydown=${this.primaryActionHandler}
+        title=${!this.primaryL10nId ? this.url : null}
       >
-        <span
-          class="${classMap({
-            "fxview-tab-row-favicon-wrapper": true,
-            bookmark: this.isBookmark && !this.attention,
-            notification: this.pinned
-              ? this.attention || this.titleChanged
-              : this.attention,
-            soundplaying: this.soundPlaying && !this.muted && this.pinned,
-            muted: this.muted && this.pinned,
-          })}"
-        >
-          <span
-            class="fxview-tab-row-favicon icon"
-            id="fxview-tab-row-favicon"
-            style=${styleMap({
-              backgroundImage: `url(${this.getImageUrl(
-                this.favicon,
-                this.url
-              )})`,
-            })}
-          ></span>
-        </span>
+        ${this.#faviconTemplate()}
         <span
           class="fxview-tab-row-title text-truncated-ellipsis"
           id="fxview-tab-row-title"
@@ -701,34 +884,42 @@ export class FxviewTabRow extends MozLitElement {
         </span>
       </a>
       ${when(
-        (this.soundPlaying || this.muted) && !this.pinned,
+        this.indicators?.includes("soundplaying") ||
+          this.indicators?.includes("muted"),
         () => html`<button
-          class=fxview-tab-row-button ghost-button icon-button semi-transparent"
-          id="fxview-tab-row-media-button"
-          data-l10n-id=${
-            this.muted
-              ? "fxviewtabrow-unmute-tab-button"
-              : "fxviewtabrow-mute-tab-button"
-          }
-          data-l10n-args=${JSON.stringify({ tabTitle: title })}
-          muted=${ifDefined(this.muted)}
-          soundplaying=${this.soundPlaying && !this.muted}
-          @click=${this.muteOrUnmuteTab}
-          tabindex="${
-            this.active &&
-            this.currentActiveElementId === "fxview-tab-row-media-button"
-              ? "0"
-              : "-1"
-          }"
-        ></button>`,
+        class=fxview-tab-row-button ghost-button icon-button semi-transparent"
+        id="fxview-tab-row-media-button"
+        data-l10n-id=${
+          this.indicators?.includes("muted")
+            ? "fxviewtabrow-unmute-tab-button-no-context"
+            : "fxviewtabrow-mute-tab-button-no-context"
+        }
+        muted=${this.indicators?.includes("muted")}
+        soundplaying=${
+          this.indicators?.includes("soundplaying") &&
+          !this.indicators?.includes("muted")
+        }
+        @click=${this.muteOrUnmuteTab}
+        tabindex="${
+          this.active &&
+          this.currentActiveElementId === "fxview-tab-row-media-button"
+            ? "0"
+            : "-1"
+        }"
+      ></button>`,
         () => html`<span></span>`
       )}
       ${when(
         this.secondaryL10nId && this.secondaryActionHandler,
         () => html`<button
-          class="fxview-tab-row-button ghost-button icon-button semi-transparent"
+          class=${classMap({
+            "fxview-tab-row-button": true,
+            "ghost-button": true,
+            "icon-button": true,
+            "semi-transparent": true,
+            [this.secondaryActionClass]: this.secondaryActionClass,
+          })}
           id="fxview-tab-row-secondary-button"
-          part="secondary-button"
           data-l10n-id=${this.secondaryL10nId}
           data-l10n-args=${ifDefined(this.secondaryL10nArgs)}
           aria-haspopup=${ifDefined(this.hasPopup)}
@@ -739,6 +930,53 @@ export class FxviewTabRow extends MozLitElement {
             : "-1"}"
         ></button>`
       )}
+      ${when(
+        this.tertiaryL10nId && this.tertiaryActionHandler,
+        () => html`<button
+          class=${classMap({
+            "fxview-tab-row-button": true,
+            "ghost-button": true,
+            "icon-button": true,
+            "semi-transparent": true,
+            [this.tertiaryActionClass]: this.tertiaryActionClass,
+          })}
+          id="fxview-tab-row-tertiary-button"
+          data-l10n-id=${this.tertiaryL10nId}
+          data-l10n-args=${ifDefined(this.tertiaryL10nArgs)}
+          aria-haspopup=${ifDefined(this.hasPopup)}
+          @click=${this.tertiaryActionHandler}
+          tabindex="${this.active &&
+          this.currentActiveElementId === "fxview-tab-row-tertiary-button"
+            ? "0"
+            : "-1"}"
+        ></button>`
+      )}`;
+  }
+
+  render() {
+    return html`
+      ${when(
+        this.containerObj,
+        () => html`
+          <link
+            rel="stylesheet"
+            href="chrome://browser/content/usercontext/usercontext.css"
+          />
+        `
+      )}
+      <link
+        rel="stylesheet"
+        href="chrome://global/skin/in-content/common.css"
+      />
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/firefoxview/fxview-tab-row.css"
+      />
+      ${when(
+        this.pinnedTabsGridView && this.indicators?.includes("pinned"),
+        this.#pinnedTabItemTemplate.bind(this),
+        this.#unpinnedTabItemTemplate.bind(this)
+      )}
     `;
   }
 
@@ -780,6 +1018,7 @@ export class VirtualList extends MozLitElement {
     isAlwaysVisible: { type: Boolean },
     isVisible: { type: Boolean, state: true },
     isSubList: { type: Boolean },
+    pinnedTabsIndexOffset: { type: Number },
   };
 
   createRenderRoot() {
@@ -790,6 +1029,7 @@ export class VirtualList extends MozLitElement {
     super();
     this.activeIndex = 0;
     this.itemOffset = 0;
+    this.pinnedTabsIndexOffset = 0;
     this.items = [];
     this.subListItems = [];
     this.itemHeightEstimate = FXVIEW_ROW_HEIGHT_PX;
@@ -893,14 +1133,16 @@ export class VirtualList extends MozLitElement {
       .template=${this.template}
       .items=${data}
       .itemHeightEstimate=${this.itemHeightEstimate}
-      .itemOffset=${i * this.maxRenderCountEstimate}
+      .itemOffset=${i * this.maxRenderCountEstimate +
+      this.pinnedTabsIndexOffset}
       .isAlwaysVisible=${i ==
       parseInt(this.activeIndex / this.maxRenderCountEstimate, 10)}
       isSubList
     ></virtual-list>`;
   };
 
-  itemTemplate = (data, i) => this.template(data, this.itemOffset + i);
+  itemTemplate = (data, i) =>
+    this.template(data, this.itemOffset + i + this.pinnedTabsIndexOffset);
 
   render() {
     if (this.isAlwaysVisible || this.isVisible) {
diff --git a/browser/components/firefoxview/fxview-tab-row.css b/browser/components/firefoxview/fxview-tab-row.css
index ceb059a33b..219d7e8aa2 100644
--- a/browser/components/firefoxview/fxview-tab-row.css
+++ b/browser/components/firefoxview/fxview-tab-row.css
@@ -31,6 +31,12 @@
   user-select: none;
   cursor: pointer;
   text-decoration: none;
+
+  :host(.pinned) & {
+    padding: var(--space-small);
+    min-width: unset;
+    margin: 0;
+  }
 }
 
 .fxview-tab-row-main,
@@ -44,6 +50,10 @@
 .fxview-tab-row-button.ghost-button.icon-button:enabled:hover {
   background-color: var(--fxviewtabrow-element-background-hover);
   color: var(--fxviewtabrow-text-color-hover);
+
+  & .fxview-tab-row-favicon-wrapper .fxview-tab-row-favicon::after {
+    stroke: var(--fxview-indicator-stroke-color-hover);
+  }
 }
 
 .fxview-tab-row-main:hover:active,
@@ -52,15 +62,16 @@
 }
 
 @media (prefers-contrast) {
-  .fxview-tab-row-main,
-  .fxview-tab-row-main:hover,
-  .fxview-tab-row-main:active {
+  a.fxview-tab-row-main,
+  a.fxview-tab-row-main:hover,
+  a.fxview-tab-row-main:active {
     background-color: transparent;
     border: 1px solid LinkText;
     color: LinkText;
   }
 
-  .fxview-tab-row-main:visited .fxview-tab-row-main:visited:hover {
+  a.fxview-tab-row-main:visited,
+  a.fxview-tab-row-main:visited:hover {
     border: 1px solid VisitedText;
     color: VisitedText;
   }
@@ -68,14 +79,17 @@
 
 .fxview-tab-row-favicon-wrapper {
   height: 16px;
+  position: relative;
 
-  .fxview-tab-row-favicon::after {
+  .fxview-tab-row-favicon::after,
+  .fxview-tab-row-button::after,
+  &.pinned .fxview-tab-row-pinned-media-button {
     display: block;
     content: "";
     background-size: 12px;
     background-position: center;
     background-repeat: no-repeat;
-    position: absolute;
+    position: relative;
     height: 12px;
     width: 12px;
     -moz-context-properties: fill, stroke;
@@ -83,36 +97,47 @@
     stroke: var(--fxview-background-color-secondary);
   }
 
-  &.bookmark .fxview-tab-row-favicon::after {
-    background-image: url("chrome://browser/skin/bookmark-12.svg");
+  &:is(.pinnedOnNewTab, .bookmark):not(.attention) .fxview-tab-row-favicon::after {
     inset-block-start: 9px;
     inset-inline-end: -6px;
+  }
+
+  &.pinnedOnNewTab .fxview-tab-row-favicon::after,
+  &.pinnedOnNewTab .fxview-tab-row-button::after {
+    background-image: url("chrome://browser/skin/pin-12.svg");
+  }
+
+  &.bookmark .fxview-tab-row-favicon::after,
+  &.bookmark .fxview-tab-row-button::after {
+    background-image: url("chrome://browser/skin/bookmark-12.svg");
     fill: var(--fxview-primary-action-background);
   }
 
-  &.notification .fxview-tab-row-favicon::after {
+  &.attention .fxview-tab-row-favicon::after,
+  &.attention .fxview-tab-row-button::after {
     background-image: radial-gradient(circle, light-dark(rgb(42, 195, 162), rgb(84, 255, 189)), light-dark(rgb(42, 195, 162), rgb(84, 255, 189)) 2px, transparent 2px);
     height: 4px;
     width: 100%;
     inset-block-start: 20px;
   }
 
-  &.soundplaying .fxview-tab-row-favicon::after {
-    background-image: url("chrome://global/skin/media/audio.svg");
-    inset-block-start: -5px;
-    inset-inline-end: -7px;
+  &.pinned .fxview-tab-row-pinned-media-button {
+    inset-block-start: -10px;
+    inset-inline-end: -10px;
     border-radius: 100%;
     background-color: var(--fxview-background-color-secondary);
-    padding: 2px;
-  }
+    padding: 6px;
+    min-width: 0;
+    min-height: 0;
+    position: absolute;
 
-  &.muted .fxview-tab-row-favicon::after {
-    background-image: url("chrome://global/skin/media/audio-muted.svg");
-    inset-block-start: -5px;
-    inset-inline-end: -7px;
-    border-radius: 100%;
-    background-color: var(--fxview-background-color-secondary);
-    padding: 2px;
+    &[muted="true"] {
+      background-image: url("chrome://global/skin/media/audio-muted.svg");
+    }
+
+    &[soundplaying="true"] {
+      background-image: url("chrome://global/skin/media/audio.svg");
+    }
   }
 }
 
@@ -179,26 +204,40 @@
   &[soundplaying="true"] {
     background-image: url("chrome://global/skin/media/audio.svg");
   }
+
+  &.dismiss-button {
+    background-image: url("chrome://global/skin/icons/close.svg");
+  }
+
+  &.options-button {
+    background-image: url("chrome://global/skin/icons/more.svg");
+  }
 }
 
 @media (prefers-contrast) {
-  .fxview-tab-row-button {
+  .fxview-tab-row-button,
+  button.fxview-tab-row-main {
     border: 1px solid ButtonText;
     color: ButtonText;
   }
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:hover {
+  .fxview-tab-row-button.ghost-button.icon-button:enabled:hover,
+  button.fxview-tab-row-main:enabled:hover {
     border: 1px solid SelectedItem;
     color: SelectedItem;
   }
 
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:active {
+  .fxview-tab-row-button.ghost-button.icon-button:enabled:active,
+  button.fxview-tab-row-main:enabled:active {
     color: SelectedItem;
   }
 
   .fxview-tab-row-button.ghost-button.icon-button:enabled,
   .fxview-tab-row-button.ghost-button.icon-button:enabled:hover,
-  .fxview-tab-row-button.ghost-button.icon-button:enabled:active {
+  .fxview-tab-row-button.ghost-button.icon-button:enabled:active
+  button.fxview-tab-row-main:enabled,
+  button.fxview-tab-row-main:enabled:hover,
+  button.fxview-tab-row-main:enabled:active {
     background-color: ButtonFace;
   }
 }
diff --git a/browser/components/firefoxview/history.mjs b/browser/components/firefoxview/history.mjs
index 935cc037e9..1fe028449b 100644
--- a/browser/components/firefoxview/history.mjs
+++ b/browser/components/firefoxview/history.mjs
@@ -418,7 +418,7 @@ class HistoryInView extends ViewPage {
             ></h3>
             <fxview-tab-list
               slot="main"
-              class="with-context-menu"
+              secondaryActionClass="options-button"
               dateTimeFormat=${historyItem.l10nId.includes("prev-month")
                 ? "dateTime"
                 : "time"}
@@ -442,7 +442,7 @@ class HistoryInView extends ViewPage {
             </h3>
             <fxview-tab-list
               slot="main"
-              class="with-context-menu"
+              secondaryActionClass="options-button"
               dateTimeFormat="dateTime"
               hasPopup="menu"
               maxTabsLength=${this.maxTabsLength}
@@ -520,7 +520,7 @@ class HistoryInView extends ViewPage {
       )}
       <fxview-tab-list
         slot="main"
-        class="with-context-menu"
+        secondaryActionClass="options-button"
         dateTimeFormat="dateTime"
         hasPopup="menu"
         maxTabsLength="-1"
diff --git a/browser/components/firefoxview/jar.mn b/browser/components/firefoxview/jar.mn
index 27eeaaef80..1e5cc3e690 100644
--- a/browser/components/firefoxview/jar.mn
+++ b/browser/components/firefoxview/jar.mn
@@ -15,9 +15,6 @@ browser.jar:
     content/browser/firefoxview/view-syncedtabs.css
     content/browser/firefoxview/recentbrowsing.mjs
     content/browser/firefoxview/firefoxview.css
-    content/browser/firefoxview/fxview-category-button.css
-    content/browser/firefoxview/fxview-category-navigation.css
-    content/browser/firefoxview/fxview-category-navigation.mjs
     content/browser/firefoxview/fxview-empty-state.css
     content/browser/firefoxview/fxview-empty-state.mjs
     content/browser/firefoxview/helpers.mjs
@@ -29,12 +26,12 @@ browser.jar:
     content/browser/firefoxview/recentlyclosed.mjs
     content/browser/firefoxview/viewpage.mjs
     content/browser/firefoxview/history-empty.svg (content/history-empty.svg)
-    content/browser/firefoxview/category-history.svg (content/category-history.svg)
-    content/browser/firefoxview/category-opentabs.svg (content/category-opentabs.svg)
-    content/browser/firefoxview/category-recentbrowsing.svg (content/category-recentbrowsing.svg)
-    content/browser/firefoxview/category-recentlyclosed.svg (content/category-recentlyclosed.svg)
-    content/browser/firefoxview/category-syncedtabs.svg (content/category-syncedtabs.svg)
     content/browser/firefoxview/recentlyclosed-empty.svg (content/recentlyclosed-empty.svg)
     content/browser/firefoxview/synced-tabs-error.svg (content/synced-tabs-error.svg)
     content/browser/callout-tab-pickup.svg (content/callout-tab-pickup.svg)
     content/browser/callout-tab-pickup-dark.svg (content/callout-tab-pickup-dark.svg)
+    content/browser/firefoxview/view-history.svg (content/view-history.svg)
+    content/browser/firefoxview/view-opentabs.svg (content/view-opentabs.svg)
+    content/browser/firefoxview/view-recentbrowsing.svg (content/view-recentbrowsing.svg)
+    content/browser/firefoxview/view-recentlyclosed.svg (content/view-recentlyclosed.svg)
+    content/browser/firefoxview/view-syncedtabs.svg (content/view-syncedtabs.svg)
diff --git a/browser/components/firefoxview/opentabs.mjs b/browser/components/firefoxview/opentabs.mjs
index 6ac63a4b3f..8d7723e931 100644
--- a/browser/components/firefoxview/opentabs.mjs
+++ b/browser/components/firefoxview/opentabs.mjs
@@ -21,8 +21,10 @@ import { ViewPage, ViewPageContent } from "./viewpage.mjs";
 const lazy = {};
 
 ChromeUtils.defineESModuleGetters(lazy, {
+  BookmarkList: "resource://gre/modules/BookmarkList.sys.mjs",
   ContextualIdentityService:
     "resource://gre/modules/ContextualIdentityService.sys.mjs",
+  NewTabUtils: "resource://gre/modules/NewTabUtils.sys.mjs",
   NonPrivateTabs: "resource:///modules/OpenTabs.sys.mjs",
   getTabsTargetForWindow: "resource:///modules/OpenTabs.sys.mjs",
   PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
@@ -106,6 +108,10 @@ class OpenTabsInView extends ViewPage {
         this
       );
     }
+
+    this.bookmarkList = new lazy.BookmarkList(this.#getAllTabUrls(), () =>
+      this.viewCards.forEach(card => card.requestUpdate())
+    );
   }
 
   shouldUpdate(changedProperties) {
@@ -141,6 +147,8 @@ class OpenTabsInView extends ViewPage {
         this
       );
     }
+
+    this.bookmarkList.removeListeners();
   }
 
   viewVisibleCallback() {
@@ -161,6 +169,13 @@ class OpenTabsInView extends ViewPage {
     }
   }
 
+  #getAllTabUrls() {
+    return this.openTabsTarget
+      .getAllTabs()
+      .map(({ linkedBrowser }) => linkedBrowser?.currentURI?.spec)
+      .filter(Boolean);
+  }
+
   render() {
     if (this.recentBrowsing) {
       return this.getRecentBrowsingTemplate();
@@ -268,6 +283,7 @@ class OpenTabsInView extends ViewPage {
                   winID: currentWindowIndex,
                 })}"
                 .searchQuery=${this.searchQuery}
+                .bookmarkList=${this.bookmarkList}
               ></view-opentabs-card>
             `
         )}
@@ -282,6 +298,7 @@ class OpenTabsInView extends ViewPage {
               data-l10n-id="firefoxview-opentabs-window-header"
               data-l10n-args="${JSON.stringify({ winID })}"
               .searchQuery=${this.searchQuery}
+              .bookmarkList=${this.bookmarkList}
             ></view-opentabs-card>
           `
         )}
@@ -318,6 +335,7 @@ class OpenTabsInView extends ViewPage {
       .recentBrowsing=${true}
       .paused=${this.paused}
       .searchQuery=${this.searchQuery}
+      .bookmarkList=${this.bookmarkList}
     ></view-opentabs-card>`;
   }
 
@@ -330,13 +348,9 @@ class OpenTabsInView extends ViewPage {
     switch (type) {
       case "TabRecencyChange":
       case "TabChange":
-        // if we're switching away from our tab, we can halt any updates immediately
-        if (!this.isSelectedBrowserTab) {
-          this.stop();
-          return;
-        }
         windowIds = detail.windowIds;
         this._updateWindowList();
+        this.bookmarkList.setTrackedUrls(this.#getAllTabUrls());
         break;
     }
     if (this.recentBrowsing) {
@@ -390,6 +404,7 @@ class OpenTabsInViewCard extends ViewPageContent {
     searchResults: { type: Array },
     showAll: { type: Boolean },
     cumulativeSearches: { type: Number },
+    bookmarkList: { type: Object },
   };
   static MAX_TABS_FOR_COMPACT_HEIGHT = 7;
 
@@ -470,6 +485,14 @@ class OpenTabsInViewCard extends ViewPageContent {
   }
 
   onTabListRowClick(event) {
+    // Don't open pinned tab if mute/unmute indicator button selected
+    if (
+      Array.from(event.explicitOriginalTarget.classList).includes(
+        "fxview-tab-row-pinned-media-button"
+      )
+    ) {
+      return;
+    }
     const tab = event.originalTarget.tabElement;
     const browserWindow = tab.ownerGlobal;
     browserWindow.focus();
@@ -497,6 +520,18 @@ class OpenTabsInViewCard extends ViewPageContent {
     }
   }
 
+  closeTab(event) {
+    const tab = event.originalTarget.tabElement;
+    tab?.ownerGlobal.gBrowser.removeTab(tab);
+
+    Services.telemetry.recordEvent(
+      "firefoxview_next",
+      "close_open_tab",
+      "tabs",
+      null
+    );
+  }
+
   viewVisibleCallback() {
     this.getRootNode().host.toggleVisibilityInCardContainer(true);
   }
@@ -531,15 +566,18 @@ class OpenTabsInViewCard extends ViewPageContent {
         )}
         <div class="fxview-tab-list-container" slot="main">
           <fxview-tab-list
-            class="with-context-menu"
             .hasPopup=${"menu"}
             ?compactRows=${this.classList.contains("width-limited")}
             @fxview-tab-list-primary-action=${this.onTabListRowClick}
             @fxview-tab-list-secondary-action=${this.openContextMenu}
+            @fxview-tab-list-tertiary-action=${this.closeTab}
+            secondaryActionClass="options-button"
+            tertiaryActionClass="dismiss-button"
             .maxTabsLength=${this.getMaxTabsLength()}
-            .tabItems=${this.searchResults || getTabListItems(this.tabs)}
+            .tabItems=${this.searchResults ||
+            getTabListItems(this.tabs, this.recentBrowsing)}
             .searchQuery=${this.searchQuery}
-            .showTabIndicators=${true}
+            .pinnedTabsGridView=${!this.recentBrowsing}
             ><view-opentabs-contextmenu slot="menu"></view-opentabs-contextmenu>
           </fxview-tab-list>
         </div>
@@ -590,6 +628,28 @@ class OpenTabsInViewCard extends ViewPageContent {
       ? searchTabList(this.searchQuery, getTabListItems(this.tabs))
       : null;
   }
+
+  updated() {
+    this.updateBookmarkStars();
+  }
+
+  async updateBookmarkStars() {
+    const tabItems = [...this.tabList.tabItems];
+    for (const row of tabItems) {
+      const isBookmark = await this.bookmarkList.isBookmark(row.url);
+      if (isBookmark && !row.indicators.includes("bookmark")) {
+        row.indicators.push("bookmark");
+      }
+      if (!isBookmark && row.indicators.includes("bookmark")) {
+        row.indicators = row.indicators.filter(i => i !== "bookmark");
+      }
+      row.primaryL10nId = getPrimaryL10nId(
+        this.isRecentBrowsing,
+        row.indicators
+      );
+    }
+    this.tabList.tabItems = tabItems;
+  }
 }
 customElements.define("view-opentabs-card", OpenTabsInViewCard);
 
@@ -655,6 +715,29 @@ class OpenTabsContextMenu extends MozLitElement {
     this.ownerViewPage.recordContextMenuTelemetry("close-tab", e);
   }
 
+  pinTab(e) {
+    const tab = this.triggerNode.tabElement;
+    tab?.ownerGlobal.gBrowser.pinTab(tab);
+    this.ownerViewPage.recordContextMenuTelemetry("pin-tab", e);
+  }
+
+  unpinTab(e) {
+    const tab = this.triggerNode.tabElement;
+    tab?.ownerGlobal.gBrowser.unpinTab(tab);
+    this.ownerViewPage.recordContextMenuTelemetry("unpin-tab", e);
+  }
+
+  toggleAudio(e) {
+    const tab = this.triggerNode.tabElement;
+    tab.toggleMuteAudio();
+    this.ownerViewPage.recordContextMenuTelemetry(
+      `${
+        this.triggerNode.indicators.includes("muted") ? "unmute" : "mute"
+      }-tab`,
+      e
+    );
+  }
+
   moveTabsToStart(e) {
     const tab = this.triggerNode.tabElement;
     tab?.ownerGlobal.gBrowser.moveTabsToStart(tab);
@@ -749,16 +832,25 @@ class OpenTabsContextMenu extends MozLitElement {
       />
       <panel-list data-tab-type="opentabs">
         <panel-item
-          data-l10n-id="fxviewtabrow-close-tab"
-          data-l10n-attrs="accesskey"
-          @click=${this.closeTab}
-        ></panel-item>
-        <panel-item
           data-l10n-id="fxviewtabrow-move-tab"
           data-l10n-attrs="accesskey"
           submenu="move-tab-menu"
           >${this.moveMenuTemplate()}</panel-item
         >
+        <panel-item
+          data-l10n-id=${tab.pinned
+            ? "fxviewtabrow-unpin-tab"
+            : "fxviewtabrow-pin-tab"}
+          data-l10n-attrs="accesskey"
+          @click=${tab.pinned ? this.unpinTab : this.pinTab}
+        ></panel-item>
+        <panel-item
+          data-l10n-id=${tab.hasAttribute("muted")
+            ? "fxviewtabrow-unmute-tab"
+            : "fxviewtabrow-mute-tab"}
+          data-l10n-attrs="accesskey"
+          @click=${this.toggleAudio}
+        ></panel-item>
         <hr />
         <panel-item
           data-l10n-id="fxviewtabrow-copy-link"
@@ -798,36 +890,140 @@ function getContainerObj(tab) {
 }
 
 /**
+ * Gets an array of tab indicators (if any) when normalizing for fxview-tab-list
+ *
+ * @param {MozTabbrowserTab[]} tab
+ *   Tab to fetch container info on.
+ * @returns {Array[]}
+ *  Array of named tab indicators
+ */
+function getIndicatorsForTab(tab) {
+  const url = tab.linkedBrowser?.currentURI?.spec || "";
+  let tabIndicators = [];
+  let hasAttention =
+    (tab.pinned &&
+      (tab.hasAttribute("attention") || tab.hasAttribute("titlechanged"))) ||
+    (!tab.pinned && tab.hasAttribute("attention"));
+
+  if (tab.pinned) {
+    tabIndicators.push("pinned");
+  }
+  if (getContainerObj(tab)) {
+    tabIndicators.push("container");
+  }
+  if (hasAttention) {
+    tabIndicators.push("attention");
+  }
+  if (tab.hasAttribute("soundplaying") && !tab.hasAttribute("muted")) {
+    tabIndicators.push("soundplaying");
+  }
+  if (tab.hasAttribute("muted")) {
+    tabIndicators.push("muted");
+  }
+  if (checkIfPinnedNewTab(url)) {
+    tabIndicators.push("pinnedOnNewTab");
+  }
+
+  return tabIndicators;
+}
+/**
+ * Gets the primary l10n id for a tab when normalizing for fxview-tab-list
+ *
+ * @param {boolean} isRecentBrowsing
+ *   Whether the tabs are going to be displayed on the Recent Browsing page or not
+ * @param {Array[]} tabIndicators
+ *   Array of tab indicators for the given tab
+ * @returns {string}
+ *  L10n ID string
+ */
+function getPrimaryL10nId(isRecentBrowsing, tabIndicators) {
+  let indicatorL10nId = null;
+  if (!isRecentBrowsing) {
+    if (
+      tabIndicators?.includes("pinned") &&
+      tabIndicators?.includes("bookmark")
+    ) {
+      indicatorL10nId = "firefoxview-opentabs-bookmarked-pinned-tab";
+    } else if (tabIndicators?.includes("pinned")) {
+      indicatorL10nId = "firefoxview-opentabs-pinned-tab";
+    } else if (tabIndicators?.includes("bookmark")) {
+      indicatorL10nId = "firefoxview-opentabs-bookmarked-tab";
+    }
+  }
+  return indicatorL10nId;
+}
+
+/**
+ * Gets the primary l10n args for a tab when normalizing for fxview-tab-list
+ *
+ * @param {MozTabbrowserTab[]} tab
+ *   Tab to fetch container info on.
+ * @param {boolean} isRecentBrowsing
+ *   Whether the tabs are going to be displayed on the Recent Browsing page or not
+ * @param {string} url
+ *   URL for the given tab
+ * @returns {string}
+ *  L10n ID args
+ */
+function getPrimaryL10nArgs(tab, isRecentBrowsing, url) {
+  return JSON.stringify({ tabTitle: tab.label, url });
+}
+
+/**
+ * Check if a given url is pinned on the new tab page
+ *
+ * @param {string} url
+ *   url to check
+ * @returns {boolean}
+ *   is tabbed pinned on new tab page
+ */
+function checkIfPinnedNewTab(url) {
+  return url && lazy.NewTabUtils.pinnedLinks.isPinned({ url });
+}
+
+/**
  * Convert a list of tabs into the format expected by the fxview-tab-list
  * component.
  *
  * @param {MozTabbrowserTab[]} tabs
  *   Tabs to format.
+ * @param {boolean} isRecentBrowsing
+ *   Whether the tabs are going to be displayed on the Recent Browsing page or not
  * @returns {object[]}
  *   Formatted objects.
  */
-function getTabListItems(tabs) {
-  let filtered = tabs?.filter(
-    tab => !tab.closing && !tab.hidden && !tab.pinned
-  );
+function getTabListItems(tabs, isRecentBrowsing) {
+  let filtered = tabs?.filter(tab => !tab.closing && !tab.hidden);
 
   return filtered.map(tab => {
-    const url = tab.linkedBrowser?.currentURI?.spec || "";
+    let tabIndicators = getIndicatorsForTab(tab);
+    let containerObj = getContainerObj(tab);
+    const url = tab?.linkedBrowser?.currentURI?.spec || "";
     return {
-      attention: tab.hasAttribute("attention"),
-      containerObj: getContainerObj(tab),
+      containerObj,
+      indicators: tabIndicators,
       icon: tab.getAttribute("image"),
-      muted: tab.hasAttribute("muted"),
-      pinned: tab.pinned,
-      primaryL10nId: "firefoxview-opentabs-tab-row",
-      primaryL10nArgs: JSON.stringify({ url }),
-      secondaryL10nId: "fxviewtabrow-options-menu-button",
-      secondaryL10nArgs: JSON.stringify({ tabTitle: tab.label }),
-      soundPlaying: tab.hasAttribute("soundplaying"),
+      primaryL10nId: getPrimaryL10nId(isRecentBrowsing, tabIndicators),
+      primaryL10nArgs: getPrimaryL10nArgs(tab, isRecentBrowsing, url),
+      secondaryL10nId:
+        isRecentBrowsing || (!isRecentBrowsing && !tab.pinned)
+          ? "fxviewtabrow-options-menu-button"
+          : null,
+      secondaryL10nArgs:
+        isRecentBrowsing || (!isRecentBrowsing && !tab.pinned)
+          ? JSON.stringify({ tabTitle: tab.label })
+          : null,
+      tertiaryL10nId:
+        isRecentBrowsing || (!isRecentBrowsing && !tab.pinned)
+          ? "fxviewtabrow-close-tab-button"
+          : null,
+      tertiaryL10nArgs:
+        isRecentBrowsing || (!isRecentBrowsing && !tab.pinned)
+          ? JSON.stringify({ tabTitle: tab.label })
+          : null,
       tabElement: tab,
       time: tab.lastAccessed,
       title: tab.label,
-      titleChanged: tab.hasAttribute("titlechanged"),
       url,
     };
   });
diff --git a/browser/components/firefoxview/recentlyclosed.mjs b/browser/components/firefoxview/recentlyclosed.mjs
index 6e7e06c1f4..83c323256c 100644
--- a/browser/components/firefoxview/recentlyclosed.mjs
+++ b/browser/components/firefoxview/recentlyclosed.mjs
@@ -398,6 +398,7 @@ class RecentlyClosedTabsInView extends ViewPage {
                   .tabItems=${this.searchResults || this.recentlyClosedTabs}
                   @fxview-tab-list-secondary-action=${this.onDismissTab}
                   @fxview-tab-list-primary-action=${this.onReopenTab}
+                  secondaryActionClass="dismiss-button"
                 ></fxview-tab-list>
               `
           )}
diff --git a/browser/components/firefoxview/syncedtabs.mjs b/browser/components/firefoxview/syncedtabs.mjs
index 5320f8cb41..d64da45a30 100644
--- a/browser/components/firefoxview/syncedtabs.mjs
+++ b/browser/components/firefoxview/syncedtabs.mjs
@@ -419,13 +419,14 @@ class SyncedTabsInView extends ViewPage {
       </h3>
       <fxview-tab-list
         slot="main"
-        class="with-context-menu"
+        secondaryActionClass="options-button"
         hasPopup="menu"
         .tabItems=${ifDefined(tabItems)}
         .searchQuery=${this.searchQuery}
         maxTabsLength=${this.showAll ? -1 : this.maxTabsLength}
         @fxview-tab-list-primary-action=${this.onOpenLink}
         @fxview-tab-list-secondary-action=${this.onContextMenu}
+        secondaryActionClass="options-button"
       >
         ${this.panelListTemplate()}
       </fxview-tab-list>`;
diff --git a/browser/components/firefoxview/tests/browser/FirefoxViewTestUtils.sys.mjs b/browser/components/firefoxview/tests/browser/FirefoxViewTestUtils.sys.mjs
index 3fd2bf95e3..e1285c0396 100644
--- a/browser/components/firefoxview/tests/browser/FirefoxViewTestUtils.sys.mjs
+++ b/browser/components/firefoxview/tests/browser/FirefoxViewTestUtils.sys.mjs
@@ -21,6 +21,20 @@ function getFirefoxViewURL() {
   return "about:firefoxview";
 }
 
+/**
+ * Make the given window focused and active
+ */
+async function switchToWindow(win) {
+  await testScope.SimpleTest.promiseFocus(win);
+  if (Services.focus.activeWindow !== win) {
+    testScope.info("switchToWindow, waiting for activate event on the window");
+    await BrowserTestUtils.waitForEvent(win, "activate");
+  } else {
+    testScope.info("switchToWindow, win is already the activeWindow");
+  }
+  testScope.info("switchToWindow, done");
+}
+
 function assertFirefoxViewTab(win) {
   Assert.ok(win.FirefoxViewHandler.tab, "Firefox View tab exists");
   Assert.ok(win.FirefoxViewHandler.tab?.hidden, "Firefox View tab is hidden");
@@ -48,7 +62,7 @@ async function openFirefoxViewTab(win) {
       "Must initialize FirefoxViewTestUtils with a test scope which has a SimpleTest property"
     );
   }
-  await testScope.SimpleTest.promiseFocus(win);
+  await switchToWindow(win);
   let fxviewTab = win.FirefoxViewHandler.tab;
   let alreadyLoaded =
     fxviewTab?.linkedBrowser.currentURI.spec.includes(getFirefoxViewURL()) &&
@@ -167,6 +181,7 @@ function isFirefoxViewTabSelectedInWindow(win) {
 
 export {
   init,
+  switchToWindow,
   withFirefoxView,
   assertFirefoxViewTab,
   assertFirefoxViewTabSelected,
diff --git a/browser/components/firefoxview/tests/browser/browser.toml b/browser/components/firefoxview/tests/browser/browser.toml
index 8e2005760b..9f9c1c0176 100644
--- a/browser/components/firefoxview/tests/browser/browser.toml
+++ b/browser/components/firefoxview/tests/browser/browser.toml
@@ -27,48 +27,57 @@ skip-if = ["true"] # Bug 1869605 and # Bug 1870296
 
 ["browser_firefoxview.js"]
 
-["browser_firefoxview_tab.js"]
-
-["browser_notification_dot.js"]
-skip-if = ["true"] # Bug 1851453
-
-["browser_opentabs_changes.js"]
-
-["browser_reload_firefoxview.js"]
-
-["browser_tab_close_last_tab.js"]
-
-["browser_tab_on_close_warning.js"]
-
-["browser_firefoxview_paused.js"]
-
 ["browser_firefoxview_general_telemetry.js"]
 
 ["browser_firefoxview_navigation.js"]
 
+["browser_firefoxview_paused.js"]
+
 ["browser_firefoxview_search_telemetry.js"]
 
+["browser_firefoxview_tab.js"]
+
 ["browser_firefoxview_virtual_list.js"]
 
 ["browser_history_firefoxview.js"]
-skip-if = ["true"] # Bug 1877594
 
-["browser_opentabs_firefoxview.js"]
+["browser_notification_dot.js"]
+skip-if = ["true"] # Bug 1851453
 
 ["browser_opentabs_cards.js"]
+
+["browser_opentabs_changes.js"]
+
+["browser_opentabs_firefoxview.js"]
+
+["browser_opentabs_more.js"]
 fail-if = ["a11y_checks"] # Bugs 1858041, 1854625, and 1872174 clicked Show all link is not accessible because it is "hidden" when clicked
+skip-if = ["verify"] # Bug 1886017
+
+["browser_opentabs_pinned_tabs.js"]
 
 ["browser_opentabs_recency.js"]
 skip-if = [
   "os == 'win'",
   "os == 'mac' && verify",
   "os == 'linux'"
-] # macos times out, see bug 1857293, skipped for windows, see bug 1858460, skipped for linux, see bug 1875877
+] # macos times out, see bug 1857293, skipped for windows, see bug 1858460, Bug 1875877 - frequent fails on linux.
+
+["browser_opentabs_search.js"]
+fail-if = ["a11y_checks"] # Bug 1850591 clicked moz-page-nav-button button is not focusable
 
 ["browser_opentabs_tab_indicators.js"]
 
 ["browser_recentlyclosed_firefoxview.js"]
 
+["browser_reload_firefoxview.js"]
+
 ["browser_syncedtabs_errors_firefoxview.js"]
 
 ["browser_syncedtabs_firefoxview.js"]
+
+["browser_tab_close_last_tab.js"]
+
+["browser_tab_list_keyboard_navigation.js"]
+
+["browser_tab_on_close_warning.js"]
diff --git a/browser/components/firefoxview/tests/browser/browser_dragDrop_after_opening_fxViewTab.js b/browser/components/firefoxview/tests/browser/browser_dragDrop_after_opening_fxViewTab.js
index 9ce547238a..0376a3886d 100644
--- a/browser/components/firefoxview/tests/browser/browser_dragDrop_after_opening_fxViewTab.js
+++ b/browser/components/firefoxview/tests/browser/browser_dragDrop_after_opening_fxViewTab.js
@@ -15,6 +15,7 @@ add_task(async function () {
   // window.RTL_UI doesn't update in existing windows when this pref is changed,
   // so we need to test in a new window.
   let win = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win);
 
   const TEST_ROOT = getRootDirectory(gTestPath).replace(
     "chrome://mochitests/content",
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_firefoxview.js
index 33467941a4..1a51d61f42 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview.js
@@ -6,10 +6,7 @@ add_task(async function about_firefoxview_smoke_test() {
     const { document } = browser.contentWindow;
 
     // sanity check the important regions exist on this page
-    ok(
-      document.querySelector("fxview-category-navigation"),
-      "fxview-category-navigation element exists"
-    );
+    ok(document.querySelector("moz-page-nav"), "moz-page-nav element exists");
     ok(document.querySelector("named-deck"), "named-deck element exists");
   });
 });
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_general_telemetry.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_general_telemetry.js
index 51d5caa032..b70e6b938e 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_general_telemetry.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_general_telemetry.js
@@ -39,7 +39,7 @@ add_task(async function firefox_view_entered_telemetry() {
     enteredTelemetry[4] = { page: "recentlyclosed" };
     enteredAndTabSelectedEvents = [tabSelectedTelemetry, enteredTelemetry];
 
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     await clearAllParentTelemetryEvents();
     await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:robots");
     is(
@@ -107,9 +107,9 @@ add_task(async function test_change_page_telemetry() {
       ],
     ];
     await clearAllParentTelemetryEvents();
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     await telemetryEvent(changePageEvent);
-    navigateToCategory(document, "recentbrowsing");
+    await navigateToViewAndWait(document, "recentbrowsing");
 
     let openTabsComponent = document.querySelector(
       "view-opentabs[slot=opentabs]"
@@ -189,7 +189,7 @@ add_task(async function test_context_menu_new_window_telemetry() {
     );
 
     // Test history context menu options
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     let historyComponent = document.querySelector("view-history");
     await TestUtils.waitForCondition(() => historyComponent.fullyUpdated);
     await TestUtils.waitForCondition(
@@ -198,7 +198,11 @@ add_task(async function test_context_menu_new_window_telemetry() {
     let firstTabList = historyComponent.lists[0];
     let firstItem = firstTabList.rowEls[0];
     let panelList = historyComponent.panelList;
-    EventUtils.synthesizeMouseAtCenter(firstItem.buttonEl, {}, content);
+    EventUtils.synthesizeMouseAtCenter(
+      firstItem.secondaryButtonEl,
+      {},
+      content
+    );
     await BrowserTestUtils.waitForEvent(panelList, "shown");
     await clearAllParentTelemetryEvents();
     let panelItems = Array.from(panelList.children).filter(
@@ -245,7 +249,7 @@ add_task(async function test_context_menu_private_window_telemetry() {
     );
 
     // Test history context menu options
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     let historyComponent = document.querySelector("view-history");
     await TestUtils.waitForCondition(() => historyComponent.fullyUpdated);
     await TestUtils.waitForCondition(
@@ -254,14 +258,22 @@ add_task(async function test_context_menu_private_window_telemetry() {
     let firstTabList = historyComponent.lists[0];
     let firstItem = firstTabList.rowEls[0];
     let panelList = historyComponent.panelList;
-    EventUtils.synthesizeMouseAtCenter(firstItem.buttonEl, {}, content);
+    EventUtils.synthesizeMouseAtCenter(
+      firstItem.secondaryButtonEl,
+      {},
+      content
+    );
     await BrowserTestUtils.waitForEvent(panelList, "shown");
     await clearAllParentTelemetryEvents();
     let panelItems = Array.from(panelList.children).filter(
       panelItem => panelItem.nodeName === "PANEL-ITEM"
     );
 
-    EventUtils.synthesizeMouseAtCenter(firstItem.buttonEl, {}, content);
+    EventUtils.synthesizeMouseAtCenter(
+      firstItem.secondaryButtonEl,
+      {},
+      content
+    );
     info("Context menu button clicked.");
     await BrowserTestUtils.waitForEvent(panelList, "shown");
     info("Context menu shown.");
@@ -314,7 +326,7 @@ add_task(async function test_context_menu_delete_from_history_telemetry() {
     );
 
     // Test history context menu options
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     let historyComponent = document.querySelector("view-history");
     await TestUtils.waitForCondition(() => historyComponent.fullyUpdated);
     await TestUtils.waitForCondition(
@@ -323,14 +335,22 @@ add_task(async function test_context_menu_delete_from_history_telemetry() {
     let firstTabList = historyComponent.lists[0];
     let firstItem = firstTabList.rowEls[0];
     let panelList = historyComponent.panelList;
-    EventUtils.synthesizeMouseAtCenter(firstItem.buttonEl, {}, content);
+    EventUtils.synthesizeMouseAtCenter(
+      firstItem.secondaryButtonEl,
+      {},
+      content
+    );
     await BrowserTestUtils.waitForEvent(panelList, "shown");
     await clearAllParentTelemetryEvents();
     let panelItems = Array.from(panelList.children).filter(
       panelItem => panelItem.nodeName === "PANEL-ITEM"
     );
 
-    EventUtils.synthesizeMouseAtCenter(firstItem.buttonEl, {}, content);
+    EventUtils.synthesizeMouseAtCenter(
+      firstItem.secondaryButtonEl,
+      {},
+      content
+    );
     info("Context menu button clicked.");
     await BrowserTestUtils.waitForEvent(panelList, "shown");
     info("Context menu shown.");
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_navigation.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_navigation.js
index 80206dd945..281d969b39 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_navigation.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_navigation.js
@@ -3,15 +3,15 @@
 
 const URL_BASE = `${getFirefoxViewURL()}#`;
 
-function assertCorrectPage(document, name, event) {
+function assertCorrectPage(document, view, event) {
   is(
     document.location.hash,
-    `#${name}`,
-    `Navigation button for ${name} navigates to ${URL_BASE + name} on ${event}.`
+    `#${view}`,
+    `Navigation button for ${view} navigates to ${URL_BASE + view} on ${event}.`
   );
   is(
     document.querySelector("named-deck").selectedViewName,
-    name,
+    view,
     "The correct deck child is selected"
   );
 }
@@ -22,21 +22,21 @@ add_task(async function test_side_component_navigation_by_click() {
 
     const { document } = browser.contentWindow;
     let win = browser.ownerGlobal;
-    const categoryButtons = document.querySelectorAll("fxview-category-button");
+    const pageNavButtons = document.querySelectorAll("moz-page-nav-button");
 
-    for (let element of categoryButtons) {
-      const name = element.name;
+    for (let element of pageNavButtons) {
+      const view = element.view;
       let buttonClicked = BrowserTestUtils.waitForEvent(
         element.buttonEl,
         "click",
         win
       );
 
-      info(`Clicking navigation button for ${name}`);
+      info(`Clicking navigation button for ${view}`);
       EventUtils.synthesizeMouseAtCenter(element.buttonEl, {}, content);
       await buttonClicked;
 
-      assertCorrectPage(document, name, "click");
+      assertCorrectPage(document, view, "click");
     }
   });
 });
@@ -47,49 +47,49 @@ add_task(async function test_side_component_navigation_by_keyboard() {
 
     const { document } = browser.contentWindow;
     let win = browser.ownerGlobal;
-    const categoryButtons = document.querySelectorAll("fxview-category-button");
-    const firstButton = categoryButtons[0];
+    const pageNavButtons = document.querySelectorAll("moz-page-nav-button");
+    const firstButton = pageNavButtons[0].buttonEl;
 
     firstButton.focus();
     is(
-      document.activeElement,
+      document.activeElement.shadowRoot.activeElement,
       firstButton,
-      "The first category button has focus"
+      "The first page nav button has focus"
     );
 
-    for (let element of Array.from(categoryButtons).slice(1)) {
-      const name = element.name;
+    for (let element of Array.from(pageNavButtons).slice(1)) {
+      const view = element.view;
       let buttonFocused = BrowserTestUtils.waitForEvent(element, "focus", win);
 
-      info(`Focus is on ${document.activeElement.name}`);
-      info(`Arrow down on navigation to ${name}`);
+      info(`Focus is on ${document.activeElement.view}`);
+      info(`Arrow down on navigation to ${view}`);
       EventUtils.synthesizeKey("KEY_ArrowDown", {}, win);
       await buttonFocused;
 
-      assertCorrectPage(document, name, "key press");
+      assertCorrectPage(document, view, "key press");
     }
   });
 });
 
-add_task(async function test_direct_navigation_to_correct_category() {
+add_task(async function test_direct_navigation_to_correct_view() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    const categoryButtons = document.querySelectorAll("fxview-category-button");
+    const pageNavButtons = document.querySelectorAll("moz-page-nav-button");
     const namedDeck = document.querySelector("named-deck");
 
-    for (let element of categoryButtons) {
-      const name = element.name;
+    for (let element of pageNavButtons) {
+      const view = element.view;
 
-      info(`Navigating to ${URL_BASE + name}`);
-      document.location.assign(URL_BASE + name);
+      info(`Navigating to ${URL_BASE + view}`);
+      document.location.assign(URL_BASE + view);
       await BrowserTestUtils.waitForCondition(() => {
-        return namedDeck.selectedViewName === name;
+        return namedDeck.selectedViewName === view;
       }, "Wait for navigation to complete");
 
       is(
         namedDeck.selectedViewName,
-        name,
-        `The correct deck child for category ${name} is selected`
+        view,
+        `The correct deck child for view ${view} is selected`
       );
     }
   });
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_paused.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_paused.js
index c95ac4fcf5..e61b48b472 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_paused.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_paused.js
@@ -5,9 +5,6 @@ const tabURL1 = "data:,Tab1";
 const tabURL2 = "data:,Tab2";
 const tabURL3 = "data:,Tab3";
 
-const { NonPrivateTabs } = ChromeUtils.importESModule(
-  "resource:///modules/OpenTabs.sys.mjs"
-);
 const TestTabs = {};
 
 function getTopLevelViewElements(document) {
@@ -194,6 +191,42 @@ async function checkFxRenderCalls(browser, elements, selectedView) {
   sandbox.restore();
 }
 
+function dragAndDrop(
+  tab1,
+  tab2,
+  initialWindow = window,
+  destWindow = window,
+  afterTab = true,
+  context
+) {
+  let rect = tab2.getBoundingClientRect();
+  let event = {
+    ctrlKey: false,
+    altKey: false,
+    clientX: rect.left + rect.width / 2 + 10 * (afterTab ? 1 : -1),
+    clientY: rect.top + rect.height / 2,
+  };
+
+  if (destWindow != initialWindow) {
+    // Make sure that both tab1 and tab2 are visible
+    initialWindow.focus();
+    initialWindow.moveTo(rect.left, rect.top + rect.height * 3);
+  }
+
+  EventUtils.synthesizeDrop(
+    tab1,
+    tab2,
+    null,
+    "move",
+    initialWindow,
+    destWindow,
+    event
+  );
+
+  // Ensure dnd suppression is cleared.
+  EventUtils.synthesizeMouseAtCenter(tab2, { type: "mouseup" }, context);
+}
+
 add_task(async function test_recentbrowsing() {
   await setupOpenAndClosedTabs();
 
@@ -322,7 +355,7 @@ add_task(async function test_opentabs() {
     const document = browser.contentDocument;
     const { openTabsView } = getTopLevelViewElements(document);
 
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
 
     const { openTabsList } = await getElements(document);
     ok(openTabsView, "Found the open tabs view");
@@ -387,7 +420,7 @@ add_task(async function test_recentlyclosed() {
   await withFirefoxView({}, async browser => {
     const document = browser.contentDocument;
     const { recentlyClosedView } = getTopLevelViewElements(document);
-    await navigateToCategoryAndWait(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
 
     const { recentlyClosedList } = await getElements(document);
     ok(recentlyClosedView, "Found the recently-closed view");
@@ -405,3 +438,66 @@ add_task(async function test_recentlyclosed() {
   });
   await BrowserTestUtils.removeTab(TestTabs.tab2);
 });
+
+add_task(async function test_drag_drop_pinned_tab() {
+  await setupOpenAndClosedTabs();
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win1 = browser.ownerGlobal;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let tabRows = card.tabList.rowEls;
+    let tabChangeRaised;
+
+    // Pin first two tabs
+    for (var i = 0; i < 2; i++) {
+      tabChangeRaised = BrowserTestUtils.waitForEvent(
+        NonPrivateTabs,
+        "TabChange"
+      );
+      let currentTabEl = tabRows[i];
+      let currentTab = currentTabEl.tabElement;
+      info(`Pinning tab ${i + 1} with label: ${currentTab.label}`);
+      win1.gBrowser.pinTab(currentTab);
+      await tabChangeRaised;
+      await openTabs.updateComplete;
+      tabRows = card.tabList.rowEls;
+      currentTabEl = tabRows[i];
+
+      await TestUtils.waitForCondition(
+        () => currentTabEl.indicators.includes("pinned"),
+        `Tab ${i + 1} is pinned.`
+      );
+    }
+
+    info(`First two tabs are pinned.`);
+
+    let win2 = await BrowserTestUtils.openNewBrowserWindow();
+
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards.length === 2,
+      "Two windows are shown for Open Tabs in in Fx View."
+    );
+
+    let pinnedTab = win1.gBrowser.visibleTabs[0];
+    let newWindowTab = win2.gBrowser.visibleTabs[0];
+
+    dragAndDrop(newWindowTab, pinnedTab, win2, win1, true, content);
+
+    await switchToFxViewTab();
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards.length === 1,
+      "One window is shown for Open Tabs in in Fx View."
+    );
+  });
+  cleanupTabs();
+});
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_search_telemetry.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_search_telemetry.js
index 2ea2429c15..c76a11d3ad 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_search_telemetry.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_search_telemetry.js
@@ -56,7 +56,7 @@ add_task(async function test_search_initiated_telemetry() {
     EventUtils.sendString("example.com", content);
     await telemetryEvent(searchEvent("recentbrowsing"));
 
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
     await clearAllParentTelemetryEvents();
     is(document.location.hash, "#opentabs", "Searching within open tabs.");
     const openTabs = document.querySelector("named-deck > view-opentabs");
@@ -65,7 +65,7 @@ add_task(async function test_search_initiated_telemetry() {
     EventUtils.sendString("example.com", content);
     await telemetryEvent(searchEvent("opentabs"));
 
-    await navigateToCategoryAndWait(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     await clearAllParentTelemetryEvents();
     is(
       document.location.hash,
@@ -84,7 +84,7 @@ add_task(async function test_search_initiated_telemetry() {
     EventUtils.sendString("example.com", content);
     await telemetryEvent(searchEvent("recentlyclosed"));
 
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     await clearAllParentTelemetryEvents();
     is(document.location.hash, "#syncedtabs", "Searching within synced tabs.");
     const syncedTabs = document.querySelector("named-deck > view-syncedtabs");
@@ -93,7 +93,7 @@ add_task(async function test_search_initiated_telemetry() {
     EventUtils.sendString("example.com", content);
     await telemetryEvent(searchEvent("syncedtabs"));
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     await clearAllParentTelemetryEvents();
     is(document.location.hash, "#history", "Searching within history.");
     const history = document.querySelector("named-deck > view-history");
@@ -316,7 +316,7 @@ add_task(async function test_sort_history_search_telemetry() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     const historyComponent = document.querySelector("view-history");
 
     const searchTextbox = await TestUtils.waitForCondition(
@@ -432,7 +432,7 @@ add_task(async function test_cumulative_searches_recently_closed_telemetry() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     is(
       document.location.hash,
       "#recentlyclosed",
@@ -477,7 +477,7 @@ add_task(async function test_cumulative_searches_open_tabs_telemetry() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
     is(document.location.hash, "#opentabs", "Searching within open tabs.");
     const openTabs = document.querySelector("named-deck > view-opentabs");
 
@@ -523,7 +523,7 @@ add_task(async function test_cumulative_searches_history_telemetry() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     is(document.location.hash, "#history", "Searching within history.");
     const history = document.querySelector("named-deck > view-history");
     const searchTextbox = await TestUtils.waitForCondition(() => {
@@ -585,7 +585,7 @@ add_task(async function test_cumulative_searches_syncedtabs_telemetry() {
     const { document } = browser.contentWindow;
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     is(document.location.hash, "#syncedtabs", "Searching within synced tabs.");
     let syncedTabs = document.querySelector(
       "view-syncedtabs:not([slot=syncedtabs])"
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
index f1ac7d6742..037729ea7d 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_tab.js
@@ -55,12 +55,6 @@ function triggerClickOn(target, options) {
   return promise;
 }
 
-async function add_new_tab(URL) {
-  let tab = BrowserTestUtils.addTab(gBrowser, URL);
-  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
-  return tab;
-}
-
 add_task(async function aria_attributes() {
   let win = await BrowserTestUtils.openNewBrowserWindow();
   is(
diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js
index 501deb8e68..bf53796ef7 100644
--- a/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js
+++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js
@@ -29,7 +29,7 @@ add_task(async function test_max_render_count_on_win_resize() {
       "Firefox View is loaded to the Recent Browsing page."
     );
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
 
     let historyComponent = document.querySelector("view-history");
     let tabList = historyComponent.lists[0];
diff --git a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js
index a6c697e398..c4c096acff 100644
--- a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js
@@ -15,8 +15,8 @@ const HISTORY_EVENT = [["firefoxview_next", "history", "visits", undefined]];
 const SHOW_ALL_HISTORY_EVENT = [
   ["firefoxview_next", "show_all_history", "tabs", undefined],
 ];
-
 const NEVER_REMEMBER_HISTORY_PREF = "browser.privatebrowsing.autostart";
+
 const DAY_MS = 24 * 60 * 60 * 1000;
 const today = new Date();
 const yesterday = new Date(Date.now() - DAY_MS);
@@ -24,6 +24,14 @@ const twoDaysAgo = new Date(Date.now() - DAY_MS * 2);
 const threeDaysAgo = new Date(Date.now() - DAY_MS * 3);
 const fourDaysAgo = new Date(Date.now() - DAY_MS * 4);
 const oneMonthAgo = new Date(today);
+const dates = [
+  today,
+  yesterday,
+  twoDaysAgo,
+  threeDaysAgo,
+  fourDaysAgo,
+  oneMonthAgo,
+];
 
 // Set the date for the first day of the last month
 oneMonthAgo.setDate(1);
@@ -47,13 +55,14 @@ function isElInViewport(element) {
   );
 }
 
-async function historyComponentReady(historyComponent) {
+async function historyComponentReady(historyComponent, expectedHistoryItems) {
   await TestUtils.waitForCondition(
     () =>
       [...historyComponent.allHistoryItems.values()].reduce(
         (acc, { length }) => acc + length,
         0
-      ) === 24
+      ) === expectedHistoryItems,
+    "History component ready"
   );
 
   let expected = historyComponent.historyMapByDate.length;
@@ -148,6 +157,18 @@ async function addHistoryItems(dateAdded) {
   });
 }
 
+function createHistoryEntries() {
+  let historyEntries = [];
+  for (let i = 0; i < 4; i++) {
+    historyEntries.push({
+      url: URLs[i],
+      title: `Example Domain ${i}`,
+      visits: dates.map(date => [{ date }]),
+    });
+  }
+  return historyEntries;
+}
+
 add_setup(async () => {
   await SpecialPowers.pushPrefEnv({
     set: [["browser.firefox-view.search.enabled", true]],
@@ -160,21 +181,20 @@ add_setup(async () => {
 
 add_task(async function test_list_ordering() {
   await PlacesUtils.history.clear();
-  await addHistoryItems(today);
-  await addHistoryItems(yesterday);
-  await addHistoryItems(twoDaysAgo);
-  await addHistoryItems(threeDaysAgo);
-  await addHistoryItems(fourDaysAgo);
-  await addHistoryItems(oneMonthAgo);
+  const historyEntries = createHistoryEntries();
+  await PlacesUtils.history.insertMany(historyEntries);
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
 
-    let historyComponent = document.querySelector("view-history");
+    let historyComponent = await TestUtils.waitForCondition(
+      () => document.querySelector("view-history"),
+      "History component rendered"
+    );
     historyComponent.profileAge = 8;
 
-    await historyComponentReady(historyComponent);
+    await historyComponentReady(historyComponent, historyEntries.length);
 
     let firstCard = historyComponent.cards[0];
 
@@ -262,7 +282,7 @@ add_task(async function test_empty_states() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
 
     let historyComponent = document.querySelector("view-history");
     historyComponent.profileAge = 8;
@@ -350,7 +370,7 @@ add_task(async function test_observers_removed_when_view_is_hidden() {
   );
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     const historyComponent = document.querySelector("view-history");
     historyComponent.profileAge = 8;
     let visitList = await TestUtils.waitForCondition(() =>
@@ -390,20 +410,16 @@ add_task(async function test_observers_removed_when_view_is_hidden() {
 
 add_task(async function test_show_all_history_telemetry() {
   await PlacesUtils.history.clear();
-  await addHistoryItems(today);
-  await addHistoryItems(yesterday);
-  await addHistoryItems(twoDaysAgo);
-  await addHistoryItems(threeDaysAgo);
-  await addHistoryItems(fourDaysAgo);
-  await addHistoryItems(oneMonthAgo);
+  const historyEntries = createHistoryEntries();
+  await PlacesUtils.history.insertMany(historyEntries);
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
 
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
 
     let historyComponent = document.querySelector("view-history");
     historyComponent.profileAge = 8;
-    await historyComponentReady(historyComponent);
+    await historyComponentReady(historyComponent, historyEntries.length);
 
     await clearAllParentTelemetryEvents();
     let showAllHistoryBtn = historyComponent.showAllHistoryBtn;
@@ -422,12 +438,15 @@ add_task(async function test_show_all_history_telemetry() {
 });
 
 add_task(async function test_search_history() {
+  await PlacesUtils.history.clear();
+  const historyEntries = createHistoryEntries();
+  await PlacesUtils.history.insertMany(historyEntries);
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     const historyComponent = document.querySelector("view-history");
     historyComponent.profileAge = 8;
-    await historyComponentReady(historyComponent);
+    await historyComponentReady(historyComponent, historyEntries.length);
     const searchTextbox = await TestUtils.waitForCondition(
       () => historyComponent.searchTextbox,
       "The search textbox is displayed."
@@ -447,7 +466,7 @@ add_task(async function test_search_history() {
     );
     await TestUtils.waitForCondition(() => {
       const { rowEls } = historyComponent.lists[0];
-      return rowEls.length === 1 && rowEls[0].mainEl.href === URLs[0];
+      return rowEls.length === 1 && rowEls[0].mainEl.href === URLs[1];
     }, "There is one matching search result.");
 
     info("Input a bogus search query.");
@@ -504,7 +523,7 @@ add_task(async function test_persist_collapse_card_after_view_change() {
   await addHistoryItems(today);
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "history");
     const historyComponent = document.querySelector("view-history");
     historyComponent.profileAge = 8;
     await TestUtils.waitForCondition(
@@ -529,8 +548,8 @@ add_task(async function test_persist_collapse_card_after_view_change() {
     );
 
     // Switch to a new view and then back to History
-    await navigateToCategoryAndWait(document, "syncedtabs");
-    await navigateToCategoryAndWait(document, "history");
+    await navigateToViewAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "history");
 
     // Check that first history card is still collapsed after changing view
     ok(
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_cards.js b/browser/components/firefoxview/tests/browser/browser_opentabs_cards.js
index d57aa3cad1..d4de3ae5a9 100644
--- a/browser/components/firefoxview/tests/browser/browser_opentabs_cards.js
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_cards.js
@@ -7,36 +7,16 @@ const ROW_DATE_ID = "fxview-tab-row-date";
 
 let gInitialTab;
 let gInitialTabURL;
-const { NonPrivateTabs } = ChromeUtils.importESModule(
-  "resource:///modules/OpenTabs.sys.mjs"
-);
 
 add_setup(function () {
   // This test opens a lot of windows and tabs and might run long on slower configurations
-  requestLongerTimeout(2);
+  requestLongerTimeout(3);
   gInitialTab = gBrowser.selectedTab;
   gInitialTabURL = gBrowser.selectedBrowser.currentURI.spec;
 });
 
-async function navigateToOpenTabs(browser) {
-  const document = browser.contentDocument;
-  if (document.querySelector("named-deck").selectedViewName != "opentabs") {
-    await navigateToCategoryAndWait(browser.contentDocument, "opentabs");
-  }
-}
-
-function getOpenTabsComponent(browser) {
-  return browser.contentDocument.querySelector("named-deck > view-opentabs");
-}
-
-function getCards(browser) {
-  return getOpenTabsComponent(browser).shadowRoot.querySelectorAll(
-    "view-opentabs-card"
-  );
-}
-
 async function cleanup() {
-  await SimpleTest.promiseFocus(window);
+  await switchToWindow(window);
   await promiseAllButPrimaryWindowClosed();
   await BrowserTestUtils.switchTab(gBrowser, gInitialTab);
   await closeFirefoxViewTab(window);
@@ -58,11 +38,6 @@ async function cleanup() {
   );
 }
 
-async function getRowsForCard(card) {
-  await TestUtils.waitForCondition(() => card.tabList.rowEls.length);
-  return card.tabList.rowEls;
-}
-
 /**
  * Verify that there are the expected number of cards, and that each card has
  * the expected URLs in order.
@@ -73,10 +48,10 @@ async function getRowsForCard(card) {
  *   The expected URLs for each card.
  */
 async function checkTabLists(browser, expected) {
-  const cards = getCards(browser);
+  const cards = getOpenTabsCards(getOpenTabsComponent(browser));
   is(cards.length, expected.length, `There are ${expected.length} windows.`);
   for (let i = 0; i < cards.length; i++) {
-    const tabItems = await getRowsForCard(cards[i]);
+    const tabItems = await getTabRowsForCard(cards[i]);
     const actual = Array.from(tabItems).map(({ url }) => url);
     Assert.deepEqual(
       actual,
@@ -87,11 +62,12 @@ async function checkTabLists(browser, expected) {
 }
 
 add_task(async function open_tab_same_window() {
+  let tabChangeRaised;
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     await navigateToOpenTabs(browser);
     const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
     await checkTabLists(browser, [[gInitialTabURL]]);
@@ -99,7 +75,7 @@ add_task(async function open_tab_same_window() {
       browser.contentDocument,
       "visibilitychange"
     );
-    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabChange"
     );
@@ -114,7 +90,7 @@ add_task(async function open_tab_same_window() {
     const browser = viewTab.linkedBrowser;
     const openTabs = getOpenTabsComponent(browser);
     setSortOption(openTabs, "tabStripOrder");
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
     await checkTabLists(browser, [[gInitialTabURL, TEST_URL]]);
@@ -122,8 +98,8 @@ add_task(async function open_tab_same_window() {
       browser.contentDocument,
       "visibilitychange"
     );
-    const cards = getCards(browser);
-    const tabItems = await getRowsForCard(cards[0]);
+    const cards = getOpenTabsCards(openTabs);
+    const tabItems = await getTabRowsForCard(cards[0]);
     tabItems[0].mainEl.click();
     await promiseHidden;
   });
@@ -135,8 +111,11 @@ add_task(async function open_tab_same_window() {
 
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
-    const cards = getCards(browser);
-    let tabItems = await getRowsForCard(cards[0]);
+    const openTabs = getOpenTabsComponent(browser);
+    await openTabs.updateComplete;
+
+    const cards = getOpenTabsCards(openTabs);
+    let tabItems = await getTabRowsForCard(cards[0]);
 
     let promiseHidden = BrowserTestUtils.waitForEvent(
       browser.contentDocument,
@@ -154,7 +133,13 @@ add_task(async function open_tab_same_window() {
 
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
-    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+    const openTabs = getOpenTabsComponent(browser);
+    await openTabs.updateComplete;
+
+    // sanity-check current tab order before we change it
+    await checkTabLists(browser, [[gInitialTabURL, TEST_URL]]);
+
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabChange"
     );
@@ -162,18 +147,24 @@ add_task(async function open_tab_same_window() {
     info("Bring the new tab to the front.");
     gBrowser.moveTabTo(newTab, 0);
 
+    info("Waiting for tabChangeRaised to resolve from the tab move");
     await tabChangeRaised;
+    await openTabs.updateComplete;
+
     await checkTabLists(browser, [[TEST_URL, gInitialTabURL]]);
     tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabChange"
     );
+    info("Remove the new tab");
     await BrowserTestUtils.removeTab(newTab);
+    info("Waiting for tabChangeRaised to resolve from removing the tab");
     await tabChangeRaised;
+    await openTabs.updateComplete;
 
     await checkTabLists(browser, [[gInitialTabURL]]);
-    const [card] = getCards(browser);
-    const [row] = await getRowsForCard(card);
+    const [card] = getOpenTabsCards(getOpenTabsComponent(browser));
+    const [row] = await getTabRowsForCard(card);
     ok(
       !row.shadowRoot.getElementById("fxview-tab-row-url").hidden,
       "The URL is displayed, since we have one window."
@@ -188,25 +179,29 @@ add_task(async function open_tab_same_window() {
 });
 
 add_task(async function open_tab_new_window() {
-  const win = await BrowserTestUtils.openNewBrowserWindow();
-  let winFocused;
-  await BrowserTestUtils.openNewForegroundTab(win.gBrowser, TEST_URL);
+  const win2 = await BrowserTestUtils.openNewBrowserWindow();
+  let winBecameActive;
+  let tabChangeRaised;
+  await switchToWindow(win2);
+  await NonPrivateTabs.readyWindowsPromise;
+
+  await BrowserTestUtils.openNewForegroundTab(win2.gBrowser, TEST_URL);
 
   info("Open fxview in new window");
-  await openFirefoxViewTab(win).then(async viewTab => {
+  await openFirefoxViewTab(win2).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     await navigateToOpenTabs(browser);
     const openTabs = getOpenTabsComponent(browser);
     setSortOption(openTabs, "tabStripOrder");
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
     await checkTabLists(browser, [
       [gInitialTabURL, TEST_URL],
       [gInitialTabURL],
     ]);
-    const cards = getCards(browser);
-    const originalWinRows = await getRowsForCard(cards[1]);
+    const cards = getOpenTabsCards(openTabs);
+    const originalWinRows = await getTabRowsForCard(cards[1]);
     const [row] = originalWinRows;
     ok(
       row.shadowRoot.getElementById("fxview-tab-row-url").hidden,
@@ -217,47 +212,60 @@ add_task(async function open_tab_new_window() {
       "The date is hidden, since we have two windows."
     );
     info("Select a tab from the original window.");
-    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabRecencyChange"
     );
-    winFocused = BrowserTestUtils.waitForEvent(window, "focus", true);
-    originalWinRows[0].mainEl.click();
+    winBecameActive = Promise.all([
+      BrowserTestUtils.waitForEvent(window, "focus", true),
+      BrowserTestUtils.waitForEvent(window, "activate"),
+    ]);
+    ok(row.tabElement, "The row has a tabElement property");
+    is(
+      row.tabElement.ownerGlobal,
+      window,
+      "The tabElement's ownerGlobal is our original window"
+    );
+    info(`Clicking on row with URL: ${row.url}`);
+    row.mainEl.click();
+    info("Waiting for TabRecencyChange event");
     await tabChangeRaised;
   });
 
-  info("Wait for the original window to be focused");
-  await winFocused;
+  info("Wait for the original window to be focused & active");
+  await winBecameActive;
 
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     await navigateToOpenTabs(browser);
     const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
-    const cards = getCards(browser);
+    const cards = getOpenTabsCards(openTabs);
     is(cards.length, 2, "There are two windows.");
-    const newWinRows = await getRowsForCard(cards[1]);
+    const newWinRows = await getTabRowsForCard(cards[1]);
 
     info("Select a tab from the new window.");
-    winFocused = BrowserTestUtils.waitForEvent(win, "focus", true);
-    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+    winBecameActive = Promise.all([
+      BrowserTestUtils.waitForEvent(win2, "focus", true),
+      BrowserTestUtils.waitForEvent(win2, "activate"),
+    ]);
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabRecencyChange"
     );
     newWinRows[0].mainEl.click();
     await tabChangeRaised;
   });
-  info("Wait for the new window to be focused");
-  await winFocused;
+  info("Wait for the new window to be focused & active");
+  await winBecameActive;
   await cleanup();
 });
 
 add_task(async function open_tab_new_private_window() {
   await BrowserTestUtils.openNewBrowserWindow({ private: true });
 
-  await SimpleTest.promiseFocus(window);
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     await navigateToOpenTabs(browser);
@@ -265,7 +273,7 @@ add_task(async function open_tab_new_private_window() {
     await openTabs.openTabsTarget.readyWindowsPromise;
     await openTabs.updateComplete;
 
-    const cards = getCards(browser);
+    const cards = getOpenTabsCards(openTabs);
     is(cards.length, 1, "The private window is not displayed.");
   });
   await cleanup();
@@ -274,6 +282,7 @@ add_task(async function open_tab_new_private_window() {
 add_task(async function open_tab_new_window_sort_by_recency() {
   info("Open new tabs in a new window.");
   const newWindow = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(newWindow);
   const tabs = [
     newWindow.gBrowser.selectedTab,
     await BrowserTestUtils.openNewForegroundTab(newWindow.gBrowser, URLs[0]),
@@ -285,7 +294,7 @@ add_task(async function open_tab_new_window_sort_by_recency() {
     await navigateToOpenTabs(linkedBrowser);
     const openTabs = getOpenTabsComponent(linkedBrowser);
     setSortOption(openTabs, "recency");
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
     await checkTabLists(linkedBrowser, [
@@ -293,13 +302,13 @@ add_task(async function open_tab_new_window_sort_by_recency() {
       [URLs[1], URLs[0], gInitialTabURL],
     ]);
     info("Select tabs in the new window to trigger recency changes.");
-    await SimpleTest.promiseFocus(newWindow);
+    await switchToWindow(newWindow);
     await BrowserTestUtils.switchTab(newWindow.gBrowser, tabs[1]);
     await BrowserTestUtils.switchTab(newWindow.gBrowser, tabs[0]);
-    await SimpleTest.promiseFocus(window);
+    await switchToWindow(window);
     await TestUtils.waitForCondition(async () => {
-      const [, secondCard] = getCards(linkedBrowser);
-      const tabItems = await getRowsForCard(secondCard);
+      const [, secondCard] = getOpenTabsCards(openTabs);
+      const tabItems = await getTabRowsForCard(secondCard);
       return tabItems[0].url === gInitialTabURL;
     });
     await checkTabLists(linkedBrowser, [
@@ -311,12 +320,13 @@ add_task(async function open_tab_new_window_sort_by_recency() {
 });
 
 add_task(async function styling_for_multiple_windows() {
+  let tabChangeRaised;
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     await navigateToOpenTabs(browser);
     const openTabs = getOpenTabsComponent(browser);
     setSortOption(openTabs, "tabStripOrder");
-    await openTabs.openTabsTarget.readyWindowsPromise;
+    await NonPrivateTabs.readyWindowsPromise;
     await openTabs.updateComplete;
 
     ok(
@@ -325,13 +335,10 @@ add_task(async function styling_for_multiple_windows() {
     );
   });
 
-  await BrowserTestUtils.openNewBrowserWindow();
-  let tabChangeRaised = BrowserTestUtils.waitForEvent(
-    NonPrivateTabs,
-    "TabChange"
-  );
+  let win2 = await BrowserTestUtils.openNewBrowserWindow();
+  info("Switching to new window");
+  await switchToWindow(win2);
   await NonPrivateTabs.readyWindowsPromise;
-  await tabChangeRaised;
   is(
     NonPrivateTabs.currentWindows.length,
     2,
@@ -339,290 +346,54 @@ add_task(async function styling_for_multiple_windows() {
   );
 
   info("switch to firefox view in the first window");
-  SimpleTest.promiseFocus(window);
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
     const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
-    await openTabs.updateComplete;
+    const cardContainer = openTabs.shadowRoot.querySelector(
+      ".view-opentabs-card-container"
+    );
+    info("waiting for card-count to reflect 2 windows");
+    await BrowserTestUtils.waitForCondition(() => {
+      return cardContainer.getAttribute("card-count") == "two";
+    });
     is(
       openTabs.openTabsTarget.currentWindows.length,
       2,
       "There should be 2 current windows"
     );
-    ok(
-      openTabs.shadowRoot.querySelector("[card-count=two]"),
-      "The container shows two columns when two windows are open."
+    is(
+      cardContainer.getAttribute("card-count"),
+      "two",
+      "The container shows two columns when two windows are open"
     );
   });
-  await BrowserTestUtils.openNewBrowserWindow();
+
   tabChangeRaised = BrowserTestUtils.waitForEvent(NonPrivateTabs, "TabChange");
+  let win3 = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win3);
   await NonPrivateTabs.readyWindowsPromise;
   await tabChangeRaised;
   is(
     NonPrivateTabs.currentWindows.length,
     3,
-    "NonPrivateTabs now has 2 currentWindows"
+    "NonPrivateTabs now has 3 currentWindows"
   );
 
-  SimpleTest.promiseFocus(window);
-  await openFirefoxViewTab(window).then(async viewTab => {
-    const browser = viewTab.linkedBrowser;
-    const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
-    await openTabs.updateComplete;
-
-    ok(
-      openTabs.shadowRoot.querySelector("[card-count=three-or-more]"),
-      "The container shows three columns when three windows are open."
-    );
-  });
-  await cleanup();
-});
-
-add_task(async function toggle_show_more_link() {
-  const tabEntry = url => ({
-    entries: [{ url, triggeringPrincipal_base64 }],
-  });
-  const NUMBER_OF_WINDOWS = 4;
-  const NUMBER_OF_TABS = 42;
-  const browserState = { windows: [] };
-  for (let windowIndex = 0; windowIndex < NUMBER_OF_WINDOWS; windowIndex++) {
-    const winData = { tabs: [] };
-    let tabCount = windowIndex == NUMBER_OF_WINDOWS - 1 ? NUMBER_OF_TABS : 1;
-    for (let i = 0; i < tabCount; i++) {
-      winData.tabs.push(tabEntry(`data:,Window${windowIndex}-Tab${i}`));
-    }
-    winData.selected = winData.tabs.length;
-    browserState.windows.push(winData);
-  }
-  // use Session restore to batch-open windows and tabs
-  await SessionStoreTestUtils.promiseBrowserState(browserState);
-  // restoring this state requires an update to the initial tab globals
-  // so cleanup expects the right thing
-  gInitialTab = gBrowser.selectedTab;
-  gInitialTabURL = gBrowser.selectedBrowser.currentURI.spec;
-
-  const windows = Array.from(Services.wm.getEnumerator("navigator:browser"));
-  is(windows.length, NUMBER_OF_WINDOWS, "There are four browser windows.");
-
-  const tab = (win = window) => {
-    info("Tab");
-    EventUtils.synthesizeKey("KEY_Tab", {}, win);
-  };
-
-  const enter = (win = window) => {
-    info("Enter");
-    EventUtils.synthesizeKey("KEY_Enter", {}, win);
-  };
-
-  let lastCard;
-
-  SimpleTest.promiseFocus(window);
+  // switch back to the original window
   await openFirefoxViewTab(window).then(async viewTab => {
     const browser = viewTab.linkedBrowser;
-    await navigateToOpenTabs(browser);
     const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
-    await openTabs.updateComplete;
-
-    const cards = getCards(browser);
-    is(cards.length, NUMBER_OF_WINDOWS, "There are four windows.");
-    lastCard = cards[NUMBER_OF_WINDOWS - 1];
-  });
-
-  await openFirefoxViewTab(window).then(async viewTab => {
-    const browser = viewTab.linkedBrowser;
-    const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
-    await openTabs.updateComplete;
-    Assert.less(
-      (await getRowsForCard(lastCard)).length,
-      NUMBER_OF_TABS,
-      "Not all tabs are shown yet."
-    );
-    info("Toggle the Show More link.");
-    lastCard.shadowRoot.querySelector("div[slot=footer]").click();
-    await BrowserTestUtils.waitForMutationCondition(
-      lastCard.shadowRoot,
-      { childList: true, subtree: true },
-      async () => (await getRowsForCard(lastCard)).length === NUMBER_OF_TABS
+    const cardContainer = openTabs.shadowRoot.querySelector(
+      ".view-opentabs-card-container"
     );
 
-    info("Toggle the Show Less link.");
-    lastCard.shadowRoot.querySelector("div[slot=footer]").click();
-    await BrowserTestUtils.waitForMutationCondition(
-      lastCard.shadowRoot,
-      { childList: true, subtree: true },
-      async () => (await getRowsForCard(lastCard)).length < NUMBER_OF_TABS
-    );
-
-    // Setting this pref allows the test to run as expected with a keyboard on MacOS
-    await SpecialPowers.pushPrefEnv({
-      set: [["accessibility.tabfocus", 7]],
+    await BrowserTestUtils.waitForCondition(() => {
+      return cardContainer.getAttribute("card-count") == "three-or-more";
     });
-
-    info("Toggle the Show More link with keyboard.");
-    lastCard.shadowRoot.querySelector("card-container").summaryEl.focus();
-    // Tab to first item in the list
-    tab();
-    // Tab to the footer
-    tab();
-    enter();
-    await BrowserTestUtils.waitForMutationCondition(
-      lastCard.shadowRoot,
-      { childList: true, subtree: true },
-      async () => (await getRowsForCard(lastCard)).length === NUMBER_OF_TABS
-    );
-
-    info("Toggle the Show Less link with keyboard.");
-    lastCard.shadowRoot.querySelector("card-container").summaryEl.focus();
-    // Tab to first item in the list
-    tab();
-    // Tab to the footer
-    tab();
-    enter();
-    await BrowserTestUtils.waitForMutationCondition(
-      lastCard.shadowRoot,
-      { childList: true, subtree: true },
-      async () => (await getRowsForCard(lastCard)).length < NUMBER_OF_TABS
-    );
-
-    await SpecialPowers.popPrefEnv();
-  });
-  await cleanup();
-});
-
-add_task(async function search_open_tabs() {
-  // Open a new window and navigate to TEST_URL. Then, when we search for
-  // TEST_URL, it should show a search result in the new window's card.
-  const win = await BrowserTestUtils.openNewBrowserWindow();
-  await BrowserTestUtils.openNewForegroundTab(win.gBrowser, TEST_URL);
-
-  await SpecialPowers.pushPrefEnv({
-    set: [["browser.firefox-view.search.enabled", true]],
-  });
-  await openFirefoxViewTab(window).then(async viewTab => {
-    const browser = viewTab.linkedBrowser;
-    await navigateToOpenTabs(browser);
-    const openTabs = getOpenTabsComponent(browser);
-    await openTabs.openTabsTarget.readyWindowsPromise;
-    await openTabs.updateComplete;
-
-    const cards = getCards(browser);
-    is(cards.length, 2, "There are two windows.");
-    const winTabs = await getRowsForCard(cards[0]);
-    const newWinTabs = await getRowsForCard(cards[1]);
-
-    info("Input a search query.");
-    EventUtils.synthesizeMouseAtCenter(openTabs.searchTextbox, {}, content);
-    EventUtils.sendString(TEST_URL, content);
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[0].tabList.rowEls.length === 0,
-      "There are no matching search results in the original window."
-    );
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[1].tabList.rowEls.length === 1,
-      "There is one matching search result in the new window."
-    );
-
-    info("Clear the search query.");
-    EventUtils.synthesizeMouseAtCenter(
-      openTabs.searchTextbox.clearButton,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
-      "The original window's list is restored."
-    );
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
-      "The new window's list is restored."
-    );
-    openTabs.searchTextbox.blur();
-
-    info("Input a search query with keyboard.");
-    EventUtils.synthesizeKey("f", { accelKey: true }, content);
-    EventUtils.sendString(TEST_URL, content);
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[0].tabList.rowEls.length === 0,
-      "There are no matching search results in the original window."
-    );
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[1].tabList.rowEls.length === 1,
-      "There is one matching search result in the new window."
-    );
-
-    info("Clear the search query with keyboard.");
-    is(
-      openTabs.shadowRoot.activeElement,
-      openTabs.searchTextbox,
-      "Search input is focused"
-    );
-    EventUtils.synthesizeKey("KEY_Tab", {}, content);
     ok(
-      openTabs.searchTextbox.clearButton.matches(":focus-visible"),
-      "Clear Search button is focused"
-    );
-    EventUtils.synthesizeKey("KEY_Enter", {}, content);
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
-      "The original window's list is restored."
-    );
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
-      "The new window's list is restored."
-    );
-  });
-
-  await SpecialPowers.popPrefEnv();
-  await cleanup();
-});
-
-add_task(async function search_open_tabs_recent_browsing() {
-  const NUMBER_OF_TABS = 6;
-  const win = await BrowserTestUtils.openNewBrowserWindow();
-  for (let i = 0; i < NUMBER_OF_TABS; i++) {
-    await BrowserTestUtils.openNewForegroundTab(win.gBrowser, TEST_URL);
-  }
-  await SpecialPowers.pushPrefEnv({
-    set: [["browser.firefox-view.search.enabled", true]],
-  });
-  await openFirefoxViewTab(window).then(async viewTab => {
-    const browser = viewTab.linkedBrowser;
-    await navigateToCategoryAndWait(browser.contentDocument, "recentbrowsing");
-    const recentBrowsing = browser.contentDocument.querySelector(
-      "view-recentbrowsing"
-    );
-
-    info("Input a search query.");
-    EventUtils.synthesizeMouseAtCenter(
-      recentBrowsing.searchTextbox,
-      {},
-      content
-    );
-    EventUtils.sendString(TEST_URL, content);
-    const slot = recentBrowsing.querySelector("[slot='opentabs']");
-    await TestUtils.waitForCondition(
-      () => slot.viewCards[0].tabList.rowEls.length === 5,
-      "Not all search results are shown yet."
+      openTabs.shadowRoot.querySelector("[card-count=three-or-more]"),
+      "The container shows three columns when three windows are open."
     );
-
-    info("Click the Show All link.");
-    const showAllLink = await TestUtils.waitForCondition(() => {
-      const elt = slot.viewCards[0].shadowRoot.querySelector(
-        "[data-l10n-id='firefoxview-show-all']"
-      );
-      EventUtils.synthesizeMouseAtCenter(elt, {}, content);
-      if (slot.viewCards[0].tabList.rowEls.length === NUMBER_OF_TABS) {
-        return elt;
-      }
-      return false;
-    }, "All search results are shown.");
-    is(showAllLink.role, "link", "The show all control is a link.");
-    ok(BrowserTestUtils.isHidden(showAllLink), "The show all link is hidden.");
   });
-  await SpecialPowers.popPrefEnv();
   await cleanup();
 });
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_changes.js b/browser/components/firefoxview/tests/browser/browser_opentabs_changes.js
index c293afa8cd..15aba26d74 100644
--- a/browser/components/firefoxview/tests/browser/browser_opentabs_changes.js
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_changes.js
@@ -1,4 +1,4 @@
-const { NonPrivateTabs, getTabsTargetForWindow } = ChromeUtils.importESModule(
+const { getTabsTargetForWindow } = ChromeUtils.importESModule(
   "resource:///modules/OpenTabs.sys.mjs"
 );
 let privateTabsChanges;
@@ -505,8 +505,9 @@ add_task(async function test_tabsFromPrivateWindows() {
   });
   const private2TabsChanges = getTabsTargetForWindow(private2Win);
   private2TabsChanges.addEventListener("TabChange", private2Listener);
-  ok(
-    privateTabsChanges !== getTabsTargetForWindow(private2Win),
+  Assert.notStrictEqual(
+    privateTabsChanges,
+    getTabsTargetForWindow(private2Win),
     "getTabsTargetForWindow creates a distinct instance for a different private window"
   );
 
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js
index 57d0f8d031..955c2363d7 100644
--- a/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js
@@ -1,6 +1,9 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+// Test regularly times out - especially with verify
+requestLongerTimeout(2);
+
 const TEST_URL1 = "about:robots";
 const TEST_URL2 = "https://example.org/";
 const TEST_URL3 = "about:mozilla";
@@ -20,27 +23,6 @@ const fxaDevicesWithCommands = [
   },
 ];
 
-const { NonPrivateTabs } = ChromeUtils.importESModule(
-  "resource:///modules/OpenTabs.sys.mjs"
-);
-
-async function getRowsForCard(card) {
-  await TestUtils.waitForCondition(() => card.tabList.rowEls.length);
-  return card.tabList.rowEls;
-}
-
-async function add_new_tab(URL) {
-  let tabChangeRaised = BrowserTestUtils.waitForEvent(
-    NonPrivateTabs,
-    "TabChange"
-  );
-  let tab = BrowserTestUtils.addTab(gBrowser, URL);
-  // wait so we can reliably compare the tab URL
-  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
-  await tabChangeRaised;
-  return tab;
-}
-
 function getVisibleTabURLs(win = window) {
   return win.gBrowser.visibleTabs.map(tab => tab.linkedBrowser.currentURI.spec);
 }
@@ -78,7 +60,7 @@ async function waitUntilRowsMatch(openTabs, cardIndex, expectedURLs) {
     card.shadowRoot,
     { characterData: true, childList: true, subtree: true },
     async () => {
-      let rows = await getRowsForCard(card);
+      let rows = await getTabRowsForCard(card);
       return (
         rows.length == expectedURLs.length &&
         JSON.stringify(getTabRowURLs(rows)) == expectedURLsAsString
@@ -106,7 +88,7 @@ async function getContextMenuPanelListForCard(card) {
 async function openContextMenuForItem(tabItem, card) {
   // click on the item's button element (more menu)
   // and wait for the panel list to be shown
-  tabItem.buttonEl.click();
+  tabItem.secondaryButtonEl.click();
   // NOTE: menu must populate with devices data before it can be rendered
   // so the creation of the panel-list can be async
   let panelList = await getContextMenuPanelListForCard(card);
@@ -122,7 +104,7 @@ async function moreMenuSetup() {
   await clickFirefoxViewButton(window);
   const document = window.FirefoxViewHandler.tab.linkedBrowser.contentDocument;
 
-  await navigateToCategoryAndWait(document, "opentabs");
+  await navigateToViewAndWait(document, "opentabs");
 
   let openTabs = document.querySelector("view-opentabs[name=opentabs]");
   setSortOption(openTabs, "tabStripOrder");
@@ -134,7 +116,7 @@ async function moreMenuSetup() {
   let cards = getOpenTabsCards(openTabs);
   is(cards.length, 1, "There is one open window.");
 
-  let rows = await getRowsForCard(cards[0]);
+  let rows = await getTabRowsForCard(cards[0]);
 
   let firstTab = rows[0];
 
@@ -148,6 +130,44 @@ async function moreMenuSetup() {
   return [cards, rows];
 }
 
+add_task(async function test_close_open_tab() {
+  await withFirefoxView({}, async browser => {
+    const [cards, rows] = await moreMenuSetup();
+    const firstTab = rows[0];
+    const tertiaryButtonEl = firstTab.tertiaryButtonEl;
+
+    ok(tertiaryButtonEl, "Dismiss button exists");
+
+    await clearAllParentTelemetryEvents();
+    let closeTabEvent = [
+      ["firefoxview_next", "close_open_tab", "tabs", undefined],
+    ];
+
+    let tabsUpdated = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+    EventUtils.synthesizeMouseAtCenter(tertiaryButtonEl, {}, content);
+    await tabsUpdated;
+    Assert.deepEqual(
+      getVisibleTabURLs(),
+      [TEST_URL2, TEST_URL3],
+      "First tab successfully removed"
+    );
+
+    await telemetryEvent(closeTabEvent);
+
+    const openTabs = cards[0].ownerDocument.querySelector(
+      "view-opentabs[name=opentabs]"
+    );
+    await waitUntilRowsMatch(openTabs, 0, [TEST_URL2, TEST_URL3]);
+
+    while (gBrowser.tabs.length > 1) {
+      BrowserTestUtils.removeTab(gBrowser.tabs[0]);
+    }
+  });
+});
+
 add_task(async function test_more_menus() {
   await withFirefoxView({}, async browser => {
     let win = browser.ownerGlobal;
@@ -156,11 +176,11 @@ add_task(async function test_more_menus() {
     gBrowser.selectedTab = gBrowser.visibleTabs[0];
     Assert.equal(
       gBrowser.selectedTab.linkedBrowser.currentURI.spec,
-      "about:blank",
-      "Selected tab is about:blank"
+      "about:mozilla",
+      "Selected tab is about:mozilla"
     );
 
-    info(`Loading ${TEST_URL1} into the selected about:blank tab`);
+    info(`Loading ${TEST_URL1} into the selected about:mozilla tab`);
     let tabLoaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
 
     win.gURLBar.focus();
@@ -176,64 +196,18 @@ add_task(async function test_more_menus() {
       "Prepared 3 open tabs"
     );
 
+    // Move Tab submenu item
     let firstTab = rows[0];
     // Open the panel list (more menu) from the first list item
     let panelList = await openContextMenuForItem(firstTab, cards[0]);
 
-    // Close Tab menu item
-    info("Panel list shown. Clicking on panel-item");
-    let panelItem = panelList.querySelector(
-      "panel-item[data-l10n-id=fxviewtabrow-close-tab]"
-    );
-    let panelItemButton = panelItem.shadowRoot.querySelector(
-      "button[role=menuitem]"
-    );
-    ok(panelItem, "Close Tab panel item exists");
-    ok(
-      panelItemButton,
-      "Close Tab panel item button with role=menuitem exists"
-    );
-
-    await clearAllParentTelemetryEvents();
-    let contextMenuEvent = [
-      [
-        "firefoxview_next",
-        "context_menu",
-        "tabs",
-        undefined,
-        { menu_action: "close-tab", data_type: "opentabs" },
-      ],
-    ];
-
-    // close a tab via the menu
-    let tabChangeRaised = BrowserTestUtils.waitForEvent(
-      NonPrivateTabs,
-      "TabChange"
-    );
-    menuHidden = BrowserTestUtils.waitForEvent(panelList, "hidden");
-    panelItemButton.click();
-    info("Waiting for result of closing a tab via the menu");
-    await tabChangeRaised;
-    await cards[0].getUpdateComplete();
-    await menuHidden;
-    await telemetryEvent(contextMenuEvent);
-
-    Assert.deepEqual(
-      getVisibleTabURLs(),
-      [TEST_URL2, TEST_URL3],
-      "Got the expected 2 open tabs"
-    );
-
     let openTabs = cards[0].ownerDocument.querySelector(
       "view-opentabs[name=opentabs]"
     );
-    await waitUntilRowsMatch(openTabs, 0, [TEST_URL2, TEST_URL3]);
+    await waitUntilRowsMatch(openTabs, 0, [TEST_URL1, TEST_URL2, TEST_URL3]);
 
-    // Move Tab submenu item
-    firstTab = rows[0];
-    is(firstTab.url, TEST_URL2, `First tab list item is ${TEST_URL2}`);
+    is(firstTab.url, TEST_URL1, `First tab list item is ${TEST_URL1}`);
 
-    panelList = await openContextMenuForItem(firstTab, cards[0]);
     let moveTabsPanelItem = panelList.querySelector(
       "panel-item[data-l10n-id=fxviewtabrow-move-tab]"
     );
@@ -243,15 +217,14 @@ add_task(async function test_more_menus() {
     );
     ok(moveTabsSubmenuList, "Move tabs submenu panel list exists");
 
-    // navigate down to the "Move tabs" submenu option, and
+    // navigate to the "Move tabs" submenu option, and
     // open it with the right arrow key
-    EventUtils.synthesizeKey("KEY_ArrowDown", {});
     shown = BrowserTestUtils.waitForEvent(moveTabsSubmenuList, "shown");
     EventUtils.synthesizeKey("KEY_ArrowRight", {});
     await shown;
 
     await clearAllParentTelemetryEvents();
-    contextMenuEvent = [
+    let contextMenuEvent = [
       [
         "firefoxview_next",
         "context_menu",
@@ -264,7 +237,7 @@ add_task(async function test_more_menus() {
     // click on the first option, which should be "Move to the end" since
     // this is the first tab
     menuHidden = BrowserTestUtils.waitForEvent(panelList, "hidden");
-    tabChangeRaised = BrowserTestUtils.waitForEvent(
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
       NonPrivateTabs,
       "TabChange"
     );
@@ -276,7 +249,7 @@ add_task(async function test_more_menus() {
 
     Assert.deepEqual(
       getVisibleTabURLs(),
-      [TEST_URL3, TEST_URL2],
+      [TEST_URL2, TEST_URL3, TEST_URL1],
       "The last tab became the first tab"
     );
 
@@ -284,15 +257,15 @@ add_task(async function test_more_menus() {
     // closing a tab since it very clearly reveals the issues
     // outlined in bug 1852622 when there are 3 or more tabs open
     // and one is moved via the more menus.
-    await waitUntilRowsMatch(openTabs, 0, [TEST_URL3, TEST_URL2]);
+    await waitUntilRowsMatch(openTabs, 0, [TEST_URL2, TEST_URL3, TEST_URL1]);
 
     // Copy Link menu item (copyLink function that's called is a member of Viewpage.mjs)
     panelList = await openContextMenuForItem(firstTab, cards[0]);
     firstTab = rows[0];
-    panelItem = panelList.querySelector(
+    let panelItem = panelList.querySelector(
       "panel-item[data-l10n-id=fxviewtabrow-copy-link]"
     );
-    panelItemButton = panelItem.shadowRoot.querySelector(
+    let panelItemButton = panelItem.shadowRoot.querySelector(
       "button[role=menuitem]"
     );
     ok(panelItem, "Copy link panel item exists");
@@ -323,7 +296,7 @@ add_task(async function test_more_menus() {
       "text/plain",
       Ci.nsIClipboard.kGlobalClipboard
     );
-    is(copiedText, TEST_URL3, "The correct url has been copied and pasted");
+    is(copiedText, TEST_URL2, "The correct url has been copied and pasted");
 
     while (gBrowser.tabs.length > 1) {
       BrowserTestUtils.removeTab(gBrowser.tabs[0]);
@@ -349,11 +322,11 @@ add_task(async function test_send_device_submenu() {
     .callsFake(() => fxaDevicesWithCommands);
 
   await withFirefoxView({}, async browser => {
-    // TEST_URL2 is our only tab, left over from previous test
+    // TEST_URL1 is our only tab, left over from previous test
     Assert.deepEqual(
       getVisibleTabURLs(),
-      [TEST_URL2],
-      `We initially have a single ${TEST_URL2} tab`
+      [TEST_URL1],
+      `We initially have a single ${TEST_URL1} tab`
     );
     let shown;
 
@@ -376,9 +349,7 @@ add_task(async function test_send_device_submenu() {
 
     // navigate down to the "Send tabs" submenu option, and
     // open it with the right arrow key
-    EventUtils.synthesizeKey("KEY_ArrowDown", {});
-    EventUtils.synthesizeKey("KEY_ArrowDown", {});
-    EventUtils.synthesizeKey("KEY_ArrowDown", {});
+    EventUtils.synthesizeKey("KEY_ArrowDown", { repeat: 4 });
 
     shown = BrowserTestUtils.waitForEvent(sendTabSubmenuList, "shown");
     EventUtils.synthesizeKey("KEY_ArrowRight", {});
@@ -389,9 +360,9 @@ add_task(async function test_send_device_submenu() {
       .expects("sendTabToDevice")
       .once()
       .withExactArgs(
-        TEST_URL2,
+        TEST_URL1,
         [fxaDevicesWithCommands[0]],
-        "mochitest index /"
+        "Gort! Klaatu barada nikto!"
       )
       .returns(true);
 
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_more.js b/browser/components/firefoxview/tests/browser/browser_opentabs_more.js
new file mode 100644
index 0000000000..fd25348699
--- /dev/null
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_more.js
@@ -0,0 +1,151 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let gInitialTab;
+let gInitialTabURL;
+
+// This test opens many tabs and regularly times out - especially with verify
+requestLongerTimeout(2);
+
+add_setup(function () {
+  gInitialTab = gBrowser.selectedTab;
+  gInitialTabURL = gBrowser.selectedBrowser.currentURI.spec;
+});
+
+async function cleanup() {
+  await SimpleTest.promiseFocus(window);
+  await promiseAllButPrimaryWindowClosed();
+  await BrowserTestUtils.switchTab(gBrowser, gInitialTab);
+  await closeFirefoxViewTab(window);
+
+  // clean up extra tabs
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs.at(-1));
+  }
+
+  is(
+    BrowserWindowTracker.orderedWindows.length,
+    1,
+    "One window at the end of test cleanup"
+  );
+  Assert.deepEqual(
+    gBrowser.tabs.map(tab => tab.linkedBrowser.currentURI.spec),
+    [gInitialTabURL],
+    "One about:blank tab open at the end up test cleanup"
+  );
+}
+
+add_task(async function toggle_show_more_link() {
+  const tabEntry = url => ({
+    entries: [{ url, triggeringPrincipal_base64 }],
+  });
+  const NUMBER_OF_WINDOWS = 4;
+  const NUMBER_OF_TABS = 42;
+  const browserState = { windows: [] };
+  for (let windowIndex = 0; windowIndex < NUMBER_OF_WINDOWS; windowIndex++) {
+    const winData = { tabs: [] };
+    let tabCount = windowIndex == NUMBER_OF_WINDOWS - 1 ? NUMBER_OF_TABS : 1;
+    for (let i = 0; i < tabCount; i++) {
+      winData.tabs.push(tabEntry(`data:,Window${windowIndex}-Tab${i}`));
+    }
+    winData.selected = winData.tabs.length;
+    browserState.windows.push(winData);
+  }
+  // use Session restore to batch-open windows and tabs
+  info(`Restoring to browserState: ${JSON.stringify(browserState, null, 2)}`);
+  await SessionStoreTestUtils.promiseBrowserState(browserState);
+  info("Windows and tabs opened, waiting for readyWindowsPromise");
+  await NonPrivateTabs.readyWindowsPromise;
+  info("readyWindowsPromise resolved");
+
+  // restoring this state requires an update to the initial tab globals
+  // so cleanup expects the right thing
+  gInitialTab = gBrowser.selectedTab;
+  gInitialTabURL = gBrowser.selectedBrowser.currentURI.spec;
+
+  const windows = Array.from(Services.wm.getEnumerator("navigator:browser"));
+  is(windows.length, NUMBER_OF_WINDOWS, "There are four browser windows.");
+
+  const tab = (win = window) => {
+    info("Tab");
+    EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  };
+
+  const enter = (win = window) => {
+    info("Enter");
+    EventUtils.synthesizeKey("KEY_Enter", {}, win);
+  };
+
+  let lastCard;
+
+  await openFirefoxViewTab(window).then(async viewTab => {
+    const browser = viewTab.linkedBrowser;
+    await navigateToOpenTabs(browser);
+    const openTabs = getOpenTabsComponent(browser);
+    await openTabs.updateComplete;
+
+    let cards;
+    info(`Waiting for ${NUMBER_OF_WINDOWS} of window cards`);
+    await BrowserTestUtils.waitForCondition(() => {
+      cards = getOpenTabsCards(openTabs);
+      return cards.length == NUMBER_OF_WINDOWS;
+    });
+    is(cards.length, NUMBER_OF_WINDOWS, "There are four windows.");
+    lastCard = cards[NUMBER_OF_WINDOWS - 1];
+
+    Assert.less(
+      (await getTabRowsForCard(lastCard)).length,
+      NUMBER_OF_TABS,
+      "Not all tabs are shown yet."
+    );
+    info("Toggle the Show More link.");
+    lastCard.shadowRoot.querySelector("div[slot=footer]").click();
+    await BrowserTestUtils.waitForMutationCondition(
+      lastCard.shadowRoot,
+      { childList: true, subtree: true },
+      async () => (await getTabRowsForCard(lastCard)).length === NUMBER_OF_TABS
+    );
+
+    info("Toggle the Show Less link.");
+    lastCard.shadowRoot.querySelector("div[slot=footer]").click();
+    await BrowserTestUtils.waitForMutationCondition(
+      lastCard.shadowRoot,
+      { childList: true, subtree: true },
+      async () => (await getTabRowsForCard(lastCard)).length < NUMBER_OF_TABS
+    );
+
+    // Setting this pref allows the test to run as expected with a keyboard on MacOS
+    await SpecialPowers.pushPrefEnv({
+      set: [["accessibility.tabfocus", 7]],
+    });
+
+    info("Toggle the Show More link with keyboard.");
+    lastCard.shadowRoot.querySelector("card-container").summaryEl.focus();
+    // Tab to first item in the list
+    tab();
+    // Tab to the footer
+    tab();
+    enter();
+    await BrowserTestUtils.waitForMutationCondition(
+      lastCard.shadowRoot,
+      { childList: true, subtree: true },
+      async () => (await getTabRowsForCard(lastCard)).length === NUMBER_OF_TABS
+    );
+
+    info("Toggle the Show Less link with keyboard.");
+    lastCard.shadowRoot.querySelector("card-container").summaryEl.focus();
+    // Tab to first item in the list
+    tab();
+    // Tab to the footer
+    tab();
+    enter();
+    await BrowserTestUtils.waitForMutationCondition(
+      lastCard.shadowRoot,
+      { childList: true, subtree: true },
+      async () => (await getTabRowsForCard(lastCard)).length < NUMBER_OF_TABS
+    );
+
+    await SpecialPowers.popPrefEnv();
+  });
+  await cleanup();
+});
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_pinned_tabs.js b/browser/components/firefoxview/tests/browser/browser_opentabs_pinned_tabs.js
new file mode 100644
index 0000000000..d74812bca5
--- /dev/null
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_pinned_tabs.js
@@ -0,0 +1,481 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let pageWithAlert =
+  // eslint-disable-next-line @microsoft/sdl/no-insecure-url
+  "http://example.com/browser/browser/base/content/test/tabPrompts/openPromptOffTimeout.html";
+let pageWithSound =
+  "http://mochi.test:8888/browser/dom/base/test/file_audioLoop.html";
+
+function cleanup() {
+  // Cleanup
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs[1]);
+  }
+}
+
+const arrowDown = async tabList => {
+  info("Arrow down");
+  EventUtils.synthesizeKey("KEY_ArrowDown", {});
+  await tabList.getUpdateComplete();
+};
+const arrowUp = async tabList => {
+  info("Arrow up");
+  EventUtils.synthesizeKey("KEY_ArrowUp", {});
+  await tabList.getUpdateComplete();
+};
+const arrowRight = async tabList => {
+  info("Arrow right");
+  EventUtils.synthesizeKey("KEY_ArrowRight", {});
+  await tabList.getUpdateComplete();
+};
+const arrowLeft = async tabList => {
+  info("Arrow left");
+  EventUtils.synthesizeKey("KEY_ArrowLeft", {});
+  await tabList.getUpdateComplete();
+};
+
+add_task(async function test_pin_unpin_open_tab() {
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let openTabEl = card.tabList.rowEls[0];
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Pin tab
+    EventUtils.synthesizeMouseAtCenter(
+      openTabEl.secondaryButtonEl,
+      {},
+      content
+    );
+    await TestUtils.waitForCondition(() => card.tabContextMenu.panelList);
+    let panelList = card.tabContextMenu.panelList;
+    await BrowserTestUtils.waitForEvent(panelList, "shown");
+    info("The context menu is shown when clicking the tab's 'more' button");
+
+    let pinTabPanelItem = panelList.querySelector(
+      "panel-item[data-l10n-id=fxviewtabrow-pin-tab]"
+    );
+
+    await clearAllParentTelemetryEvents();
+    let contextMenuEvent = [
+      [
+        "firefoxview_next",
+        "context_menu",
+        "tabs",
+        undefined,
+        { menu_action: "pin-tab", data_type: "opentabs" },
+      ],
+    ];
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Unpin tab
+    EventUtils.synthesizeMouseAtCenter(pinTabPanelItem, {}, content);
+    info("Pin Tab context menu option clicked.");
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let pinnedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(() =>
+      pinnedTab.indicators.includes("pinned")
+    );
+
+    // Check aria roles
+    let listWrapper = card.tabList.shadowRoot.querySelector(".fxview-tab-list");
+    ok(
+      Array.from(listWrapper.classList).includes("pinned"),
+      "The tab list has the 'pinned' class as expected."
+    );
+
+    Assert.strictEqual(
+      listWrapper.getAttribute("role"),
+      "tablist",
+      "The list wrapper has an aria-role of 'tablist'"
+    );
+    Assert.strictEqual(
+      pinnedTab.pinnedTabButtonEl.getAttribute("role"),
+      "tab",
+      "The pinned tab's button element has a role of 'tab'"
+    );
+
+    // Open context menu
+    EventUtils.synthesizeMouseAtCenter(
+      pinnedTab,
+      { type: "contextmenu" },
+      content
+    );
+    await TestUtils.waitForCondition(() => card.tabContextMenu.panelList);
+    panelList = card.tabContextMenu.panelList;
+    await BrowserTestUtils.waitForEvent(panelList, "shown");
+    info("The context menu is shown when right clicking the pinned tab");
+
+    let unpinTabPanelItem = panelList.querySelector(
+      "panel-item[data-l10n-id=fxviewtabrow-unpin-tab]"
+    );
+
+    await clearAllParentTelemetryEvents();
+    contextMenuEvent = [
+      [
+        "firefoxview_next",
+        "context_menu",
+        "tabs",
+        undefined,
+        { menu_action: "unpin-tab", data_type: "opentabs" },
+      ],
+    ];
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Unpin tab
+    EventUtils.synthesizeMouseAtCenter(unpinTabPanelItem, {}, content);
+    info("Unpin Tab context menu option clicked.");
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+    await telemetryEvent(contextMenuEvent);
+  });
+  cleanup();
+});
+
+add_task(async function test_indicator_pinned_tabs_with_keyboard() {
+  await add_new_tab(URLs[0]);
+  await add_new_tab(URLs[1]);
+  await add_new_tab(pageWithSound);
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    setSortOption(openTabs, "tabStripOrder");
+    let card = openTabs.viewCards[0];
+
+    let openedTab = await BrowserTestUtils.openNewForegroundTab(
+      gBrowser,
+      pageWithAlert,
+      true
+    );
+    let openedTabGotAttentionPromise = BrowserTestUtils.waitForAttribute(
+      "attention",
+      openedTab
+    );
+
+    await switchToFxViewTab();
+
+    await openedTabGotAttentionPromise;
+
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Pin 2 of 5 tabs
+    browser.ownerGlobal.gBrowser.tabs.forEach((tab, i) => {
+      if (i > 2) {
+        browser.ownerGlobal.gBrowser.pinTab(tab);
+      }
+    });
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let soundPlayingPinnedTab = card.tabList.rowEls[0];
+    let attentionPinnedTab = card.tabList.rowEls[1];
+    let firstUnpinnedTab = card.tabList.rowEls[2];
+    let secondUnpinnedTab = card.tabList.rowEls[3];
+
+    // Check soundplaying indicator
+    ok(
+      soundPlayingPinnedTab.indicators.includes("pinned") &&
+        soundPlayingPinnedTab.indicators.includes("soundplaying") &&
+        soundPlayingPinnedTab.mediaButtonEl,
+      "The first pinned tab has the 'sound playing' indicator."
+    );
+
+    soundPlayingPinnedTab.pinnedTabButtonEl.focus();
+    ok(
+      isActiveElement(soundPlayingPinnedTab.pinnedTabButtonEl),
+      "Focus should be on the first pinned tab's button element."
+    );
+    info("First pinned tab has focus");
+
+    // Test mute/unmute
+    EventUtils.synthesizeKey("m", { ctrlKey: true });
+    await TestUtils.waitForCondition(() =>
+      soundPlayingPinnedTab.indicators.includes("muted")
+    );
+    EventUtils.synthesizeKey("m", { ctrlKey: true });
+    await TestUtils.waitForCondition(
+      () => !soundPlayingPinnedTab.indicators.includes("muted")
+    );
+
+    await arrowRight(card.tabList);
+    ok(
+      isActiveElement(attentionPinnedTab.pinnedTabButtonEl),
+      "Focus should be on the second pinned tab's button element."
+    );
+
+    // Check notification dot indicator
+    ok(
+      attentionPinnedTab.indicators.includes("pinned") &&
+        attentionPinnedTab.indicators.includes("attention") &&
+        Array.from(
+          attentionPinnedTab.shadowRoot.querySelector(
+            ".fxview-tab-row-favicon-wrapper"
+          ).classList
+        ).includes("attention"),
+      "The second pinned tab has the 'attention' indicator."
+    );
+
+    await arrowDown(card.tabList);
+    ok(
+      isActiveElement(firstUnpinnedTab.mainEl),
+      "Focus should be on the first unpinned tab's main/link element."
+    );
+
+    await arrowRight(card.tabList);
+    ok(
+      isActiveElement(firstUnpinnedTab.secondaryButtonEl),
+      "Focus should be on the first unpinned tab's secondary/more button element."
+    );
+
+    await arrowUp(card.tabList);
+    ok(
+      isActiveElement(attentionPinnedTab.pinnedTabButtonEl),
+      "Focus should be on the second pinned tab's button element."
+    );
+
+    await arrowRight(card.tabList);
+    ok(
+      isActiveElement(firstUnpinnedTab.secondaryButtonEl),
+      "Focus should be on the first unpinned tab's secondary/more button element."
+    );
+
+    await arrowUp(card.tabList);
+    ok(
+      isActiveElement(attentionPinnedTab.pinnedTabButtonEl),
+      "Focus should be on the second pinned tab's button element."
+    );
+
+    await arrowLeft(card.tabList);
+    ok(
+      isActiveElement(soundPlayingPinnedTab.pinnedTabButtonEl),
+      "Focus should be on the first pinned tab's button element."
+    );
+
+    await arrowDown(card.tabList);
+    ok(
+      isActiveElement(firstUnpinnedTab.secondaryButtonEl),
+      "Focus should be on the first unpinned tab's secondary/more button element."
+    );
+
+    await arrowDown(card.tabList);
+    ok(
+      isActiveElement(secondUnpinnedTab.secondaryButtonEl),
+      "Focus should be on the second unpinned tab's secondary/more button element."
+    );
+
+    // Switch back to other tab to close prompt before cleanup
+    await BrowserTestUtils.switchTab(gBrowser, openedTab);
+    EventUtils.synthesizeKey("KEY_Enter", {});
+  });
+  cleanup();
+});
+
+add_task(async function test_mute_unmute_pinned_tab() {
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let openTabEl = card.tabList.rowEls[0];
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Mute tab
+    // We intentionally turn off this a11y check, because the following click
+    // is purposefully targeting a not focusable button within a pinned tab
+    // control. A keyboard-only user could mute/unmute this pinned tab via the
+    // context menu, while we do not want to create an additional, unnecessary
+    // tabstop for this control, therefore this rule check shall be ignored by
+    // a11y_checks suite.
+    AccessibilityUtils.setEnv({ focusableRule: false });
+    EventUtils.synthesizeMouseAtCenter(openTabEl.mediaButtonEl, {}, content);
+    AccessibilityUtils.resetEnv();
+    info("Mute Tab button clicked.");
+
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let mutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(() =>
+      mutedTab.indicators.includes("muted")
+    );
+
+    // Unmute tab
+    // We intentionally turn off this a11y check, because the following click
+    // is purposefully targeting a not focusable button within a pinned tab
+    // control. A keyboard-only user could mute/unmute this pinned tab via the
+    // context menu, while we do not want to create an additional, unnecessary
+    // tabstop for this control, therefore this rule check shall be ignored by
+    // a11y_checks suite.
+    AccessibilityUtils.setEnv({ focusableRule: false });
+    EventUtils.synthesizeMouseAtCenter(openTabEl.mediaButtonEl, {}, content);
+    AccessibilityUtils.resetEnv();
+    info("Unmute Tab button clicked.");
+
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let unmutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(
+      () => !unmutedTab.indicators.includes("muted")
+    );
+  });
+  cleanup();
+});
+
+add_task(async function test_mute_unmute_with_context_menu() {
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "opentabs");
+
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let openTabEl = card.tabList.rowEls[0];
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Mute tab
+    EventUtils.synthesizeMouseAtCenter(
+      openTabEl.pinnedTabButtonEl,
+      { type: "contextmenu" },
+      content
+    );
+    await TestUtils.waitForCondition(() => card.tabContextMenu.panelList);
+    let panelList = card.tabContextMenu.panelList;
+    await BrowserTestUtils.waitForEvent(panelList, "shown");
+    info("The context menu is shown when clicking the tab's 'more' button");
+
+    let pinTabPanelItem = panelList.querySelector(
+      "panel-item[data-l10n-id=fxviewtabrow-mute-tab]"
+    );
+
+    await clearAllParentTelemetryEvents();
+    let contextMenuEvent = [
+      [
+        "firefoxview_next",
+        "context_menu",
+        "tabs",
+        undefined,
+        { menu_action: "mute-tab", data_type: "opentabs" },
+      ],
+    ];
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Mute tab
+    EventUtils.synthesizeMouseAtCenter(pinTabPanelItem, {}, content);
+    info("Mute Tab context menu option clicked.");
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let mutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(() =>
+      mutedTab.indicators.includes("muted")
+    );
+
+    // Open context menu
+    EventUtils.synthesizeMouseAtCenter(
+      mutedTab,
+      { type: "contextmenu" },
+      content
+    );
+    await TestUtils.waitForCondition(() => card.tabContextMenu.panelList);
+    panelList = card.tabContextMenu.panelList;
+    await BrowserTestUtils.waitForEvent(panelList, "shown");
+    info("The context menu is shown when right clicking the pinned tab");
+
+    let unmuteTabPanelItem = panelList.querySelector(
+      "panel-item[data-l10n-id=fxviewtabrow-unmute-tab]"
+    );
+
+    await clearAllParentTelemetryEvents();
+    contextMenuEvent = [
+      [
+        "firefoxview_next",
+        "context_menu",
+        "tabs",
+        undefined,
+        { menu_action: "unmute-tab", data_type: "opentabs" },
+      ],
+    ];
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Unpin tab
+    EventUtils.synthesizeMouseAtCenter(unmuteTabPanelItem, {}, content);
+    info("Unmute Tab context menu option clicked.");
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+    await telemetryEvent(contextMenuEvent);
+
+    let unmutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(
+      () => !unmutedTab.indicators.includes("muted")
+    );
+  });
+  cleanup();
+});
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_recency.js b/browser/components/firefoxview/tests/browser/browser_opentabs_recency.js
index e5beb4700a..ee3f9981e1 100644
--- a/browser/components/firefoxview/tests/browser/browser_opentabs_recency.js
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_recency.js
@@ -13,9 +13,6 @@ const tabURL4 = "data:,Tab4";
 
 let gInitialTab;
 let gInitialTabURL;
-const { NonPrivateTabs } = ChromeUtils.importESModule(
-  "resource:///modules/OpenTabs.sys.mjs"
-);
 
 add_setup(function () {
   gInitialTab = gBrowser.selectedTab;
@@ -158,12 +155,12 @@ function getOpenTabsComponent(browser) {
 
 async function checkTabList(browser, expected) {
   const tabsView = getOpenTabsComponent(browser);
-  const openTabsCard = tabsView.shadowRoot.querySelector("view-opentabs-card");
-  await tabsView.getUpdateComplete();
-  const tabList = openTabsCard.shadowRoot.querySelector("fxview-tab-list");
-  Assert.ok(tabList, "Found the tab list element");
-  await TestUtils.waitForCondition(() => tabList.rowEls.length);
-  let actual = Array.from(tabList.rowEls).map(row => row.url);
+  const [openTabsCard] = getOpenTabsCards(tabsView);
+  await openTabsCard.updateComplete;
+
+  const tabListRows = await getTabRowsForCard(openTabsCard);
+  Assert.ok(tabListRows, "Found the tab list element");
+  let actual = Array.from(tabListRows).map(row => row.url);
   Assert.deepEqual(
     actual,
     expected,
@@ -255,7 +252,7 @@ add_task(async function test_multiple_window_tabs() {
     NonPrivateTabs,
     "TabRecencyChange"
   );
-  await SimpleTest.promiseFocus(win1);
+  await switchToWindow(win1);
   await tabChangeRaised;
   Assert.equal(
     tabUrl(win1.gBrowser.selectedTab),
@@ -308,17 +305,20 @@ add_task(async function test_windows_activation() {
   await openFirefoxViewTab(win1).then(tab => (fxViewTab = tab));
 
   const win2 = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win2);
   await prepareOpenTabs([tabURL2], win2);
 
   const win3 = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win3);
   await prepareOpenTabs([tabURL3], win3);
-  await tabChangeRaised;
 
   tabChangeRaised = BrowserTestUtils.waitForEvent(
     NonPrivateTabs,
     "TabRecencyChange"
   );
-  await SimpleTest.promiseFocus(win1);
+  info("Switching back to win 1");
+  await switchToWindow(win1);
+  info("Waiting for tabChangeRaised to resolve");
   await tabChangeRaised;
 
   const browser = fxViewTab.linkedBrowser;
@@ -329,7 +329,7 @@ add_task(async function test_windows_activation() {
     NonPrivateTabs,
     "TabRecencyChange"
   );
-  await SimpleTest.promiseFocus(win2);
+  await switchToWindow(win2);
   await tabChangeRaised;
   await checkTabList(browser, [tabURL2, tabURL3, tabURL1]);
   await cleanup(win2, win3);
@@ -341,6 +341,7 @@ add_task(async function test_minimize_restore_windows() {
   await prepareOpenTabs([tabURL1, tabURL2]);
   const win2 = await BrowserTestUtils.openNewBrowserWindow();
   await prepareOpenTabs([tabURL3, tabURL4], win2);
+  await NonPrivateTabs.readyWindowsPromise;
 
   // to avoid confusing the results by activating different windows,
   // check fxview in the current window - which is win2
@@ -374,7 +375,7 @@ add_task(async function test_minimize_restore_windows() {
   );
   await minimizeWindow(win2);
   info("Focusing win1, where tab2 is selected - making it most recent");
-  await SimpleTest.promiseFocus(win1);
+  await switchToWindow(win1);
   await tabChangeRaised;
 
   Assert.equal(
@@ -395,7 +396,7 @@ add_task(async function test_minimize_restore_windows() {
       "TabRecencyChange"
     );
     await restoreWindow(win2);
-    await SimpleTest.promiseFocus(win2);
+    await switchToWindow(win2);
     await tabChangeRaised;
 
     info(
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_search.js b/browser/components/firefoxview/tests/browser/browser_opentabs_search.js
new file mode 100644
index 0000000000..173bf1a623
--- /dev/null
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_search.js
@@ -0,0 +1,161 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URL = "about:robots";
+let gInitialTab;
+let gInitialTabURL;
+
+add_setup(function () {
+  gInitialTab = gBrowser.selectedTab;
+  gInitialTabURL = gBrowser.selectedBrowser.currentURI.spec;
+});
+
+async function cleanup() {
+  await SimpleTest.promiseFocus(window);
+  await promiseAllButPrimaryWindowClosed();
+  await BrowserTestUtils.switchTab(gBrowser, gInitialTab);
+  await closeFirefoxViewTab(window);
+
+  // clean up extra tabs
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs.at(-1));
+  }
+}
+
+add_task(async function search_open_tabs() {
+  // Open a new window and navigate to TEST_URL. Then, when we search for
+  // TEST_URL, it should show a search result in the new window's card.
+  const win2 = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win2);
+  await NonPrivateTabs.readyWindowsPromise;
+  await BrowserTestUtils.openNewForegroundTab(win2.gBrowser, TEST_URL);
+
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.firefox-view.search.enabled", true]],
+  });
+  await openFirefoxViewTab(window).then(async viewTab => {
+    const browser = viewTab.linkedBrowser;
+    await navigateToOpenTabs(browser);
+    const openTabs = getOpenTabsComponent(browser);
+    await openTabs.updateComplete;
+
+    const cards = getOpenTabsCards(openTabs);
+    is(cards.length, 2, "There are two windows.");
+    const winTabs = await getTabRowsForCard(cards[0]);
+    const newWinTabs = await getTabRowsForCard(cards[1]);
+
+    info("Input a search query.");
+    EventUtils.synthesizeMouseAtCenter(openTabs.searchTextbox, {}, content);
+    EventUtils.sendString(TEST_URL, content);
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === 0,
+      "There are no matching search results in the original window."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === 1,
+      "There is one matching search result in the new window."
+    );
+
+    info("Clear the search query.");
+    EventUtils.synthesizeMouseAtCenter(
+      openTabs.searchTextbox.clearButton,
+      {},
+      content
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
+      "The original window's list is restored."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
+      "The new window's list is restored."
+    );
+    openTabs.searchTextbox.blur();
+
+    info("Input a search query with keyboard.");
+    EventUtils.synthesizeKey("f", { accelKey: true }, content);
+    EventUtils.sendString(TEST_URL, content);
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === 0,
+      "There are no matching search results in the original window."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === 1,
+      "There is one matching search result in the new window."
+    );
+
+    info("Clear the search query with keyboard.");
+    is(
+      openTabs.shadowRoot.activeElement,
+      openTabs.searchTextbox,
+      "Search input is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Tab", {}, content);
+    ok(
+      openTabs.searchTextbox.clearButton.matches(":focus-visible"),
+      "Clear Search button is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Enter", {}, content);
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
+      "The original window's list is restored."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
+      "The new window's list is restored."
+    );
+  });
+
+  await SpecialPowers.popPrefEnv();
+  await cleanup();
+});
+
+add_task(async function search_open_tabs_recent_browsing() {
+  const NUMBER_OF_TABS = 6;
+  const win2 = await BrowserTestUtils.openNewBrowserWindow();
+  await switchToWindow(win2);
+  await NonPrivateTabs.readyWindowsPromise;
+
+  for (let i = 0; i < NUMBER_OF_TABS; i++) {
+    await BrowserTestUtils.openNewForegroundTab(win2.gBrowser, TEST_URL);
+  }
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.firefox-view.search.enabled", true]],
+  });
+  await openFirefoxViewTab(window).then(async viewTab => {
+    const browser = viewTab.linkedBrowser;
+    await navigateToViewAndWait(browser.contentDocument, "recentbrowsing");
+    const recentBrowsing = browser.contentDocument.querySelector(
+      "view-recentbrowsing"
+    );
+
+    info("Input a search query.");
+    EventUtils.synthesizeMouseAtCenter(
+      recentBrowsing.searchTextbox,
+      {},
+      content
+    );
+    EventUtils.sendString(TEST_URL, content);
+    const slot = recentBrowsing.querySelector("[slot='opentabs']");
+    await TestUtils.waitForCondition(
+      () => slot.viewCards[0].tabList.rowEls.length === 5,
+      "Not all search results are shown yet."
+    );
+
+    info("Click the Show All link.");
+    const showAllLink = await TestUtils.waitForCondition(() => {
+      const elt = slot.viewCards[0].shadowRoot.querySelector(
+        "[data-l10n-id='firefoxview-show-all']"
+      );
+      EventUtils.synthesizeMouseAtCenter(elt, {}, content);
+      if (slot.viewCards[0].tabList.rowEls.length === NUMBER_OF_TABS) {
+        return elt;
+      }
+      return false;
+    }, "All search results are shown.");
+    is(showAllLink.role, "link", "The show all control is a link.");
+    ok(BrowserTestUtils.isHidden(showAllLink), "The show all link is hidden.");
+  });
+  await SpecialPowers.popPrefEnv();
+  await cleanup();
+});
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_tab_indicators.js b/browser/components/firefoxview/tests/browser/browser_opentabs_tab_indicators.js
index 1375052125..78fab976ed 100644
--- a/browser/components/firefoxview/tests/browser/browser_opentabs_tab_indicators.js
+++ b/browser/components/firefoxview/tests/browser/browser_opentabs_tab_indicators.js
@@ -1,9 +1,7 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-const { NonPrivateTabs } = ChromeUtils.importESModule(
-  "resource:///modules/OpenTabs.sys.mjs"
-);
+requestLongerTimeout(2);
 
 let pageWithAlert =
   // eslint-disable-next-line @microsoft/sdl/no-insecure-url
@@ -11,18 +9,12 @@ let pageWithAlert =
 let pageWithSound =
   "http://mochi.test:8888/browser/dom/base/test/file_audioLoop.html";
 
-function cleanup() {
-  // Cleanup
-  while (gBrowser.tabs.length > 1) {
-    BrowserTestUtils.removeTab(gBrowser.tabs[0]);
-  }
-}
-
 add_task(async function test_notification_dot_indicator() {
+  clearHistory();
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
     let win = browser.ownerGlobal;
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
     // load page that opens prompt when page is hidden
     let openedTab = await BrowserTestUtils.openNewForegroundTab(
       gBrowser,
@@ -47,9 +39,10 @@ add_task(async function test_notification_dot_indicator() {
     await tabChangeRaised;
     await openTabs.updateComplete;
 
-    await TestUtils.waitForCondition(
-      () => openTabs.viewCards[0].tabList.rowEls[1].attention,
-      "The opened tab doesn't have the attention property, so no notification dot is shown."
+    await TestUtils.waitForCondition(() =>
+      Array.from(openTabs.viewCards[0].tabList.rowEls).some(rowEl => {
+        return rowEl.indicators.includes("attention");
+      })
     );
 
     info("The newly opened tab has a notification dot.");
@@ -58,11 +51,12 @@ add_task(async function test_notification_dot_indicator() {
     await BrowserTestUtils.switchTab(gBrowser, openedTab);
     EventUtils.synthesizeKey("KEY_Enter", {}, win);
 
-    cleanup();
+    cleanupTabs();
   });
 });
 
 add_task(async function test_container_indicator() {
+  clearHistory();
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
     let win = browser.ownerGlobal;
@@ -79,7 +73,7 @@ add_task(async function test_container_indicator() {
       URLs[0]
     );
 
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
 
     let openTabs = document.querySelector("view-opentabs[name=opentabs]");
 
@@ -95,10 +89,14 @@ add_task(async function test_container_indicator() {
     );
     info("openTabs component has finished updating.");
 
-    let containerTabElem = openTabs.viewCards[0].tabList.rowEls[1];
+    let containerTabElem;
 
     await TestUtils.waitForCondition(
-      () => containerTabElem.containerObj,
+      () =>
+        Array.from(openTabs.viewCards[0].tabList.rowEls).some(rowEl => {
+          containerTabElem = rowEl;
+          return rowEl.containerObj;
+        }),
       "The container tab element isn't marked in Fx View."
     );
 
@@ -111,14 +109,15 @@ add_task(async function test_container_indicator() {
 
     info("The newly opened tab is marked as a container tab.");
 
-    cleanup();
+    cleanupTabs();
   });
 });
 
 add_task(async function test_sound_playing_muted_indicator() {
+  clearHistory();
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "opentabs");
+    await navigateToViewAndWait(document, "opentabs");
 
     // Load a page in a container tab
     let soundTab = await BrowserTestUtils.openNewForegroundTab(
@@ -146,9 +145,13 @@ add_task(async function test_sound_playing_muted_indicator() {
       "The tab list hasn't rendered."
     );
 
-    let soundPlayingTabElem = openTabs.viewCards[0].tabList.rowEls[1];
-
-    await TestUtils.waitForCondition(() => soundPlayingTabElem.soundPlaying);
+    let soundPlayingTabElem;
+    await TestUtils.waitForCondition(() =>
+      Array.from(openTabs.viewCards[0].tabList.rowEls).some(rowEl => {
+        soundPlayingTabElem = rowEl;
+        return rowEl.indicators.includes("soundplaying");
+      })
+    );
 
     ok(
       soundPlayingTabElem.mediaButtonEl,
@@ -174,7 +177,9 @@ add_task(async function test_sound_playing_muted_indicator() {
     await tabChangeRaised;
     await openTabs.updateComplete;
 
-    await TestUtils.waitForCondition(() => soundPlayingTabElem.muted);
+    await TestUtils.waitForCondition(() =>
+      soundPlayingTabElem.indicators.includes("muted")
+    );
 
     ok(
       soundPlayingTabElem.mediaButtonEl,
@@ -185,7 +190,9 @@ add_task(async function test_sound_playing_muted_indicator() {
     soundTab.toggleMuteAudio();
     await tabChangeRaised;
     await openTabs.updateComplete;
-    await TestUtils.waitForCondition(() => soundPlayingTabElem.soundPlaying);
+    await TestUtils.waitForCondition(() =>
+      soundPlayingTabElem.indicators.includes("soundplaying")
+    );
 
     ok(
       soundPlayingTabElem.mediaButtonEl,
@@ -195,13 +202,80 @@ add_task(async function test_sound_playing_muted_indicator() {
     soundTab.toggleMuteAudio();
     await tabChangeRaised;
     await openTabs.updateComplete;
-    await TestUtils.waitForCondition(() => soundPlayingTabElem.muted);
+    await TestUtils.waitForCondition(() =>
+      soundPlayingTabElem.indicators.includes("muted")
+    );
 
     ok(
       soundPlayingTabElem.mediaButtonEl,
       "The tab has the unmute button showing."
     );
 
-    cleanup();
+    cleanupTabs();
+  });
+});
+
+add_task(async function test_bookmark_indicator() {
+  const tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, URLs[0]);
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "opentabs");
+    const openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    setSortOption(openTabs, "recency");
+    let rowEl = await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0]?.tabList.rowEls[0]
+    );
+
+    info("Bookmark a tab while Firefox View is active.");
+    let bookmark = await PlacesUtils.bookmarks.insert({
+      parentGuid: PlacesUtils.bookmarks.toolbarGuid,
+      url: URLs[0],
+    });
+    await TestUtils.waitForCondition(
+      () => rowEl.shadowRoot.querySelector(".bookmark"),
+      "Tab shows the bookmark star."
+    );
+    await PlacesUtils.bookmarks.update({
+      guid: bookmark.guid,
+      url: URLs[1],
+    });
+    await TestUtils.waitForCondition(
+      () => !rowEl.shadowRoot.querySelector(".bookmark"),
+      "The bookmark star is removed."
+    );
+    bookmark = await PlacesUtils.bookmarks.insert({
+      parentGuid: PlacesUtils.bookmarks.toolbarGuid,
+      url: URLs[0],
+    });
+    await TestUtils.waitForCondition(
+      () => rowEl.shadowRoot.querySelector(".bookmark"),
+      "The bookmark star is restored."
+    );
+    await PlacesUtils.bookmarks.remove(bookmark.guid);
+    await TestUtils.waitForCondition(
+      () => !rowEl.shadowRoot.querySelector(".bookmark"),
+      "The bookmark star is removed again."
+    );
+
+    info("Bookmark a tab while Firefox View is inactive.");
+    await BrowserTestUtils.switchTab(gBrowser, tab);
+    bookmark = await PlacesUtils.bookmarks.insert({
+      parentGuid: PlacesUtils.bookmarks.toolbarGuid,
+      url: URLs[0],
+    });
+    await switchToFxViewTab();
+    await TestUtils.waitForCondition(
+      () => rowEl.shadowRoot.querySelector(".bookmark"),
+      "Tab shows the bookmark star."
+    );
+    await BrowserTestUtils.switchTab(gBrowser, tab);
+    await PlacesUtils.bookmarks.remove(bookmark.guid);
+    await switchToFxViewTab();
+    await TestUtils.waitForCondition(
+      () => !rowEl.shadowRoot.querySelector(".bookmark"),
+      "The bookmark star is removed."
+    );
   });
+  await cleanupTabs();
+  await PlacesUtils.bookmarks.eraseEverything();
 });
diff --git a/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js
index 313d86416e..fcfcf20562 100644
--- a/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js
@@ -196,7 +196,7 @@ add_task(async function test_initial_closed_tab() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
     is(document.location.href, getFirefoxViewURL());
-    await navigateToCategoryAndWait(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     let { cleanup } = await prepareSingleClosedTab();
     await switchToFxViewTab(window);
     let [listItems] = await waitForRecentlyClosedTabsList(document);
@@ -220,7 +220,7 @@ add_task(async function test_list_ordering() {
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
     await clearAllParentTelemetryEvents();
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     let [cardMainSlotNode, listItems] = await waitForRecentlyClosedTabsList(
       document
     );
@@ -248,7 +248,7 @@ add_task(async function test_list_updates() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
 
     let [listElem, listItems] = await waitForRecentlyClosedTabsList(document);
     Assert.deepEqual(
@@ -321,7 +321,7 @@ add_task(async function test_restore_tab() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
 
     let [listElem, listItems] = await waitForRecentlyClosedTabsList(document);
     Assert.deepEqual(
@@ -365,7 +365,7 @@ add_task(async function test_dismiss_tab() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
 
     let [listElem, listItems] = await waitForRecentlyClosedTabsList(document);
     await clearAllParentTelemetryEvents();
@@ -429,7 +429,7 @@ add_task(async function test_empty_states() {
     const { document } = browser.contentWindow;
     is(document.location.href, "about:firefoxview");
 
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     let recentlyClosedComponent = document.querySelector(
       "view-recentlyclosed:not([slot=recentlyclosed])"
     );
@@ -479,7 +479,7 @@ add_task(async function test_observers_removed_when_view_is_hidden() {
 
   await withFirefoxView({}, async function (browser) {
     const { document } = browser.contentWindow;
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     const [listElem] = await waitForRecentlyClosedTabsList(document);
     is(listElem.rowEls.length, 1);
 
@@ -510,7 +510,7 @@ add_task(async function test_search() {
   let { cleanup, expectedURLs } = await prepareClosedTabs();
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    navigateToCategory(document, "recentlyclosed");
+    await navigateToViewAndWait(document, "recentlyclosed");
     const [listElem] = await waitForRecentlyClosedTabsList(document);
     const recentlyClosedComponent = document.querySelector(
       "view-recentlyclosed:not([slot=recentlyclosed])"
@@ -569,7 +569,7 @@ add_task(async function test_search_recent_browsing() {
     const { document } = browser.contentWindow;
 
     info("Input a search query.");
-    await navigateToCategoryAndWait(document, "recentbrowsing");
+    await navigateToViewAndWait(document, "recentbrowsing");
     const recentBrowsing = document.querySelector("view-recentbrowsing");
     EventUtils.synthesizeMouseAtCenter(
       recentBrowsing.searchTextbox,
diff --git a/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js
index 15dba68551..86e4d9cdee 100644
--- a/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js
@@ -56,7 +56,7 @@ add_task(async function test_network_offline() {
   sandbox.spy(TabsSetupFlowManager, "tryToClearError");
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
 
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
     Services.obs.notifyObservers(
@@ -112,7 +112,7 @@ add_task(async function test_sync_error() {
   const sandbox = await setupWithDesktopDevices();
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
 
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
     Services.obs.notifyObservers(null, "weave:service:sync:error");
diff --git a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js
index 8a3c63985b..11f135cd52 100644
--- a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js
+++ b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js
@@ -29,7 +29,7 @@ add_task(async function test_unconfigured_initial_state() {
   });
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -85,7 +85,7 @@ add_task(async function test_signed_in() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -148,7 +148,7 @@ add_task(async function test_no_synced_tabs() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -188,7 +188,7 @@ add_task(async function test_no_error_for_two_desktop() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -232,7 +232,7 @@ add_task(async function test_empty_state() {
 
   await withFirefoxView({ openNewWindow: true }, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -277,7 +277,7 @@ add_task(async function test_tabs() {
 
   await withFirefoxView({ openNewWindow: true }, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -365,7 +365,7 @@ add_task(async function test_empty_desktop_same_name() {
 
   await withFirefoxView({ openNewWindow: true }, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -413,7 +413,7 @@ add_task(async function test_empty_desktop_same_name_three() {
 
   await withFirefoxView({ openNewWindow: true }, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -459,7 +459,7 @@ add_task(async function search_synced_tabs() {
 
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "syncedtabs");
+    await navigateToViewAndWait(document, "syncedtabs");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     let syncedTabsComponent = document.querySelector(
@@ -666,7 +666,7 @@ add_task(async function search_synced_tabs_recent_browsing() {
   });
   await withFirefoxView({}, async browser => {
     const { document } = browser.contentWindow;
-    await navigateToCategoryAndWait(document, "recentbrowsing");
+    await navigateToViewAndWait(document, "recentbrowsing");
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
     const recentBrowsing = document.querySelector("view-recentbrowsing");
diff --git a/browser/components/firefoxview/tests/browser/browser_tab_list_keyboard_navigation.js b/browser/components/firefoxview/tests/browser/browser_tab_list_keyboard_navigation.js
new file mode 100644
index 0000000000..d83c1056e0
--- /dev/null
+++ b/browser/components/firefoxview/tests/browser/browser_tab_list_keyboard_navigation.js
@@ -0,0 +1,334 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function test_open_tab_row_navigation() {
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win = browser.ownerGlobal;
+
+    await navigateToViewAndWait(document, "opentabs");
+    const openTabs = document.querySelector("view-opentabs[name=opentabs]");
+
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList?.rowEls.length === 1,
+      "The tab list hasn't rendered"
+    );
+
+    // Focus tab row
+    let tabRow = openTabs.viewCards[0].tabList.rowEls[0];
+    let tabRowFocused = BrowserTestUtils.waitForEvent(tabRow, "focus", win);
+    tabRow.focus();
+    await tabRowFocused;
+    info("The tab row main element has focus.");
+
+    // Navigate right to context menu button
+    let secondaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.secondaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await secondaryButtonFocused;
+    info("The context menu button has focus.");
+
+    // Navigate right to close button
+    let tertiaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.tertiaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await tertiaryButtonFocused;
+    info("The close button has focus");
+
+    // Navigate left to context menu button
+    secondaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.secondaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    await secondaryButtonFocused;
+    info("The context menu button has focus.");
+
+    // Navigate left to tab row main element
+    tabRowFocused = BrowserTestUtils.waitForEvent(tabRow.mainEl, "focus", win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    await tabRowFocused;
+    info("The tab row main element has focus.");
+  });
+
+  cleanupTabs();
+});
+
+add_task(async function test_focus_moves_after_unmute() {
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win = browser.ownerGlobal;
+    await navigateToViewAndWait(document, "opentabs");
+    let openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await openTabs.updateComplete;
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length,
+      "The tab list has rendered."
+    );
+    await openTabs.openTabsTarget.readyWindowsPromise;
+    let card = openTabs.viewCards[0];
+    let openTabEl = card.tabList.rowEls[0];
+    let tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+
+    // Mute tab
+    openTabEl.muteOrUnmuteTab();
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let mutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(
+      () => mutedTab.indicators.includes("muted"),
+      "The tab has been muted."
+    );
+
+    // Unmute using keyboard
+    card.tabList.currentActiveElementId = mutedTab.focusMediaButton();
+    isActiveElement(mutedTab.mediaButtonEl);
+    info("The media button has focus.");
+
+    tabChangeRaised = BrowserTestUtils.waitForEvent(
+      NonPrivateTabs,
+      "TabChange"
+    );
+    EventUtils.synthesizeKey("KEY_Enter", {}, win);
+
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    let unmutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(
+      () => !unmutedTab.indicators.includes("muted"),
+      "The tab is no longer muted."
+    );
+    isActiveElement(unmutedTab.secondaryButtonEl);
+    info(
+      "Focus should be on the tab's secondary button element after unmuting."
+    );
+
+    // Mute tab again and check that only Enter keys will toggle it
+    unmutedTab.muteOrUnmuteTab();
+    await TestUtils.waitForCondition(
+      () => mutedTab.indicators.includes("muted"),
+      "The tab has been muted."
+    );
+    mutedTab = card.tabList.rowEls[0];
+
+    card.tabList.currentActiveElementId = mutedTab.focusLink();
+    isActiveElement(mutedTab.mainEl);
+    info("The 'main' element has focus.");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    isActiveElement(mutedTab.mediaButtonEl);
+    info("The media button has focus.");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    isActiveElement(mutedTab.secondaryButtonEl);
+    info("The secondary/more button has focus.");
+
+    ok(
+      mutedTab.indicators.includes("muted"),
+      "The muted tab is still muted after arrowing past it."
+    );
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    isActiveElement(mutedTab.mediaButtonEl);
+    info("The media button has focus.");
+
+    EventUtils.synthesizeKey("KEY_Enter", {}, win);
+    await tabChangeRaised;
+    await openTabs.updateComplete;
+
+    unmutedTab = card.tabList.rowEls[0];
+    await TestUtils.waitForCondition(
+      () => !unmutedTab.indicators.includes("muted"),
+      "The tab is no longer muted."
+    );
+    isActiveElement(unmutedTab.secondaryButtonEl);
+    info(
+      "Focus should be on the tab's secondary button element after unmuting."
+    );
+  });
+
+  cleanupTabs();
+});
+
+add_task(async function test_open_tab_row_with_sound_navigation() {
+  const tabWithSound = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "http://mochi.test:8888/browser/dom/base/test/file_audioLoop.html",
+    true
+  );
+  const tabsUpdated = await BrowserTestUtils.waitForEvent(
+    NonPrivateTabs,
+    "TabChange"
+  );
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win = browser.ownerGlobal;
+
+    await navigateToViewAndWait(document, "opentabs");
+    const openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await TestUtils.waitForCondition(
+      () => tabWithSound.hasAttribute("soundplaying"),
+      "Tab is playing sound"
+    );
+    await tabsUpdated;
+    await openTabs.updateComplete;
+
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList?.rowEls.length === 2,
+      "The tab list has rendered."
+    );
+
+    // Focus tab row with sound playing
+    let tabRow;
+    for (const rowEl of openTabs.viewCards[0].tabList.rowEls) {
+      if (rowEl.indicators.includes("soundplaying")) {
+        tabRow = rowEl;
+        break;
+      }
+    }
+    ok(tabRow, "Found a tab row with sound playing.");
+    let tabRowFocused = BrowserTestUtils.waitForEvent(tabRow, "focus", win);
+    tabRow.focus();
+    await tabRowFocused;
+    info("The tab row main element has focus.");
+
+    // Navigate right to media button
+    let mediaButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.mediaButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await mediaButtonFocused;
+    info("The media button has focus.");
+
+    // Navigate right to context menu button
+    let secondaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.secondaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await secondaryButtonFocused;
+    info("The context menu button has focus.");
+
+    // Navigate right to close button
+    let tertiaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.tertiaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await tertiaryButtonFocused;
+    info("The close button has focus");
+
+    // Navigate left to context menuo button
+    secondaryButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.secondaryButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    await secondaryButtonFocused;
+    info("The context menu button has focus.");
+
+    // Navigate left to media button
+    mediaButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.mediaButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    await mediaButtonFocused;
+    info("The media button has focus.");
+
+    // Navigate left to main element of tab row
+    tabRowFocused = BrowserTestUtils.waitForEvent(tabRow.mainEl, "focus", win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    await tabRowFocused;
+    info("The tab row main element has focus.");
+  });
+
+  cleanupTabs();
+});
+
+add_task(async function test_open_tab_row_with_sound_mute_and_unmute() {
+  const tabWithSound = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "http://mochi.test:8888/browser/dom/base/test/file_audioLoop.html",
+    true
+  );
+  const tabsUpdated = await BrowserTestUtils.waitForEvent(
+    NonPrivateTabs,
+    "TabChange"
+  );
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    let win = browser.ownerGlobal;
+
+    await navigateToViewAndWait(document, "opentabs");
+    const openTabs = document.querySelector("view-opentabs[name=opentabs]");
+    await TestUtils.waitForCondition(
+      () => tabWithSound.hasAttribute("soundplaying"),
+      "Tab is playing sound"
+    );
+    await tabsUpdated;
+    await openTabs.updateComplete;
+
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList?.rowEls.length === 2,
+      "The tab list has rendered."
+    );
+
+    // Focus tab row with sound playing
+    let tabRow;
+    for (const rowEl of openTabs.viewCards[0].tabList.rowEls) {
+      if (rowEl.indicators.includes("soundplaying")) {
+        tabRow = rowEl;
+        break;
+      }
+    }
+    ok(tabRow, "Found a tab row with sound playing.");
+    let tabRowFocused = BrowserTestUtils.waitForEvent(tabRow, "focus", win);
+    tabRow.focus();
+    await tabRowFocused;
+    info("The tab row main element has focus.");
+
+    // Navigate right to media button
+    let mediaButtonFocused = BrowserTestUtils.waitForEvent(
+      tabRow.mediaButtonEl,
+      "focus",
+      win
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    await mediaButtonFocused;
+    info("The media button has focus.");
+
+    EventUtils.synthesizeKey("KEY_Enter", {}, win);
+    await TestUtils.waitForCondition(
+      () => tabRow.indicators.includes("muted"),
+      "Tab has been muted"
+    );
+
+    EventUtils.synthesizeKey("KEY_Enter", {}, win);
+    await TestUtils.waitForCondition(
+      () => tabRow.indicators.includes("soundplaying"),
+      "Tab has been unmuted"
+    );
+  });
+
+  cleanupTabs();
+});
diff --git a/browser/components/firefoxview/tests/browser/head.js b/browser/components/firefoxview/tests/browser/head.js
index b0b41b759d..302f19071c 100644
--- a/browser/components/firefoxview/tests/browser/head.js
+++ b/browser/components/firefoxview/tests/browser/head.js
@@ -3,6 +3,7 @@
 
 const {
   getFirefoxViewURL,
+  switchToWindow,
   withFirefoxView,
   assertFirefoxViewTab,
   assertFirefoxViewTabSelected,
@@ -31,6 +32,11 @@ const { FeatureCalloutMessages } = ChromeUtils.importESModule(
 const { TelemetryTestUtils } = ChromeUtils.importESModule(
   "resource://testing-common/TelemetryTestUtils.sys.mjs"
 );
+const { NonPrivateTabs } = ChromeUtils.importESModule(
+  "resource:///modules/OpenTabs.sys.mjs"
+);
+// shut down the open tabs module after each test so we don't get debounced events bleeding into the next
+registerCleanupFunction(() => NonPrivateTabs.stop());
 
 const triggeringPrincipal_base64 = E10SUtils.SERIALIZED_SYSTEMPRINCIPAL;
 const { SessionStoreTestUtils } = ChromeUtils.importESModule(
@@ -548,31 +554,19 @@ registerCleanupFunction(() => {
   gSandbox?.restore();
 });
 
-function navigateToCategory(document, category) {
-  const navigation = document.querySelector("fxview-category-navigation");
-  let navButton = Array.from(navigation.categoryButtons).filter(
-    categoryButton => {
-      return categoryButton.name === category;
-    }
-  )[0];
-  navButton.buttonEl.click();
-}
-
-async function navigateToCategoryAndWait(document, category) {
-  info(`navigateToCategoryAndWait, for ${category}`);
-  const navigation = document.querySelector("fxview-category-navigation");
+async function navigateToViewAndWait(document, view) {
+  info(`navigateToViewAndWait, for ${view}`);
+  const navigation = document.querySelector("moz-page-nav");
   const win = document.ownerGlobal;
   SimpleTest.promiseFocus(win);
-  let navButton = Array.from(navigation.categoryButtons).find(
-    categoryButton => {
-      return categoryButton.name === category;
-    }
-  );
+  let navButton = Array.from(navigation.pageNavButtons).find(pageNavButton => {
+    return pageNavButton.view === view;
+  });
   const namedDeck = document.querySelector("named-deck");
 
   await BrowserTestUtils.waitForCondition(
     () => navButton.getBoundingClientRect().height,
-    `Waiting for ${category} button to be clickable`
+    `Waiting for ${view} button to be clickable`
   );
 
   EventUtils.synthesizeMouseAtCenter(navButton, {}, win);
@@ -582,10 +576,10 @@ async function navigateToCategoryAndWait(document, category) {
       child => child.slot == "selected"
     );
     return (
-      namedDeck.selectedViewName == category &&
+      namedDeck.selectedViewName == view &&
       selectedView?.getBoundingClientRect().height
     );
-  }, `Waiting for ${category} to be visible`);
+  }, `Waiting for ${view} to be visible`);
 }
 
 /**
@@ -597,6 +591,7 @@ async function navigateToCategoryAndWait(document, category) {
  *   The tab switched to.
  */
 async function switchToFxViewTab(win = window) {
+  await switchToWindow(win);
   return BrowserTestUtils.switchTab(win.gBrowser, win.FirefoxViewHandler.tab);
 }
 
@@ -657,10 +652,32 @@ function setSortOption(component, value) {
   EventUtils.synthesizeMouseAtCenter(el, {}, el.ownerGlobal);
 }
 
+/**
+ * Select the Open Tabs view-page in the Firefox View tab.
+ */
+async function navigateToOpenTabs(browser) {
+  const document = browser.contentDocument;
+  if (document.querySelector("named-deck").selectedViewName != "opentabs") {
+    await navigateToViewAndWait(browser.contentDocument, "opentabs");
+  }
+}
+
 function getOpenTabsCards(openTabs) {
   return openTabs.shadowRoot.querySelectorAll("view-opentabs-card");
 }
 
+function getOpenTabsComponent(browser) {
+  return browser.contentDocument.querySelector("named-deck > view-opentabs");
+}
+
+async function getTabRowsForCard(card) {
+  await TestUtils.waitForCondition(
+    () => card.tabList.rowEls.length,
+    "Wait for the card's tab list to have rows"
+  );
+  return card.tabList.rowEls;
+}
+
 async function click_recently_closed_tab_item(itemElem, itemProperty = "") {
   // Make sure the firefoxview tab still has focus
   is(
@@ -675,7 +692,7 @@ async function click_recently_closed_tab_item(itemElem, itemProperty = "") {
   let clickTarget;
   switch (itemProperty) {
     case "dismiss":
-      clickTarget = itemElem.buttonEl;
+      clickTarget = itemElem.secondaryButtonEl;
       break;
     default:
       clickTarget = itemElem.mainEl;
@@ -706,3 +723,25 @@ async function waitForRecentlyClosedTabsList(doc) {
   });
   return [cardMainSlotNode, cardMainSlotNode.rowEls];
 }
+
+async function add_new_tab(URL) {
+  let tabChangeRaised = BrowserTestUtils.waitForEvent(
+    NonPrivateTabs,
+    "TabChange"
+  );
+  let tab = BrowserTestUtils.addTab(gBrowser, URL);
+  // wait so we can reliably compare the tab URL
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  await tabChangeRaised;
+  return tab;
+}
+
+function isActiveElement(expectedLinkEl) {
+  return expectedLinkEl.getRootNode().activeElement == expectedLinkEl;
+}
+
+function cleanupTabs() {
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs[0]);
+  }
+}
diff --git a/browser/components/firefoxview/tests/chrome/chrome.toml b/browser/components/firefoxview/tests/chrome/chrome.toml
index b1677430b2..3edeefd4a9 100644
--- a/browser/components/firefoxview/tests/chrome/chrome.toml
+++ b/browser/components/firefoxview/tests/chrome/chrome.toml
@@ -2,6 +2,4 @@
 
 ["test_card_container.html"]
 
-["test_fxview_category_navigation.html"]
-
 ["test_fxview_tab_list.html"]
diff --git a/browser/components/firefoxview/tests/chrome/test_fxview_category_navigation.html b/browser/components/firefoxview/tests/chrome/test_fxview_category_navigation.html
deleted file mode 100644
index 0ea0a94baf..0000000000
--- a/browser/components/firefoxview/tests/chrome/test_fxview_category_navigation.html
+++ /dev/null
@@ -1,322 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>FxviewCategoryNavigation Tests</title>
-  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
-  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
-  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
-  <script type="module" src="chrome://browser/content/firefoxview/fxview-category-navigation.mjs"></script>
-</head>
-<style>
-body {
-  display: flex;
-}
-#navigation {
-  width: var(--in-content-sidebar-width);
-}
-fxview-category-button[name="category-one"]::part(icon) {
-  background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
-}
-fxview-category-button[name="category-two"]::part(icon) {
-  background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
-}
-fxview-category-button[name="category-three"]::part(icon) {
-  background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
-}
-fxview-category-button[name="category-four"]::part(icon) {
-  background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
-}
-fxview-category-button[name="category-five"]::part(icon) {
-  background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
-}
-</style>
-<body>
-  <p id="display"></p>
-  <div id="content">
-    <div id="navigation">
-      <fxview-category-navigation>
-        <h2 slot="category-nav-header">Header</h2>
-        <fxview-category-button class="category" slot="category-button" name="category-one">
-          <span class="category-name">Category 1</span>
-        </fxview-category-button>
-        <fxview-category-button class="category" slot="category-button" name="category-two">
-          <span class="category-name">Category 2</span>
-        </fxview-category-button>
-        <fxview-category-button class="category" slot="category-button" name="category-three">
-          <span class="category-name">Category 3</span>
-        </fxview-category-button>
-        <fxview-category-button class="category" slot="category-button" name="category-four">
-          <span class="category-name">Category 4</span>
-        </fxview-category-button>
-        <fxview-category-button class="category" slot="category-button" name="category-five">
-          <span class="category-name">Category 5</span>
-        </fxview-category-button>
-      </fxview-category-navigation>
-    </div>
-  </div>
-<pre id="test"></pre>
-<script>
-  Services.scriptloader.loadSubScript(
-    "chrome://browser/content/utilityOverlay.js",
-    this
-  );
-  const { BrowserTestUtils } = ChromeUtils.importESModule(
-    "resource://testing-common/BrowserTestUtils.sys.mjs"
-  );
-
-const fxviewCategoryNav = document.querySelector("fxview-category-navigation");
-
-function isActiveElement(expectedActiveEl) {
-    return expectedActiveEl.getRootNode().activeElement == expectedActiveEl;
-  }
-
-  /**
-  * Tests that the first category is selected by default
-  */
-  add_task(async function test_first_item_selected_by_default() {
-    is(
-      fxviewCategoryNav.categoryButtons.length,
-      5,
-      "Five category buttons are in the navigation"
-    );
-
-    ok(
-      fxviewCategoryNav.categoryButtons[0].name === fxviewCategoryNav.currentCategory,
-      "The first category button is selected by default"
-    )
-  });
-
-  /**
-  * Tests that categories are selected when clicked
-  */
-  add_task(async function test_select_category() {
-    let gBrowser = BrowserWindowTracker.getTopWindow().top.gBrowser;
-    let secondCategory = fxviewCategoryNav.categoryButtons[1];
-    let categoryChanged = BrowserTestUtils.waitForEvent(
-      gBrowser,
-      "change-category"
-    );
-
-    secondCategory.buttonEl.click();
-    await categoryChanged;
-
-    ok(
-      secondCategory.name === fxviewCategoryNav.currentCategory,
-      "The second category button is selected"
-    )
-
-    let thirdCategory = fxviewCategoryNav.categoryButtons[2];
-    categoryChanged = BrowserTestUtils.waitForEvent(
-      gBrowser,
-      "change-category"
-    );
-
-    thirdCategory.buttonEl.click();
-    await categoryChanged;
-
-    ok(
-      thirdCategory.name === fxviewCategoryNav.currentCategory,
-      "The third category button is selected"
-    )
-
-    let firstCategory = fxviewCategoryNav.categoryButtons[0];
-    categoryChanged = BrowserTestUtils.waitForEvent(
-      gBrowser,
-      "change-category"
-    );
-
-    firstCategory.buttonEl.click();
-    await categoryChanged;
-
-    ok(
-      firstCategory.name === fxviewCategoryNav.currentCategory,
-      "The first category button is selected"
-    )
-  });
-
-  /**
-  * Tests that categories are keyboard-navigable
-  */
-  add_task(async function test_keyboard_navigation() {
-    const arrowDown = async () => {
-      info("Arrow down");
-      synthesizeKey("KEY_ArrowDown", {});
-      await fxviewCategoryNav.getUpdateComplete();
-    };
-    const arrowUp = async () => {
-      info("Arrow up");
-      synthesizeKey("KEY_ArrowUp", {});
-      await fxviewCategoryNav.getUpdateComplete();
-    };
-    const arrowLeft = async () => {
-      info("Arrow left");
-      synthesizeKey("KEY_ArrowLeft", {});
-      await fxviewCategoryNav.getUpdateComplete();
-    };
-    const arrowRight = async () => {
-      info("Arrow right");
-      synthesizeKey("KEY_ArrowRight", {});
-      await fxviewCategoryNav.getUpdateComplete();
-    };
-
-     // Setting this pref allows the test to run as expected with a keyboard on MacOS
-     await SpecialPowers.pushPrefEnv({
-      set: [["accessibility.tabfocus", 7]],
-    });
-
-    let firstCategory = fxviewCategoryNav.categoryButtons[0];
-    let secondCategory = fxviewCategoryNav.categoryButtons[1];
-    let thirdCategory = fxviewCategoryNav.categoryButtons[2];
-    let fourthCategory = fxviewCategoryNav.categoryButtons[3];
-    let fifthCategory = fxviewCategoryNav.categoryButtons[4];
-
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is selected"
-    )
-    firstCategory.focus();
-    await arrowDown();
-    ok(
-      isActiveElement(secondCategory),
-      "The second category button is the active element after first arrow down"
-    );
-    is(
-      secondCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The second category button is selected"
-    )
-    await arrowDown();
-    is(
-      thirdCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The third category button is selected"
-    )
-    await arrowDown();
-    is(
-      fourthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fourth category button is selected"
-    )
-    await arrowDown();
-    is(
-      fifthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fifth category button is selected"
-    )
-    await arrowDown();
-    is(
-      fifthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fifth category button is still selected"
-    )
-    await arrowUp();
-    is(
-      fourthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fourth category button is selected"
-    )
-    await arrowUp();
-    is(
-      thirdCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The third category button is selected"
-    )
-    await arrowUp();
-    is(
-      secondCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The second category button is selected"
-    )
-    await arrowUp();
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is selected"
-    )
-    await arrowUp();
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is still selected"
-    )
-
-    // Test navigation with arrow left/right keys
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is selected"
-    )
-    firstCategory.focus();
-    await arrowRight();
-    ok(
-      isActiveElement(secondCategory),
-      "The second category button is the active element after first arrow right"
-    );
-    is(
-      secondCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The second category button is selected"
-    )
-    await arrowRight();
-    is(
-      thirdCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The third category button is selected"
-    )
-    await arrowRight();
-    is(
-      fourthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fourth category button is selected"
-    )
-    await arrowRight();
-    is(
-      fifthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fifth category button is selected"
-    )
-    await arrowRight();
-    is(
-      fifthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fifth category button is still selected"
-    )
-    await arrowLeft();
-    is(
-      fourthCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The fourth category button is selected"
-    )
-    await arrowLeft();
-    is(
-      thirdCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The third category button is selected"
-    )
-    await arrowLeft();
-    is(
-      secondCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The second category button is selected"
-    )
-    await arrowLeft();
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is selected"
-    )
-    await arrowLeft();
-    is(
-      firstCategory.name,
-      fxviewCategoryNav.currentCategory,
-      "The first category button is still selected"
-    )
-
-    await SpecialPowers.popPrefEnv();
-  });
-</script>
-</body>
-</html>
diff --git a/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html b/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html
index 22f04acab2..e48f776592 100644
--- a/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html
+++ b/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html
@@ -308,12 +308,12 @@
     );
     await arrowRight();
     ok(
-      isActiveElement(tabItems[0].buttonEl),
+      isActiveElement(tabItems[0].secondaryButtonEl),
       "Focus should be on the first row's context menu button element of the list"
     );
     await arrowDown();
     ok(
-      isActiveElement(tabItems[1].buttonEl),
+      isActiveElement(tabItems[1].secondaryButtonEl),
       "Focus should be on the second row's context menu button element of the list"
     );
     await arrowLeft();
diff --git a/browser/components/firefoxview/viewpage.mjs b/browser/components/firefoxview/viewpage.mjs
index fee02b49d6..83b04faf5d 100644
--- a/browser/components/firefoxview/viewpage.mjs
+++ b/browser/components/firefoxview/viewpage.mjs
@@ -131,7 +131,7 @@ export class ViewPage extends ViewPageContent {
     super();
     this.selectedTab = false;
     this.recentBrowsing = Boolean(this.recentBrowsingElement);
-    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.onTabSelect = this.onTabSelect.bind(this);
     this.onResize = this.onResize.bind(this);
   }
 
@@ -148,14 +148,17 @@ export class ViewPage extends ViewPageContent {
     this.windowResizeTask?.arm();
   }
 
-  onVisibilityChange(event) {
-    if (this.isVisible) {
+  onTabSelect({ target }) {
+    const win = target.ownerGlobal;
+
+    let selfBrowser = window.docShell?.chromeEventHandler;
+    const { gBrowser } = this.getWindow();
+    let isForegroundTab = gBrowser.selectedBrowser == selfBrowser;
+
+    if (win.FirefoxViewHandler.tab?.selected && isForegroundTab) {
       this.paused = false;
       this.viewVisibleCallback();
-    } else if (
-      this.ownerViewPage.selectedTab &&
-      this.ownerDocument.visibilityState == "hidden"
-    ) {
+    } else {
       this.paused = true;
       this.viewHiddenCallback();
     }
@@ -163,19 +166,12 @@ export class ViewPage extends ViewPageContent {
 
   connectedCallback() {
     super.connectedCallback();
-    this.ownerDocument.addEventListener(
-      "visibilitychange",
-      this.onVisibilityChange
-    );
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.ownerDocument.removeEventListener(
-      "visibilitychange",
-      this.onVisibilityChange
-    );
     this.getWindow().removeEventListener("resize", this.onResize);
+    this.getWindow().removeEventListener("TabSelect", this.onTabSelect);
   }
 
   updateAllVirtualLists() {
@@ -246,6 +242,7 @@ export class ViewPage extends ViewPageContent {
       this.paused = false;
       this.viewVisibleCallback();
       this.getWindow().addEventListener("resize", this.onResize);
+      this.getWindow().addEventListener("TabSelect", this.onTabSelect);
     }
   }
 
@@ -257,5 +254,6 @@ export class ViewPage extends ViewPageContent {
       this.windowResizeTask?.finalize();
     }
     this.getWindow().removeEventListener("resize", this.onResize);
+    this.getWindow().removeEventListener("TabSelect", this.onTabSelect);
   }
 }