Backed out changeset 2ca3d042a78d (bug 1801204) for causing multiple bc failures.

browser/components/firefoxview/firefoxview.css

@@ -628,20 +628,18 @@ details[open] > .page-section-header > .twisty {
 }
 
 @media (prefers-contrast) {
-  .closed-tab-li-main,
+  span.closed-tab-li-main,
-  .closed-tab-li-dismiss {
+  button.closed-tab-li-dismiss {
     color: ButtonText;
     border-radius: 4px;
     border: 1px solid ButtonText;
   }
 }
 
-@media not (prefers-contrast) {
 .closed-tab-li-main:hover {
   background-color: var(--fxview-element-background-hover);
   color: var(--fxview-text-color-hover);
 }
-   }
 
 .closed-tab-li-main:hover .closed-tab-li-title {
   text-decoration-line: underline;
@@ -696,26 +694,32 @@ details[open] > .page-section-header > .twisty {
   fill: var(--in-content-button-text-color-hover);
 }
 
-.tab-link,
+.synced-tab-a,
-.tab-link:hover,
+.synced-tab-a:hover,
-.tab-link:active,
+.synced-tab-a:active,
-.tab-link:hover:active,
+.synced-tab-a:hover:active,
-.tab-link:visited {
+.synced-tab-a:visited {
   color: inherit;
   text-decoration: none;
+  height: 100%;
 }
 
 @media (prefers-contrast) {
-  .tab-link {
+  .synced-tab-a {
     border-color: FieldText;
   }
-  .tab-link,
+  .synced-tab-a,
-  .tab-link:hover,
+  .synced-tab-a:hover,
-  .tab-link:active,
+  .synced-tab-a:active,
-  .tab-link:hover:active,
+  .synced-tab-a:hover:active,
-  .tab-link:visited {
+  .synced-tab-a:visited {
     color: LinkText;
   }
+  .synced-tab-a:focus-visible {
+    box-shadow: none;
+    outline: var(--in-content-focus-outline);
+    outline-offset: var(--in-content-focus-outline-offset);
+  }
 }
 
 .closed-tab-li-url,
@@ -792,8 +796,7 @@ details[open] > .page-section-header > .twisty {
   grid-template-areas:
     "favicon title title title"
     "favicon domain domain domain"
-    "favicon device device time";
+    "favicon device device time"
-  height: 100%;
 }
 
 .synced-tab-a:hover {

browser/components/firefoxview/firefoxview.html

@@ -159,7 +159,16 @@
           <h2 class="section-description" data-l10n-id="firefoxview-closed-tabs-description2"></h2>
         </summary>
         <div id="collapsible-tabs-container" id="recently-closed-tabs" role="region" aria-labelledby="recently-closed-tabs-header">
-          <recently-closed-tabs-list></recently-closed-tabs-list>
+          <recently-closed-tabs-list>
+            <ol hidden="true" class="closed-tabs-list"></ol>
+          </recently-closed-tabs-list>
+          <div hidden="true" id="recently-closed-tabs-placeholder" class="placeholder-content">
+            <img id="recently-closed-empty-image" src="chrome://browser/content/recently-closed-empty.svg" role="presentation" alt=""/>
+            <div class="placeholder-text">
+              <h4 data-l10n-id="firefoxview-closed-tabs-placeholder-header" class="placeholder-header"></h4>
+              <p data-l10n-id="firefoxview-closed-tabs-placeholder-body" class="placeholder-body"></p>
+            </div>
+          </div>
         </div>
       </details>
     </main>

browser/components/firefoxview/helpers.mjs

@@ -46,8 +46,12 @@ export function convertTimestamp(
 }
 
 export function createFaviconElement(image, targetURI = "") {
+  const imageUrl = image
+    ? lazy.PlacesUIUtils.getImageURL(image)
+    : `page-icon:${targetURI}`;
   let favicon = document.createElement("div");
-  favicon.style.backgroundImage = `url('${getImageUrl(image, targetURI)}')`;
+
+  favicon.style.backgroundImage = `url('${imageUrl}')`;
   favicon.classList.add("favicon");
   return favicon;
 }

browser/components/firefoxview/recently-closed-tabs.mjs

@@ -10,18 +10,11 @@ ChromeUtils.defineESModuleGetters(lazy, {
 import {
   formatURIForDisplay,
   convertTimestamp,
-  getImageUrl,
+  createFaviconElement,
   onToggleContainer,
   NOW_THRESHOLD_MS,
 } from "./helpers.mjs";
 
-import {
-  html,
-  ifDefined,
-  styleMap,
-} from "chrome://global/content/vendor/lit.all.mjs";
-import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-
 const { XPCOMUtils } = ChromeUtils.importESModule(
   "resource://gre/modules/XPCOMUtils.sys.mjs"
 );
@@ -35,12 +28,11 @@ function getWindow() {
   return window.browsingContext.embedderWindowGlobal.browsingContext.window;
 }
 
-class RecentlyClosedTabsList extends MozLitElement {
+class RecentlyClosedTabsList extends HTMLElement {
   constructor() {
     super();
     this.maxTabsLength = 25;
-    this.recentlyClosedTabs = [];
+    this.closedTabsData = new Map();
-    this.lastFocusedIndex = -1;
 
     // The recency timestamp update period is stored in a pref to allow tests to easily change it
     XPCOMUtils.defineLazyPreferenceGetter(
@@ -52,15 +44,10 @@ class RecentlyClosedTabsList extends MozLitElement {
     );
   }
 
-  createRenderRoot() {
+  get tabsList() {
-    return this;
+    return this.querySelector("ol");
   }
 
-  static queries = {
-    tabsList: "ol",
-    timeElements: { all: "span.closed-tab-li-time" },
-  };
-
   get fluentStrings() {
     if (!this._fluentStrings) {
       this._fluentStrings = new Localization(["browser/firefoxView.ftl"], true);
@@ -68,8 +55,13 @@ class RecentlyClosedTabsList extends MozLitElement {
     return this._fluentStrings;
   }
 
+  get timeElements() {
+    return this.querySelectorAll("span.closed-tab-li-time");
+  }
+
   connectedCallback() {
-    super.connectedCallback();
+    this.addEventListener("click", this);
+    this.addEventListener("keydown", this);
     this.intervalID = setInterval(() => this.updateTime(), lazy.timeMsPref);
   }
 
@@ -77,6 +69,20 @@ class RecentlyClosedTabsList extends MozLitElement {
     clearInterval(this.intervalID);
   }
 
+  handleEvent(event) {
+    if (
+      (event.type == "click" && !event.altKey) ||
+      (event.type == "keydown" && event.keyCode == KeyEvent.DOM_VK_RETURN) ||
+      (event.type == "keydown" && event.keyCode == KeyEvent.DOM_VK_SPACE)
+    ) {
+      if (!event.target.classList.contains("closed-tab-li-dismiss")) {
+        this.openTabAndUpdate(event);
+      } else {
+        this.dismissTabAndUpdate(event);
+      }
+    }
+  }
+
   updateTime() {
     for (let timeEl of this.timeElements) {
       timeEl.textContent = convertTimestamp(
@@ -99,17 +105,44 @@ class RecentlyClosedTabsList extends MozLitElement {
     return value;
   }
 
+  focusFirstItemOrHeader(dismissedIndex) {
+    // When a tab is removed from the list, the focus should
+    // remain on the list or the list header. This prevents context
+    // switching when navigating back to Firefox View.
+    let recentlyClosedList = [...this.tabsList.children];
+    if (recentlyClosedList.length) {
+      recentlyClosedList.forEach(element =>
+        element.setAttribute("tabindex", "-1")
+      );
+      let mainContent;
+      if (dismissedIndex) {
+        // Select the item above the one that was just dismissed
+        mainContent = recentlyClosedList[dismissedIndex - 1].querySelector(
+          ".closed-tab-li-main"
+        );
+      } else {
+        mainContent = recentlyClosedList[0].querySelector(
+          ".closed-tab-li-main"
+        );
+      }
+      mainContent.setAttribute("tabindex", "0");
+      mainContent.focus();
+    } else {
+      document.getElementById("recently-closed-tabs-header-section").focus();
+    }
+  }
+
   openTabAndUpdate(event) {
     event.preventDefault();
-    if (event.type == "click" && event.altKey) {
-      return;
-    }
     const item = event.target.closest(".closed-tab-li");
     // only used for telemetry
     const position = [...this.tabsList.children].indexOf(item) + 1;
     const closedId = item.dataset.tabid;
 
     lazy.SessionStore.undoCloseById(closedId);
+    this.tabsList.removeChild(item);
+
+    this.focusFirstItemOrHeader();
 
     // record telemetry
     let tabClosedAt = parseInt(
@@ -141,8 +174,11 @@ class RecentlyClosedTabsList extends MozLitElement {
       // Tab not found in recently closed list
       return;
     }
+    this.tabsList.removeChild(item);
     lazy.SessionStore.forgetClosedTab(getWindow(), closedTabIndex);
 
+    this.focusFirstItemOrHeader(closedTabIndex);
+
     // record telemetry
     let tabClosedAt = parseInt(
       item.querySelector(".closed-tab-li-time").dataset.timestamp
@@ -161,145 +197,138 @@ class RecentlyClosedTabsList extends MozLitElement {
     );
   }
 
-  updateRecentlyClosedTabs() {
+  updateTabsList() {
-    let recentlyClosedTabsData = lazy.SessionStore.getClosedTabData(
+    let newClosedTabs = lazy.SessionStore.getClosedTabData(getWindow());
-      getWindow()
+    newClosedTabs = newClosedTabs.slice(0, this.maxTabsLength);
+
+    if (this.closedTabsData.size && !newClosedTabs.length) {
+      // if a user purges history, clear the list
+      while (this.tabsList.lastElementChild) {
+        this.tabsList.lastElementChild.remove();
+      }
+      document
+        .getElementById("recently-closed-tabs-container")
+        .togglePlaceholderVisibility(true);
+      this.tabsList.hidden = true;
+      this.closedTabsData = new Map();
+      return;
+    }
+
+    // First purge obsolete items out of the map so we don't leak them forever:
+    for (let id of this.closedTabsData.keys()) {
+      if (!newClosedTabs.some(t => t.closedId == id)) {
+        this.closedTabsData.delete(id);
+      }
+    }
+
+    // Then work out which of the new closed tabs are additions and which update
+    // existing items:
+    let tabsToAdd = [];
+    let tabsToUpdate = [];
+    for (let newTab of newClosedTabs) {
+      let oldTab = this.closedTabsData.get(newTab.closedId);
+      this.closedTabsData.set(newTab.closedId, newTab);
+      if (!oldTab) {
+        tabsToAdd.push(newTab);
+      } else if (
+        this.getTabStateValue(oldTab, "url") !=
+        this.getTabStateValue(newTab, "url")
+      ) {
+        tabsToUpdate.push(newTab);
+      }
+    }
+
+    // Remove existing tabs from tabsList if not in latest closedTabsData
+    // which is necessary when using "Reopen Closed Tab" from the toolbar
+    // or when selecting "Forget this site" in History
+    [...this.tabsList.children].forEach(existingTab => {
+      if (!this.closedTabsData.get(parseInt(existingTab.dataset.tabid, 10))) {
+        this.tabsList.removeChild(existingTab);
+      }
+    });
+
+    // If there's nothing to add/update, return.
+    if (!tabsToAdd.length && !tabsToUpdate.length) {
+      return;
+    }
+
+    // Add new tabs.
+    for (let tab of tabsToAdd.reverse()) {
+      if (this.tabsList.children.length == this.maxTabsLength) {
+        this.tabsList.lastChild.remove();
+      }
+      let li = this.generateListItem(tab);
+      let mainContent = li.querySelector(".closed-tab-li-main");
+      // Only the first item in the list should be focusable
+      if (!this.tabsList.children.length) {
+        mainContent.setAttribute("tabindex", "0");
+      } else if (this.tabsList.children.length) {
+        mainContent.setAttribute("tabindex", "0");
+        this.tabsList.children[0].setAttribute("tabindex", "-1");
+      }
+      this.tabsList.prepend(li);
+    }
+
+    // Update any recently closed tabs that now have different URLs:
+    for (let tab of tabsToUpdate) {
+      let tabElement = this.querySelector(
+        `.closed-tab-li[data-tabid="${tab.closedId}"]`
       );
-    this.recentlyClosedTabs = recentlyClosedTabsData.slice(
+      let url = this.getTabStateValue(tab, "url");
-      0,
+      this.updateURLForListItem(tabElement, url);
-      this.maxTabsLength
-    );
-    this.requestUpdate();
     }
 
-  render() {
+    // Now unhide the list if necessary:
-    let { recentlyClosedTabs } = this;
+    if (this.tabsList.hidden) {
-    let closedTabsContainer = document.getElementById(
+      this.tabsList.hidden = false;
-      "recently-closed-tabs-container"
+      document
-    );
+        .getElementById("recently-closed-tabs-container")
-
+        .togglePlaceholderVisibility(false);
-    if (!recentlyClosedTabs.length) {
-      // Show empty message if no recently closed tabs
-      closedTabsContainer.toggleContainerStyleForEmptyMsg(true);
-      return html`
-        ${this.emptyMessageTemplate()}
-      `;
-    }
-
-    closedTabsContainer.toggleContainerStyleForEmptyMsg(false);
-
-    return html`
-      <ol class="closed-tabs-list">
-        ${recentlyClosedTabs.map((tab, i) =>
-          this.recentlyClosedTabTemplate(tab, !i)
-        )}
-      </ol>
-    `;
-  }
-
-  willUpdate() {
-    if (this.tabsList && this.tabsList.contains(document.activeElement)) {
-      let activeLi = document.activeElement.closest(".closed-tab-li");
-      this.lastFocusedIndex = [...this.tabsList.children].indexOf(activeLi);
-    } else {
-      this.lastFocusedIndex = -1;
     }
   }
 
-  updated() {
+  generateListItem(tab) {
-    let focusRestored = false;
+    const li = document.createElement("li");
-    if (this.lastFocusedIndex >= 0) {
+    li.classList.add("closed-tab-li");
-      if (this.tabsList && this.tabsList.children.length) {
+    li.dataset.tabid = tab.closedId;
-        let items = [...this.tabsList.children];
-        let newFocusIndex = Math.max(
-          Math.min(items.length - 1, this.lastFocusedIndex - 1),
-          0
-        );
-        let newFocus = items[newFocusIndex];
-        if (newFocus) {
-          focusRestored = true;
-          newFocus.querySelector(".closed-tab-li-main").focus();
-        }
-      }
-      if (!focusRestored) {
-        document.getElementById("recently-closed-tabs-header-section").focus();
-      }
-    }
-    this.lastFocusedIndex = -1;
-  }
 
-  emptyMessageTemplate() {
+    const title = document.createElement("span");
-    return html`
+    title.textContent = `${tab.title}`;
-      <div
+    title.classList.add("closed-tab-li-title");
-        id="recently-closed-tabs-placeholder"
-        class="placeholder-content"
-        role="presentation"
-      >
-        <img
-          id="recently-closed-empty-image"
-          src="chrome://browser/content/recently-closed-empty.svg"
-          role="presentation"
-          alt=""
-        />
-        <div class="placeholder-text">
-          <h4
-            data-l10n-id="firefoxview-closed-tabs-placeholder-header"
-            class="placeholder-header"
-          ></h4>
-          <p
-            data-l10n-id="firefoxview-closed-tabs-placeholder-body"
-            class="placeholder-body"
-          ></p>
-        </div>
-      </div>
-    `;
-  }
 
-  recentlyClosedTabTemplate(tab, primary) {
     const targetURI = this.getTabStateValue(tab, "url");
+    const image = tab.image;
+    const favicon = createFaviconElement(image, targetURI);
+
+    const urlElement = document.createElement("span");
+    urlElement.classList.add("closed-tab-li-url");
+
+    const time = document.createElement("span");
     const convertedTime = convertTimestamp(tab.closedAt, this.fluentStrings);
-    return html`
+    time.textContent = convertedTime;
-      <li
+    time.setAttribute("data-timestamp", tab.closedAt);
-        class="closed-tab-li"
+    time.classList.add("closed-tab-li-time");
-        data-tabid=${tab.closedId}
+
-        data-targeturi=${targetURI}
+    const mainContent = document.createElement("span");
-        tabindex=${ifDefined(primary ? null : "-1")}
+    mainContent.classList.add("closed-tab-li-main");
-      >
+    mainContent.setAttribute("role", "link");
-        <a
+    mainContent.setAttribute("tabindex", 0);
-          class="closed-tab-li-main tab-link"
+    mainContent.append(favicon, title, urlElement, time);
-          tabindex="0"
+
-          href=${targetURI}
+    const dismissButton = document.createElement("button");
-          @click=${e => this.openTabAndUpdate(e)}
+    let tabTitle = tab.title ?? "";
-        >
+    document.l10n.setAttributes(
-          <div
+      dismissButton,
-            class="favicon"
+      "firefoxview-closed-tabs-dismiss-tab",
-            style=${styleMap({
+      {
-              backgroundImage: `url(${getImageUrl(tab.icon, targetURI)})`,
+        tabTitle,
-            })}
+      }
-          ></div>
+    );
-          <span class="closed-tab-li-title">
+    dismissButton.classList.add("closed-tab-li-dismiss");
-            ${tab.title}
+
-          </span>
+    li.append(mainContent, dismissButton);
-          <span
+    this.updateURLForListItem(li, targetURI);
-            title=${targetURI}
+    return li;
-            class="closed-tab-li-url"
-            data-l10n-id="firefoxview-tabs-list-tab-button"
-            data-l10n-args=${JSON.stringify({ targetURI })}
-          >
-            ${formatURIForDisplay(targetURI)}
-          </span>
-          <span class="closed-tab-li-time" data-timestamp=${tab.closedAt}>
-            ${convertedTime}
-          </span>
-        </a>
-        <button
-          class="closed-tab-li-dismiss"
-          data-l10n-id="firefoxview-closed-tabs-dismiss-tab"
-          data-l10n-args=${JSON.stringify({ tabTitle: tab.title })}
-          @click=${e => this.dismissTabAndUpdate(e)}
-        ></button>
-      </li>
-    `;
   }
 
   // Update the URL for a new or previously-populated list item.
@@ -384,7 +413,8 @@ class RecentlyClosedTabsContainer extends HTMLDetailsElement {
   handleObservers(contentDocument) {
     if (contentDocument?.URL == "about:firefoxview") {
       this.addObserversIfNeeded();
-      this.list.updateRecentlyClosedTabs();
+      this.list.updateTabsList();
+      this.maybeUpdateFocus();
     } else {
       this.removeObserversIfNeeded();
     }
@@ -396,12 +426,16 @@ class RecentlyClosedTabsContainer extends HTMLDetailsElement {
       (topic == SS_NOTIFY_BROWSER_SHUTDOWN_FLUSH &&
         subject.ownerGlobal == getWindow())
     ) {
-      this.list.updateRecentlyClosedTabs();
+      this.list.updateTabsList();
     }
   }
 
   onLoad() {
-    this.list.updateRecentlyClosedTabs();
+    if (this.getClosedTabCount() == 0) {
+      this.togglePlaceholderVisibility(true);
+    } else {
+      this.list.updateTabsList();
+    }
     this.addObserversIfNeeded();
   }
 
@@ -413,7 +447,27 @@ class RecentlyClosedTabsContainer extends HTMLDetailsElement {
     }
   }
 
-  toggleContainerStyleForEmptyMsg(visible) {
+  /**
+   * Manages focus when returning to the Firefox View tab
+   *
+   * @memberof RecentlyClosedTabsContainer
+   */
+  maybeUpdateFocus() {
+    // Check if focus is in the container element
+    if (this.contains(document.activeElement)) {
+      let listItems = this.list.querySelectorAll("li");
+      // More tabs may have been added to the list, so we'll refocus
+      // the first item in the list.
+      if (listItems.length) {
+        listItems[0].querySelector(".closed-tab-li-main").focus();
+      } else {
+        this.querySelector("summary").focus();
+      }
+    }
+  }
+
+  togglePlaceholderVisibility(visible) {
+    this.noTabsElement.toggleAttribute("hidden", !visible);
     this.collapsibleContainer.classList.toggle("empty-container", visible);
   }
 

browser/components/firefoxview/tab-pickup-list.mjs

@@ -352,7 +352,7 @@ class TabPickupList extends HTMLElement {
     li.classList.add("synced-tab-li");
 
     const a = document.createElement("a");
-    a.classList.add("synced-tab-a", "tab-link");
+    a.classList.add("synced-tab-a");
     a.target = "_blank";
     if (index != 0) {
       a.setAttribute("tabindex", "-1");

browser/components/firefoxview/tests/browser/browser_recently_closed_tabs.js

@@ -44,7 +44,7 @@ async function close_tab(tab) {
 }
 
 async function dismiss_tab(tab, content) {
-  info(`Dismissing tab ${tab.dataset.targeturi}`);
+  info(`Dismissing tab ${tab.dataset.targetURI}`);
   const closedObjectsChanged = () =>
     TestUtils.topicObserved("sessionstore-closed-objects-changed");
   let dismissButton = tab.querySelector(".closed-tab-li-dismiss");
@@ -63,15 +63,12 @@ add_task(async function test_empty_list() {
       "collapsible container should have correct styling when the list is empty"
     );
 
-    Assert.ok(
+    testVisibility(browser, {
-      document.getElementById("recently-closed-tabs-placeholder"),
+      expectedVisible: {
-      "The empty message is displayed."
+        "#recently-closed-tabs-placeholder": true,
-    );
+        "ol.closed-tabs-list": false,
-
+      },
-    Assert.ok(
+    });
-      !document.querySelector("ol.closed-tabs-list"),
-      "The recently closed tabs list is not displayed."
-    );
 
     const tab1 = await add_new_tab(URLs[0]);
 
@@ -88,15 +85,12 @@ add_task(async function test_empty_list() {
       "collapsible container should have correct styling when the list is not empty"
     );
 
-    Assert.ok(
+    testVisibility(browser, {
-      !document.getElementById("recently-closed-tabs-placeholder"),
+      expectedVisible: {
-      "The empty message is not displayed."
+        "#recently-closed-tabs-placeholder": false,
-    );
+        "ol.closed-tabs-list": true,
-
+      },
-    Assert.ok(
+    });
-      document.querySelector("ol.closed-tabs-list"),
-      "The recently closed tabs list is displayed."
-    );
 
     is(
       document.querySelector("ol.closed-tabs-list").children.length,
@@ -152,7 +146,7 @@ add_task(async function test_list_ordering() {
     ok(
       document
         .querySelector("ol.closed-tabs-list")
-        .children[0].textContent.includes("mochi.test"),
+        .firstChild.textContent.includes("mochi.test"),
       "first list item in recently-closed-tabs-list is in the correct order"
     );
 
@@ -164,9 +158,9 @@ add_task(async function test_list_ordering() {
     );
 
     let ele = document.querySelector("ol.closed-tabs-list").firstElementChild;
-    let uri = ele.getAttribute("data-targeturi");
+    let uri = ele.getAttribute("data-target-u-r-i");
     let newTabPromise = BrowserTestUtils.waitForNewTab(gBrowser, uri);
-    ele.querySelector(".closed-tab-li-main").click();
+    ele.click();
     await newTabPromise;
 
     await TestUtils.waitForCondition(
@@ -251,18 +245,15 @@ add_task(async function test_max_list_items() {
       "collapsible container should have correct styling when the list is not empty"
     );
 
-    Assert.ok(
+    testVisibility(browser, {
-      !document.getElementById("recently-closed-tabs-placeholder"),
+      expectedVisible: {
-      "The empty message is not displayed."
+        "#recently-closed-tabs-placeholder": false,
-    );
+        "ol.closed-tabs-list": true,
-
+      },
-    Assert.ok(
+    });
-      document.querySelector("ol.closed-tabs-list"),
-      "The recently closed tabs list is displayed."
-    );
 
     is(
-      document.querySelector("ol.closed-tabs-list").children.length,
+      document.querySelector("ol.closed-tabs-list").childNodes.length,
       mockMaxTabsLength,
       `recently-closed-tabs-list should have ${mockMaxTabsLength} list items`
     );
@@ -274,8 +265,9 @@ add_task(async function test_max_list_items() {
     const tab = await add_new_tab(URLs[3]);
     await close_tab(tab);
     await closedObjectsChanged;
+
     let firstListItem = document.querySelector("ol.closed-tabs-list")
-      .children[0];
+      .firstChild;
     await BrowserTestUtils.waitForMutationCondition(
       firstListItem,
       { characterData: true, childList: true, subtree: true },
@@ -287,7 +279,7 @@ add_task(async function test_max_list_items() {
     );
 
     is(
-      document.querySelector("ol.closed-tabs-list").children.length,
+      document.querySelector("ol.closed-tabs-list").childNodes.length,
       mockMaxTabsLength,
       `recently-closed-tabs-list should still have ${mockMaxTabsLength} list items`
     );
@@ -318,7 +310,6 @@ add_task(async function test_time_updates_correctly() {
             closedId: 0,
             closedAt: Date.now() - TAB_CLOSED_AGO_MS,
             image: null,
-            title: "Example",
           },
         ],
       },
@@ -338,10 +329,9 @@ add_task(async function test_time_updates_correctly() {
     },
     async browser => {
       const { document } = browser.contentWindow;
-      const numOfListItems = document.querySelector("ol.closed-tabs-list")
+
-        .children.length;
       const lastListItem = document.querySelector("ol.closed-tabs-list")
-        .children[numOfListItems - 1];
+        .lastChild;
       const timeLabel = lastListItem.querySelector("span.closed-tab-li-time");
       let initialTimeText = timeLabel.textContent;
       Assert.stringContains(
@@ -397,12 +387,14 @@ add_task(async function test_list_maintains_focus_when_restoring_tab() {
     let gBrowser = browser.getTabBrowser();
     const { document } = browser.contentWindow;
     const list = document.querySelectorAll(".closed-tab-li");
+    let expectedFocusedElement = list[1].querySelector(".closed-tab-li-main");
     list[0].querySelector(".closed-tab-li-main").focus();
     EventUtils.synthesizeKey("KEY_Enter");
     let firefoxViewTab = gBrowser.tabs.find(tab => tab.label == "Firefox View");
     await BrowserTestUtils.switchTab(gBrowser, firefoxViewTab);
-    Assert.ok(
+    is(
-      document.activeElement.textContent.includes("mochitest index"),
+      document.activeElement,
+      expectedFocusedElement,
       "Focus should be on the first item in the recently closed list"
     );
   });
@@ -422,6 +414,7 @@ add_task(async function test_list_maintains_focus_when_restoring_tab() {
     );
     const list = document.querySelectorAll(".closed-tab-li");
     list[0].querySelector(".closed-tab-li-main").focus();
+
     EventUtils.synthesizeKey("KEY_Enter");
     let firefoxViewTab = gBrowser.tabs.find(tab => tab.label == "Firefox View");
     await BrowserTestUtils.switchTab(gBrowser, firefoxViewTab);
@@ -462,25 +455,27 @@ add_task(async function test_switch_before_closing() {
     );
     BrowserTestUtils.loadURIString(newTab.linkedBrowser, FINAL_URL);
     await loadPromise;
+
     // Close the added tab
     BrowserTestUtils.removeTab(newTab);
 
     const { document } = browser.contentWindow;
-    await BrowserTestUtils.waitForMutationCondition(
-      document.querySelector("recently-closed-tabs-list"),
-      { childList: true, subtree: true },
-      () => document.querySelector("ol.closed-tabs-list")
-    );
     const tabsList = document.querySelector("ol.closed-tabs-list");
+    await BrowserTestUtils.waitForMutationCondition(
+      tabsList,
+      { childList: true },
+      () => !!tabsList.children.length
+    );
     info("A tab appeared in the list, ensure it has the right URL.");
-    let urlBit = tabsList.children[0].querySelector(".closed-tab-li-url");
+    let urlBit = tabsList.firstElementChild.querySelector(".closed-tab-li-url");
     await BrowserTestUtils.waitForMutationCondition(
       urlBit,
       { characterData: true, attributeFilter: ["title"] },
       () => urlBit.textContent.includes(".com")
     );
-    Assert.ok(
+    is(
-      urlBit.textContent.includes("example.com"),
+      urlBit.textContent,
+      "example.com",
       "Item should end up with the correct URL."
     );
   });
@@ -500,7 +495,7 @@ add_task(async function test_alt_click_no_launch() {
     let gBrowser = browser.getTabBrowser();
     let originalTabsLength = gBrowser.tabs.length;
     await BrowserTestUtils.synthesizeMouseAtCenter(
-      ".closed-tab-li .closed-tab-li-main",
+      ".closed-tab-li",
       { altKey: true },
       browser
     );
@@ -559,6 +554,19 @@ add_task(async function test_restore_recently_closed_tabs() {
   await tabRestored;
   ok(true, "Tab was restored by using the Enter key");
 
+  await EventUtils.synthesizeMouseAtCenter(
+    gBrowser.ownerDocument.getElementById("firefox-view-button"),
+    { type: "mousedown" },
+    window
+  );
+
+  tabRestored = BrowserTestUtils.waitForNewTab(gBrowser, URLs[0]);
+  document.querySelector(".closed-tab-li .closed-tab-li-main").focus();
+  EventUtils.synthesizeKey(" ", {}, gBrowser.contentWindow);
+
+  await tabRestored;
+  ok(true, "Tab was restored by using the Space bar");
+
   // clean up extra tabs
   while (gBrowser.tabs.length > 1) {
     BrowserTestUtils.removeTab(gBrowser.tabs.at(-1));
@@ -610,7 +618,7 @@ add_task(async function test_reopen_recently_closed_tabs() {
   );
 
   Assert.equal(
-    tabsList.children[0].dataset.targeturi,
+    tabsList.children[0].dataset.targetURI,
     URLs[1],
     `First recently closed item should be ${URLs[1]}`
   );
@@ -624,7 +632,7 @@ add_task(async function test_reopen_recently_closed_tabs() {
   );
 
   Assert.equal(
-    tabsList.children[0].dataset.targeturi,
+    tabsList.children[0].dataset.targetURI,
     URLs[2],
     `First recently closed item should be ${URLs[2]}`
   );
@@ -638,7 +646,7 @@ add_task(async function test_reopen_recently_closed_tabs() {
   );
 
   Assert.equal(
-    tabsList.children[0].dataset.targeturi,
+    tabsList.children[0].dataset.targetURI,
     URLs[1],
     `First recently closed item should be ${URLs[1]}`
   );
@@ -707,7 +715,7 @@ add_task(async function test_dismiss_tab() {
     );
 
     Assert.equal(
-      tabsList.children[0].dataset.targeturi,
+      tabsList.children[0].dataset.targetURI,
       URLs[1],
       `First recently closed item should be ${URLs[1]}`
     );
@@ -742,7 +750,7 @@ add_task(async function test_dismiss_tab() {
     );
 
     Assert.equal(
-      tabsList.children[0].dataset.targeturi,
+      tabsList.children[0].dataset.targetURI,
       URLs[2],
       `First recently closed item should be ${URLs[2]}`
     );
@@ -776,14 +784,11 @@ add_task(async function test_dismiss_tab() {
       { clear: true, process: "parent" }
     );
 
-    Assert.ok(
+    testVisibility(browser, {
-      document.getElementById("recently-closed-tabs-placeholder"),
+      expectedVisible: {
-      "The empty message is displayed."
+        "#recently-closed-tabs-placeholder": true,
-    );
+        "ol.closed-tabs-list": false,
-
+      },
-    Assert.ok(
+    });
-      !document.querySelector("ol.closed-tabs-list"),
-      "The recently closed tabs list is not displayed."
-    );
   });
 });

browser/components/firefoxview/tests/browser/browser_recently_closed_tabs_keyboard.js

@@ -218,7 +218,7 @@ add_task(async function test_dismiss_tab_keyboard() {
     await dismiss_tab_keyboard(tabsList.children[0], document);
 
     Assert.equal(
-      tabsList.children[0].dataset.targeturi,
+      tabsList.children[0].dataset.targetURI,
       URLs[1],
       `First recently closed item should be ${URLs[1]}`
     );
@@ -232,7 +232,7 @@ add_task(async function test_dismiss_tab_keyboard() {
     await dismiss_tab_keyboard(tabsList.children[0], document);
 
     Assert.equal(
-      tabsList.children[0].dataset.targeturi,
+      tabsList.children[0].dataset.targetURI,
       URLs[0],
       `First recently closed item should be ${URLs[0]}`
     );
@@ -245,14 +245,11 @@ add_task(async function test_dismiss_tab_keyboard() {
 
     await dismiss_tab_keyboard(tabsList.children[0], document);
 
-    Assert.ok(
+    testVisibility(browser, {
-      document.getElementById("recently-closed-tabs-placeholder"),
+      expectedVisible: {
-      "The empty message is displayed."
+        "#recently-closed-tabs-placeholder": true,
-    );
+        "ol.closed-tabs-list": false,
-
+      },
-    Assert.ok(
+    });
-      !document.querySelector("ol.closed-tabs-list"),
-      "The recently clsoed tabs list is not displayed."
-    );
   });
 });