Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

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

70 files changed, 25890 insertions, 0 deletions

diff --git a/comm/mail/base/test/browser/browser-detachedWindows.ini b/comm/mail/base/test/browser/browser-detachedWindows.ini
new file mode 100644
index 0000000000..5932a9b682
--- /dev/null
+++ b/comm/mail/base/test/browser/browser-detachedWindows.ini
@@ -0,0 +1,15 @@
+[DEFAULT]
+head = head.js
+prefs =
+  mail.provider.suppress_dialog_on_startup=true
+  mail.spellcheck.inline=false
+  mail.spotlight.firstRunDone=true
+  mail.winsearch.firstRunDone=true
+  mailnews.database.global.indexer.enabled=false
+  mailnews.start_page.override_url=about:blank
+  mailnews.start_page.url=about:blank
+subsuite = thunderbird
+support-files = files/**
+
+[browser_detachedWindows.js]
+skip-if = debug
diff --git a/comm/mail/base/test/browser/browser-drawBelowTitlebar.ini b/comm/mail/base/test/browser/browser-drawBelowTitlebar.ini
new file mode 100644
index 0000000000..63963b8145
--- /dev/null
+++ b/comm/mail/base/test/browser/browser-drawBelowTitlebar.ini
@@ -0,0 +1,17 @@
+[DEFAULT]
+head = head.js
+prefs =
+  mail.provider.suppress_dialog_on_startup=true
+  mail.spellcheck.inline=false
+  mail.spotlight.firstRunDone=true
+  mail.winsearch.firstRunDone=true
+  mailnews.database.global.indexer.enabled=false
+  mailnews.start_page.override_url=about:blank
+  mailnews.start_page.url=about:blank
+  mail.tabs.drawInTitlebar=false
+subsuite = thunderbird
+support-files =
+  head_spacesToolbar.js
+skip-if = os == 'mac'
+
+[browser_spacesToolbar_drawBelowTitlebar.js]
diff --git a/comm/mail/base/test/browser/browser-drawInTitlebar.ini b/comm/mail/base/test/browser/browser-drawInTitlebar.ini
new file mode 100644
index 0000000000..0b73400c5a
--- /dev/null
+++ b/comm/mail/base/test/browser/browser-drawInTitlebar.ini
@@ -0,0 +1,17 @@
+[DEFAULT]
+head = head.js
+prefs =
+  mail.provider.suppress_dialog_on_startup=true
+  mail.spellcheck.inline=false
+  mail.spotlight.firstRunDone=true
+  mail.winsearch.firstRunDone=true
+  mailnews.database.global.indexer.enabled=false
+  mailnews.start_page.override_url=about:blank
+  mailnews.start_page.url=about:blank
+  mail.tabs.drawInTitlebar=true
+subsuite = thunderbird
+support-files =
+  head_spacesToolbar.js
+skip-if = os == 'mac'
+
+[browser_spacesToolbar_drawInTitlebar.js]
diff --git a/comm/mail/base/test/browser/browser.ini b/comm/mail/base/test/browser/browser.ini
new file mode 100644
index 0000000000..4ff3a5d866
--- /dev/null
+++ b/comm/mail/base/test/browser/browser.ini
@@ -0,0 +1,66 @@
+[DEFAULT]
+head = head.js
+prefs =
+  mail.biff.show_alert=false
+  mail.provider.suppress_dialog_on_startup=true
+  mail.spellcheck.inline=false
+  mail.spotlight.firstRunDone=true
+  mail.winsearch.firstRunDone=true
+  mailnews.start_page.override_url=about:blank
+  mailnews.start_page.url=about:blank
+subsuite = thunderbird
+support-files = files/**
+
+[browser_3paneTelemetry.js]
+[browser_archive.js]
+[browser_browserContext.js]
+tags = contextmenu webextensions
+[browser_browserRequestWindow.js]
+[browser_cardsView.js]
+[browser_editMenu.js]
+skip-if = os == 'mac'
+[browser_fileMenu.js]
+skip-if = os == 'mac'
+[browser_folderPaneContext.js]
+tags = contextmenu
+[browser_folderTreeProperties.js]
+[browser_folderTreeQuirks.js]
+[browser_formPickers.js]
+tags = webextensions
+[browser_goMenu.js]
+skip-if = os == 'mac'
+[browser_interactionTelemetry.js]
+[browser_linkHandler.js]
+[browser_mailContext.js]
+tags = contextmenu
+[browser_mailTabsAndWindows.js]
+[browser_markAsRead.js]
+[browser_menulist.js]
+skip-if = os == 'mac'
+[browser_messageMenu.js]
+skip-if = os == 'mac'
+[browser_navigation.js]
+[browser_orderableTreeListbox.js]
+[browser_paneFocus.js]
+[browser_paneSplitter.js]
+[browser_preferDisplayName.js]
+[browser_searchMessages.js]
+[browser_smartFolderDelete.js]
+[browser_spacesToolbar.js]
+[browser_spacesToolbarCustomize.js]
+[browser_selectionWidgetController.js]
+[browser_statusFeedback.js]
+[browser_tabIcon.js]
+[browser_tagsMode.js]
+[browser_threads.js]
+[browser_threadTreeDeleting.js]
+[browser_threadTreeQuirks.js]
+[browser_threadTreeSorting.js]
+[browser_toolsMenu.js]
+skip-if = os == 'mac'
+[browser_treeListbox.js]
+[browser_treeView.js]
+[browser_viewMenu.js]
+skip-if = os == 'mac'
+[browser_webSearchTelemetry.js]
+[browser_zoom.js]
diff --git a/comm/mail/base/test/browser/browser_3paneTelemetry.js b/comm/mail/base/test/browser/browser_3paneTelemetry.js
new file mode 100644
index 0000000000..84af064e84
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_3paneTelemetry.js
@@ -0,0 +1,163 @@
+/* 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/. */
+
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+var { TelemetryTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/TelemetryTestUtils.sys.mjs"
+);
+
+var tabmail = document.getElementById("tabmail");
+var folders = {};
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  let rootFolder = account.incomingServer.rootFolder;
+
+  for (let type of ["Drafts", "SentMail", "Templates", "Junk", "Archive"]) {
+    rootFolder.createSubfolder(`telemetry${type}`, null);
+    folders[type] = rootFolder.getChildNamed(`telemetry${type}`);
+    folders[type].setFlag(Ci.nsMsgFolderFlags[type]);
+  }
+  rootFolder.createSubfolder("telemetryPlain", null);
+  folders.Other = rootFolder.getChildNamed("telemetryPlain");
+
+  let { paneLayout } = tabmail.currentAbout3Pane;
+  let folderPaneVisibleAtStart = paneLayout.folderPaneVisible;
+  let messagePaneVisibleAtStart = paneLayout.messagePaneVisible;
+
+  registerCleanupFunction(function () {
+    MailServices.accounts.removeAccount(account, false);
+    tabmail.closeOtherTabs(0);
+    if (paneLayout.folderPaneVisible != folderPaneVisibleAtStart) {
+      goDoCommand("cmd_toggleFolderPane");
+    }
+    if (paneLayout.messagePaneVisible != messagePaneVisibleAtStart) {
+      goDoCommand("cmd_toggleMessagePane");
+    }
+  });
+});
+
+add_task(async function testFolderOpen() {
+  Services.telemetry.clearScalars();
+
+  let about3Pane = tabmail.currentAbout3Pane;
+  about3Pane.displayFolder(folders.Other.URI);
+
+  let scalarName = "tb.mails.folder_opened";
+  let scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Other", 1);
+
+  about3Pane.displayFolder(folders.Templates.URI);
+  about3Pane.displayFolder(folders.Other.URI);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Other", 2);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Templates", 1);
+
+  about3Pane.displayFolder(folders.Junk.URI);
+  about3Pane.displayFolder(folders.Other.URI);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Other", 3);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Templates", 1);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Junk", 1);
+
+  about3Pane.displayFolder(folders.Junk.URI);
+  about3Pane.displayFolder(folders.Templates.URI);
+  about3Pane.displayFolder(folders.Archive.URI);
+  about3Pane.displayFolder(folders.Other.URI);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Other", 4);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Templates", 2);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Archive", 1);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "Junk", 2);
+});
+
+add_task(async function testPaneVisibility() {
+  let { paneLayout, displayFolder } = tabmail.currentAbout3Pane;
+  displayFolder(folders.Other.URI);
+  // Make the folder pane and message pane visible initially.
+  if (!paneLayout.folderPaneVisible) {
+    goDoCommand("cmd_toggleFolderPane");
+  }
+  if (!paneLayout.messagePaneVisible) {
+    goDoCommand("cmd_toggleMessagePane");
+  }
+  // The scalar is updated by switching to the folder tab, so open another tab.
+  window.openContentTab("about:mozilla");
+
+  Services.telemetry.clearScalars();
+
+  tabmail.switchToTab(0);
+
+  let scalarName = "tb.ui.configuration.pane_visibility";
+  let scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "folderPane", true);
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "messagePane",
+    true
+  );
+
+  // Hide the folder pane.
+  goDoCommand("cmd_toggleFolderPane");
+  tabmail.switchToTab(1);
+  tabmail.switchToTab(0);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "folderPane",
+    false
+  );
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "messagePane",
+    true
+  );
+
+  // Hide the message pane.
+  goDoCommand("cmd_toggleMessagePane");
+  tabmail.switchToTab(1);
+  tabmail.switchToTab(0);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "folderPane",
+    false
+  );
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "messagePane",
+    false
+  );
+
+  // Show both panes again.
+  goDoCommand("cmd_toggleFolderPane");
+  goDoCommand("cmd_toggleMessagePane");
+  tabmail.switchToTab(1);
+  tabmail.switchToTab(0);
+
+  scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  TelemetryTestUtils.assertKeyedScalar(scalars, scalarName, "folderPane", true);
+  TelemetryTestUtils.assertKeyedScalar(
+    scalars,
+    scalarName,
+    "messagePane",
+    true
+  );
+
+  // Close the extra tab.
+  tabmail.closeOtherTabs(0);
+});
diff --git a/comm/mail/base/test/browser/browser_archive.js b/comm/mail/base/test/browser/browser_archive.js
new file mode 100644
index 0000000000..6a84aff45a
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_archive.js
@@ -0,0 +1,98 @@
+/* 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/. */
+
+/* globals messenger */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const tabmail = document.getElementById("tabmail");
+const about3Pane = tabmail.currentAbout3Pane;
+const { threadTree } = about3Pane;
+
+add_setup(async function () {
+  Services.prefs.setBoolPref("mailnews.scroll_to_new_message", false);
+  // Create an account for the test.
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+
+  // Remove test account on cleanup.
+  registerCleanupFunction(() => {
+    // This test should create mailbox://nobody@Local%20Folders/Archives/2000.
+    // Tests following this one may attempt to create a folder at the same URI
+    // and will fail because our folder lookup code is a mess. Renaming should
+    // prevent that.
+    let archiveFolder = rootFolder.getFolderWithFlags(
+      Ci.nsMsgFolderFlags.Archive
+    );
+    archiveFolder?.subFolders[0]?.rename("archive2000", null);
+    archiveFolder?.rename("archiveArchives", null);
+
+    MailServices.accounts.removeAccount(account, false);
+    // Clear the undo and redo stacks to avoid side-effects on
+    // tests expecting them to start in a cleared state.
+    messenger.transactionManager.clear();
+    Services.prefs.setBoolPref("mailnews.scroll_to_new_message", true);
+  });
+
+  // Create a folder for the account to store test messages.
+  const rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("test-archive", null);
+  const testFolder = rootFolder
+    .getChildNamed("test-archive")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  // Generate test messages.
+  const generator = new MessageGenerator();
+  testFolder.addMessageBatch(
+    generator
+      .makeMessages({ count: 2, msgsPerThread: 2 })
+      .map(message => message.toMboxString())
+  );
+
+  // Use the test folder.
+  about3Pane.displayFolder(testFolder.URI);
+});
+
+/**
+ * Tests undoing after archiving a thread.
+ */
+add_task(async function testArchiveUndo() {
+  let row = threadTree.getRowAtIndex(0);
+
+  // Simulate a click on the row's subject line to select the row.
+  const selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  EventUtils.synthesizeMouseAtCenter(
+    row.querySelector(".thread-card-subject-container"),
+    { clickCount: 1 },
+    about3Pane
+  );
+  await selectPromise;
+
+  // Make sure the thread is selected
+  Assert.ok(
+    row.classList.contains("selected"),
+    "The thread row should be selected"
+  );
+
+  // Archive the message.
+  EventUtils.synthesizeKey("a");
+
+  // Make sure the thread was removed from the thread tree.
+  await TestUtils.waitForCondition(
+    () => threadTree.getRowAtIndex(0) === null,
+    "The thread tree should not have any row"
+  );
+
+  // Undo the operation.
+  EventUtils.synthesizeKey("z", { accelKey: true });
+
+  // Make sure the thread makes it back to the thread tree.
+  await TestUtils.waitForCondition(
+    () => threadTree.getRowAtIndex(0) !== null,
+    "The thread should have returned back from the archive"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_browserContext.js b/comm/mail/base/test/browser/browser_browserContext.js
new file mode 100644
index 0000000000..2691eba80e
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_browserContext.js
@@ -0,0 +1,398 @@
+/* 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/. */
+
+/* eslint-env webextensions */
+
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+var { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const TEST_DOCUMENT_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/sampleContent.html";
+const TEST_MESSAGE_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/sampleContent.eml";
+const TEST_IMAGE_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/tb-logo.png";
+
+let about3Pane, testFolder;
+
+async function getImageArrayBuffer() {
+  let response = await fetch(TEST_IMAGE_URL);
+  let blob = await response.blob();
+
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader();
+    reader.addEventListener("loadend", event => {
+      resolve(event.target.result);
+    });
+    reader.readAsArrayBuffer(blob);
+  });
+}
+
+function checkMenuitems(menu, ...expectedItems) {
+  if (expectedItems.length == 0) {
+    // Menu should not be shown.
+    Assert.equal(menu.state, "closed");
+    return;
+  }
+
+  Assert.notEqual(menu.state, "closed");
+
+  let actualItems = [];
+  for (let item of menu.children) {
+    if (
+      ["menu", "menuitem", "menugroup"].includes(item.localName) &&
+      !item.hidden
+    ) {
+      actualItems.push(item.id);
+    }
+  }
+  Assert.deepEqual(actualItems, expectedItems);
+}
+
+async function checkABrowser(browser, doc = browser.ownerDocument) {
+  if (
+    browser.webProgress?.isLoadingDocument ||
+    !browser.currentURI ||
+    browser.currentURI?.spec == "about:blank"
+  ) {
+    await BrowserTestUtils.browserLoaded(
+      browser,
+      undefined,
+      url => url != "about:blank"
+    );
+  }
+
+  let browserContext = doc.getElementById("browserContext");
+  let isMac = AppConstants.platform == "macosx";
+  let isWebPage =
+    browser.currentURI.schemeIs("http") || browser.currentURI.schemeIs("https");
+  let isExtensionPage = browser.currentURI.schemeIs("moz-extension");
+
+  // Just some text.
+
+  let shownPromise = BrowserTestUtils.waitForEvent(
+    browserContext,
+    "popupshown"
+  );
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "p",
+    { type: "contextmenu" },
+    browser
+  );
+  await shownPromise;
+
+  let expectedContextItems = [];
+  if (isWebPage || isExtensionPage) {
+    if (isMac) {
+      // Mac has the nav items directly in the context menu and not in the horizontal
+      // context-navigation menugroup.
+      expectedContextItems.push(
+        "browserContext-back",
+        "browserContext-forward",
+        "browserContext-reload"
+      );
+    } else {
+      expectedContextItems.push("context-navigation");
+      checkMenuitems(
+        doc.getElementById("context-navigation"),
+        "browserContext-back",
+        "browserContext-forward",
+        "browserContext-reload"
+      );
+    }
+  }
+  if (isWebPage) {
+    expectedContextItems.push("browserContext-openInBrowser");
+  }
+  expectedContextItems.push("browserContext-selectall");
+  checkMenuitems(browserContext, ...expectedContextItems);
+  browserContext.hidePopup();
+
+  // A link.
+
+  shownPromise = BrowserTestUtils.waitForEvent(browserContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "a",
+    { type: "contextmenu" },
+    browser
+  );
+  await shownPromise;
+  checkMenuitems(
+    browserContext,
+    "browserContext-openLinkInBrowser",
+    "browserContext-selectall",
+    "browserContext-copylink",
+    "browserContext-savelink"
+  );
+  browserContext.hidePopup();
+
+  // A text input widget.
+
+  await BrowserTestUtils.synthesizeMouseAtCenter("input", {}, browser);
+  shownPromise = BrowserTestUtils.waitForEvent(browserContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "input",
+    { type: "contextmenu" },
+    browser
+  );
+  await shownPromise;
+  checkMenuitems(
+    browserContext,
+    "browserContext-undo",
+    "browserContext-cut",
+    "browserContext-copy",
+    "browserContext-paste",
+    "browserContext-selectall",
+    "browserContext-spell-check-enabled"
+  );
+  browserContext.hidePopup();
+
+  // An image. Also checks Save Image As works.
+
+  shownPromise = BrowserTestUtils.waitForEvent(browserContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "img",
+    { type: "contextmenu" },
+    browser
+  );
+  await shownPromise;
+  checkMenuitems(
+    browserContext,
+    "browserContext-selectall",
+    "browserContext-copyimage",
+    "browserContext-saveimage"
+  );
+
+  let pickerPromise = new Promise(resolve => {
+    SpecialPowers.MockFilePicker.init(window);
+    SpecialPowers.MockFilePicker.showCallback = picker => {
+      resolve(picker.defaultString);
+      return Ci.nsIFilePicker.returnCancel;
+    };
+  });
+  browserContext.activateItem(doc.getElementById("browserContext-saveimage"));
+  Assert.equal(await pickerPromise, "tb-logo.png");
+  SpecialPowers.MockFilePicker.cleanup();
+}
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  let rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("browserContextFolder", null);
+  testFolder = rootFolder
+    .getChildNamed("browserContextFolder")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  let message = await fetch(TEST_MESSAGE_URL).then(r => r.text());
+  testFolder.addMessageBatch([message]);
+  let messages = new MessageGenerator().makeMessages({ count: 5 });
+  let messageStrings = messages.map(message => message.toMboxString());
+  testFolder.addMessageBatch(messageStrings);
+
+  about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+  about3Pane.restoreState({
+    folderURI: testFolder.URI,
+    messagePaneVisible: true,
+  });
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function testMessagePane() {
+  about3Pane.messagePane.displayWebPage(TEST_DOCUMENT_URL);
+  await checkABrowser(about3Pane.webBrowser, document);
+  about3Pane.messagePane.clearWebPage();
+});
+
+add_task(async function testContentTab() {
+  let tab = window.openContentTab(TEST_DOCUMENT_URL);
+  await checkABrowser(tab.browser);
+
+  let tabmail = document.getElementById("tabmail");
+  tabmail.closeTab(tab);
+});
+
+add_task(async function testExtensionTab() {
+  let extension = ExtensionTestUtils.loadExtension({
+    background: async () => {
+      await browser.tabs.create({ url: "sampleContent.html" });
+      browser.test.notifyPass("ready");
+    },
+    files: {
+      "sampleContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+      "tb-logo.png": await getImageArrayBuffer(),
+    },
+  });
+
+  await extension.startup();
+  await extension.awaitFinish("ready");
+
+  let tabmail = document.getElementById("tabmail");
+  await checkABrowser(tabmail.tabInfo[1].browser);
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+
+  await extension.unload();
+});
+
+add_task(async function testExtensionPopupWindow() {
+  let extension = ExtensionTestUtils.loadExtension({
+    background: async () => {
+      await browser.windows.create({
+        url: "sampleContent.html",
+        type: "popup",
+        width: 800,
+        height: 500,
+      });
+      browser.test.notifyPass("ready");
+    },
+    files: {
+      "sampleContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+      "tb-logo.png": await getImageArrayBuffer(),
+    },
+  });
+
+  await extension.startup();
+  await extension.awaitFinish("ready");
+
+  let extensionPopup = Services.wm.getMostRecentWindow("mail:extensionPopup");
+  // extensionPopup.xhtml needs time to initialise properly.
+  await new Promise(resolve => extensionPopup.setTimeout(resolve, 500));
+  await checkABrowser(extensionPopup.document.getElementById("requestFrame"));
+  await BrowserTestUtils.closeWindow(extensionPopup);
+
+  await extension.unload();
+});
+
+add_task(async function testExtensionBrowserAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "sampleContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+      "tb-logo.png": await getImageArrayBuffer(),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "browsercontext@mochi.test",
+        },
+      },
+      browser_action: {
+        default_popup: "sampleContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let { panel, browser } = await openExtensionPopup(
+    window,
+    "ext-browsercontext\\@mochi.test"
+  );
+  await TestUtils.waitForCondition(
+    () => browser.clientWidth > 100,
+    "waiting for browser to resize"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+});
+
+add_task(async function testExtensionComposeAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "sampleContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+      "tb-logo.png": await getImageArrayBuffer(),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "browsercontext@mochi.test",
+        },
+      },
+      compose_action: {
+        default_popup: "sampleContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let params = Cc[
+    "@mozilla.org/messengercompose/composeparams;1"
+  ].createInstance(Ci.nsIMsgComposeParams);
+  params.composeFields = Cc[
+    "@mozilla.org/messengercompose/composefields;1"
+  ].createInstance(Ci.nsIMsgCompFields);
+
+  let composeWindowPromise = BrowserTestUtils.domWindowOpened();
+  MailServices.compose.OpenComposeWindowWithParams(null, params);
+  let composeWindow = await composeWindowPromise;
+  await BrowserTestUtils.waitForEvent(composeWindow, "load");
+
+  let { panel, browser } = await openExtensionPopup(
+    composeWindow,
+    "browsercontext_mochi_test-composeAction-toolbarbutton"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+  await BrowserTestUtils.closeWindow(composeWindow);
+});
+
+add_task(async function testExtensionMessageDisplayAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "sampleContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+      "tb-logo.png": await getImageArrayBuffer(),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "browsercontext@mochi.test",
+        },
+      },
+      message_display_action: {
+        default_popup: "sampleContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let messageWindowPromise = BrowserTestUtils.domWindowOpened();
+  window.MsgOpenNewWindowForMessage([...testFolder.messages][0]);
+  let messageWindow = await messageWindowPromise;
+  let { target: aboutMessage } = await BrowserTestUtils.waitForEvent(
+    messageWindow,
+    "aboutMessageLoaded"
+  );
+
+  let { panel, browser } = await openExtensionPopup(
+    aboutMessage,
+    "browsercontext_mochi_test-messageDisplayAction-toolbarbutton"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+  await BrowserTestUtils.closeWindow(messageWindow);
+});
diff --git a/comm/mail/base/test/browser/browser_browserRequestWindow.js b/comm/mail/base/test/browser/browser_browserRequestWindow.js
new file mode 100644
index 0000000000..47309e5fc6
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_browserRequestWindow.js
@@ -0,0 +1,74 @@
+/* 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-globals-from ../../content/browserRequest.js */
+
+/**
+ * Open the browserRequest window.
+ *
+ * @returns {{cancelledPromise: Promise, requestWindow: DOMWindow}}
+ */
+async function openBrowserRequestWindow() {
+  let onCancelled;
+  let cancelledPromise = new Promise(resolve => {
+    onCancelled = resolve;
+  });
+  let requestWindow = await new Promise(resolve => {
+    Services.ww.openWindow(
+      null,
+      "chrome://messenger/content/browserRequest.xhtml",
+      null,
+      "chrome,private,centerscreen,width=980,height=750",
+      {
+        url: "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/sampleContent.html",
+        cancelled() {
+          onCancelled();
+        },
+        loaded(window, webProgress) {
+          resolve(window);
+        },
+      }
+    );
+  });
+  return { cancelledPromise, requestWindow };
+}
+
+add_task(async function test_urlBar() {
+  let { requestWindow, cancelledPromise } = await openBrowserRequestWindow();
+
+  let browser = requestWindow.getBrowser();
+  await BrowserTestUtils.browserLoaded(browser);
+  ok(browser, "Got a browser from global getBrowser function");
+
+  let urlBar = requestWindow.document.getElementById("headerMessage");
+  is(urlBar.value, browser.currentURI.spec, "Initial page is shown in URL bar");
+
+  let redirect = BrowserTestUtils.browserLoaded(browser);
+  BrowserTestUtils.loadURIString(browser, "about:blank");
+  await redirect;
+  is(urlBar.value, "about:blank", "URL bar value follows browser");
+
+  const closeEvent = new Event("close");
+  requestWindow.dispatchEvent(closeEvent);
+  await BrowserTestUtils.closeWindow(requestWindow);
+  await cancelledPromise;
+});
+
+add_task(async function test_cancelWithEsc() {
+  let { requestWindow, cancelledPromise } = await openBrowserRequestWindow();
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, requestWindow);
+  await cancelledPromise;
+});
+
+add_task(async function test_cancelWithAccelW() {
+  let { requestWindow, cancelledPromise } = await openBrowserRequestWindow();
+
+  EventUtils.synthesizeKey(
+    "w",
+    { [AppConstants.platform == "macosx" ? "metaKey" : "ctrlKey"]: true },
+    requestWindow
+  );
+  await cancelledPromise;
+});
diff --git a/comm/mail/base/test/browser/browser_cardsView.js b/comm/mail/base/test/browser/browser_cardsView.js
new file mode 100644
index 0000000000..462e21fba3
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_cardsView.js
@@ -0,0 +1,248 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { click_through_appmenu } = ChromeUtils.import(
+  "resource://testing-common/mozmill/WindowHelpers.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let { threadPane, threadTree } = about3Pane;
+let rootFolder, testFolder, testMessages, displayContext, displayButton;
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("cardsView", null);
+  testFolder = rootFolder
+    .getChildNamed("cardsView")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  let generator = new MessageGenerator();
+  testFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  about3Pane.displayFolder(testFolder.URI);
+  about3Pane.paneLayout.messagePaneVisible = false;
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    about3Pane.paneLayout.messagePaneVisible = true;
+    about3Pane.folderTree.focus();
+  });
+});
+
+add_task(async function testSwitchToCardsView() {
+  Assert.ok(
+    threadTree.getAttribute("rows") == "thread-card",
+    "The tree view should have a card layout"
+  );
+
+  click_through_appmenu(
+    [{ id: "appmenu_View" }, { id: "appmenu_MessagePaneLayout" }],
+    { id: "appmenu_messagePaneClassic" },
+    window
+  );
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-card",
+    "The tree view should not switch to a table layout"
+  );
+
+  displayContext = about3Pane.document.getElementById(
+    "threadPaneDisplayContext"
+  );
+  displayButton = about3Pane.document.getElementById("threadPaneDisplayButton");
+  let shownPromise = BrowserTestUtils.waitForEvent(
+    displayContext,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(displayButton, {}, about3Pane);
+  await shownPromise;
+
+  Assert.ok(
+    displayContext
+      .querySelector("#threadPaneCardsView")
+      .getAttribute("checked"),
+    "The cards view menuitem should be checked"
+  );
+
+  let hiddenPromise = BrowserTestUtils.waitForEvent(
+    displayContext,
+    "popuphidden"
+  );
+  displayContext.activateItem(
+    displayContext.querySelector("#threadPaneTableView")
+  );
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-row",
+    "The tree view switched to a table layout"
+  );
+  EventUtils.synthesizeKey("KEY_Escape", {});
+  await hiddenPromise;
+
+  click_through_appmenu(
+    [{ id: "appmenu_View" }, { id: "appmenu_MessagePaneLayout" }],
+    { id: "appmenu_messagePaneVertical" },
+    window
+  );
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-row",
+    "The tree view should not switch to a card layout"
+  );
+
+  Assert.equal(
+    threadTree.table.body.getAttribute("role"),
+    "tree",
+    "The message list table should be presented as Tree View"
+  );
+  Assert.equal(
+    threadTree.getRowAtIndex(0).getAttribute("role"),
+    "treeitem",
+    "The message row should be presented as Tree Item"
+  );
+
+  displayContext = about3Pane.document.getElementById(
+    "threadPaneDisplayContext"
+  );
+  displayButton = about3Pane.document.getElementById("threadPaneDisplayButton");
+  shownPromise = BrowserTestUtils.waitForEvent(displayContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(displayButton, {}, about3Pane);
+  await shownPromise;
+
+  Assert.ok(
+    displayContext
+      .querySelector("#threadPaneTableView")
+      .getAttribute("checked"),
+    "The table view menuitem should be checked"
+  );
+
+  hiddenPromise = BrowserTestUtils.waitForEvent(displayContext, "popuphidden");
+  displayContext.activateItem(
+    displayContext.querySelector("#threadPaneCardsView")
+  );
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-card",
+    "The tree view switched to a card layout"
+  );
+  EventUtils.synthesizeKey("KEY_Escape", {});
+  await hiddenPromise;
+
+  Assert.equal(
+    threadTree.getAttribute("rows"),
+    "thread-card",
+    "tree view in cards layout"
+  );
+  Assert.equal(
+    threadTree.table.body.getAttribute("role"),
+    "tree",
+    "The message list table should remain as Tree View"
+  );
+  Assert.equal(
+    threadTree.getRowAtIndex(0).getAttribute("role"),
+    "treeitem",
+    "The message row should remain as Tree Item"
+  );
+
+  let row = threadTree.getRowAtIndex(0);
+  let star = row.querySelector(".button-star");
+  Assert.ok(BrowserTestUtils.is_visible(star), "star icon should be visible");
+  let tag = row.querySelector(".tag-icon");
+  Assert.ok(BrowserTestUtils.is_hidden(tag), "tag icon should be hidden");
+  let attachment = row.querySelector(".attachment-icon");
+  Assert.ok(
+    BrowserTestUtils.is_hidden(attachment),
+    "attachment icon should be hidden"
+  );
+
+  // Switching to horizontal view shouldn't affect the list layout.
+  click_through_appmenu(
+    [{ id: "appmenu_View" }, { id: "appmenu_MessagePaneLayout" }],
+    { id: "appmenu_messagePaneClassic" },
+    window
+  );
+
+  Assert.equal(
+    threadTree.getAttribute("rows"),
+    "thread-card",
+    "tree view in cards layout"
+  );
+  about3Pane.folderTree.focus();
+});
+
+add_task(async function testTagsInVerticalView() {
+  let row = threadTree.getRowAtIndex(1);
+  EventUtils.synthesizeMouseAtCenter(row, {}, about3Pane);
+  Assert.ok(row.classList.contains("selected"), "the row should be selected");
+
+  let tag = row.querySelector(".tag-icon");
+  Assert.ok(BrowserTestUtils.is_hidden(tag), "tag icon should be hidden");
+
+  // Set the important tag.
+  EventUtils.synthesizeKey("1", {});
+  Assert.ok(BrowserTestUtils.is_visible(tag), "tag icon should be visible");
+  Assert.deepEqual(tag.title, "Important", "The important tag should be set");
+
+  let row2 = threadTree.getRowAtIndex(2);
+  EventUtils.synthesizeMouseAtCenter(row2, {}, about3Pane);
+  Assert.ok(
+    row2.classList.contains("selected"),
+    "the third row should be selected"
+  );
+
+  let tag2 = row2.querySelector(".tag-icon");
+  Assert.ok(BrowserTestUtils.is_hidden(tag2), "tag icon should be hidden");
+
+  // Set the work tag.
+  EventUtils.synthesizeKey("2", {});
+  Assert.ok(BrowserTestUtils.is_visible(tag2), "tag icon should be visible");
+  Assert.deepEqual(tag2.title, "Work", "The work tag should be set");
+
+  // Switch back to a table layout and horizontal view.
+  let shownPromise = BrowserTestUtils.waitForEvent(
+    displayContext,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(displayButton, {}, about3Pane);
+  await shownPromise;
+
+  Assert.ok(
+    displayContext
+      .querySelector("#threadPaneCardsView")
+      .getAttribute("checked"),
+    "The cards view menuitem should be checked"
+  );
+
+  let hiddenPromise = BrowserTestUtils.waitForEvent(
+    displayContext,
+    "popuphidden"
+  );
+  displayContext.activateItem(
+    displayContext.querySelector("#threadPaneTableView")
+  );
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-row",
+    "The tree view switched to a table layout"
+  );
+  EventUtils.synthesizeKey("KEY_Escape", {});
+  await hiddenPromise;
+
+  Assert.equal(
+    threadTree.getAttribute("rows"),
+    "thread-row",
+    "tree view in table layout"
+  );
+
+  await ensure_cards_view();
+  about3Pane.folderTree.focus();
+});
diff --git a/comm/mail/base/test/browser/browser_detachedWindows.js b/comm/mail/base/test/browser/browser_detachedWindows.js
new file mode 100644
index 0000000000..a523f4a799
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_detachedWindows.js
@@ -0,0 +1,223 @@
+/* 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/. */
+
+var { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let manager = Cc["@mozilla.org/memory-reporter-manager;1"].getService(
+  Ci.nsIMemoryReporterManager
+);
+
+let tabmail = document.getElementById("tabmail");
+let testFolder;
+let testMessages;
+
+add_setup(async function () {
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  let rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("detachedWindows", null);
+  testFolder = rootFolder
+    .getChildNamed("detachedWindows")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+
+  info("Initial state:");
+  await getWindows();
+});
+
+add_task(async function test3PaneTab() {
+  info("Opening a new 3-pane tab");
+  window.MsgOpenNewTabForFolders([testFolder], {
+    background: false,
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+  });
+  let tab = tabmail.tabInfo[1];
+  await BrowserTestUtils.waitForEvent(
+    tab.chromeBrowser,
+    "aboutMessageLoaded",
+    true
+  );
+  await new Promise(resolve =>
+    tab.chromeBrowser.contentWindow.setTimeout(resolve, 500)
+  );
+
+  tab.chromeBrowser.contentWindow.threadTree.selectedIndex = 0;
+  await BrowserTestUtils.waitForEvent(tab.chromeBrowser, "MsgLoaded");
+  await new Promise(resolve =>
+    tab.chromeBrowser.contentWindow.setTimeout(resolve, 500)
+  );
+
+  info("Closing the tab");
+  tabmail.closeOtherTabs(0);
+  tab = null;
+
+  await assertNoDetachedWindows();
+});
+
+add_task(async function testMessageTab() {
+  info("Opening a new message tab");
+  window.OpenMessageInNewTab(testMessages[0], { background: false });
+  let tab = tabmail.tabInfo[1];
+  await BrowserTestUtils.waitForEvent(
+    tab.chromeBrowser,
+    "aboutMessageLoaded",
+    true
+  );
+  await new Promise(resolve =>
+    tab.chromeBrowser.contentWindow.setTimeout(resolve, 500)
+  );
+
+  info("Closing the tab");
+  tabmail.closeOtherTabs(0);
+  tab = null;
+
+  await assertNoDetachedWindows();
+});
+
+add_task(async function testMessageWindow() {
+  info("Opening a standalone message window");
+  let win = await openMessageFromFile(
+    new FileUtils.File(getTestFilePath("files/sampleContent.eml"))
+  );
+  await new Promise(resolve => win.setTimeout(resolve, 500));
+
+  info("Closing the window");
+  await BrowserTestUtils.closeWindow(win);
+  win = null;
+
+  await assertNoDetachedWindows();
+});
+
+add_task(async function testSearchMessagesDialog() {
+  info("Opening the search messages dialog");
+  let about3Pane = tabmail.currentAbout3Pane;
+  let context = about3Pane.document.getElementById("folderPaneContext");
+  let searchMessagesItem = about3Pane.document.getElementById(
+    "folderPaneContext-searchMessages"
+  );
+
+  let shownPromise = BrowserTestUtils.waitForEvent(context, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    about3Pane.folderPane.getRowForFolder(testFolder).querySelector(".name"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+
+  let searchWindowPromise = BrowserTestUtils.domWindowOpenedAndLoaded(
+    null,
+    w =>
+      w.document.documentURI == "chrome://messenger/content/SearchDialog.xhtml"
+  );
+  context.activateItem(searchMessagesItem);
+  let searchWindow = await searchWindowPromise;
+
+  await new Promise(resolve => searchWindow.setTimeout(resolve, 500));
+
+  info("Closing the dialog");
+  await BrowserTestUtils.closeWindow(searchWindow);
+  searchWindowPromise = null;
+  searchWindow = null;
+
+  await assertNoDetachedWindows();
+});
+
+add_task(async function testAddressBookTab() {
+  info("Opening the Address Book");
+  window.toAddressBook();
+  let tab = tabmail.tabInfo[1];
+  await BrowserTestUtils.waitForEvent(
+    tab.browser,
+    "about-addressbook-ready",
+    true
+  );
+  await new Promise(resolve =>
+    tab.browser.contentWindow.setTimeout(resolve, 500)
+  );
+
+  info("Closing the tab");
+  tabmail.closeOtherTabs(0);
+  tab = null;
+
+  await assertNoDetachedWindows();
+});
+
+async function getWindows() {
+  await new Promise(resolve => manager.minimizeMemoryUsage(resolve));
+
+  let windows = new Set();
+  await new Promise(resolve =>
+    manager.getReports(
+      (process, path, kind, units, amount, description) => {
+        if (path.startsWith("explicit/window-objects/top")) {
+          path = path.replace("top(none)", "top");
+          path = path.substring(0, path.indexOf(")") + 1);
+          path = path.replace(/\\/g, "/");
+          windows.add(path);
+        }
+      },
+      null,
+      resolve,
+      null,
+      false
+    )
+  );
+
+  for (let win of windows) {
+    info(win);
+  }
+
+  return [...windows];
+}
+
+async function assertNoDetachedWindows() {
+  info("Remaining windows:");
+  let windows = await getWindows();
+
+  let noDetachedWindows = true;
+  for (let win of windows) {
+    if (win.includes("detached")) {
+      noDetachedWindows = false;
+      let url = win.substring(win.indexOf("(") + 1, win.indexOf(")"));
+      Assert.report(true, undefined, undefined, `detached window: ${url}`);
+    }
+  }
+
+  if (noDetachedWindows) {
+    Assert.report(false, undefined, undefined, "no detached windows");
+  }
+}
+
+async function openMessageFromFile(file) {
+  let fileURL = Services.io
+    .newFileURI(file)
+    .mutate()
+    .setQuery("type=application/x-message-display")
+    .finalize();
+
+  let winPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  window.openDialog(
+    "chrome://messenger/content/messageWindow.xhtml",
+    "_blank",
+    "all,chrome,dialog=no,status,toolbar",
+    fileURL
+  );
+  let win = await winPromise;
+  await BrowserTestUtils.waitForEvent(win, "MsgLoaded");
+  await TestUtils.waitForCondition(() => Services.focus.activeWindow == win);
+  return win;
+}
diff --git a/comm/mail/base/test/browser/browser_editMenu.js b/comm/mail/base/test/browser/browser_editMenu.js
new file mode 100644
index 0000000000..d320a12e36
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_editMenu.js
@@ -0,0 +1,511 @@
+/* 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/. */
+
+const { mailTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MailTestUtils.jsm"
+);
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { nsMailServer } = ChromeUtils.import(
+  "resource://testing-common/mailnews/Maild.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+
+/** @type MenuData */
+const editMenuData = {
+  menu_undo: { disabled: true },
+  menu_redo: { disabled: true },
+  menu_cut: { disabled: true },
+  menu_copy: { disabled: true },
+  menu_paste: { disabled: true },
+  menu_delete: { disabled: true, l10nID: "text-action-delete" },
+  menu_select: {},
+  menu_SelectAll: {},
+  menu_selectThread: { disabled: true },
+  menu_selectFlagged: { disabled: true },
+  menu_find: {},
+  menu_findCmd: { disabled: true },
+  menu_findAgainCmd: { disabled: true },
+  searchMailCmd: {},
+  glodaSearchCmd: {},
+  searchAddressesCmd: {},
+  menu_favoriteFolder: { disabled: true },
+  menu_properties: { disabled: true },
+  "calendar-properties-menuitem": { disabled: true },
+};
+if (AppConstants.platform == "linux") {
+  editMenuData.menu_preferences = {};
+  editMenuData.menu_accountmgr = {};
+}
+let helper = new MenuTestHelper("menu_Edit", editMenuData);
+
+let tabmail = document.getElementById("tabmail");
+let rootFolder, testFolder, testMessages, virtualFolder;
+let nntpRootFolder, nntpFolder;
+let imapRootFolder, imapFolder;
+
+add_setup(async function () {
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+  window.messenger.transactionManager.clear();
+
+  const generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("edit menu", null);
+  testFolder = rootFolder
+    .getChildNamed("edit menu")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator.makeMessages({}).map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  rootFolder.createSubfolder("edit menu virtual", null);
+  virtualFolder = rootFolder.getChildNamed("edit menu virtual");
+  virtualFolder.setFlag(Ci.nsMsgFolderFlags.Virtual);
+  let msgDatabase = virtualFolder.msgDatabase;
+  let folderInfo = msgDatabase.dBFolderInfo;
+  folderInfo.setCharProperty("searchStr", "ALL");
+  folderInfo.setCharProperty("searchFolderUri", testFolder.URI);
+
+  NNTPServer.open();
+  NNTPServer.addGroup("edit.menu.newsgroup");
+  let nntpAccount = MailServices.accounts.createAccount();
+  nntpAccount.incomingServer = MailServices.accounts.createIncomingServer(
+    `${nntpAccount.key}user`,
+    "localhost",
+    "nntp"
+  );
+  nntpAccount.incomingServer.port = NNTPServer.port;
+  nntpRootFolder = nntpAccount.incomingServer.rootFolder;
+  nntpRootFolder.createSubfolder("edit.menu.newsgroup", null);
+  nntpFolder = nntpRootFolder.getChildNamed("edit.menu.newsgroup");
+
+  IMAPServer.open();
+  let imapAccount = MailServices.accounts.createAccount();
+  imapAccount.addIdentity(MailServices.accounts.createIdentity());
+  imapAccount.incomingServer = MailServices.accounts.createIncomingServer(
+    `${imapAccount.key}user`,
+    "localhost",
+    "imap"
+  );
+  imapAccount.incomingServer.port = IMAPServer.port;
+  imapAccount.incomingServer.username = "user";
+  imapAccount.incomingServer.password = "password";
+  imapAccount.incomingServer.deleteModel = Ci.nsMsgImapDeleteModels.IMAPDelete;
+  imapRootFolder = imapAccount.incomingServer.rootFolder;
+  imapFolder = imapRootFolder.getFolderWithFlags(Ci.nsMsgFolderFlags.Inbox);
+  IMAPServer.addMessages(imapFolder, generator.makeMessages({}));
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    MailServices.accounts.removeAccount(nntpAccount, false);
+    MailServices.accounts.removeAccount(imapAccount, false);
+    NNTPServer.close();
+    IMAPServer.close();
+  });
+});
+
+add_task(async function test3PaneTab() {
+  await helper.testAllItems("mail3PaneTab");
+});
+
+/**
+ * Tests the "Delete" item in the menu. This item calls cmd_delete, which does
+ * various things depending on the current context.
+ */
+add_task(async function testDeleteItem() {
+  let about3Pane = tabmail.currentAbout3Pane;
+  let { displayFolder, folderTree, paneLayout, threadTree } = about3Pane;
+  paneLayout.messagePaneVisible = true;
+
+  // Focus on the folder tree and check that an NNTP account shows
+  // "Unsubscribe Folder". The account can't be deleted this way so the menu
+  // item should be disabled.
+
+  folderTree.focus();
+  displayFolder(nntpRootFolder);
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // Check that an NNTP folder shows "Unsubscribe Folder". Then check that
+  // calling cmd_delete actually attempts to unsubscribe the folder.
+
+  displayFolder(nntpFolder);
+  await Promise.all([
+    BrowserTestUtils.promiseAlertDialog("cancel"),
+    helper.activateItem("menu_delete", {
+      l10nID: "menu-edit-unsubscribe-newsgroup",
+    }),
+  ]);
+
+  // Check that a mail account shows "Delete Folder". The account can't be
+  // deleted this way so the menu item should be disabled.
+
+  displayFolder(rootFolder);
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // Check that focus on the folder tree and a mail folder shows "Delete
+  // Folder". Then check that calling cmd_delete actually attempts to delete
+  // the folder.
+
+  displayFolder(testFolder);
+  await Promise.all([
+    BrowserTestUtils.promiseAlertDialog("cancel"),
+    helper.activateItem("menu_delete", { l10nID: "menu-edit-delete-folder" }),
+  ]);
+  await new Promise(resolve => setTimeout(resolve));
+
+  // Focus the Quick Filter bar text box and check the menu item shows "Delete".
+
+  goDoCommand("cmd_showQuickFilterBar");
+  about3Pane.document.getElementById("qfb-qs-textbox").focus();
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // Focus on the thread tree with no messages selected and check the menu
+  // item shows "Delete".
+
+  threadTree.table.body.focus();
+  threadTree.selectedIndex = -1;
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // With one message selected check the menu item shows "Delete Message".
+
+  threadTree.selectedIndex = 0;
+  await helper.testItems({
+    menu_delete: {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 1 },
+    },
+  });
+
+  // Focus the Quick Filter bar text box and check the menu item shows "Delete".
+  // It should *not* show "Delete Message" even though one is selected.
+
+  about3Pane.document.getElementById("qfb-qs-textbox").focus();
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // Focus on about:message and check the menu item shows "Delete Message".
+
+  about3Pane.messageBrowser.focus();
+  await helper.testItems({
+    menu_delete: {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 1 },
+    },
+  });
+
+  // With multiple messages selected and check the menu item shows "Delete
+  // Messages". Then check that calling cmd_delete actually deletes the messages.
+
+  threadTree.table.body.focus();
+  threadTree.selectedIndices = [0, 1, 3];
+  await Promise.all([
+    new PromiseTestUtils.promiseFolderEvent(
+      testFolder,
+      "DeleteOrMoveMsgCompleted"
+    ),
+    helper.activateItem("menu_delete", {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 3 },
+    }),
+  ]);
+
+  // Load an IMAP folder with the "just mark deleted" model. With no messages
+  // selected check the menu item shows "Delete".
+
+  // Note that for each flag change, we wait for a second for the change to
+  // be sent to the IMAP server.
+
+  displayFolder(imapFolder);
+  await TestUtils.waitForCondition(() => threadTree.view.rowCount == 10);
+  let dbView = about3Pane.gDBView;
+  threadTree.selectedIndex = -1;
+  await helper.testItems({
+    menu_delete: {
+      disabled: true,
+      l10nID: "text-action-delete",
+    },
+  });
+
+  // With one message selected check the menu item shows "Delete Message".
+  // Then check that calling cmd_delete sets the flag on the message.
+
+  threadTree.selectedIndex = 0;
+  let message = dbView.getMsgHdrAt(0);
+  await helper.activateItem("menu_delete", {
+    l10nID: "menu-edit-delete-messages",
+    l10nArgs: { count: 1 },
+  });
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    message.flags & Ci.nsMsgMessageFlags.IMAPDeleted,
+    "IMAPDeleted flag should be set"
+  );
+
+  // Check the menu item now shows "Undelete Message" and that calling
+  // cmd_delete clears the flag on the message.
+
+  // The delete operation moved the selection, go back.
+  threadTree.selectedIndex = 0;
+  await helper.activateItem("menu_delete", {
+    l10nID: "menu-edit-undelete-messages",
+    l10nArgs: { count: 1 },
+  });
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    !(message.flags & Ci.nsMsgMessageFlags.IMAPDeleted),
+    "IMAPDeleted flag should be cleared on message 0"
+  );
+
+  // Check the menu item again shows "Delete Message".
+
+  await helper.testItems({
+    menu_delete: {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 1 },
+    },
+  });
+
+  // With multiple messages selected and check the menu item shows "Delete
+  // Messages". Check that calling cmd_delete sets the flag on the messages.
+
+  threadTree.selectedIndices = [1, 3, 5];
+  let messages = dbView.getSelectedMsgHdrs();
+  await helper.testItems({
+    menu_delete: {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 3 },
+    },
+  });
+  await helper.activateItem("menu_delete");
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    messages.every(m => m.flags & Ci.nsMsgMessageFlags.IMAPDeleted),
+    "IMAPDeleted flags should be set"
+  );
+
+  // Check the menu item now shows "Undelete Messages" and that calling
+  // cmd_delete clears the flag on the messages.
+
+  threadTree.selectedIndices = [1, 3, 5];
+  await helper.activateItem("menu_delete", {
+    l10nID: "menu-edit-undelete-messages",
+    l10nArgs: { count: 3 },
+  });
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(r => setTimeout(r, 1000));
+  Assert.ok(
+    messages.every(m => !(m.flags & Ci.nsMsgMessageFlags.IMAPDeleted)),
+    "IMAPDeleted flags should be cleared"
+  );
+
+  // Check the menu item again shows "Delete Messages".
+
+  threadTree.selectedIndices = [1, 3, 5];
+  await helper.testItems({
+    menu_delete: {
+      l10nID: "menu-edit-delete-messages",
+      l10nArgs: { count: 3 },
+    },
+  });
+
+  Services.focus.focusedWindow = window;
+}).__skipMe = AppConstants.DEBUG; // Too unreliable.
+
+/**
+ * Tests the "Favorite Folder" item in the menu is checked/unchecked as expected.
+ */
+add_task(async function testFavoriteFolderItem() {
+  let { displayFolder } = tabmail.currentAbout3Pane;
+
+  testFolder.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  displayFolder(testFolder);
+  await helper.testItems({ menu_favoriteFolder: {} });
+
+  testFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await helper.activateItem("menu_favoriteFolder", { checked: true });
+  Assert.ok(
+    !testFolder.getFlag(Ci.nsMsgFolderFlags.Favorite),
+    "favorite flag should be cleared"
+  );
+
+  await helper.activateItem("menu_favoriteFolder", {});
+  Assert.ok(
+    testFolder.getFlag(Ci.nsMsgFolderFlags.Favorite),
+    "favorite flag should be set"
+  );
+
+  testFolder.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+});
+
+/**
+ * Tests the "Properties" item in the menu is enabled/disabled as expected,
+ * and has the correct label.
+ */
+add_task(async function testPropertiesItem() {
+  async function testDialog(folder, data, which = "folderProps.xhtml") {
+    await Promise.all([
+      BrowserTestUtils.promiseAlertDialog(
+        undefined,
+        `chrome://messenger/content/${which}`,
+        {
+          callback(win) {
+            Assert.ok(true, "folder properties dialog opened");
+            Assert.equal(
+              win.gMsgFolder.URI,
+              folder.URI,
+              "dialog has correct folder"
+            );
+            win.document.querySelector("dialog").getButton("cancel").click();
+          },
+        }
+      ),
+      helper.activateItem("menu_properties", data),
+    ]);
+    await SimpleTest.promiseFocus(window);
+  }
+
+  let { displayFolder } = tabmail.currentAbout3Pane;
+
+  displayFolder(rootFolder);
+  await helper.testItems({
+    menu_properties: { disabled: true, l10nID: "menu-edit-properties" },
+  });
+
+  displayFolder(testFolder);
+  await testDialog(testFolder, { l10nID: "menu-edit-folder-properties" });
+
+  displayFolder(virtualFolder);
+  await testDialog(
+    virtualFolder,
+    { l10nID: "menu-edit-folder-properties" },
+    "virtualFolderProperties.xhtml"
+  );
+
+  displayFolder(imapRootFolder);
+  await helper.testItems({
+    menu_properties: { disabled: true, l10nID: "menu-edit-properties" },
+  });
+
+  displayFolder(imapFolder);
+  await testDialog(imapFolder, { l10nID: "menu-edit-folder-properties" });
+
+  displayFolder(nntpRootFolder);
+  await helper.testItems({
+    menu_properties: { disabled: true, l10nID: "menu-edit-properties" },
+  });
+
+  displayFolder(nntpFolder);
+  await testDialog(nntpFolder, { l10nID: "menu-edit-newsgroup-properties" });
+});
+
+var NNTPServer = {
+  open() {
+    let { NNTP_RFC977_handler, NntpDaemon } = ChromeUtils.import(
+      "resource://testing-common/mailnews/Nntpd.jsm"
+    );
+
+    this.daemon = new NntpDaemon();
+    this.server = new nsMailServer(
+      daemon => new NNTP_RFC977_handler(daemon),
+      this.daemon
+    );
+    this.server.start();
+
+    registerCleanupFunction(() => this.close());
+  },
+
+  close() {
+    this.server.stop();
+  },
+
+  get port() {
+    return this.server.port;
+  },
+
+  addGroup(group) {
+    return this.daemon.addGroup(group);
+  },
+};
+
+var IMAPServer = {
+  open() {
+    let { ImapDaemon, ImapMessage, IMAP_RFC3501_handler } = ChromeUtils.import(
+      "resource://testing-common/mailnews/Imapd.jsm"
+    );
+    IMAPServer.ImapMessage = ImapMessage;
+
+    this.daemon = new ImapDaemon();
+    this.server = new nsMailServer(
+      daemon => new IMAP_RFC3501_handler(daemon),
+      this.daemon
+    );
+    this.server.start();
+
+    registerCleanupFunction(() => this.close());
+  },
+  close() {
+    this.server.stop();
+  },
+  get port() {
+    return this.server.port;
+  },
+
+  addMessages(folder, messages) {
+    let fakeFolder = IMAPServer.daemon.getMailbox(folder.name);
+    messages.forEach(message => {
+      if (typeof message != "string") {
+        message = message.toMessageString();
+      }
+      let msgURI = Services.io.newURI(
+        "data:text/plain;base64," + btoa(message)
+      );
+      let imapMsg = new IMAPServer.ImapMessage(
+        msgURI.spec,
+        fakeFolder.uidnext++,
+        []
+      );
+      fakeFolder.addMessage(imapMsg);
+    });
+
+    return new Promise(resolve =>
+      mailTestUtils.updateFolderAndNotify(folder, resolve)
+    );
+  },
+};
diff --git a/comm/mail/base/test/browser/browser_fileMenu.js b/comm/mail/base/test/browser/browser_fileMenu.js
new file mode 100644
index 0000000000..927628eb93
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_fileMenu.js
@@ -0,0 +1,137 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+/** @type MenuData */
+const fileMenuData = {
+  menu_New: {},
+  menu_newNewMsgCmd: {},
+  "calendar-new-event-menuitem": { hidden: true },
+  "calendar-new-task-menuitem": { hidden: true },
+  menu_newFolder: { hidden: ["mailMessageTab", "contentTab"] },
+  menu_newVirtualFolder: { hidden: ["mailMessageTab", "contentTab"] },
+  newCreateEmailAccountMenuItem: {},
+  newMailAccountMenuItem: {},
+  newIMAccountMenuItem: {},
+  newFeedAccountMenuItem: {},
+  newNewsgroupAccountMenuItem: {},
+  "calendar-new-calendar-menuitem": {},
+  menu_newCard: {},
+  newIMContactMenuItem: { disabled: true },
+  menu_Open: {},
+  openMessageFileMenuitem: {},
+  "calendar-open-calendar-file-menuitem": {},
+  menu_close: {},
+  "calendar-save-menuitem": { hidden: true },
+  "calendar-save-and-close-menuitem": { hidden: true },
+  menu_saveAs: {},
+  menu_saveAsFile: { disabled: ["mail3PaneTab", "contentTab"] },
+  menu_saveAsTemplate: { disabled: ["mail3PaneTab", "contentTab"] },
+  menu_getAllNewMsg: {},
+  menu_getnewmsgs_all_accounts: { disabled: true },
+  menu_getnewmsgs_current_account: { disabled: true },
+  menu_getnextnmsg: { hidden: true },
+  menu_sendunsentmsgs: { disabled: true },
+  menu_subscribe: { disabled: true },
+  menu_deleteFolder: { disabled: true },
+  menu_renameFolder: { disabled: true },
+  menu_compactFolder: { disabled: ["mailMessageTab", "contentTab"] },
+  menu_emptyTrash: { disabled: ["mailMessageTab", "contentTab"] },
+  offlineMenuItem: {},
+  goOfflineMenuItem: {},
+  menu_synchronizeOffline: {},
+  menu_settingsOffline: { disabled: true },
+  menu_downloadFlagged: { disabled: true },
+  menu_downloadSelected: { disabled: true },
+  printMenuItem: { disabled: ["mail3PaneTab"] },
+  menu_FileQuitItem: {},
+};
+let helper = new MenuTestHelper("menu_File", fileMenuData);
+
+let tabmail = document.getElementById("tabmail");
+let inboxFolder, plainFolder, rootFolder, testMessages, trashFolder;
+
+add_setup(async function () {
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("file menu inbox", null);
+  inboxFolder = rootFolder
+    .getChildNamed("file menu inbox")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  inboxFolder.setFlag(Ci.nsMsgFolderFlags.Inbox);
+  inboxFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...inboxFolder.messages];
+
+  rootFolder.createSubfolder("file menu plain", null);
+  plainFolder = rootFolder.getChildNamed("file menu plain");
+
+  trashFolder = rootFolder.getFolderWithFlags(Ci.nsMsgFolderFlags.Trash);
+
+  window.OpenMessageInNewTab(testMessages[0], { background: true });
+  await BrowserTestUtils.waitForEvent(
+    tabmail.tabInfo[1].chromeBrowser,
+    "MsgLoaded"
+  );
+
+  window.openTab("contentTab", {
+    url: "https://example.com/",
+    background: true,
+  });
+
+  registerCleanupFunction(() => {
+    tabmail.closeOtherTabs(0);
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function test3PaneTab() {
+  tabmail.currentAbout3Pane.displayFolder(rootFolder);
+  await helper.testAllItems("mail3PaneTab");
+
+  tabmail.currentAbout3Pane.displayFolder(inboxFolder);
+  await helper.testItems({
+    menu_deleteFolder: { disabled: true },
+    menu_renameFolder: { disabled: true },
+    menu_compactFolder: { disabled: false },
+    menu_emptyTrash: {},
+  });
+
+  tabmail.currentAbout3Pane.displayFolder(plainFolder);
+  await helper.testItems({
+    menu_deleteFolder: { disabled: false },
+    menu_renameFolder: { disabled: false },
+    menu_compactFolder: { disabled: false },
+    menu_emptyTrash: {},
+  });
+
+  tabmail.currentAbout3Pane.displayFolder(trashFolder);
+  await helper.testItems({
+    menu_deleteFolder: { disabled: true },
+    menu_renameFolder: { disabled: true },
+    menu_compactFolder: { disabled: false },
+    menu_emptyTrash: {},
+  });
+});
+
+add_task(async function testMessageTab() {
+  tabmail.switchToTab(1);
+  await helper.testAllItems("mailMessageTab");
+});
+
+add_task(async function testContentTab() {
+  tabmail.switchToTab(2);
+  await helper.testAllItems("contentTab");
+});
diff --git a/comm/mail/base/test/browser/browser_folderPaneContext.js b/comm/mail/base/test/browser/browser_folderPaneContext.js
new file mode 100644
index 0000000000..843965c966
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_folderPaneContext.js
@@ -0,0 +1,198 @@
+/* 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/. */
+
+var { FeedUtils } = ChromeUtils.import("resource:///modules/FeedUtils.jsm");
+
+let servers = ["server", "rssRoot"];
+let realFolders = ["plain", "inbox", "junk", "trash", "rssFeed"];
+
+const folderPaneContextData = {
+  "folderPaneContext-getMessages": [...servers, "rssFeed"],
+  "folderPaneContext-pauseAllUpdates": ["rssRoot"],
+  "folderPaneContext-pauseUpdates": ["rssFeed"],
+  "folderPaneContext-openNewTab": true,
+  "folderPaneContext-openNewWindow": true,
+  "folderPaneContext-searchMessages": [...servers, ...realFolders],
+  "folderPaneContext-subscribe": ["rssRoot", "rssFeed"],
+  "folderPaneContext-newsUnsubscribe": [],
+  "folderPaneContext-new": [...servers, ...realFolders],
+  "folderPaneContext-remove": ["plain", "junk", "virtual", "rssFeed"],
+  "folderPaneContext-rename": ["plain", "junk", "virtual", "rssFeed"],
+  "folderPaneContext-compact": [...servers, ...realFolders],
+  "folderPaneContext-markMailFolderAllRead": [...realFolders, "virtual"],
+  "folderPaneContext-markNewsgroupAllRead": [],
+  "folderPaneContext-emptyTrash": ["trash"],
+  "folderPaneContext-emptyJunk": ["junk"],
+  "folderPaneContext-sendUnsentMessages": [],
+  "folderPaneContext-favoriteFolder": [...realFolders, "virtual"],
+  "folderPaneContext-properties": [...realFolders, "virtual"],
+  "folderPaneContext-markAllFoldersRead": [...servers],
+  "folderPaneContext-settings": [...servers],
+  "folderPaneContext-manageTags": ["tags"],
+  "folderPaneContext-moveMenu": ["plain", "virtual", "rssFeed"],
+  "folderPaneContext-copyMenu": ["plain", "rssFeed"],
+};
+
+let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+let context = about3Pane.document.getElementById("folderPaneContext");
+let rootFolder,
+  plainFolder,
+  inboxFolder,
+  junkFolder,
+  trashFolder,
+  virtualFolder;
+let rssRootFolder, rssFeedFolder;
+let tagsFolder;
+
+add_setup(async function () {
+  let account = MailServices.accounts.createAccount();
+  account.incomingServer = MailServices.accounts.createIncomingServer(
+    `${account.key}user`,
+    "localhost",
+    "pop3"
+  );
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder.QueryInterface(
+    Ci.nsIMsgLocalMailFolder
+  );
+
+  plainFolder = rootFolder.createLocalSubfolder("folderPaneContextFolder");
+  inboxFolder = rootFolder.createLocalSubfolder("folderPaneContextInbox");
+  inboxFolder.setFlag(Ci.nsMsgFolderFlags.Inbox);
+  junkFolder = rootFolder.createLocalSubfolder("folderPaneContextJunk");
+  junkFolder.setFlag(Ci.nsMsgFolderFlags.Junk);
+  trashFolder = rootFolder.createLocalSubfolder("folderPaneContextTrash");
+  trashFolder.setFlag(Ci.nsMsgFolderFlags.Trash);
+
+  virtualFolder = rootFolder.createLocalSubfolder("folderPaneContextVirtual");
+  virtualFolder.setFlag(Ci.nsMsgFolderFlags.Virtual);
+  let msgDatabase = virtualFolder.msgDatabase;
+  let folderInfo = msgDatabase.dBFolderInfo;
+  folderInfo.setCharProperty("searchStr", "ALL");
+  folderInfo.setCharProperty("searchFolderUri", plainFolder.URI);
+
+  let rssAccount = FeedUtils.createRssAccount("rss");
+  rssRootFolder = rssAccount.incomingServer.rootFolder;
+  FeedUtils.subscribeToFeed(
+    "https://example.org/browser/comm/mail/base/test/browser/files/rss.xml?folderPaneContext",
+    rssRootFolder,
+    null
+  );
+  await TestUtils.waitForCondition(() => rssRootFolder.subFolders.length == 2);
+  rssFeedFolder = rssRootFolder.getChildNamed("Test Feed");
+
+  about3Pane.folderPane.activeModes = ["all", "tags"];
+  tagsFolder = about3Pane.folderPane._modes.tags._tagsFolder.subFolders[0];
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    MailServices.accounts.removeAccount(rssAccount, false);
+    about3Pane.folderPane.activeModes = ["all"];
+  });
+});
+
+add_task(async function () {
+  // Check the menu has the right items for the selected folder.
+  leftClickOn(rootFolder);
+  await rightClickOn(rootFolder, "server");
+  leftClickOn(plainFolder);
+  await rightClickOn(plainFolder, "plain");
+  leftClickOn(inboxFolder);
+  await rightClickOn(inboxFolder, "inbox");
+  leftClickOn(junkFolder);
+  await rightClickOn(junkFolder, "junk");
+  leftClickOn(trashFolder);
+  await rightClickOn(trashFolder, "trash");
+  leftClickOn(virtualFolder);
+  await rightClickOn(virtualFolder, "virtual");
+  leftClickOn(rssRootFolder);
+  await rightClickOn(rssRootFolder, "rssRoot");
+  leftClickOn(rssFeedFolder);
+  await rightClickOn(rssFeedFolder, "rssFeed");
+  leftClickOn(tagsFolder);
+  await rightClickOn(tagsFolder, "tags");
+
+  // Check the menu has the right items when the selected folder is not the
+  // folder that was right-clicked on.
+  await rightClickOn(rootFolder, "server");
+  leftClickOn(rootFolder);
+  await rightClickOn(plainFolder, "plain");
+  await rightClickOn(inboxFolder, "inbox");
+  await rightClickOn(junkFolder, "junk");
+  await rightClickOn(trashFolder, "trash");
+  await rightClickOn(virtualFolder, "virtual");
+  await rightClickOn(rssRootFolder, "rssRoot");
+  await rightClickOn(rssFeedFolder, "rssFeed");
+  await rightClickOn(tagsFolder, "tags");
+});
+
+function leftClickOn(folder) {
+  EventUtils.synthesizeMouseAtCenter(
+    about3Pane.folderPane.getRowForFolder(folder).querySelector(".name"),
+    {},
+    about3Pane
+  );
+}
+
+async function rightClickOn(folder, mode) {
+  let shownPromise = BrowserTestUtils.waitForEvent(context, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    about3Pane.folderPane.getRowForFolder(folder).querySelector(".name"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(context, mode);
+  let hiddenPromise = BrowserTestUtils.waitForEvent(context, "popuphidden");
+  context.hidePopup();
+  await hiddenPromise;
+}
+
+function checkMenuitems(menu, mode) {
+  if (!mode) {
+    // Menu should not be shown.
+    Assert.equal(menu.state, "closed");
+    return;
+  }
+
+  Assert.notEqual(menu.state, "closed");
+
+  let expectedItems = [];
+  for (let [id, modes] of Object.entries(folderPaneContextData)) {
+    if (modes === true || modes.includes(mode)) {
+      expectedItems.push(id);
+    }
+  }
+
+  let actualItems = [];
+  for (let item of menu.children) {
+    if (["menu", "menuitem"].includes(item.localName) && !item.hidden) {
+      actualItems.push(item.id);
+    }
+  }
+
+  let notFoundItems = expectedItems.filter(i => !actualItems.includes(i));
+  if (notFoundItems.length) {
+    Assert.report(
+      true,
+      undefined,
+      undefined,
+      "items expected but not found: " + notFoundItems.join(", ")
+    );
+  }
+
+  let unexpectedItems = actualItems.filter(i => !expectedItems.includes(i));
+  if (unexpectedItems.length) {
+    Assert.report(
+      true,
+      undefined,
+      undefined,
+      "items found but not expected: " + unexpectedItems.join(", ")
+    );
+  }
+
+  if (notFoundItems.length + unexpectedItems.length == 0) {
+    Assert.report(false, undefined, undefined, `all ${mode} items are correct`);
+  }
+}
diff --git a/comm/mail/base/test/browser/browser_folderTreeProperties.js b/comm/mail/base/test/browser/browser_folderTreeProperties.js
new file mode 100644
index 0000000000..6fdfa4f2ad
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_folderTreeProperties.js
@@ -0,0 +1,236 @@
+/* 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/. */
+
+var { FolderTreeProperties } = ChromeUtils.import(
+  "resource:///modules/FolderTreeProperties.jsm"
+);
+
+const TRASH_COLOR_HEX = "#52507c";
+const TRASH_COLOR_RGB = "rgb(82, 80, 124)";
+const VIRTUAL_COLOR_HEX = "#cd26a5";
+const VIRTUAL_COLOR_RGB = "rgb(205, 38, 165)";
+
+let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+let { folderPane, folderTree, threadTree } = about3Pane;
+let rootFolder, trashFolder, trashFolderRows, virtualFolder, virtualFolderRows;
+
+add_setup(async function () {
+  Services.prefs.setIntPref("ui.prefersReducedMotion", 1);
+  FolderTreeProperties.resetColors();
+
+  let account = MailServices.accounts.createAccount();
+  account.incomingServer = MailServices.accounts.createIncomingServer(
+    `${account.key}user`,
+    "localhost",
+    "none"
+  );
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  trashFolder = rootFolder.getFolderWithFlags(Ci.nsMsgFolderFlags.Trash);
+  trashFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+
+  rootFolder.createSubfolder("folderTreePropsVirtual", null);
+  virtualFolder = rootFolder.getChildNamed("folderTreePropsVirtual");
+  virtualFolder.flags |=
+    Ci.nsMsgFolderFlags.Virtual | Ci.nsMsgFolderFlags.Favorite;
+  let virtualFolderInfo = virtualFolder.msgDatabase.dBFolderInfo;
+  virtualFolderInfo.setCharProperty("searchStr", "ALL");
+  virtualFolderInfo.setCharProperty("searchFolderUri", trashFolder.URI);
+
+  // Test the colours change in all folder modes, not just the current one.
+  folderPane.activeModes = ["all", "favorite"];
+  await new Promise(resolve => setTimeout(resolve));
+  for (let row of folderTree.querySelectorAll(".collapsed")) {
+    folderTree.expandRow(row);
+  }
+
+  trashFolderRows = {
+    all: folderPane.getRowForFolder(trashFolder, "all"),
+    favorite: folderPane.getRowForFolder(trashFolder, "favorite"),
+  };
+  virtualFolderRows = {
+    all: folderPane.getRowForFolder(virtualFolder, "all"),
+    favorite: folderPane.getRowForFolder(virtualFolder, "favorite"),
+  };
+
+  registerCleanupFunction(async () => {
+    folderPane.activeModes = ["all"];
+    MailServices.accounts.removeAccount(account, false);
+    FolderTreeProperties.resetColors();
+    Services.prefs.clearUserPref("ui.prefersReducedMotion");
+  });
+});
+
+add_task(async function testNormalFolderColors() {
+  await subtestColors(trashFolderRows, TRASH_COLOR_HEX, TRASH_COLOR_RGB);
+});
+
+add_task(async function testVirtualFolderColors() {
+  await subtestColors(virtualFolderRows, VIRTUAL_COLOR_HEX, VIRTUAL_COLOR_RGB);
+});
+
+async function subtestColors(rows, defaultHex, defaultRGB) {
+  assertRowColors(rows, defaultRGB);
+
+  // Accept the dialog without changing anything.
+  let dialog = await openFolderProperties(rows.all);
+  dialog.assertColor(defaultHex);
+  await dialog.accept();
+  assertRowColors(rows, defaultRGB);
+
+  // Cancel the dialog without changing anything.
+  dialog = await openFolderProperties(rows.favorite);
+  dialog.assertColor(defaultHex);
+  await dialog.cancel();
+  assertRowColors(rows, defaultRGB);
+
+  // Set a non-default color.
+  dialog = await openFolderProperties(rows.all);
+  dialog.assertColor(defaultHex);
+  await dialog.setColor("#ff6600");
+  assertRowColors(rows, "rgb(255, 102, 0)");
+  await dialog.accept();
+  assertRowColors(rows, "rgb(255, 102, 0)");
+
+  // Reset to the default color.
+  dialog = await openFolderProperties(rows.favorite);
+  dialog.assertColor("#ff6600");
+  dialog.resetColor();
+  dialog.assertColor(defaultHex);
+  assertRowColors(rows, defaultRGB);
+  await dialog.accept();
+  assertRowColors(rows, defaultRGB);
+
+  // Set a color, but cancel the dialog.
+  dialog = await openFolderProperties(rows.all);
+  dialog.assertColor(defaultHex);
+  await dialog.setColor("#ffcc00");
+  assertRowColors(rows, "rgb(255, 204, 0)");
+  await dialog.cancel();
+  assertRowColors(rows, defaultRGB);
+
+  // Set a color, but reset it and accept the dialog.
+  dialog = await openFolderProperties(rows.favorite);
+  dialog.assertColor(defaultHex);
+  await dialog.setColor("#00cc00");
+  assertRowColors(rows, "rgb(0, 204, 0)");
+  dialog.resetColor();
+  dialog.assertColor(defaultHex);
+  assertRowColors(rows, defaultRGB);
+  await dialog.accept();
+  assertRowColors(rows, defaultRGB);
+
+  // Set a non-default color.
+  dialog = await openFolderProperties(rows.all);
+  dialog.assertColor(defaultHex);
+  await dialog.setColor("#0000cc");
+  assertRowColors(rows, "rgb(0, 0, 204)");
+  await dialog.accept();
+  assertRowColors(rows, "rgb(0, 0, 204)");
+
+  // Accept the dialog without changing anything.
+  dialog = await openFolderProperties(rows.favorite);
+  dialog.assertColor("#0000cc");
+  await dialog.accept();
+  assertRowColors(rows, "rgb(0, 0, 204)");
+
+  // Cancel the dialog without changing anything.
+  dialog = await openFolderProperties(rows.all);
+  dialog.assertColor("#0000cc");
+  await dialog.cancel();
+  assertRowColors(rows, "rgb(0, 0, 204)");
+
+  // Reset the color and cancel the dialog.
+  dialog = await openFolderProperties(rows.favorite);
+  dialog.assertColor("#0000cc");
+  dialog.resetColor();
+  dialog.assertColor(defaultHex);
+  assertRowColors(rows, defaultRGB);
+  await dialog.cancel();
+  assertRowColors(rows, "rgb(0, 0, 204)");
+
+  // Reset the color, pick a new one, and accept the dialog.
+  dialog = await openFolderProperties(rows.all);
+  dialog.assertColor("#0000cc");
+  dialog.resetColor();
+  dialog.assertColor(defaultHex);
+  assertRowColors(rows, defaultRGB);
+  await dialog.setColor("#0066cc");
+  assertRowColors(rows, "rgb(0, 102, 204)");
+  await dialog.accept();
+  assertRowColors(rows, "rgb(0, 102, 204)");
+}
+
+async function openFolderProperties(row) {
+  let folderPaneContext =
+    about3Pane.document.getElementById("folderPaneContext");
+  let folderPaneContextProperties = about3Pane.document.getElementById(
+    "folderPaneContext-properties"
+  );
+
+  let shownPromise = BrowserTestUtils.waitForEvent(
+    folderPaneContext,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    row.querySelector(".name"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+
+  let windowOpenedPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  folderPaneContext.activateItem(folderPaneContextProperties);
+  let dialogWindow = await windowOpenedPromise;
+  let dialogDocument = dialogWindow.document;
+
+  let colorButton = dialogDocument.getElementById("color");
+  let resetColorButton = dialogDocument.getElementById("resetColor");
+  let folderPropertiesDialog = dialogDocument.querySelector("dialog");
+
+  return {
+    assertColor(hex) {
+      Assert.equal(colorButton.value, hex);
+    },
+    async setColor(hex) {
+      SpecialPowers.MockColorPicker.init(dialogWindow);
+      SpecialPowers.MockColorPicker.returnColor = hex;
+      let inputPromise = BrowserTestUtils.waitForEvent(colorButton, "input");
+      EventUtils.synthesizeMouseAtCenter(colorButton, {}, dialogWindow);
+      await inputPromise;
+      SpecialPowers.MockColorPicker.cleanup();
+    },
+    resetColor() {
+      EventUtils.synthesizeMouseAtCenter(resetColorButton, {}, dialogWindow);
+    },
+    async accept() {
+      let windowClosedPromise = BrowserTestUtils.domWindowClosed(dialogWindow);
+      EventUtils.synthesizeMouseAtCenter(
+        folderPropertiesDialog.getButton("accept"),
+        {},
+        dialogWindow
+      );
+      await windowClosedPromise;
+    },
+    async cancel() {
+      let windowClosedPromise = BrowserTestUtils.domWindowClosed(dialogWindow);
+      EventUtils.synthesizeMouseAtCenter(
+        folderPropertiesDialog.getButton("cancel"),
+        {},
+        dialogWindow
+      );
+      await windowClosedPromise;
+    },
+  };
+}
+
+function assertRowColors(rows, rgb) {
+  // Always move the focus away from the row otherwise we might get the selected
+  // state which turns the icon white.
+  threadTree.table.body.focus();
+  for (let row of Object.values(rows)) {
+    Assert.equal(getComputedStyle(row.querySelector(".icon")).stroke, rgb);
+  }
+}
diff --git a/comm/mail/base/test/browser/browser_folderTreeQuirks.js b/comm/mail/base/test/browser/browser_folderTreeQuirks.js
new file mode 100644
index 0000000000..885be9242c
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_folderTreeQuirks.js
@@ -0,0 +1,1450 @@
+/* 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/. */
+
+const { MessageGenerator, SyntheticMessageSet } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { MessageInjection } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageInjection.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+const { VirtualFolderHelper } = ChromeUtils.import(
+  "resource:///modules/VirtualFolderWrapper.jsm"
+);
+
+let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+let { folderPane, folderTree, threadTree } = about3Pane;
+let account,
+  rootFolder,
+  inboxFolder,
+  trashFolder,
+  outboxFolder,
+  folderA,
+  folderB,
+  folderC,
+  moreButton,
+  moreContext;
+let generator = new MessageGenerator();
+let messageInjection = new MessageInjection(
+  {
+    mode: "local",
+  },
+  generator
+);
+
+add_setup(async function () {
+  account = MailServices.accounts.accounts[0];
+  rootFolder = account.incomingServer.rootFolder;
+  inboxFolder = rootFolder.getChildNamed("Inbox");
+  trashFolder = rootFolder.getChildNamed("Trash");
+  outboxFolder = rootFolder.getChildNamed("Outbox");
+  moreButton = about3Pane.document.querySelector("#folderPaneMoreButton");
+  moreContext = about3Pane.document.getElementById("folderPaneMoreContext");
+
+  rootFolder.createSubfolder("folderTreeQuirksA", null);
+  folderA = rootFolder
+    .getChildNamed("folderTreeQuirksA")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  folderA.createSubfolder("folderTreeQuirksB", null);
+  folderB = folderA
+    .getChildNamed("folderTreeQuirksB")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  folderB.createSubfolder("folderTreeQuirksC", null);
+  folderC = folderB
+    .getChildNamed("folderTreeQuirksC")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  messageInjection.addSetsToFolders(
+    [folderA, folderB, folderC],
+    [
+      new SyntheticMessageSet(generator.makeMessages({ read: true })),
+      new SyntheticMessageSet(generator.makeMessages({ read: true })),
+      new SyntheticMessageSet(generator.makeMessages({ read: true })),
+    ]
+  );
+
+  Services.prefs.setIntPref("ui.prefersReducedMotion", 1);
+  about3Pane.paneLayout.messagePaneVisible = false;
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.clearUserPref("ui.prefersReducedMotion");
+    folderPane.activeModes = ["all"];
+    Services.xulStore.removeDocument(
+      "chrome://messenger/content/messenger.xhtml"
+    );
+    about3Pane.paneLayout.messagePaneVisible = true;
+  });
+});
+
+/**
+ * Tests the Favorite Folders mode.
+ */
+add_task(async function testFavoriteFolders() {
+  folderPane.activeModes = ["all", "favorite"];
+  await checkModeListItems("favorite", []);
+
+  folderA.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [rootFolder, folderA]);
+
+  folderA.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+
+  folderB.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [rootFolder, folderA, folderB]);
+
+  folderB.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+
+  folderC.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  folderA.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [rootFolder, folderA, folderB, folderC]);
+
+  folderA.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [rootFolder, folderA, folderB, folderC]);
+
+  folderC.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+});
+
+/**
+ * Tests the compact Favorite Folders mode.
+ */
+add_task(async function testCompactFavoriteFolders() {
+  folderPane.activeModes = ["all", "favorite"];
+  folderPane.isCompact = true;
+  await checkModeListItems("favorite", []);
+
+  folderA.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderA]);
+
+  folderA.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+
+  folderB.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderB]);
+
+  folderB.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+
+  folderC.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  folderA.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderA, folderC]); // c, a
+
+  folderA.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderC]);
+
+  folderC.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", []);
+
+  // Test with multiple accounts.
+
+  let foo = MailServices.accounts.createAccount();
+  foo.incomingServer = MailServices.accounts.createIncomingServer(
+    `${foo.key}user`,
+    "localhost",
+    "none"
+  );
+  let fooRootFolder = foo.incomingServer.rootFolder;
+  let fooTrashFolder = fooRootFolder.getChildNamed("Trash");
+
+  fooTrashFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [fooTrashFolder]);
+
+  folderC.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [fooTrashFolder, folderC]);
+
+  MailServices.accounts.reorderAccounts([account.key, foo.key]);
+  await checkModeListItems("favorite", [folderC, fooTrashFolder]);
+
+  fooTrashFolder.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderC]);
+
+  fooTrashFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [folderC, fooTrashFolder]);
+
+  folderC.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  await checkModeListItems("favorite", [fooTrashFolder]);
+
+  // Clean up.
+
+  MailServices.accounts.removeAccount(foo, false);
+  await checkModeListItems("favorite", []);
+  folderPane.isCompact = false;
+});
+
+/**
+ * Tests the Unread Folders mode.
+ */
+add_task(async function testUnreadFolders() {
+  let folderAMessages = [...folderA.messages];
+  let folderBMessages = [...folderB.messages];
+  let folderCMessages = [...folderC.messages];
+
+  folderPane.activeModes = ["all", "unread"];
+  await checkModeListItems("unread", []);
+
+  folderAMessages[0].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA]);
+
+  folderAMessages[1].markRead(false);
+  folderAMessages[2].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA]);
+
+  window.MsgMarkAllRead([folderA]);
+  await checkModeListItems("unread", [rootFolder, folderA]);
+
+  folderAMessages[0].markRead(false);
+  folderBMessages[0].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB]);
+
+  folderCMessages[0].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  folderBMessages[0].markRead(true);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  folderAMessages[0].markRead(true);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  folderCMessages[0].markRead(true);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  folderCMessages[0].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  folderCMessages[1].markRead(false);
+  folderCMessages[2].markRead(false);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+
+  window.MsgMarkAllRead([folderC]);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+});
+
+/**
+ * Tests the compact Unread Folders mode.
+ */
+add_task(async function testCompactUnreadFolders() {
+  let folderAMessages = [...folderA.messages];
+  let folderBMessages = [...folderB.messages];
+  let folderCMessages = [...folderC.messages];
+
+  folderPane.activeModes = ["all", "unread"];
+  folderPane.isCompact = true;
+  await checkModeListItems("unread", []);
+
+  folderAMessages[0].markRead(false);
+  await checkModeListItems("unread", [folderA]);
+
+  folderAMessages[1].markRead(false);
+  folderAMessages[2].markRead(false);
+  await checkModeListItems("unread", [folderA]);
+
+  window.MsgMarkAllRead([folderA]);
+  await checkModeListItems("unread", [folderA]);
+
+  folderAMessages[0].markRead(false);
+  folderBMessages[0].markRead(false);
+  await checkModeListItems("unread", [folderA, folderB]);
+
+  folderCMessages[0].markRead(false);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  folderBMessages[0].markRead(true);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  folderAMessages[0].markRead(true);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  folderCMessages[0].markRead(true);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  folderCMessages[0].markRead(false);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  folderCMessages[1].markRead(false);
+  folderCMessages[2].markRead(false);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  window.MsgMarkAllRead([folderC]);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+
+  // Test with multiple accounts.
+
+  let foo = MailServices.accounts.createAccount();
+  foo.incomingServer = MailServices.accounts.createIncomingServer(
+    `${foo.key}user`,
+    "localhost",
+    "none"
+  );
+  let fooRootFolder = foo.incomingServer.rootFolder;
+  let fooTrashFolder = fooRootFolder.getChildNamed("Trash");
+
+  let generator = new MessageGenerator();
+  fooTrashFolder
+    .QueryInterface(Ci.nsIMsgLocalMailFolder)
+    .addMessage(generator.makeMessages({}).map(m => m.toMboxString()));
+  let fooMessages = [...fooTrashFolder.messages];
+
+  fooMessages[0].markRead(false);
+  await checkModeListItems("unread", [
+    fooTrashFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+
+  folderCMessages[0].markRead(false);
+  await checkModeListItems("unread", [
+    fooTrashFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+
+  MailServices.accounts.reorderAccounts([account.key, foo.key]);
+  await checkModeListItems("unread", [
+    folderA,
+    folderB,
+    folderC,
+    fooTrashFolder,
+  ]);
+
+  fooMessages[0].markRead(true);
+  await checkModeListItems("unread", [
+    folderA,
+    folderB,
+    folderC,
+    fooTrashFolder,
+  ]);
+
+  fooMessages[0].markRead(false);
+  await checkModeListItems("unread", [
+    folderA,
+    folderB,
+    folderC,
+    fooTrashFolder,
+  ]);
+
+  folderCMessages[0].markRead(true);
+  await checkModeListItems("unread", [
+    folderA,
+    folderB,
+    folderC,
+    fooTrashFolder,
+  ]);
+
+  // Clean up.
+
+  MailServices.accounts.removeAccount(foo, false);
+  await checkModeListItems("unread", [folderA, folderB, folderC]);
+  folderPane.isCompact = false;
+});
+
+/**
+ * Tests the Smart Folders mode.
+ */
+add_task(async function testSmartFolders() {
+  folderPane.activeModes = ["smart"];
+
+  // Check the mode is set up correctly.
+  let localExtraFolders = [rootFolder, outboxFolder, folderA, folderB, folderC];
+  let smartServer = MailServices.accounts.findServer(
+    "nobody",
+    "smart mailboxes",
+    "none"
+  );
+  let smartInbox = smartServer.rootFolder.getChildNamed("Inbox");
+  let smartInboxFolders = [smartInbox, inboxFolder];
+  let otherSmartFolders = [
+    smartServer.rootFolder.getChildNamed("Drafts"),
+    smartServer.rootFolder.getChildNamed("Templates"),
+    smartServer.rootFolder.getChildNamed("Sent"),
+    smartServer.rootFolder.getChildNamed("Archives"),
+    smartServer.rootFolder.getChildNamed("Junk"),
+    smartServer.rootFolder.getChildNamed("Trash"),
+  ];
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    ...otherSmartFolders,
+    trashFolder,
+    ...localExtraFolders,
+  ]);
+
+  // Add some subfolders of existing folders.
+  rootFolder.createSubfolder("folderTreeQuirksX", null);
+  let folderX = rootFolder.getChildNamed("folderTreeQuirksX");
+  inboxFolder.createSubfolder("folderTreeQuirksY", null);
+  let folderY = inboxFolder.getChildNamed("folderTreeQuirksY");
+  folderY.createSubfolder("folderTreeQuirksYY", null);
+  let folderYY = folderY.getChildNamed("folderTreeQuirksYY");
+  folderB.createSubfolder("folderTreeQuirksZ", null);
+  let folderZ = folderB.getChildNamed("folderTreeQuirksZ");
+
+  // Check the folders are listed in the right order.
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    folderY,
+    folderYY,
+    ...otherSmartFolders,
+    trashFolder,
+    ...localExtraFolders,
+    folderZ,
+    folderX,
+  ]);
+
+  // Check the hierarchy.
+  let rootRow = folderPane.getRowForFolder(rootFolder);
+  let inboxRow = folderPane.getRowForFolder(inboxFolder);
+  let trashRow = folderPane.getRowForFolder(trashFolder);
+  let rowB = folderPane.getRowForFolder(folderB);
+  let rowX = folderPane.getRowForFolder(folderX);
+  let rowY = folderPane.getRowForFolder(folderY);
+  let rowYY = folderPane.getRowForFolder(folderYY);
+  let rowZ = folderPane.getRowForFolder(folderZ);
+  Assert.equal(
+    rowX.parentNode.parentNode,
+    rootRow,
+    "folderX should be displayed as a child of rootFolder"
+  );
+  Assert.equal(
+    rowY.parentNode.parentNode,
+    inboxRow,
+    "folderY should be displayed as a child of inboxFolder"
+  );
+  Assert.equal(
+    rowYY.parentNode.parentNode,
+    rowY,
+    "folderYY should be displayed as a child of folderY"
+  );
+  Assert.equal(
+    rowZ.parentNode.parentNode,
+    rowB,
+    "folderZ should be displayed as a child of folderB"
+  );
+
+  // Stop searching folderY and folderYY in the smart inbox. They should stop
+  // being listed under the inbox and instead appear under the root folder.
+  let wrappedInbox = VirtualFolderHelper.wrapVirtualFolder(smartInbox);
+  Assert.deepEqual(wrappedInbox.searchFolders, [
+    inboxFolder,
+    folderY,
+    folderYY,
+  ]);
+  wrappedInbox.searchFolders = [inboxFolder];
+
+  // Check the folders are listed in the right order.
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    ...otherSmartFolders,
+    trashFolder,
+    ...localExtraFolders,
+    folderZ,
+    folderX,
+    folderY,
+    folderYY,
+  ]);
+
+  // Check the hierarchy.
+  rowY = folderPane.getRowForFolder(folderY);
+  rowYY = folderPane.getRowForFolder(folderYY);
+  Assert.equal(
+    rowY.parentNode.parentNode,
+    rootRow,
+    "folderY should be displayed as a child of the rootFolder"
+  );
+  Assert.equal(
+    rowYY.parentNode.parentNode,
+    rowY,
+    "folderYY should be displayed as a child of folderY"
+  );
+
+  // Search them again. They should move back to the smart inbox section.
+  wrappedInbox.searchFolders = [inboxFolder, folderY, folderYY];
+
+  // Check the folders are listed in the right order.
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    folderY,
+    folderYY,
+    ...otherSmartFolders,
+    trashFolder,
+    ...localExtraFolders,
+    folderZ,
+    folderX,
+  ]);
+
+  // Check the hierarchy.
+  rowY = folderPane.getRowForFolder(folderY);
+  rowYY = folderPane.getRowForFolder(folderYY);
+  Assert.equal(
+    rowY.parentNode.parentNode,
+    inboxRow,
+    "folderY should be displayed as a child of inboxFolder"
+  );
+  Assert.equal(
+    rowYY.parentNode.parentNode,
+    rowY,
+    "folderYY should be displayed as a child of folderY"
+  );
+
+  // Delete the added folders.
+  folderX.deleteSelf(null);
+  folderY.deleteSelf(null);
+  folderZ.deleteSelf(null);
+  folderX = trashFolder.getChildNamed("folderTreeQuirksX");
+  folderY = trashFolder.getChildNamed("folderTreeQuirksY");
+  folderYY = folderY.getChildNamed("folderTreeQuirksYY");
+  folderZ = trashFolder.getChildNamed("folderTreeQuirksZ");
+
+  // Check they appear in the trash.
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    ...otherSmartFolders,
+    trashFolder,
+    folderX,
+    folderY,
+    folderYY,
+    folderZ,
+    ...localExtraFolders,
+  ]);
+
+  // Check the hierarchy.
+  rowX = folderPane.getRowForFolder(folderX);
+  rowY = folderPane.getRowForFolder(folderY);
+  rowYY = folderPane.getRowForFolder(folderYY);
+  rowZ = folderPane.getRowForFolder(folderZ);
+  Assert.equal(
+    rowX.parentNode.parentNode,
+    trashRow,
+    "folderX should be displayed as a child of trashFolder"
+  );
+  Assert.equal(
+    rowY.parentNode.parentNode,
+    trashRow,
+    "folderY should be displayed as a child of trashFolder"
+  );
+  Assert.equal(
+    rowYY.parentNode.parentNode,
+    rowY,
+    "folderYY should be displayed as a child of folderY"
+  );
+  Assert.equal(
+    rowZ.parentNode.parentNode,
+    trashRow,
+    "folderZ should be displayed as a child of trashFolder"
+  );
+
+  // Empty the trash and check everything is back to normal.
+  rootFolder.emptyTrash(null, null);
+  await checkModeListItems("smart", [
+    ...smartInboxFolders,
+    ...otherSmartFolders,
+    trashFolder,
+    ...localExtraFolders,
+  ]);
+});
+
+/**
+ * Tests that after moving a folder it is in the right place in the tree,
+ * with any subfolders if they should be shown.
+ */
+add_task(async function testFolderMove() {
+  rootFolder.createSubfolder("new parent", null);
+  let newParentFolder = rootFolder.getChildNamed("new parent");
+  [...folderC.messages][6].markRead(false);
+  folderC.setFlag(Ci.nsMsgFolderFlags.Favorite);
+
+  // Set up and check initial state.
+
+  folderPane.activeModes = ["all", "unread", "favorite"];
+  folderPane.isCompact = false;
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+    newParentFolder,
+  ]);
+  await checkModeListItems("unread", [rootFolder, folderA, folderB, folderC]);
+  await checkModeListItems("favorite", [rootFolder, folderA, folderB, folderC]);
+
+  // Move `folderB` from `folderA` to `newParentFolder`.
+
+  let copyListener = new PromiseTestUtils.PromiseCopyListener();
+  MailServices.copy.copyFolder(
+    folderB,
+    newParentFolder,
+    true,
+    copyListener,
+    window.msgWindow
+  );
+  await copyListener.promise;
+
+  let movedFolderB = newParentFolder.getChildNamed("folderTreeQuirksB");
+  let movedFolderC = movedFolderB.getChildNamed("folderTreeQuirksC");
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    newParentFolder,
+    movedFolderB,
+    movedFolderC,
+  ]);
+  await checkModeListItems("unread", [
+    rootFolder,
+    newParentFolder,
+    movedFolderB,
+    movedFolderC,
+  ]);
+  await checkModeListItems("favorite", [
+    rootFolder,
+    newParentFolder,
+    movedFolderB,
+    movedFolderC,
+  ]);
+
+  // Switch to compact mode for the return move.
+
+  folderPane.isCompact = true;
+  await checkModeListItems("unread", [movedFolderC]);
+  await checkModeListItems("favorite", [movedFolderC]);
+
+  // Move `movedFolderB` from `newParentFolder` back to `folderA`.
+
+  copyListener = new PromiseTestUtils.PromiseCopyListener();
+  MailServices.copy.copyFolder(
+    movedFolderB,
+    folderA,
+    true,
+    copyListener,
+    window.msgWindow
+  );
+  await copyListener.promise;
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+    newParentFolder,
+  ]);
+  await checkModeListItems("unread", [folderC]);
+  await checkModeListItems("favorite", [folderC]);
+
+  // Clean up.
+
+  newParentFolder.deleteSelf(null);
+  rootFolder.emptyTrash(null, null);
+  folderC.markAllMessagesRead(null);
+  folderC.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  folderPane.isCompact = false;
+});
+
+/**
+ * Tests that after renaming a folder it is in the right place in the tree,
+ * with any subfolders if they should be shown.
+ */
+add_task(async function testFolderRename() {
+  let extraFolders = {};
+  for (let name of ["aaa", "ggg", "zzz"]) {
+    rootFolder.createSubfolder(name, null);
+    extraFolders[name] = rootFolder
+      .getChildNamed(name)
+      .QueryInterface(Ci.nsIMsgLocalMailFolder);
+    extraFolders[name].addMessage(generator.makeMessage({}).toMboxString());
+    extraFolders[name].setFlag(Ci.nsMsgFolderFlags.Favorite);
+  }
+  [...folderC.messages][4].markRead(false);
+  folderC.setFlag(Ci.nsMsgFolderFlags.Favorite);
+
+  // Set up and check initial state.
+
+  folderPane.activeModes = ["all", "unread", "favorite"];
+  folderPane.isCompact = false;
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    extraFolders.aaa,
+    folderA,
+    folderB,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("unread", [
+    rootFolder,
+    extraFolders.aaa,
+    folderA,
+    folderB,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("favorite", [
+    rootFolder,
+    extraFolders.aaa,
+    folderA,
+    folderB,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+
+  // Rename `folderA`.
+
+  folderA.rename("renamedA", window.msgWindow);
+  let renamedFolderA = rootFolder.getChildNamed("renamedA");
+  let renamedFolderB = renamedFolderA.getChildNamed("folderTreeQuirksB");
+  let renamedFolderC = renamedFolderB.getChildNamed("folderTreeQuirksC");
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    extraFolders.aaa,
+    extraFolders.ggg,
+    renamedFolderA,
+    renamedFolderB,
+    renamedFolderC,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("unread", [
+    rootFolder,
+    extraFolders.aaa,
+    extraFolders.ggg,
+    renamedFolderA,
+    renamedFolderB,
+    renamedFolderC,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("favorite", [
+    rootFolder,
+    extraFolders.aaa,
+    extraFolders.ggg,
+    renamedFolderA,
+    renamedFolderB,
+    renamedFolderC,
+    extraFolders.zzz,
+  ]);
+
+  // Switch to compact mode.
+
+  folderPane.isCompact = true;
+  await checkModeListItems("unread", [
+    extraFolders.aaa,
+    renamedFolderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("favorite", [
+    extraFolders.aaa,
+    renamedFolderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+
+  // Rename the folder back to its original name.
+
+  renamedFolderA.rename("folderTreeQuirksA", window.msgWindow);
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    extraFolders.aaa,
+    folderA,
+    folderB,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("unread", [
+    extraFolders.aaa,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+  await checkModeListItems("favorite", [
+    extraFolders.aaa,
+    folderC,
+    extraFolders.ggg,
+    extraFolders.zzz,
+  ]);
+
+  // Clean up.
+
+  extraFolders.aaa.deleteSelf(null);
+  extraFolders.ggg.deleteSelf(null);
+  extraFolders.zzz.deleteSelf(null);
+  rootFolder.emptyTrash(null, null);
+  folderC.markAllMessagesRead(null);
+  folderC.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  folderPane.isCompact = false;
+});
+
+/**
+ * The creation of a virtual folder involves two "folderAdded" notifications.
+ * Check that only one entry in the folder tree is created.
+ */
+add_task(async function testSearchFolderAddedOnlyOnce() {
+  let context = about3Pane.document.getElementById("folderPaneContext");
+  let searchMessagesItem = about3Pane.document.getElementById(
+    "folderPaneContext-searchMessages"
+  );
+  let removeItem = about3Pane.document.getElementById(
+    "folderPaneContext-remove"
+  );
+
+  // Start searching for messages.
+
+  let shownPromise = BrowserTestUtils.waitForEvent(context, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    folderPane.getRowForFolder(rootFolder).querySelector(".name"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+
+  let searchWindowPromise = BrowserTestUtils.domWindowOpenedAndLoaded(
+    null,
+    w =>
+      w.document.documentURI == "chrome://messenger/content/SearchDialog.xhtml"
+  );
+  context.activateItem(searchMessagesItem);
+  let searchWindow = await searchWindowPromise;
+
+  EventUtils.synthesizeMouseAtCenter(
+    searchWindow.document.getElementById("searchVal0"),
+    {},
+    searchWindow
+  );
+  EventUtils.sendString("hovercraft", searchWindow);
+
+  // Create a virtual folder for the search.
+
+  let vfWindowPromise = BrowserTestUtils.promiseAlertDialogOpen(
+    null,
+    "chrome://messenger/content/virtualFolderProperties.xhtml",
+    {
+      async callback(vfWindow) {
+        EventUtils.synthesizeMouseAtCenter(
+          vfWindow.document.getElementById("name"),
+          {},
+          vfWindow
+        );
+        EventUtils.sendString("virtual folder", vfWindow);
+        EventUtils.synthesizeMouseAtCenter(
+          vfWindow.document.querySelector("dialog").getButton("accept"),
+          {},
+          vfWindow
+        );
+      },
+    }
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    searchWindow.document.getElementById("saveAsVFButton"),
+    {},
+    searchWindow
+  );
+  await vfWindowPromise;
+
+  await BrowserTestUtils.closeWindow(searchWindow);
+
+  // Find the folder and the row for it in the tree.
+
+  let virtualFolder = rootFolder.getChildNamed("virtual folder");
+  let row = await TestUtils.waitForCondition(() =>
+    folderPane.getRowForFolder(virtualFolder)
+  );
+
+  // Check it exists only once.
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    virtualFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+
+  // Delete the virtual folder.
+
+  shownPromise = BrowserTestUtils.waitForEvent(context, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    row.querySelector(".name"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+
+  let dialogPromise = BrowserTestUtils.promiseAlertDialogOpen("accept");
+  context.activateItem(removeItem);
+  await dialogPromise;
+  await new Promise(resolve => setTimeout(resolve));
+
+  // Check it went away.
+
+  await checkModeListItems("all", [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+});
+
+/**
+ * Tests deferred POP3 accounts are not displayed in All Folders mode, and
+ * that a change in their deferred status updates the folder tree.
+ */
+add_task(async function testDeferredAccount() {
+  let pop3Account = MailServices.accounts.createAccount();
+  let pop3Server = MailServices.accounts.createIncomingServer(
+    `${pop3Account.key}user`,
+    "localhost",
+    "pop3"
+  );
+  pop3Server.QueryInterface(Ci.nsIPop3IncomingServer);
+  pop3Account.incomingServer = pop3Server.QueryInterface(
+    Ci.nsIPop3IncomingServer
+  );
+
+  let pop3RootFolder = pop3Server.rootFolder;
+  let pop3Folders = [
+    pop3RootFolder,
+    pop3RootFolder.getChildNamed("Inbox"),
+    pop3RootFolder.getChildNamed("Trash"),
+  ];
+  let localFolders = [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ];
+
+  folderPane.activeModes = ["all"];
+  await checkModeListItems("all", [...pop3Folders, ...localFolders]);
+
+  // Defer the account to Local Folders.
+  pop3Server.deferredToAccount = account.key;
+  await checkModeListItems("all", localFolders);
+
+  // Remove and add the All mode again to check that an existing deferred
+  // folder is not shown when the mode initialises.
+  folderPane.activeModes = ["recent"];
+  folderPane.activeModes = ["all"];
+  await checkModeListItems("all", localFolders);
+
+  // Stop deferring the account.
+  pop3Server.deferredToAccount = null;
+  await checkModeListItems("all", [...pop3Folders, ...localFolders]);
+
+  MailServices.accounts.removeAccount(pop3Account, false);
+});
+
+/**
+ * We deliberately hide the special [Gmail] folder from the folder tree.
+ * Check that it doesn't appear when for a new or existing account.
+ */
+add_task(async function testGmailFolders() {
+  IMAPServer.open();
+  // Set up a fake Gmail account.
+  let gmailAccount = MailServices.accounts.createAccount();
+  let gmailServer = MailServices.accounts.createIncomingServer(
+    "user",
+    "localhost",
+    "imap"
+  );
+  gmailServer.port = IMAPServer.port;
+  gmailServer.password = "password";
+  gmailAccount.incomingServer = gmailServer;
+
+  let gmailIdentity = MailServices.accounts.createIdentity();
+  gmailIdentity.email = "imap@invalid";
+  gmailAccount.addIdentity(gmailIdentity);
+  gmailAccount.defaultIdentity = gmailIdentity;
+
+  let gmailRootFolder = gmailServer.rootFolder;
+  gmailServer.performExpand(window.msgWindow);
+  await TestUtils.waitForCondition(
+    () => gmailRootFolder.subFolders.length == 3,
+    "waiting for folders to be created"
+  );
+
+  let gmailInboxFolder = gmailRootFolder.getChildNamed("INBOX");
+  let gmailTrashFolder = gmailRootFolder.getChildNamed("Trash");
+  let gmailGmailFolder = gmailRootFolder.getChildNamed("[Gmail]");
+  await TestUtils.waitForCondition(
+    () => gmailGmailFolder.subFolders.length == 1,
+    "waiting for All Mail folder to be created"
+  );
+  let gmailAllMailFolder = gmailGmailFolder.getChildNamed("All Mail");
+
+  Assert.ok(
+    !folderPane._isGmailFolder(gmailRootFolder),
+    "_isGmailFolder should be false for the root folder"
+  );
+  Assert.ok(
+    folderPane._isGmailFolder(gmailGmailFolder),
+    "_isGmailFolder should be true for the [Gmail] folder"
+  );
+  Assert.ok(
+    !folderPane._isGmailFolder(gmailAllMailFolder),
+    "_isGmailFolder should be false for the All Mail folder"
+  );
+
+  Assert.equal(
+    folderPane._getNonGmailFolder(gmailRootFolder),
+    gmailRootFolder,
+    "_getNonGmailFolder should return the same folder for the root folder"
+  );
+  Assert.equal(
+    folderPane._getNonGmailFolder(gmailGmailFolder),
+    gmailRootFolder,
+    "_getNonGmailFolder should return the root folder for the [Gmail] folder"
+  );
+  Assert.equal(
+    folderPane._getNonGmailFolder(gmailAllMailFolder),
+    gmailAllMailFolder,
+    "_getNonGmailFolder should return the same folder for the All Mail folder"
+  );
+
+  Assert.equal(
+    folderPane._getNonGmailParent(gmailRootFolder),
+    null,
+    "_getNonGmailParent should return null for the root folder"
+  );
+  Assert.equal(
+    folderPane._getNonGmailParent(gmailGmailFolder),
+    gmailRootFolder,
+    "_getNonGmailParent should return the root folder for the [Gmail] folder"
+  );
+  Assert.equal(
+    folderPane._getNonGmailParent(gmailAllMailFolder),
+    gmailRootFolder,
+    "_getNonGmailParent should return the root folder for the All Mail folder"
+  );
+
+  await checkModeListItems("all", [
+    gmailRootFolder,
+    gmailInboxFolder,
+    gmailAllMailFolder,
+    gmailTrashFolder,
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+
+  // The accounts didn't exist when about:3pane loaded, but we can simulate
+  // that by removing the mode and then re-adding it.
+  folderPane.activeModes = ["favorite"];
+  folderPane.activeModes = ["all"];
+
+  await checkModeListItems("all", [
+    gmailRootFolder,
+    gmailInboxFolder,
+    gmailAllMailFolder,
+    gmailTrashFolder,
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ]);
+
+  MailServices.accounts.removeAccount(gmailAccount, false);
+});
+
+add_task(async function testAccountOrder() {
+  // Make some changes to the main account so that it appears in all modes.
+
+  [...folderA.messages][0].markRead(false);
+  folderA.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  folderPane.activeModes = ["all", "smart", "unread", "favorite"];
+
+  let localFolders = [
+    rootFolder,
+    inboxFolder,
+    trashFolder,
+    outboxFolder,
+    folderA,
+    folderB,
+    folderC,
+  ];
+  let localExtraFolders = [rootFolder, outboxFolder, folderA, folderB, folderC];
+  let smartServer = MailServices.accounts.findServer(
+    "nobody",
+    "smart mailboxes",
+    "none"
+  );
+  let smartFolders = [
+    smartServer.rootFolder.getChildNamed("Inbox"),
+    inboxFolder,
+    smartServer.rootFolder.getChildNamed("Drafts"),
+    smartServer.rootFolder.getChildNamed("Templates"),
+    smartServer.rootFolder.getChildNamed("Sent"),
+    smartServer.rootFolder.getChildNamed("Archives"),
+    smartServer.rootFolder.getChildNamed("Junk"),
+    smartServer.rootFolder.getChildNamed("Trash"),
+    // There are trash folders in each account, they go here.
+  ];
+
+  // Check the initial items in the folder tree.
+
+  await checkModeListItems("all", localFolders);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    trashFolder,
+    ...localExtraFolders,
+  ]);
+  await checkModeListItems("unread", [rootFolder, folderA]);
+  await checkModeListItems("favorite", [rootFolder, folderA]);
+
+  // Create two new "none" accounts, foo and bar.
+
+  let foo = MailServices.accounts.createAccount();
+  foo.incomingServer = MailServices.accounts.createIncomingServer(
+    `${foo.key}user`,
+    "localhost",
+    "none"
+  );
+  let fooRootFolder = foo.incomingServer.rootFolder;
+  let fooTrashFolder = fooRootFolder.getChildNamed("Trash");
+  let fooOutboxFolder = fooRootFolder.getChildNamed("Outbox");
+  let fooFolders = [fooRootFolder, fooTrashFolder, fooOutboxFolder];
+  let fooExtraFolders = [fooRootFolder, fooOutboxFolder];
+
+  let bar = MailServices.accounts.createAccount();
+  bar.incomingServer = MailServices.accounts.createIncomingServer(
+    `${bar.key}user`,
+    "localhost",
+    "none"
+  );
+  let barRootFolder = bar.incomingServer.rootFolder;
+  let barTrashFolder = barRootFolder.getChildNamed("Trash");
+  let barOutboxFolder = barRootFolder.getChildNamed("Outbox");
+  let barFolders = [barRootFolder, barTrashFolder, barOutboxFolder];
+  let barExtraFolders = [barRootFolder, barOutboxFolder];
+
+  let generator = new MessageGenerator();
+  fooTrashFolder
+    .QueryInterface(Ci.nsIMsgLocalMailFolder)
+    .addMessage(generator.makeMessage({}).toMboxString());
+  fooTrashFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+  barTrashFolder
+    .QueryInterface(Ci.nsIMsgLocalMailFolder)
+    .addMessage(generator.makeMessage({}).toMboxString());
+  barTrashFolder.setFlag(Ci.nsMsgFolderFlags.Favorite);
+
+  // Check the addition of accounts has put them in the right order.
+
+  Assert.deepEqual(
+    MailServices.accounts.accounts.map(a => a.key),
+    [foo.key, bar.key, account.key]
+  );
+  await checkModeListItems("all", [
+    ...fooFolders,
+    ...barFolders,
+    ...localFolders,
+  ]);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    fooTrashFolder,
+    barTrashFolder,
+    trashFolder,
+    ...fooExtraFolders,
+    ...barExtraFolders,
+    ...localExtraFolders,
+  ]);
+  await checkModeListItems("unread", [
+    fooRootFolder,
+    fooTrashFolder,
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+  ]);
+  await checkModeListItems("favorite", [
+    fooRootFolder,
+    fooTrashFolder,
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+  ]);
+
+  // Remove and add the modes again. This should reinitialise them.
+
+  folderPane.activeModes = ["recent"];
+  folderPane.activeModes = ["all", "smart", "unread", "favorite"];
+  await checkModeListItems("all", [
+    ...fooFolders,
+    ...barFolders,
+    ...localFolders,
+  ]);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    fooTrashFolder,
+    barTrashFolder,
+    trashFolder,
+    ...fooExtraFolders,
+    ...barExtraFolders,
+    ...localExtraFolders,
+  ]);
+  await checkModeListItems("unread", [
+    fooRootFolder,
+    fooTrashFolder,
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+  ]);
+  await checkModeListItems("favorite", [
+    fooRootFolder,
+    fooTrashFolder,
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+  ]);
+
+  // Reorder the accounts.
+
+  MailServices.accounts.reorderAccounts([bar.key, account.key, foo.key]);
+  await checkModeListItems("all", [
+    ...barFolders,
+    ...localFolders,
+    ...fooFolders,
+  ]);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    barTrashFolder,
+    trashFolder,
+    fooTrashFolder,
+    ...barExtraFolders,
+    ...localExtraFolders,
+    ...fooExtraFolders,
+  ]);
+  await checkModeListItems("unread", [
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+    fooRootFolder,
+    fooTrashFolder,
+  ]);
+  await checkModeListItems("favorite", [
+    barRootFolder,
+    barTrashFolder,
+    rootFolder,
+    folderA,
+    fooRootFolder,
+    fooTrashFolder,
+  ]);
+
+  // Reorder the accounts again.
+
+  MailServices.accounts.reorderAccounts([foo.key, account.key, bar.key]);
+  await checkModeListItems("all", [
+    ...fooFolders,
+    ...localFolders,
+    ...barFolders,
+  ]);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    fooTrashFolder,
+    trashFolder,
+    barTrashFolder,
+    ...fooExtraFolders,
+    ...localExtraFolders,
+    ...barExtraFolders,
+  ]);
+  await checkModeListItems("unread", [
+    fooRootFolder,
+    fooTrashFolder,
+    rootFolder,
+    folderA,
+    barRootFolder,
+    barTrashFolder,
+  ]);
+  await checkModeListItems("favorite", [
+    fooRootFolder,
+    fooTrashFolder,
+    rootFolder,
+    folderA,
+    barRootFolder,
+    barTrashFolder,
+  ]);
+
+  // Remove one of the added accounts.
+
+  MailServices.accounts.removeAccount(foo, false);
+  await checkModeListItems("all", [...localFolders, ...barFolders]);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    trashFolder,
+    barTrashFolder,
+    ...localExtraFolders,
+    ...barExtraFolders,
+  ]);
+  await checkModeListItems("unread", [
+    rootFolder,
+    folderA,
+    barRootFolder,
+    barTrashFolder,
+  ]);
+  await checkModeListItems("favorite", [
+    rootFolder,
+    folderA,
+    barRootFolder,
+    barTrashFolder,
+  ]);
+
+  // Remove the other added account, folder flags, and the added folder.
+
+  MailServices.accounts.removeAccount(bar, false);
+  folderA.markAllMessagesRead(null);
+  folderA.clearFlag(Ci.nsMsgFolderFlags.Favorite);
+  rootFolder.emptyTrash(null);
+
+  await checkModeListItems("all", localFolders);
+  await checkModeListItems("smart", [
+    ...smartFolders,
+    trashFolder,
+    ...localExtraFolders,
+  ]);
+  await checkModeListItems("unread", [rootFolder, folderA]);
+  await checkModeListItems("favorite", []);
+
+  let shownPromise = BrowserTestUtils.waitForEvent(moreContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(moreButton, {}, about3Pane);
+  await shownPromise;
+
+  moreContext.activateItem(
+    moreContext.querySelector("#folderPaneHeaderToggleLocalFolders")
+  );
+  // Force a 500ms timeout due to a weird intermittent macOS issue that prevents
+  // the Escape key press from closing the menupopup.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  let menuHiddenPromise = BrowserTestUtils.waitForEvent(
+    moreContext,
+    "popuphidden"
+  );
+  EventUtils.synthesizeKey("KEY_Escape", {}, about3Pane);
+  await menuHiddenPromise;
+
+  // All instances of local folders shouldn't be present.
+  await checkModeListItems("all", []);
+  await checkModeListItems("smart", [...smartFolders, trashFolder]);
+  await checkModeListItems("unread", []);
+  await checkModeListItems("favorite", []);
+});
+
+async function checkModeListItems(modeName, folders) {
+  // Jump to the end of the event queue so that any code listening for changes
+  // can run first.
+  await new Promise(resolve => setTimeout(resolve));
+  expandAll(modeName);
+
+  Assert.deepEqual(
+    Array.from(
+      folderPane._modes[modeName].containerList.querySelectorAll("li"),
+      folderTreeRow => folderTreeRow.uri
+    ),
+    folders.map(folder => folder.URI)
+  );
+}
+
+function expandAll(modeName) {
+  for (let folderTreeRow of folderPane._modes[
+    modeName
+  ].containerList.querySelectorAll("li")) {
+    folderTree.expandRow(folderTreeRow);
+  }
+}
+
+var IMAPServer = {
+  open() {
+    const {
+      ImapDaemon,
+      ImapMessage,
+      IMAP_GMAIL_extension,
+      IMAP_RFC3348_extension,
+      IMAP_RFC3501_handler,
+      mixinExtension,
+    } = ChromeUtils.import("resource://testing-common/mailnews/Imapd.jsm");
+    const { nsMailServer } = ChromeUtils.import(
+      "resource://testing-common/mailnews/Maild.jsm"
+    );
+    IMAPServer.ImapMessage = ImapMessage;
+
+    this.daemon = new ImapDaemon();
+    this.daemon.getMailbox("INBOX").specialUseFlag = "\\Inbox";
+    this.daemon.getMailbox("INBOX").subscribed = true;
+    this.daemon.createMailbox("Trash", {
+      flags: ["\\Trash"],
+      subscribed: true,
+    });
+    this.daemon.createMailbox("[Gmail]", {
+      flags: ["\\NoSelect"],
+      subscribed: true,
+    });
+    this.daemon.createMailbox("[Gmail]/All Mail", {
+      flags: ["\\Archive"],
+      subscribed: true,
+      specialUseFlag: "\\AllMail",
+    });
+    this.server = new nsMailServer(daemon => {
+      let handler = new IMAP_RFC3501_handler(daemon);
+      mixinExtension(handler, IMAP_GMAIL_extension);
+      mixinExtension(handler, IMAP_RFC3348_extension);
+      return handler;
+    }, this.daemon);
+    this.server.start();
+
+    registerCleanupFunction(() => this.close());
+  },
+  close() {
+    this.server.stop();
+  },
+  get port() {
+    return this.server.port;
+  },
+};
diff --git a/comm/mail/base/test/browser/browser_formPickers.js b/comm/mail/base/test/browser/browser_formPickers.js
new file mode 100644
index 0000000000..1b98a0584a
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_formPickers.js
@@ -0,0 +1,352 @@
+/* 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/. */
+
+/* eslint-env webextensions */
+
+var { MailE10SUtils } = ChromeUtils.import(
+  "resource:///modules/MailE10SUtils.jsm"
+);
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+var { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const TEST_DOCUMENT_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/formContent.html";
+
+let testFolder;
+
+async function checkABrowser(browser) {
+  if (
+    browser.webProgress?.isLoadingDocument ||
+    browser.currentURI?.spec == "about:blank"
+  ) {
+    await BrowserTestUtils.browserLoaded(
+      browser,
+      undefined,
+      url => url != "about:blank"
+    );
+  }
+
+  let win = browser.ownerGlobal;
+  let doc = browser.ownerDocument;
+
+  // Date picker
+
+  let picker = win.top.document.getElementById("DateTimePickerPanel");
+  Assert.ok(picker, "date/time picker exists");
+
+  // Open the popup.
+  let shownPromise = BrowserTestUtils.waitForEvent(picker, "popupshown");
+  await SpecialPowers.spawn(browser, [], function () {
+    content.document.notifyUserGestureActivation();
+    content.document.querySelector(`input[type="date"]`).showPicker();
+  });
+  await shownPromise;
+
+  // Allow the picker time to initialise.
+  await new Promise(r => win.setTimeout(r, 500));
+
+  // Click in the middle of the picker. This should always land on a date and
+  // close the picker.
+  let hiddenPromise = BrowserTestUtils.waitForEvent(picker, "popuphidden");
+  let frame = picker.querySelector("#dateTimePopupFrame");
+  EventUtils.synthesizeMouseAtCenter(
+    frame.contentDocument.querySelector(".days-view td"),
+    {},
+    frame.contentWindow
+  );
+  await hiddenPromise;
+
+  // Check the date was assigned to the input.
+  await SpecialPowers.spawn(browser, [], () => {
+    Assert.ok(content.document.querySelector(`input[type="date"]`).value);
+  });
+
+  // Select drop-down
+
+  let menulist = win.top.document.getElementById("ContentSelectDropdown");
+  Assert.ok(menulist, "select menulist exists");
+  let menupopup = menulist.menupopup;
+
+  // Click on the select control to open the popup.
+  shownPromise = BrowserTestUtils.waitForEvent(menulist, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter("select", {}, browser);
+  await shownPromise;
+
+  // Allow the menulist time to initialise.
+  await new Promise(r => win.setTimeout(r, 500));
+
+  Assert.equal(menulist.value, "0");
+  Assert.equal(menupopup.childElementCount, 3);
+  // Item values do not match the content document, but are 0-indexed.
+  Assert.equal(menupopup.children[0].label, "");
+  Assert.equal(menupopup.children[0].value, "0");
+  Assert.equal(menupopup.children[1].label, "π");
+  Assert.equal(menupopup.children[1].value, "1");
+  Assert.equal(menupopup.children[2].label, "τ");
+  Assert.equal(menupopup.children[2].value, "2");
+
+  // Click the second option. This sets the value and closes the menulist.
+  hiddenPromise = BrowserTestUtils.waitForEvent(menulist, "popuphidden");
+  menupopup.activateItem(menupopup.children[1]);
+  await hiddenPromise;
+
+  // Sometimes the next change doesn't happen soon enough.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(r => setTimeout(r, 1000));
+
+  // Check the value was assigned to the control.
+  await SpecialPowers.spawn(browser, [], () => {
+    Assert.equal(content.document.querySelector("select").value, "3.141592654");
+  });
+
+  // Input auto-complete
+
+  browser.focus();
+
+  let popup = doc.getElementById(browser.getAttribute("autocompletepopup"));
+  Assert.ok(popup, "auto-complete popup exists");
+
+  // Click on the input box and type some letters to open the popup.
+  shownPromise = BrowserTestUtils.waitForEvent(popup, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    `input[list="letters"]`,
+    {},
+    browser
+  );
+  await BrowserTestUtils.synthesizeKey("e", {}, browser);
+  await BrowserTestUtils.synthesizeKey("t", {}, browser);
+  await BrowserTestUtils.synthesizeKey("a", {}, browser);
+  await shownPromise;
+
+  // Allow the popup time to initialise.
+  await new Promise(r => win.setTimeout(r, 500));
+
+  let list = popup.querySelector("richlistbox");
+  Assert.ok(list, "list added to popup");
+  Assert.equal(list.itemCount, 4);
+  Assert.equal(list.itemChildren[0].getAttribute("title"), "beta");
+  Assert.equal(list.itemChildren[1].getAttribute("title"), "zeta");
+  Assert.equal(list.itemChildren[2].getAttribute("title"), "eta");
+  Assert.equal(list.itemChildren[3].getAttribute("title"), "theta");
+
+  // Click the second option. This sets the value and closes the popup.
+  hiddenPromise = BrowserTestUtils.waitForEvent(popup, "popuphidden");
+  EventUtils.synthesizeMouseAtCenter(list.itemChildren[1], {}, win);
+  await hiddenPromise;
+
+  // Check the value was assigned to the input.
+  await SpecialPowers.spawn(browser, [], () => {
+    Assert.equal(
+      content.document.querySelector(`input[list="letters"]`).value,
+      "zeta"
+    );
+  });
+}
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  let rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("formPickerFolder", null);
+  testFolder = rootFolder
+    .getChildNamed("formPickerFolder")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  let messages = new MessageGenerator().makeMessages({ count: 5 });
+  let messageStrings = messages.map(message => message.toMboxString());
+  testFolder.addMessageBatch(messageStrings);
+
+  registerCleanupFunction(async () => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function testMessagePane() {
+  let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+  about3Pane.restoreState({
+    folderURI: testFolder.URI,
+    messagePaneVisible: true,
+  });
+
+  about3Pane.messagePane.displayWebPage(TEST_DOCUMENT_URL);
+  await checkABrowser(about3Pane.webBrowser);
+});
+
+add_task(async function testContentTab() {
+  let tab = window.openContentTab(TEST_DOCUMENT_URL);
+  await checkABrowser(tab.browser);
+
+  let tabmail = document.getElementById("tabmail");
+  tabmail.closeTab(tab);
+});
+
+add_task(async function testExtensionPopupWindow() {
+  let extension = ExtensionTestUtils.loadExtension({
+    background: async () => {
+      await browser.windows.create({
+        url: "formContent.html",
+        type: "popup",
+        width: 800,
+        height: 500,
+      });
+      browser.test.notifyPass("ready");
+    },
+    files: {
+      "formContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+    },
+  });
+
+  await extension.startup();
+  await extension.awaitFinish("ready");
+
+  let extensionPopup = Services.wm.getMostRecentWindow("mail:extensionPopup");
+  // extensionPopup.xhtml needs time to initialise properly.
+  await new Promise(resolve => extensionPopup.setTimeout(resolve, 500));
+  await checkABrowser(extensionPopup.document.getElementById("requestFrame"));
+  await BrowserTestUtils.closeWindow(extensionPopup);
+
+  await extension.unload();
+});
+
+add_task(async function testExtensionBrowserAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "formContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "formpickers@mochi.test",
+        },
+      },
+      browser_action: {
+        default_popup: "formContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let { panel, browser } = await openExtensionPopup(
+    window,
+    "ext-formpickers\\@mochi.test"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+});
+
+add_task(async function testExtensionComposeAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "formContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "formpickers@mochi.test",
+        },
+      },
+      compose_action: {
+        default_popup: "formContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let params = Cc[
+    "@mozilla.org/messengercompose/composeparams;1"
+  ].createInstance(Ci.nsIMsgComposeParams);
+  params.composeFields = Cc[
+    "@mozilla.org/messengercompose/composefields;1"
+  ].createInstance(Ci.nsIMsgCompFields);
+
+  let composeWindowPromise = BrowserTestUtils.domWindowOpened();
+  MailServices.compose.OpenComposeWindowWithParams(null, params);
+  let composeWindow = await composeWindowPromise;
+  await BrowserTestUtils.waitForEvent(composeWindow, "load");
+
+  let { panel, browser } = await openExtensionPopup(
+    composeWindow,
+    "formpickers_mochi_test-composeAction-toolbarbutton"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+  await BrowserTestUtils.closeWindow(composeWindow);
+});
+
+add_task(async function testExtensionMessageDisplayAction() {
+  let extension = ExtensionTestUtils.loadExtension({
+    files: {
+      "formContent.html": await fetch(TEST_DOCUMENT_URL).then(response =>
+        response.text()
+      ),
+    },
+    manifest: {
+      applications: {
+        gecko: {
+          id: "formpickers@mochi.test",
+        },
+      },
+      message_display_action: {
+        default_popup: "formContent.html",
+      },
+    },
+  });
+
+  await extension.startup();
+
+  let messageWindowPromise = BrowserTestUtils.domWindowOpened();
+  window.MsgOpenNewWindowForMessage([...testFolder.messages][0]);
+  let messageWindow = await messageWindowPromise;
+  let { target: aboutMessage } = await BrowserTestUtils.waitForEvent(
+    messageWindow,
+    "aboutMessageLoaded"
+  );
+
+  let { panel, browser } = await openExtensionPopup(
+    aboutMessage,
+    "formpickers_mochi_test-messageDisplayAction-toolbarbutton"
+  );
+  await checkABrowser(browser);
+  panel.hidePopup();
+
+  await extension.unload();
+  await BrowserTestUtils.closeWindow(messageWindow);
+});
+
+add_task(async function testBrowserRequestWindow() {
+  let requestWindow = await new Promise(resolve => {
+    Services.ww.openWindow(
+      null,
+      "chrome://messenger/content/browserRequest.xhtml",
+      null,
+      "chrome,private,centerscreen,width=980,height=750",
+      {
+        url: TEST_DOCUMENT_URL,
+        cancelled() {},
+        loaded(window, webProgress) {
+          resolve(window);
+        },
+      }
+    );
+  });
+
+  await checkABrowser(requestWindow.document.getElementById("requestFrame"));
+  await BrowserTestUtils.closeWindow(requestWindow);
+});
diff --git a/comm/mail/base/test/browser/browser_goMenu.js b/comm/mail/base/test/browser/browser_goMenu.js
new file mode 100644
index 0000000000..6a15a5e1d2
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_goMenu.js
@@ -0,0 +1,35 @@
+/* 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/. */
+
+/** @type MenuData */
+const goMenuData = {
+  goNextMenu: {},
+  menu_nextMsg: { disabled: true },
+  menu_nextUnreadMsg: { disabled: true },
+  menu_nextFlaggedMsg: { disabled: true },
+  menu_nextUnreadThread: { disabled: true },
+  "calendar-go-menu-next": { hidden: true },
+  goPreviousMenu: {},
+  menu_prevMsg: { disabled: true },
+  menu_prevUnreadMsg: { disabled: true },
+  menu_prevFlaggedMsg: { disabled: true },
+  "calendar-go-menu-previous": { hidden: true },
+  menu_goForward: { disabled: true },
+  menu_goBack: { disabled: true },
+  "calendar-go-to-today-menuitem": { hidden: true },
+  menu_goChat: {},
+  goFolderMenu: {},
+  goRecentlyClosedTabs: { disabled: true },
+  goStartPage: {},
+};
+let helper = new MenuTestHelper("menu_Go", goMenuData);
+
+add_setup(async function () {
+  document.getElementById("tabmail").clearRecentlyClosedTabs();
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+});
+
+add_task(async function test3PaneTab() {
+  await helper.testAllItems("mail3PaneTab");
+});
diff --git a/comm/mail/base/test/browser/browser_interactionTelemetry.js b/comm/mail/base/test/browser/browser_interactionTelemetry.js
new file mode 100644
index 0000000000..a958a24bdf
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_interactionTelemetry.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const AREAS = ["keyboard", "calendar", "chat", "message_display", "toolbox"];
+
+// Checks that the correct number of clicks are registered against the correct
+// keys in the scalars.
+function assertInteractionScalars(expectedAreas) {
+  let processScalars =
+    Services.telemetry.getSnapshotForKeyedScalars("main", true)?.parent ?? {};
+
+  for (let source of AREAS) {
+    let scalars = processScalars?.[`tb.ui.interaction.${source}`] ?? {};
+
+    let expected = expectedAreas[source] ?? {};
+
+    let expectedKeys = new Set(
+      Object.keys(scalars).concat(Object.keys(expected))
+    );
+    for (let key of expectedKeys) {
+      Assert.equal(
+        scalars[key],
+        expected[key],
+        `Expected to see the correct value for ${key} in ${source}.`
+      );
+    }
+  }
+}
+
+add_task(async function () {
+  Services.telemetry.clearScalars();
+
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("calendarButton"),
+    {},
+    window
+  );
+
+  let calendarWindowPromise = BrowserTestUtils.promiseAlertDialog(
+    "cancel",
+    "chrome://calendar/content/calendar-creation.xhtml"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    document.querySelector("#newCalendarSidebarButton"),
+    {},
+    window
+  );
+  await calendarWindowPromise;
+
+  EventUtils.synthesizeMouseAtCenter(
+    document.querySelector("#tabmail-tabs tab:nth-child(2) .tab-close-button"),
+    {},
+    window
+  );
+
+  assertInteractionScalars({
+    calendar: {
+      newCalendarSidebarButton: 1,
+    },
+    toolbox: {
+      calendarButton: 1,
+      "tab-close-button": 1,
+    },
+  });
+});
diff --git a/comm/mail/base/test/browser/browser_linkHandler.js b/comm/mail/base/test/browser/browser_linkHandler.js
new file mode 100644
index 0000000000..38cb8e5b05
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_linkHandler.js
@@ -0,0 +1,294 @@
+/* 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/. */
+
+/* eslint-disable @microsoft/sdl/no-insecure-url */
+
+let { MockRegistrar } = ChromeUtils.importESModule(
+  "resource://testing-common/MockRegistrar.sys.mjs"
+);
+
+const TEST_DOMAIN = "http://example.org";
+const TEST_IP = "http://127.0.0.1:8888";
+const TEST_PATH = "/browser/comm/mail/base/test/browser/files/links.html";
+
+let links = new Map([
+  ["#this-hash", `${TEST_PATH}#hash`],
+  ["#this-nohash", `${TEST_PATH}`],
+  [
+    "#local-here",
+    "/browser/comm/mail/base/test/browser/files/sampleContent.html",
+  ],
+  [
+    "#local-elsewhere",
+    "/browser/comm/mail/components/extensions/test/browser/data/content.html",
+  ],
+  ["#other-https", `https://example.org${TEST_PATH}`],
+  ["#other-port", `http://example.org:8000${TEST_PATH}`],
+  ["#other-subdomain", `http://test1.example.org${TEST_PATH}`],
+  ["#other-subsubdomain", `http://sub1.test1.example.org${TEST_PATH}`],
+  ["#other-domain", `http://mochi.test:8888${TEST_PATH}`],
+]);
+
+/** @implements {nsIWebProgressListener} */
+let webProgressListener = {
+  QueryInterface: ChromeUtils.generateQI([
+    "nsIWebProgressListener",
+    "nsISupportsWeakReference",
+  ]),
+
+  _browser: null,
+  _deferred: null,
+
+  onStateChange(webProgress, request, stateFlags, status) {
+    if (
+      !(stateFlags & Ci.nsIWebProgressListener.STATE_STOP) ||
+      this._browser?.currentURI.spec == "about:blank"
+    ) {
+      return;
+    }
+
+    if (this._deferred) {
+      let deferred = this._deferred;
+      let url = this._browser.currentURI.spec;
+      this.cancelPromise();
+
+      deferred.resolve(url);
+    } else {
+      this.cancelPromise();
+      Assert.ok(false, "unexpected state change");
+    }
+  },
+
+  onLocationChange(webProgress, request, location, flags) {
+    if (!(flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_HASHCHANGE)) {
+      return;
+    }
+
+    if (this._deferred) {
+      let deferred = this._deferred;
+      let url = this._browser.currentURI.spec;
+      this.cancelPromise();
+
+      deferred.resolve(url);
+    } else {
+      this.cancelPromise();
+      Assert.ok(false, "unexpected location change");
+    }
+  },
+
+  promiseEvent(browser) {
+    this._browser = browser;
+    browser.webProgress.addProgressListener(
+      this,
+      Ci.nsIWebProgress.NOTIFY_STATE_ALL | Ci.nsIWebProgress.NOTIFY_LOCATION
+    );
+
+    this._deferred = PromiseUtils.defer();
+    return this._deferred.promise;
+  },
+
+  cancelPromise() {
+    this._deferred = null;
+    this._browser.removeProgressListener(this);
+    this._browser = null;
+  },
+};
+
+/** @implements {nsIExternalProtocolService} */
+let mockExternalProtocolService = {
+  QueryInterface: ChromeUtils.generateQI(["nsIExternalProtocolService"]),
+
+  _deferred: null,
+
+  loadURI(aURI, aWindowContext) {
+    if (this._deferred) {
+      let deferred = this._deferred;
+      this._deferred = null;
+
+      deferred.resolve(aURI.spec);
+    } else {
+      this.cancelPromise();
+      Assert.ok(false, "unexpected call to external protocol service");
+    }
+  },
+
+  promiseEvent() {
+    this._deferred = PromiseUtils.defer();
+    return this._deferred.promise;
+  },
+
+  cancelPromise() {
+    this._deferred = null;
+  },
+};
+
+let mockExternalProtocolServiceCID = MockRegistrar.register(
+  "@mozilla.org/uriloader/external-protocol-service;1",
+  mockExternalProtocolService
+);
+
+registerCleanupFunction(() => {
+  let tabmail = document.getElementById("tabmail");
+  Assert.equal(tabmail.tabInfo.length, 1);
+
+  while (tabmail.tabInfo.length > 1) {
+    tabmail.closeTab(tabmail.tabInfo[1]);
+  }
+
+  MockRegistrar.unregister(mockExternalProtocolServiceCID);
+});
+
+async function clickOnLink(
+  browser,
+  selector,
+  url,
+  pageURL,
+  shouldLoadInternally
+) {
+  if (
+    browser.webProgress?.isLoadingDocument ||
+    browser.currentURI?.spec == "about:blank"
+  ) {
+    await BrowserTestUtils.browserLoaded(browser);
+
+    // Clear the event queue.
+    // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+    await new Promise(r => setTimeout(r, 250));
+  }
+  Assert.equal(
+    browser.currentURI?.spec,
+    pageURL,
+    "original URL should be loaded"
+  );
+
+  let webProgressPromise = webProgressListener.promiseEvent(browser);
+  let externalProtocolPromise = mockExternalProtocolService.promiseEvent();
+
+  info(`clicking on ${selector}`);
+  await BrowserTestUtils.synthesizeMouseAtCenter(selector, {}, browser);
+
+  await Promise.any([webProgressPromise, externalProtocolPromise]);
+
+  if (selector == "#this-hash") {
+    await SpecialPowers.spawn(browser, [], () => {
+      let doc = content.document;
+      let target = doc.querySelector("#hash");
+      let targetRect = target.getBoundingClientRect();
+      Assert.less(
+        targetRect.bottom,
+        doc.documentElement.clientHeight,
+        "page did scroll"
+      );
+    });
+  }
+
+  if (shouldLoadInternally) {
+    Assert.equal(
+      await webProgressPromise,
+      url,
+      `${url} should load internally`
+    );
+    mockExternalProtocolService.cancelPromise();
+  } else {
+    Assert.equal(
+      await externalProtocolPromise,
+      url,
+      `${url} should load externally`
+    );
+    webProgressListener.cancelPromise();
+  }
+
+  if (browser.currentURI?.spec != pageURL) {
+    let promise = webProgressListener.promiseEvent(browser);
+    browser.browsingContext.goBack();
+    await promise;
+    Assert.equal(browser.currentURI?.spec, pageURL, "should have gone back");
+  }
+}
+
+async function subtest(pagePrePath, group, shouldLoadCB) {
+  let tabmail = document.getElementById("tabmail");
+  let tab = window.openContentTab(
+    `${pagePrePath}${TEST_PATH}`,
+    undefined,
+    group
+  );
+
+  let expectedGroup = group;
+  if (group === null) {
+    expectedGroup = "browsers";
+  } else if (group === undefined) {
+    expectedGroup = "single-site";
+  }
+  Assert.equal(tab.browser.getAttribute("messagemanagergroup"), expectedGroup);
+
+  try {
+    for (let [selector, url] of links) {
+      if (url.startsWith("/")) {
+        url = `${pagePrePath}${url}`;
+      }
+      await clickOnLink(
+        tab.browser,
+        selector,
+        url,
+        `${pagePrePath}${TEST_PATH}`,
+        shouldLoadCB(selector)
+      );
+    }
+  } finally {
+    tabmail.closeTab(tab);
+  }
+}
+
+add_task(function testNoGroup() {
+  return subtest(
+    TEST_DOMAIN,
+    undefined,
+    selector => selector != "#other-domain"
+  );
+});
+
+add_task(function testBrowsersGroup() {
+  return subtest(TEST_DOMAIN, null, selector => true);
+});
+
+add_task(function testSingleSiteGroup() {
+  return subtest(
+    TEST_DOMAIN,
+    "single-site",
+    selector => selector != "#other-domain"
+  );
+});
+
+add_task(function testSinglePageGroup() {
+  return subtest(TEST_DOMAIN, "single-page", selector =>
+    selector.startsWith("#this")
+  );
+});
+
+add_task(function testNoGroupWithIP() {
+  return subtest(
+    TEST_IP,
+    undefined,
+    selector => selector.startsWith("#this") || selector.startsWith("#local")
+  );
+});
+
+add_task(function testBrowsersGroupWithIP() {
+  return subtest(TEST_IP, null, selector => true);
+});
+
+add_task(function testSingleSiteGroupWithIP() {
+  return subtest(
+    TEST_IP,
+    "single-site",
+    selector => selector.startsWith("#this") || selector.startsWith("#local")
+  );
+});
+
+add_task(function testSinglePageGroupWithIP() {
+  return subtest(TEST_IP, "single-page", selector =>
+    selector.startsWith("#this")
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_mailContext.js b/comm/mail/base/test/browser/browser_mailContext.js
new file mode 100644
index 0000000000..3b75b2827e
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_mailContext.js
@@ -0,0 +1,950 @@
+/* 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/. */
+
+var { ConversationOpener } = ChromeUtils.import(
+  "resource:///modules/ConversationOpener.jsm"
+);
+var { Gloda } = ChromeUtils.import("resource:///modules/gloda/Gloda.jsm");
+var { GlodaSyntheticView } = ChromeUtils.import(
+  "resource:///modules/gloda/GlodaSyntheticView.jsm"
+);
+var { MailConsts } = ChromeUtils.import("resource:///modules/MailConsts.jsm");
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+var { MailUtils } = ChromeUtils.import("resource:///modules/MailUtils.jsm");
+var { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+var { cal } = ChromeUtils.import("resource:///modules/calendar/calUtils.jsm");
+
+const TEST_MESSAGE_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/sampleContent.eml";
+
+let tabmail = document.getElementById("tabmail");
+let testFolder, testMessages;
+let draftsFolder, draftsMessages;
+let templatesFolder, templatesMessages;
+let listFolder, listMessages;
+
+let singleSelectionMessagePane = [
+  "singleMessage",
+  "draftsFolder",
+  "templatesFolder",
+  "listFolder",
+  "syntheticFolderDraft",
+  "syntheticFolder",
+];
+let singleSelectionThreadPane = [
+  "singleMessageTree",
+  "draftsFolderTree",
+  "templatesFolderTree",
+  "listFolderTree",
+  "syntheticFolderDraftTree",
+  "syntheticFolderTree",
+];
+let onePane = ["messageTab", "messageWindow"];
+let external = ["externalMessageTab", "externalMessageWindow"];
+let allSingleSelection = [
+  ...singleSelectionMessagePane,
+  ...singleSelectionThreadPane,
+  ...onePane,
+  ...external,
+];
+let allThreePane = [
+  ...singleSelectionMessagePane,
+  ...singleSelectionThreadPane,
+  "multipleMessagesTree",
+  "collapsedThreadTree",
+  "multipleDraftsFolderTree",
+  "multipleTemplatesFolderTree",
+];
+const noCollapsedThreads = [
+  ...singleSelectionMessagePane,
+  ...singleSelectionThreadPane,
+  "multipleMessagesTree",
+  "multipleDraftsFolderTree",
+  "multipleTemplatesFolderTree",
+  ...onePane,
+  ...external,
+];
+let notExternal = [...allThreePane, ...onePane];
+let singleNotExternal = [
+  ...singleSelectionMessagePane,
+  ...singleSelectionThreadPane,
+  ...onePane,
+];
+
+const mailContextData = {
+  "mailContext-selectall": [
+    ...singleSelectionMessagePane,
+    ...onePane,
+    ...external,
+  ],
+  "mailContext-editDraftMsg": [
+    "draftsFolder",
+    "draftsFolderTree",
+    "multipleDraftsFolderTree",
+    "syntheticFolderDraft",
+    "syntheticFolderDraftTree",
+  ],
+  "mailContext-newMsgFromTemplate": [
+    "templatesFolder",
+    "templatesFolderTree",
+    "multipleTemplatesFolderTree",
+  ],
+  "mailContext-editTemplateMsg": [
+    "templatesFolder",
+    "templatesFolderTree",
+    "multipleTemplatesFolderTree",
+  ],
+  "mailContext-openNewTab": singleSelectionThreadPane,
+  "mailContext-openNewWindow": singleSelectionThreadPane,
+  "mailContext-openConversation": [
+    ...singleSelectionMessagePane,
+    ...singleSelectionThreadPane,
+    ...onePane,
+    "collapsedThreadTree",
+  ],
+  "mailContext-openContainingFolder": [
+    "syntheticFolderDraft",
+    "syntheticFolderDraftTree",
+    "syntheticFolder",
+    "syntheticFolderTree",
+    ...onePane,
+  ],
+  "mailContext-replySender": noCollapsedThreads,
+  "mailContext-replyAll": noCollapsedThreads,
+  "mailContext-replyList": ["listFolder", "listFolderTree"],
+  "mailContext-forward": allSingleSelection,
+  "mailContext-forwardAsMenu": allSingleSelection,
+  "mailContext-multiForwardAsAttachment": [
+    "multipleMessagesTree",
+    "multipleDraftsFolderTree",
+    "multipleTemplatesFolderTree",
+  ],
+  "mailContext-redirect": noCollapsedThreads,
+  "mailContext-editAsNew": noCollapsedThreads,
+  "mailContext-tags": notExternal,
+  "mailContext-mark": notExternal,
+  "mailContext-archive": notExternal,
+  "mailContext-moveMenu": notExternal,
+  "mailContext-copyMenu": true,
+  "mailContext-decryptToFolder": [
+    "multipleMessagesTree",
+    "collapsedThreadTree",
+    "multipleDraftsFolderTree",
+    "multipleTemplatesFolderTree",
+  ],
+  "mailContext-calendar-convert-menu": singleNotExternal,
+  "mailContext-delete": notExternal,
+  "mailContext-ignoreThread": allThreePane,
+  "mailContext-ignoreSubthread": allThreePane,
+  "mailContext-watchThread": notExternal,
+  "mailContext-saveAs": true,
+  "mailContext-print": true,
+  "mailContext-downloadSelected": [
+    "multipleMessagesTree",
+    "collapsedThreadTree",
+    "multipleDraftsFolderTree",
+    "multipleTemplatesFolderTree",
+  ],
+};
+
+function checkMenuitems(menu, mode) {
+  if (!mode) {
+    // Menu should not be shown.
+    Assert.equal(menu.state, "closed");
+    return;
+  }
+
+  info(`Checking menus for ${mode} ...`);
+
+  Assert.notEqual(menu.state, "closed", "Menu should be closed");
+
+  let expectedItems = [];
+  for (let [id, modes] of Object.entries(mailContextData)) {
+    if (modes === true || modes.includes(mode)) {
+      expectedItems.push(id);
+    }
+  }
+
+  let actualItems = [];
+  for (let item of menu.children) {
+    if (["menu", "menuitem"].includes(item.localName) && !item.hidden) {
+      actualItems.push(item.id);
+    }
+  }
+
+  let notFoundItems = expectedItems.filter(i => !actualItems.includes(i));
+  if (notFoundItems.length) {
+    Assert.report(
+      true,
+      undefined,
+      undefined,
+      "items expected but not found: " + notFoundItems.join(", ")
+    );
+  }
+
+  let unexpectedItems = actualItems.filter(i => !expectedItems.includes(i));
+  if (unexpectedItems.length) {
+    Assert.report(
+      true,
+      undefined,
+      undefined,
+      "items found but not expected: " + unexpectedItems.join(", ")
+    );
+  }
+
+  Assert.deepEqual(actualItems, expectedItems);
+
+  menu.hidePopup();
+}
+
+add_setup(async function () {
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  let rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("mailContextFolder", null);
+  testFolder = rootFolder
+    .getChildNamed("mailContextFolder")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  let message = await fetch(TEST_MESSAGE_URL).then(r => r.text());
+  testFolder.addMessageBatch([message]);
+  let messages = [
+    ...generator.makeMessages({ count: 5 }),
+    ...generator.makeMessages({ count: 5, msgsPerThread: 5 }),
+    ...generator.makeMessages({ count: 200 }),
+  ];
+  let messageStrings = messages.map(message => message.toMboxString());
+  testFolder.addMessageBatch(messageStrings);
+  testMessages = [...testFolder.messages];
+  rootFolder.createSubfolder("mailContextDrafts", null);
+  draftsFolder = rootFolder
+    .getChildNamed("mailContextDrafts")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  draftsFolder.setFlag(Ci.nsMsgFolderFlags.Drafts);
+  draftsFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  draftsMessages = [...draftsFolder.messages];
+  rootFolder.createSubfolder("mailContextTemplates", null);
+  templatesFolder = rootFolder
+    .getChildNamed("mailContextTemplates")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  templatesFolder.setFlag(Ci.nsMsgFolderFlags.Templates);
+  templatesFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  templatesMessages = [...templatesFolder.messages];
+  rootFolder.createSubfolder("mailContextMailingList", null);
+  listFolder = rootFolder
+    .getChildNamed("mailContextMailingList")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  listFolder.addMessage(
+    "From - Mon Jan 01 00:00:00 2001\n" +
+      "To: Mailing List <list@example.com>\n" +
+      "Date: Mon, 01 Jan 2001 00:00:00 +0100\n" +
+      "List-Help: <https://list.example.com>\n" +
+      "List-Post: <mailto:list@example.com>\n" +
+      "List-Software: Mailing List Software\n" +
+      "List-Subscribe: <https://subscribe.example.com>\n" +
+      "Precedence: list\n" +
+      "Subject: Mailing List Test Mail\n" +
+      `Message-ID: <${Date.now()}@example.com>\n` +
+      "From: Mailing List <list@example.com>\n" +
+      "List-Unsubscribe: <https://unsubscribe.example.com>,\n" +
+      " <mailto:unsubscribe@example.com?subject=Unsubscribe Test>\n" +
+      "MIME-Version: 1.0\n" +
+      "Content-Type: text/plain; charset=UTF-8\n" +
+      "Content-Transfer-Encoding: quoted-printable\n" +
+      "\n" +
+      "Mailing List Message Body\n"
+  );
+  listMessages = [...listFolder.messages];
+
+  tabmail.currentAbout3Pane.restoreState({
+    folderURI: testFolder.URI,
+    messagePaneVisible: true,
+  });
+
+  // Enable home calendar.
+  cal.manager.getCalendars()[0].setProperty("disabled", false);
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.clearUserPref("mail.openMessageBehavior");
+    cal.manager.getCalendars()[0].setProperty("disabled", true);
+  });
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane when no
+ * messages are selected.
+ */
+add_task(async function testNoMessages() {
+  let about3Pane = tabmail.currentAbout3Pane;
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { messageBrowser, messagePane, threadTree } = about3Pane;
+  messagePane.clearAll();
+
+  // The message pane browser isn't visible.
+
+  Assert.ok(
+    BrowserTestUtils.is_hidden(messageBrowser),
+    "message browser should be hidden"
+  );
+  Assert.equal(messageBrowser.currentURI.spec, "about:message");
+  Assert.equal(
+    messageBrowser.contentWindow.getMessagePaneBrowser().currentURI.spec,
+    "about:blank"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    about3Pane.document.getElementById("messagePane"),
+    { type: "contextmenu" }
+  );
+  checkMenuitems(mailContext);
+
+  // Open the menu from an empty part of the thread pane.
+
+  let treeRect = threadTree.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    threadTree,
+    treeRect.x + treeRect.width / 2,
+    treeRect.bottom - 10,
+    { type: "contextmenu" },
+    about3Pane
+  );
+  checkMenuitems(mailContext);
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane when one
+ * message is selected.
+ */
+add_task(async function testSingleMessage() {
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(testMessages[0]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let about3Pane = tabmail.currentAbout3Pane;
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { gDBView, messageBrowser, threadTree } = about3Pane;
+  let messagePaneBrowser = messageBrowser.contentWindow.getMessagePaneBrowser();
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(0))
+  );
+  threadTree.selectedIndex = 0;
+  threadTree.scrollToIndex(0, true);
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "singleMessage");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(0),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "singleMessageTree");
+
+  // Open the menu through the keyboard.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  const row = threadTree.getRowAtIndex(0);
+  row.focus();
+  EventUtils.synthesizeMouseAtCenter(
+    row,
+    { type: "contextmenu", button: 0 },
+    about3Pane
+  );
+  await shownPromise;
+  Assert.ok(
+    BrowserTestUtils.is_visible(mailContext),
+    "Context menu is shown through keyboard action"
+  );
+  mailContext.hidePopup();
+
+  // Open the menu through the keyboard on a message that is scrolled slightly
+  // out of view.
+
+  threadTree.selectedIndex = 5;
+  threadTree.scrollToIndex(threadTree.getLastVisibleIndex() + 7, true);
+  await new Promise(resolve => window.requestAnimationFrame(resolve));
+  Assert.equal(threadTree.currentIndex, 5, "Row 5 is the current row");
+  Assert.ok(row.parentNode, "Row element should still be attached");
+  Assert.greater(
+    threadTree.getFirstVisibleIndex(),
+    5,
+    "Selected row should no longer be visible"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree,
+    { type: "contextmenu", button: 0 },
+    about3Pane
+  );
+  await new Promise(resolve => window.requestAnimationFrame(resolve));
+  await BrowserTestUtils.waitForPopupEvent(mailContext, "shown");
+  Assert.greaterOrEqual(
+    5,
+    threadTree.getFirstVisibleIndex(),
+    "Current row is greater than or equal to first visible index"
+  );
+  Assert.lessOrEqual(
+    5,
+    threadTree.getLastVisibleIndex(),
+    "Current row is less than or equal to last visible index"
+  );
+  mailContext.hidePopup();
+
+  // Open the menu on a message that is scrolled out of view.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  threadTree.scrollToIndex(200, true);
+  await new Promise(resolve => window.requestAnimationFrame(resolve));
+  Assert.ok(!row.parentNode, "Row element should no longer be attached");
+  Assert.equal(threadTree.currentIndex, 5, "Row 5 is the current row");
+  Assert.ok(
+    !threadTree.getRowAtIndex(threadTree.currentIndex),
+    "Current row is scrolled out of view"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree,
+    { type: "contextmenu", button: 0 },
+    about3Pane
+  );
+  await shownPromise;
+  Assert.ok(
+    threadTree.getRowAtIndex(threadTree.currentIndex),
+    "Current row is scrolled into view when showing context menu"
+  );
+  Assert.greaterOrEqual(
+    5,
+    threadTree.getFirstVisibleIndex(),
+    "Current row is greater than or equal to first visible index"
+  );
+  Assert.lessOrEqual(
+    5,
+    threadTree.getLastVisibleIndex(),
+    "Current row is less than or equal to last visible index"
+  );
+  mailContext.hidePopup();
+
+  Assert.ok(BrowserTestUtils.is_hidden(mailContext), "Context menu is hidden");
+});
+
+/**
+ * Tests the mailContext menu on the thread tree when more than one message is
+ * selected.
+ */
+add_task(async function testMultipleMessages() {
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(testMessages[6]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let about3Pane = tabmail.currentAbout3Pane;
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { messageBrowser, multiMessageBrowser, threadTree } = about3Pane;
+  threadTree.scrollToIndex(1, true);
+  threadTree.selectedIndices = [1, 2, 3];
+  await TestUtils.waitForTick(); // Wait for rows to be added.
+
+  // The message pane browser isn't visible.
+
+  Assert.ok(
+    BrowserTestUtils.is_hidden(messageBrowser),
+    "message browser should be hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(multiMessageBrowser),
+    "multimessage browser should be visible"
+  );
+
+  // Open the menu from the thread pane.
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(2),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "multipleMessagesTree");
+
+  // Select a collapsed thread and open the menu.
+
+  threadTree.scrollToIndex(6, true);
+  threadTree.selectedIndices = [6];
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(6),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "collapsedThreadTree");
+
+  // Open the menu in the thread pane on a message scrolled out of view.
+
+  threadTree.selectAll();
+  threadTree.currentIndex = 200;
+  await TestUtils.waitForTick();
+  await new Promise(resolve => window.requestAnimationFrame(resolve));
+  threadTree.scrollToIndex(0, true);
+  await new Promise(resolve => window.requestAnimationFrame(resolve));
+  Assert.ok(
+    !threadTree.getRowAtIndex(threadTree.currentIndex),
+    "Current row is scrolled out of view"
+  );
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree,
+    { type: "contextmenu", button: 0 },
+    about3Pane
+  );
+  await shownPromise;
+  Assert.ok(
+    threadTree.getRowAtIndex(threadTree.currentIndex),
+    "Current row is scrolled into view when popup is shown"
+  );
+  mailContext.hidePopup();
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane of a Drafts
+ * folder.
+ */
+add_task(async function testDraftsFolder() {
+  let about3Pane = tabmail.currentAbout3Pane;
+  about3Pane.restoreState({ folderURI: draftsFolder.URI });
+
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(draftsMessages[1]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { gDBView, messageBrowser, threadTree } = about3Pane;
+  let messagePaneBrowser = messageBrowser.contentWindow.getMessagePaneBrowser();
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(0))
+  );
+  threadTree.selectedIndex = 0;
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "draftsFolder");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(0),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "draftsFolderTree");
+
+  threadTree.scrollToIndex(1, true);
+  threadTree.selectedIndices = [1, 2, 3];
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(2),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "multipleDraftsFolderTree");
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane of a Templates
+ * folder.
+ */
+add_task(async function testTemplatesFolder() {
+  let about3Pane = tabmail.currentAbout3Pane;
+  about3Pane.restoreState({ folderURI: templatesFolder.URI });
+
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(templatesMessages[1]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { gDBView, messageBrowser, threadTree } = about3Pane;
+  let messagePaneBrowser = messageBrowser.contentWindow.getMessagePaneBrowser();
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(0))
+  );
+  threadTree.selectedIndex = 0;
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "templatesFolder");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(0),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "templatesFolderTree");
+
+  threadTree.scrollToIndex(1, true);
+  threadTree.selectedIndices = [1, 2, 3];
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(2),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "multipleTemplatesFolderTree");
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane of a
+ * mailing list message.
+ */
+
+add_task(async function testListMessage() {
+  let about3Pane = tabmail.currentAbout3Pane;
+  about3Pane.restoreState({ folderURI: listFolder.URI });
+
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(listMessages[0]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { gDBView, messageBrowser, threadTree } = about3Pane;
+  let messagePaneBrowser = messageBrowser.contentWindow.getMessagePaneBrowser();
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(0))
+  );
+  threadTree.selectedIndex = 0;
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "listFolder");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(0),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "listFolderTree");
+});
+
+/**
+ * Tests the mailContext menu on the thread tree and message pane of a Gloda
+ * synthetic view (in this case a conversation, but a list of search results
+ * should be the same).
+ */
+add_task(async function testSyntheticFolder() {
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(testMessages[9]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+  await TestUtils.waitForCondition(
+    () => ConversationOpener.isMessageIndexed(draftsMessages[4]),
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  let tabPromise = BrowserTestUtils.waitForEvent(window, "aboutMessageLoaded");
+  tabmail.openTab("mail3PaneTab", {
+    syntheticView: new GlodaSyntheticView({
+      collection: Gloda.getMessageCollectionForHeaders([
+        ...draftsMessages,
+        ...testMessages.slice(6),
+      ]),
+    }),
+    title: "Test gloda results",
+  });
+  await tabPromise;
+  await new Promise(resolve => setTimeout(resolve));
+
+  let about3Pane = tabmail.currentAbout3Pane;
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let { gDBView, messageBrowser, threadTree } = about3Pane;
+  let messagePaneBrowser = messageBrowser.contentWindow.getMessagePaneBrowser();
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(0))
+  );
+  threadTree.selectedIndex = 0;
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "syntheticFolderDraft");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(0),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "syntheticFolderDraftTree");
+
+  loadedPromise = BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    undefined,
+    url => url.endsWith(gDBView.getKeyAt(5))
+  );
+  threadTree.selectedIndex = 5;
+  await loadedPromise;
+
+  // Open the menu from the message pane.
+
+  Assert.ok(
+    BrowserTestUtils.is_visible(messageBrowser),
+    "message browser should be visible"
+  );
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    messagePaneBrowser
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "syntheticFolder");
+
+  // Open the menu from the thread pane.
+
+  shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(5),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "syntheticFolderTree");
+
+  tabmail.closeOtherTabs(0);
+});
+
+/**
+ * Tests the mailContext menu on the message pane of a message in a tab.
+ */
+add_task(async function testMessageTab() {
+  let tabPromise = BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  window.OpenMessageInNewTab(testMessages[0], { background: false });
+  await tabPromise;
+  await new Promise(resolve => setTimeout(resolve));
+
+  let aboutMessage = tabmail.currentAboutMessage;
+  let mailContext = aboutMessage.document.getElementById("mailContext");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    aboutMessage.getMessagePaneBrowser()
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "messageTab");
+
+  tabmail.closeOtherTabs(0);
+});
+
+/**
+ * Tests the mailContext menu on the message pane of a file message in a tab.
+ */
+add_task(async function testExternalMessageTab() {
+  let tabPromise = BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  let messageFile = new FileUtils.File(
+    getTestFilePath("files/sampleContent.eml")
+  );
+  Services.prefs.setIntPref(
+    "mail.openMessageBehavior",
+    MailConsts.OpenMessageBehavior.NEW_TAB
+  );
+  MailUtils.openEMLFile(
+    window,
+    messageFile,
+    Services.io.newFileURI(messageFile)
+  );
+  await tabPromise;
+  await new Promise(resolve => setTimeout(resolve));
+
+  let aboutMessage = tabmail.currentAboutMessage;
+  let mailContext = aboutMessage.document.getElementById("mailContext");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    aboutMessage.getMessagePaneBrowser()
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "externalMessageTab");
+
+  tabmail.closeOtherTabs(0);
+});
+
+/**
+ * Tests the mailContext menu on the message pane of a message in a window.
+ */
+add_task(async function testMessageWindow() {
+  let winPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  window.MsgOpenNewWindowForMessage(testMessages[0]);
+  let win = await winPromise;
+  await BrowserTestUtils.waitForEvent(win, "MsgLoaded");
+  await TestUtils.waitForCondition(() => Services.focus.activeWindow == win);
+
+  let aboutMessage = win.messageBrowser.contentWindow;
+  let mailContext = aboutMessage.document.getElementById("mailContext");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    aboutMessage.getMessagePaneBrowser()
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "messageWindow");
+
+  await BrowserTestUtils.closeWindow(win);
+});
+
+/**
+ * Tests the mailContext menu on the message pane of a file message in a window.
+ */
+add_task(async function testExternalMessageWindow() {
+  let winPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  let messageFile = new FileUtils.File(
+    getTestFilePath("files/sampleContent.eml")
+  );
+  Services.prefs.setIntPref(
+    "mail.openMessageBehavior",
+    MailConsts.OpenMessageBehavior.NEW_WINDOW
+  );
+  MailUtils.openEMLFile(
+    window,
+    messageFile,
+    Services.io.newFileURI(messageFile)
+  );
+  let win = await winPromise;
+  await BrowserTestUtils.waitForEvent(win, "MsgLoaded");
+  await TestUtils.waitForCondition(() => Services.focus.activeWindow == win);
+
+  let aboutMessage = win.messageBrowser.contentWindow;
+  let mailContext = aboutMessage.document.getElementById("mailContext");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    ":root",
+    { type: "contextmenu" },
+    aboutMessage.getMessagePaneBrowser()
+  );
+  await shownPromise;
+  checkMenuitems(mailContext, "externalMessageWindow");
+
+  await BrowserTestUtils.closeWindow(win);
+});
diff --git a/comm/mail/base/test/browser/browser_mailTabsAndWindows.js b/comm/mail/base/test/browser/browser_mailTabsAndWindows.js
new file mode 100644
index 0000000000..3da815edd9
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_mailTabsAndWindows.js
@@ -0,0 +1,355 @@
+/* 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/. */
+
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+var { MailUtils } = ChromeUtils.import("resource:///modules/MailUtils.jsm");
+var { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let folderA, messagesA, folderB, messagesB;
+
+add_setup(async function () {
+  let tabmail = document.getElementById("tabmail");
+  if (tabmail.tabInfo.length > 1) {
+    info(`Will close ${tabmail.tabInfo.length - 1} tabs left over from others`);
+    for (let i = tabmail.tabInfo.length - 1; i > 0; i--) {
+      tabmail.closeTab(i);
+    }
+  }
+  Assert.equal(tabmail.tabInfo.length, 1, "should be set up with one tab");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  let rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("mailTabsA", null);
+  folderA = rootFolder
+    .getChildNamed("mailTabsA")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderA.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  messagesA = [...folderA.messages];
+
+  rootFolder.createSubfolder("mailTabsB", null);
+  folderB = rootFolder
+    .getChildNamed("mailTabsB")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderB.addMessageBatch(
+    generator.makeMessages({ count: 2 }).map(message => message.toMboxString())
+  );
+  messagesB = [...folderB.messages];
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function testTabs() {
+  let tabmail = document.getElementById("tabmail");
+  Assert.equal(tabmail.tabInfo.length, 1, "should start off with one tab open");
+  Assert.equal(tabmail.currentTabInfo, tabmail.tabInfo[0], "should show tab0");
+
+  // Check the first tab.
+
+  let firstTab = tabmail.currentTabInfo;
+  Assert.equal(firstTab.mode.name, "mail3PaneTab");
+  Assert.equal(firstTab.mode.tabType.name, "mailTab");
+
+  let firstChromeBrowser = firstTab.chromeBrowser;
+  Assert.equal(firstChromeBrowser.currentURI.spec, "about:3pane");
+  Assert.equal(tabmail.currentAbout3Pane, firstChromeBrowser.contentWindow);
+
+  let firstMessageBrowser =
+    firstChromeBrowser.contentDocument.getElementById("messageBrowser");
+  Assert.equal(firstMessageBrowser.currentURI.spec, "about:message");
+
+  let firstMessagePane =
+    firstMessageBrowser.contentDocument.getElementById("messagepane");
+  Assert.equal(firstMessagePane.currentURI.spec, "about:blank");
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    null,
+    "currentAboutMessage should be null with no message selected"
+  );
+  Assert.equal(firstTab.browser, null);
+  Assert.equal(firstTab.linkedBrowser, null);
+
+  let { folderTree, threadTree, messagePane, paneLayout } =
+    firstChromeBrowser.contentWindow;
+
+  firstTab.folder = folderA;
+  Assert.equal(firstTab.folder, folderA);
+  Assert.equal(
+    folderTree.querySelector(".selected .name").textContent,
+    "mailTabsA"
+  );
+  Assert.equal(threadTree.view.rowCount, 5);
+  Assert.equal(threadTree.selectedIndex, -1);
+
+  Assert.equal(firstTab.message, null);
+  threadTree.selectedIndex = 0;
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    firstMessageBrowser.contentWindow,
+    "currentAboutMessage should have a value with a message selected"
+  );
+  Assert.equal(firstTab.message, messagesA[0]);
+  Assert.equal(firstTab.browser, firstMessagePane);
+  Assert.equal(firstTab.linkedBrowser, firstMessagePane);
+
+  Assert.ok(BrowserTestUtils.is_visible(folderTree));
+  Assert.ok(BrowserTestUtils.is_visible(firstMessageBrowser));
+
+  paneLayout.folderPaneVisible = false;
+  Assert.ok(BrowserTestUtils.is_hidden(folderTree));
+  Assert.ok(BrowserTestUtils.is_visible(firstMessageBrowser));
+
+  paneLayout.messagePaneVisible = false;
+  Assert.ok(BrowserTestUtils.is_hidden(folderTree));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMessageBrowser));
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    null,
+    "currentAboutMessage should be null with the message pane hidden"
+  );
+  Assert.equal(firstTab.browser, null);
+  Assert.equal(firstTab.linkedBrowser, null);
+
+  paneLayout.folderPaneVisible = true;
+  Assert.ok(BrowserTestUtils.is_visible(folderTree));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMessageBrowser));
+
+  paneLayout.messagePaneVisible = true;
+  Assert.ok(BrowserTestUtils.is_visible(folderTree));
+  Assert.ok(BrowserTestUtils.is_visible(firstMessageBrowser));
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    firstMessageBrowser.contentWindow,
+    "currentAboutMessage should have a value with the message pane shown"
+  );
+  Assert.equal(firstTab.browser, firstMessagePane);
+  Assert.equal(firstTab.linkedBrowser, firstMessagePane);
+
+  Assert.equal(firstChromeBrowser.contentWindow.tabOrWindow, firstTab);
+  Assert.equal(firstMessageBrowser.contentWindow.tabOrWindow, firstTab);
+
+  // Select multiple messages.
+
+  let firstMultiMessageBrowser =
+    firstChromeBrowser.contentDocument.getElementById("multiMessageBrowser");
+  let firstWebBrowser =
+    firstChromeBrowser.contentDocument.getElementById("webBrowser");
+
+  threadTree.selectedIndices = [1, 2];
+  Assert.ok(BrowserTestUtils.is_hidden(firstWebBrowser));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMessageBrowser));
+  Assert.ok(BrowserTestUtils.is_visible(firstMultiMessageBrowser));
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    null,
+    "currentAboutMessage should be null with multiple messages selected"
+  );
+  Assert.equal(firstTab.browser, null);
+  Assert.equal(firstTab.linkedBrowser, null);
+
+  // Load a web page.
+
+  let loadedPromise = BrowserTestUtils.browserLoaded(
+    firstWebBrowser,
+    false,
+    "http://mochi.test:8888/"
+  );
+  messagePane.displayWebPage("http://mochi.test:8888/");
+  await loadedPromise;
+  Assert.ok(BrowserTestUtils.is_visible(firstWebBrowser));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMessageBrowser));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMultiMessageBrowser));
+  Assert.equal(firstWebBrowser.currentURI.spec, "http://mochi.test:8888/");
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    null,
+    "currentAboutMessage should be null with a web page loaded"
+  );
+  Assert.equal(firstTab.browser, firstWebBrowser);
+  Assert.equal(firstTab.linkedBrowser, firstWebBrowser);
+
+  // Go back to a single selection.
+
+  threadTree.selectedIndex = 0;
+  Assert.ok(BrowserTestUtils.is_hidden(firstWebBrowser));
+  Assert.ok(BrowserTestUtils.is_visible(firstMessageBrowser));
+  Assert.ok(BrowserTestUtils.is_hidden(firstMultiMessageBrowser));
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    firstMessageBrowser.contentWindow,
+    "currentAboutMessage should have a value with a single message selected"
+  );
+  Assert.equal(firstTab.browser, firstMessagePane);
+  Assert.equal(firstTab.linkedBrowser, firstMessagePane);
+
+  // Open some more tabs. These should open in the background.
+
+  window.MsgOpenNewTabForFolders([folderB], {
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+  });
+
+  for (let message of messagesB) {
+    window.OpenMessageInNewTab(message, {});
+  }
+
+  Assert.equal(tabmail.tabInfo.length, 4);
+  Assert.equal(tabmail.currentTabInfo, firstTab);
+  Assert.equal(tabmail.currentAbout3Pane, firstChromeBrowser.contentWindow);
+  Assert.equal(tabmail.currentAboutMessage, firstMessageBrowser.contentWindow);
+
+  // Check the second tab.
+
+  tabmail.switchToTab(1);
+  Assert.equal(tabmail.currentTabInfo, tabmail.tabInfo[1]);
+
+  let secondTab = tabmail.currentTabInfo;
+  Assert.equal(secondTab.mode.name, "mail3PaneTab");
+  Assert.equal(secondTab.mode.tabType.name, "mailTab");
+
+  let secondChromeBrowser = secondTab.chromeBrowser;
+  await ensureBrowserLoaded(secondChromeBrowser);
+  Assert.equal(secondChromeBrowser.currentURI.spec, "about:3pane");
+  Assert.equal(tabmail.currentAbout3Pane, secondChromeBrowser.contentWindow);
+
+  let secondMessageBrowser =
+    secondChromeBrowser.contentDocument.getElementById("messageBrowser");
+  await ensureBrowserLoaded(secondMessageBrowser);
+  Assert.equal(secondMessageBrowser.currentURI.spec, "about:message");
+
+  let secondMessagePane =
+    secondMessageBrowser.contentDocument.getElementById("messagepane");
+  Assert.equal(secondMessagePane.currentURI.spec, "about:blank");
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    null,
+    "currentAboutMessage should be null with no message selected"
+  );
+  Assert.equal(secondTab.browser, null);
+  Assert.equal(secondTab.linkedBrowser, null);
+
+  Assert.equal(secondTab.folder, folderB);
+
+  secondChromeBrowser.contentWindow.threadTree.selectedIndex = 0;
+  Assert.equal(
+    tabmail.currentAboutMessage,
+    secondMessageBrowser.contentWindow,
+    "currentAboutMessage should have a value with a message selected"
+  );
+
+  Assert.equal(secondChromeBrowser.contentWindow.tabOrWindow, secondTab);
+  Assert.equal(secondMessageBrowser.contentWindow.tabOrWindow, secondTab);
+
+  // Check the third tab.
+
+  tabmail.switchToTab(2);
+  Assert.equal(tabmail.currentTabInfo, tabmail.tabInfo[2]);
+
+  let thirdTab = tabmail.currentTabInfo;
+  Assert.equal(thirdTab.mode.name, "mailMessageTab");
+  Assert.equal(thirdTab.mode.tabType.name, "mailTab");
+
+  let thirdChromeBrowser = thirdTab.chromeBrowser;
+  await ensureBrowserLoaded(thirdChromeBrowser);
+  Assert.equal(thirdChromeBrowser.currentURI.spec, "about:message");
+  Assert.equal(tabmail.currentAbout3Pane, null);
+  Assert.equal(tabmail.currentAboutMessage, thirdChromeBrowser.contentWindow);
+
+  let thirdMessagePane =
+    thirdChromeBrowser.contentDocument.getElementById("messagepane");
+  Assert.equal(thirdMessagePane.currentURI.spec, messageToURL(messagesB[0]));
+  Assert.equal(thirdTab.browser, thirdMessagePane);
+  Assert.equal(thirdTab.linkedBrowser, thirdMessagePane);
+
+  Assert.equal(thirdTab.folder, folderB);
+  Assert.equal(thirdTab.message, messagesB[0]);
+
+  Assert.equal(thirdChromeBrowser.contentWindow.tabOrWindow, thirdTab);
+
+  // Check the fourth tab.
+
+  tabmail.switchToTab(3);
+  Assert.equal(tabmail.currentTabInfo, tabmail.tabInfo[3]);
+
+  let fourthTab = tabmail.currentTabInfo;
+  Assert.equal(fourthTab.mode.name, "mailMessageTab");
+  Assert.equal(fourthTab.mode.tabType.name, "mailTab");
+
+  let fourthChromeBrowser = fourthTab.chromeBrowser;
+  await ensureBrowserLoaded(fourthChromeBrowser);
+  Assert.equal(fourthChromeBrowser.currentURI.spec, "about:message");
+  Assert.equal(tabmail.currentAbout3Pane, null);
+  Assert.equal(tabmail.currentAboutMessage, fourthChromeBrowser.contentWindow);
+
+  let fourthMessagePane =
+    fourthChromeBrowser.contentDocument.getElementById("messagepane");
+  Assert.equal(fourthMessagePane.currentURI.spec, messageToURL(messagesB[1]));
+  Assert.equal(fourthTab.browser, fourthMessagePane);
+  Assert.equal(fourthTab.linkedBrowser, fourthMessagePane);
+
+  Assert.equal(fourthTab.folder, folderB);
+  Assert.equal(fourthTab.message, messagesB[1]);
+
+  Assert.equal(fourthChromeBrowser.contentWindow.tabOrWindow, fourthTab);
+
+  // Close tabs.
+
+  tabmail.closeTab(3);
+  Assert.equal(tabmail.currentTabInfo, thirdTab);
+  Assert.equal(tabmail.currentAbout3Pane, null);
+  Assert.equal(tabmail.currentAboutMessage, thirdChromeBrowser.contentWindow);
+
+  tabmail.closeTab(2);
+  Assert.equal(tabmail.currentTabInfo, secondTab);
+  Assert.equal(tabmail.currentAbout3Pane, secondChromeBrowser.contentWindow);
+  Assert.equal(tabmail.currentAboutMessage, secondMessageBrowser.contentWindow);
+
+  tabmail.closeTab(1);
+  Assert.equal(tabmail.currentTabInfo, firstTab);
+  Assert.equal(tabmail.currentAbout3Pane, firstChromeBrowser.contentWindow);
+  Assert.equal(tabmail.currentAboutMessage, firstMessageBrowser.contentWindow);
+});
+
+add_task(async function testMessageWindow() {
+  let messageWindowPromise = BrowserTestUtils.domWindowOpenedAndLoaded(
+    undefined,
+    async win =>
+      win.document.documentURI ==
+      "chrome://messenger/content/messageWindow.xhtml"
+  );
+  MailUtils.openMessageInNewWindow(messagesB[0]);
+
+  let messageWindow = await messageWindowPromise;
+  let messageBrowser = messageWindow.messageBrowser;
+  await ensureBrowserLoaded(messageBrowser);
+  Assert.equal(messageBrowser.contentWindow.tabOrWindow, messageWindow);
+
+  await BrowserTestUtils.closeWindow(messageWindow);
+});
+
+async function ensureBrowserLoaded(browser) {
+  await TestUtils.waitForCondition(
+    () =>
+      browser.currentURI.spec != "about:blank" &&
+      browser.contentDocument.readyState == "complete",
+    "waiting for browser to finish loading"
+  );
+}
+
+function messageToURL(message) {
+  let messageService = MailServices.messageServiceFromURI("mailbox-message://");
+  let uri = message.folder.getUriForMsg(message);
+  return messageService.getUrlForUri(uri).spec;
+}
diff --git a/comm/mail/base/test/browser/browser_markAsRead.js b/comm/mail/base/test/browser/browser_markAsRead.js
new file mode 100644
index 0000000000..62b19d5b4e
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_markAsRead.js
@@ -0,0 +1,204 @@
+/* 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/. */
+
+/**
+ * Tests that a message does not get marked as read if it is opened in a
+ * background tab.
+ */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let localTestFolder;
+
+add_setup(async function () {
+  // We need to get messages directly from the server when displaying them,
+  // or this test isn't really testing what it should.
+  Services.prefs.setBoolPref("mail.server.default.offline_download", false);
+
+  const generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  const rootFolder = account.incomingServer.rootFolder.QueryInterface(
+    Ci.nsIMsgLocalMailFolder
+  );
+  localTestFolder = rootFolder
+    .createLocalSubfolder("markAsRead")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  localTestFolder.addMessageBatch(
+    generator.makeMessages({}).map(message => message.toMboxString())
+  );
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.clearUserPref("mail.server.default.offline_download");
+    Services.prefs.clearUserPref("mailnews.mark_message_read.auto");
+    Services.prefs.clearUserPref("mailnews.mark_message_read.delay");
+    Services.prefs.clearUserPref("mailnews.mark_message_read.delay.interval");
+  });
+});
+
+add_task(async function testLocal() {
+  await subtest(localTestFolder);
+});
+
+async function subtest(testFolder) {
+  const tabmail = document.getElementById("tabmail");
+  const firstAbout3Pane = tabmail.currentAbout3Pane;
+  firstAbout3Pane.displayFolder(testFolder);
+  const testMessages = testFolder.messages;
+
+  // Open a message in the first tab. It should get marked as read immediately.
+
+  let message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 0 should not be read before load");
+  firstAbout3Pane.threadTree.selectedIndex =
+    firstAbout3Pane.gDBView.findIndexOfMsgHdr(message, false);
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  await TestUtils.waitForCondition(
+    () => message.isRead,
+    "waiting for message 0 to be marked as read"
+  );
+
+  firstAbout3Pane.threadTree.selectedIndex = -1; // Unload the message.
+
+  // Open a message in a background tab. It should not get marked as read.
+
+  message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 1 should not be read before load");
+  window.OpenMessageInNewTab(message, { background: true });
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    !message.isRead,
+    "message 1 should not be read after opening in a background tab"
+  );
+
+  // Switch to the tab. The message should get marked as read immediately.
+
+  tabmail.switchToTab(1);
+  await TestUtils.waitForTick();
+  Assert.ok(
+    message.isRead,
+    "message 1 should be read after switching to the background tab"
+  );
+  tabmail.closeTab(1);
+
+  // With the marking delayed by preferences, open a message in a background tab.
+  // It should not get marked as read.
+
+  Services.prefs.setBoolPref("mailnews.mark_message_read.delay", true);
+  Services.prefs.setIntPref("mailnews.mark_message_read.delay.interval", 2);
+
+  message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 2 should not be read before load");
+  window.OpenMessageInNewTab(message, { background: true });
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 3000));
+  Assert.ok(
+    !message.isRead,
+    "message 2 should not be read after opening in a background tab"
+  );
+
+  // Switch to the tab. The message should get marked as read after the delay.
+
+  const timeBeforeSwitchingTab = Date.now();
+  tabmail.switchToTab(1);
+  Assert.ok(
+    !message.isRead,
+    "message 2 should not be read immediately after switching to the background tab"
+  );
+  await TestUtils.waitForCondition(
+    () => message.isRead,
+    "waiting for message 2 to be marked as read"
+  );
+  Assert.greaterOrEqual(
+    Date.now() - timeBeforeSwitchingTab,
+    2000,
+    "message 2 should be read after switching to the background tab and the 2s delay"
+  );
+  tabmail.closeTab(1);
+
+  Services.prefs.setBoolPref("mailnews.mark_message_read.delay", false);
+
+  // With the marking disabled by preferences, open a message in a background
+  // tab. It should not get marked as read.
+
+  Services.prefs.setBoolPref("mailnews.mark_message_read.auto", false);
+
+  message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 3 should not be read before load");
+  window.OpenMessageInNewTab(message, { background: true });
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    !message.isRead,
+    "message 3 should not be read after opening in a background tab"
+  );
+
+  // Switch to the tab. The message should not get marked as read.
+
+  tabmail.switchToTab(1);
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    !message.isRead,
+    "message 3 should not be read after switching to the background tab"
+  );
+  tabmail.closeTab(1);
+
+  Services.prefs.setBoolPref("mailnews.mark_message_read.auto", true);
+
+  // Open a new 3-pane tab in the background and load a message in it. The
+  // message should not get marked as read.
+
+  window.MsgOpenNewTabForFolders([testFolder], {
+    background: true,
+    messagePaneVisible: true,
+  });
+  const secondAbout3Pane = tabmail.tabInfo[1].chromeBrowser.contentWindow;
+  await TestUtils.waitForCondition(
+    () => secondAbout3Pane.gDBView,
+    "waiting for view to load"
+  );
+
+  message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 4 should not be read before load");
+  secondAbout3Pane.threadTree.selectedIndex =
+    secondAbout3Pane.gDBView.findIndexOfMsgHdr(message, false);
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  Assert.ok(
+    !message.isRead,
+    "message 4 should not be read after opening in a background tab"
+  );
+
+  tabmail.switchToTab(1);
+  await TestUtils.waitForTick();
+  Assert.ok(
+    message.isRead,
+    "message 4 should be read after switching to the background tab"
+  );
+  tabmail.closeTab(1);
+
+  // Open a message in a new foreground tab. It should get marked as read
+  // immediately.
+
+  message = testMessages.getNext();
+  Assert.ok(!message.isRead, "message 5 should not be read before load");
+  window.OpenMessageInNewTab(message, { background: false });
+  await BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  Assert.ok(
+    message.isRead,
+    "message 5 should be read after opening the foreground tab"
+  );
+  tabmail.closeTab(1);
+}
diff --git a/comm/mail/base/test/browser/browser_menulist.js b/comm/mail/base/test/browser/browser_menulist.js
new file mode 100644
index 0000000000..39a6a840d2
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_menulist.js
@@ -0,0 +1,183 @@
+/* import-globals-from ../../content/utilityOverlay.js */
+
+add_task(async () => {
+  let TEST_DOCUMENT_URL = getRootDirectory(gTestPath) + "files/menulist.xhtml";
+  let testDocument = await new Promise(resolve => {
+    Services.obs.addObserver(function documentLoaded(subject) {
+      if (subject.URL == TEST_DOCUMENT_URL) {
+        Services.obs.removeObserver(documentLoaded, "chrome-document-loaded");
+        resolve(subject);
+      }
+    }, "chrome-document-loaded");
+    openContentTab(TEST_DOCUMENT_URL);
+  });
+  ok(testDocument.URL == TEST_DOCUMENT_URL);
+  let testWindow = testDocument.ownerGlobal;
+  let MENULIST_CLASS = testWindow.customElements.get("menulist");
+  let MENULIST_EDITABLE_CLASS =
+    testWindow.customElements.get("menulist-editable");
+
+  let menulists = testDocument.querySelectorAll("menulist");
+  is(menulists.length, 3);
+
+  // Menulist 0 is an ordinary, non-editable menulist.
+  ok(menulists[0] instanceof MENULIST_CLASS);
+  ok(!(menulists[0] instanceof MENULIST_EDITABLE_CLASS));
+  ok(!("editable" in menulists[0]));
+
+  // Menulist 1 is an editable menulist, but not in editing mode.
+  ok(menulists[1] instanceof MENULIST_CLASS);
+  ok(menulists[1] instanceof MENULIST_EDITABLE_CLASS);
+  ok("editable" in menulists[1]);
+  ok(!menulists[1].editable);
+
+  // Menulist 2 is an editable menulist, in editing mode.
+  ok(menulists[2] instanceof MENULIST_CLASS);
+  ok(menulists[2] instanceof MENULIST_EDITABLE_CLASS);
+  ok("editable" in menulists[2]);
+  ok(menulists[2].editable);
+
+  // Okay, let's check the focus order.
+  let testBrowser = document.getElementById("tabmail").currentTabInfo.browser;
+  EventUtils.synthesizeMouseAtCenter(testBrowser, { clickCount: 1 });
+  await new Promise(resolve => setTimeout(resolve));
+
+  let beforeButton = testDocument.querySelector("button#before");
+  beforeButton.focus();
+  is(testDocument.activeElement, beforeButton);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  is(testDocument.activeElement, menulists[0]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  is(testDocument.activeElement, menulists[1]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  is(testDocument.activeElement, menulists[2]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  is(testDocument.activeElement, menulists[2]);
+  is(menulists[2].shadowRoot.activeElement, menulists[2]._inputField);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  is(testDocument.activeElement, testDocument.querySelector("button#after"));
+
+  // Now go back again.
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
+  is(testDocument.activeElement, menulists[2]);
+  is(menulists[2].shadowRoot.activeElement, menulists[2]._inputField);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
+  is(testDocument.activeElement, menulists[2]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
+  is(testDocument.activeElement, menulists[1]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
+  is(testDocument.activeElement, menulists[0]);
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, testWindow);
+  is(testDocument.activeElement, beforeButton, "focus back to the start");
+
+  let popup = menulists[2].menupopup;
+  // The dropmarker should open and close the popup.
+  let openEvent = BrowserTestUtils.waitForEvent(popup, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    menulists[2]._dropmarker,
+    { clickCount: 1 },
+    testWindow
+  );
+  await openEvent;
+  ok(menulists[2].hasAttribute("open"), "popup open");
+
+  let hiddenEvent = BrowserTestUtils.waitForEvent(popup, "popuphidden");
+  popup.hidePopup();
+  await hiddenEvent;
+  ok(!menulists[2].hasAttribute("open"), "closed again");
+
+  // Open the popup and choose an item.
+  EventUtils.synthesizeMouseAtCenter(
+    menulists[2]._dropmarker,
+    { clickCount: 1 },
+    testWindow
+  );
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
+  ok(menulists[2].hasAttribute("open"), "open for item click");
+
+  await new Promise(resolve => {
+    menulists[2].addEventListener("select", () => setTimeout(resolve), {
+      once: true,
+    });
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[0]);
+  });
+  ok(!menulists[2].hasAttribute("open"));
+  is(testDocument.activeElement, menulists[2]);
+  is(menulists[2].shadowRoot.activeElement, menulists[2]._inputField);
+  is(menulists[2]._inputField.value, "foo");
+  is(menulists[2].value, "foo");
+  is(menulists[2].getAttribute("value"), "foo");
+
+  // Again.
+  EventUtils.synthesizeMouseAtCenter(
+    menulists[2]._dropmarker,
+    { clickCount: 1 },
+    testWindow
+  );
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
+  ok(menulists[2].hasAttribute("open"));
+
+  await new Promise(resolve => {
+    menulists[2].addEventListener("select", () => setTimeout(resolve), {
+      once: true,
+    });
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[1]);
+  });
+  ok(!menulists[2].hasAttribute("open"));
+  is(testDocument.activeElement, menulists[2]);
+  is(menulists[2].shadowRoot.activeElement, menulists[2]._inputField);
+  is(menulists[2]._inputField.value, "bar");
+  is(menulists[2].value, "bar");
+  is(menulists[2].getAttribute("value"), "bar");
+
+  // Type in a value.
+  is(menulists[2]._inputField.selectionStart, 0);
+  is(menulists[2]._inputField.selectionEnd, 3);
+  EventUtils.sendString("quux", testWindow);
+  await new Promise(resolve => {
+    menulists[2].addEventListener(
+      "change",
+      event => {
+        is(event.target, menulists[2]);
+        resolve();
+      },
+      { once: true }
+    );
+    EventUtils.synthesizeKey("VK_TAB", { shiftKey: false }, testWindow);
+  });
+  is(menulists[2].value, "quux");
+  is(menulists[2].getAttribute("value"), "quux");
+
+  // Open the popup and choose an item.
+  EventUtils.synthesizeMouseAtCenter(
+    menulists[2]._dropmarker,
+    { clickCount: 1 },
+    testWindow
+  );
+  await BrowserTestUtils.waitForEvent(popup, "popupshown");
+  ok(menulists[2].hasAttribute("open"));
+
+  await new Promise(resolve => {
+    menulists[2].addEventListener("select", () => setTimeout(resolve), {
+      once: true,
+    });
+    popup.activateItem(menulists[2].querySelectorAll("menuitem")[0]);
+  });
+  ok(!menulists[2].hasAttribute("open"));
+  is(testDocument.activeElement, menulists[2]);
+  is(menulists[2].shadowRoot.activeElement, menulists[2]._inputField);
+  is(menulists[2]._inputField.value, "foo");
+  is(menulists[2].value, "foo");
+  is(menulists[2].getAttribute("value"), "foo");
+
+  document.getElementById("tabmail").closeOtherTabs(0);
+});
diff --git a/comm/mail/base/test/browser/browser_messageMenu.js b/comm/mail/base/test/browser/browser_messageMenu.js
new file mode 100644
index 0000000000..7b397f922e
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_messageMenu.js
@@ -0,0 +1,355 @@
+/* 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/. */
+
+const { GlodaIndexer } = ChromeUtils.import(
+  "resource:///modules/gloda/GlodaIndexer.jsm"
+);
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const nothingSelected = ["rootFolder", "noSelection", "contentTab"];
+const nothingOrMultiSelected = [...nothingSelected, "multiSelection"];
+
+/** @type MenuData */
+const messageMenuData = {
+  newMsgCmd: {},
+  replyMainMenu: { disabled: nothingSelected },
+  replyNewsgroupMainMenu: { hidden: true },
+  replySenderMainMenu: { hidden: true },
+  menu_replyToAll: { disabled: nothingSelected },
+  menu_replyToList: { disabled: true },
+  menu_forwardMsg: { disabled: nothingSelected },
+  forwardAsMenu: { disabled: nothingSelected },
+  menu_forwardAsInline: { disabled: nothingSelected },
+  menu_forwardAsAttachment: { disabled: nothingSelected },
+  menu_redirectMsg: { disabled: nothingSelected },
+  menu_editMsgAsNew: { disabled: nothingSelected },
+  menu_editDraftMsg: { hidden: true },
+  menu_newMsgFromTemplate: { hidden: true },
+  menu_editTemplate: { hidden: true },
+  openMessageWindowMenuitem: {
+    disabled: [...nothingSelected, "message", "externalMessage"],
+  },
+  openConversationMenuitem: {
+    disabled: [...nothingOrMultiSelected, "externalMessage"],
+  },
+  openFeedMessage: { hidden: true },
+  menu_openFeedWebPage: { disabled: nothingSelected },
+  menu_openFeedSummary: { disabled: nothingSelected },
+  menu_openFeedWebPageInMessagePane: {
+    disabled: nothingSelected,
+  },
+  msgAttachmentMenu: { disabled: true },
+  tagMenu: { disabled: [...nothingSelected, "externalMessage"] },
+  "tagMenu-addNewTag": { disabled: nothingSelected },
+  "tagMenu-manageTags": { disabled: nothingSelected },
+  "tagMenu-tagRemoveAll": { disabled: nothingSelected },
+  markMenu: { disabled: ["rootFolder", "externalMessage", "contentTab"] },
+  markReadMenuItem: { disabled: nothingSelected },
+  markUnreadMenuItem: { disabled: true },
+  menu_markThreadAsRead: { disabled: nothingSelected },
+  menu_markReadByDate: { disabled: nothingSelected },
+  menu_markAllRead: { disabled: ["rootFolder"] },
+  markFlaggedMenuItem: { disabled: nothingSelected },
+  menu_markAsJunk: { disabled: nothingSelected },
+  menu_markAsNotJunk: { disabled: nothingSelected },
+  menu_recalculateJunkScore: {
+    disabled: [...nothingSelected, "message"],
+  },
+  archiveMainMenu: { disabled: [...nothingSelected, "externalMessage"] },
+  menu_cancel: { hidden: true },
+  moveMenu: { disabled: [...nothingSelected, "externalMessage"] },
+  copyMenu: { disabled: nothingSelected },
+  moveToFolderAgain: { disabled: true },
+  createFilter: { disabled: [...nothingOrMultiSelected, "externalMessage"] },
+  killThread: { disabled: [...nothingSelected, "message", "externalMessage"] },
+  killSubthread: {
+    disabled: [...nothingSelected, "message", "externalMessage"],
+  },
+  watchThread: { disabled: [...nothingSelected, "externalMessage"] },
+};
+let helper = new MenuTestHelper("messageMenu", messageMenuData);
+
+let tabmail = document.getElementById("tabmail");
+let rootFolder, testFolder, testMessages;
+let draftsFolder, draftsMessages, templatesFolder, templatesMessages;
+
+add_setup(async function () {
+  Services.prefs.setBoolPref("mailnews.mark_message_read.auto", false);
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("messageMenu", null);
+  testFolder = rootFolder
+    .getChildNamed("messageMenu")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  const messages = [
+    ...generator.makeMessages({ count: 5 }),
+    ...generator.makeMessages({ count: 5, msgsPerThread: 5 }),
+  ];
+  testFolder.addMessageBatch(messages.map(message => message.toMboxString()));
+  testFolder.addMessage(
+    generator
+      .makeMessage({
+        attachments: [
+          {
+            body: "an attachment",
+            contentType: "text/plain",
+            filename: "attachment.txt",
+          },
+        ],
+      })
+      .toMboxString()
+  );
+  testFolder.addMessage(
+    "From - Mon Jan 01 00:00:00 2001\n" +
+      "To: Mailing List <list@example.com>\n" +
+      "Date: Mon, 01 Jan 2001 00:00:00 +0100\n" +
+      "List-Help: <https://list.example.com>\n" +
+      "List-Post: <mailto:list@example.com>\n" +
+      "List-Software: Mailing List Software\n" +
+      "List-Subscribe: <https://subscribe.example.com>\n" +
+      "Precedence: list\n" +
+      "Subject: Mailing List Test Mail\n" +
+      `Message-ID: <${Date.now()}@example.com>\n` +
+      "From: Mailing List <list@example.com>\n" +
+      "List-Unsubscribe: <https://unsubscribe.example.com>,\n" +
+      " <mailto:unsubscribe@example.com?subject=Unsubscribe Test>\n" +
+      "MIME-Version: 1.0\n" +
+      "Content-Type: text/plain; charset=UTF-8\n" +
+      "Content-Transfer-Encoding: quoted-printable\n" +
+      "\n" +
+      "Mailing List Message Body\n"
+  );
+  testMessages = [...testFolder.messages];
+
+  rootFolder.createSubfolder("messageMenuDrafts", null);
+  draftsFolder = rootFolder
+    .getChildNamed("messageMenuDrafts")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  draftsFolder.setFlag(Ci.nsMsgFolderFlags.Drafts);
+  draftsFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  draftsMessages = [...draftsFolder.messages];
+  rootFolder.createSubfolder("messageMenuTemplates", null);
+  templatesFolder = rootFolder
+    .getChildNamed("messageMenuTemplates")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  templatesFolder.setFlag(Ci.nsMsgFolderFlags.Templates);
+  templatesFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  templatesMessages = [...templatesFolder.messages];
+
+  window.OpenMessageInNewTab(testMessages[0], { background: true });
+  await BrowserTestUtils.waitForEvent(
+    tabmail.tabInfo[1].chromeBrowser,
+    "MsgLoaded"
+  );
+
+  let messageFile = new FileUtils.File(
+    getTestFilePath("files/sampleContent.eml")
+  );
+  let messageURI =
+    Services.io.newFileURI(messageFile).spec +
+    "?type=application/x-message-display";
+  tabmail.openTab("mailMessageTab", { background: true, messageURI });
+
+  window.openTab("contentTab", {
+    url: "https://example.com/",
+    background: true,
+  });
+
+  await TestUtils.waitForCondition(
+    () => !GlodaIndexer.indexing,
+    "waiting for Gloda to finish indexing",
+    500
+  );
+
+  registerCleanupFunction(() => {
+    tabmail.closeOtherTabs(0);
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.clearUserPref("mailnews.mark_message_read.auto");
+  });
+});
+
+add_task(async function testRootFolder() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: rootFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+  await helper.testAllItems("rootFolder");
+});
+
+add_task(async function testNoSelection() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: testFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+  await helper.testAllItems("noSelection");
+});
+
+add_task(async function testSingleSelection() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: testFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+
+  // This message is not marked as read.
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 1;
+  await helper.testAllItems("singleSelection");
+
+  // Mark it as read.
+  testMessages[1].markRead(true);
+  await helper.testItems({
+    markMenu: {},
+    markReadMenuItem: { disabled: true },
+    markUnreadMenuItem: {},
+    menu_markThreadAsRead: { disabled: true },
+  });
+
+  // Mark it as starred.
+  testMessages[1].markFlagged(true);
+  await helper.testItems({
+    markMenu: {},
+    markFlaggedMenuItem: { checked: true },
+  });
+
+  testFolder.addKeywordsToMessages([testMessages[1]], "$label1");
+  await helper.testItems({
+    tagMenu: {},
+    "tagMenu-tagRemoveAll": {},
+  });
+
+  // This message has an attachment.
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 6;
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentAboutMessage.getMessagePaneBrowser()
+  );
+
+  await helper.testItems({
+    msgAttachmentMenu: {},
+    "menu-openAllAttachments": {},
+    "menu-saveAllAttachments": {},
+    "menu-detachAllAttachments": {},
+    "menu-deleteAllAttachments": {},
+  });
+
+  // This message is from a mailing list.
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 7;
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentAboutMessage.getMessagePaneBrowser()
+  );
+  await helper.testItems({
+    menu_replyToList: { disabled: false },
+  });
+
+  // FIXME: Select another message and wait for it load in order to properly
+  // clear about:message.
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 1;
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentAboutMessage.getMessagePaneBrowser()
+  );
+});
+
+add_task(async function testMultiSelection() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: testFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+
+  // These messages aren't marked as read or flagged, or have a tag.
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [2, 4];
+  await helper.testAllItems("multiSelection");
+
+  // ONE of these messages IS marked as read and flagged, and it has a tag.
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [1, 2, 4];
+  await helper.testItems({
+    markMenu: {},
+    markReadMenuItem: {},
+    markUnreadMenuItem: {},
+    menu_markThreadAsRead: { disabled: false },
+    markFlaggedMenuItem: { checked: true },
+    tagMenu: {},
+    "tagMenu-tagRemoveAll": {},
+  });
+
+  // Messages in a collapsed thread.
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 5;
+  await helper.testItems({
+    replyMainMenu: { disabled: true },
+    menu_replyToAll: { disabled: true },
+    menu_redirectMsg: { disabled: true },
+    menu_editMsgAsNew: { disabled: true },
+  });
+});
+
+add_task(async function testDraftsFolder() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: draftsFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [1, 2, 4];
+  await helper.testItems({
+    menu_editDraftMsg: { hidden: false },
+  });
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [3];
+  await helper.testItems({
+    menu_editDraftMsg: { hidden: false },
+  });
+});
+
+add_task(async function testTemplatesFolder() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: templatesFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [1, 2, 4];
+  await helper.testItems({
+    menu_newMsgFromTemplate: { hidden: false },
+    menu_editTemplate: { hidden: false },
+  });
+  tabmail.currentAbout3Pane.threadTree.selectedIndices = [3];
+  await helper.testItems({
+    menu_newMsgFromTemplate: { hidden: false },
+    menu_editTemplate: { hidden: false },
+  });
+});
+
+add_task(async function testMessageTab() {
+  tabmail.switchToTab(1);
+  await helper.testAllItems("message");
+});
+
+add_task(async function testExternalMessageTab() {
+  tabmail.switchToTab(2);
+  await helper.testAllItems("externalMessage");
+});
+
+add_task(async function testContentTab() {
+  tabmail.switchToTab(3);
+  await helper.testAllItems("contentTab");
+});
diff --git a/comm/mail/base/test/browser/browser_navigation.js b/comm/mail/base/test/browser/browser_navigation.js
new file mode 100644
index 0000000000..baa7bc6142
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_navigation.js
@@ -0,0 +1,1035 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let { messageBrowser, multiMessageBrowser, threadTree } = about3Pane;
+let mailboxService = MailServices.messageServiceFromURI("mailbox:");
+let folderA,
+  folderAMessages,
+  folderB,
+  folderBMessages,
+  folderC,
+  folderCMessages,
+  folderD,
+  folderDMessages;
+
+add_setup(async function () {
+  Services.prefs.setBoolPref("mailnews.mark_message_read.auto", false);
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  let rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("Navigation A", null);
+  folderA = rootFolder
+    .getChildNamed("Navigation A")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderA.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  folderAMessages = [...folderA.messages];
+  folderA.markAllMessagesRead(null);
+
+  rootFolder.createSubfolder("Navigation B", null);
+  folderB = rootFolder
+    .getChildNamed("Navigation B")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderB.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  folderBMessages = [...folderB.messages];
+  folderB.markAllMessagesRead(null);
+
+  rootFolder.createSubfolder("Navigation C", null);
+  folderC = rootFolder
+    .getChildNamed("Navigation C")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  // Add a lot of messages so scrolling can be tested.
+  folderC.addMessageBatch(
+    generator
+      .makeMessages({ count: 500 })
+      .map(message => message.toMboxString())
+  );
+  folderC.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  folderCMessages = [...folderC.messages];
+  folderC.markAllMessagesRead(null);
+
+  rootFolder.createSubfolder("Navigation D", null);
+  folderD = rootFolder
+    .getChildNamed("Navigation D")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderD.addMessageBatch(
+    generator
+      .makeMessages({
+        count: 12,
+        msgsPerThread: 3,
+      })
+      .map(message => message.toMboxString())
+  );
+  folderDMessages = [...folderD.messages];
+  folderD.markAllMessagesRead(null);
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.clearUserPref("mailnews.mark_message_read.auto");
+  });
+});
+
+/** Tests the next message/previous message commands. */
+add_task(async function testNextPreviousMessageInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  about3Pane.displayFolder(folderA.URI);
+  assertSelectedMessage();
+  await assertNoDisplayedMessage(aboutMessage);
+
+  for (let i = 0; i < 5; i++) {
+    goDoCommand("cmd_nextMsg");
+    assertSelectedMessage(folderAMessages[i]);
+    await assertDisplayedMessage(aboutMessage, folderAMessages[i]);
+  }
+
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  goDoCommand("cmd_nextMsg");
+  assertSelectedMessage(
+    folderAMessages[4],
+    "the selected message should not change"
+  );
+  await assertDisplayedMessage(aboutMessage, folderAMessages[4]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  for (let i = 3; i >= 0; i--) {
+    goDoCommand("cmd_previousMsg");
+    assertSelectedMessage(folderAMessages[i]);
+    await assertDisplayedMessage(aboutMessage, folderAMessages[i]);
+  }
+
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  goDoCommand("cmd_previousMsg");
+  assertSelectedMessage(
+    folderAMessages[0],
+    "the selected message should not change"
+  );
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  threadTree.selectedIndex = -1;
+  await assertNoDisplayedMessage(aboutMessage);
+});
+
+async function subtestNextPreviousMessage(win, aboutMessage) {
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  await assertDisplayedMessage(aboutMessage, folderAMessages[2]);
+
+  for (let i = 3; i < 5; i++) {
+    win.goDoCommand("cmd_nextMsg");
+    await assertDisplayedMessage(aboutMessage, folderAMessages[i]);
+  }
+
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  win.goDoCommand("cmd_nextMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[4]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  for (let i = 3; i >= 0; i--) {
+    win.goDoCommand("cmd_previousMsg");
+    await assertDisplayedMessage(aboutMessage, folderAMessages[i]);
+  }
+
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  win.goDoCommand("cmd_previousMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+}
+
+/** Tests the next message/previous message commands in a message tab. */
+add_task(async function testNextPreviousMessageInATab() {
+  await withMessageInATab(folderAMessages[2], subtestNextPreviousMessage);
+});
+
+/** Tests the next message/previous message commands in a message window. */
+add_task(async function testNextPreviousMessageInAWindow() {
+  await withMessageInAWindow(folderAMessages[2], subtestNextPreviousMessage);
+});
+
+/** Tests the next unread message command. */
+add_task(async function testNextUnreadMessageInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  folderA.markMessagesRead([folderAMessages[1], folderAMessages[3]], false);
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+  folderD.markMessagesRead(
+    [
+      folderDMessages[3],
+      folderDMessages[4],
+      folderDMessages[6],
+      folderDMessages[7],
+    ],
+    false
+  );
+
+  about3Pane.displayFolder(folderA.URI);
+  threadTree.selectedIndex = -1;
+  assertSelectedMessage();
+  await assertNoDisplayedMessage(aboutMessage);
+
+  // Select the first unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderAMessages[3]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[3]);
+
+  // Select the next unread message. Loops to start of folder.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Mark the message as read.
+  goDoCommand("cmd_markAsRead");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderAMessages[3]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[3]);
+
+  // Select the next unread message. Changes to the next folder.
+  let dialogPromise = BrowserTestUtils.promiseAlertDialog("accept");
+  goDoCommand("cmd_nextUnreadMsg");
+  await dialogPromise;
+  await new Promise(resolve => setTimeout(resolve));
+  assertSelectedFolder(folderC);
+  assertSelectedMessage(folderCMessages[500]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderCMessages[501]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderCMessages[504]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  // Select the first message in folder D and make sure all threads are
+  // collapsed.
+  about3Pane.displayFolder(folderD.URI);
+  threadTree.selectedIndex = 0;
+  let selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_collapseAllThreads");
+  await selectPromise;
+  assertSelectedMessage(folderDMessages[0]);
+
+  // Go to the next thread without expanding it.
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  assertSelectedMessage(folderDMessages[3]);
+
+  // The next displayed message should be the root message of the now expanded
+  // thread.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderDMessages[3]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[3]);
+
+  // Select the next unread message in the thread.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderDMessages[4]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[4]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderDMessages[6]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[6]);
+
+  // Select the next unread message.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedMessage(folderDMessages[7]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[7]);
+
+  // Mark folder D read again.
+  folderD.markAllMessagesRead(null);
+
+  // Go back to the first folder. The previous selection should be restored.
+  about3Pane.displayFolder(folderA.URI);
+  assertSelectedMessage(folderAMessages[3]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[3]);
+
+  // Select the next unread message. Changes to the next folder.
+  // The previous selection should NOT be restored.
+  dialogPromise = BrowserTestUtils.promiseAlertDialog("accept");
+  goDoCommand("cmd_nextUnreadMsg");
+  await dialogPromise;
+  await new Promise(resolve => setTimeout(resolve));
+  assertSelectedFolder(folderC);
+  assertSelectedMessage(folderCMessages[500]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  folderC.markAllMessagesRead(null);
+  // No more unread messages, prompt to move to the next folder.
+  // Cancel the prompt.
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  dialogPromise = BrowserTestUtils.promiseAlertDialog("cancel");
+  goDoCommand("cmd_nextUnreadMsg");
+  await dialogPromise;
+  assertSelectedFolder(folderC);
+  assertSelectedMessage(folderCMessages[500]);
+
+  folderA.markAllMessagesRead(null);
+  // No unread messages anywhere, do nothing.
+  goDoCommand("cmd_nextUnreadMsg");
+  assertSelectedFolder(folderC);
+  assertSelectedMessage(folderCMessages[500]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  threadTree.selectedIndex = -1;
+  await assertNoDisplayedMessage(aboutMessage);
+});
+
+async function subtestNextUnreadMessage(win, aboutMessage) {
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  folderA.markMessagesRead([folderAMessages[1], folderAMessages[3]], false);
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+  Assert.equal(folderC.getNumUnread(false), 3);
+
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  // Select the first unread message.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Select the next unread message.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[3]);
+
+  // Select the next unread message. Loops to start of folder.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Mark the message as read.
+  win.goDoCommand("cmd_markAsRead");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  // Select the next unread message.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[3]);
+
+  // Select the next unread message. Changes to the next folder.
+  let dialogPromise = BrowserTestUtils.promiseAlertDialog("accept");
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await dialogPromise;
+  await new Promise(resolve => setTimeout(resolve));
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  // Select the next unread message.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  // Select the next unread message.
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  folderC.markAllMessagesRead(null);
+  // No more unread messages, prompt to move to the next folder.
+  // Cancel the prompt.
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  dialogPromise = BrowserTestUtils.promiseAlertDialog("cancel");
+  win.goDoCommand("cmd_nextUnreadMsg");
+  await dialogPromise;
+
+  folderA.markAllMessagesRead(null);
+  // No unread messages anywhere, do nothing.
+  win.goDoCommand("cmd_nextUnreadMsg");
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+}
+
+/** Tests the next unread message command in a message tab. */
+add_task(async function testNextUnreadMessageInATab() {
+  await withMessageInATab(folderAMessages[0], subtestNextUnreadMessage);
+});
+
+/** Tests the next unread message command in a message window. */
+add_task(async function testNextUnreadMessageInAWindow() {
+  await withMessageInAWindow(folderAMessages[0], subtestNextUnreadMessage);
+});
+
+/** Tests the previous unread message command. This doesn't cross folders. */
+add_task(async function testPreviousUnreadMessageInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  folderA.markMessagesRead([folderAMessages[1], folderAMessages[3]], false);
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+
+  about3Pane.displayFolder(folderC.URI);
+  threadTree.scrollToIndex(504, true);
+  // Ensure the scrolling from the previous line happens.
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  threadTree.selectedIndex = 504;
+  assertSelectedMessage(folderCMessages[504]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  goDoCommand("cmd_previousUnreadMsg");
+  assertSelectedMessage(folderCMessages[501]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  goDoCommand("cmd_previousUnreadMsg");
+  assertSelectedMessage(folderCMessages[500]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  goDoCommand("cmd_previousUnreadMsg");
+  assertSelectedMessage(folderCMessages[500]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  threadTree.selectedIndex = -1;
+  await assertNoDisplayedMessage(aboutMessage);
+});
+
+async function subtestPreviousUnreadMessage(win, aboutMessage) {
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  folderA.markMessagesRead([folderAMessages[1], folderAMessages[3]], false);
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  win.goDoCommand("cmd_previousUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  win.goDoCommand("cmd_previousUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  win.goDoCommand("cmd_previousUnreadMsg");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+}
+
+/** Tests the previous unread message command in a message tab. */
+add_task(async function testPreviousUnreadMessageInATab() {
+  await withMessageInATab(folderCMessages[504], subtestPreviousUnreadMessage);
+});
+
+/** Tests the previous unread message command in a message window. */
+add_task(async function testPreviousUnreadMessageInAWindow() {
+  await withMessageInAWindow(
+    folderCMessages[504],
+    subtestPreviousUnreadMessage
+  );
+});
+
+/**
+ * Tests the next unread thread command. This command depends on marking the
+ * thread as read, despite mailnews.mark_message_read.auto being false in this
+ * test. Seems wrong, but it does make this test less complicated!
+ */
+add_task(async function testNextUnreadThreadInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+  folderD.markMessagesRead(
+    [
+      folderDMessages[0],
+      folderDMessages[1],
+      folderDMessages[2],
+      folderDMessages[8],
+      folderDMessages[9],
+      folderDMessages[10],
+      folderDMessages[11],
+    ],
+    false
+  );
+
+  // In folder C, there are no threads. Going to the next unread thread is the
+  // same as going to the next unread message. But as stated above, it does
+  // mark the current message as read.
+  about3Pane.displayFolder(folderC.URI);
+  threadTree.scrollToIndex(504, true);
+  // Ensure the scrolling from the previous line happens.
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  threadTree.selectedIndex = 500;
+  assertSelectedMessage(folderCMessages[500]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  goDoCommand("cmd_nextUnreadThread");
+  assertSelectedMessage(folderCMessages[501]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  goDoCommand("cmd_nextUnreadThread");
+  assertSelectedMessage(folderCMessages[504]);
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  // No more unread messages, we'll move to folder D.
+  let dialogPromise = BrowserTestUtils.promiseAlertDialog("accept");
+  goDoCommand("cmd_nextUnreadThread");
+  await dialogPromise;
+  assertSelectedFolder(folderD);
+  assertSelectedMessage(folderDMessages[0]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[0]);
+
+  goDoCommand("cmd_nextUnreadThread");
+  // The root message is read, we're looking at a single message in the thread.
+  assertSelectedMessage(folderDMessages[8]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[8]);
+
+  goDoCommand("cmd_nextUnreadThread");
+  // The root message is unread.
+  assertSelectedMessage(folderDMessages[9]);
+  await assertDisplayedMessage(aboutMessage, folderDMessages[9]);
+
+  // No more unread messages, prompt to move to the next folder.
+  // Cancel the prompt.
+  dialogPromise = BrowserTestUtils.promiseAlertDialog("cancel");
+  goDoCommand("cmd_nextUnreadThread");
+  await dialogPromise;
+  assertSelectedMessage(folderDMessages[9]);
+
+  threadTree.selectedIndex = -1;
+  await assertNoDisplayedMessage(aboutMessage);
+});
+
+async function subtestNextUnreadThread(win, aboutMessage) {
+  folderC.markMessagesRead(
+    [folderCMessages[500], folderCMessages[501], folderCMessages[504]],
+    false
+  );
+  folderD.markMessagesRead(
+    [
+      folderDMessages[0],
+      folderDMessages[1],
+      folderDMessages[2],
+      folderDMessages[8],
+      folderDMessages[9],
+      folderDMessages[10],
+      folderDMessages[11],
+    ],
+    false
+  );
+
+  await assertDisplayedMessage(aboutMessage, folderCMessages[500]);
+
+  win.goDoCommand("cmd_nextUnreadThread");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[501]);
+
+  win.goDoCommand("cmd_nextUnreadThread");
+  await assertDisplayedMessage(aboutMessage, folderCMessages[504]);
+
+  // No more unread messages, we'll move to folder D.
+  let dialogPromise = BrowserTestUtils.promiseAlertDialog("accept");
+  win.goDoCommand("cmd_nextUnreadThread");
+  await dialogPromise;
+  await assertDisplayedMessage(aboutMessage, folderDMessages[0]);
+
+  win.goDoCommand("cmd_nextUnreadThread");
+  // The root message is read, we're looking at a single message in the thread.
+  await assertDisplayedMessage(aboutMessage, folderDMessages[8]);
+
+  win.goDoCommand("cmd_nextUnreadThread");
+  // The root message is unread.
+  await assertDisplayedMessage(aboutMessage, folderDMessages[9]);
+
+  // No more unread messages, prompt to move to the next folder.
+  // Cancel the prompt.
+  dialogPromise = BrowserTestUtils.promiseAlertDialog("cancel");
+  win.goDoCommand("cmd_nextUnreadThread");
+  await dialogPromise;
+}
+
+/** Tests the next unread thread command in a message tab. */
+add_task(async function testNextUnreadThreadInATab() {
+  await withMessageInATab(folderCMessages[500], subtestNextUnreadThread);
+});
+
+/** Tests the next unread thread command in a message window. */
+add_task(async function testNextUnreadThreadInAWindow() {
+  await withMessageInAWindow(folderCMessages[500], subtestNextUnreadThread);
+});
+
+/** Tests that navigation with a closed message pane does not load messages. */
+add_task(async function testHiddenMessagePaneInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  about3Pane.paneLayout.messagePaneVisible = false;
+  about3Pane.displayFolder(folderA.URI);
+  threadTree.selectedIndex = 0;
+  assertSelectedMessage(folderAMessages[0]);
+  await assertNoDisplayedMessage(aboutMessage);
+
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  goDoCommand("cmd_nextMsg");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertNoDisplayedMessage(aboutMessage);
+
+  goDoCommand("cmd_previousMsg");
+  assertSelectedMessage(folderAMessages[0]);
+  await assertNoDisplayedMessage(aboutMessage);
+
+  // Wait to prove bad things didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  threadTree.selectedIndex = -1;
+  about3Pane.paneLayout.messagePaneVisible = true;
+});
+
+/** Tests the go back/forward commands. */
+add_task(async function testMessageHistoryInAbout3Pane() {
+  const aboutMessage = messageBrowser.contentWindow;
+  const { messageHistory } = aboutMessage;
+  messageHistory.clear();
+  about3Pane.displayFolder(folderA.URI);
+  threadTree.selectedIndex = 0;
+  assertSelectedMessage(folderAMessages[0]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  goDoCommand("cmd_nextMsg");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Going back should be available");
+  Assert.ok(
+    !messageHistory.canPop(0),
+    "Should not be able to go back to the current message"
+  );
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should not have any message to go forward to"
+  );
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be disabled"
+  );
+
+  goDoCommand("cmd_goBack");
+  assertSelectedMessage(folderAMessages[0]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  Assert.ok(!messageHistory.canPop(-1), "Should have no message to go back to");
+  Assert.ok(messageHistory.canPop(1), "Should have a message to go forward to");
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be disabled"
+  );
+
+  goDoCommand("cmd_goForward");
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should have no message to go forward to"
+  );
+  Assert.ok(
+    window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be enabled"
+  );
+
+  // Switching folder to test going back/forward between folders.
+  about3Pane.displayFolder(folderB.URI);
+  threadTree.selectedIndex = 0;
+  assertSelectedMessage(folderBMessages[0]);
+  await assertDisplayedMessage(aboutMessage, folderBMessages[0]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should have no message to go forward to"
+  );
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be disabled"
+  );
+
+  goDoCommand("cmd_goBack");
+
+  assertSelectedFolder(folderA);
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(messageHistory.canPop(1), "Should have a message to go forward to");
+  Assert.ok(
+    window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be enabled"
+  );
+
+  goDoCommand("cmd_goForward");
+
+  assertSelectedFolder(folderB);
+  assertSelectedMessage(folderBMessages[0]);
+  await assertDisplayedMessage(aboutMessage, folderBMessages[0]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should have no message to go forward to"
+  );
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be disabled"
+  );
+
+  goDoCommand("cmd_goBack");
+
+  assertSelectedFolder(folderA);
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(messageHistory.canPop(1), "Should have a message to go forward to");
+  Assert.ok(
+    window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be enabled"
+  );
+
+  // Select a different message while going forward is possible, clearing the
+  // previous forward history.
+
+  goDoCommand("cmd_nextMsg");
+
+  assertSelectedMessage(folderAMessages[2]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[2]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should have no message to go forward to"
+  );
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be disabled"
+  );
+
+  goDoCommand("cmd_goBack");
+
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(messageHistory.canPop(1), "Should have a message to go forward to");
+  Assert.ok(
+    window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be enabled"
+  );
+
+  // Remove the previous message in the history from the folder it was
+  // displayed in.
+
+  let movedMessage = folderAMessages[0];
+  await moveMessage(folderA, movedMessage, folderB);
+
+  Assert.ok(!messageHistory.canPop(-1), "Should have no message to go back to");
+  Assert.ok(
+    !window.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be disabled"
+  );
+
+  // Display no message, so going back goes to the previously displayed message,
+  // which is also the current history entry.
+  threadTree.selectedIndex = -1;
+  await assertNoDisplayedMessage(aboutMessage);
+
+  Assert.ok(
+    messageHistory.canPop(0),
+    "Can go back to current history entry without selected message"
+  );
+  Assert.ok(
+    window.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be enabled"
+  );
+
+  goDoCommand("cmd_goBack");
+
+  assertSelectedMessage(folderAMessages[1]);
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  threadTree.selectedIndex = -1;
+  let currentFolderBMessages = [...folderB.messages];
+  movedMessage = currentFolderBMessages.find(
+    message => !folderBMessages.includes(message)
+  );
+  await moveMessage(folderB, movedMessage, folderA);
+  folderAMessages = [...folderA.messages];
+});
+
+async function subtestMessageHistory(win, aboutMessage) {
+  const { messageHistory } = aboutMessage;
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  Assert.ok(win.getEnabledControllerForCommand("cmd_nextMsg"));
+  win.goDoCommand("cmd_nextMsg");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Going back should be available");
+  Assert.ok(
+    !messageHistory.canPop(0),
+    "Should not be able to go back to the current message"
+  );
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should not have any message to go forward to"
+  );
+  Assert.ok(
+    !win.getEnabledControllerForCommand("cmd_goForward"),
+    "Go forward should be disabled"
+  );
+
+  Assert.ok(win.getEnabledControllerForCommand("cmd_goBack"));
+  win.goDoCommand("cmd_goBack");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[0]);
+
+  Assert.ok(!messageHistory.canPop(-1), "Should have no message to go back to");
+  Assert.ok(messageHistory.canPop(1), "Should have a message to go forward to");
+  Assert.ok(
+    !win.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be disabled"
+  );
+
+  Assert.ok(win.getEnabledControllerForCommand("cmd_goForward"));
+  win.goDoCommand("cmd_goForward");
+  await assertDisplayedMessage(aboutMessage, folderAMessages[1]);
+
+  Assert.ok(messageHistory.canPop(-1), "Should have a message to go back to");
+  Assert.ok(
+    !messageHistory.canPop(1),
+    "Should have no message to go forward to"
+  );
+  Assert.ok(
+    win.getEnabledControllerForCommand("cmd_goBack"),
+    "Go back should be enabled"
+  );
+}
+
+/** Tests the go back/forward commands in a message tab. */
+add_task(async function testMessageHistoryInATab() {
+  await withMessageInATab(folderAMessages[0], subtestMessageHistory);
+});
+
+/** Tests the go back/forward commands in a message window. */
+add_task(async function testMessageHistoryInAWindow() {
+  await withMessageInAWindow(folderAMessages[0], subtestMessageHistory);
+});
+
+function assertSelectedFolder(expected) {
+  Assert.equal(about3Pane.gFolder.URI, expected.URI, "selected folder");
+}
+
+function assertSelectedMessage(expected, comment) {
+  if (expected) {
+    Assert.notEqual(
+      threadTree.selectedIndex,
+      -1,
+      "a message should be selected"
+    );
+    Assert.ok(
+      threadTree.getRowAtIndex(threadTree.selectedIndex),
+      "row for selected message should exist and be in view"
+    );
+    Assert.equal(
+      about3Pane.gDBView.getMsgHdrAt(threadTree.selectedIndex).messageId,
+      expected.messageId,
+      comment ?? "selected message"
+    );
+  } else {
+    Assert.equal(threadTree.selectedIndex, -1, "no message should be selected");
+  }
+}
+
+async function assertDisplayedMessage(aboutMessage, expected) {
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+  let mailboxURL = expected.folder.getUriForMsg(expected);
+  let messageURI = mailboxService.getUrlForUri(mailboxURL);
+
+  if (
+    messagePaneBrowser.webProgess?.isLoadingDocument ||
+    !messagePaneBrowser.currentURI.equals(messageURI)
+  ) {
+    await BrowserTestUtils.browserLoaded(
+      messagePaneBrowser,
+      undefined,
+      messageURI.spec
+    );
+  }
+  Assert.equal(
+    aboutMessage.gMessage.messageId,
+    expected.messageId,
+    "correct message loaded"
+  );
+  Assert.equal(
+    messagePaneBrowser.currentURI.spec,
+    messageURI.spec,
+    "correct message displayed"
+  );
+}
+
+async function assertDisplayedThread(firstMessage) {
+  let items = multiMessageBrowser.contentDocument.querySelectorAll("li");
+  Assert.equal(
+    items[0].dataset.messageId,
+    firstMessage.messageId,
+    "correct thread displayed"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(multiMessageBrowser),
+    "multimessageview visible"
+  );
+}
+
+async function assertNoDisplayedMessage(aboutMessage) {
+  const messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+  if (
+    messagePaneBrowser.webProgess?.isLoadingDocument ||
+    messagePaneBrowser.currentURI.spec != "about:blank"
+  ) {
+    await BrowserTestUtils.browserLoaded(
+      messagePaneBrowser,
+      undefined,
+      "about:blank"
+    );
+  }
+
+  Assert.equal(aboutMessage.gMessage, null, "no message loaded");
+  Assert.equal(
+    messagePaneBrowser.currentURI.spec,
+    "about:blank",
+    "no message displayed"
+  );
+  Assert.ok(BrowserTestUtils.is_hidden(messageBrowser), "about:message hidden");
+}
+
+function reportBadSelectEvent() {
+  Assert.report(
+    true,
+    undefined,
+    undefined,
+    "should not have fired a select event"
+  );
+}
+
+function reportBadLoad() {
+  Assert.report(
+    true,
+    undefined,
+    undefined,
+    "should not have reloaded the message"
+  );
+}
+
+function moveMessage(sourceFolder, message, targetFolder) {
+  let copyListener = new PromiseTestUtils.PromiseCopyListener();
+  MailServices.copy.copyMessages(
+    sourceFolder,
+    [message],
+    targetFolder,
+    true,
+    copyListener,
+    window.msgWindow,
+    true
+  );
+  return copyListener.promise;
+}
+
+async function withMessageInATab(message, subtest) {
+  let tabPromise = BrowserTestUtils.waitForEvent(window, "MsgLoaded");
+  window.OpenMessageInNewTab(message, { background: false });
+  await tabPromise;
+  await new Promise(resolve => setTimeout(resolve));
+
+  await subtest(window, tabmail.currentAboutMessage);
+
+  tabmail.closeOtherTabs(0);
+}
+
+async function withMessageInAWindow(message, subtest) {
+  let winPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  window.MsgOpenNewWindowForMessage(message);
+  let win = await winPromise;
+  await BrowserTestUtils.waitForEvent(win, "MsgLoaded");
+  await TestUtils.waitForCondition(() => Services.focus.activeWindow == win);
+
+  await subtest(win, win.messageBrowser.contentWindow);
+
+  await BrowserTestUtils.closeWindow(win);
+}
diff --git a/comm/mail/base/test/browser/browser_orderableTreeListbox.js b/comm/mail/base/test/browser/browser_orderableTreeListbox.js
new file mode 100644
index 0000000000..54634cbd88
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_orderableTreeListbox.js
@@ -0,0 +1,481 @@
+/* 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/. */
+
+/* eslint mozilla/no-arbitrary-setTimeout: off */
+
+let dragService = Cc["@mozilla.org/widget/dragservice;1"].getService(
+  Ci.nsIDragService
+);
+
+let WAIT_TIME = 0;
+
+let tabmail = document.getElementById("tabmail");
+registerCleanupFunction(() => {
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+  Services.prefs.clearUserPref("ui.prefersReducedMotion");
+  Services.prefs.clearUserPref("mailnews.default_view_flags");
+});
+
+async function withMotion(subtest) {
+  Services.prefs.setIntPref("ui.prefersReducedMotion", 0);
+  WAIT_TIME = 300;
+  await TestUtils.waitForCondition(
+    () => !matchMedia("(prefers-reduced-motion)").matches
+  );
+  return subtest();
+}
+
+async function withoutMotion(subtest) {
+  Services.prefs.setIntPref("ui.prefersReducedMotion", 1);
+  WAIT_TIME = 0;
+  await TestUtils.waitForCondition(
+    () => matchMedia("(prefers-reduced-motion)").matches
+  );
+  await subtest();
+}
+
+let win, doc, list, dataTransfer;
+
+async function orderWithKeys(key) {
+  selectHandler.reset();
+  orderedHandler.reset();
+
+  list.addEventListener("select", selectHandler);
+  list.addEventListener("ordered", orderedHandler);
+  EventUtils.synthesizeKey(key, { altKey: true }, win);
+  await new Promise(resolve => win.setTimeout(resolve, WAIT_TIME));
+  list.removeEventListener("select", selectHandler);
+  list.removeEventListener("ordered", orderedHandler);
+
+  await checkNoTransformations();
+}
+
+async function startDrag(index) {
+  let listRect = list.getBoundingClientRect();
+  let clientY = listRect.top + index * 32 + 4;
+
+  dragService.startDragSessionForTests(Ci.nsIDragService.DRAGDROP_ACTION_NONE);
+  [, dataTransfer] = EventUtils.synthesizeDragOver(
+    list.rows[index],
+    list,
+    null,
+    null,
+    win,
+    win,
+    {
+      clientY,
+      _domDispatchOnly: true,
+    }
+  );
+
+  await new Promise(resolve => setTimeout(resolve, WAIT_TIME));
+}
+
+async function continueDrag(index) {
+  let listRect = list.getBoundingClientRect();
+  let destClientX = listRect.left + listRect.width / 2;
+  let destClientY = listRect.top + index * 32 + 4;
+  let destScreenX = win.mozInnerScreenX + destClientX;
+  let destScreenY = win.mozInnerScreenY + destClientY;
+
+  let result = EventUtils.sendDragEvent(
+    {
+      type: "dragover",
+      screenX: destScreenX,
+      screenY: destScreenY,
+      clientX: destClientX,
+      clientY: destClientY,
+      dataTransfer,
+      _domDispatchOnly: true,
+    },
+    list,
+    win
+  );
+
+  await new Promise(resolve => setTimeout(resolve, WAIT_TIME));
+  return result;
+}
+
+async function endDrag(index) {
+  let listRect = list.getBoundingClientRect();
+  let clientY = listRect.top + index * 32 + 4;
+
+  EventUtils.synthesizeDropAfterDragOver(false, dataTransfer, list, win, {
+    clientY,
+    _domDispatchOnly: true,
+  });
+  list.dispatchEvent(new CustomEvent("dragend", { bubbles: true }));
+  dragService.endDragSession(true);
+
+  await new Promise(resolve => setTimeout(resolve, WAIT_TIME));
+}
+
+function checkRowOrder(expectedOrder) {
+  expectedOrder = expectedOrder.split(" ").map(i => `row-${i}`);
+  Assert.equal(list.rowCount, expectedOrder.length, "rowCount is correct");
+  Assert.deepEqual(
+    list.rows.map(row => row.id),
+    expectedOrder,
+    "order in DOM is correct"
+  );
+
+  let apparentOrder = list.rows.sort(
+    (a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top
+  );
+  Assert.deepEqual(
+    apparentOrder.map(row => row.id),
+    expectedOrder,
+    "order on screen is correct"
+  );
+
+  if (orderedHandler.orderAtEvent) {
+    Assert.deepEqual(
+      orderedHandler.orderAtEvent,
+      expectedOrder,
+      "order at the last 'ordered' event was correct"
+    );
+  }
+}
+
+function checkYPositions(...expectedPositions) {
+  let offset = list.getBoundingClientRect().top;
+
+  for (let i = 0; i < 5; i++) {
+    let id = `row-${i + 1}`;
+    let row = doc.getElementById(id);
+    Assert.equal(
+      row.getBoundingClientRect().top - offset,
+      expectedPositions[i],
+      id
+    );
+  }
+}
+
+async function checkNoTransformations() {
+  for (let row of list.children) {
+    await TestUtils.waitForCondition(
+      () => win.getComputedStyle(row).transform == "none",
+      `${row.id} has no transforms`
+    );
+    Assert.equal(
+      row
+        .getAnimations()
+        .filter(animation => animation.transitionProperty != "opacity").length,
+      0,
+      `${row.id} has no animations`
+    );
+  }
+}
+
+let selectHandler = {
+  seenEvent: null,
+
+  reset() {
+    this.seenEvent = null;
+  },
+  handleEvent(event) {
+    this.seenEvent = event;
+  },
+};
+
+let orderedHandler = {
+  seenEvent: null,
+  orderAtEvent: null,
+
+  reset() {
+    this.seenEvent = null;
+    this.orderAtEvent = null;
+  },
+  handleEvent(event) {
+    if (this.seenEvent) {
+      throw new Error("we already have an 'ordered' event");
+    }
+    this.seenEvent = event;
+    this.orderAtEvent = list.rows.map(row => row.id);
+  },
+};
+
+/** Test Alt+Up and Alt+Down. */
+async function subtestKeyReorder() {
+  list.focus();
+  list.selectedIndex = 0;
+
+  // Move row 1 down the list to the bottom.
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 1 3 3-1 3-2 3-3 4 5 5-1 5-2");
+
+  // Some additional checks to prove the right row is selected.
+
+  Assert.ok(!selectHandler.seenEvent);
+  Assert.equal(list.selectedIndex, 3, "correct index is selected");
+  Assert.equal(
+    list.querySelector(".selected").id,
+    "row-1",
+    "correct row is selected"
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowUp", {}, win);
+  Assert.equal(
+    list.querySelector(".selected").id,
+    "row-2-2",
+    "key press moved to the correct row"
+  );
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, win);
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 1 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 1 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2 1");
+
+  // Move row 1 back to the top.
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 1 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 1 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 1 3 3-1 3-2 3-3 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+
+  // Move row 3 around. Row 3 has children, so we're checking they move with it.
+
+  list.selectedIndex = 4;
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 3 3-1 3-2 3-3 2 2-1 2-2 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("3 3-1 3-2 3-3 1 2 2-1 2-2 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 3 3-1 3-2 3-3 2 2-1 2-2 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 4 3 3-1 3-2 3-3 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 4 5 5-1 5-2 3 3-1 3-2 3-3");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 4 3 3-1 3-2 3-3 5 5-1 5-2");
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+}
+
+/** Drag the first item to the end. */
+async function subtestDragReorder1() {
+  orderedHandler.reset();
+  list.addEventListener("ordered", orderedHandler);
+
+  checkYPositions(1, 33, 129, 257, 289);
+
+  await startDrag(0);
+  checkYPositions(1, 33, 129, 257, 289);
+
+  await continueDrag(2);
+  checkYPositions(52, 1, 129, 257, 289);
+  await continueDrag(3);
+  checkYPositions(84, 1, 129, 257, 289);
+  await continueDrag(4);
+  checkYPositions(116, 1, 129, 257, 289);
+  await continueDrag(5);
+  checkYPositions(148, 1, 129, 257, 289);
+  await continueDrag(6);
+  checkYPositions(180, 1, 97, 257, 289);
+  await continueDrag(7);
+  checkYPositions(212, 1, 97, 257, 289);
+  await continueDrag(8);
+  checkYPositions(244, 1, 97, 225, 289);
+  await continueDrag(9);
+  checkYPositions(276, 1, 97, 225, 289);
+  await continueDrag(10);
+  checkYPositions(308, 1, 97, 225, 257);
+  await continueDrag(11);
+  checkYPositions(340, 1, 97, 225, 257);
+  await continueDrag(12);
+  checkYPositions(353, 1, 97, 225, 257);
+
+  await endDrag(12);
+  list.removeEventListener("ordered", orderedHandler);
+
+  Assert.ok(orderedHandler.seenEvent);
+  checkYPositions(353, 1, 97, 225, 257);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2 1");
+  await checkNoTransformations();
+}
+
+/** Drag the (now) last item back to the start. */
+async function subtestDragReorder2() {
+  orderedHandler.reset();
+  list.addEventListener("ordered", orderedHandler);
+
+  await startDrag(11);
+  checkYPositions(340, 1, 97, 225, 257);
+
+  await continueDrag(9);
+  checkYPositions(276, 1, 97, 225, 289);
+
+  await continueDrag(7);
+  checkYPositions(212, 1, 97, 257, 289);
+
+  await continueDrag(4);
+  checkYPositions(116, 1, 129, 257, 289);
+
+  await continueDrag(1);
+  checkYPositions(20, 33, 129, 257, 289);
+
+  await endDrag(0);
+  list.removeEventListener("ordered", orderedHandler);
+
+  Assert.ok(orderedHandler.seenEvent);
+  checkYPositions(1, 33, 129, 257, 289);
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+  await checkNoTransformations();
+}
+
+/**
+ * Listen for the 'ordering' event and prevent dropping on some rows.
+ *
+ * In this test, we'll prevent dragging an item below the last one - row-5 and
+ * its descendants. Other use cases may be possible but haven't been needed
+ * yet, so they are untested.
+ */
+async function subtestDragUndroppable() {
+  let originalGetter = list.__lookupGetter__("_orderableChildren");
+  list.__defineGetter__("_orderableChildren", function () {
+    let rows = [...this.children];
+    rows.pop();
+    return rows;
+  });
+
+  orderedHandler.reset();
+  list.addEventListener("ordered", orderedHandler);
+
+  checkYPositions(1, 33, 129, 257, 289);
+
+  await startDrag(0);
+  checkYPositions(1, 33, 129, 257, 289);
+
+  await continueDrag(8);
+  checkYPositions(244, 1, 97, 225, 289);
+  await continueDrag(9);
+  checkYPositions(257, 1, 97, 225, 289);
+  await continueDrag(10);
+  checkYPositions(257, 1, 97, 225, 289);
+  await continueDrag(11);
+  checkYPositions(257, 1, 97, 225, 289);
+  await continueDrag(12);
+  checkYPositions(257, 1, 97, 225, 289);
+
+  await endDrag(12);
+  list.removeEventListener("ordered", orderedHandler);
+
+  Assert.ok(orderedHandler.seenEvent);
+  checkYPositions(257, 1, 97, 225, 289);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 1 5 5-1 5-2");
+  await checkNoTransformations();
+
+  // Move row-3 down with the keyboard.
+
+  list.selectedIndex = 7;
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 1 4 5 5-1 5-2");
+
+  // It should not move further down.
+
+  await orderWithKeys("KEY_ArrowDown");
+  Assert.ok(!orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 1 4 5 5-1 5-2");
+
+  // Reset the order.
+
+  await orderWithKeys("KEY_ArrowUp");
+  Assert.ok(orderedHandler.seenEvent);
+  checkRowOrder("2 2-1 2-2 3 3-1 3-2 3-3 4 1 5 5-1 5-2");
+
+  orderedHandler.reset();
+  await startDrag(8);
+  await continueDrag(1);
+  await endDrag(1);
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+
+  list.__defineGetter__("_orderableChildren", originalGetter);
+}
+
+add_setup(async function () {
+  // Make sure the whole test runs with an unthreaded view in all folders.
+  Services.prefs.setIntPref("mailnews.default_view_flags", 0);
+
+  let tab = tabmail.openTab("contentTab", {
+    url: "chrome://mochitests/content/browser/comm/mail/base/test/browser/files/orderableTreeListbox.xhtml",
+  });
+
+  await BrowserTestUtils.browserLoaded(tab.browser);
+  tab.browser.focus();
+
+  win = tab.browser.contentWindow;
+  doc = win.document;
+
+  list = doc.querySelector(`ol[is="orderable-tree-listbox"]`);
+  Assert.ok(!!list, "the list exists");
+
+  checkRowOrder("1 2 2-1 2-2 3 3-1 3-2 3-3 4 5 5-1 5-2");
+  Assert.equal(list.selectedIndex, 0, "selectedIndex is set to 0");
+});
+
+add_task(async function testKeyReorder() {
+  await withMotion(subtestKeyReorder);
+});
+add_task(async function testDragReorder1() {
+  await withMotion(subtestDragReorder1);
+});
+add_task(async function testDragReorder2() {
+  await withMotion(subtestDragReorder2);
+});
+add_task(async function testDragUndroppable() {
+  await withMotion(subtestDragUndroppable);
+});
+
+add_task(async function testKeyReorderReducedMotion() {
+  await withoutMotion(subtestKeyReorder);
+});
+add_task(async function testDragReorder1ReducedMotion() {
+  await withoutMotion(subtestDragReorder1);
+});
+add_task(async function testDragReorder2ReducedMotion() {
+  await withoutMotion(subtestDragReorder2);
+});
+add_task(async function testDragUndroppableReducedMotion() {
+  await withoutMotion(subtestDragUndroppable);
+});
diff --git a/comm/mail/base/test/browser/browser_paneFocus.js b/comm/mail/base/test/browser/browser_paneFocus.js
new file mode 100644
index 0000000000..9b85b4afe3
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_paneFocus.js
@@ -0,0 +1,375 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let mailButton = document.getElementById("mailButton");
+let globalSearch = document.querySelector("#unifiedToolbar global-search-bar");
+let addressBookButton = document.getElementById("addressBookButton");
+let calendarButton = document.getElementById("calendarButton");
+let tasksButton = document.getElementById("tasksButton");
+let tabmail = document.getElementById("tabmail");
+
+let rootFolder, testFolder, testMessages, addressBook;
+
+add_setup(async function () {
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  // Quick Filter Bar needs to be toggled on for F6 focus shift to be accurate.
+  goDoCommand("cmd_showQuickFilterBar");
+
+  rootFolder.createSubfolder("paneFocus", null);
+  testFolder = rootFolder
+    .getChildNamed("paneFocus")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  let prefName = MailServices.ab.newAddressBook(
+    "paneFocus",
+    null,
+    Ci.nsIAbManager.JS_DIRECTORY_TYPE
+  );
+  addressBook = MailServices.ab.getDirectoryFromId(prefName);
+  let contact = Cc["@mozilla.org/addressbook/cardproperty;1"].createInstance(
+    Ci.nsIAbCard
+  );
+  contact.displayName = "contact 1";
+  contact.firstName = "contact";
+  contact.lastName = "1";
+  contact.primaryEmail = "contact.1@invalid";
+  addressBook.addCard(contact);
+
+  registerCleanupFunction(async () => {
+    MailServices.accounts.removeAccount(account, false);
+    let removePromise = TestUtils.topicObserved("addrbook-directory-deleted");
+    MailServices.ab.deleteAddressBook(addressBook.URI);
+    await removePromise;
+  });
+});
+
+add_task(async function testMail3PaneTab() {
+  document.body.focus();
+
+  let about3Pane = tabmail.currentAbout3Pane;
+  about3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+  });
+  let {
+    folderTree,
+    threadTree,
+    webBrowser,
+    messageBrowser,
+    multiMessageBrowser,
+    accountCentralBrowser,
+  } = about3Pane;
+
+  // Reset focus to accountCentralBrowser because QFB was toggled on.
+  accountCentralBrowser.focus();
+  info("Displaying the root folder");
+  about3Pane.displayFolder(rootFolder.URI);
+  cycle(
+    mailButton,
+    globalSearch,
+    folderTree,
+    accountCentralBrowser,
+    mailButton
+  );
+
+  info("Displaying the test folder");
+  about3Pane.displayFolder(testFolder.URI);
+  threadTree.selectedIndex = 0;
+  cycle(
+    globalSearch,
+    folderTree,
+    threadTree.table.body,
+    messageBrowser.contentWindow.getMessagePaneBrowser(),
+    mailButton,
+    globalSearch
+  );
+
+  info("Hiding the folder pane");
+  about3Pane.restoreState({ folderPaneVisible: false });
+  cycle(
+    threadTree.table.body,
+    messageBrowser.contentWindow.getMessagePaneBrowser(),
+    mailButton,
+    globalSearch,
+    threadTree.table.body
+  );
+
+  info("Showing the folder pane, hiding the message pane");
+  about3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: false,
+  });
+  cycle(
+    mailButton,
+    globalSearch,
+    folderTree,
+    threadTree.table.body,
+    mailButton
+  );
+
+  info("Showing the message pane, selecting multiple messages");
+  about3Pane.restoreState({ messagePaneVisible: true });
+  threadTree.selectedIndices = [1, 2];
+  cycle(
+    globalSearch,
+    folderTree,
+    threadTree.table.body,
+    multiMessageBrowser,
+    mailButton,
+    globalSearch
+  );
+
+  info("Showing a web page");
+  about3Pane.messagePane.displayWebPage("https://example.com/");
+  cycle(
+    folderTree,
+    threadTree.table.body,
+    webBrowser,
+    mailButton,
+    globalSearch,
+    folderTree
+  );
+
+  info("Testing focus from secondary focus targets");
+  about3Pane.document.getElementById("folderPaneMoreButton").focus();
+  EventUtils.synthesizeKey("KEY_F6", {}, about3Pane);
+  Assert.equal(
+    getActiveElement(),
+    folderTree,
+    "F6 moved the focus to the folder tree"
+  );
+
+  about3Pane.document.getElementById("folderPaneMoreButton").focus();
+  EventUtils.synthesizeKey("KEY_F6", { shiftKey: true }, about3Pane);
+  Assert.equal(
+    getActiveElement().id,
+    globalSearch.id,
+    "Shift+F6 moved the focus to the toolbar"
+  );
+
+  about3Pane.document.getElementById("qfb-qs-textbox").focus();
+  EventUtils.synthesizeKey("KEY_F6", {}, about3Pane);
+  Assert.equal(
+    getActiveElement(),
+    threadTree.table.body,
+    "F6 moved the focus to the threadTree"
+  );
+
+  about3Pane.document.getElementById("qfb-qs-textbox").focus();
+  EventUtils.synthesizeKey("KEY_F6", { shiftKey: true }, about3Pane);
+  Assert.equal(
+    getActiveElement(),
+    folderTree,
+    "Shift+F6 moved the focus to the folder tree"
+  );
+});
+
+add_task(async function testMailMessageTab() {
+  document.body.focus();
+
+  window.OpenMessageInNewTab(testMessages[0], { background: false });
+  await BrowserTestUtils.waitForEvent(
+    tabmail.tabInfo[1].chromeBrowser,
+    "MsgLoaded"
+  );
+  cycle(mailButton, globalSearch, tabmail.tabInfo[1].browser, mailButton);
+
+  tabmail.closeOtherTabs(0);
+});
+
+add_task(async function testAddressBookTab() {
+  EventUtils.synthesizeMouseAtCenter(addressBookButton, {});
+  await BrowserTestUtils.browserLoaded(tabmail.currentTabInfo.browser);
+
+  let abWindow = tabmail.currentTabInfo.browser.contentWindow;
+  let abDocument = abWindow.document;
+  let booksList = abDocument.getElementById("books");
+  let searchInput = abDocument.getElementById("searchInput");
+  let cardsList = abDocument.getElementById("cards");
+  let detailsPane = abDocument.getElementById("detailsPane");
+  let editButton = abDocument.getElementById("editButton");
+
+  // Switch to the table view so the edit button isn't falling off the window.
+  abWindow.cardsPane.toggleLayout(true);
+
+  // Check what happens with a contact selected.
+  let row = booksList.getRowForUID(addressBook.UID);
+  EventUtils.synthesizeMouseAtCenter(row.querySelector("span"), {}, abWindow);
+
+  Assert.ok(BrowserTestUtils.is_hidden(detailsPane));
+  // NOTE: When the "cards" element first receives focus it will select the
+  // first item, which causes the panel to be displayed.
+  cycle(
+    searchInput,
+    cardsList.table.body,
+    editButton,
+    addressBookButton,
+    globalSearch,
+    booksList,
+    searchInput
+  );
+  Assert.ok(BrowserTestUtils.is_visible(detailsPane));
+
+  // Check with no selection.
+  EventUtils.synthesizeMouseAtCenter(
+    cardsList.getRowAtIndex(0),
+    { accelKey: true },
+    abWindow
+  );
+  Assert.equal(getActiveElement(), cardsList.table.body);
+  Assert.ok(BrowserTestUtils.is_hidden(detailsPane));
+  cycle(
+    addressBookButton,
+    globalSearch,
+    booksList,
+    searchInput,
+    cardsList.table.body,
+    addressBookButton
+  );
+  // Still hidden.
+  Assert.ok(BrowserTestUtils.is_hidden(detailsPane));
+
+  // Check what happens while editing. It should be nothing.
+  EventUtils.synthesizeMouseAtCenter(cardsList.getRowAtIndex(0), {}, abWindow);
+  Assert.equal(getActiveElement(), cardsList.table.body);
+  Assert.ok(BrowserTestUtils.is_visible(detailsPane));
+
+  editButton.scrollIntoView();
+  EventUtils.synthesizeMouseAtCenter(editButton, {}, abWindow);
+  Assert.equal(abDocument.activeElement.id, "vcard-n-firstname");
+  EventUtils.synthesizeKey("KEY_F6", {}, abWindow);
+  Assert.equal(
+    abDocument.activeElement.id,
+    "vcard-n-firstname",
+    "F6 did nothing"
+  );
+  EventUtils.synthesizeKey("KEY_F6", { shiftKey: true }, abWindow);
+  Assert.equal(
+    abDocument.activeElement.id,
+    "vcard-n-firstname",
+    "Shift+F6 did nothing"
+  );
+
+  tabmail.closeOtherTabs(0);
+});
+
+add_task(async function testCalendarTab() {
+  EventUtils.synthesizeMouseAtCenter(calendarButton, {});
+
+  cycle(calendarButton, globalSearch, calendarButton);
+
+  tabmail.closeOtherTabs(0);
+});
+
+add_task(async function testTasksTab() {
+  EventUtils.synthesizeMouseAtCenter(tasksButton, {});
+
+  cycle(tasksButton, globalSearch, tasksButton);
+
+  tabmail.closeOtherTabs(0);
+});
+
+add_task(async function testContentTab() {
+  document.body.focus();
+
+  window.openTab("contentTab", {
+    url: "https://example.com/",
+    background: false,
+  });
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentTabInfo.browser,
+    undefined,
+    "https://example.com/"
+  );
+  cycle(mailButton, globalSearch, tabmail.currentTabInfo.browser, mailButton);
+
+  document.body.focus();
+
+  window.openTab("contentTab", { url: "about:mozilla", background: false });
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentTabInfo.browser,
+    undefined,
+    "about:mozilla"
+  );
+  cycle(
+    globalSearch,
+    tabmail.currentTabInfo.browser.contentDocument.body,
+    mailButton,
+    globalSearch
+  );
+
+  tabmail.closeOtherTabs(0);
+});
+
+/**
+ * Gets the active element. If it is a browser, returns the browser in some
+ * special cases we're interested in, or the browser's active element.
+ *
+ * @returns {Element}
+ */
+function getActiveElement() {
+  let activeElement = document.activeElement;
+  if (globalSearch.contains(activeElement)) {
+    return globalSearch;
+  }
+  if (activeElement.localName == "browser" && !activeElement.isRemoteBrowser) {
+    activeElement = activeElement.contentDocument.activeElement;
+  }
+  if (
+    activeElement.localName == "browser" &&
+    activeElement.id == "messageBrowser"
+  ) {
+    activeElement = activeElement.contentDocument.activeElement;
+  }
+  return activeElement;
+}
+
+/**
+ * Presses F6 for each element in `elements`, and checks the element has focus.
+ * Then presses Shift+F6 to go back through the elements.
+ * Note that the currently selected element should *not* be the first element.
+ *
+ * @param {Element[]}
+ */
+function cycle(...elements) {
+  let activeElement = getActiveElement();
+
+  for (let i = 0; i < elements.length; i++) {
+    EventUtils.synthesizeKey("KEY_F6", {}, activeElement.ownerGlobal);
+    activeElement = getActiveElement();
+    Assert.equal(
+      activeElement.id || activeElement.localName,
+      elements[i].id || elements[i].localName,
+      "F6 moved the focus"
+    );
+  }
+
+  for (let i = elements.length - 2; i >= 0; i--) {
+    EventUtils.synthesizeKey(
+      "KEY_F6",
+      { shiftKey: true },
+      activeElement.ownerGlobal
+    );
+    activeElement = getActiveElement();
+    Assert.equal(
+      activeElement.id || activeElement.localName,
+      elements[i].id || elements[i].localName,
+      "Shift+F6 moved the focus"
+    );
+  }
+}
diff --git a/comm/mail/base/test/browser/browser_paneSplitter.js b/comm/mail/base/test/browser/browser_paneSplitter.js
new file mode 100644
index 0000000000..1646703b96
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_paneSplitter.js
@@ -0,0 +1,572 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let tabmail = document.getElementById("tabmail");
+registerCleanupFunction(() => {
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+});
+
+// Increase this value to slow the test down if you want to see what it is doing.
+let MOUSE_DELAY = 0;
+
+let win, doc;
+
+let resizingEvents = 0;
+let resizedEvents = 0;
+let collapsedEvents = 0;
+let expandedEvents = 0;
+
+// This object keeps the test simple by removing the differences between
+// horizontal and vertical, and which pane is controlled by the splitter.
+let testRunner = {
+  outer: null, // The container for the splitter and panes.
+  splitter: null, // The splitter.
+  resizedIsBefore: null, // Whether resized is before the splitter.
+  resized: null, // The pane the splitter controls the size of.
+  fill: null, // The pane that splitter doesn't control.
+  dimension: null, // Which dimension the splitter resizes.
+
+  getSize(element) {
+    return element.getBoundingClientRect()[this.dimension];
+  },
+
+  assertElementSizes(size, msg = "") {
+    Assert.equal(
+      this.getSize(this.resized),
+      size,
+      `Resized element should take up the expected ${this.dimension}: ${msg}`
+    );
+    Assert.equal(
+      this.getSize(this.fill),
+      500 - size,
+      `Fill element should take up the rest of the ${this.dimension}: ${msg}`
+    );
+  },
+
+  assertSplitterSize(size, msg = "") {
+    Assert.equal(
+      this.splitter[this.dimension],
+      size,
+      `Splitter ${this.dimension} should match expected ${size}: ${msg}`
+    );
+  },
+
+  get minSizeProperty() {
+    return this.dimension == "width" ? "minWidth" : "minHeight";
+  },
+
+  get maxSizeProperty() {
+    return this.dimension == "width" ? "maxWidth" : "maxHeight";
+  },
+
+  get collapseSizeAttribute() {
+    return this.dimension == "width" ? "collapse-width" : "collapse-height";
+  },
+
+  setCollapseSize(size) {
+    this.splitter.setAttribute(this.collapseSizeAttribute, size);
+  },
+
+  clearCollapseSize() {
+    this.splitter.removeAttribute(this.collapseSizeAttribute);
+  },
+
+  async synthMouse(position, type = "mousemove", otherPosition = 50) {
+    let x, y;
+    if (!this.resizedIsBefore) {
+      position = 500 - position;
+    }
+    if (this.dimension == "width") {
+      [x, y] = [position, otherPosition];
+    } else {
+      [x, y] = [otherPosition, position];
+    }
+    EventUtils.synthesizeMouse(
+      this.splitter.parentNode,
+      x,
+      y,
+      { type, buttons: 1 },
+      win
+    );
+
+    if (MOUSE_DELAY) {
+      // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+      await new Promise(resolve => setTimeout(resolve, MOUSE_DELAY));
+    }
+
+    await new Promise(resolve => requestAnimationFrame(resolve));
+  },
+};
+
+add_setup(async function () {
+  let tab = tabmail.openTab("contentTab", {
+    url: "chrome://mochitests/content/browser/comm/mail/base/test/browser/files/paneSplitter.xhtml",
+  });
+
+  await BrowserTestUtils.browserLoaded(tab.browser);
+  tab.browser.focus();
+
+  win = tab.browser.contentWindow;
+  doc = win.document;
+
+  win.addEventListener("splitter-resizing", event => resizingEvents++);
+  win.addEventListener("splitter-resized", event => resizedEvents++);
+  win.addEventListener("splitter-collapsed", event => collapsedEvents++);
+  win.addEventListener("splitter-expanded", event => expandedEvents++);
+});
+
+add_task(async function testHorizontalBefore() {
+  let outer = doc.getElementById("horizontal-before");
+  let resized = outer.querySelector(".resized");
+  let splitter = outer.querySelector(`hr[is="pane-splitter"]`);
+  let fill = outer.querySelector(".fill");
+
+  Assert.equal(resized.clientWidth, 200);
+  Assert.equal(fill.clientWidth, 300);
+  Assert.equal(win.getComputedStyle(splitter).cursor, "ew-resize");
+
+  testRunner.outer = outer;
+  testRunner.splitter = splitter;
+  testRunner.resizedIsBefore = true;
+  testRunner.resized = resized;
+  testRunner.fill = fill;
+  testRunner.dimension = "width";
+
+  await subtestDrag();
+  await subtestDragSizeBounds();
+  await subtestDragAutoCollapse();
+  await subtestCollapseExpand();
+});
+
+add_task(async function testHorizontalAfter() {
+  let outer = doc.getElementById("horizontal-after");
+  let fill = outer.querySelector(".fill");
+  let splitter = outer.querySelector(`hr[is="pane-splitter"]`);
+  let resized = outer.querySelector(".resized");
+
+  Assert.equal(fill.clientWidth, 300);
+  Assert.equal(resized.clientWidth, 200);
+  Assert.equal(win.getComputedStyle(splitter).cursor, "ew-resize");
+
+  testRunner.outer = outer;
+  testRunner.splitter = splitter;
+  testRunner.resizedIsBefore = false;
+  testRunner.resized = resized;
+  testRunner.fill = fill;
+  testRunner.dimension = "width";
+
+  await subtestDrag();
+  await subtestDragSizeBounds();
+  await subtestDragAutoCollapse();
+  await subtestCollapseExpand();
+});
+
+add_task(async function testVerticalBefore() {
+  let outer = doc.getElementById("vertical-before");
+  let resized = outer.querySelector(".resized");
+  let splitter = outer.querySelector(`hr[is="pane-splitter"]`);
+  let fill = outer.querySelector(".fill");
+
+  Assert.equal(resized.clientHeight, 200);
+  Assert.equal(fill.clientHeight, 300);
+  Assert.equal(win.getComputedStyle(splitter).cursor, "ns-resize");
+
+  testRunner.outer = outer;
+  testRunner.splitter = splitter;
+  testRunner.resizedIsBefore = true;
+  testRunner.resized = resized;
+  testRunner.fill = fill;
+  testRunner.dimension = "height";
+
+  await subtestDrag();
+  await subtestDragSizeBounds();
+  await subtestDragAutoCollapse();
+  await subtestCollapseExpand();
+});
+
+add_task(async function testVerticalAfter() {
+  let outer = doc.getElementById("vertical-after");
+  let fill = outer.querySelector(".fill");
+  let splitter = outer.querySelector(`hr[is="pane-splitter"]`);
+  let resized = outer.querySelector(".resized");
+
+  testRunner.outer = outer;
+  testRunner.splitter = splitter;
+  testRunner.resizedIsBefore = false;
+  testRunner.resized = resized;
+  testRunner.fill = fill;
+  testRunner.dimension = "height";
+
+  Assert.equal(fill.clientHeight, 300);
+  Assert.equal(resized.clientHeight, 200);
+  Assert.equal(win.getComputedStyle(splitter).cursor, "ns-resize");
+
+  await subtestDrag();
+  await subtestDragSizeBounds();
+  await subtestDragAutoCollapse();
+  await subtestCollapseExpand();
+});
+
+async function subtestDrag() {
+  info("subtestDrag");
+  resizingEvents = 0;
+  resizedEvents = 0;
+
+  let originalPosition = testRunner.getSize(testRunner.resized);
+  let position = 200;
+
+  await testRunner.synthMouse(position, "mousedown");
+
+  await testRunner.synthMouse(position, "mousemove", 25);
+  Assert.equal(resizingEvents, 0, "moving up the splitter does nothing");
+  await testRunner.synthMouse(position, "mousemove", 75);
+  Assert.equal(resizingEvents, 0, "moving down the splitter does nothing");
+
+  position--;
+  await testRunner.synthMouse(position);
+  Assert.equal(resizingEvents, 0, "moving 1px does nothing");
+
+  position--;
+  await testRunner.synthMouse(position);
+  Assert.equal(resizingEvents, 0, "moving 2px does nothing");
+
+  position--;
+  await testRunner.synthMouse(position);
+  Assert.equal(resizingEvents, 1, "a resizing event fired");
+
+  // Drag in steps to the left-hand/top end.
+  for (; position >= 0; position -= 50) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(position);
+  }
+
+  // Drag beyond the left-hand/top end.
+  position = -50;
+  await testRunner.synthMouse(position);
+  testRunner.assertElementSizes(0);
+
+  // Drag in steps to the right-hand/bottom end.
+  for (let position = 0; position <= 500; position += 50) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(position);
+  }
+
+  // Drag beyond the right-hand/bottom end.
+  position = 550;
+  await testRunner.synthMouse(position);
+  testRunner.assertElementSizes(500);
+
+  // Drop.
+  position = 400;
+  Assert.equal(resizingEvents, 1, "no more resizing events fired");
+  Assert.equal(resizedEvents, 0, "no resized events fired");
+  await testRunner.synthMouse(position);
+  await testRunner.synthMouse(position, "mouseup");
+  testRunner.assertElementSizes(400);
+  Assert.equal(resizingEvents, 1, "no more resizing events fired");
+  Assert.equal(resizedEvents, 1, "a resized event fired");
+
+  // Pick up again.
+  await testRunner.synthMouse(position, "mousedown");
+
+  // Move.
+  for (; position >= originalPosition; position -= 50) {
+    await testRunner.synthMouse(position);
+  }
+
+  // Drop.
+  Assert.equal(resizingEvents, 2, "a resizing event fired");
+  Assert.equal(resizedEvents, 1, "no more resized events fired");
+  await testRunner.synthMouse(position, "mouseup");
+  testRunner.assertElementSizes(originalPosition);
+  Assert.equal(resizingEvents, 2, "no more resizing events fired");
+  Assert.equal(resizedEvents, 2, "a resized event fired");
+}
+
+async function subtestDragSizeBounds() {
+  info("subtestDragSizeBounds");
+
+  let { splitter, resized, fill, minSizeProperty, maxSizeProperty } =
+    testRunner;
+
+  // Various min or max sizes to set on the resized and fill elements.
+  // NOTE: the sum of the max sizes is greater than 500px.
+  // Moreover, the resized element's min size is below 200px, and the max size
+  // above it. Similarly, the fill element's min size is below 300px. This
+  // ensures that the initial sizes of 200px and 300px are within their
+  // respective min-max bounds.
+  // NOTE: We do not set a max size on the fill element. The grid layout does
+  // not handle this. Nor is it an expected usage of the splitter.
+  for (let [minResized, min] of [
+    [null, 0],
+    ["100.5px", 100.5],
+  ]) {
+    for (let [maxResized, expectMax1] of [
+      [null, 500],
+      ["360px", 360],
+    ]) {
+      for (let [minFill, expectMax2] of [
+        [null, 500],
+        ["148px", 352],
+      ]) {
+        info(`Bounds [${minResized}, ${maxResized}] and [${minFill}, none]`);
+        let max = Math.min(expectMax1, expectMax2);
+        info(`Overall bound [${min}px, ${max}px]`);
+
+        // Construct a set of positions we are interested in.
+        let roundMin = Math.floor(min);
+        let roundMax = Math.ceil(max);
+        let positionSet = [-50, 150, 350, 550];
+        // Include specific positions around the minimum and maximum points.
+        positionSet.push(roundMin - 1, roundMin, roundMin + 1);
+        positionSet.push(roundMax - 1, roundMax, roundMax + 1);
+        positionSet.sort();
+
+        // Reset the splitter.
+        splitter.width = null;
+        splitter.height = null;
+
+        resized.style[minSizeProperty] = minResized;
+        resized.style[maxSizeProperty] = maxResized;
+        fill.style[minSizeProperty] = minFill;
+
+        testRunner.assertElementSizes(200, "initial position");
+        await testRunner.synthMouse(200, "mousedown");
+
+        for (let position of positionSet) {
+          await testRunner.synthMouse(position);
+          let size = Math.min(Math.max(position, min), max);
+          testRunner.assertElementSizes(size, `Moved forward to ${position}`);
+          testRunner.assertSplitterSize(size, `Moved forward to ${position}`);
+        }
+
+        await testRunner.synthMouse(500);
+        await testRunner.synthMouse(500, "mouseup");
+        testRunner.assertElementSizes(max, "positioned at max");
+        testRunner.assertSplitterSize(max, "positioned at max");
+
+        // Reverse.
+        await testRunner.synthMouse(max, "mousedown");
+
+        for (let position of positionSet.reverse()) {
+          await testRunner.synthMouse(position);
+          let size = Math.min(Math.max(position, min), max);
+          testRunner.assertElementSizes(size, `Moved backward to ${position}`);
+          testRunner.assertSplitterSize(size, `Moved backward to ${position}`);
+        }
+
+        await testRunner.synthMouse(0);
+        await testRunner.synthMouse(0, "mouseup");
+        testRunner.assertElementSizes(min, "positioned at min");
+        testRunner.assertSplitterSize(min, "positioned at min");
+      }
+    }
+  }
+
+  // Reset.
+  splitter.width = null;
+  splitter.height = null;
+  resized.style[minSizeProperty] = null;
+  resized.style[maxSizeProperty] = null;
+  fill.style[minSizeProperty] = null;
+}
+
+async function subtestDragAutoCollapse() {
+  info("subtestDragAutoCollapse");
+  testRunner.setCollapseSize(78);
+
+  collapsedEvents = 0;
+  expandedEvents = 0;
+
+  let { splitter } = testRunner;
+
+  let originalPosition = 200;
+
+  // Drag in steps toward the left-hand/top end.
+  await testRunner.synthMouse(200, "mousedown");
+  for (let position of [180, 160, 140, 120, 100, 80, 78]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      position,
+      `Should have ${position} size at ${position}`
+    );
+    Assert.ok(!splitter.isCollapsed, `Should not be collapsed at ${position}`);
+  }
+
+  // For the first 20 pixels inside the minimum size, nothing happens.
+  for (let position of [74, 68, 64, 60, 58]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      78,
+      `Should be at collapse-size at ${position}`
+    );
+    Assert.ok(!splitter.isCollapsed, `Should not be collapsed at ${position}`);
+  }
+
+  // Then the pane collapses.
+  await testRunner.synthMouse(57);
+  Assert.equal(collapsedEvents, 1, "collapsed event fired");
+  for (let position of [57, 55, 51, 40, 20, 0, -20]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(0, `Should have no size at ${position}`);
+    Assert.ok(splitter.isCollapsed, `Should be collapsed at ${position}`);
+  }
+
+  await testRunner.synthMouse(-20, "mouseup");
+  testRunner.assertElementSizes(
+    0,
+    "Should be at min size after releasing mouse"
+  );
+  Assert.ok(splitter.isCollapsed, "Should be collapsed after releasing mouse");
+
+  // Drag it from the collapsed state.
+  await testRunner.synthMouse(0, "mousedown");
+  for (let position of [0, 8, 16, 19]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      0,
+      `Should still have no size at ${position}`
+    );
+    Assert.ok(splitter.isCollapsed, `Should still be collapsed at ${position}`);
+  }
+
+  // Then the pane expands. For the first 20 pixels, nothing happens.
+  await testRunner.synthMouse(20);
+  Assert.equal(expandedEvents, 1, "expanded event fired");
+  for (let position of [40, 60, 78]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      78,
+      `Should expand to collapse-size at ${position}`
+    );
+    Assert.ok(
+      !splitter.isCollapsed,
+      `Should no longer be collapsed at ${position}`
+    );
+  }
+
+  for (let position of [79, 100, 120, 200, 250, 300, 400, 450]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      position,
+      `Should have ${position} size at ${position}`
+    );
+    Assert.ok(!splitter.isCollapsed, `Should not be collapsed at ${position}`);
+  }
+
+  await testRunner.synthMouse(450, "mouseup");
+  testRunner.assertElementSizes(
+    450,
+    "Should be at final size after releasing mouse"
+  );
+  Assert.ok(
+    !splitter.isCollapsed,
+    "Should not be collapsed after releasing mouse"
+  );
+
+  // Test that collapse and expand can happen in the same drag.
+  await testRunner.synthMouse(450, "mousedown");
+  let position;
+  let expectedSize;
+  for ([position, expectedSize] of [
+    [58, 78],
+    [57, 0],
+    [58, 78],
+    [57, 0],
+  ]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      expectedSize,
+      `Should have ${expectedSize} size at ${position}`
+    );
+  }
+  Assert.equal(collapsedEvents, 3, "collapsed events fired");
+  Assert.equal(expandedEvents, 2, "expanded events fired");
+  await testRunner.synthMouse(position, "mouseup");
+
+  // Test that expansion from collapsed reverts to normal behaviour after
+  // dragging out to the minimum size.
+  await testRunner.synthMouse(0, "mousedown");
+  for ([position, expectedSize] of [
+    [0, 0],
+    [10, 0],
+    [20, 78],
+    [40, 78],
+    [60, 78],
+    [40, 0],
+    [60, 78],
+    [40, 0],
+    [80, 80],
+    [100, 100],
+  ]) {
+    await testRunner.synthMouse(position);
+    testRunner.assertElementSizes(
+      expectedSize,
+      `Should have ${expectedSize} size at ${position}`
+    );
+  }
+  Assert.equal(collapsedEvents, 5, "collapsed events fired");
+  Assert.equal(expandedEvents, 5, "expanded events fired");
+  await testRunner.synthMouse(position, "mouseup");
+
+  // Restore the original position.
+  await testRunner.synthMouse(position, "mousedown");
+  position = originalPosition;
+  await testRunner.synthMouse(position);
+  await testRunner.synthMouse(position, "mouseup");
+  testRunner.assertElementSizes(originalPosition);
+
+  testRunner.clearCollapseSize();
+}
+
+async function subtestCollapseExpand() {
+  info("subtestCollapseExpand");
+  collapsedEvents = 0;
+  expandedEvents = 0;
+
+  let { splitter } = testRunner;
+
+  let originalSize = testRunner.getSize(testRunner.resized);
+
+  // Collapse.
+  Assert.ok(!splitter.isCollapsed, "splitter is not collapsed");
+  Assert.equal(collapsedEvents, 0, "no collapsed events have fired");
+
+  splitter.collapse();
+  testRunner.assertElementSizes(0);
+  Assert.ok(splitter.isCollapsed, "splitter is collapsed");
+  Assert.equal(collapsedEvents, 1, "a collapsed event fired");
+
+  splitter.collapse();
+  Assert.ok(splitter.isCollapsed, "splitter is collapsed");
+  Assert.equal(collapsedEvents, 1, "no more collapsed events have fired");
+
+  // Expand.
+  splitter.expand();
+  testRunner.assertElementSizes(originalSize);
+  Assert.ok(!splitter.isCollapsed, "splitter is not collapsed");
+  Assert.equal(expandedEvents, 1, "an expanded event fired");
+
+  splitter.expand();
+  Assert.ok(!splitter.isCollapsed, "splitter is not collapsed");
+  Assert.equal(expandedEvents, 1, "no more expanded events have fired");
+
+  collapsedEvents = 0;
+  expandedEvents = 0;
+
+  // Collapse again. Then drag to expand.
+  splitter.collapse();
+  Assert.equal(collapsedEvents, 1, "a collapsed event fired");
+
+  testRunner.setCollapseSize(78);
+
+  await testRunner.synthMouse(0, "mousedown");
+  await testRunner.synthMouse(200);
+  await testRunner.synthMouse(200, "mouseup");
+  testRunner.assertElementSizes(200);
+  Assert.ok(!splitter.isCollapsed, "splitter is not collapsed");
+  Assert.equal(expandedEvents, 1, "an expanded event fired");
+
+  testRunner.clearCollapseSize();
+}
diff --git a/comm/mail/base/test/browser/browser_preferDisplayName.js b/comm/mail/base/test/browser/browser_preferDisplayName.js
new file mode 100644
index 0000000000..d041b3bd37
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_preferDisplayName.js
@@ -0,0 +1,456 @@
+/* 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/. */
+
+const { AddrBookCard } = ChromeUtils.import(
+  "resource:///modules/AddrBookCard.jsm"
+);
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let book, emily, felix, testFolder;
+
+add_setup(async function () {
+  book = MailServices.ab.getDirectory("jsaddrbook://abook.sqlite");
+
+  emily = new AddrBookCard();
+  emily.displayName = "This is Emily!";
+  emily.primaryEmail = "emily@ekberg.invalid";
+  book.addCard(emily);
+
+  felix = new AddrBookCard();
+  felix.displayName = "Felix's Flower Co.";
+  felix.primaryEmail = "felix@flowers.invalid";
+  felix.setPropertyAsBool("PreferDisplayName", false);
+  book.addCard(felix);
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+
+  registerCleanupFunction(async () => {
+    await ensure_cards_view();
+    book.deleteCards(book.childCards);
+    MailServices.accounts.removeAccount(account, false);
+  });
+
+  let rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("preferDisplayName", null);
+  testFolder = rootFolder
+    .getChildNamed("preferDisplayName")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+});
+
+add_task(async function () {
+  let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+  let { threadPane, threadTree, messageBrowser } = about3Pane;
+  // Not `currentAboutMessage` as that's null right now.
+  let aboutMessage = messageBrowser.contentWindow;
+  let messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+
+  // Set up the UI.
+
+  about3Pane.restoreState({
+    folderURI: testFolder.URI,
+    messagePaneVisible: true,
+  });
+  threadPane.onColumnsVisibilityChanged({
+    value: "senderCol",
+    target: { hasAttribute: () => true },
+  });
+  threadPane.onColumnsVisibilityChanged({
+    value: "recipientCol",
+    target: { hasAttribute: () => true },
+  });
+
+  // Switch to classic view and table layout as the test requires this state.
+  await ensure_table_view();
+
+  // It's important that we don't cause the thread tree to invalidate the row
+  // in question, and selecting it would do that, so select it first.
+  threadTree.selectedIndex = 2;
+  await BrowserTestUtils.browserLoaded(messagePaneBrowser);
+
+  // Check the initial state of everything.
+
+  let fromLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="from"]`
+  );
+  let fromSingleLine = fromLabel.querySelector(".recipient-single-line");
+  let fromMultiLineName = fromLabel.querySelector(".recipient-multi-line-name");
+  let fromMultiLineAddress = fromLabel.querySelector(
+    ".recipient-multi-line-address"
+  );
+
+  let toLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="to"]`
+  );
+  let toSingleLine = toLabel.querySelector(".recipient-single-line");
+
+  let row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "This is Emily!",
+    "initial state of Correspondent column"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "This is Emily!",
+    "initial state of Sender column"
+  );
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix Flowers",
+    "initial state of Recipient column"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "This is Emily!",
+    "initial state of From single-line label"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "initial state of From single-line title"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "This is Emily!",
+    "initial state of From multi-line name"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "initial state of From multi-line address"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix Flowers <felix@flowers.invalid>",
+    "initial state of To single-line label"
+  );
+  Assert.equal(toSingleLine.title, "", "initial state of To single-line title");
+
+  // Change Emily's display name.
+
+  emily.displayName = "I'm Emily!";
+  book.modifyCard(emily);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "I'm Emily!",
+    "Correspondent column should be the new display name"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "I'm Emily!",
+    "Sender column should be the new display name"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "I'm Emily!",
+    "From single-line label should be the new display name"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From single-line title should not change"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "I'm Emily!",
+    "From multi-line name should be the new display name"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "From multi-line address should not change"
+  );
+
+  // Stop preferring Emily's display name.
+
+  emily.setPropertyAsBool("PreferDisplayName", false);
+  book.modifyCard(emily);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "Emily Ekberg",
+    "Correspondent column should be the name from the header"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "Emily Ekberg",
+    "Sender column should be the name from the header"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From single-line label should match the header"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "",
+    "From single-line title should be cleared"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "Emily Ekberg",
+    "From multi-line name should be the name from the header"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "From multi-line address should not change"
+  );
+
+  // Prefer Emily's display name.
+
+  emily.setPropertyAsBool("PreferDisplayName", true);
+  book.modifyCard(emily);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "I'm Emily!",
+    "Correspondent column should be the display name"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "I'm Emily!",
+    "Sender column should be the display name"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "I'm Emily!",
+    "From single-line label should be the display name"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From single-line title should match the header"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "I'm Emily!",
+    "From multi-line name should be the display name"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "From multi-line address should not change"
+  );
+
+  // Prefer Felix's display name.
+
+  felix.setPropertyAsBool("PreferDisplayName", true);
+  book.modifyCard(felix);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix's Flower Co.",
+    "Recipient column should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix's Flower Co.",
+    "To single-line label should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.title,
+    "Felix Flowers <felix@flowers.invalid>",
+    "To single-line title should match the header"
+  );
+
+  // Stop preferring Felix's display name.
+
+  felix.setPropertyAsBool("PreferDisplayName", false);
+  book.modifyCard(felix);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix Flowers",
+    "Recipient column should be the name from the header"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix Flowers <felix@flowers.invalid>",
+    "To single-line label should match the header"
+  );
+  Assert.equal(
+    toSingleLine.title,
+    "",
+    "To single-line title should be cleared"
+  );
+
+  // Prefer Felix's display name.
+
+  felix.setPropertyAsBool("PreferDisplayName", true);
+  book.modifyCard(felix);
+
+  // Set global prefer display name preference to false.
+
+  Services.prefs.setBoolPref("mail.showCondensedAddresses", false);
+  await TestUtils.waitForCondition(
+    () => !toLabel.parentNode,
+    "Waiting for the header labels to reload."
+  );
+  fromLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="from"]`
+  );
+  toLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="to"]`
+  );
+
+  fromSingleLine = fromLabel.querySelector(".recipient-single-line");
+  fromMultiLineName = fromLabel.querySelector(".recipient-multi-line-name");
+  fromMultiLineAddress = fromLabel.querySelector(
+    ".recipient-multi-line-address"
+  );
+  toSingleLine = toLabel.querySelector(".recipient-single-line");
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "Emily Ekberg",
+    "Correspondent column should be the name from the header"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "Emily Ekberg",
+    "Sender column should be the name from the header"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From single-line label should match the header"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "",
+    "From single-line title should be cleared"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From multi-line name should be the name from the header"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "From multi-line address should not change"
+  );
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix Flowers",
+    "Recipient column should be the name from the header"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix Flowers <felix@flowers.invalid>",
+    "To single-line label should match the header"
+  );
+  Assert.equal(
+    toSingleLine.title,
+    "",
+    "To single-line title should be cleared"
+  );
+
+  // Reset prefer display name global preference to true.
+
+  Services.prefs.setBoolPref("mail.showCondensedAddresses", true);
+  await TestUtils.waitForCondition(
+    () => !toLabel.parentNode,
+    "Waiting for the header labels to reload."
+  );
+  fromLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="from"]`
+  );
+  toLabel = aboutMessage.document.querySelector(
+    `.header-recipient[data-header-name="to"]`
+  );
+
+  fromSingleLine = fromLabel.querySelector(".recipient-single-line");
+  fromMultiLineName = fromLabel.querySelector(".recipient-multi-line-name");
+  fromMultiLineAddress = fromLabel.querySelector(
+    ".recipient-multi-line-address"
+  );
+  toSingleLine = toLabel.querySelector(".recipient-single-line");
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".correspondentcol-column").textContent,
+    "I'm Emily!",
+    "Correspondent column should be the new display name"
+  );
+  Assert.equal(
+    row.querySelector(".sendercol-column").textContent,
+    "I'm Emily!",
+    "Sender column should be the new display name"
+  );
+  Assert.equal(
+    fromSingleLine.textContent,
+    "I'm Emily!",
+    "From single-line label should be the new display name"
+  );
+  Assert.equal(
+    fromSingleLine.title,
+    "Emily Ekberg <emily@ekberg.invalid>",
+    "From single-line title should not change"
+  );
+  Assert.equal(
+    fromMultiLineName.textContent,
+    "I'm Emily!",
+    "From multi-line name should be the new display name"
+  );
+  Assert.equal(
+    fromMultiLineAddress.textContent,
+    "emily@ekberg.invalid",
+    "From multi-line address should not change"
+  );
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix's Flower Co.",
+    "Recipient column should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix's Flower Co.",
+    "To single-line label should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.title,
+    "Felix Flowers <felix@flowers.invalid>",
+    "To single-line title should match the header"
+  );
+
+  // Restore the default for Felix.
+
+  felix.deleteProperty("PreferDisplayName");
+  book.modifyCard(felix);
+
+  row = about3Pane.threadTree.getRowAtIndex(2);
+  Assert.equal(
+    row.querySelector(".recipientcol-column").textContent,
+    "Felix's Flower Co.",
+    "Recipient column should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.textContent,
+    "Felix's Flower Co.",
+    "To single-line label should be the display name"
+  );
+  Assert.equal(
+    toSingleLine.title,
+    "Felix Flowers <felix@flowers.invalid>",
+    "To single-line title should match the header"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_searchMessages.js b/comm/mail/base/test/browser/browser_searchMessages.js
new file mode 100644
index 0000000000..4207b0019c
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_searchMessages.js
@@ -0,0 +1,460 @@
+/* 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/. */
+
+const { mailTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MailTestUtils.jsm"
+);
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+
+const tabmail = document.getElementById("tabmail");
+let rootFolder, testFolder, otherFolder;
+
+add_setup(async function () {
+  const generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+  rootFolder.QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder = rootFolder.createLocalSubfolder("searchMessagesFolder");
+  testFolder.QueryInterface(Ci.nsIMsgLocalMailFolder);
+  const messageStrings = generator
+    .makeMessages({ count: 20 })
+    .map(message => message.toMboxString());
+  testFolder.addMessageBatch(messageStrings);
+  otherFolder = rootFolder.createLocalSubfolder("searchMessagesOtherFolder");
+
+  tabmail.currentAbout3Pane.paneLayout.messagePaneVisible = true;
+  Services.xulStore.removeDocument(
+    "chrome://messenger/content/SearchDialog.xhtml"
+  );
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function () {
+  const windowOpenedPromise = BrowserTestUtils.domWindowOpenedAndLoaded(
+    null,
+    w =>
+      w.document.documentURI == "chrome://messenger/content/SearchDialog.xhtml"
+  );
+  goDoCommand("cmd_searchMessages");
+  const win = await windowOpenedPromise;
+  const doc = win.document;
+
+  await SimpleTest.promiseFocus(win);
+
+  const searchButton = doc.getElementById("search-button");
+  const clearButton = doc.querySelector(
+    "#searchTerms > vbox > hbox:nth-child(2) > button"
+  );
+  const searchTermList = doc.getElementById("searchTermList");
+  const threadTree = doc.getElementById("threadTree");
+  const columns = threadTree.columns;
+  const picker = threadTree.querySelector("treecolpicker");
+  const popup = picker.querySelector("menupopup");
+  const openButton = doc.getElementById("openButton");
+  const deleteButton = doc.getElementById("deleteButton");
+  const fileMessageButton = doc.getElementById("fileMessageButton");
+  const fileMessagePopup = fileMessageButton.querySelector("menupopup");
+  const openInFolderButton = doc.getElementById("openInFolderButton");
+  const saveAsVFButton = doc.getElementById("saveAsVFButton");
+  const statusText = doc.getElementById("statusText");
+
+  const treeClick = mailTestUtils.treeClick.bind(
+    null,
+    EventUtils,
+    win,
+    threadTree
+  );
+
+  // Test search criteria. The search results are deterministic unless
+  // MessageGenerator is changed.
+
+  await TestUtils.waitForCondition(
+    () => searchTermList.itemCount == 1,
+    "waiting for a search term to exist"
+  );
+  const searchTerm0 = searchTermList.getItemAtIndex(0);
+  const input0 = searchTerm0.querySelector("search-value input");
+  const button0 = searchTerm0.querySelector("button.small-button:first-child");
+
+  // Row 0 will look for subjects including "hovercraft".
+  Assert.equal(input0.value, "");
+  input0.focus();
+  EventUtils.sendString("hovercraft", win);
+
+  // Add another row.
+  EventUtils.synthesizeMouseAtCenter(button0, {}, win);
+  await TestUtils.waitForCondition(
+    () => searchTermList.itemCount == 2,
+    "waiting for a second search term to exist"
+  );
+
+  const searchTerm1 = searchTermList.getItemAtIndex(1);
+  const menulist = searchTerm1.querySelector("search-attribute menulist");
+  const menuitem = menulist.querySelector(`menuitem[value="1"]`);
+  const input1 = searchTerm1.querySelector("search-value input");
+
+  // Change row 1's search attribute.
+  EventUtils.synthesizeMouseAtCenter(menulist, {}, win);
+  await BrowserTestUtils.waitForPopupEvent(menulist, "shown");
+  menulist.menupopup.activateItem(menuitem);
+  await BrowserTestUtils.waitForPopupEvent(menulist, "hidden");
+
+  // Row 1 will look for the sender Emily Ekberg.
+  Assert.equal(input1.value, "");
+  EventUtils.synthesizeMouseAtCenter(input1, {}, win);
+  EventUtils.sendString("emily@ekberg.invalid", win);
+
+  // Search. Emily didn't send a message about hovercraft, so no results.
+  EventUtils.synthesizeMouseAtCenter(searchButton, {}, win);
+  // Allows 5 seconds for expected statusText to appear.
+  await TestUtils.waitForCondition(
+    () => statusText.value == "No matches found",
+    "waiting for status text to update"
+  );
+
+  // Change the search from AND to OR.
+  EventUtils.synthesizeMouseAtCenter(
+    doc.querySelector(`#booleanAndGroup > radio[value="or"]`),
+    {},
+    win
+  );
+  // Change the subject search to something more common.
+  input0.select();
+  EventUtils.sendString("in", win);
+
+  // Search. 10 messages should be found.
+  EventUtils.synthesizeMouseAtCenter(searchButton, {}, win);
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 10,
+    "waiting for tree view to be filled"
+  );
+  // statusText changes on 500 ms time base.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  await TestUtils.waitForCondition(
+    () => statusText.value == "10 matches found",
+    "waiting for status text to update"
+  );
+
+  // Test tree sort column and direction.
+
+  EventUtils.synthesizeMouseAtCenter(columns.subjectCol.element, {}, win);
+  Assert.equal(
+    columns.subjectCol.element.getAttribute("sortDirection"),
+    "ascending"
+  );
+  EventUtils.synthesizeMouseAtCenter(columns.dateCol.element, {}, win);
+  Assert.equal(
+    columns.dateCol.element.getAttribute("sortDirection"),
+    "ascending"
+  );
+  EventUtils.synthesizeMouseAtCenter(columns.dateCol.element, {}, win);
+  Assert.equal(
+    columns.dateCol.element.getAttribute("sortDirection"),
+    "descending"
+  );
+
+  // Test tree column visibility and order.
+
+  checkTreeColumnsInOrder(threadTree, [
+    "flaggedCol",
+    "attachmentCol",
+    "subjectCol",
+    "unreadButtonColHeader",
+    "correspondentCol",
+    "junkStatusCol",
+    "dateCol",
+    "locationCol",
+  ]);
+  EventUtils.synthesizeMouseAtCenter(picker, {}, win);
+  await BrowserTestUtils.waitForPopupEvent(popup, "shown");
+  popup.activateItem(
+    popup.querySelector(`[colindex="${columns.selectCol.index}"]`)
+  );
+  popup.activateItem(
+    popup.querySelector(`[colindex="${columns.deleteCol.index}"]`)
+  );
+  popup.hidePopup();
+  await BrowserTestUtils.waitForPopupEvent(popup, "hidden");
+  // Wait for macOS to catch up.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  checkTreeColumnsInOrder(threadTree, [
+    "selectCol",
+    "flaggedCol",
+    "attachmentCol",
+    "subjectCol",
+    "unreadButtonColHeader",
+    "correspondentCol",
+    "junkStatusCol",
+    "dateCol",
+    "locationCol",
+    "deleteCol",
+  ]);
+
+  threadTree._reorderColumn(
+    columns.deleteCol.element,
+    columns.selectCol.element,
+    false
+  );
+  threadTree.invalidate();
+  // Wait for macOS to catch up.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  checkTreeColumnsInOrder(threadTree, [
+    "selectCol",
+    "deleteCol",
+    "flaggedCol",
+    "attachmentCol",
+    "subjectCol",
+    "unreadButtonColHeader",
+    "correspondentCol",
+    "junkStatusCol",
+    "dateCol",
+    "locationCol",
+  ]);
+
+  // Test message selection with the select column.
+
+  treeClick(0, "subjectCol", {});
+  await TestUtils.waitForCondition(
+    () => threadTree.view.selection.count == 1,
+    "waiting for first message to be selected"
+  );
+  Assert.ok(!openButton.disabled);
+  Assert.ok(!deleteButton.disabled);
+  Assert.ok(!fileMessageButton.disabled);
+  Assert.ok(!openInFolderButton.disabled);
+  treeClick(1, "selectCol", {});
+  await TestUtils.waitForCondition(
+    () => threadTree.view.selection.count == 2,
+    "waiting for second message to be selected"
+  );
+  Assert.ok(!openButton.disabled);
+  Assert.ok(!deleteButton.disabled);
+  Assert.ok(!fileMessageButton.disabled);
+  Assert.ok(openInFolderButton.disabled);
+  treeClick(1, "selectCol", {});
+  await TestUtils.waitForCondition(
+    () => threadTree.view.selection.count == 1,
+    "waiting for second message to be unselected"
+  );
+  Assert.ok(!openButton.disabled);
+  Assert.ok(!deleteButton.disabled);
+  Assert.ok(!fileMessageButton.disabled);
+  Assert.ok(!openInFolderButton.disabled);
+  treeClick(0, "selectCol", {});
+  await TestUtils.waitForCondition(
+    () => threadTree.view.selection.count == 0,
+    "waiting for first message to be selected"
+  );
+  Assert.ok(openButton.disabled);
+  Assert.ok(deleteButton.disabled);
+  Assert.ok(fileMessageButton.disabled);
+  Assert.ok(openInFolderButton.disabled);
+
+  // Opening messages.
+
+  // Test opening a message with the "Open" button.
+  treeClick(0, "subjectCol", {});
+  let tabOpenPromise = BrowserTestUtils.waitForEvent(window, "TabOpen");
+  EventUtils.synthesizeMouseAtCenter(openButton, {}, win);
+  const {
+    detail: { tabInfo: tab1 },
+  } = await tabOpenPromise;
+  await BrowserTestUtils.waitForEvent(tab1.chromeBrowser, "MsgLoaded");
+  Assert.equal(tab1.mode.name, "mailMessageTab");
+
+  await SimpleTest.promiseFocus(win);
+
+  // Test opening a message with a double click.
+  tabOpenPromise = BrowserTestUtils.waitForEvent(window, "TabOpen");
+  treeClick(0, "subjectCol", { clickCount: 2 });
+  const {
+    detail: { tabInfo: tab2 },
+  } = await tabOpenPromise;
+  await BrowserTestUtils.waitForEvent(tab2.chromeBrowser, "MsgLoaded");
+  Assert.equal(tab2.mode.name, "mailMessageTab");
+
+  await SimpleTest.promiseFocus(win);
+
+  // Test opening a message with the keyboard.
+  tabOpenPromise = BrowserTestUtils.waitForEvent(window, "TabOpen");
+  threadTree.focus();
+  EventUtils.synthesizeKey("VK_RETURN", {}, win);
+  const {
+    detail: { tabInfo: tab3 },
+  } = await tabOpenPromise;
+  await BrowserTestUtils.waitForEvent(tab3.chromeBrowser, "MsgLoaded");
+  Assert.equal(tab3.mode.name, "mailMessageTab");
+
+  await SimpleTest.promiseFocus(win);
+
+  // Test opening a message with the "Open in Folder" button.
+  const tabSelectPromise = BrowserTestUtils.waitForEvent(window, "TabSelect");
+  EventUtils.synthesizeMouseAtCenter(openInFolderButton, {}, win);
+  const {
+    detail: { tabInfo: tab0 },
+  } = await tabSelectPromise;
+  await BrowserTestUtils.waitForEvent(tab0.chromeBrowser, "MsgLoaded");
+  Assert.equal(tab0, tabmail.tabInfo[0]);
+
+  tabmail.closeOtherTabs(tab0);
+
+  await SimpleTest.promiseFocus(win);
+
+  // Deleting messages.
+
+  // Test deleting a message with the delete column.
+  let deletePromise = PromiseTestUtils.promiseFolderEvent(
+    testFolder,
+    "DeleteOrMoveMsgCompleted"
+  );
+  treeClick(0, "deleteCol", {});
+  await deletePromise;
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 9,
+    "waiting for row to be removed from tree view"
+  );
+
+  // Test deleting a message with the "Delete" button.
+  deletePromise = PromiseTestUtils.promiseFolderEvent(
+    testFolder,
+    "DeleteOrMoveMsgCompleted"
+  );
+  EventUtils.synthesizeMouseAtCenter(deleteButton, {}, win);
+  await deletePromise;
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 8,
+    "waiting for row to be removed from tree view"
+  );
+
+  // Test deleting a message with the keyboard.
+  treeClick(0, "subjectCol", {});
+  deletePromise = PromiseTestUtils.promiseFolderEvent(
+    testFolder,
+    "DeleteOrMoveMsgCompleted"
+  );
+  EventUtils.synthesizeKey("VK_DELETE", { shiftKey: true }, win);
+  await deletePromise;
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 7,
+    "waiting for row to be removed from tree view"
+  );
+
+  // Moving messages.
+
+  // Test moving a message to another folder with the "Move To" button.
+  treeClick(0, "subjectCol", {});
+  const movePromise = PromiseTestUtils.promiseFolderEvent(
+    testFolder,
+    "DeleteOrMoveMsgCompleted"
+  );
+
+  EventUtils.synthesizeMouseAtCenter(fileMessageButton, {}, win);
+  await BrowserTestUtils.waitForPopupEvent(fileMessagePopup, "shown");
+  const rootFolderMenu = [...fileMessagePopup.children].find(
+    i => i._folder == rootFolder
+  );
+  rootFolderMenu.openMenu(true);
+  await BrowserTestUtils.waitForPopupEvent(rootFolderMenu.menupopup, "shown");
+  const otherFolderItem = [...rootFolderMenu.menupopup.children].find(
+    i => i._folder == otherFolder
+  );
+  rootFolderMenu.menupopup.activateItem(otherFolderItem);
+  await BrowserTestUtils.waitForPopupEvent(fileMessagePopup, "hidden");
+
+  await movePromise;
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 6,
+    "waiting for row to be removed from tree view"
+  );
+
+  // TODO: Test dragging a message to another folder.
+
+  // Test the "Save as Search Folder" button.
+
+  const virtualFolderDialogPromise = BrowserTestUtils.promiseAlertDialogOpen(
+    undefined,
+    "chrome://messenger/content/virtualFolderProperties.xhtml",
+    {
+      async callback(vfWin) {
+        await SimpleTest.promiseFocus(vfWin);
+        await BrowserTestUtils.closeWindow(vfWin);
+      },
+    }
+  );
+  EventUtils.synthesizeMouseAtCenter(saveAsVFButton, {}, win);
+  await virtualFolderDialogPromise;
+
+  await SimpleTest.promiseFocus(win);
+
+  // Test clearing the search.
+
+  EventUtils.synthesizeMouseAtCenter(clearButton, {}, win);
+  await TestUtils.waitForCondition(
+    () => searchTermList.itemCount == 1,
+    "waiting for search term list to be cleared"
+  );
+  await TestUtils.waitForCondition(
+    () => threadTree.view.rowCount == 0,
+    "waiting for tree view to be cleared"
+  );
+
+  const newSearchTerm0 = searchTermList.getItemAtIndex(0);
+  Assert.notEqual(newSearchTerm0, searchTerm0);
+  const newInput0 = newSearchTerm0.querySelector("search-value input");
+  Assert.equal(newInput0.value, "");
+
+  await BrowserTestUtils.closeWindow(win);
+
+  // Open the window again, and check the tree columns are as we left them.
+
+  const window2OpenedPromise = BrowserTestUtils.domWindowOpenedAndLoaded(
+    null,
+    w =>
+      w.document.documentURI == "chrome://messenger/content/SearchDialog.xhtml"
+  );
+  goDoCommand("cmd_searchMessages");
+  const win2 = await window2OpenedPromise;
+  const doc2 = win.document;
+  await SimpleTest.promiseFocus(win2);
+
+  const threadTree2 = doc2.getElementById("threadTree");
+
+  checkTreeColumnsInOrder(threadTree2, [
+    "selectCol",
+    "deleteCol",
+    "flaggedCol",
+    "attachmentCol",
+    "subjectCol",
+    "unreadButtonColHeader",
+    "correspondentCol",
+    "junkStatusCol",
+    "dateCol",
+    "locationCol",
+  ]);
+
+  await BrowserTestUtils.closeWindow(win2);
+});
+
+function checkTreeColumnsInOrder(tree, expectedOrder) {
+  Assert.deepEqual(
+    Array.from(tree.querySelectorAll("treecol:not([hidden])"))
+      .sort((a, b) => a.ordinal - b.ordinal)
+      .map(c => c.id),
+    expectedOrder
+  );
+}
diff --git a/comm/mail/base/test/browser/browser_selectionWidgetController.js b/comm/mail/base/test/browser/browser_selectionWidgetController.js
new file mode 100644
index 0000000000..8e57c64bdc
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_selectionWidgetController.js
@@ -0,0 +1,6196 @@
+/* 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/. */
+
+var tabInfo;
+var win;
+
+add_setup(async () => {
+  tabInfo = window.openContentTab(
+    "chrome://mochitests/content/browser/comm/mail/base/test/browser/files/selectionWidget.xhtml"
+  );
+  await BrowserTestUtils.browserLoaded(tabInfo.browser);
+
+  tabInfo.browser.focus();
+  win = tabInfo.browser.contentWindow;
+});
+
+registerCleanupFunction(() => {
+  window.tabmail.closeTab(tabInfo);
+});
+
+var selectionModels = ["focus", "browse", "browse-multi"];
+
+/**
+ * The selection widget.
+ *
+ * @type {HTMLElement}
+ */
+var widget;
+/**
+ * A focusable item before the widget.
+ *
+ * @type {HTMLElement}
+ */
+var before;
+/**
+ * A focusable item after the widget.
+ *
+ * @type {HTMLElement}
+ */
+var after;
+
+/**
+ * Reset the page and create a new widget.
+ *
+ * The "widget", "before" and "after" variables will be reset to the new
+ * elements.
+ *
+ * @param {object} options - Options to set.
+ * @param {string} options.model - The selection model to use.
+ * @param {string} [options.direction="right-to-left"] - The direction of the
+ *   widget.  Choosing "top-to-bottom" will layout items from top to bottom.
+ *   Choosing "right-to-left" or "left-to-right" will set the page's direction
+ *   to "rtl" or "ltr", respectively, and will layout items in the writing
+ *   direction.
+ * @param {boolean} [options.draggable=false] - Whether to make the items
+ *   draggable.
+ */
+function reset(options) {
+  function createTabStop(text) {
+    let el = win.document.createElement("span");
+    el.tabIndex = 0;
+    el.id = text;
+    el.textContent = text;
+    return el;
+  }
+  before = createTabStop("before");
+  after = createTabStop("after");
+
+  let { model, direction } = options;
+  if (!direction) {
+    // Default to a less-common format.
+    direction = "right-to-left";
+  }
+  info(`Creating ${direction} widget with "${model}" model`);
+
+  widget = win.document.createElement("test-selection-widget");
+  widget.id = "widget";
+  widget.setAttribute("selection-model", model);
+  widget.setAttribute(
+    "layout-direction",
+    direction == "top-to-bottom" ? "vertical" : "horizontal"
+  );
+  widget.toggleAttribute("items-draggable", options.draggable);
+
+  win.document.body.replaceChildren(before, widget, after);
+
+  win.document.dir = direction == "left-to-right" ? "ltr" : "rtl";
+
+  before.focus();
+}
+
+/**
+ * Create an array of sequential integers.
+ *
+ * @param {number} start - The starting integer.
+ * @param {number} num - The number of integers.
+ *
+ * @returns {number[]} - Array of integers between start and (start + num - 1).
+ */
+function range(start, num) {
+  return Array.from({ length: num }, (_, i) => start + i);
+}
+
+/**
+ * Assert that the specified items are selected in the widget, and nothing else.
+ *
+ * @param {number[]} indices - The indices of the selected items.
+ * @param {string} msg - A message to use for the assertion.
+ */
+function assertSelection(indices, msg) {
+  let selected = widget.selectedIndices();
+  Assert.deepEqual(selected, indices, `Selected indices should match: ${msg}`);
+  // Test that the return of getSelectionRanges is as expected.
+  let expectRanges = [];
+  let lastIndex = -2;
+  let rangeIndex = -1;
+  for (let index of indices) {
+    if (index == lastIndex + 1) {
+      expectRanges[rangeIndex].end++;
+    } else {
+      rangeIndex++;
+      expectRanges.push({ start: index, end: index + 1 });
+    }
+    lastIndex = index;
+  }
+  Assert.deepEqual(
+    widget.getSelectionRanges(),
+    expectRanges,
+    `Selection ranges should match expected: ${msg}`
+  );
+}
+
+/**
+ * Assert that the given element is focused.
+ *
+ * @param {object} expect - The expected focused element.
+ * @param {HTMLElement} [expect.element] - The expected element that will
+ *   have focus.
+ * @param {number} [expect.index] - If the `element` property is not given, this
+ *   specifies the index of the item widget we expect to have focus.
+ * @param {string} [expect.text] - Optionally test that the element also has the
+ *   given text content.
+ * @param {string} msg - A message to use for the assertion.
+ */
+function assertFocus(expect, msg) {
+  let expectElement;
+  let name;
+  if (expect.element != undefined) {
+    expectElement = expect.element;
+    name = `Element #${expectElement.id}`;
+  } else {
+    expectElement = widget.items[expect.index].element;
+    name = `Item ${expect.index}`;
+  }
+  let active = win.document.activeElement;
+  let activeIndex = widget.items.findIndex(i => i.element == active);
+  if (activeIndex >= 0) {
+    active = `"${active.textContent}", index: ${activeIndex}`;
+  } else if (active.id) {
+    active = `#${active.id}`;
+  } else {
+    active = `<${active.localName}>`;
+  }
+  Assert.ok(
+    expectElement.matches(":focus"),
+    `${name} should have focus (active: ${active}): ${msg}`
+  );
+}
+
+/**
+ * Shift the focus by one step by pressing Tab and assert the new focused
+ * element.
+ *
+ * @param {boolean} forward - Whether to move the focus forward.
+ * @param {object} expect - The expected focused element after pressing tab.
+ *   Same as passed to {@link assertFocus}.
+ * @param {string} msg - A message to use for the assertion.
+ */
+function stepFocus(forward, expect, msg) {
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: !forward }, win);
+  assertFocus(
+    expect,
+    `After moving ${forward ? "forward" : "backward"}: ${msg}`
+  );
+}
+
+/**
+ * @typedef {object} ItemState
+ * @property {string} text - The text content of the item.
+ * @property {boolean} [selected=false] - Whether the item is selected.
+ * @property {boolean} [focused=false] - Whether the item is focused.
+ */
+
+/**
+ * Assert the text order, selection state and focus of the widget items.
+ *
+ * @param {ItemState[]} expected - The expected state of the widget items, in
+ *   the expected order of the items.
+ * @param {string} msg - A message to use for the assertion.
+ */
+function assertState(expected, msg) {
+  let textOrder = [];
+  let focusIndex;
+  let selectedIndices = [];
+  for (let [index, state] of expected.entries()) {
+    textOrder.push(state.text);
+    if (state.selected) {
+      selectedIndices.push(index);
+    }
+    if (state.focused) {
+      if (focusIndex != undefined) {
+        throw new Error("More than one item specified as having focus");
+      }
+      focusIndex = index;
+    }
+  }
+  Assert.deepEqual(
+    Array.from(widget.items, i => i.element.textContent),
+    textOrder,
+    `Text order should match: ${msg}`
+  );
+  assertSelection(selectedIndices, msg);
+  if (focusIndex != undefined) {
+    assertFocus({ index: focusIndex }, msg);
+  } else {
+    Assert.ok(
+      !widget.querySelector(":focus"),
+      `Widget should not contain any focus: ${msg}`
+    );
+  }
+}
+
+/**
+ * Click the empty space of the widget.
+ *
+ * @param {object} mouseEvent - Properties for the click event.
+ */
+function clickWidgetEmptySpace(mouseEvent) {
+  let widgetRect = widget.getBoundingClientRect();
+  if (widget.getAttribute("layout-direction") == "vertical") {
+    // Try click end, which we assume is empty.
+    EventUtils.synthesizeMouse(
+      widget,
+      widgetRect.width / 2,
+      widgetRect.height - 5,
+      mouseEvent,
+      win
+    );
+  } else if (widget.matches(":dir(rtl)")) {
+    // Try click the left, which we assume is empty.
+    EventUtils.synthesizeMouse(
+      widget,
+      5,
+      widgetRect.height / 2,
+      mouseEvent,
+      win
+    );
+  } else {
+    // Try click the right, which we assume is empty.
+    EventUtils.synthesizeMouse(
+      widget,
+      widgetRect.width - 5,
+      widgetRect.height / 2,
+      mouseEvent,
+      win
+    );
+  }
+}
+
+/**
+ * Click the specified widget item.
+ *
+ * @param {number} index - The index of the item to click.
+ * @param {object} mouseEvent - Properties for the click event.
+ */
+function clickWidgetItem(index, mouseEvent) {
+  EventUtils.synthesizeMouseAtCenter(
+    widget.items[index].element,
+    mouseEvent,
+    win
+  );
+}
+
+/**
+ * Trigger the select-all shortcut.
+ */
+function selectAllShortcut() {
+  EventUtils.synthesizeKey(
+    "a",
+    AppConstants.platform == "macosx" ? { metaKey: true } : { ctrlKey: true },
+    win
+  );
+}
+
+// If the widget is empty, it receives focus on itself.
+add_task(function test_empty_widget_focus() {
+  for (let model of selectionModels) {
+    reset({ model });
+
+    assertFocus({ element: before }, "Initial");
+
+    // Move focus forward.
+    stepFocus(true, { element: widget }, "Move into widget");
+    stepFocus(true, { element: after }, "Move out of widget");
+
+    // Move focus backward.
+    stepFocus(false, { element: widget }, "Move back to widget");
+    stepFocus(false, { element: before }, "Move back out of widget");
+
+    // Clicking also gives focus.
+    for (let shiftKey of [false, true]) {
+      for (let ctrlKey of [false, true]) {
+        info(
+          `Clicking empty widget: ctrlKey: ${ctrlKey}, shiftKey: ${shiftKey}`
+        );
+        clickWidgetEmptySpace({ shiftKey, ctrlKey });
+        assertFocus({ element: widget }, "Widget receives focus after click");
+        // Move focus for the next loop.
+        stepFocus(true, { element: after }, "Move back out");
+      }
+    }
+  }
+});
+
+/**
+ * Test that the initial focus is as expected.
+ *
+ * @param {string} model - The selection model to use.
+ * @param {Function} setup - A callback to set up the widget.
+ * @param {number} clickIndex - The index of an item to click.
+ * @param {object} expect - The expected states.
+ * @param {number} expect.focusIndex - The expected focus index.
+ * @param {number[]} expect.selection - The expected initial selection.
+ * @param {boolean} expect.selectFocus - Whether we expect the focused item to
+ *   become selected.
+ */
+function subtest_initial_focus(model, setup, expect) {
+  let { focusIndex: index, selection, selectFocus } = expect;
+
+  reset({ model });
+  setup();
+
+  assertFocus({ element: before }, "Forward start");
+  assertSelection(selection, "Initial selection");
+
+  stepFocus(true, { index }, "Move onto selected item");
+  if (selectFocus) {
+    assertSelection([index], "Focus becomes selected");
+  } else {
+    assertSelection(selection, "Selection remains when focussing");
+  }
+  stepFocus(true, { element: after }, "Move out of widget");
+
+  // Reverse.
+  reset({ model });
+  after.focus();
+  setup();
+
+  assertFocus({ element: after }, "Reverse start");
+  assertSelection(selection, "Reverse start");
+
+  stepFocus(false, { index }, "Move backward to selected item");
+  if (selectFocus) {
+    assertSelection([index], "Focus becomes selected");
+  } else {
+    assertSelection(selection, "Selection remains when focussing");
+  }
+  stepFocus(false, { element: before }, "Move out of widget");
+
+  // With mouse click.
+  for (let shiftKey of [false, true]) {
+    for (let ctrlKey of [false, true]) {
+      info(`Clicking widget: ctrlKey: ${ctrlKey}, shiftKey: ${shiftKey}`);
+
+      reset({ model });
+      setup();
+
+      assertFocus({ element: before }, "Click empty start");
+      assertSelection(selection, "Click empty start");
+      clickWidgetEmptySpace({ ctrlKey, shiftKey });
+      assertFocus(
+        { index },
+        "Selected item becomes focused with click on empty"
+      );
+      if (selectFocus) {
+        assertSelection([index], "Focus becomes selected on click on empty");
+      } else {
+        assertSelection(selection, "Selection remains when click on empty");
+      }
+
+      // With mouse click on item focus moves to the clicked item instead.
+      for (let clickIndex of [
+        (index || widget.items.length) - 1,
+        index,
+        index + 1,
+      ]) {
+        reset({ model });
+        setup();
+
+        assertFocus({ element: before }, "Click first item start");
+        assertSelection(selection, "Click first item start");
+
+        clickWidgetItem(clickIndex, { shiftKey, ctrlKey });
+
+        if (
+          (shiftKey && ctrlKey) ||
+          ((shiftKey || ctrlKey) && (model == "focus" || model == "browse"))
+        ) {
+          // Both modifiers, or multi-selection not supported, so acts the
+          // same as clicking empty.
+          assertFocus(
+            { index },
+            "Selected item becomes focused with click on item"
+          );
+          if (selectFocus) {
+            assertSelection([index], "Focus becomes selected on click on item");
+          } else {
+            assertSelection(selection, "Selection remains when click on item");
+          }
+        } else {
+          assertFocus(
+            { index: clickIndex },
+            "Clicked item becomes focused with click on item"
+          );
+          let clickSelection;
+          if (ctrlKey) {
+            if (selection.includes(clickIndex)) {
+              // Toggle off clicked item.
+              clickSelection = selection.filter(index => index != clickIndex);
+            } else {
+              clickSelection = selection.concat([clickIndex]).sort();
+            }
+          } else if (shiftKey) {
+            // Range selection is always from 0, regardless of the selection
+            // before the click.
+            clickSelection = range(0, clickIndex + 1);
+          } else {
+            clickSelection = [clickIndex];
+          }
+          assertSelection(clickSelection, "Selection after click on item");
+        }
+      }
+    }
+  }
+}
+
+// If the widget has a selection when we move into it, the selected item is
+// focused.
+add_task(function test_initial_focus() {
+  for (let model of selectionModels) {
+    // With no initial selection.
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+      },
+      { focusIndex: 0, selection: [], selectFocus: true }
+    );
+    // With call to selectSingleItem
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+        widget.selectSingleItem(2);
+      },
+      { focusIndex: 2, selection: [2], selectFocus: false }
+    );
+
+    // Using the setItemSelected API
+    if (model == "focus" || model == "browse") {
+      continue;
+    }
+
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+        widget.setItemSelected(2, true);
+      },
+      { focusIndex: 2, selection: [2], selectFocus: false }
+    );
+
+    // With multiple selected, we move focus to the first selected.
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+        widget.setItemSelected(2, true);
+        widget.setItemSelected(1, true);
+      },
+      { focusIndex: 1, selection: [1, 2], selectFocus: false }
+    );
+
+    // If we use both methods.
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+        widget.selectSingleItem(2, true);
+        widget.setItemSelected(1, true);
+      },
+      { focusIndex: 1, selection: [1, 2], selectFocus: false }
+    );
+
+    // If we call selectSingleItem and then unselect it, we act same as the
+    // default case.
+    subtest_initial_focus(
+      model,
+      () => {
+        widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+        widget.selectSingleItem(2, true);
+        widget.setItemSelected(2, false);
+      },
+      { focusIndex: 0, selection: [], selectFocus: true }
+    );
+  }
+});
+
+// If selectSingleItem API method is called, we select an item and make it the
+// focus.
+add_task(function test_select_single_item_method() {
+  function subTestSelectSingleItem(outside, index) {
+    if (outside) {
+      stepFocus(true, { element: after }, "Moving focus to outside widget");
+    }
+
+    widget.selectSingleItem(index);
+    assertSelection([index], "Item becomes selected after call");
+
+    if (outside) {
+      assertFocus({ element: after }, "Focus remains outside the widget");
+      // Return.
+      stepFocus(false, { index }, "Focus moves to selected item on return");
+      assertSelection([index], "Item remains selected on return");
+    } else {
+      assertFocus({ index }, "Focus force moved to selected item");
+    }
+  }
+
+  for (let model of selectionModels) {
+    reset({ model });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+
+    stepFocus(true, { index: 0 }, "Move onto first item");
+
+    for (let outside of [false, true]) {
+      info(`Testing selecting item${outside ? " with focus outside" : ""}`);
+
+      EventUtils.synthesizeKey("KEY_Home", {}, win);
+      assertFocus({ index: 0 }, "Focus initially on first item");
+      assertSelection([0], "Initial selection on first item");
+
+      subTestSelectSingleItem(outside, 1);
+      // Selecting again.
+      subTestSelectSingleItem(outside, 1);
+
+      if (model == "focus") {
+        continue;
+      }
+
+      // Split focus from selection
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([1], "Second item remains selected");
+
+      // Select focused item.
+      subTestSelectSingleItem(outside, 2);
+
+      // Split again.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([2], "Third item remains selected");
+
+      // Selecting selected item will still move focus.
+      subTestSelectSingleItem(outside, 2);
+
+      // Split again.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 0 }, "First item has focus");
+      assertSelection([2], "Third item remains selected");
+
+      // Select neither focused nor selected.
+      subTestSelectSingleItem(outside, 1);
+    }
+
+    // With mouse click to focus.
+    for (let shiftKey of [false, true]) {
+      for (let ctrlKey of [false, true]) {
+        info(`Clicking widget: ctrlKey: ${ctrlKey}, shiftKey: ${shiftKey}`);
+
+        reset({ model });
+        widget.addItems(0, ["First", "Second", "Third"]);
+        stepFocus(true, { index: 0 }, "Move onto first item");
+        assertSelection([0], "First item becomes selected");
+
+        // Move focus outside widget.
+        stepFocus(true, { element: after }, "Move focus outside");
+
+        // Select an item.
+        widget.selectSingleItem(1);
+
+        // Click empty space will focus the selected item.
+        clickWidgetEmptySpace({});
+        assertFocus(
+          { index: 1 },
+          "Selected item becomes focused with click on empty"
+        );
+        assertSelection(
+          [1],
+          "Second item remains selected with click on empty"
+        );
+
+        // With mouse click on selected item.
+        stepFocus(false, { element: before }, "Move focus outside");
+        widget.selectSingleItem(2);
+
+        clickWidgetItem(2, { shiftKey, ctrlKey });
+        assertFocus(
+          { index: 2 },
+          "Selected item becomes focused with click on selected"
+        );
+        if (ctrlKey && !shiftKey && model == "browse-multi") {
+          assertSelection(
+            [],
+            "Item becomes unselected with Ctrl+click on selected"
+          );
+        } else {
+          // NOTE: Shift+Click will select from the item to itself.
+          assertSelection(
+            [2],
+            "Selected item remains selected with click on selected"
+          );
+        }
+
+        // With mouse click on non-selected item.
+        stepFocus(false, { element: before }, "Move focus outside");
+        widget.selectSingleItem(1);
+
+        clickWidgetItem(2, { shiftKey, ctrlKey });
+        if (
+          (shiftKey && ctrlKey) ||
+          ((shiftKey || ctrlKey) && (model == "focus" || model == "browse"))
+        ) {
+          // Both modifiers, or multi-selection not supported, so acts the
+          // same as clicking empty.
+          assertFocus(
+            { index: 1 },
+            "Selected item becomes focused with click on item"
+          );
+          assertSelection(
+            [1],
+            "Selected item remains selected with click on item"
+          );
+        } else {
+          assertFocus(
+            { index: 2 },
+            "Third item becomes focused with click on item"
+          );
+          if (ctrlKey) {
+            assertSelection(
+              [1, 2],
+              "Third item becomes selected with Ctrl+click"
+            );
+          } else if (shiftKey) {
+            assertSelection(
+              [1, 2],
+              "Second to third item become selected with Shift+click"
+            );
+          } else {
+            assertSelection(
+              [2],
+              "Third item becomes selected with click on item"
+            );
+          }
+        }
+      }
+    }
+  }
+});
+
+// If setItemSelected API method is called, we set the selection state of an
+// item but do not change anything else.
+add_task(function test_set_item_selected_method() {
+  for (let model of selectionModels) {
+    reset({ model });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth", "Fifth"]);
+    stepFocus(true, { index: 0 }, "Initial focus on first item");
+    assertSelection([0], "Initial selection on first item");
+
+    if (model == "focus" || model == "browse") {
+      // This method always throws.
+      Assert.throws(
+        () => widget.setItemSelected(2, true),
+        /Widget does not support multi-selection/
+      );
+      // Even if it would not change the single selection state.
+      Assert.throws(
+        () => widget.setItemSelected(2, false),
+        /Widget does not support multi-selection/
+      );
+      Assert.throws(
+        () => widget.setItemSelected(0, true),
+        /Widget does not support multi-selection/
+      );
+      continue;
+    }
+
+    // Can select.
+    widget.setItemSelected(2, true);
+    assertFocus({ index: 0 }, "Same focus");
+    assertSelection([0, 2], "Item 2 becomes selected");
+
+    // And unselect.
+    widget.setItemSelected(0, false);
+    assertFocus({ index: 0 }, "Same focus");
+    assertSelection([2], "Item 0 is unselected");
+
+    // Does nothing extra if already selected/unselected.
+    widget.setItemSelected(2, true);
+    assertFocus({ index: 0 }, "Same focus");
+    assertSelection([2], "Same selected");
+
+    widget.setItemSelected(0, false);
+    assertFocus({ index: 0 }, "Same focus");
+    assertSelection([2], "Same selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+
+    // Select the focused item.
+    assertFocus({ index: 3 }, "Focus on item 3");
+    assertSelection([2], "Same selected");
+
+    widget.setItemSelected(3, true);
+    assertFocus({ index: 3 }, "Same focus");
+    assertSelection([2, 3], "Item 3 selected");
+
+    widget.setItemSelected(2, false);
+    assertFocus({ index: 3 }, "Same focus");
+    assertSelection([3], "Item 2 unselected");
+
+    // Can select none this way.
+    widget.setItemSelected(3, false);
+    assertFocus({ index: 3 }, "Same focus");
+    assertSelection([], "None selected");
+  }
+});
+
+/**
+ * Test navigation for the given direction.
+ *
+ * @param {string} model - The selection model to use.
+ * @param {string} direction - The layout direction of the widget.
+ * @param {object} keys - Navigation keys.
+ * @param {string} keys.forward - The key to move forward.
+ * @param {string} keys.backward - The key to move backward.
+ */
+function subtest_keyboard_navigation(model, direction, keys) {
+  let { forward: forwardKey, backward: backwardKey } = keys;
+  reset({ model, direction });
+  widget.addItems(0, ["First", "Second", "Third"]);
+
+  stepFocus(true, { index: 0 }, "Initially on first item");
+
+  // Without Ctrl, selection follows focus.
+
+  // Forward.
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  assertFocus({ index: 1 }, "Forward to second item");
+  assertSelection([1], "Second item becomes selected on focus");
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  assertFocus({ index: 2 }, "Forward to third item");
+  assertSelection([2], "Third item becomes selected on focus");
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  assertFocus({ index: 2 }, "Forward at end remains on third item");
+  assertSelection([2], "Third item remains selected");
+
+  // Backward.
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  assertFocus({ index: 1 }, "Backward to second item");
+  assertSelection([1], "Second item becomes selected on focus");
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  assertFocus({ index: 0 }, "Backward to first item");
+  assertSelection([0], "First item becomes selected on focus");
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  assertFocus({ index: 0 }, "Backward at end remains on first item");
+  assertSelection([0], "First item remains selected");
+
+  // End.
+  EventUtils.synthesizeKey("KEY_End", {}, win);
+  assertFocus({ index: 2 }, "Third becomes focused on End");
+  assertSelection([2], "Third becomes selected on End");
+  // Move to middle.
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  EventUtils.synthesizeKey("KEY_End", {}, win);
+  assertFocus({ index: 2 }, "Third becomes focused on End from second");
+  assertSelection([2], "Third becomes selected on End from second");
+  EventUtils.synthesizeKey("KEY_End", {}, win);
+  assertFocus({ index: 2 }, "Third remains focused on End from third");
+  assertSelection([2], "Third becomes selected on End from third");
+
+  // Home.
+  EventUtils.synthesizeKey("KEY_Home", {}, win);
+  assertFocus({ index: 0 }, "First becomes focused on Home");
+  assertSelection([0], "First becomes selected on Home");
+  // Move to middle.
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  EventUtils.synthesizeKey("KEY_Home", {}, win);
+  assertFocus({ index: 0 }, "First becomes focused on Home from second");
+  assertSelection([0], "First becomes selected on Home from second");
+  EventUtils.synthesizeKey("KEY_Home", {}, win);
+  assertFocus({ index: 0 }, "First remains focused on Home from first");
+  assertSelection([0], "First becomes selected on Home from first");
+
+  // With Ctrl key, selection does not follow focus.
+  if (model == "focus") {
+    // Disabled in "focus" model.
+    // Move to middle item.
+    EventUtils.synthesizeKey(forwardKey, {}, win);
+    assertFocus({ index: 1 }, "Second item is focused");
+    assertFocus({ index: 1 }, "Second item is selected");
+
+    for (let key of [backwardKey, forwardKey, "KEY_Home", "KEY_End"]) {
+      for (let shiftKey of [false, true]) {
+        info(
+          `Pressing Ctrl+${
+            shiftKey ? "Shift+" : ""
+          }${key} on "focus" model widget`
+        );
+        EventUtils.synthesizeKey(key, { ctrlKey: true, shiftKey }, win);
+        assertFocus({ index: 1 }, "Second item is still focused");
+        assertSelection([1], "Second item is still selected");
+      }
+    }
+  } else {
+    EventUtils.synthesizeKey(forwardKey, { ctrlKey: true }, win);
+    assertFocus({ index: 1 }, "Ctrl+Forward to second item");
+    assertSelection([0], "First item remains selected on Ctrl+Forward");
+
+    EventUtils.synthesizeKey(forwardKey, { ctrlKey: true }, win);
+    assertFocus({ index: 2 }, "Ctrl+Forward to third item");
+    assertSelection([0], "First item remains selected on Ctrl+Forward");
+
+    EventUtils.synthesizeKey(backwardKey, { ctrlKey: true }, win);
+    assertFocus({ index: 1 }, "Ctrl+Backward to second item");
+    assertSelection([0], "First item remains selected on Ctrl+Backward");
+
+    EventUtils.synthesizeKey(backwardKey, { ctrlKey: true }, win);
+    assertFocus({ index: 0 }, "Ctrl+Backward to first item");
+    assertSelection([0], "First item remains selected on Ctrl+Backward");
+
+    EventUtils.synthesizeKey("KEY_End", { ctrlKey: true }, win);
+    assertFocus({ index: 2 }, "Ctrl+End to third item");
+    assertSelection([0], "First item remains selected on Ctrl+End");
+
+    EventUtils.synthesizeKey(backwardKey, {}, win);
+    assertFocus({ index: 1 }, "Backward to second item");
+    assertSelection([1], "Selection moves with focus when not pressing Ctrl");
+
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true }, win);
+    assertFocus({ index: 0 }, "Ctrl+Home to first item");
+    assertSelection([1], "Second item remains selected on Ctrl+Home");
+
+    // Does nothing if combined with Shift.
+    for (let key of [backwardKey, forwardKey, "KEY_Home", "KEY_End"]) {
+      info(`Pressing Ctrl+Shift+${key} on "${model}" model widget`);
+      EventUtils.synthesizeKey(key, { ctrlKey: true, shiftKey: true }, win);
+      assertFocus({ index: 0 }, "First item is still focused");
+      assertSelection([1], "Second item is still selected");
+    }
+
+    // Even if focus remains the same, the selection is still updated if we
+    // don't press Ctrl.
+    EventUtils.synthesizeKey(backwardKey, {}, win);
+    assertFocus({ index: 0 }, "Focus remains on first item");
+    assertSelection(
+      [0],
+      "Selection moves to the first item since Ctrl was not pressed"
+    );
+  }
+}
+
+// Navigating with keyboard will move focus, and possibly selection.
+add_task(function test_keyboard_navigation() {
+  for (let model of selectionModels) {
+    subtest_keyboard_navigation(model, "top-to-bottom", {
+      forward: "KEY_ArrowDown",
+      backward: "KEY_ArrowUp",
+    });
+    subtest_keyboard_navigation(model, "right-to-left", {
+      forward: "KEY_ArrowLeft",
+      backward: "KEY_ArrowRight",
+    });
+    subtest_keyboard_navigation(model, "left-to-right", {
+      forward: "KEY_ArrowRight",
+      backward: "KEY_ArrowLeft",
+    });
+  }
+});
+
+/**
+ * A method to scroll the widget.
+ *
+ * @callback ScrollMethod
+ * @param {number} pos - The position/offset to scroll to.
+ */
+/**
+ * The position of an element, relative to the layout of the widget.
+ *
+ * @typedef {object} StartEndPositions
+ * @property {number} start - The starting position of the element in the
+ *   direction of the widget's layout. The value should be a pixel offset
+ *   from some fixed point, such that a higher value indicates an element
+ *   further from the start of the widget.
+ * @property {number} end - The ending position of the element in the
+ *   direction of the widget's layout. This should use the same fixed point
+ *   as the start.
+ * @property {number} xStart - An X position in the client coordinates that
+ *   points to the inside of the element, close to the starting corner. I.e.
+ *   the block-start and inline-start.
+ * @property {number} yStart - A Y position in the client coordinates that
+ *   points to the inside of the element, close to the starting corner.
+ * @property {number} xEnd - An X position in the client coordinates that
+ *   points to the inside of the element, close to the ending corner. I.e.
+ *   the block-end and inline-end.
+ * @property {number} yEnd - A Y position in the client coordinates that
+ *   points to the inside of the element, close to the ending corner.
+ */
+/**
+ * A method to return the starting and ending positions of the bounding
+ * client rectangle of an element.
+ *
+ * @callback GetStartEndMethod
+ * @param {DOMRect} rect - The rectangle to get the positions of.
+ * @returns {object} positions
+/**
+ * Test page navigation for the given direction.
+ *
+ * @param {string} model - The selection model to use on the widget.
+ * @param {string} direction - The direction of the widget layout.
+ * @param {object} details - Details about the direction.
+ * @param {string} details.sizeName - The CSS style name that controls the
+ *   widget size in the direction of widget layout.
+ * @param {string} details.forwardKey - The key to press to move forward one
+ *   item.
+ * @param {string} details.backwardKey - The key to press to move backward
+ *   one item.
+ * @param {ScrollMethod} details.scrollTo - A method to call to scroll the
+ *   widget.
+ * @param {GetStartEndMethod} details.getStartEnd - A method to get the
+ *   positioning of an element.
+ */
+function subtest_page_navigation(model, direction, details) {
+  let { sizeName, forwardKey, backwardKey, scrollTo, getStartEnd } = details;
+  function getStartEndBoundary(element) {
+    return getStartEnd(element.getBoundingClientRect());
+  }
+  function assertInView(expect, msg) {
+    let { first, firstClipped, last, lastClipped } = expect;
+    if (!firstClipped) {
+      firstClipped = 0;
+    }
+    if (!lastClipped) {
+      lastClipped = 0;
+    }
+    let { start: viewStart, end: viewEnd } = getStartEndBoundary(widget);
+    // The widget has a 1px border that should not contribute to the view
+    // size.
+    viewStart += 1;
+    viewEnd -= 1;
+    let firstStart = getStartEndBoundary(
+      widget.items[expect.first].element
+    ).start;
+    Assert.equal(
+      firstStart,
+      viewStart - firstClipped,
+      `Item ${first} should be at the start of the view (${viewStart}) clipped by ${firstClipped}: ${msg}`
+    );
+    if (expect.first > 0) {
+      Assert.lessOrEqual(
+        getStartEndBoundary(widget.items[expect.first - 1].element).end,
+        viewStart,
+        `Item ${expect.first - 1} should be out of view: ${msg}`
+      );
+    }
+    let lastEnd = getStartEndBoundary(widget.items[expect.last].element).end;
+    Assert.equal(
+      lastEnd,
+      viewEnd + lastClipped,
+      `Item ${last} should be at the end of the view (${viewEnd}) clipped by ${lastClipped}: ${msg}`
+    );
+    if (expect.last < widget.items.length - 1) {
+      Assert.greaterOrEqual(
+        getStartEndBoundary(widget.items[expect.last + 1].element).start,
+        viewEnd,
+        `Item ${expect.last + 1} should be out of view: ${msg}`
+      );
+    }
+  }
+  reset({ model, direction });
+  widget.addItems(
+    0,
+    range(0, 70).map(i => `add-${i}`)
+  );
+  let { start: itemStart, end: itemEnd } = getStartEndBoundary(
+    widget.items[0].element
+  );
+  Assert.equal(itemEnd - itemStart, 30, "Expected item size");
+
+  assertInView({ first: 0, last: 19 }, "First 20 items in view");
+  stepFocus(true, { index: 0 }, "Move into widget");
+  assertSelection([0], "Fist item selected");
+  assertInView({ first: 0, last: 19 }, "First 20 items still in view");
+
+  // PageDown goes to the end of the current page.
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 0, last: 19 }, "First 20 item still in view");
+  assertFocus({ index: 19 }, "Focus moves to end of the page");
+  assertSelection([19], "Selection at end of the page");
+
+  // Pressing forward key will scroll the next item into view.
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  assertInView({ first: 1, last: 20 }, "Items 1 to 20 in view");
+  assertFocus({ index: 20 }, "Focus at end of the page");
+  assertSelection([20], "Selection at end of the page");
+
+  // Pressing backward will not change the view.
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  assertInView({ first: 1, last: 20 }, "Items 1 to 20 still in view");
+  assertFocus({ index: 19 }, "Focus moves up to 19");
+  assertSelection([19], "Selection moves up to 19");
+
+  // PageDown goes to the end of the current page.
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 1, last: 20 }, "Items 1 to 20 still in view");
+  assertFocus({ index: 20 }, "Focus moves to end of page");
+  assertSelection([20], "Selection moves to end of page");
+
+  // PageDown when already at the end of the page will move to the next
+  // page.
+  // The last index from the previous page (20) should still be visible at
+  // the top.
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 20, last: 39 }, "Items 20 to 39 in view");
+  assertFocus({ index: 39 }, "Focus moves to end of new page");
+  assertSelection([39], "Selection moves to end of new page");
+
+  // Another PageDown will do the same.
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 39, last: 58 }, "Items 39 to 58 in view");
+  assertFocus({ index: 58 }, "Focus moves to end of new page");
+  assertSelection([58], "Selection moves to end of new page");
+
+  // Last PageDown will take us to the end.
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 50, last: 69 }, "Last 20 items in view");
+  assertFocus({ index: 69 }, "Focus moves to end");
+  assertSelection([69], "Selection moves to end");
+
+  // Same thing in reverse with PageUp.
+  // PageUp goes to the start of the current page.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 50, last: 69 }, "Last 20 item still in view");
+  assertFocus({ index: 50 }, "Focus moves to start of the page");
+  assertSelection([50], "Selection at end of the page");
+
+  // Pressing backward will scroll the previous item into view.
+  EventUtils.synthesizeKey(backwardKey, {}, win);
+  assertInView({ first: 49, last: 68 }, "Items 49 to 68 in view");
+  assertFocus({ index: 49 }, "Focus at start of the page");
+  assertSelection([49], "Selection at start of the page");
+
+  // Pressing forward will not change the view.
+  EventUtils.synthesizeKey(forwardKey, {}, win);
+  assertInView({ first: 49, last: 68 }, "Items 49 to 68 still in view");
+  assertFocus({ index: 50 }, "Focus moves up to 50");
+  assertSelection([50], "Selection moves up to 50");
+
+  // PageUp goes to the start of the current page.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 49, last: 68 }, "Items 49 to 68 still in view");
+  assertFocus({ index: 49 }, "Focus moves to start of page");
+  assertSelection([49], "Selection moves to start of page");
+
+  // PageUp when already at the start of the page will move one page up.
+  // The first index from the previously shown page (49) should still be
+  // visible at the bottom.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 30, last: 49 }, "Items 30 to 49 in view");
+  assertFocus({ index: 30 }, "Focus moves to start of new page");
+  assertSelection([30], "Selection moves to start of new page");
+
+  // Another PageUp will do the same.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 11, last: 30 }, "Items 11 to 30 in view");
+  assertFocus({ index: 11 }, "Focus moves to start of new page");
+  assertSelection([11], "Selection moves to start of new page");
+
+  // Last PageUp will take us to the start.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 0, last: 19 }, "Items 0 to 19 in view");
+  assertFocus({ index: 0 }, "Focus moves to start");
+  assertSelection([0], "Selection moves to start");
+
+  // PageDown with focus above the view. Focus should move to the end of the
+  // visible page.
+  scrollTo(120);
+  assertInView({ first: 4, last: 23 }, "Items 4 to 23 in view");
+  assertFocus({ index: 0 }, "Focus remains above the view");
+  assertSelection([0], "Selection remains above the view");
+
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 4, last: 23 }, "Same items in view");
+  assertFocus({ index: 23 }, "Focus moves to the end of the visible page");
+  assertSelection([23], "Selection moves to the end of the visible page");
+
+  // PageDown with focus below the view. Focus should shift by one page,
+  // with the previous focus at the top of the page.
+  scrollTo(60);
+  assertInView({ first: 2, last: 21 }, "Items 2 to 21 in view");
+  assertFocus({ index: 23 }, "Focus remains below the view");
+  assertSelection([23], "Selection remains below the view");
+
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView(
+    { first: 23, last: 42 },
+    "View shifts by a page relative to focus"
+  );
+  assertFocus({ index: 42 }, "Focus moves to end of new page");
+  assertSelection([42], "Selection moves to end of new page");
+
+  // PageUp with focus below the view. Focus should move to the start of the
+  // visible page.
+  scrollTo(630);
+  assertInView({ first: 21, last: 40 }, "Items 21 to 40 in view");
+  assertFocus({ index: 42 }, "Focus remains below the view");
+  assertSelection([42], "Selection remains below the view");
+
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 21, last: 40 }, "Same items in view");
+  assertFocus({ index: 21 }, "Focus moves to the start of the visible page");
+  assertSelection([21], "Selection moves to the start of the visible page");
+
+  // PageUp with focus above the view. Focus should shift by one page, with
+  // the previous focus at the bottom of the page.
+  scrollTo(750);
+  assertInView({ first: 25, last: 44 }, "Items 25 to 44 in view");
+  assertFocus({ index: 21 }, "Focus remains above the view");
+  assertSelection([21], "Selection remains above the view");
+
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView(
+    { first: 2, last: 21 },
+    "View shifts by a page relative to focus"
+  );
+  assertFocus({ index: 2 }, "Focus moves to start of new page");
+  assertSelection([2], "Selection moves to start of new page");
+
+  // Test when view does not exactly fit items.
+  for (let sizeDiff of [0, 10, 15, 20]) {
+    info(`Reducing widget size by ${sizeDiff}px`);
+    widget.style[sizeName] = `${600 - sizeDiff}px`;
+
+    // When we reduce the size of the view by half an item or more, we
+    // reduce the page size from 20 to 19.
+    // NOTE: At each sizeDiff still fits strictly more than 19 items in its
+    // view.
+    let pageSize = sizeDiff < 15 ? 20 : 19;
+
+    // Make sure that Home and End keys scroll the view and clip the items
+    // as expected.
+    EventUtils.synthesizeKey("KEY_Home", {}, win);
+    assertInView(
+      { first: 0, last: 19, lastClipped: sizeDiff },
+      `Start of view with last item clipped by ${sizeDiff}px`
+    );
+    assertFocus({ index: 0 }, "First item has focus");
+    assertSelection([0], "First item is selected");
+
+    EventUtils.synthesizeKey("KEY_End", {}, win);
+    assertInView(
+      { first: 50, firstClipped: sizeDiff, last: 69 },
+      `End of view with first item clipped by ${sizeDiff}px`
+    );
+    assertFocus({ index: 69 }, "Last item has focus");
+    assertSelection([69], "Last item is selected");
+
+    for (let lastClipped of [0, 10, 15, 20]) {
+      info(`Testing PageDown with last item clipped by ${lastClipped}px`);
+      // Across all sizeDiff and lastClipped values we still want the last
+      // item to be index 21 clipped by lastClipped.
+      // E.g. when sizeDiff is 10 and lastClipped is 10, then the scroll
+      // will be 60px and the first item will be index 2 with no clipping.
+      // But when the sizeDiff is 10 and the lastClipped is 20, then the
+      // scroll will be 50px and the first item will be index 1 with 20px
+      // clipping.
+      let scroll = 60 + sizeDiff - lastClipped;
+      scrollTo(scroll);
+      let first = Math.floor(scroll / 30);
+      let firstClipped = scroll % 30;
+      clickWidgetItem(3, {});
+      assertInView(
+        { first, firstClipped, last: 21, lastClipped },
+        `Last item 21 in view clipped by ${lastClipped}px`
+      );
+      assertFocus({ index: 3 }, "Focus on item 3");
+      assertSelection([3], "Selection on item 3");
+
+      EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+      let pageEnd;
+      if (lastClipped < 15) {
+        // The last item is more than half in view, so counts as part of the
+        // page.
+        // NOTE: Index of the first item is always "2", even if it was "1"
+        // before the scroll, because the view fits (19, 20] items.
+        assertInView(
+          { first: 2, firstClipped: sizeDiff, last: 21 },
+          "Scrolls down to fully include the last item 21"
+        );
+        pageEnd = 21;
+      } else {
+        // The last item is half or less in view, so only the one before it
+        // counts as being part of the page.
+        assertInView(
+          { first, firstClipped, last: 21, lastClipped },
+          "Same view"
+        );
+        pageEnd = 20;
+      }
+      assertFocus({ index: pageEnd }, "Focus moves to pageEnd");
+      assertSelection([pageEnd], "Selection moves to pageEnd");
+
+      // Reset scroll to test scrolling when the focus is already at the
+      // pageEnd.
+      scrollTo(scroll);
+      assertInView(
+        { first, firstClipped, last: 21, lastClipped },
+        `Last item 21 in view clipped by ${lastClipped}px`
+      );
+
+      // PageDown again will move by a page. The new end of the page will be
+      // scrolled just into view at the bottom.
+      EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+      let newPageEnd = pageEnd + pageSize - 1;
+      // NOTE: If the previous pageEnd would fit mostly in view, then we
+      // expect the first item in the view to be this item. Otherwise, we
+      // expect it to be the one before, which will ensure the previous
+      // pageEnd is fully visible.
+      firstClipped = sizeDiff;
+      first = sizeDiff < 15 ? pageEnd : pageEnd - 1;
+      assertInView(
+        { first, firstClipped, last: newPageEnd },
+        "New page end scrolled into view, previous page end mostly visible"
+      );
+      assertFocus({ index: newPageEnd }, "Focus moves to end of new page");
+      assertSelection([newPageEnd], "Selection moves to end of new page");
+
+      // PageUp reverses the focus.
+      // We don't test the the view since that is handled lower down.
+      EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+      assertFocus({ index: pageEnd }, "Focus returns to pageEnd");
+      assertSelection([pageEnd], "Selection returns to pageEnd");
+    }
+
+    for (let firstClipped of [0, 10, 15, 20]) {
+      // Across all sizeDiff and firstClipped values we still want the first
+      // item to be index 24 clipped by firstClipped.
+      // E.g. when sizeDiff is 10 and firstClipped is 10, then the scroll
+      // will be 730px and the last item will be index 44 with no clipping.
+      // But when the sizeDiff is 10 and the firstClipped is 0, then the
+      // scroll will be 720px and the last item will be index 43 with 10px
+      // clipping.
+      info(`Testing PageUp with first item clipped by ${firstClipped}px`);
+      scrollTo(720 + firstClipped);
+      let viewEnd = 720 + firstClipped + 600 - sizeDiff;
+      let last = Math.floor(viewEnd / 30);
+      let lastClipped = 30 - (viewEnd % 30);
+      clickWidgetItem(42, {});
+      assertInView(
+        { first: 24, firstClipped, last, lastClipped },
+        `First item 24 in view clipped by ${firstClipped}px`
+      );
+      assertFocus({ index: 42 }, "Focus on item 42");
+      assertSelection([42], "Selection on item 42");
+
+      EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+      let pageStart;
+      if (firstClipped < 15) {
+        // The first item is more than half in view, so counts as part of
+        // the page.
+        // NOTE: Index of the last item is always "43", even if it was "44"
+        // before the scroll, because the view fits (19, 20] items.
+        assertInView(
+          { first: 24, last: 43, lastClipped: sizeDiff },
+          "Scrolls up to fully include the first item 24"
+        );
+        pageStart = 24;
+      } else {
+        // The first item is half or less in view, so only the one after it
+        // counts as being part of the page.
+        assertInView(
+          { first: 24, firstClipped, last, lastClipped },
+          "Same view"
+        );
+        pageStart = 25;
+      }
+      assertFocus({ index: pageStart }, "Focus moves to pageStart");
+      assertSelection([pageStart], "Selection moves to pageStart");
+
+      // Reset scroll.
+      scrollTo(720 + firstClipped);
+      assertInView(
+        { first: 24, firstClipped, last, lastClipped },
+        `First item 24 in view clipped by ${firstClipped}px`
+      );
+
+      // PageUp again will move by a page. The new start of the page will be
+      // scrolled just into view at the top.
+      EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+      let newPageStart = pageStart - pageSize + 1;
+      // NOTE: If the previous pageStart would fit mostly in view, then we
+      // expect the last item in the view to be this item. Otherwise, we
+      // expect it to be the one after, which will ensure the previous
+      // pageStart is fully visible.
+      lastClipped = sizeDiff;
+      last = sizeDiff < 15 ? pageStart : pageStart + 1;
+      assertInView(
+        { first: newPageStart, last, lastClipped },
+        "New page end scrolled into view, previous page end mostly visible"
+      );
+      assertFocus({ index: newPageStart }, "Focus moves to start of new page");
+      assertSelection([newPageStart], "Selection moves to start of new page");
+
+      // PageDown reverses the focus.
+      // We don't test the the view since that is handled further up.
+      EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+      assertFocus({ index: pageStart }, "Focus returns to pageStart");
+      assertSelection([pageStart], "Selection returns to pageStart");
+    }
+  }
+
+  // When widget only fits 1 visible item or less.
+  for (let size of [10, 20, 30, 45, 50]) {
+    info(`Resizing widget to ${size}px`);
+    widget.style[sizeName] = `${size}px`;
+
+    scrollTo(600);
+    // When the view size is less than the size of an item, we cannot always
+    // click the center of the item, so we need to click the start instead.
+    let { xStart, yStart } = getStartEndBoundary(widget.items[20].element);
+    EventUtils.synthesizeMouseAtPoint(xStart, yStart, {}, win);
+    let last = size > 30 ? 21 : 20;
+    let lastClipped = size > 30 ? 60 - size : 30 - size;
+    assertInView({ first: 20, last, lastClipped }, "Small number of items");
+    assertFocus({ index: 20 }, "Focus on item 20");
+    assertSelection([20], "Item 20 selected");
+
+    EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+    if (size <= 45) {
+      // Only 1 or 0 items fit on the page, so does nothing.
+      assertInView({ first: 20, last, lastClipped }, "Same view");
+      assertFocus({ index: 20 }, "Same focus");
+      assertSelection([20], "Same selected");
+    } else {
+      // 2 items fit visibly on the page, so acts as normal.
+      assertInView(
+        { first: 20, firstClipped: lastClipped, last: 21 },
+        "Last item scrolled into view"
+      );
+      assertFocus({ index: 21 }, "Focus increases by one");
+      assertSelection([21], "Selected moves to focus");
+    }
+
+    scrollTo(660 - size);
+    let { xEnd, yEnd } = getStartEndBoundary(widget.items[21].element);
+    EventUtils.synthesizeMouseAtPoint(xEnd, yEnd, {}, win);
+    let first = size > 30 ? 20 : 21;
+    let firstClipped = size > 30 ? 60 - size : 30 - size;
+    assertInView({ first, firstClipped, last: 21 }, "Small number of items");
+    assertFocus({ index: 21 }, "Focus on item 21");
+    assertSelection([21], "Item 21 selected");
+
+    EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+    if (size <= 45) {
+      // Only 1 or 0 items fit on the page, so does nothing.
+      assertInView({ first, firstClipped, last: 21 }, "Same view");
+      assertFocus({ index: 21 }, "Same focus");
+      assertSelection([21], "Same selected");
+    } else {
+      // 2 items fit visibly on the page, so acts as normal.
+      assertInView(
+        { first: 20, last: 21, lastClipped: firstClipped },
+        "First item scrolled into view"
+      );
+      assertFocus({ index: 20 }, "Focus decreases by one");
+      assertSelection([20], "Selected moves to focus");
+    }
+  }
+  widget.style[sizeName] = null;
+
+  // Disable page navigation.
+  // This would be used when the item sizes or the page layout do not allow
+  // for page navigation, or if PageUp and PageDown should be used for something
+  // else.
+  widget.toggleAttribute("no-pages", true);
+
+  let gotKeys = [];
+  let keydownListener = event => {
+    gotKeys.push(event.key);
+  };
+  win.document.body.addEventListener("keydown", keydownListener);
+  scrollTo(600);
+  clickWidgetItem(20, {});
+  assertInView({ first: 20, last: 39 }, "Items 20 to 39 in view");
+  assertFocus({ index: 20 }, "First item focused");
+  assertSelection([20], "First item selected");
+
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 20, last: 39 }, "Same view");
+  assertFocus({ index: 20 }, "Same focus");
+  assertSelection([20], "Same selected");
+  Assert.deepEqual(gotKeys, ["PageUp"], "PageUp reaches document body");
+  gotKeys = [];
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 20, last: 39 }, "Same view");
+  assertFocus({ index: 20 }, "Same focus");
+  assertSelection([20], "Same selected");
+  Assert.deepEqual(gotKeys, ["PageDown"], "PageDown reaches document body");
+  gotKeys = [];
+
+  clickWidgetItem(39, {});
+  assertInView({ first: 20, last: 39 }, "Items 20 to 39 in view");
+  assertFocus({ index: 39 }, "Last item focused");
+  assertSelection([39], "Last item selected");
+
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertInView({ first: 20, last: 39 }, "Same view");
+  assertFocus({ index: 39 }, "Same focus");
+  assertSelection([39], "Same selected");
+  Assert.deepEqual(gotKeys, ["PageUp"], "PageUp reaches document body");
+  gotKeys = [];
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertInView({ first: 20, last: 39 }, "Same view");
+  assertFocus({ index: 39 }, "Same focus");
+  assertSelection([39], "Same selected");
+  Assert.deepEqual(gotKeys, ["PageDown"], "PageDown reaches document body");
+  gotKeys = [];
+
+  widget.removeAttribute("no-pages");
+
+  // With page navigation enabled key-presses do not reach the document body.
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  Assert.deepEqual(gotKeys, [], "No key reaches document body");
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  Assert.deepEqual(gotKeys, [], "No key reaches document body");
+
+  win.document.body.removeEventListener("keydown", keydownListener);
+
+  // Test with modifiers.
+  for (let { shiftKey, ctrlKey } of [
+    { shiftKey: true, ctrlKey: true },
+    { shiftKey: false, ctrlKey: true },
+    { shiftKey: true, ctrlKey: false },
+  ]) {
+    info(
+      `Pressing ${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}PageUp/Down`
+    );
+    EventUtils.synthesizeKey("KEY_Home", {}, win);
+    EventUtils.synthesizeKey(forwardKey, {}, win);
+    assertInView({ first: 0, last: 19 }, "First 20 items in view");
+    assertFocus({ index: 1 }, "Item 1 has focus");
+    assertSelection([1], "Item 1 is selected");
+
+    EventUtils.synthesizeKey("KEY_PageDown", { ctrlKey, shiftKey }, win);
+    assertInView({ first: 0, last: 19 }, "Same view");
+    if (
+      (ctrlKey && shiftKey) ||
+      model == "focus" ||
+      (model == "browse" && shiftKey)
+    ) {
+      // Does nothing.
+      assertFocus({ index: 1 }, "Same focus");
+      assertSelection([1], "Same selected");
+      // Move focus to the end of the view.
+      clickWidgetItem(19, {});
+      assertFocus({ index: 19 }, "Focus at end of page");
+      assertSelection([19], "Selected at end of page");
+    } else {
+      assertFocus({ index: 19 }, "Focus moves to end of page");
+      if (ctrlKey) {
+        // Splits focus from selected.
+        assertSelection([1], "Same selected");
+      } else {
+        assertSelection(range(1, 19), "Range selection from 1 to 19");
+      }
+    }
+    // And again, with focus at the end of the page.
+    EventUtils.synthesizeKey("KEY_PageDown", { ctrlKey, shiftKey }, win);
+    if (
+      (ctrlKey && shiftKey) ||
+      model == "focus" ||
+      (model == "browse" && shiftKey)
+    ) {
+      // Does nothing.
+      assertInView({ first: 0, last: 19 }, "Same view");
+      assertFocus({ index: 19 }, "Same focus");
+      assertSelection([19], "Same selected");
+    } else {
+      assertInView({ first: 19, last: 38 }, "View scrolls to focus");
+      assertFocus({ index: 38 }, "Focus moves to end of new page");
+      if (ctrlKey) {
+        // Splits focus from selected.
+        assertSelection([1], "Same selected");
+      } else {
+        assertSelection(range(1, 38), "Range selection from 1 to 38");
+      }
+    }
+
+    EventUtils.synthesizeKey("KEY_End", {}, win);
+    EventUtils.synthesizeKey(backwardKey, {}, win);
+    assertInView({ first: 50, last: 69 }, "Last 20 items in view");
+    assertFocus({ index: 68 }, "Item 68 has focus");
+    assertSelection([68], "Item 68 is selected");
+
+    EventUtils.synthesizeKey("KEY_PageUp", { ctrlKey, shiftKey }, win);
+    assertInView({ first: 50, last: 69 }, "Same view");
+    if (
+      (ctrlKey && shiftKey) ||
+      model == "focus" ||
+      (model == "browse" && shiftKey)
+    ) {
+      // Does nothing.
+      assertFocus({ index: 68 }, "Same focus");
+      assertSelection([68], "Same selected");
+      // Move focus to the end of the view.
+      clickWidgetItem(50, {});
+      assertFocus({ index: 50 }, "Focus at start of page");
+      assertSelection([50], "Selected at start of page");
+    } else {
+      assertFocus({ index: 50 }, "Focus moves to start of page");
+      if (ctrlKey) {
+        // Splits focus from selected.
+        assertSelection([68], "Same selected");
+      } else {
+        assertSelection(range(50, 19), "Range selection from 50 to 68");
+      }
+    }
+    // And again, with focus at the start of the page.
+    EventUtils.synthesizeKey("KEY_PageUp", { ctrlKey, shiftKey }, win);
+    if (
+      (ctrlKey && shiftKey) ||
+      model == "focus" ||
+      (model == "browse" && shiftKey)
+    ) {
+      // Does nothing.
+      assertInView({ first: 50, last: 69 }, "Same view");
+      assertFocus({ index: 50 }, "Same focus");
+      assertSelection([50], "Same selected");
+    } else {
+      assertInView({ first: 31, last: 50 }, "View scrolls to focus");
+      assertFocus({ index: 31 }, "Focus moves to start of new page");
+      if (ctrlKey) {
+        // Splits focus from selected.
+        assertSelection([68], "Same selected");
+      } else {
+        assertSelection(range(31, 38), "Range selection from 31 to 68");
+      }
+    }
+  }
+
+  // Does nothing with an empty widget.
+  reset({ model, direction });
+  stepFocus(true, { element: widget }, "Focus on empty widget");
+  assertState([], "Empty");
+  EventUtils.synthesizeKey("KEY_PageDown", {}, win);
+  assertFocus({ element: widget }, "No change in focus");
+  assertState([], "Empty");
+  EventUtils.synthesizeKey("KEY_PageUp", {}, win);
+  assertFocus({ element: widget }, "No change in focus");
+  assertState([], "Empty");
+}
+
+// Test that pressing PageUp or PageDown shifts the view according to the
+// visible items.
+add_task(function test_page_navigation() {
+  for (let model of selectionModels) {
+    subtest_page_navigation(model, "top-to-bottom", {
+      sizeName: "height",
+      forwardKey: "KEY_ArrowDown",
+      backwardKey: "KEY_ArrowUp",
+      scrollTo: pos => {
+        widget.scrollTop = pos;
+      },
+      getStartEnd: rect => {
+        return {
+          start: rect.top,
+          end: rect.bottom,
+          xStart: rect.right - 1,
+          xEnd: rect.left + 1,
+          yStart: rect.top + 1,
+          yEnd: rect.bottom - 1,
+        };
+      },
+    });
+    subtest_page_navigation(model, "right-to-left", {
+      sizeName: "width",
+      forwardKey: "KEY_ArrowLeft",
+      backwardKey: "KEY_ArrowRight",
+      scrollTo: pos => {
+        widget.scrollLeft = -pos;
+      },
+      getStartEnd: rect => {
+        return {
+          start: -rect.right,
+          end: -rect.left,
+          xStart: rect.right - 1,
+          xEnd: rect.left + 1,
+          yStart: rect.top + 1,
+          yEnd: rect.bottom - 1,
+        };
+      },
+    });
+    subtest_page_navigation(model, "left-to-right", {
+      sizeName: "width",
+      forwardKey: "KEY_ArrowRight",
+      backwardKey: "KEY_ArrowLeft",
+      scrollTo: pos => {
+        widget.scrollLeft = pos;
+      },
+      getStartEnd: rect => {
+        return {
+          start: rect.left,
+          end: rect.right,
+          xStart: rect.left + 1,
+          xEnd: rect.right - 1,
+          yStart: rect.top + 1,
+          yEnd: rect.bottom - 1,
+        };
+      },
+    });
+  }
+});
+
+// Using Space to select items.
+add_task(function test_space_selection() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+
+    stepFocus(true, { index: 0 }, "Move focus to first item");
+    assertSelection([0], "First item is selected");
+
+    // Selecting an already selected item does nothing.
+    EventUtils.synthesizeKey(" ", {}, win);
+    assertFocus({ index: 0 }, "First item still has focus");
+    assertSelection([0], "First item is still selected");
+
+    if (model == "focus") {
+      // Just move to second item as set up for the loop.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    } else {
+      // Selecting a non-selected item will move selection to it.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([0], "First item is still selected");
+      EventUtils.synthesizeKey(" ", {}, win);
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([1], "Second item becomes selected");
+    }
+
+    // Ctrl + Space will toggle the selection if multi-selection is supported.
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    if (model == "focus") {
+      // Did nothing.
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([1], "Second item is still selected");
+    } else if (model == "browse") {
+      // Did nothing.
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([1], "Second item is still selected");
+      // Make sure nothing happens when on a non-selected item as well.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([1], "Second item is still selected");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item still has focus");
+      assertSelection([1], "Second item is still selected");
+      // Restore the previous state.
+      EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    } else {
+      // Unselected the item.
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([], "Second item was un-selected");
+      // Toggle again.
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([1], "Second item was re-selected");
+
+      // Do on another index.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 3 }, "Fourth item has focus");
+      assertSelection([1], "Second item is still selected");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 3 }, "Fourth item still has focus");
+      assertSelection([1, 3], "Fourth item becomes selected as well");
+
+      // Move to third without clearing.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([1, 3], "Fourth and second item remain selected");
+
+      // Merge the two ranges together.
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item still has focus");
+      assertSelection([1, 2, 3], "Third item becomes selected");
+
+      // Shrink the range at the end.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 3 }, "Fourth item has focus");
+      assertSelection([1, 2, 3], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 3 }, "Fourth item still has focus");
+      assertSelection([1, 2], "Fourth item unselected");
+
+      // Shrink the range at the start.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([1, 2], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([2], "Second item unselected");
+
+      // No selection.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([2], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item still has focus");
+      assertSelection([], "Third item unselected");
+
+      // Using arrow keys without modifier will re-introduce a single selection.
+      EventUtils.synthesizeKey("KEY_ArrowRight");
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([1], "Second item becomes selected");
+
+      // Grow range at the start.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 0 }, "First item has focus");
+      assertSelection([1], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 0 }, "First item still has focus");
+      assertSelection([0, 1], "First item becomes selected");
+
+      // Grow range at the end.
+      EventUtils.synthesizeKey("KEY_End", { ctrlKey: true }, win);
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([0, 1], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item still has focus");
+      assertSelection([0, 1, 2], "Third item becomes selected");
+
+      // Split the range in half.
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([0, 1, 2], "Same selection");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([0, 2], "Second item unselected");
+
+      // Pressing Space without a modifier clears the multi-selection.
+      EventUtils.synthesizeKey(" ", {}, win);
+    }
+
+    // Make sure we are in the expected shared state between models.
+    assertFocus({ index: 1 }, "Second item has focus");
+    assertSelection([1], "Second item is selected");
+
+    // Shift + Space will do nothing.
+    for (let ctrlKey of [false, true]) {
+      info(`Pressing ${ctrlKey ? "Ctrl+" : ""}Shift+space on item`);
+      // On selected item.
+      EventUtils.synthesizeKey(" ", { ctrlKey, shiftKey: true }, win);
+      assertFocus({ index: 1 }, "Second item still has focus");
+      assertSelection([1], "Second item is still selected");
+
+      if (model == "focus") {
+        continue;
+      }
+
+      // On non-selected item.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Third item has focus");
+      assertSelection([1], "Second item is still selected");
+      EventUtils.synthesizeKey(" ", { ctrlKey, shiftKey: true }, win);
+      assertFocus({ index: 2 }, "Third item still has focus");
+      assertSelection([1], "Second item is still selected");
+
+      // Restore for next loop.
+      EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+      assertFocus({ index: 1 }, "Second item has focus");
+      assertSelection([1], "Second item is selected");
+    }
+  }
+});
+
+// Clicking an item will focus and select it.
+add_task(function test_clicking_items() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+    widget.addItems(0, [
+      "First",
+      "Second",
+      "Third",
+      "Fourth",
+      "Fifth",
+      "Sixth",
+      "Seventh",
+      "Eighth",
+    ]);
+
+    assertFocus({ element: before }, "Focus initially outside widget");
+    assertSelection([], "No initial selection");
+
+    // Focus moves into widget, onto the clicked item.
+    clickWidgetItem(1, {});
+    assertFocus({ index: 1 }, "Focus clicked second item");
+    assertSelection([1], "Selected clicked second item");
+
+    // Focus moves to different item.
+    clickWidgetItem(2, {});
+    assertFocus({ index: 2 }, "Focus clicked third item");
+    assertSelection([2], "Selected clicked third item");
+
+    // Click same item.
+    clickWidgetItem(2, {});
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([2], "Selected remains on third item");
+
+    // Focus outside widget, focus moves but selection remains.
+    before.focus();
+    assertFocus({ element: before }, "Focus outside widget");
+    assertSelection([2], "Selected remains on third item");
+
+    // Clicking same item will return focus to it.
+    clickWidgetItem(2, {});
+    assertFocus({ index: 2 }, "Focus returns to third item");
+    assertSelection([2], "Selected remains on third item");
+
+    // Do the same, but return to a different item.
+    before.focus();
+    assertFocus({ element: before }, "Focus outside widget");
+    assertSelection([2], "Selected remains on third item");
+
+    // Clicking same item will return focus to it.
+    clickWidgetItem(1, {});
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([1], "Selected moves to second item");
+
+    // Switching to keyboard works.
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    assertFocus({ index: 0 }, "Focus moves to first item");
+    assertSelection([0], "Selected moves to first item");
+
+    // Returning to mouse works.
+    clickWidgetItem(1, {});
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([1], "Selected moves to second item");
+
+    // Toggle selection with Ctrl+Click.
+    clickWidgetItem(3, { ctrlKey: true });
+    if (model == "browse-multi") {
+      assertFocus({ index: 3 }, "Focus moves to fourth item");
+      assertSelection([1, 3], "Fourth item is selected");
+
+      clickWidgetItem(7, { ctrlKey: true });
+      assertFocus({ index: 7 }, "Focus moves to eighth item");
+      assertSelection([1, 3, 7], "Eighth item selected");
+
+      // Extend selection range by one after.
+      clickWidgetItem(4, { ctrlKey: true });
+      assertFocus({ index: 4 }, "Focus moves to fifth item");
+      assertSelection([1, 3, 4, 7], "Fifth item is selected");
+
+      // Extend selection range by one before.
+      clickWidgetItem(6, { ctrlKey: true });
+      assertFocus({ index: 6 }, "Focus moves to seventh item");
+      assertSelection([1, 3, 4, 6, 7], "Seventh item is selected");
+
+      // Merge the two ranges together.
+      clickWidgetItem(5, { ctrlKey: true });
+      assertFocus({ index: 5 }, "Focus moves to sixth item");
+      assertSelection([1, 3, 4, 5, 6, 7], "Sixth item is selected");
+
+      // Reverse by unselecting.
+      clickWidgetItem(7, { ctrlKey: true });
+      assertFocus({ index: 7 }, "Focus moves to eight item");
+      assertSelection([1, 3, 4, 5, 6], "Eight item is unselected");
+
+      clickWidgetItem(3, { ctrlKey: true });
+      assertFocus({ index: 3 }, "Focus moves to fourth item");
+      assertSelection([1, 4, 5, 6], "Fourth item is unselected");
+
+      // Split a range.
+      clickWidgetItem(5, { ctrlKey: true });
+      assertFocus({ index: 5 }, "Focus moves to sixth item");
+      assertSelection([1, 4, 6], "Sixth item is unselected");
+
+      clickWidgetItem(1, { ctrlKey: true });
+      assertFocus({ index: 1 }, "Focus moves to second item");
+      assertSelection([4, 6], "Second item is unselected");
+
+      clickWidgetItem(6, { ctrlKey: true });
+      assertFocus({ index: 6 }, "Focus moves to seventh item");
+      assertSelection([4], "Seventh item is unselected");
+
+      // Can get zero-selection.
+      clickWidgetItem(4, { ctrlKey: true });
+      assertFocus({ index: 4 }, "Focus moves to fifth item");
+      assertSelection([], "None selected");
+
+      // Get into the same state as the other case.
+      clickWidgetItem(1, { ctrlKey: true });
+      assertFocus({ index: 1 }, "Focus moves to second item");
+      assertSelection([1], "Second item is selected");
+    } else {
+      // No multi-selection, so does nothing.
+      assertFocus({ index: 1 }, "Focus remains on second item");
+      assertSelection([1], "Second item remains selected");
+    }
+
+    // Ctrl+Shift+Click does nothing in all models.
+    clickWidgetItem(2, { ctrlKey: true, shiftKey: true });
+    assertFocus({ index: 1 }, "Focus remains on second item");
+    assertSelection([1], "Second item remains selected");
+  }
+});
+
+add_task(function test_select_all() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth", "Fifth"]);
+
+    stepFocus(true, { index: 0 }, "Move focus to first item");
+    assertSelection([0], "First item is selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    assertFocus({ index: 1 }, "Focus on second item");
+    assertSelection([1], "Second item is selected");
+
+    selectAllShortcut();
+
+    assertFocus({ index: 1 }, "Focus remains on second item");
+    if (model == "browse-multi") {
+      assertSelection([0, 1, 2, 3, 4], "All items are selected");
+      // Can insert a hole.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Focus moves to third item");
+      assertSelection([0, 1, 2, 3, 4], "All items are still selected");
+      EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+      assertFocus({ index: 2 }, "Focus remains on third item");
+      assertSelection([0, 1, 3, 4], "Third item was unselected");
+      EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+      assertFocus({ index: 1 }, "Focus moves to the second item");
+      assertSelection([0, 1, 3, 4], "Selection remains the same");
+      EventUtils.synthesizeKey(" ", {}, win);
+      assertFocus({ index: 1 }, "Focus remains on the second item");
+      assertSelection([1], "Only the second item is selected");
+    } else {
+      // Did nothing.
+      assertSelection([1], "Second item is still selected");
+    }
+
+    // Wrong platform modifier does nothing.
+    EventUtils.synthesizeKey(
+      "a",
+      AppConstants.platform == "macosx" ? { ctrlKey: true } : { metaKey: true },
+      win
+    );
+    assertFocus({ index: 1 }, "Focus remains on second item");
+    assertSelection([1], "Second item still selected");
+  }
+});
+
+// Holding the shift key should perform a range selection if multi-selection is
+// supported by the model.
+add_task(function test_range_selection() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth", "Fifth"]);
+
+    stepFocus(true, { index: 0 }, "Move focus to first item");
+    assertSelection([0], "First item is selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+
+    assertFocus({ index: 2 }, "Focus on third item");
+    assertSelection([2], "Third item is selected");
+
+    // Nothing happens with Ctrl+Shift in any model.
+    EventUtils.synthesizeKey(
+      "KEY_ArrowLeft",
+      { shiftKey: true, ctrlKey: true },
+      win
+    );
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([2], "Only second item is selected");
+    EventUtils.synthesizeKey(
+      "KEY_ArrowRight",
+      { shiftKey: true, ctrlKey: true },
+      win
+    );
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([2], "Only second item is selected");
+
+    // With just Shift modifier.
+    if (model == "focus" || model == "browse") {
+      // No range selection.
+      EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+      assertFocus({ index: 2 }, "Focus remains on third item");
+      assertSelection([2], "Only second item is selected");
+
+      EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+      assertFocus({ index: 2 }, "Focus remains on third item");
+      assertSelection([2], "Only second item is selected");
+
+      clickWidgetItem(3, { shiftKey: true });
+      assertFocus({ index: 2 }, "Focus remains on third item");
+      assertSelection([2], "Only second item is selected");
+
+      clickWidgetItem(1, { shiftKey: true });
+      assertFocus({ index: 2 }, "Focus remains on third item");
+      assertSelection([2], "Only second item is selected");
+      continue;
+    }
+
+    // Range selection with shift key.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus on fourth item");
+    assertSelection([2, 3], "Select from third to fourth item");
+
+    // Reverse
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 2 }, "Focus on third item");
+    assertSelection([2], "Select from third to same item");
+
+    // Go back another step.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 1 }, "Focus on second item");
+    assertSelection([1, 2], "Third to second items are selected");
+
+    // Split focus from selection.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertFocus({ index: 2 }, "Focus on third item");
+    assertSelection([1, 2], "Third to second items are still selected");
+
+    // Back to range selection.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus on fourth item");
+    assertSelection([2, 3], "Third to fourth items are selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 4 }, "Focus on fifth item");
+    assertSelection([2, 3, 4], "Third to fifth items are selected");
+
+    // Moving without a modifier breaks the range.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    assertFocus({ index: 4 }, "Focus remains on final fifth item");
+    assertSelection([4], "Fifth item is selected");
+
+    // Again at the middle.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([3, 4], "Fifth to fourth items are selected");
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([2], "Only third item is selected");
+
+    // Home and End also work.
+    EventUtils.synthesizeKey("KEY_Home", { shiftKey: true }, win);
+    assertFocus({ index: 0 }, "Focus moves to first item");
+    assertSelection([0, 1, 2], "Up to third item is selected");
+
+    EventUtils.synthesizeKey("KEY_End", { shiftKey: true }, win);
+    assertFocus({ index: 4 }, "Focus moves to last item");
+    assertSelection([2, 3, 4], "Third item and above is selected");
+
+    // Ctrl+A breaks range selection sequence, so we no longer select around the
+    // third item when we go back to using Shift+Arrow.
+    selectAllShortcut();
+    assertFocus({ index: 4 }, "Focus remains on last item");
+    assertSelection([0, 1, 2, 3, 4], "All items are selected");
+    // The new shift+range will be from the focus index (the fifth item) rather
+    // than the third item used for the previous range.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([3, 4], "Fifth to fourth item are selected");
+
+    // Ctrl+Space also breaks range selection sequence.
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true }, win);
+    assertFocus({ index: 0 }, "Focus moves to first item");
+    assertSelection([3, 4], "Range selection remains");
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertFocus({ index: 0 }, "Focus still on first item");
+    assertSelection([0, 3, 4], "First item added to selection");
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([0, 1], "First to second item are selected");
+
+    // Same when unselecting.
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertFocus({ index: 1 }, "Focus remains on second item");
+    assertSelection([0], "Second item is no longer selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([1, 2], "Second to third item are selected");
+
+    // Same when using setItemSelected API
+    widget.setItemSelected(4, true);
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([1, 2, 4], "Fifth item becomes selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([2, 3], "Third to fourth item are selected");
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 4 }, "Focus moves to fifth item");
+    assertSelection([2, 3, 4], "Third to fifth item are selected");
+
+    widget.setItemSelected(3, false);
+    assertFocus({ index: 4 }, "Focus remains on fifth item");
+    assertSelection([2, 4], "Fourth item becomes unselected");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([3, 4], "Fifth to fourth item are selected");
+
+    // Even when the selection state does not change.
+    widget.setItemSelected(3, true);
+    assertFocus({ index: 3 }, "Focus remains on fourth item");
+    assertSelection([3, 4], "Same selection");
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([2, 3], "Fourth to third item are selected");
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([1, 2, 3], "Fourth to second item are selected");
+
+    widget.setItemSelected(4, false);
+    assertFocus({ index: 1 }, "Focus remains on second item");
+    assertSelection([1, 2, 3], "Same selection");
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([1, 2], "Second to third item are selected");
+
+    // Same when selecting with space (no modifier).
+    EventUtils.synthesizeKey(" ", {}, win);
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([2], "Third item is selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([2, 3], "Third to fourth item are selected");
+
+    // Same when using the selectSingleItem API.
+    widget.selectSingleItem(1);
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([1], "Second item is selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 0 }, "Focus moves to first item");
+    assertSelection([0, 1], "Second to first item are selected");
+
+    // If focus goes out and we return, the range origin is remembered.
+    stepFocus(true, { element: after }, "Move focus outside the widget");
+    assertSelection([0, 1], "Second to first item are still selected");
+    stepFocus(false, { index: 0 }, "Focus returns to the widget");
+    assertSelection([0, 1], "Second to first item are still selected");
+
+    EventUtils.synthesizeKey("KEY_End", { shiftKey: true }, win);
+    assertFocus({ index: 4 }, "Focus moves to last item");
+    assertSelection([1, 2, 3, 4], "Second to fifth item are selected");
+
+    // Clicking empty space does not clear it.
+    clickWidgetEmptySpace({});
+    assertFocus({ index: 4 }, "Focus remains on last item");
+    assertSelection([1, 2, 3, 4], "Second to fifth item are still selected");
+
+    // Shift+Click an item will use the same range origin established by the
+    // current selection.
+    clickWidgetItem(3, { shiftKey: true });
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([1, 2, 3], "Second to fourth item are selected");
+
+    // Clicking without the modifier breaks the range selection sequence.
+    clickWidgetItem(2, {});
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([2], "Only the third item is selected");
+
+    // Shift click will select between the third item and the the clicked item.
+    clickWidgetItem(4, { shiftKey: true });
+    assertFocus({ index: 4 }, "Focus moves to fifth item");
+    assertSelection([2, 3, 4], "Third to fifth item are selected");
+
+    // Reverse direction about the same point.
+    clickWidgetItem(0, { shiftKey: true });
+    assertFocus({ index: 0 }, "Focus moves to first item");
+    assertSelection([0, 1, 2], "Third to first item are selected");
+
+    // Ctrl+Click breaks the range selection sequence.
+    clickWidgetItem(1, { ctrlKey: true });
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([0, 2], "Second item is unselected");
+    clickWidgetItem(3, { shiftKey: true });
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([1, 2, 3], "Second to fourth item are selected");
+
+    // Same when Ctrl+Click on non-selected.
+    clickWidgetItem(4, { ctrlKey: true });
+    assertFocus({ index: 4 }, "Focus moves to fifth item");
+    assertSelection([1, 2, 3, 4], "Fifth item is selected");
+    clickWidgetItem(3, { shiftKey: true });
+    assertFocus({ index: 3 }, "Focus moves to fourth item");
+    assertSelection([3, 4], "Fifth to fourth item are selected");
+
+    // Selecting-all also breaks range selection sequence.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertFocus({ index: 2 }, "Focus moves to third item");
+    assertSelection([3, 4], "Same selection");
+
+    selectAllShortcut();
+    assertFocus({ index: 2 }, "Focus remains on third item");
+    assertSelection([0, 1, 2, 3, 4], "All items selected");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertFocus({ index: 1 }, "Focus moves to second item");
+    assertSelection([1, 2], "Third to second item selected");
+  }
+});
+
+// Adding items to widget with existing items, should not change the selected
+// item.
+add_task(function test_add_items_to_nonempty() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+    assertState([], "Empty");
+
+    widget.addItems(0, ["0-add"]);
+    stepFocus(true, { index: 0, text: "0-add" }, "Move focus to 0-add");
+    assertState([{ text: "0-add", selected: true, focused: true }], "One item");
+
+    // Add item after.
+    widget.addItems(1, ["1-add"]);
+    assertState(
+      [{ text: "0-add", selected: true, focused: true }, { text: "1-add" }],
+      "0-add still focused and selected"
+    );
+
+    // Add item before. 0-add moves to index 1.
+    widget.addItems(0, ["2-add"]);
+    assertState(
+      [
+        { text: "2-add" },
+        { text: "0-add", selected: true, focused: true },
+        { text: "1-add" },
+      ],
+      "0-add still focused and selected"
+    );
+
+    // Add several before.
+    widget.addItems(1, ["3-add", "4-add", "5-add"]);
+    assertState(
+      [
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+        { text: "0-add", selected: true, focused: true },
+        { text: "1-add" },
+      ],
+      "0-add still focused and selected"
+    );
+
+    // Key navigation works.
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    assertState(
+      [
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add", selected: true, focused: true },
+        { text: "0-add" },
+        { text: "1-add" },
+      ],
+      "5-add becomes focused and selected"
+    );
+
+    // With focus outside the widget.
+    reset({ model, direction: "right-to-left" });
+    assertState([], "Empty");
+
+    widget.addItems(0, ["0-add"]);
+    stepFocus(true, { index: 0 }, "Move focus to 0-add");
+    assertState([{ text: "0-add", selected: true, focused: true }], "One item");
+
+    stepFocus(true, { element: after }, "Move focus to after widget");
+    // Add after.
+    widget.addItems(1, ["1-add", "2-add"]);
+    assertState(
+      [{ text: "0-add", selected: true }, { text: "1-add" }, { text: "2-add" }],
+      "0-add still selected but not focused"
+    );
+    stepFocus(false, { index: 0 }, "Move focus back to 0-add");
+    assertState(
+      [
+        { text: "0-add", selected: true, focused: true },
+        { text: "1-add" },
+        { text: "2-add" },
+      ],
+      "0-add selected and focused"
+    );
+
+    stepFocus(false, { element: before }, "Move focus to before widget");
+    // Add before.
+    widget.addItems(0, ["3-add", "4-add"]);
+    assertState(
+      [
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add" },
+      ],
+      "0-add selected but not focused"
+    );
+    stepFocus(true, { index: 2 }, "Move focus back to 0-add");
+    assertState(
+      [
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "0-add", selected: true, focused: true },
+        { text: "1-add" },
+        { text: "2-add" },
+      ],
+      "0-add selected and focused"
+    );
+
+    // With focus separate from selection.
+    if (model == "focus") {
+      continue;
+    }
+
+    reset({ model, direction: "right-to-left" });
+    assertState([], "Empty");
+
+    widget.addItems(0, ["0-add", "1-add", "2-add"]);
+    assertState(
+      [{ text: "0-add" }, { text: "1-add" }, { text: "2-add" }],
+      "None selected or focused"
+    );
+    stepFocus(true, { index: 0 }, "Move focus to 0-add");
+
+    // With selection after focus.
+    EventUtils.synthesizeKey("KEY_End", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "1-add", focused: true },
+        { text: "2-add", selected: true },
+      ],
+      "Selection after focus"
+    );
+
+    // Add after both selection and focus.
+    widget.addItems(3, ["3-add"]);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "1-add", focused: true },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+      ],
+      "Same items selected and focused"
+    );
+
+    // Add before both selection and focus.
+    widget.addItems(1, ["4-add"]);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "4-add" },
+        { text: "1-add", focused: true },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+      ],
+      "Same items selected and focused"
+    );
+
+    // Before selection, after focus.
+    widget.addItems(3, ["5-add"]);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "4-add" },
+        { text: "1-add", focused: true },
+        { text: "5-add" },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+      ],
+      "Same items selected and focused"
+    );
+
+    // Swap selection to be before focus.
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "4-add", selected: true },
+        { text: "1-add" },
+        { text: "5-add", focused: true },
+        { text: "2-add" },
+        { text: "3-add" },
+      ],
+      "Selection before focus"
+    );
+
+    // After selection, before focus.
+    widget.addItems(2, ["6-add", "7-add", "8-add"]);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "4-add", selected: true },
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add" },
+        { text: "1-add" },
+        { text: "5-add", focused: true },
+        { text: "2-add" },
+        { text: "3-add" },
+      ],
+      "Same items selected and focused"
+    );
+
+    // With multi-selection.
+    if (model == "browse") {
+      continue;
+    }
+
+    reset({ model, direction: "right-to-left" });
+    assertState([], "Empty");
+
+    widget.addItems(0, ["0-add", "1-add", "2-add"]);
+    assertState(
+      [{ text: "0-add" }, { text: "1-add" }, { text: "2-add" }],
+      "None selected"
+    );
+    stepFocus(true, { index: 0 }, "Move focus to 0-add");
+
+    // Select all.
+    EventUtils.synthesizeKey("KEY_End", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true, focused: true },
+      ],
+      "All selected"
+    );
+
+    // Add after all.
+    widget.addItems(3, ["3-add", "4-add", "5-add"]);
+    assertState(
+      [
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true, focused: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Same range selected"
+    );
+
+    // Can continue shift selection to newly added item
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Range extended to new item"
+    );
+
+    // Add before all.
+    widget.addItems(0, ["6-add", "7-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Same range selected"
+    );
+
+    // Can continue shift selection about the "0-add" item.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true, focused: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Range extended backward"
+    );
+
+    // And change direction of shift selection range.
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "6-add", focused: true },
+        { text: "7-add" },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Focus moves to first item"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add", selected: true, focused: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Selection pivoted about 0-add"
+    );
+
+    // Add items in the middle of the range. Selection in the range is not added
+    // initially.
+    widget.addItems(2, ["8-add", "9-add", "10-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add", selected: true, focused: true },
+        { text: "8-add" },
+        { text: "9-add" },
+        { text: "10-add" },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Backward range selection with single gap"
+    );
+
+    // But continuing the shift selection will fill in the holes again.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "6-add", selected: true, focused: true },
+        { text: "7-add", selected: true },
+        { text: "8-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Backward range selection with no gap"
+    );
+
+    // Do the same but with a selection range moving forward and two holes.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "10-add", selected: true, focused: true },
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Forward range selection"
+    );
+
+    widget.addItems(3, ["11-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add" },
+        { text: "9-add", selected: true },
+        { text: "10-add", selected: true, focused: true },
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Forward range selection with one gap"
+    );
+
+    widget.addItems(5, ["12-add", "13-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add" },
+        { text: "9-add", selected: true },
+        { text: "12-add" },
+        { text: "13-add" },
+        { text: "10-add", selected: true, focused: true },
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Forward range selection with two gaps"
+    );
+
+    // Continuing the shift selection will fill in the holes.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "13-add", selected: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true, focused: true },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Extended range forward with no gaps"
+    );
+
+    // With multi-selection via toggling.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "13-add", selected: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Selected 2-add"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "13-add", focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "De-selected 13-add"
+    );
+
+    widget.addItems(6, ["14-add", "15-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "14-add" },
+        { text: "15-add" },
+        { text: "13-add", focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Same selected items"
+    );
+
+    widget.addItems(3, ["16-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "8-add", selected: true },
+        { text: "16-add" },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "14-add" },
+        { text: "15-add" },
+        { text: "13-add", focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add" },
+        { text: "2-add", selected: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "Same selected items"
+    );
+
+    // With select-all
+    selectAllShortcut();
+    assertState(
+      [
+        { text: "6-add", selected: true },
+        { text: "7-add", selected: true },
+        { text: "8-add", selected: true },
+        { text: "16-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "14-add", selected: true },
+        { text: "15-add", selected: true },
+        { text: "13-add", selected: true, focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add", selected: true },
+        { text: "4-add", selected: true },
+        { text: "5-add", selected: true },
+      ],
+      "All items selected"
+    );
+
+    // Added items do not become selected.
+    widget.addItems(4, ["17-add", "18-add"]);
+    assertState(
+      [
+        { text: "6-add", selected: true },
+        { text: "7-add", selected: true },
+        { text: "8-add", selected: true },
+        { text: "16-add", selected: true },
+        { text: "17-add" },
+        { text: "18-add" },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "14-add", selected: true },
+        { text: "15-add", selected: true },
+        { text: "13-add", selected: true, focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add", selected: true },
+        { text: "4-add", selected: true },
+        { text: "5-add", selected: true },
+      ],
+      "Added items not selected"
+    );
+
+    // Added items will be selected if we select-all again.
+    selectAllShortcut();
+    assertState(
+      [
+        { text: "6-add", selected: true },
+        { text: "7-add", selected: true },
+        { text: "8-add", selected: true },
+        { text: "16-add", selected: true },
+        { text: "17-add", selected: true },
+        { text: "18-add", selected: true },
+        { text: "11-add", selected: true },
+        { text: "9-add", selected: true },
+        { text: "12-add", selected: true },
+        { text: "14-add", selected: true },
+        { text: "15-add", selected: true },
+        { text: "13-add", selected: true, focused: true },
+        { text: "10-add", selected: true },
+        { text: "0-add", selected: true },
+        { text: "1-add", selected: true },
+        { text: "2-add", selected: true },
+        { text: "3-add", selected: true },
+        { text: "4-add", selected: true },
+        { text: "5-add", selected: true },
+      ],
+      "All items selected"
+    );
+  }
+});
+
+/**
+ * Test that pressing a key on a non-empty widget that has focus on itself will
+ * move to the expected index.
+ *
+ * @param {object} initialState - The initial state of the widget to set up.
+ * @param {string} initialState.model - The selection model to use.
+ * @param {string} initialState.direction - The layout direction of the widget.
+ * @param {number} initialState.numItems - The number of items in the widget.
+ * @param {Function} [initialState.scroll] - A method to call to scroll the
+ *   widget.
+ * @param {string} key - The key to press once the widget is set up.
+ * @param {number} index - The expected index for the item that will receive
+ *   focus after the key press.
+ */
+function subtest_keypress_on_focused_widget(initialState, key, index) {
+  let { model, direction, numItems, scroll } = initialState;
+  for (let ctrlKey of [false, true]) {
+    for (let shiftKey of [false, true]) {
+      info(
+        `Adding items to empty ${direction} widget and then pressing ${
+          ctrlKey ? "Ctrl+" : ""
+        }${shiftKey ? "Shift+" : ""}${key}`
+      );
+      reset({ model, direction });
+
+      stepFocus(true, { element: widget }, "Move focus onto empty widget");
+      widget.addItems(
+        0,
+        range(0, numItems).map(i => `add-${i}`)
+      );
+      scroll?.();
+
+      assertFocus(
+        { element: widget },
+        "Focus remains on the widget after adding items"
+      );
+      assertSelection([], "No items are selected yet");
+
+      EventUtils.synthesizeKey(key, { ctrlKey, shiftKey }, win);
+      if (
+        (ctrlKey && shiftKey) ||
+        (model == "browse" && shiftKey) ||
+        (model == "focus" && (ctrlKey || shiftKey))
+      ) {
+        // Does nothing.
+        assertFocus({ element: widget }, "Focus remains on widget");
+        assertSelection([], "No change in selection");
+        continue;
+      }
+
+      assertFocus({ index }, `Focus moves to ${index} after ${key}`);
+      if (ctrlKey) {
+        assertSelection([], `No selection if pressing Ctrl+${key}`);
+      } else if (shiftKey) {
+        assertSelection(
+          range(0, index + 1),
+          `Range selection from 0 to ${index} if pressing Shift+${key}`
+        );
+      } else {
+        assertSelection([index], `Item selected after ${key}`);
+      }
+    }
+  }
+}
+
+// If items are added to an empty widget that has focus, nothing happens
+// initially. Arrow keys will focus the first item.
+add_task(function test_add_items_to_empty_with_focus() {
+  for (let model of selectionModels) {
+    // Step navigation always takes us to the first item.
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_ArrowUp",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_ArrowDown",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "right-to-left", numItems: 3 },
+      "KEY_ArrowRight",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "right-to-left", numItems: 3 },
+      "KEY_ArrowLeft",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "left-to-right", numItems: 3 },
+      "KEY_ArrowLeft",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "left-to-right", numItems: 3 },
+      "KEY_ArrowRight",
+      0
+    );
+    // Home also takes us to the first item.
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_Home",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "right-to-left", numItems: 3 },
+      "KEY_Home",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "left-to-right", numItems: 3 },
+      "KEY_Home",
+      0
+    );
+    // End takes us to the last item.
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_End",
+      2
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "right-to-left", numItems: 3 },
+      "KEY_End",
+      2
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "left-to-right", numItems: 3 },
+      "KEY_End",
+      2
+    );
+    // PageUp and PageDown take us to the start or end of the visible page.
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_PageUp",
+      0
+    );
+    subtest_keypress_on_focused_widget(
+      { model, direction: "top-to-bottom", numItems: 3 },
+      "KEY_PageDown",
+      2
+    );
+    subtest_keypress_on_focused_widget(
+      {
+        model,
+        direction: "top-to-bottom",
+        numItems: 30,
+        scroll: () => {
+          widget.scrollTop = 270;
+        },
+      },
+      "KEY_PageUp",
+      9
+    );
+    subtest_keypress_on_focused_widget(
+      {
+        model,
+        direction: "top-to-bottom",
+        numItems: 30,
+        scroll: () => {
+          widget.scrollTop = 60;
+        },
+      },
+      "KEY_PageDown",
+      21
+    );
+
+    // Arrow keys in other directions do nothing.
+    reset({ model, direction: "top-to-bottom" });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second"]);
+    for (let key of ["KEY_ArrowRight", "KEY_ArrowLeft"]) {
+      EventUtils.synthesizeKey(key, {}, win);
+      assertFocus({ element: widget }, `Focus remains on widget after ${key}`);
+      assertSelection([], `No items become selected after ${key}`);
+    }
+
+    reset({ model, direction: "right-to-left" });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second"]);
+    for (let key of ["KEY_ArrowUp", "KEY_ArrowDown"]) {
+      EventUtils.synthesizeKey(key, {}, win);
+      assertFocus({ element: widget }, `Focus remains on widget after ${key}`);
+      assertSelection([], `No items become selected after ${key}`);
+    }
+
+    // Pressing Space does nothing.
+    reset({ model });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second"]);
+    for (let ctrlKey of [false, true]) {
+      for (let shiftKey of [false, true]) {
+        info(
+          `Pressing ${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}Space`
+        );
+        EventUtils.synthesizeKey(" ", {}, win);
+        assertFocus({ element: widget }, "Focus remains on widget after Space");
+        assertSelection([], "No items become selected after Space");
+      }
+    }
+
+    // Selecting all
+    reset({ model });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second", "Third"]);
+
+    selectAllShortcut();
+    assertFocus({ element: widget }, "Focus remains on the widget");
+    if (model == "browse-multi") {
+      assertSelection([0, 1, 2], "All items selected");
+    } else {
+      assertSelection([], "still no selection");
+    }
+
+    // Adding and then removing items does not set focus.
+    reset({ model });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+    widget.removeItems(2, 2);
+    assertState(
+      [{ text: "First" }, { text: "Second" }],
+      "No item focused or selected"
+    );
+    assertFocus({ element: widget }, "Focus remains on the widget");
+    widget.removeItems(0, 1);
+    assertState([{ text: "Second" }], "No item focused or selected");
+    assertFocus({ element: widget }, "Focus remains on the widget");
+
+    // Moving items does not set focus.
+    reset({ model });
+    stepFocus(true, { element: widget }, "Move focus onto empty widget");
+    widget.addItems(0, ["First", "Second", "Third", "Fourth"]);
+    widget.moveItems(1, 0, 2, false);
+    assertState(
+      [
+        { text: "Second" },
+        { text: "Third" },
+        { text: "First" },
+        { text: "Fourth" },
+      ],
+      "No item focused or selected"
+    );
+    assertFocus({ element: widget }, "Focus remains on the widget");
+    widget.moveItems(0, 1, 3, true);
+    assertState(
+      [
+        { text: "Fourth" },
+        { text: "Second" },
+        { text: "Third" },
+        { text: "First" },
+      ],
+      "No item focused or selected"
+    );
+    assertFocus({ element: widget }, "Focus remains on the widget");
+
+    // This does not effect clicking.
+    // NOTE: case where widget does not initially have focus on clicking is
+    // handled by test_initial_no_select_focus
+    for (let ctrlKey of [false, true]) {
+      for (let shiftKey of [false, true]) {
+        info(
+          `Adding items to empty focused widget and then ${
+            ctrlKey ? "Ctrl+" : ""
+          }${shiftKey ? "Shift+" : ""}Click`
+        );
+        reset({ model });
+        stepFocus(true, { element: widget }, "Move focus onto empty widget");
+        widget.addItems(0, ["First", "Second", "Third"]);
+
+        // Clicking empty space does nothing.
+        clickWidgetEmptySpace({ ctrlKey, shiftKey });
+        assertFocus({ element: widget }, "Focus remains on widget");
+        assertSelection([], "No item selected");
+
+        // Clicking an item can change focus and selection.
+        clickWidgetItem(1, { ctrlKey, shiftKey });
+        if (
+          (ctrlKey && shiftKey) ||
+          ((model == "focus" || model == "browse") && (ctrlKey || shiftKey))
+        ) {
+          assertFocus({ element: widget }, "Focus remains on widget");
+          assertSelection([], "No selection");
+          continue;
+        }
+        assertFocus({ index: 1 }, "Focus moves to second item");
+        if (shiftKey) {
+          assertSelection([0, 1], "First and second item selected");
+        } else {
+          assertSelection([1], "Second item selected");
+        }
+      }
+    }
+  }
+});
+
+// Removing items from the widget with existing items, may change focus or
+// selection if the corresponding item was removed.
+add_task(function test_remove_items_nonempty() {
+  for (let model of selectionModels) {
+    reset({ model, direction: "right-to-left" });
+
+    widget.addItems(0, ["0-add", "1-add", "2-add", "3-add", "4-add", "5-add"]);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add" },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "No initial focus or selection"
+    );
+
+    clickWidgetItem(2, {});
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "3-add" },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "2-add focused and selected"
+    );
+
+    // Remove one after.
+    widget.removeItems(3, 1);
+    assertState(
+      [
+        { text: "0-add" },
+        { text: "1-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "2-add still focused and selected"
+    );
+
+    // Remove one before.
+    widget.removeItems(0, 1);
+    assertState(
+      [
+        { text: "1-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "2-add still focused and selected"
+    );
+
+    widget.addItems(0, ["6-add", "7-add"]);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "7-add" },
+        { text: "1-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "2-add still focused and selected"
+    );
+
+    // Remove several before.
+    widget.removeItems(1, 2);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "2-add", selected: true, focused: true },
+        { text: "4-add" },
+        { text: "5-add" },
+      ],
+      "2-add still focused and selected"
+    );
+
+    // Remove selected and focused. Focus should move to the next item.
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "6-add" },
+        { text: "4-add", selected: true, focused: true },
+        { text: "5-add" },
+      ],
+      "Selection and focus move to 4-add"
+    );
+
+    widget.addItems(0, ["8-add"]);
+    widget.addItems(3, ["9-add", "10-add"]);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "6-add" },
+        { text: "4-add", selected: true, focused: true },
+        { text: "9-add" },
+        { text: "10-add" },
+        { text: "5-add" },
+      ],
+      "Selection and focus still on 4-add"
+    );
+
+    // Remove selected and focused, not at boundary.
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "10-add", selected: true, focused: true },
+        { text: "5-add" },
+      ],
+      "Selection and focus move to 10-add"
+    );
+
+    // Remove last item whilst it has focus. Focus should move to the new last
+    // item.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "10-add" },
+        { text: "5-add", selected: true, focused: true },
+      ],
+      "Last item is focused and selected"
+    );
+
+    widget.removeItems(2, 1);
+    assertState(
+      [{ text: "8-add" }, { text: "10-add", selected: true, focused: true }],
+      "New last item is focused and selected"
+    );
+
+    // Delete focused whilst outside widget.
+    widget.addItems(2, ["11-add"]);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "10-add", selected: true, focused: true },
+        { text: "11-add" },
+      ],
+      "10-add is focused and selected"
+    );
+    stepFocus(false, { element: before });
+
+    widget.removeItems(1, 1);
+    assertFocus({ element: before }, "Focus remains outside widget");
+    assertState(
+      [{ text: "8-add" }, { text: "11-add", selected: true }],
+      "11-add becomes selected"
+    );
+
+    stepFocus(true, { index: 1 }, "11-add becomes focused");
+    assertState(
+      [{ text: "8-add" }, { text: "11-add", selected: true, focused: true }],
+      "11-add is selected"
+    );
+
+    // With focus separate from selected.
+    if (model == "focus") {
+      continue;
+    }
+
+    // Move selection to be before focus.
+    widget.addItems(2, ["12-add", "13-add", "14-add"]);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "11-add", selected: true, focused: true },
+        { text: "12-add" },
+        { text: "13-add" },
+        { text: "14-add" },
+      ],
+      "11-add is selected and focused"
+    );
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "11-add", selected: true },
+        { text: "12-add", focused: true },
+        { text: "13-add" },
+        { text: "14-add" },
+      ],
+      "Selection before focus"
+    );
+
+    // Remove focused, but not selected.
+    widget.removeItems(2, 1);
+    assertState(
+      [
+        { text: "8-add" },
+        { text: "11-add", selected: true },
+        { text: "13-add", focused: true },
+        { text: "14-add" },
+      ],
+      "Focus moves to 13-add, but selection is the same"
+    );
+
+    // Remove focused and selected.
+    widget.removeItems(1, 2);
+    assertState(
+      [{ text: "8-add" }, { text: "14-add", selected: true, focused: true }],
+      "Focus moves to 14-add and becomes selected"
+    );
+
+    // Restore selection before focus.
+    widget.addItems(0, ["15-add"]);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "8-add" },
+        { text: "14-add", selected: true, focused: true },
+      ],
+      "14-add has focus and selection"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "8-add", selected: true, focused: true },
+        { text: "14-add" },
+      ],
+      "8-add is focused and selected"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "8-add", selected: true },
+        { text: "14-add", focused: true },
+      ],
+      "Selection before focus again"
+    );
+
+    // Remove selected, but not focused.
+    widget.removeItems(1, 1);
+    assertState(
+      [{ text: "15-add" }, { text: "14-add", focused: true }],
+      "14-add still has focus, but selection is lost"
+    );
+
+    // Move selection to be after focus.
+    widget.addItems(1, ["16-add", "17-add"]);
+    widget.addItems(4, ["18-add"]);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "16-add" },
+        { text: "17-add" },
+        { text: "14-add", focused: true },
+        { text: "18-add" },
+      ],
+      "Still no selection"
+    );
+    // Select focused.
+    EventUtils.synthesizeKey(" ", {}, win);
+    assertFocus({ index: 3 }, "14-add has focus");
+    assertSelection([3], "14-add is selected");
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "16-add" },
+        { text: "17-add" },
+        { text: "14-add", selected: true, focused: true },
+        { text: "18-add" },
+      ],
+      "14-add is selected and focused"
+    );
+    // Move focus.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "16-add", focused: true },
+        { text: "17-add" },
+        { text: "14-add", selected: true },
+        { text: "18-add" },
+      ],
+      "Selection after focus"
+    );
+
+    // Remove focused, but not selected.
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "17-add", focused: true },
+        { text: "14-add", selected: true },
+        { text: "18-add" },
+      ],
+      "Focus moves to 17-add, selection stays on 14-add"
+    );
+
+    // Remove focused and selected.
+    widget.removeItems(1, 2);
+    assertState(
+      [{ text: "15-add" }, { text: "18-add", selected: true, focused: true }],
+      "Focus and selection moves to 18-add"
+    );
+
+    // Restore selection after focus.
+    widget.addItems(2, ["19-add", "20-add"]);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "18-add", selected: true, focused: true },
+        { text: "19-add" },
+        { text: "20-add" },
+      ],
+      "Still no selection"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "18-add" },
+        { text: "19-add", selected: true, focused: true },
+        { text: "20-add" },
+      ],
+      "19-add focused and selected"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "15-add" },
+        { text: "18-add", focused: true },
+        { text: "19-add", selected: true },
+        { text: "20-add" },
+      ],
+      "Selection after focus again"
+    );
+
+    // Remove selected, but not focused.
+    widget.removeItems(2, 2);
+    assertState(
+      [{ text: "15-add" }, { text: "18-add", focused: true }],
+      "18-add still has focus, but selection is lost"
+    );
+
+    // With multi-selection
+    if (model == "browse") {
+      continue;
+    }
+
+    widget.addItems(0, ["21-add", "22-add", "23-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "22-add" },
+        { text: "23-add" },
+        { text: "15-add" },
+        { text: "18-add", focused: true },
+      ],
+      "18-add focused, no selection yet"
+    );
+    widget.addItems(5, [
+      "24-add",
+      "25-add",
+      "26-add",
+      "27-add",
+      "28-add",
+      "29-add",
+      "30-add",
+      "31-add",
+    ]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "22-add" },
+        { text: "23-add" },
+        { text: "15-add" },
+        { text: "18-add", focused: true },
+        { text: "24-add" },
+        { text: "25-add" },
+        { text: "26-add" },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "29-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "18-add focused, no selection yet"
+    );
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "22-add" },
+        { text: "23-add" },
+        { text: "15-add" },
+        { text: "18-add", selected: true },
+        { text: "24-add", selected: true },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true, focused: true },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "29-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Forward range selection from 18-add to 26-add"
+    );
+
+    // Delete after the selection range
+    widget.removeItems(10, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "22-add" },
+        { text: "23-add" },
+        { text: "15-add" },
+        { text: "18-add", selected: true },
+        { text: "24-add", selected: true },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true, focused: true },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Same range selection"
+    );
+
+    // Delete before the selection range.
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "15-add" },
+        { text: "18-add", selected: true },
+        { text: "24-add", selected: true },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true, focused: true },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Same range selection"
+    );
+
+    // Delete the start of the selection range.
+    widget.removeItems(2, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true, focused: true },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Selection range from 25-add to 26-add"
+    );
+
+    // Selection pivot is now around 25-add.
+    EventUtils.synthesizeKey("KEY_Home", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add", selected: true, focused: true },
+        { text: "23-add", selected: true },
+        { text: "25-add", selected: true },
+        { text: "26-add" },
+        { text: "27-add" },
+        { text: "28-add" },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Selection range from 25-add to 21-add"
+    );
+    EventUtils.synthesizeKey("KEY_End", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true },
+        { text: "27-add", selected: true },
+        { text: "28-add", selected: true },
+        { text: "30-add", selected: true },
+        { text: "31-add", selected: true, focused: true },
+      ],
+      "Selection range from 25-add to 31-add"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true },
+        { text: "27-add", selected: true },
+        { text: "28-add", selected: true, focused: true },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Selection range from 25-add to 28-add"
+    );
+
+    // Delete the end of the selection.
+    // As a special case, the focus moves to the end of the selection, rather
+    // than to the next item.
+    widget.removeItems(4, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true, focused: true },
+        { text: "30-add" },
+        { text: "31-add" },
+      ],
+      "Selection range from 25-add to 26-add"
+    );
+
+    // Do same with a gap.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "26-add", selected: true },
+        { text: "30-add", selected: true, focused: true },
+        { text: "31-add" },
+      ],
+      "Continue selection range from 25-add to 30-add"
+    );
+
+    widget.addItems(3, ["32-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add" },
+        { text: "26-add", selected: true },
+        { text: "30-add", selected: true, focused: true },
+        { text: "31-add" },
+      ],
+      "Selection range from 25-add to 30-add with gap"
+    );
+
+    widget.removeItems(5, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add" },
+        { text: "26-add", selected: true, focused: true },
+        { text: "31-add" },
+      ],
+      "Focus moves to the end of the range, after the gap"
+    );
+
+    // Do the same with a gap and all items after the gap are removed.
+    widget.addItems(6, ["33-add", "34-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add" },
+        { text: "26-add", selected: true, focused: true },
+        { text: "31-add" },
+        { text: "33-add" },
+        { text: "34-add" },
+      ],
+      "Added 33-add and 34-add"
+    );
+
+    clickWidgetItem(5, { shiftKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add", selected: true },
+        { text: "26-add", selected: true },
+        { text: "31-add", selected: true, focused: true },
+        { text: "33-add" },
+        { text: "34-add" },
+      ],
+      "Selection extended to 31-add and gap filled"
+    );
+
+    widget.addItems(4, ["35-add", "36-add", "37-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add", selected: true },
+        { text: "35-add" },
+        { text: "36-add" },
+        { text: "37-add" },
+        { text: "26-add", selected: true },
+        { text: "31-add", selected: true, focused: true },
+        { text: "33-add" },
+        { text: "34-add" },
+      ],
+      "Selection from 25-add to 31-add with gap"
+    );
+
+    widget.removeItems(6, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add", selected: true, focused: true },
+        { text: "35-add" },
+        { text: "36-add" },
+        { text: "33-add" },
+        { text: "34-add" },
+      ],
+      "Focus jumps gap to what is left of the selection range"
+    );
+
+    // Same, with entire gap also removed.
+    clickWidgetItem(6, { shiftKey: true });
+    widget.addItems(5, ["38-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add", selected: true },
+        { text: "35-add", selected: true },
+        { text: "38-add" },
+        { text: "36-add", selected: true },
+        { text: "33-add", selected: true, focused: true },
+        { text: "34-add" },
+      ],
+      "Selection from 25-add to 33-add with gap"
+    );
+
+    widget.removeItems(4, 4);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "32-add", selected: true, focused: true },
+        { text: "34-add" },
+      ],
+      "Focus moves to end of what is left of the selection range"
+    );
+
+    // Test deleting the end of the selection with focus in a gap.
+    // We don't expect to follow the special treatment because the user has
+    // explicitly moved the focus "outside" of the selected range.
+    widget.addItems(3, ["39-add"]);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "39-add", focused: true },
+        { text: "32-add", selected: true },
+        { text: "34-add" },
+      ],
+      "Focus in range gap"
+    );
+
+    widget.removeItems(3, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "34-add", focused: true },
+      ],
+      "Focus moves from gap to 34-add, outside the selection range"
+    );
+
+    // Same, but deleting the start of the range.
+    widget.addItems(4, ["40-add", "41-add", "42-add"]);
+    clickWidgetItem(5, { shiftKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true, focused: true },
+        { text: "42-add" },
+      ],
+      "Selection from 25-add to 41-add"
+    );
+
+    widget.addItems(3, ["43-add", "44-add", "45-add"]);
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "23-add" },
+        { text: "25-add", selected: true },
+        { text: "43-add", focused: true },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true },
+        { text: "42-add" },
+      ],
+      "Focus in gap"
+    );
+
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add", focused: true },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true },
+        { text: "42-add" },
+      ],
+      "Focus moves to next item, rather than the selection start"
+    );
+
+    // Test deleting the end of the selection with the focus towards the end of
+    // the range.
+    widget.addItems(7, ["46-add", "47-add", "48-add", "49-add", "50-add"]);
+    clickWidgetItem(7, { shiftKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true },
+        { text: "42-add", selected: true, focused: true },
+        { text: "46-add", selected: true },
+        { text: "47-add" },
+        { text: "48-add" },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Range selection from 34-add to 46-add, with focus on 42-add"
+    );
+
+    widget.removeItems(6, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true, focused: true },
+        { text: "47-add" },
+        { text: "48-add" },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Focus still moves to the end of the selection"
+    );
+
+    // Test deleting with focus after the end of the range.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "41-add", selected: true },
+        { text: "47-add", focused: true },
+        { text: "48-add" },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Focus still moves to the end of the selection"
+    );
+
+    widget.removeItems(5, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true },
+        { text: "48-add", focused: true },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Focus remains outside the range"
+    );
+
+    // Test deleting with focus in the middle of the range, and end of the range
+    // is not deleted.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "40-add", selected: true, focused: true },
+        { text: "48-add", selected: true },
+        { text: "49-add", selected: true },
+        { text: "50-add" },
+      ],
+      "Focus in the middle of the range"
+    );
+
+    widget.removeItems(4, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "48-add", selected: true, focused: true },
+        { text: "49-add", selected: true },
+        { text: "50-add" },
+      ],
+      "Focus moves to next item, rather than the end of the range"
+    );
+
+    // With focus just before a gap.
+    widget.addItems(5, ["51-add", "52-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "48-add", selected: true, focused: true },
+        { text: "51-add" },
+        { text: "52-add" },
+        { text: "49-add", selected: true },
+        { text: "50-add" },
+      ],
+      "Focus just before a gap"
+    );
+
+    widget.removeItems(4, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "51-add", focused: true },
+        { text: "52-add" },
+        { text: "49-add", selected: true },
+        { text: "50-add" },
+      ],
+      "Focus moves forward into the gap"
+    );
+
+    // Selection pivot is about 34-add
+    clickWidgetItem(1, { shiftKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add", selected: true, focused: true },
+        { text: "45-add", selected: true },
+        { text: "34-add", selected: true },
+        { text: "51-add" },
+        { text: "52-add" },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Selection from 34-add backward to 44-add"
+    );
+    clickWidgetItem(5, { shiftKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "34-add", selected: true },
+        { text: "51-add", selected: true },
+        { text: "52-add", selected: true, focused: true },
+        { text: "49-add" },
+        { text: "50-add" },
+      ],
+      "Selection from 34-add forward to 52-add"
+    );
+
+    // Delete the whole range.
+    widget.removeItems(3, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add" },
+        { text: "45-add" },
+        { text: "49-add", selected: true, focused: true },
+        { text: "50-add" },
+      ],
+      "Focus and selection moves to after the selection range"
+    );
+
+    // Do the same with focus outside the range.
+    widget.addItems(5, ["53-add", "54-add", "55-add"]);
+    EventUtils.synthesizeKey("KEY_Home", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    clickWidgetItem(2, { shiftKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "44-add", selected: true },
+        { text: "45-add", selected: true },
+        { text: "49-add", focused: true },
+        { text: "50-add" },
+        { text: "53-add" },
+        { text: "54-add" },
+        { text: "55-add" },
+      ],
+      "Focus outside selection"
+    );
+
+    widget.removeItems(1, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "49-add", focused: true },
+        { text: "50-add" },
+        { text: "53-add" },
+        { text: "54-add" },
+        { text: "55-add" },
+      ],
+      "Focus remains on same item and unselected"
+    );
+
+    // Do the same, but the focus is also removed.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "49-add", selected: true },
+        { text: "50-add", selected: true },
+        { text: "53-add", focused: true },
+        { text: "54-add" },
+        { text: "55-add" },
+      ],
+      "Focus outside selection"
+    );
+
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add", selected: true, focused: true },
+        { text: "55-add" },
+      ],
+      "Focus and selection moves to 49-add"
+    );
+
+    // * Do the same tests but with selection travelling backwards. *
+    widget.addItems(3, [
+      "56-add",
+      "57-add",
+      "58-add",
+      "59-add",
+      "60-add",
+      "61-add",
+      "62-add",
+      "63-add",
+      "64-add",
+      "65-add",
+      "66-add",
+    ]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add", selected: true, focused: true },
+        { text: "55-add" },
+        { text: "56-add" },
+        { text: "57-add" },
+        { text: "58-add" },
+        { text: "59-add" },
+        { text: "60-add" },
+        { text: "61-add" },
+        { text: "62-add" },
+        { text: "63-add" },
+        { text: "64-add" },
+        { text: "65-add" },
+        { text: "66-add" },
+      ],
+      "Same selection and focus"
+    );
+    EventUtils.synthesizeKey("KEY_End", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "55-add" },
+        { text: "56-add" },
+        { text: "57-add", selected: true, focused: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "62-add", selected: true },
+        { text: "63-add" },
+        { text: "64-add" },
+        { text: "65-add" },
+        { text: "66-add" },
+      ],
+      "Backward range selection from 62-add to 57-add"
+    );
+
+    // Delete after the selection range
+    widget.removeItems(11, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "55-add" },
+        { text: "56-add" },
+        { text: "57-add", selected: true, focused: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "62-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Same range selection"
+    );
+
+    // Delete before the selection range.
+    widget.removeItems(2, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "57-add", selected: true, focused: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "62-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Same range selection"
+    );
+
+    // Delete the end of the selection range.
+    widget.removeItems(7, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "57-add", selected: true, focused: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 61-add to 57-add"
+    );
+
+    // Selection pivot is now around 61-add.
+    EventUtils.synthesizeKey("KEY_End", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "57-add" },
+        { text: "58-add" },
+        { text: "59-add" },
+        { text: "60-add" },
+        { text: "61-add", selected: true },
+        { text: "63-add", selected: true },
+        { text: "66-add", selected: true, focused: true },
+      ],
+      "Selection range forwards from 61-add to 66-add"
+    );
+    EventUtils.synthesizeKey("KEY_Home", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add", selected: true, focused: true },
+        { text: "54-add", selected: true },
+        { text: "57-add", selected: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 61-add to 21-add"
+    );
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "54-add" },
+        { text: "57-add", selected: true, focused: true },
+        { text: "58-add", selected: true },
+        { text: "59-add", selected: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 61-add to 57-add"
+    );
+
+    // Delete the start of the selection.
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "59-add", selected: true, focused: true },
+        { text: "60-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range shrinks to 59-add"
+    );
+
+    // Do the same with a gap after the focus and its next item.
+    widget.addItems(3, ["67-add", "68-add", "69-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "59-add", selected: true, focused: true },
+        { text: "60-add", selected: true },
+        { text: "67-add" },
+        { text: "68-add" },
+        { text: "69-add" },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 61-add to 59-add with gap"
+    );
+
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "60-add", selected: true, focused: true },
+        { text: "67-add" },
+        { text: "68-add" },
+        { text: "69-add" },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moves to the next item, before gap"
+    );
+
+    // Do the same with a gap and all items before the gap are removed.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "60-add" },
+        { text: "67-add", selected: true, focused: true },
+        { text: "68-add", selected: true },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backward reduced to 67-add with gap filled"
+    );
+    widget.addItems(4, ["70-add", "71-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "60-add" },
+        { text: "67-add", selected: true, focused: true },
+        { text: "68-add", selected: true },
+        { text: "70-add" },
+        { text: "71-add" },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backward from 61-add to 67-add with gap"
+    );
+
+    widget.removeItems(2, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "60-add" },
+        { text: "70-add" },
+        { text: "71-add" },
+        { text: "69-add", selected: true, focused: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus jumps gap to selection range"
+    );
+
+    // Same, with entire gap also removed.
+    clickWidgetItem(1, { shiftKey: true });
+    widget.addItems(2, ["72-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "60-add", selected: true, focused: true },
+        { text: "72-add" },
+        { text: "70-add", selected: true },
+        { text: "71-add", selected: true },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 60-add to 70-add"
+    );
+
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "71-add", selected: true, focused: true },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moves to the start of what is left of the selection range"
+    );
+
+    // Test deleting the start of the selection with focus in a gap.
+    // We don't expect to follow the special treatment because the user has
+    // explicitly moved the focus "outside" of the selected range.
+    widget.addItems(2, ["73-add", "74-add", "75-add"]);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "71-add", selected: true },
+        { text: "73-add", focused: true },
+        { text: "74-add" },
+        { text: "75-add" },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus in range gap"
+    );
+
+    widget.removeItems(1, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "74-add", focused: true },
+        { text: "75-add" },
+        { text: "69-add", selected: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moves to the next item, rather than the selection range"
+    );
+
+    // Same, but deleting the end of the range.
+    clickWidgetItem(1, { shiftKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "74-add", selected: true },
+        { text: "75-add", selected: true },
+        { text: "69-add", selected: true, focused: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backward from 61-add to 74-add, with focus shifted"
+    );
+    widget.addItems(3, ["76-add", "77-add"]);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "74-add", selected: true },
+        { text: "75-add", selected: true },
+        { text: "76-add" },
+        { text: "77-add" },
+        { text: "69-add", selected: true, focused: true },
+        { text: "61-add", selected: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus in gap"
+    );
+
+    widget.removeItems(5, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "74-add", selected: true },
+        { text: "75-add", selected: true },
+        { text: "76-add" },
+        { text: "77-add" },
+        { text: "63-add", focused: true },
+        { text: "66-add" },
+      ],
+      "Focus moves to next item, rather than selection range end"
+    );
+
+    // Selection pivot now about 75-add.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "74-add" },
+        { text: "75-add", selected: true },
+        { text: "76-add", selected: true },
+        { text: "77-add", selected: true, focused: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range forward from 75-add to 77-add"
+    );
+
+    widget.addItems(1, ["78-add", "79-add", "80-add"]);
+    clickWidgetItem(2, { shiftKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "78-add" },
+        { text: "79-add", selected: true, focused: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "75-add", selected: true },
+        { text: "76-add" },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backward from 75-add to 79-add"
+    );
+
+    // Move focus to the end of the range and delete again, but with no gap this
+    // time.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "78-add" },
+        { text: "79-add", selected: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "75-add", selected: true, focused: true },
+        { text: "76-add" },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moved to the end of the selection"
+    );
+
+    widget.removeItems(5, 2);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "78-add" },
+        { text: "79-add", selected: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "77-add", focused: true },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moved to the next item rather than the selection start"
+    );
+
+    // Deleting with focus before the selection start.
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true });
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "78-add", focused: true },
+        { text: "79-add", selected: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus before the selection start"
+    );
+
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "21-add" },
+        { text: "79-add", selected: true, focused: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moves to the next item, which happens to be in the selection range"
+    );
+
+    // Test deleting with focus in the middle of the range.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true });
+    assertState(
+      [
+        { text: "21-add", selected: true },
+        { text: "79-add", selected: true, focused: true },
+        { text: "80-add", selected: true },
+        { text: "74-add", selected: true },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Selection range backwards from 74-add to 21-add, with focus in middle"
+    );
+
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "21-add", selected: true },
+        { text: "80-add", selected: true, focused: true },
+        { text: "74-add", selected: true },
+        { text: "77-add" },
+        { text: "63-add" },
+        { text: "66-add" },
+      ],
+      "Focus moves to the next item, rather than the selection start or end"
+    );
+
+    // Delete the whole range.
+    widget.removeItems(0, 4);
+    assertState(
+      [{ text: "63-add", selected: true, focused: true }, { text: "66-add" }],
+      "Focus and selection move to the next remaining item"
+    );
+
+    // Do the same with focus outside the range.
+    widget.addItems(0, ["81-add", "82-add", "83-add", "84-add", "85-add"]);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "82-add" },
+        { text: "83-add" },
+        { text: "84-add", focused: true },
+        { text: "85-add", selected: true },
+        { text: "63-add", selected: true },
+        { text: "66-add" },
+      ],
+      "Focus outside backward selection range"
+    );
+
+    widget.removeItems(4, 2);
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "82-add" },
+        { text: "83-add" },
+        { text: "84-add", focused: true },
+        { text: "66-add" },
+      ],
+      "Focus remains the same and is not selected"
+    );
+
+    // Same, but with focus also removed.
+    widget.addItems(5, ["86-add"]);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "82-add", focused: true },
+        { text: "83-add", selected: true },
+        { text: "84-add", selected: true },
+        { text: "66-add" },
+        { text: "86-add" },
+      ],
+      "Focus outside backwards selection range"
+    );
+
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "66-add", selected: true, focused: true },
+        { text: "86-add" },
+      ],
+      "Focus moves to next item and selected"
+    );
+
+    // With multi-selection via toggling.
+
+    widget.addItems(3, [
+      "87-add",
+      "88-add",
+      "89-add",
+      "90-add",
+      "91-add",
+      "92-add",
+      "93-add",
+      "94-add",
+    ]);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { shiftKey: true }, win);
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "66-add" },
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add", selected: true },
+        { text: "89-add", selected: true },
+        { text: "90-add", selected: true, focused: true },
+        { text: "91-add" },
+        { text: "92-add" },
+        { text: "93-add" },
+        { text: "94-add" },
+      ],
+      "Start with range selection forward from 87-add to 90-add"
+    );
+
+    clickWidgetItem(4, { ctrlKey: true });
+    clickWidgetItem(5, { ctrlKey: true });
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "66-add" },
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add" },
+        { text: "89-add", focused: true },
+        { text: "90-add", selected: true },
+        { text: "91-add" },
+        { text: "92-add" },
+        { text: "93-add" },
+        { text: "94-add" },
+      ],
+      "Range selection from 87-add to 90-add, with 88-add and 89-add unselected"
+    );
+
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true });
+    EventUtils.synthesizeKey(" ", { ctrlKey: true });
+    assertState(
+      [
+        { text: "81-add" },
+        { text: "66-add" },
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add" },
+        { text: "89-add" },
+        { text: "90-add", selected: true },
+        { text: "91-add", selected: true, focused: true },
+        { text: "92-add" },
+        { text: "93-add" },
+        { text: "94-add" },
+      ],
+      "Mixed selection"
+    );
+
+    // Remove before the selected items
+    widget.removeItems(0, 2);
+    assertState(
+      [
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add" },
+        { text: "89-add" },
+        { text: "90-add", selected: true },
+        { text: "91-add", selected: true, focused: true },
+        { text: "92-add" },
+        { text: "93-add" },
+        { text: "94-add" },
+      ],
+      "Same selection and focus"
+    );
+
+    // Remove after
+    widget.removeItems(6, 1);
+    assertState(
+      [
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add" },
+        { text: "89-add" },
+        { text: "90-add", selected: true },
+        { text: "91-add", selected: true, focused: true },
+        { text: "93-add" },
+        { text: "94-add" },
+      ],
+      "Same selection and focus"
+    );
+
+    // Removed the focused item, unlike a simple range selection, the focused
+    // item is not bound to stay within the selected items.
+    widget.removeItems(5, 1);
+    assertState(
+      [
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "88-add" },
+        { text: "89-add" },
+        { text: "90-add", selected: true },
+        { text: "93-add", focused: true },
+        { text: "94-add" },
+      ],
+      "Focus moves to next item and not selected"
+    );
+
+    // Remove the unselected items, merging the two ranges together.
+    widget.removeItems(2, 2);
+    assertState(
+      [
+        { text: "86-add" },
+        { text: "87-add", selected: true },
+        { text: "90-add", selected: true },
+        { text: "93-add", focused: true },
+        { text: "94-add" },
+      ],
+      "Focus remains the same"
+    );
+
+    // Remove the selected items.
+    widget.removeItems(1, 2);
+    assertState(
+      [
+        { text: "86-add" },
+        { text: "93-add", focused: true },
+        { text: "94-add" },
+      ],
+      "Focus remains the same, and not selected"
+    );
+
+    // Remove all selected items, including the focused item.
+    widget.addItems(0, [
+      "95-add",
+      "96-add",
+      "97-add",
+      "98-add",
+      "99-add",
+      "100-add",
+      "101-add",
+    ]);
+    EventUtils.synthesizeKey(" ", {}, win);
+    assertState(
+      [
+        { text: "95-add" },
+        { text: "96-add" },
+        { text: "97-add" },
+        { text: "98-add" },
+        { text: "99-add" },
+        { text: "100-add" },
+        { text: "101-add" },
+        { text: "86-add" },
+        { text: "93-add", selected: true, focused: true },
+        { text: "94-add" },
+      ],
+      "Single selection"
+    );
+
+    clickWidgetItem(6, { ctrlKey: true });
+    clickWidgetItem(5, { ctrlKey: true });
+    assertState(
+      [
+        { text: "95-add" },
+        { text: "96-add" },
+        { text: "97-add" },
+        { text: "98-add" },
+        { text: "99-add" },
+        { text: "100-add", selected: true, focused: true },
+        { text: "101-add", selected: true },
+        { text: "86-add" },
+        { text: "93-add", selected: true },
+        { text: "94-add" },
+      ],
+      "Mixed selection with focus selected"
+    );
+
+    widget.removeItems(5, 4);
+    assertState(
+      [
+        { text: "95-add" },
+        { text: "96-add" },
+        { text: "97-add" },
+        { text: "98-add" },
+        { text: "99-add" },
+        { text: "94-add", selected: true, focused: true },
+      ],
+      "Focus moves to next item and selected"
+    );
+
+    // Remove all selected, with focus outside the selection
+    clickWidgetItem(1, {});
+    clickWidgetItem(3, { ctrlKey: true });
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true });
+    assertState(
+      [
+        { text: "95-add" },
+        { text: "96-add", selected: true },
+        { text: "97-add", focused: true },
+        { text: "98-add", selected: true },
+        { text: "99-add" },
+        { text: "94-add" },
+      ],
+      "Mixed selection with focus not selected"
+    );
+
+    widget.removeItems(1, 3);
+    assertState(
+      [
+        { text: "95-add" },
+        { text: "99-add", selected: true, focused: true },
+        { text: "94-add" },
+      ],
+      "Focus moves to next item and selected"
+    );
+
+    // With select all.
+    widget.addItems(0, ["102-add", "103-add", "104-add"]);
+    widget.addItems(6, ["105-add", "106-add"]);
+    selectAllShortcut();
+    assertState(
+      [
+        { text: "102-add", selected: true },
+        { text: "103-add", selected: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true },
+        { text: "99-add", selected: true, focused: true },
+        { text: "94-add", selected: true },
+        { text: "105-add", selected: true },
+        { text: "106-add", selected: true },
+      ],
+      "All selected"
+    );
+
+    // Remove middle and focused.
+    widget.removeItems(4, 1);
+    assertState(
+      [
+        { text: "102-add", selected: true },
+        { text: "103-add", selected: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true },
+        { text: "94-add", selected: true, focused: true },
+        { text: "105-add", selected: true },
+        { text: "106-add", selected: true },
+      ],
+      "Focus moves to the next item, selections remain"
+    );
+
+    // Remove before focused.
+    widget.removeItems(1, 1);
+    assertState(
+      [
+        { text: "102-add", selected: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true },
+        { text: "94-add", selected: true, focused: true },
+        { text: "105-add", selected: true },
+        { text: "106-add", selected: true },
+      ],
+      "Focus and selection remain"
+    );
+
+    // Remove after the focus.
+    widget.removeItems(4, 2);
+    assertState(
+      [
+        { text: "102-add", selected: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true },
+        { text: "94-add", selected: true, focused: true },
+      ],
+      "Focus and selection remain"
+    );
+
+    // Remove end and focused.
+    widget.removeItems(3, 1);
+    assertState(
+      [
+        { text: "102-add", selected: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true, focused: true },
+      ],
+      "Focus moves to the last item, selection remains"
+    );
+
+    // Remove start and focused.
+    EventUtils.synthesizeKey("KEY_Home", { ctrlKey: true }, win);
+    assertState(
+      [
+        { text: "102-add", selected: true, focused: true },
+        { text: "104-add", selected: true },
+        { text: "95-add", selected: true },
+      ],
+      "Focus on first item"
+    );
+
+    widget.removeItems(0, 1);
+    assertState(
+      [
+        { text: "104-add", selected: true, focused: true },
+        { text: "95-add", selected: true },
+      ],
+      "Focus moves to next item"
+    );
+
+    // Remove items to cause two distinct ranges to merge together, with
+    // in-between ranges removed.
+    widget.addItems(2, [
+      "107-add",
+      "108-add",
+      "109-add",
+      "110-add",
+      "111-add",
+      "112-add",
+      "113-add",
+    ]);
+    clickWidgetItem(0, { ctrlKey: true });
+    assertState(
+      [
+        { text: "104-add", focused: true },
+        { text: "95-add", selected: true },
+        { text: "107-add" },
+        { text: "108-add" },
+        { text: "109-add" },
+        { text: "110-add" },
+        { text: "111-add" },
+        { text: "112-add" },
+        { text: "113-add" },
+      ],
+      "Added items and de-selected 104-add"
+    );
+
+    clickWidgetItem(3, { ctrlKey: true });
+    clickWidgetItem(4, { ctrlKey: true });
+    clickWidgetItem(6, { ctrlKey: true });
+    clickWidgetItem(8, { ctrlKey: true });
+    assertState(
+      [
+        { text: "104-add" },
+        { text: "95-add", selected: true },
+        { text: "107-add" },
+        { text: "108-add", selected: true },
+        { text: "109-add", selected: true },
+        { text: "110-add" },
+        { text: "111-add", selected: true },
+        { text: "112-add" },
+        { text: "113-add", selected: true, focused: true },
+      ],
+      "Several selection ranges"
+    );
+
+    widget.removeItems(2, 6);
+    assertState(
+      [
+        { text: "104-add" },
+        { text: "95-add", selected: true },
+        { text: "113-add", selected: true, focused: true },
+      ],
+      "End ranges merged together"
+    );
+
+    // Do the same, but where parts of the end ranges are also removed.
+    widget.addItems(3, [
+      "114-add",
+      "115-add",
+      "116-add",
+      "117-add",
+      "118-add",
+      "119-add",
+      "120-add",
+      "121-add",
+      "122-add",
+      "123-add",
+      "124-add",
+      "125-add",
+      "126-add",
+      "127-add",
+    ]);
+    clickWidgetItem(4, { ctrlKey: true });
+    clickWidgetItem(5, { ctrlKey: true });
+    clickWidgetItem(7, { ctrlKey: true });
+    clickWidgetItem(10, { ctrlKey: true });
+    clickWidgetItem(12, { ctrlKey: true });
+    clickWidgetItem(13, { ctrlKey: true });
+    clickWidgetItem(14, { ctrlKey: true });
+    clickWidgetItem(16, { ctrlKey: true });
+
+    clickWidgetItem(9, { ctrlKey: true });
+    assertState(
+      [
+        { text: "104-add" },
+        { text: "95-add", selected: true },
+        { text: "113-add", selected: true },
+        { text: "114-add" },
+        { text: "115-add", selected: true },
+        { text: "116-add", selected: true },
+        { text: "117-add" },
+        { text: "118-add", selected: true },
+        { text: "119-add" },
+        { text: "120-add", selected: true, focused: true },
+        { text: "121-add", selected: true },
+        { text: "122-add" },
+        { text: "123-add", selected: true },
+        { text: "124-add", selected: true },
+        { text: "125-add", selected: true },
+        { text: "126-add" },
+        { text: "127-add", selected: true },
+      ],
+      "Several ranges"
+    );
+
+    widget.removeItems(5, 8);
+    assertState(
+      [
+        { text: "104-add" },
+        { text: "95-add", selected: true },
+        { text: "113-add", selected: true },
+        { text: "114-add" },
+        { text: "115-add", selected: true },
+        { text: "124-add", selected: true, focused: true },
+        { text: "125-add", selected: true },
+        { text: "126-add" },
+        { text: "127-add", selected: true },
+      ],
+      "Two ranges merged and rest removed, focus moves to next item"
+    );
+  }
+});
+
+// If widget is emptied whilst focused, focus moves to widget.
+add_task(function test_emptying_widget() {
+  for (let model of selectionModels) {
+    // Empty with focused widget.
+    reset({ model });
+    stepFocus(true, { element: widget }, "Initial");
+    widget.addItems(0, ["First", "Second"]);
+    assertFocus({ element: widget }, "Focus still on widget after adding");
+    widget.removeItems(0, 2);
+    assertFocus({ element: widget }, "Focus still on widget after removing");
+
+    // Empty with focused item.
+    widget.addItems(0, ["First", "Second"]);
+    EventUtils.synthesizeKey("KEY_Home", {}, win);
+    assertFocus({ index: 0 }, "Focus on first item");
+    widget.removeItems(0, 2);
+    assertFocus({ element: widget }, "Focus moves to widget after removing");
+
+    // Empty with focus elsewhere.
+    widget.addItems(0, ["First", "Second"]);
+    stepFocus(false, { element: before }, "Focus elsewhere");
+    widget.removeItems(0, 2);
+    assertFocus({ element: before }, "Focus still elsewhere after removing");
+    stepFocus(true, { element: widget }, "Widget becomes focused");
+
+    // Empty with focus elsewhere, but active item.
+    widget.addItems(0, ["First", "Second"]);
+    // Move away from and back to widget to focus second item.
+    stepFocus(true, { element: after }, "Focus elsewhere");
+    widget.selectSingleItem(1);
+    stepFocus(false, { index: 1 }, "Focus on second item");
+    stepFocus(false, { element: before }, "Return focus to elsewhere");
+    widget.removeItems(0, 2);
+    assertFocus({ element: before }, "Focus still elsewhere after removing");
+    stepFocus(true, { element: widget }, "Widget becomes focused");
+  }
+});
+
+/**
+ * Test moving items in the widget.
+ *
+ * @param {string} model - The selection model to use.
+ * @param {boolean} reCreate - Whether the widget should reCreate the items when
+ *   moving them.
+ */
+function subtest_move_items(model, reCreate) {
+  reset({ model, direction: "right-to-left" });
+
+  widget.addItems(0, [
+    "0-add",
+    "1-add",
+    "2-add",
+    "3-add",
+    "4-add",
+    "5-add",
+    "6-add",
+    "7-add",
+    "8-add",
+    "9-add",
+    "10-add",
+    "11-add",
+    "12-add",
+    "13-add",
+  ]);
+  clickWidgetItem(5, {});
+
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "3-add" },
+      { text: "4-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "6-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Item 5 selected and focused"
+  );
+
+  // Move items before focus.
+  widget.moveItems(4, 3, 1, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "6-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+  widget.moveItems(1, 3, 2, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "6-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+
+  // Move items after focus.
+  widget.moveItems(6, 8, 2, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "7-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+  widget.moveItems(9, 6, 1, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+
+  // Move from before focus to after focus.
+  widget.moveItems(2, 3, 3, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection, but moved"
+  );
+
+  // Move from after focus to before focus.
+  widget.moveItems(3, 2, 5, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection, but moved"
+  );
+
+  // Move selected and focused up.
+  widget.moveItems(7, 3, 1, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus and selection moved to index 3"
+  );
+
+  // Move down.
+  widget.moveItems(3, 5, 1, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus and selection moved to index 5"
+  );
+
+  // Move in a group.
+  widget.moveItems(4, 5, 3, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "8-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "7-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus and selection moved to index 6"
+  );
+  widget.moveItems(5, 4, 3, reCreate);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus and selection moved back to index 5"
+  );
+
+  // With focus split from selection.
+  if (model == "focus") {
+    return;
+  }
+
+  // Focus before selection.
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  assertState(
+    [
+      { text: "0-add" },
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus before selection"
+  );
+
+  // Move before both.
+  widget.moveItems(0, 1, 1, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "0-add" },
+      { text: "3-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "9-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+
+  // Move after both.
+  widget.moveItems(8, 7, 1, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "0-add" },
+      { text: "3-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "9-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Same focus and selection"
+  );
+
+  // Move focus to after selected.
+  widget.moveItems(3, 6, 2, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "0-add" },
+      { text: "3-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "9-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus moved to after selection"
+  );
+
+  // Move focus before selected.
+  widget.moveItems(5, 2, 3, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "0-add" },
+      { text: "9-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "3-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Focus moved to before selection"
+  );
+
+  // Move selection before focus.
+  widget.moveItems(5, 1, 5, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "5-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "0-add" },
+      { text: "9-add" },
+      { text: "1-add", focused: true },
+      { text: "2-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Selected moved to before focus"
+  );
+
+  // Move selection after focus.
+  widget.moveItems(2, 8, 1, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "0-add" },
+      { text: "9-add" },
+      { text: "1-add", focused: true },
+      { text: "5-add", selected: true },
+      { text: "2-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Selected moved to after focus"
+  );
+
+  // Navigation still works.
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "0-add" },
+      { text: "9-add", focused: true },
+      { text: "1-add" },
+      { text: "5-add", selected: true },
+      { text: "2-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Selected moved to after focus"
+  );
+
+  // Test with multi-selection.
+  if (model == "browse") {
+    return;
+  }
+
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add", selected: true, focused: true },
+      { text: "0-add", selected: true },
+      { text: "9-add", selected: true },
+      { text: "1-add" },
+      { text: "5-add" },
+      { text: "2-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Range selection from 9-add to 6-add"
+  );
+
+  // Move non-selected into the middle of the selected.
+  widget.moveItems(8, 5, 2, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add", selected: true, focused: true },
+      { text: "5-add" },
+      { text: "2-add" },
+      { text: "0-add", selected: true },
+      { text: "9-add", selected: true },
+      { text: "1-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Non-selected gap"
+  );
+
+  // Moving an item always ends a Shift range selection.
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "5-add" },
+      { text: "2-add" },
+      { text: "0-add" },
+      { text: "9-add" },
+      { text: "1-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Range selection from 6-add to 8-add"
+  );
+
+  clickWidgetItem(9, { shiftKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "2-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "9-add", selected: true },
+      { text: "1-add", selected: true, focused: true },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Range selection from 6-add to 1-add"
+  );
+
+  // Move selected to middle of selected.
+  widget.moveItems(8, 6, 2, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "9-add", selected: true },
+      { text: "1-add", selected: true, focused: true },
+      { text: "2-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Selection block"
+  );
+
+  // Also ends a Shift range selection.
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "9-add", selected: true },
+      { text: "1-add", selected: true },
+      { text: "2-add" },
+      { text: "0-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Range selection from 1-add to 5-add"
+  );
+
+  // Move from start of selection to end.
+  widget.moveItems(5, 7, 1, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "9-add", selected: true },
+      { text: "1-add", selected: true },
+      { text: "5-add", selected: true, focused: true },
+      { text: "2-add" },
+      { text: "0-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Moved to end"
+  );
+
+  // And reverse.
+  widget.moveItems(7, 5, 1, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "8-add" },
+      { text: "6-add" },
+      { text: "5-add", selected: true, focused: true },
+      { text: "9-add", selected: true },
+      { text: "1-add", selected: true },
+      { text: "2-add" },
+      { text: "0-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Moved back to start"
+  );
+
+  // Also broke Shift range selection.
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { shiftKey: true }, win);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add", selected: true, focused: true },
+      { text: "7-add", selected: true },
+      { text: "8-add", selected: true },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+      { text: "2-add" },
+      { text: "0-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "13-add" },
+    ],
+    "Range selection from 5-add to 3-add"
+  );
+
+  EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_End", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add", selected: true },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+      { text: "2-add", selected: true, focused: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "13-add", selected: true },
+    ],
+    "Multi-selection"
+  );
+
+  // Move selected with gap into middle of a selection block.
+  widget.moveItems(8, 4, 6, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add", selected: true },
+      { text: "2-add", selected: true, focused: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "13-add", selected: true },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together on both sides"
+  );
+
+  // Move selected with gap to start of a selection block.
+  widget.moveItems(5, 1, 5, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add", selected: true },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together at start"
+  );
+
+  // Move selected with gap to end of a selection block.
+  widget.moveItems(1, 4, 8, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "8-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together at end"
+  );
+
+  // Move block with non-selected boundaries into middle of selected.
+  widget.moveItems(5, 3, 6, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "8-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Split range block"
+  );
+
+  // Move block with selected at start into middle of selected.
+  widget.moveItems(1, 6, 5, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "8-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together at start"
+  );
+
+  // Move block with selected at end into middle of selected.
+  widget.moveItems(8, 6, 4, reCreate);
+  assertState(
+    [
+      { text: "4-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "8-add", selected: true },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together at end"
+  );
+
+  // Move selected into non-selected region and move to start.
+  widget.moveItems(4, 0, 6, reCreate);
+  assertState(
+    [
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "8-add", selected: true },
+      { text: "4-add" },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+    ],
+    "Merged ranges together at end"
+  );
+
+  // Remove gap between two selections and move to end.
+  widget.moveItems(2, 9, 5, reCreate);
+  assertState(
+    [
+      { text: "5-add", selected: true },
+      { text: "0-add", selected: true },
+      { text: "13-add", selected: true },
+      { text: "3-add", selected: true },
+      { text: "7-add" },
+      { text: "2-add", selected: true, focused: true },
+      { text: "6-add", selected: true },
+      { text: "9-add" },
+      { text: "1-add" },
+      { text: "10-add" },
+      { text: "11-add", selected: true },
+      { text: "12-add" },
+      { text: "8-add", selected: true },
+      { text: "4-add" },
+    ],
+    "Merged ranges together"
+  );
+
+  // Navigation still works.
+  EventUtils.synthesizeKey("KEY_ArrowLeft", {}, win);
+  assertState(
+    [
+      { text: "5-add" },
+      { text: "0-add" },
+      { text: "13-add" },
+      { text: "3-add" },
+      { text: "7-add" },
+      { text: "2-add" },
+      { text: "6-add", selected: true, focused: true },
+      { text: "9-add" },
+      { text: "1-add" },
+      { text: "10-add" },
+      { text: "11-add" },
+      { text: "12-add" },
+      { text: "8-add" },
+      { text: "4-add" },
+    ],
+    "Move by one index and single select"
+  );
+}
+
+// Moving items in the widget will move focus and selection with the moved
+// items.
+add_task(function test_move_items() {
+  for (let model of selectionModels) {
+    // We want to be sure the methods work with or without re-creating the
+    // item elements.
+    subtest_move_items(model, false);
+    subtest_move_items(model, true);
+  }
+});
+
+// Test that dragging is possible.
+add_task(function test_can_drag_items() {
+  /**
+   * Assert that dragging can occur and takes place with the expected selection.
+   *
+   * @param {number} index - The index of the item to start dragging on. We also
+   *   expect this item to have focus during and after dragging.
+   * @param {number[]} selection - The expected selection during and after
+   *   dragging.
+   * @param {string} msg - A message to use in assertions.
+   */
+  function assertDragstart(index, selection, msg) {
+    let element = widget.items[index].element;
+    let eventFired = false;
+
+    let dragstartListener = event => {
+      eventFired = true;
+      Assert.ok(
+        element.contains(event.target),
+        `Item ${index} contains the dragstart target`
+      );
+      assertFocus({ index }, `Item ${index} has focus in dragstart: ${msg}`);
+      assertSelection(selection, `Selection in dragstart: ${msg}`);
+    };
+    widget.addEventListener("dragstart", dragstartListener, true);
+
+    // Synthesize the start of a drag.
+    let rect = element.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+    EventUtils.synthesizeMouseAtPoint(x, y, { type: "mousedown" }, win);
+    EventUtils.synthesizeMouseAtPoint(x, y, { type: "mousemove" }, win);
+    EventUtils.synthesizeMouseAtPoint(x, y + 60, { type: "mousemove" }, win);
+    // Don't care about ending the drag.
+
+    Assert.ok(eventFired, `dragstart event fired: ${msg}`);
+    widget.removeEventListener("dragstart", dragstartListener, true);
+    assertSelection(selection, `Same selection after dragging: ${msg}`);
+    assertFocus(
+      { index },
+      `Item ${index} still has focus after dragging: ${msg}`
+    );
+  }
+
+  for (let model of selectionModels) {
+    reset({ model, draggable: true });
+    widget.addItems(0, ["First", "Second", "Third"]);
+    assertFocus({ element: before }, "Focus outside widget");
+    assertSelection([], "No initial selection");
+    assertDragstart(1, [1], "First drag with no focus or selection");
+
+    assertDragstart(1, [1], "Already selected item");
+    assertDragstart(2, [2], "Non-selected item");
+
+    reset({ model, draggable: true });
+    widget.addItems(0, ["First", "Second", "Third"]);
+    widget.selectSingleItem(1);
+    assertFocus({ element: before }, "Focus outside widget");
+    assertSelection([1], "Initial selection on item 1");
+    assertDragstart(1, [1], "First drag on selected item");
+
+    reset({ model, draggable: true });
+    widget.addItems(0, ["First", "Second", "Third", "Fourth", "Fifth"]);
+    widget.selectSingleItem(3);
+    assertFocus({ element: before }, "Focus outside widget");
+    assertSelection([3], "Initial selection on item 3");
+    assertDragstart(2, [2], "First drag on non-selected item");
+
+    // With focus split from selected.
+    if (model == "focus") {
+      continue;
+    }
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    assertFocus({ index: 3 }, "Focus on item 3");
+    assertSelection([2], "Item 2 is selected");
+    assertDragstart(3, [3], "Non-selected but focused item");
+
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    assertFocus({ index: 2 }, "Focus on item 2");
+    assertSelection([3], "Item 3 is selected");
+    assertDragstart(3, [3], "Selected but non-focused item");
+
+    // With mutli-selection.
+    if (model == "browse") {
+      continue;
+    }
+
+    // Clicking a non-selected item will change to selection to the single item
+    // before dragging.
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowRight", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertFocus({ index: 1 }, "Focus on item 1");
+    assertSelection([1, 3], "Multi selection");
+    assertDragstart(2, [2], "Selection moves to item 2 before drag");
+
+    // Clicking a selected item will keep the same selection for dragging.
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey("KEY_ArrowLeft", { ctrlKey: true }, win);
+    EventUtils.synthesizeKey(" ", { ctrlKey: true }, win);
+    assertFocus({ index: 4 }, "Focus on item 4");
+    assertSelection([2, 4], "Multi selection");
+    assertDragstart(
+      4,
+      [2, 4],
+      "Selection same when dragging selected and focused"
+    );
+    assertDragstart(
+      2,
+      [2, 4],
+      "Selection same when dragging selected and non-focussed"
+    );
+  }
+});
diff --git a/comm/mail/base/test/browser/browser_smartFolderDelete.js b/comm/mail/base/test/browser/browser_smartFolderDelete.js
new file mode 100644
index 0000000000..1c3f1fb59c
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_smartFolderDelete.js
@@ -0,0 +1,75 @@
+/* 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/. */
+
+const { VirtualFolderHelper } = ChromeUtils.import(
+  "resource:///modules/VirtualFolderWrapper.jsm"
+);
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const tabmail = document.getElementById("tabmail");
+const about3Pane = tabmail.currentAbout3Pane;
+
+let rootFolder;
+let inboxFolder;
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  rootFolder = account.incomingServer.rootFolder;
+  rootFolder.QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  // Set the active modes of the folder pane. In theory we only need the "smart"
+  // mode to test with, but in practice we also need the "all" mode to generate
+  // messages in folders.
+  about3Pane.folderPane.activeModes = ["all", "smart"];
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    about3Pane.folderPane.activeModes = ["all"];
+  });
+});
+
+/**
+ * Test deleting a message from a smart folder using
+ * gDBView.applyCommandToIndices.
+ */
+add_task(async function testDeleteViaDBViewCommand() {
+  // Create an inbox folder.
+  const inboxFolder = rootFolder
+    .createLocalSubfolder("testDeleteInbox")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  inboxFolder.setFlag(Ci.nsMsgFolderFlags.Inbox);
+
+  // Add a message to the folder.
+  const generator = new MessageGenerator();
+  inboxFolder.addMessage(generator.makeMessage().toMboxString());
+
+  // Create a smart folder from the inbox.
+  const smartInboxFolder = getSmartServer().rootFolder.getFolderWithFlags(
+    Ci.nsMsgFolderFlags.Inbox
+  );
+
+  // Switch the view to the smart folder.
+  about3Pane.displayFolder(smartInboxFolder.URI);
+
+  // Get the DB view and tree view to use to send the command and observe its
+  // effect.
+  const dbView = about3Pane.gDBView;
+  const treeView = dbView.QueryInterface(Ci.nsITreeView);
+
+  // Ensure we currently have one message.
+  Assert.equal(treeView.rowCount, 1, "should have one message before deleting");
+
+  // Delete the message using applyCommandToIndices.
+  dbView.applyCommandToIndices(Ci.nsMsgViewCommandType.deleteMsg, [0]);
+
+  // Test that the message has been deleted.
+  await TestUtils.waitForCondition(
+    () => treeView.rowCount === 0,
+    "there should be no remaining message in the tree"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_spacesToolbar.js b/comm/mail/base/test/browser/browser_spacesToolbar.js
new file mode 100644
index 0000000000..c2432a2131
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_spacesToolbar.js
@@ -0,0 +1,1173 @@
+/* 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/. */
+
+/**
+ * Test the spaces toolbar features.
+ */
+
+/* globals gSpacesToolbar */
+
+var folderA;
+var folderB;
+var testAccount;
+
+add_setup(function () {
+  // Set up two folders.
+  window.MailServices.accounts.createLocalMailAccount();
+  testAccount = window.MailServices.accounts.accounts[0];
+  let rootFolder = testAccount.incomingServer.rootFolder;
+  rootFolder.createSubfolder("spacesToolbarA", null);
+  folderA = rootFolder.findSubFolder("spacesToolbarA");
+  rootFolder.createSubfolder("spacesToolbarB", null);
+  folderB = rootFolder.findSubFolder("spacesToolbarB");
+});
+
+registerCleanupFunction(async () => {
+  window.MailServices.accounts.removeAccount(testAccount, true);
+  // Close all opened tabs.
+  let tabmail = document.getElementById("tabmail");
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+  // Reset the spaces toolbar to its default visible state.
+  window.gSpacesToolbar.toggleToolbar(false);
+  // Reset the menubar visibility.
+  let menubar = document.getElementById("toolbar-menubar");
+  menubar.removeAttribute("autohide");
+  menubar.removeAttribute("inactive");
+  await new Promise(resolve => requestAnimationFrame(resolve));
+});
+
+async function assertMailShown(win = window) {
+  await TestUtils.waitForCondition(
+    () =>
+      win.document.getElementById("tabmail").currentTabInfo.mode.name ==
+      "mail3PaneTab",
+    "The mail tab should be visible"
+  );
+}
+
+async function assertAddressBookShown(win = window) {
+  await TestUtils.waitForCondition(() => {
+    let panel = win.document.querySelector(
+      // addressBookTabWrapper0, addressBookTabWrapper1, etc
+      "#tabpanelcontainer > [id^=addressBookTabWrapper][selected]"
+    );
+    if (!panel) {
+      return false;
+    }
+    let browser = panel.querySelector("[id^=addressBookTabBrowser]");
+    return browser.contentDocument.readyState == "complete";
+  }, "The address book tab should be visible and loaded");
+}
+
+async function assertChatShown(win = window) {
+  await TestUtils.waitForCondition(
+    () => win.document.getElementById("chatTabPanel").hasAttribute("selected"),
+    "The chat tab should be visible"
+  );
+}
+
+async function assertCalendarShown(win = window) {
+  await TestUtils.waitForCondition(() => {
+    return (
+      win.document
+        .getElementById("calendarTabPanel")
+        .hasAttribute("selected") &&
+      !win.document.getElementById("calendar-view-box").collapsed
+    );
+  }, "The calendar view should be visible");
+}
+
+async function assertTasksShown(win = window) {
+  await TestUtils.waitForCondition(() => {
+    return (
+      win.document
+        .getElementById("calendarTabPanel")
+        .hasAttribute("selected") &&
+      !win.document.getElementById("calendar-task-box").collapsed
+    );
+  }, "The task view should be visible");
+}
+
+async function assertSettingsShown(win = window) {
+  await TestUtils.waitForCondition(() => {
+    let panel = win.document.querySelector(
+      // preferencesTabWrapper0, preferencesTabWrapper1, etc
+      "#tabpanelcontainer > [id^=preferencesTabWrapper][selected]"
+    );
+    if (!panel) {
+      return false;
+    }
+    let browser = panel.querySelector("[id^=preferencesTabBrowser]");
+    return browser.contentDocument.readyState == "complete";
+  }, "The settings tab should be visible and loaded");
+}
+
+async function assertContentShown(url, win = window) {
+  await TestUtils.waitForCondition(() => {
+    let panel = win.document.querySelector(
+      // contentTabWrapper0, contentTabWrapper1, etc
+      "#tabpanelcontainer > [id^=contentTabWrapper][selected]"
+    );
+    if (!panel) {
+      return false;
+    }
+    let doc = panel.querySelector("[id^=contentTabBrowser]").contentDocument;
+    return doc.URL == url && doc.readyState == "complete";
+  }, `The selected content tab should show ${url}`);
+}
+
+async function sub_test_cycle_through_primary_tabs() {
+  // We can't really cycle through all buttons and tabs with a simple for loop
+  // since some tabs are actual collapsing views and other tabs are separate
+  // pages. We can improve this once the new 3pane tab is actually a standalone
+  // tab.
+
+  // Switch to address book.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("addressBookButton"),
+    {},
+    window
+  );
+  await assertAddressBookShown();
+
+  // Switch to calendar.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("calendarButton"),
+    {},
+    window
+  );
+  await assertCalendarShown();
+
+  // Switch to Mail.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("mailButton"),
+    {},
+    window
+  );
+  await assertMailShown();
+
+  // Switch to Tasks.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("tasksButton"),
+    {},
+    window
+  );
+  await assertTasksShown();
+
+  // Switch to chat.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("chatButton"),
+    {},
+    window
+  );
+  await assertChatShown();
+
+  // Switch to Settings.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("settingsButton"),
+    {},
+    window
+  );
+  await assertSettingsShown();
+
+  // Switch to Mail.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("mailButton"),
+    {},
+    window
+  );
+  await assertMailShown();
+
+  window.tabmail.closeOtherTabs(window.tabmail.tabInfo[0]);
+}
+
+add_task(async function testSpacesToolbarVisibility() {
+  let spacesToolbar = document.getElementById("spacesToolbar");
+  let toggleButton = document.getElementById("spacesToolbarReveal");
+  let pinnedButton = document.getElementById("spacesPinnedButton");
+  Assert.ok(spacesToolbar, "The spaces toolbar exists");
+
+  let assertVisibility = async function (isHidden, msg) {
+    await TestUtils.waitForCondition(
+      () => spacesToolbar.hidden == !isHidden,
+      `The spaces toolbar should be ${!isHidden ? "visible" : "hidden"}: ${msg}`
+    );
+
+    await TestUtils.waitForCondition(
+      () => toggleButton.hidden == isHidden,
+      `The toggle button should be ${isHidden ? "hidden" : "visible"}: ${msg}`
+    );
+
+    await TestUtils.waitForCondition(
+      () => pinnedButton.hidden == isHidden,
+      `The pinned button should be ${isHidden ? "hidden" : "visible"}: ${msg}`
+    );
+  };
+
+  async function toggleVisibilityWithAppMenu(expectChecked) {
+    let appMenu = document.getElementById("appMenu-popup");
+    let menuShownPromise = BrowserTestUtils.waitForEvent(appMenu, "popupshown");
+    EventUtils.synthesizeMouseAtCenter(
+      document.getElementById("button-appmenu"),
+      {},
+      window
+    );
+    await menuShownPromise;
+
+    let viewShownPromise = BrowserTestUtils.waitForEvent(
+      appMenu.querySelector("#appMenu-viewView"),
+      "ViewShown"
+    );
+    EventUtils.synthesizeMouseAtCenter(
+      appMenu.querySelector("#appmenu_View"),
+      {},
+      window
+    );
+    await viewShownPromise;
+
+    let toolbarShownPromise = BrowserTestUtils.waitForEvent(
+      appMenu.querySelector("#appMenu-toolbarsView"),
+      "ViewShown"
+    );
+    EventUtils.synthesizeMouseAtCenter(
+      appMenu.querySelector("#appmenu_Toolbars"),
+      {},
+      window
+    );
+    await toolbarShownPromise;
+
+    let appMenuButton = document.getElementById("appmenu_spacesToolbar");
+    Assert.equal(
+      appMenuButton.checked,
+      expectChecked,
+      `The app menu item should ${expectChecked ? "not " : ""}be checked`
+    );
+
+    EventUtils.synthesizeMouseAtCenter(appMenuButton, {}, window);
+
+    // Close the appmenu.
+    EventUtils.synthesizeMouseAtCenter(
+      document.getElementById("button-appmenu"),
+      {},
+      window
+    );
+  }
+  await assertVisibility(true, "on initial load");
+
+  // Collapse with a mouse click.
+  let activeElement = document.activeElement;
+  let collapseButton = document.getElementById("collapseButton");
+  EventUtils.synthesizeMouseAtCenter(collapseButton, {}, window);
+  await assertVisibility(false, "after clicking collapse button");
+
+  await toggleVisibilityWithAppMenu(false);
+  await assertVisibility(true, "after revealing with the app menu");
+
+  // We already clicked the collapse button, so it should already be the
+  // focusButton for the gSpacesToolbar, and thus focusable.
+  collapseButton.focus();
+  Assert.ok(
+    collapseButton.matches(":focus"),
+    "Collapse button should be focusable"
+  );
+
+  // Hide the spaces toolbar using the collapse button, which already has focus.
+  EventUtils.synthesizeKey(" ", {}, window);
+  await assertVisibility(false, "after closing with space key press");
+  Assert.ok(
+    pinnedButton.matches(":focus"),
+    "Pinned button should be focused after closing with a key press"
+  );
+
+  // Show using the pinned button menu.
+  let pinnedMenu = document.getElementById("spacesButtonMenuPopup");
+  let pinnedMenuShown = BrowserTestUtils.waitForEvent(pinnedMenu, "popupshown");
+  EventUtils.synthesizeKey("KEY_Enter", {}, window);
+  await pinnedMenuShown;
+  pinnedMenu.activateItem(document.getElementById("spacesPopupButtonReveal"));
+
+  await assertVisibility(true, "after opening with pinned menu");
+  Assert.ok(
+    collapseButton.matches(":focus"),
+    "Collapse button should be focused again after showing with the pinned menu"
+  );
+
+  // Move focus to the mail button.
+  let mailButton = document.getElementById("mailButton");
+  // Loop around from the collapse button to the mailButton.
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, window);
+
+  Assert.ok(
+    mailButton.matches(":focus"),
+    "Mail button should become focused after pressing key down"
+  );
+  Assert.ok(
+    spacesToolbar.matches(":focus-within"),
+    "Spaces toolbar should contain the focus"
+  );
+
+  // Now move focus elsewhere.
+  EventUtils.synthesizeKey("KEY_Tab", {}, window);
+  activeElement = document.activeElement;
+  Assert.ok(
+    !mailButton.matches(":focus"),
+    "Mail button should no longer be focused"
+  );
+  Assert.ok(
+    !spacesToolbar.matches(":focus-within"),
+    "Spaces toolbar should no longer contain the focus"
+  );
+
+  // Hide the spaces toolbar using the app menu.
+  await toggleVisibilityWithAppMenu(true);
+  await assertVisibility(false, "after hiding with the app menu");
+
+  // macOS by default doesn't move the focus when clicking on toolbar buttons.
+  if (AppConstants.platform != "macosx") {
+    Assert.notEqual(
+      document.activeElement,
+      activeElement,
+      "The focus moved from the previous element"
+    );
+    // Focus should be on the main app menu since we used the mouse to toggle the
+    // spaces toolbar.
+    Assert.equal(
+      document.activeElement,
+      document.getElementById("button-appmenu"),
+      "Active element is on the app menu"
+    );
+  } else {
+    Assert.equal(
+      document.activeElement,
+      activeElement,
+      "The focus didn't move from the previous element"
+    );
+  }
+
+  // Now click the status bar toggle button to reveal the toolbar again.
+  toggleButton.focus();
+  Assert.ok(
+    toggleButton.matches(":focus"),
+    "Toggle button should be focusable"
+  );
+  EventUtils.synthesizeKey("KEY_Enter", {}, window);
+  await assertVisibility(true, "after showing with the toggle button");
+  // Focus is restored to the mailButton.
+  Assert.ok(
+    mailButton.matches(":focus"),
+    "Mail button should become focused again"
+  );
+
+  // Clicked buttons open or move to the correct tab, starting with just one tab
+  // open.
+  await sub_test_cycle_through_primary_tabs();
+});
+
+add_task(async function testSpacesToolbarContextMenu() {
+  let tabmail = document.getElementById("tabmail");
+  let firstMailTabInfo = tabmail.currentTabInfo;
+  firstMailTabInfo.folder = folderB;
+
+  // Fetch context menu elements.
+  let contextMenu = document.getElementById("spacesContextMenu");
+  let newTabItem = document.getElementById("spacesContextNewTabItem");
+  let newWindowItem = document.getElementById("spacesContextNewWindowItem");
+
+  let settingsMenu = document.getElementById("settingsContextMenu");
+  let settingsItem = document.getElementById("settingsContextOpenSettingsItem");
+  let accountItem = document.getElementById(
+    "settingsContextOpenAccountSettingsItem"
+  );
+  let addonsItem = document.getElementById("settingsContextOpenAddonsItem");
+
+  /**
+   * Open the context menu, test its state, select an action and wait for it to
+   * close.
+   *
+   * @param {object} input - Input data.
+   * @param {Element} input.button - The button whose context menu should be
+   *   opened.
+   * @param {Element} [input.item] - The context menu item to select. Either
+   *   this or switchItem must be given.
+   * @param {number} [input.switchItem] - The nth switch-to-tab item to select.
+   * @param {object} expect - The expected state of the context menu when
+   *   opened.
+   * @param {boolean} [expect.settings=false] - Whether we expect the settings
+   *   context menu. If this is true, the other values are ignored.
+   * @param {boolean} [expect.newTab=false] - Whether we expect the "Open in new
+   *   tab" item to be visible.
+   * @param {boolean} [expect.newWindow=false] - Whether we expect the "Open in
+   *   new window" item to be visible.
+   * @param {number} [expect.numSwitch=0] - The expected number of switch-to-tab
+   *   items.
+   * @param {string} msg - A message to use in tests.
+   */
+  async function useContextMenu(input, expect, msg) {
+    let menu = expect.settings ? settingsMenu : contextMenu;
+    let shownPromise = BrowserTestUtils.waitForEvent(menu, "popupshown");
+    EventUtils.synthesizeMouseAtCenter(
+      input.button,
+      { type: "contextmenu" },
+      window
+    );
+    await shownPromise;
+    let item = input.item;
+    if (!expect.settings) {
+      Assert.equal(
+        BrowserTestUtils.is_visible(newTabItem),
+        expect.newTab || false,
+        `Open in new tab item visibility: ${msg}`
+      );
+      Assert.equal(
+        BrowserTestUtils.is_visible(newWindowItem),
+        expect.newWindow || false,
+        `Open in new window item visibility: ${msg}`
+      );
+      let switchItems = menu.querySelectorAll(".switch-to-tab");
+      Assert.equal(
+        switchItems.length,
+        expect.numSwitch || 0,
+        `Should have the expected number of switch items: ${msg}`
+      );
+      if (!item) {
+        item = switchItems[input.switchItem];
+      }
+    }
+    let hiddenPromise = BrowserTestUtils.waitForEvent(menu, "popuphidden");
+    menu.activateItem(item);
+    await hiddenPromise;
+  }
+
+  let tabScroll = document.getElementById("tabmail-arrowscrollbox").scrollbox;
+  /**
+   * Ensure the tab is scrolled into view.
+   *
+   * @param {MozTabmailTab} - The tab to scroll into view.
+   */
+  async function scrollToTab(tab) {
+    function tabInView() {
+      let tabRect = tab.getBoundingClientRect();
+      let scrollRect = tabScroll.getBoundingClientRect();
+      return (
+        tabRect.left >= scrollRect.left && tabRect.right <= scrollRect.right
+      );
+    }
+    if (tabInView()) {
+      info(`Tab ${tab.label} already in view`);
+      return;
+    }
+    tab.scrollIntoView();
+    await TestUtils.waitForCondition(
+      tabInView,
+      "Tab should be scrolled into view: " + tab.label
+    );
+    info(`Tab ${tab.label} was scrolled into view`);
+  }
+
+  let numTabs = 0;
+  /**
+   * Wait for and return the latest tab.
+   *
+   * This should be called every time a tab is created so the test can keep
+   * track of the expected number of tabs.
+   *
+   * @returns {MozTabmailTab} - The last tab.
+   */
+  async function waitForNewTab() {
+    numTabs++;
+    let tabs;
+    await TestUtils.waitForCondition(() => {
+      tabs = document.querySelectorAll("tab.tabmail-tab");
+      return tabs.length == numTabs;
+    }, `Waiting for ${numTabs} tabs`);
+    return tabs[numTabs - 1];
+  }
+
+  /**
+   * Close a tab and wait for it to close.
+   *
+   * This should be used alongside waitForNewTab so the test can keep track of
+   * the expected number of tabs.
+   *
+   * @param {MozTabmailTab} - The tab to close.
+   */
+  async function closeTab(tab) {
+    numTabs--;
+    await scrollToTab(tab);
+    EventUtils.synthesizeMouseAtCenter(
+      tab.querySelector(".tab-close-button"),
+      {},
+      window
+    );
+    await TestUtils.waitForCondition(
+      () => document.querySelectorAll("tab.tabmail-tab").length == numTabs,
+      "Waiting for tab to close"
+    );
+  }
+
+  let toolbar = document.getElementById("spacesToolbar");
+  /**
+   * Verify the current tab and space match.
+   *
+   * @param {MozTabmailTab} tab - The expected tab.
+   * @param {Element} spaceButton - The expected button to be shown as the
+   *   current space in the spaces toolbar.
+   * @param {string} msg - A message to use in tests.
+   */
+  async function assertTab(tab, spaceButton, msg) {
+    await TestUtils.waitForCondition(
+      () => tab.selected,
+      `Tab should be selected: ${msg}`
+    );
+    let current = toolbar.querySelectorAll("button.current");
+    Assert.equal(current.length, 1, `Should have one current space: ${msg}`);
+    Assert.equal(
+      current[0],
+      spaceButton,
+      `Current button ${current[0].id} should match: ${msg}`
+    );
+  }
+
+  /**
+   * Click on a tab and verify we have switched tabs and spaces.
+   *
+   * @param {MozTabmailTab} tab - The tab to click.
+   * @param {Element} spaceButton - The expected button to be shown as the
+   *   current space after clicking the tab.
+   * @param {string} msg - A message to use in tests.
+   */
+  async function switchTab(tab, spaceButton, msg) {
+    await scrollToTab(tab);
+    EventUtils.synthesizeMouseAtCenter(tab, {}, window);
+    await assertTab(tab, spaceButton, msg);
+  }
+
+  // -- Test initial tab --
+
+  let mailButton = document.getElementById("mailButton");
+  let firstTab = await waitForNewTab();
+  await assertTab(firstTab, mailButton, "First tab is mail tab");
+  await assertMailShown();
+
+  // -- Test spaces that only open one tab --
+
+  let calendarTab;
+  let calendarButton = document.getElementById("calendarButton");
+  for (let { name, button, assertShown } of [
+    {
+      name: "address book",
+      button: document.getElementById("addressBookButton"),
+      assertShown: assertAddressBookShown,
+    },
+    {
+      name: "calendar",
+      button: calendarButton,
+      assertShown: assertCalendarShown,
+    },
+    {
+      name: "tasks",
+      button: document.getElementById("tasksButton"),
+      assertShown: assertTasksShown,
+    },
+    {
+      name: "chat",
+      button: document.getElementById("chatButton"),
+      assertShown: assertChatShown,
+    },
+  ]) {
+    info(`Testing ${name} space`);
+    // Only have option to open in new tab.
+    await useContextMenu(
+      { button, item: newTabItem },
+      { newTab: true },
+      `Opening ${name} tab`
+    );
+    let newTab = await waitForNewTab();
+    if (name == "calendar") {
+      calendarTab = newTab;
+    }
+    await assertTab(newTab, button, `Opened ${name} tab`);
+    await assertShown();
+    // Only have option to switch tabs.
+    // Doing this from the same tab does nothing.
+    await useContextMenu(
+      { button, switchItem: 0 },
+      { numSwitch: 1 },
+      `When ${name} tab is open`
+    );
+    // Wait one tick to allow tabs to potentially change.
+    await TestUtils.waitForTick();
+    // However, the same tab should remain shown.
+    await assertShown();
+
+    // Switch to first tab and back.
+    await switchTab(firstTab, mailButton, `${name} to first tab`);
+    await assertMailShown();
+    await useContextMenu(
+      { button, switchItem: 0 },
+      { numSwitch: 1 },
+      `Switching from first tab to ${name}`
+    );
+    await assertTab(newTab, button, `Switched from first tab to ${name}`);
+    await assertShown();
+  }
+
+  // -- Test opening mail space in a new tab --
+
+  // Open new mail tabs whilst we are still in a non-mail tab.
+  await useContextMenu(
+    { button: mailButton, item: newTabItem },
+    { newWindow: true, newTab: true, numSwitch: 1 },
+    "Opening the second mail tab"
+  );
+  let secondMailTab = await waitForNewTab();
+  await assertTab(secondMailTab, mailButton, "Opened second mail tab");
+  await assertMailShown();
+  // Displayed folder should be the same as in the first mail tab.
+  let [, secondMailTabInfo] =
+    tabmail._getTabContextForTabbyThing(secondMailTab);
+  await TestUtils.waitForCondition(
+    () => secondMailTabInfo.folder?.URI == folderB.URI,
+    "Should display folder B in the second mail tab"
+  );
+
+  secondMailTabInfo.folder = folderA;
+
+  // Open a new mail tab whilst in a mail tab.
+  await useContextMenu(
+    { button: mailButton, item: newTabItem },
+    { newWindow: true, newTab: true, numSwitch: 2 },
+    "Opening the third mail tab"
+  );
+  let thirdMailTab = await waitForNewTab();
+  await assertTab(thirdMailTab, mailButton, "Opened third mail tab");
+  await assertMailShown();
+  // Displayed folder should be the same as in the mail tab that was in view
+  // when the context menu was opened, rather than the folder in the first tab.
+  let [, thirdMailTabInfo] = tabmail._getTabContextForTabbyThing(thirdMailTab);
+  await TestUtils.waitForCondition(
+    () => thirdMailTabInfo.folder?.URI == folderA.URI,
+    "Should display folder A in the third mail tab"
+  );
+
+  // -- Test switching between the multiple mail tabs --
+
+  await useContextMenu(
+    { button: mailButton, switchItem: 1 },
+    { newWindow: true, newTab: true, numSwitch: 3 },
+    "Switching to second mail tab"
+  );
+  await assertTab(secondMailTab, mailButton, "Switch to second mail tab");
+  await assertMailShown();
+  await useContextMenu(
+    { button: mailButton, switchItem: 0 },
+    { newWindow: true, newTab: true, numSwitch: 3 },
+    "Switching to first mail tab"
+  );
+  await assertTab(firstTab, mailButton, "Switch to first mail tab");
+  await assertMailShown();
+
+  await switchTab(calendarTab, calendarButton, "First mail to calendar tab");
+  await useContextMenu(
+    { button: mailButton, switchItem: 2 },
+    { newWindow: true, newTab: true, numSwitch: 3 },
+    "Switching to third mail tab"
+  );
+  await assertTab(thirdMailTab, mailButton, "Switch to third mail tab");
+  await assertMailShown();
+
+  // -- Test the mail button with multiple mail tabs --
+
+  // Clicking the mail button whilst in the mail space does nothing.
+  // Specifically, we do not want it to take us to the first tab.
+  EventUtils.synthesizeMouseAtCenter(mailButton, {}, window);
+  // Wait one cycle to see if the tab would change.
+  await TestUtils.waitForTick();
+  await assertTab(thirdMailTab, mailButton, "Remain in third tab");
+  await assertMailShown();
+  Assert.equal(
+    thirdMailTabInfo.folder.URI,
+    folderA.URI,
+    "Still display folder A in the third mail tab"
+  );
+
+  // Clicking the mail button whilst in a different space takes us to the first
+  // mail tab.
+  await switchTab(calendarTab, calendarButton, "Third mail to calendar tab");
+  EventUtils.synthesizeMouseAtCenter(mailButton, {}, window);
+  await assertTab(firstTab, mailButton, "Switch to the first mail tab");
+  await assertMailShown();
+  Assert.equal(
+    firstMailTabInfo.folder.URI,
+    folderB.URI,
+    "Still display folder B in the first mail tab"
+  );
+
+  // -- Test opening the mail space in a new window --
+
+  let windowPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+  await useContextMenu(
+    { button: mailButton, item: newWindowItem },
+    { newWindow: true, newTab: true, numSwitch: 3 },
+    "Opening mail tab in new window"
+  );
+  let newMailWindow = await windowPromise;
+  let newTabmail = newMailWindow.document.getElementById("tabmail");
+  // Expect the same folder as the previously focused tab.
+  await TestUtils.waitForCondition(
+    () => newTabmail.currentTabInfo.folder?.URI == folderB.URI,
+    "Waiting for folder B to be displayed in the new window"
+  );
+  Assert.equal(
+    newMailWindow.document.querySelectorAll("tab.tabmail-tab").length,
+    1,
+    "Should only have one tab in the new window"
+  );
+  await assertMailShown(newMailWindow);
+
+  // -- Test opening different tabs that belong to the settings space --
+
+  let settingsButton = document.getElementById("settingsButton");
+  await useContextMenu(
+    { button: settingsButton, item: accountItem },
+    { settings: true },
+    "Opening account settings"
+  );
+  let accountTab = await waitForNewTab();
+  // Shown as part of the settings space.
+  await assertTab(accountTab, settingsButton, "Opened account settings tab");
+  await assertContentShown("about:accountsettings");
+
+  await useContextMenu(
+    { button: settingsButton, item: settingsItem },
+    { settings: true },
+    "Opening settings"
+  );
+  let settingsTab = await waitForNewTab();
+  // Shown as part of the settings space.
+  await assertTab(settingsTab, settingsButton, "Opened settings tab");
+  await assertSettingsShown();
+
+  await useContextMenu(
+    { button: settingsButton, item: addonsItem },
+    { settings: true },
+    "Opening add-ons"
+  );
+  let addonsTab = await waitForNewTab();
+  // Shown as part of the settings space.
+  await assertTab(addonsTab, settingsButton, "Opened add-ons tab");
+  await assertContentShown("about:addons");
+
+  // -- Test the settings button with multiple settings tabs --
+
+  // Clicking the settings button whilst in the settings space does nothing.
+  EventUtils.synthesizeMouseAtCenter(settingsButton, {}, window);
+  // Wait one cycle to see if the tab would change.
+  await TestUtils.waitForTick();
+  await assertTab(addonsTab, settingsButton, "Remain in add-ons tab");
+  await assertContentShown("about:addons");
+
+  // Clicking the settings button whilst in a different space takes us to the
+  // settings tab, rather than the first tab, since this is the primary tab for
+  // the space.
+  await switchTab(calendarTab, calendarButton, "Add-ons to calendar tab");
+  EventUtils.synthesizeMouseAtCenter(settingsButton, {}, window);
+  await assertTab(settingsTab, settingsButton, "Switch to the settings tab");
+  await assertSettingsShown();
+
+  // Clicking the settings button whilst in a different space and no settings
+  // tab will open a new settings tab, rather than switch to another tab in the
+  // settings space because they are not the primary tab for the space.
+  await closeTab(settingsTab);
+  await switchTab(calendarTab, calendarButton, "Settings to calendar tab");
+  EventUtils.synthesizeMouseAtCenter(settingsButton, {}, window);
+  settingsTab = await waitForNewTab();
+  await assertTab(settingsTab, settingsButton, "Re-opened settings tab");
+  await assertSettingsShown();
+
+  // -- Test opening different settings tabs when they already exist --
+
+  await useContextMenu(
+    { button: settingsButton, item: addonsItem },
+    { settings: true },
+    "Switching to add-ons"
+  );
+  await assertTab(addonsTab, settingsButton, "Switched to add-ons");
+  await assertContentShown("about:addons");
+
+  await useContextMenu(
+    { button: settingsButton, item: accountItem },
+    { settings: true },
+    "Switching to account settings"
+  );
+  await assertTab(accountTab, settingsButton, "Switched to account settings");
+  await assertContentShown("about:accountsettings");
+
+  await useContextMenu(
+    { button: settingsButton, item: settingsItem },
+    { settings: true },
+    "Switching to settings"
+  );
+  await assertTab(settingsTab, settingsButton, "Switched to settings");
+  await assertSettingsShown();
+
+  // -- Test clicking the spaces buttons when all the tabs are already open.
+
+  await sub_test_cycle_through_primary_tabs();
+
+  // Tidy up the opened window.
+  // FIXME: Closing the window earlier in the test causes a test failure on the
+  // osx build on the try server.
+  await BrowserTestUtils.closeWindow(newMailWindow);
+});
+
+add_task(async function testSpacesToolbarMenubar() {
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+  let spacesToolbar = document.getElementById("spacesToolbar");
+
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("collapseButton"),
+    {},
+    window
+  );
+  Assert.ok(spacesToolbar.hidden, "The spaces toolbar is hidden");
+  Assert.ok(
+    !document.getElementById("spacesToolbarReveal").hidden,
+    "The status bar toggle button is visible"
+  );
+
+  // Test the menubar button.
+  let viewShownPromise = BrowserTestUtils.waitForEvent(
+    document.getElementById("menu_View_Popup"),
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("menu_View"),
+    {},
+    window
+  );
+  await viewShownPromise;
+
+  let toolbarsShownPromise = BrowserTestUtils.waitForEvent(
+    document.getElementById("view_toolbars_popup"),
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("menu_Toolbars"),
+    {},
+    window
+  );
+  await toolbarsShownPromise;
+
+  let menuButton = document.getElementById("viewToolbarsPopupSpacesToolbar");
+  Assert.ok(
+    menuButton.getAttribute("checked") != "true",
+    "The menu item is not checked"
+  );
+
+  let viewHiddenPromise = BrowserTestUtils.waitForEvent(
+    document.getElementById("menu_View_Popup"),
+    "popuphidden"
+  );
+  EventUtils.synthesizeMouseAtCenter(menuButton, {}, window);
+  await viewHiddenPromise;
+
+  Assert.ok(
+    menuButton.getAttribute("checked") == "true",
+    "The menu item is checked"
+  );
+}).__skipMe = AppConstants.platform == "macosx"; // Can't click menu bar on Mac.
+
+add_task(async function testSpacesToolbarOSX() {
+  let size = document
+    .getElementById("spacesToolbar")
+    .getBoundingClientRect().width;
+
+  // By default, macOS shouldn't need any custom styling.
+  Assert.ok(
+    !document.getElementById("titlebar").hasAttribute("style"),
+    "The custom styling was cleared from all toolbars"
+  );
+
+  let styleAppliedPromise = BrowserTestUtils.waitForCondition(
+    () =>
+      document.getElementById("tabmail-tabs").getAttribute("style") ==
+      `margin-inline-start: ${size}px;`,
+    "The correct style was applied to the tabmail"
+  );
+
+  // Force full screen.
+  window.fullScreen = true;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await styleAppliedPromise;
+
+  let styleRemovedPromise = BrowserTestUtils.waitForCondition(
+    () => !document.getElementById("tabmail-tabs").hasAttribute("style"),
+    "The custom styling was cleared from all toolbars"
+  );
+  // Restore original window size.
+  window.fullScreen = false;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await styleRemovedPromise;
+}).__skipMe = AppConstants.platform != "macosx";
+
+add_task(async function testSpacesToolbarClearedAlignment() {
+  // Hide the spaces toolbar to check if the style it's cleared.
+  window.gSpacesToolbar.toggleToolbar(true);
+  Assert.ok(
+    !document.getElementById("titlebar").hasAttribute("style") &&
+      !document.getElementById("navigation-toolbox").hasAttribute("style"),
+    "The custom styling was cleared from all toolbars"
+  );
+});
+
+add_task(async function testSpacesToolbarExtension() {
+  window.gSpacesToolbar.toggleToolbar(false);
+
+  for (let i = 0; i < 6; i++) {
+    await window.gSpacesToolbar.createToolbarButton(`testButton${i}`, {
+      title: `Title ${i}`,
+      url: `https://test.invalid/${i}`,
+      iconStyles: new Map([
+        [
+          "--webextension-toolbar-image",
+          'url("chrome://messenger/content/extension.svg")',
+        ],
+      ]),
+    });
+    let button = document.getElementById(`testButton${i}`);
+    Assert.ok(button);
+    Assert.equal(button.title, `Title ${i}`);
+
+    let img = button.querySelector("img");
+    Assert.equal(
+      img.style.getPropertyValue("--webextension-toolbar-image"),
+      `url("chrome://messenger/content/extension.svg")`,
+      `Button image should have the correct icon.`
+    );
+
+    let menuitem = document.getElementById(`testButton${i}-menuitem`);
+    Assert.ok(menuitem);
+    Assert.equal(menuitem.label, `Title ${i}`);
+    Assert.equal(
+      menuitem.style.getPropertyValue("--webextension-toolbar-image"),
+      `url("chrome://messenger/content/extension.svg")`,
+      `Menuitem should have the correct icon.`
+    );
+
+    let space = window.gSpacesToolbar.spaces.find(
+      space => space.name == `testButton${i}`
+    );
+    Assert.ok(space);
+    Assert.equal(
+      space.url,
+      `https://test.invalid/${i}`,
+      "Added url should be correct."
+    );
+  }
+
+  for (let i = 0; i < 6; i++) {
+    await window.gSpacesToolbar.updateToolbarButton(`testButton${i}`, {
+      title: `Modified Title ${i}`,
+      url: `https://test.invalid/${i + 1}`,
+      iconStyles: new Map([
+        [
+          "--webextension-toolbar-image",
+          'url("chrome://messenger/skin/icons/new-addressbook.svg")',
+        ],
+      ]),
+    });
+    let button = document.getElementById(`testButton${i}`);
+    Assert.ok(button);
+    Assert.equal(button.title, `Modified Title ${i}`);
+
+    let img = button.querySelector("img");
+    Assert.equal(
+      img.style.getPropertyValue("--webextension-toolbar-image"),
+      `url("chrome://messenger/skin/icons/new-addressbook.svg")`,
+      `Button image should have the correct icon.`
+    );
+
+    let menuitem = document.getElementById(`testButton${i}-menuitem`);
+    Assert.ok(menuitem);
+    Assert.equal(
+      menuitem.label,
+      `Modified Title ${i}`,
+      "Updated title should be correct."
+    );
+    Assert.equal(
+      menuitem.style.getPropertyValue("--webextension-toolbar-image"),
+      `url("chrome://messenger/skin/icons/new-addressbook.svg")`,
+      `Menuitem should have the correct icon.`
+    );
+
+    let space = window.gSpacesToolbar.spaces.find(
+      space => space.name == `testButton${i}`
+    );
+    Assert.ok(space);
+    Assert.equal(
+      space.url,
+      `https://test.invalid/${i + 1}`,
+      "Updated url should be correct."
+    );
+  }
+
+  let overflowButton = document.getElementById(
+    "spacesToolbarAddonsOverflowButton"
+  );
+
+  let originalHeight = window.outerHeight;
+  // Set a ridiculous tiny height to be sure all add-on buttons are hidden.
+  window.resizeTo(window.outerWidth, 300);
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  await BrowserTestUtils.waitForCondition(
+    () => !overflowButton.hidden,
+    "The overflow button is visible"
+  );
+
+  let overflowPopup = document.getElementById("spacesToolbarAddonsPopup");
+  let popupshown = BrowserTestUtils.waitForEvent(overflowPopup, "popupshown");
+  overflowButton.click();
+  await popupshown;
+
+  Assert.ok(overflowPopup.hasChildNodes());
+
+  let popuphidden = BrowserTestUtils.waitForEvent(overflowPopup, "popuphidden");
+  // Restore the original height.
+  window.resizeTo(window.outerWidth, originalHeight);
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  await popuphidden;
+  await BrowserTestUtils.waitForCondition(
+    () => overflowButton.hidden,
+    "The overflow button is hidden"
+  );
+
+  // Remove all previously added toolbar buttons and make sure all previously
+  // generate elements are properly cleared.
+  for (let i = 0; i < 6; i++) {
+    await window.gSpacesToolbar.removeToolbarButton(`testButton${i}`);
+    let space = window.gSpacesToolbar.spaces.find(
+      space => space.name == `testButton${i}`
+    );
+    Assert.ok(!space);
+
+    let button = document.getElementById(`testButton${i}`);
+    Assert.ok(!button);
+
+    let menuitem = document.getElementById(`testButton${i}-menuitem`);
+    Assert.ok(!menuitem);
+  }
+});
+
+add_task(function testPinnedSpacesBadge() {
+  window.gSpacesToolbar.toggleToolbar(true);
+  let spacesPinnedButton = document.getElementById("spacesPinnedButton");
+  let spacesPopupButtonChat = document.getElementById("spacesPopupButtonChat");
+
+  window.gSpacesToolbar.updatePinnedBadgeState();
+
+  Assert.ok(
+    !spacesPinnedButton.classList.contains("has-badge"),
+    "Pinned button does not indicate badged items without any"
+  );
+
+  spacesPopupButtonChat.classList.add("has-badge");
+  window.gSpacesToolbar.updatePinnedBadgeState();
+
+  Assert.ok(
+    spacesPinnedButton.classList.contains("has-badge"),
+    "Pinned button indicates it has badged items"
+  );
+
+  spacesPopupButtonChat.classList.remove("has-badge");
+  window.gSpacesToolbar.updatePinnedBadgeState();
+
+  Assert.ok(
+    !spacesPinnedButton.classList.contains("has-badge"),
+    "Badge state is reset from pinned button"
+  );
+});
+
+add_task(async function testSpacesToolbarFocusRing() {
+  // Make sure the spaces toolbar is visible.
+  window.gSpacesToolbar.toggleToolbar(false);
+  // Move the focus ring on the mail toolbar button.
+  document.getElementById("mailButton").focus();
+
+  // Collect an array of all currently visible buttons.
+  let buttons = [
+    ...document.querySelectorAll(".spaces-toolbar-button:not([hidden])"),
+  ];
+
+  // Simulate the Arrow Down keypress to make sure the correct button gets the
+  // focus.
+  for (let i = 1; i < buttons.length; i++) {
+    let previousElement = document.activeElement;
+    EventUtils.synthesizeKey("KEY_ArrowDown", {}, window);
+    Assert.equal(
+      document.activeElement.id,
+      buttons[i].id,
+      "The next button is focused"
+    );
+    Assert.ok(
+      document.activeElement.tabIndex == 0 && previousElement.tabIndex == -1,
+      "The roving tab index was updated"
+    );
+  }
+
+  // Do the same with the Arrow Up key press but reversing the array.
+  buttons.reverse();
+  for (let i = 1; i < buttons.length; i++) {
+    let previousElement = document.activeElement;
+    EventUtils.synthesizeKey("KEY_ArrowUp", {}, window);
+    Assert.equal(
+      document.activeElement.id,
+      buttons[i].id,
+      "The previous button is focused"
+    );
+    Assert.ok(
+      document.activeElement.tabIndex == 0 && previousElement.tabIndex == -1,
+      "The roving tab index was updated"
+    );
+  }
+
+  // Pressing the END key should move the focus down to the last available
+  // button.
+  EventUtils.synthesizeKey("KEY_End", {}, window);
+  Assert.equal(
+    document.activeElement.id,
+    "collapseButton",
+    "The last button is focused"
+  );
+
+  // Pressing the HOME key should move the focus up to the first available
+  // button.
+  EventUtils.synthesizeKey("KEY_Home", {}, window);
+  Assert.equal(
+    document.activeElement.id,
+    "mailButton",
+    "The first button is focused"
+  );
+
+  // Focus follows the mouse click.
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("calendarButton"),
+    {},
+    window
+  );
+  Assert.equal(
+    document.activeElement.id,
+    "calendarButton",
+    "Focus should move to the clicked calendar button"
+  );
+
+  // Now press a key to make sure roving index was updated with the click.
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, window);
+  Assert.equal(
+    document.activeElement.id,
+    "tasksButton",
+    "Focus should move to the tasks button"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_spacesToolbarCustomize.js b/comm/mail/base/test/browser/browser_spacesToolbarCustomize.js
new file mode 100644
index 0000000000..7fc2cc3ae5
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_spacesToolbarCustomize.js
@@ -0,0 +1,119 @@
+/* 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/. */
+
+/**
+ * Test the spaces toolbar customization features.
+ */
+
+const BACKGROUND = "#f00000";
+const ICON = "#00ff0b";
+const ACCENT = "#0300ff";
+const ACCENT_ICON = "#fff600";
+
+const INPUTS = {
+  spacesBackgroundColor: BACKGROUND,
+  spacesIconsColor: ICON,
+  spacesAccentTextColor: ACCENT,
+  spacesAccentBgColor: ACCENT_ICON,
+};
+
+registerCleanupFunction(async () => {
+  // Reset all colors.
+  window.gSpacesToolbar.resetColorCustomization();
+  window.gSpacesToolbar.closeCustomize();
+});
+
+async function sub_test_open_customize_panel() {
+  // Open the panel.
+  let menu = document.getElementById("spacesToolbarContextMenu");
+  let shownPromise = BrowserTestUtils.waitForEvent(menu, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    document.getElementById("spacesToolbar"),
+    { type: "contextmenu" },
+    window
+  );
+  await shownPromise;
+
+  let panel = document.getElementById("spacesToolbarCustomizationPanel");
+  let panelShownPromise = BrowserTestUtils.waitForEvent(panel, "popupshown");
+  menu.activateItem(document.getElementById("spacesToolbarContextCustomize"));
+  await panelShownPromise;
+}
+
+function sub_test_apply_colors_to_inputs() {
+  for (let key in INPUTS) {
+    let input = document.getElementById(`${key}`);
+    input.value = INPUTS[key];
+    // We need to force dispatch the onchange event otherwise the listener won't
+    // fire since we're programmatically changing the color value.
+    input.dispatchEvent(new Event("change"));
+  }
+}
+
+/**
+ * Check the current state of the custom color properties applied to the
+ * document style.
+ *
+ * @param {boolean} empty - If the style properties should be empty or filled.
+ */
+function sub_test_check_for_style_properties(empty) {
+  let style = document.documentElement.style;
+  if (empty) {
+    Assert.equal(style.getPropertyValue("--spaces-bg-color"), "");
+    Assert.equal(style.getPropertyValue("--spaces-button-text-color"), "");
+    Assert.equal(
+      style.getPropertyValue("--spaces-button-active-text-color"),
+      ""
+    );
+    Assert.equal(style.getPropertyValue("--spaces-button-active-bg-color"), "");
+    return;
+  }
+
+  Assert.equal(style.getPropertyValue("--spaces-bg-color"), BACKGROUND);
+  Assert.equal(style.getPropertyValue("--spaces-button-text-color"), ICON);
+  Assert.equal(
+    style.getPropertyValue("--spaces-button-active-text-color"),
+    ACCENT
+  );
+  Assert.equal(
+    style.getPropertyValue("--spaces-button-active-bg-color"),
+    ACCENT_ICON
+  );
+}
+
+add_task(async function testSpacesToolbarCustomizationPanel() {
+  // Make sure we're starting from a clean state.
+  window.gSpacesToolbar.resetColorCustomization();
+
+  await sub_test_open_customize_panel();
+
+  // Current colors should be clear.
+  sub_test_check_for_style_properties(true);
+
+  // Test color preview.
+  sub_test_apply_colors_to_inputs();
+  sub_test_check_for_style_properties();
+
+  // Reset should clear all applied colors.
+  window.gSpacesToolbar.resetColorCustomization();
+  window.gSpacesToolbar.closeCustomize();
+  sub_test_check_for_style_properties(true);
+
+  await sub_test_open_customize_panel();
+  // Set colors again.
+  sub_test_apply_colors_to_inputs();
+
+  // "Done" should close the panel and apply all colors.
+  window.gSpacesToolbar.closeCustomize();
+  sub_test_check_for_style_properties();
+
+  // Open the panel and click reset.
+  await sub_test_open_customize_panel();
+  window.gSpacesToolbar.resetColorCustomization();
+  sub_test_check_for_style_properties(true);
+
+  // "Done" should restore the custom colors.
+  window.gSpacesToolbar.closeCustomize();
+  sub_test_check_for_style_properties(true);
+});
diff --git a/comm/mail/base/test/browser/browser_spacesToolbar_drawBelowTitlebar.js b/comm/mail/base/test/browser/browser_spacesToolbar_drawBelowTitlebar.js
new file mode 100644
index 0000000000..f6cf64cf57
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_spacesToolbar_drawBelowTitlebar.js
@@ -0,0 +1,24 @@
+/* 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/. */
+
+// Load subtest shared with tabs-in-titlebar tests.
+Services.scriptloader.loadSubScript(
+  new URL("head_spacesToolbar.js", gTestPath).href,
+  this
+);
+
+registerCleanupFunction(async () => {
+  // Reset the menubar visibility.
+  let menubar = document.getElementById("toolbar-menubar");
+  menubar.removeAttribute("autohide");
+  menubar.removeAttribute("inactive");
+  await new Promise(resolve => requestAnimationFrame(resolve));
+});
+
+add_task(async function testSpacesToolbarAlignment() {
+  // Hide titlebar in toolbar, show menu.
+  await sub_test_toolbar_alignment(false, false);
+  // Hide titlebar in toolbar, hide menu.
+  await sub_test_toolbar_alignment(false, true);
+});
diff --git a/comm/mail/base/test/browser/browser_spacesToolbar_drawInTitlebar.js b/comm/mail/base/test/browser/browser_spacesToolbar_drawInTitlebar.js
new file mode 100644
index 0000000000..5633adad6f
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_spacesToolbar_drawInTitlebar.js
@@ -0,0 +1,24 @@
+/* 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/. */
+
+// Load subtest shared with non-tabs-in-titlebar tests.
+Services.scriptloader.loadSubScript(
+  new URL("head_spacesToolbar.js", gTestPath).href,
+  this
+);
+
+registerCleanupFunction(async () => {
+  // Reset the menubar visibility.
+  let menubar = document.getElementById("toolbar-menubar");
+  menubar.removeAttribute("autohide");
+  menubar.removeAttribute("inactive");
+  await new Promise(resolve => requestAnimationFrame(resolve));
+});
+
+add_task(async function testSpacesToolbarAlignment() {
+  // Show titlebar in toolbar, show menu.
+  await sub_test_toolbar_alignment(true, false);
+  // Show titlebar in toolbar, hide menu.
+  await sub_test_toolbar_alignment(true, true);
+});
diff --git a/comm/mail/base/test/browser/browser_statusFeedback.js b/comm/mail/base/test/browser/browser_statusFeedback.js
new file mode 100644
index 0000000000..66132aa484
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_statusFeedback.js
@@ -0,0 +1,71 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const statusText = document.getElementById("statusText");
+const tabmail = document.getElementById("tabmail");
+const about3Pane = tabmail.currentAbout3Pane;
+const { threadTree } = about3Pane;
+
+add_setup(async function () {
+  // Create an account for the test.
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+
+  // Create a folder for the account to store test messages.
+  const rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("statusFeedback", null);
+  const testFolder = rootFolder
+    .getChildNamed("statusFeedback")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  // Generate a test message.
+  const generator = new MessageGenerator();
+  testFolder.addMessage(generator.makeMessage().toMboxString());
+
+  // Use the test folder.
+  about3Pane.displayFolder(testFolder.URI);
+  await ensure_cards_view();
+
+  // Remove test account on cleanup.
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+/**
+ * Tests that the correct status message appears when opening a message.
+ */
+add_task(async function testMessageOpen() {
+  const row = threadTree.getRowAtIndex(0);
+  const subjectLine = row.querySelector(
+    ".thread-card-subject-container .subject"
+  );
+
+  // Click on the email.
+  const selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  EventUtils.synthesizeMouseAtCenter(
+    subjectLine,
+    { clickCount: 1 },
+    about3Pane
+  );
+  await selectPromise;
+
+  // Check the value of the status message.
+  Assert.equal(
+    statusText.value,
+    "Loading Message…",
+    "correct status message is shown"
+  );
+
+  // Check that the status message eventually reset
+  await TestUtils.waitForCondition(
+    () => statusText.value == "",
+    "status message should eventually reset"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_tabIcon.js b/comm/mail/base/test/browser/browser_tabIcon.js
new file mode 100644
index 0000000000..ae9d3a057f
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_tabIcon.js
@@ -0,0 +1,99 @@
+/* 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/. */
+
+const { GlodaIndexer } = ChromeUtils.import(
+  "resource:///modules/gloda/GlodaIndexer.jsm"
+);
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+
+const TEST_DOCUMENT_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/sampleContent.html";
+const TEST_IMAGE_URL =
+  "http://mochi.test:8888/browser/comm/mail/base/test/browser/files/tb-logo.png";
+
+let tabmail = document.getElementById("tabmail");
+let rootFolder, testFolder, testMessages;
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("tabIcon", null);
+  testFolder = rootFolder
+    .getChildNamed("tabIcon")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  let messageFile = new FileUtils.File(
+    getTestFilePath("files/sampleContent.eml")
+  );
+  Assert.ok(messageFile.exists(), "test data file should exist");
+  let promiseCopyListener = new PromiseTestUtils.PromiseCopyListener();
+  // Copy gIncomingMailFile into the Inbox.
+  MailServices.copy.copyFileMessage(
+    messageFile,
+    testFolder,
+    null,
+    false,
+    0,
+    "",
+    promiseCopyListener,
+    null
+  );
+  await promiseCopyListener.promise;
+  testMessages = [...testFolder.messages];
+  tabmail.currentAbout3Pane.displayFolder(testFolder);
+
+  registerCleanupFunction(() => {
+    tabmail.closeOtherTabs(0);
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function testMsgInFolder() {
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 0;
+  await BrowserTestUtils.browserLoaded(
+    tabmail.currentAboutMessage.getMessagePaneBrowser()
+  );
+  let icon = tabmail.tabInfo[0].tabNode.querySelector(".tab-icon-image");
+  await TestUtils.waitForCondition(() => icon.complete, "Icon loaded");
+  Assert.equal(
+    icon.src,
+    "chrome://messenger/skin/icons/new/compact/folder.svg"
+  );
+});
+
+add_task(async function testMsgInTab() {
+  window.OpenMessageInNewTab(testMessages[0], { background: false });
+  await BrowserTestUtils.waitForEvent(
+    tabmail.tabInfo[1].chromeBrowser,
+    "MsgLoaded"
+  );
+  let tab = tabmail.tabInfo[1];
+  let icon = tab.tabNode.querySelector(".tab-icon-image");
+  await TestUtils.waitForCondition(() => icon.complete, "Icon loaded");
+  Assert.equal(icon.src, "chrome://messenger/skin/icons/new/compact/draft.svg");
+});
+
+add_task(async function testContentTab() {
+  let tab = window.openTab("contentTab", {
+    url: TEST_DOCUMENT_URL,
+    background: false,
+  });
+  await BrowserTestUtils.browserLoaded(tab.browser);
+
+  let icon = tab.tabNode.querySelector(".tab-icon-image");
+
+  // Start of TEST_IMAGE_URL as data url.
+  await TestUtils.waitForCondition(
+    () => icon.src.startsWith("data:image/png;base64,iVBORw0KGgoAAAANSUhEU"),
+    "Waited for icon to be correct"
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_tagsMode.js b/comm/mail/base/test/browser/browser_tagsMode.js
new file mode 100644
index 0000000000..6077897e48
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_tagsMode.js
@@ -0,0 +1,214 @@
+/* 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/. */
+
+var { FeedUtils } = ChromeUtils.import("resource:///modules/FeedUtils.jsm");
+var { VirtualFolderHelper } = ChromeUtils.import(
+  "resource:///modules/VirtualFolderWrapper.jsm"
+);
+
+let about3Pane = document.getElementById("tabmail").currentAbout3Pane;
+let rootFolder;
+let folders = {};
+
+const FOLDER_PREFIX = "mailbox://nobody@smart%20mailboxes/tags/";
+const DEFAULT_TAGS = new Map([
+  ["$label1", { label: "Important", color: "#FF0000" }],
+  ["$label2", { label: "Work", color: "#FF9900" }],
+  ["$label3", { label: "Personal", color: "#009900" }],
+  ["$label4", { label: "To Do", color: "#3333FF" }],
+  ["$label5", { label: "Later", color: "#993399" }],
+]);
+
+add_setup(async function () {
+  let allTags = MailServices.tags.getAllTags();
+  Assert.deepEqual(
+    allTags.map(t => t.key),
+    [...DEFAULT_TAGS.keys()],
+    "sanity check tag keys"
+  );
+  Assert.deepEqual(
+    allTags.map(t => ({ label: t.tag, color: t.color })),
+    [...DEFAULT_TAGS.values()],
+    "sanity check tag labels"
+  );
+
+  about3Pane.folderPane.activeModes = ["all"];
+  resetSmartMailboxes();
+
+  let account = MailServices.accounts.createAccount();
+  account.incomingServer = MailServices.accounts.createIncomingServer(
+    `${account.key}user`,
+    "localhost",
+    "pop3"
+  );
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder.QueryInterface(
+    Ci.nsIMsgLocalMailFolder
+  );
+
+  for (let flag of [
+    "Inbox",
+    "Drafts",
+    "Templates",
+    "SentMail",
+    "Archive",
+    "Junk",
+    "Trash",
+    "Queue",
+    "Virtual",
+  ]) {
+    let folder = rootFolder.getFolderWithFlags(Ci.nsMsgFolderFlags[flag]);
+    if (!folder) {
+      folder = rootFolder.createLocalSubfolder(`tagsMode${flag}`);
+      folder.setFlag(Ci.nsMsgFolderFlags[flag]);
+    }
+    folders[flag] = folder.QueryInterface(Ci.nsIMsgLocalMailFolder);
+  }
+  folders.Plain = rootFolder.createLocalSubfolder("tagsModePlain");
+
+  let msgDatabase = folders.Virtual.msgDatabase;
+  let folderInfo = msgDatabase.dBFolderInfo;
+  folderInfo.setCharProperty("searchStr", "ALL");
+  folderInfo.setCharProperty("searchFolderUri", folders.Inbox.URI);
+
+  registerCleanupFunction(function () {
+    MailServices.accounts.removeAccount(account, false);
+    about3Pane.folderPane.activeModes = ["all"];
+  });
+});
+
+async function checkFolderTree(expectedTags) {
+  let tagsList = about3Pane.folderTree.querySelector(`li[data-mode="tags"] ul`);
+  await TestUtils.waitForCondition(
+    () => tagsList.childElementCount == expectedTags.size,
+    "waiting for folder tree to update"
+  );
+  let keys = expectedTags.keys();
+  let values = expectedTags.values();
+  for (let row of tagsList.children) {
+    let key = keys.next().value;
+    let { label, color } = values.next().value;
+    Assert.equal(row.uri, FOLDER_PREFIX + encodeURIComponent(key));
+    Assert.equal(row.name, label);
+    Assert.equal(row.icon.style.getPropertyValue("--icon-color"), color);
+  }
+  Assert.ok(keys.next().done, "all tags should have a row in the tree");
+}
+
+add_task(async function testFolderTree() {
+  // Check the default tags are shown initially.
+  let expectedTags = new Map(DEFAULT_TAGS);
+  about3Pane.folderPane.activeModes = ["all", "tags"];
+  await checkFolderTree(DEFAULT_TAGS);
+
+  // Add two custom tags and check they are shown.
+  MailServices.tags.addTagForKey("testkey", "testLabel", "#000000", "");
+  await TestUtils.waitForCondition(
+    () => MailServices.tags.getAllTags().length == 6,
+    "waiting for tag to be created"
+  );
+  expectedTags.set("testkey", { label: "testLabel", color: "#000000" });
+  await checkFolderTree(expectedTags);
+
+  MailServices.tags.addTagForKey("anotherkey", "anotherLabel", "#333333", "");
+  await TestUtils.waitForCondition(
+    () => MailServices.tags.getAllTags().length == 7,
+    "waiting for tag to be created"
+  );
+  expectedTags.set("anotherkey", { label: "anotherLabel", color: "#333333" });
+  await checkFolderTree(expectedTags);
+
+  // Delete the first custom tag and check it is removed.
+  MailServices.tags.deleteKey("testkey");
+  await TestUtils.waitForCondition(
+    () => MailServices.tags.getAllTags().length == 6,
+    "waiting for tag to be removed"
+  );
+  expectedTags.delete("testkey");
+  await checkFolderTree(expectedTags);
+
+  // Hide and reinitialise the Tags mode and check the list is the same.
+  about3Pane.folderPane.activeModes = ["all"];
+  about3Pane.folderPane.activeModes = ["all", "tags"];
+  await checkFolderTree(expectedTags);
+
+  // Delete the second custom tag.
+  MailServices.tags.deleteKey("anotherkey");
+  await TestUtils.waitForCondition(
+    () => MailServices.tags.getAllTags().length == 5,
+    "waiting for tag to be removed"
+  );
+  expectedTags.delete("anotherkey");
+  await checkFolderTree(expectedTags);
+});
+
+function checkVirtualFolder(tagKey, tagLabel, expectedFolderURIs) {
+  let folder = MailServices.folderLookup.getFolderForURL(
+    FOLDER_PREFIX + encodeURIComponent(tagKey)
+  );
+  Assert.ok(folder);
+  let wrappedFolder = VirtualFolderHelper.wrapVirtualFolder(folder);
+  Assert.equal(folder.prettyName, tagLabel);
+  Assert.equal(wrappedFolder.searchString, `AND (tag,contains,${tagKey})`);
+  Assert.equal(wrappedFolder.searchFolderURIs, "*");
+
+  about3Pane.displayFolder(folder);
+  Assert.deepEqual(
+    about3Pane.gViewWrapper._underlyingFolders.map(f => f.URI).sort(),
+    expectedFolderURIs.sort()
+  );
+}
+
+add_task(async function testFolderSelection() {
+  let expectedFolderURIs = [
+    folders.Inbox.URI,
+    folders.Drafts.URI,
+    folders.Templates.URI,
+    folders.SentMail.URI,
+    folders.Archive.URI,
+    folders.Plain.URI,
+  ];
+
+  for (let [key, { label }] of DEFAULT_TAGS) {
+    checkVirtualFolder(key, label, expectedFolderURIs);
+  }
+
+  // Add another plain folder. It should be added to the searched folders.
+  let newPlainFolder = rootFolder.createLocalSubfolder("tagsModePlain2");
+  expectedFolderURIs.push(newPlainFolder.URI);
+  checkVirtualFolder("$label1", "Important", expectedFolderURIs);
+
+  // Add a subfolder to the inbox. It should be added to the searched folders.
+  let newInboxFolder = folders.Inbox.createLocalSubfolder("tagsModeInbox2");
+  expectedFolderURIs.push(newInboxFolder.URI);
+  checkVirtualFolder("$label2", "Work", expectedFolderURIs);
+
+  // Add a subfolder to the trash. It should NOT be added to the searched folders.
+  folders.Trash.createLocalSubfolder("tagsModeTrash2");
+  checkVirtualFolder("$label1", "Important", expectedFolderURIs);
+
+  let rssAccount = FeedUtils.createRssAccount("rss");
+  let rssRootFolder = rssAccount.incomingServer.rootFolder;
+  FeedUtils.subscribeToFeed(
+    "https://example.org/browser/comm/mail/base/test/browser/files/rss.xml?tagsMode",
+    rssRootFolder,
+    null
+  );
+  await TestUtils.waitForCondition(() => rssRootFolder.subFolders.length == 2);
+  let rssFeedFolder = rssRootFolder.getChildNamed("Test Feed");
+
+  expectedFolderURIs.push(rssFeedFolder.URI);
+  checkVirtualFolder("$label2", "Work", expectedFolderURIs);
+
+  // Delete the smart mailboxes server and check it is correctly recreated.
+  about3Pane.folderPane.activeModes = ["all"];
+  resetSmartMailboxes();
+  about3Pane.folderPane.activeModes = ["all", "tags"];
+
+  for (let [key, { label }] of DEFAULT_TAGS) {
+    checkVirtualFolder(key, label, expectedFolderURIs);
+  }
+
+  MailServices.accounts.removeAccount(rssAccount, false);
+});
diff --git a/comm/mail/base/test/browser/browser_threadTreeDeleting.js b/comm/mail/base/test/browser/browser_threadTreeDeleting.js
new file mode 100644
index 0000000000..e034fbbfb3
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_threadTreeDeleting.js
@@ -0,0 +1,572 @@
+/* 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/. */
+
+requestLongerTimeout(2);
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let threadTree = about3Pane.threadTree;
+// Not `currentAboutMessage` as (a) that's null right now, and (b) we'll be
+// testing things that happen when about:message is hidden.
+let aboutMessage = about3Pane.messageBrowser.contentWindow;
+let messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+let multiMessageView = about3Pane.multiMessageBrowser.contentWindow;
+let generator = new MessageGenerator();
+let rootFolder, sourceMessageIDs;
+
+add_setup(async function () {
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder.QueryInterface(
+    Ci.nsIMsgLocalMailFolder
+  );
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+/** Test a real folder, unthreaded. */
+add_task(async function testUnthreaded() {
+  let folderA = rootFolder
+    .createLocalSubfolder("threadTreeDeletingA")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderA.addMessageBatch(
+    generator.makeMessages({ count: 15 }).map(message => message.toMboxString())
+  );
+
+  sourceMessageIDs = Array.from(folderA.messages, m => m.messageId);
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderA.URI,
+  });
+  await ensure_cards_view();
+  goDoCommand("cmd_sort", { target: { value: "unthreaded" } });
+
+  await subtest();
+});
+
+/** Test a real folder with threads. */
+add_task(async function testThreaded() {
+  let folderB = rootFolder
+    .createLocalSubfolder("threadTreeDeletingB")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderB.addMessageBatch(
+    [
+      // No real reason for the values here other than the total count.
+      ...generator.makeMessages({ count: 4 }),
+      ...generator.makeMessages({ count: 6, msgsPerThread: 3 }),
+      ...generator.makeMessages({ count: 1 }),
+      ...generator.makeMessages({ count: 2, msgsPerThread: 2 }),
+      ...generator.makeMessages({ count: 2 }),
+    ].map(message => message.toMboxString())
+  );
+
+  sourceMessageIDs = Array.from(folderB.messages, m => m.messageId);
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderB.URI,
+  });
+  goDoCommand("cmd_sort", { target: { value: "threaded" } });
+  goDoCommand("cmd_expandAllThreads");
+
+  await subtest();
+});
+
+/** Test a virtual folder with a single backing folder. */
+add_task(async function testSingleVirtual() {
+  let folderC = rootFolder
+    .createLocalSubfolder("threadTreeDeletingC")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderC.addMessageBatch(
+    generator.makeMessages({ count: 15 }).map(message => message.toMboxString())
+  );
+
+  let virtualFolderC = rootFolder.createLocalSubfolder(
+    "threadTreeDeletingVirtualC"
+  );
+  virtualFolderC.setFlag(Ci.nsMsgFolderFlags.Virtual);
+  let folderInfoC = virtualFolderC.msgDatabase.dBFolderInfo;
+  // Search for something instead of all messages, as the "ALL" search could
+  // detected and the backing folder displayed instead, defeating the point of
+  // this test.
+  folderInfoC.setCharProperty("searchStr", "AND (date,is after,31-Dec-1999)");
+  folderInfoC.setCharProperty("searchFolderUri", folderC.URI);
+
+  sourceMessageIDs = Array.from(folderC.messages, m => m.messageId);
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: virtualFolderC.URI,
+  });
+
+  await subtest();
+});
+
+/** Test a virtual folder with multiple backing folders. */
+add_task(async function testXFVirtual() {
+  let folderD = rootFolder
+    .createLocalSubfolder("threadTreeDeletingD")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderD.addMessageBatch(
+    generator.makeMessages({ count: 4 }).map(message => message.toMboxString())
+  );
+
+  let folderE = rootFolder
+    .createLocalSubfolder("threadTreeDeletingE")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderE.addMessageBatch(
+    generator
+      .makeMessages({ count: 11, msgsPerThread: 3 })
+      .map(message => message.toMboxString())
+  );
+
+  let virtualFolderDE = rootFolder.createLocalSubfolder(
+    "threadTreeDeletingVirtualDE"
+  );
+  virtualFolderDE.setFlag(Ci.nsMsgFolderFlags.Virtual);
+  let folderInfoY = virtualFolderDE.msgDatabase.dBFolderInfo;
+  folderInfoY.setCharProperty("searchStr", "AND (date,is after,31-Dec-1999)");
+  folderInfoY.setCharProperty(
+    "searchFolderUri",
+    `${folderD.URI}|${folderE.URI}`
+  );
+
+  sourceMessageIDs = [
+    ...Array.from(folderD.messages, m => m.messageId),
+    ...Array.from(folderE.messages, m => m.messageId),
+  ];
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: virtualFolderDE.URI,
+  });
+  goDoCommand("cmd_sort", { target: { value: "threaded" } });
+  goDoCommand("cmd_expandAllThreads");
+
+  await subtest();
+});
+
+/** Test a real folder with a quick filter applied. */
+add_task(async function testQuickFiltered() {
+  let folderF = rootFolder
+    .createLocalSubfolder("threadTreeDeletingF")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderF.addMessageBatch(
+    generator.makeMessages({ count: 30 }).map(message => message.toMboxString())
+  );
+  let flaggedMessages = [];
+  let i = 0;
+  for (let message of folderF.messages) {
+    if (i++ % 2) {
+      flaggedMessages.push(message);
+    }
+  }
+  folderF.markMessagesFlagged(flaggedMessages, true);
+
+  sourceMessageIDs = flaggedMessages.map(m => m.messageId);
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderF.URI,
+  });
+  let filterer = about3Pane.quickFilterBar.filterer;
+  filterer.clear();
+  filterer.visible = true;
+  filterer.setFilterValue("starred", true);
+  about3Pane.quickFilterBar.updateSearch();
+
+  await subtest();
+});
+
+/** Test a folder sorted by date descending. */
+add_task(async function testSortDescending() {
+  let folderG = rootFolder
+    .createLocalSubfolder("threadTreeDeletingG")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderG.addMessageBatch(
+    generator.makeMessages({ count: 15 }).map(message => message.toMboxString())
+  );
+
+  sourceMessageIDs = Array.from(folderG.messages, m => m.messageId).reverse();
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderG.URI,
+  });
+  goDoCommand("cmd_sort", { target: { value: "descending" } });
+
+  await subtest();
+});
+
+/** Test a folder sorted by subject. */
+add_task(async function testSortBySubject() {
+  let folderH = rootFolder
+    .createLocalSubfolder("threadTreeDeletingH")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderH.addMessageBatch(
+    generator.makeMessages({ count: 15 }).map(message => message.toMboxString())
+  );
+
+  sourceMessageIDs = Array.from(folderH.messages)
+    .sort((m1, m2) => (m1.subject < m2.subject ? -1 : 1))
+    .map(m => m.messageId);
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderH.URI,
+  });
+  goDoCommand("cmd_sort", { target: { value: "bySubject" } });
+
+  await subtest();
+});
+
+/**
+ * Tests that deleting the selected row while smooth-scrolling does not break
+ * the scrolling and leave the tree in a bad scroll position.
+ */
+add_task(async function testDeletionWhileScrolling() {
+  let folderI = rootFolder
+    .createLocalSubfolder("threadTreeDeletingI")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  folderI.addMessageBatch(
+    generator
+      .makeMessages({ count: 500 })
+      .map(message => message.toMboxString())
+  );
+
+  await ensure_table_view();
+  about3Pane.restoreState({
+    messagePaneVisible: false,
+    folderURI: folderI.URI,
+  });
+
+  const scrollListener = {
+    async promiseScrollingStopped() {
+      this.lastTime = Date.now();
+      await TestUtils.waitForCondition(
+        () => Date.now() - this.lastTime > 1000,
+        "waiting for scrolling to stop"
+      );
+      delete this.direction;
+      delete this.lastPosition;
+    },
+    setScrollExpectation(direction) {
+      this.direction = direction;
+      this.lastPosition = threadTree.scrollTop;
+    },
+    setNoScrollExpectation() {
+      this.direction = 0;
+    },
+    handleEvent(event) {
+      if (this.direction === 0) {
+        Assert.report(true, undefined, undefined, "unexpected scroll event");
+        return;
+      }
+
+      const position = threadTree.scrollTop;
+      if (this.direction == -1) {
+        Assert.lessOrEqual(position, this.lastPosition);
+      } else if (this.direction == 1) {
+        Assert.greaterOrEqual(position, this.lastPosition);
+      }
+      this.lastPosition = position;
+      this.lastTime = Date.now();
+    },
+  };
+
+  async function delayThenPress(millis, key) {
+    // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+    await new Promise(resolve => setTimeout(resolve, millis));
+    if (key) {
+      EventUtils.synthesizeKey(key, {}, about3Pane);
+      await TestUtils.waitForTick();
+    }
+  }
+
+  threadTree.addEventListener("scroll", scrollListener);
+  threadTree.table.body.focus();
+  threadTree.selectedIndex = 299;
+  await scrollListener.promiseScrollingStopped();
+
+  let stopPromise = scrollListener.promiseScrollingStopped();
+  scrollListener.setScrollExpectation(-1);
+
+  // Page up a few times then delete some messages.
+
+  await delayThenPress(0, "VK_PAGE_UP");
+  await delayThenPress(60, "VK_PAGE_UP");
+  await delayThenPress(60, "VK_PAGE_UP");
+  await delayThenPress(400, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+
+  await stopPromise;
+  Assert.equal(
+    threadTree.getFirstVisibleIndex(),
+    threadTree.selectedIndex,
+    "selected row should be the first visible row"
+  );
+
+  // Page down a few times then delete some messages.
+
+  stopPromise = scrollListener.promiseScrollingStopped();
+  scrollListener.setScrollExpectation(1);
+
+  await delayThenPress(60, "VK_PAGE_DOWN");
+  await delayThenPress(60, "VK_PAGE_DOWN");
+  await delayThenPress(60, "VK_PAGE_DOWN");
+  await delayThenPress(300, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+
+  await stopPromise;
+  Assert.equal(
+    threadTree.getLastVisibleIndex(),
+    threadTree.selectedIndex,
+    "selected row should be the last visible row"
+  );
+
+  // Select a message somewhere in the middle then delete it.
+
+  scrollListener.setNoScrollExpectation();
+  threadTree.selectedIndex -= 10;
+  await delayThenPress(80, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+  await delayThenPress(80, "VK_DELETE");
+
+  await delayThenPress(1000);
+  Assert.less(
+    threadTree.getFirstVisibleIndex(),
+    threadTree.selectedIndex,
+    "selected row should be below the first visible row"
+  );
+  Assert.greater(
+    threadTree.getLastVisibleIndex(),
+    threadTree.selectedIndex,
+    "selected row should be above the last visible row"
+  );
+
+  threadTree.removeEventListener("scroll", scrollListener);
+});
+
+async function subtest() {
+  await TestUtils.waitForCondition(
+    () => threadTree.table.body.rows.length == 15,
+    "waiting for all of the table rows"
+  );
+
+  let dbView = about3Pane.gDBView;
+  let subjects = [];
+  for (let i = 0; i < 15; i++) {
+    subjects.push(dbView.cellTextForColumn(i, "subjectCol"));
+  }
+  verifySubjects(subjects);
+
+  threadTree.table.body.focus();
+  threadTree.selectedIndex = 3;
+  await messageLoaded(3);
+
+  // Delete a single message.
+  await doDeleteCommand(4);
+  await verifySelection(14, [3], 3);
+  verifySubjects([subjects[0], subjects[1], subjects[2], ...subjects.slice(4)]);
+
+  // Delete a single message.
+  await doDeleteCommand(5);
+  await verifySelection(13, [3], 3);
+  verifySubjects([subjects[0], subjects[1], subjects[2], ...subjects.slice(5)]);
+
+  // Delete a single message by clicking the about:message Delete button.
+  await doDeleteClick(6);
+  await verifySelection(12, [3], 3);
+  verifySubjects([subjects[0], subjects[1], subjects[2], ...subjects.slice(6)]);
+
+  // Delete adjacent messages.
+  threadTree.selectedIndices = [3, 4, 5];
+  threadTree.currentIndex = 6;
+  await doDeleteCommand(9);
+  await verifySelection(9, [3], 3);
+  verifySubjects([subjects[0], subjects[1], subjects[2], ...subjects.slice(9)]);
+
+  // Delete non-adjacent messages.
+  threadTree.selectedIndices = [2, 4];
+  threadTree.currentIndex = 4;
+  // We should select the message below the current index, but we select the
+  // message below the first selected one.
+  await doDeleteCommand(9);
+  await verifySelection(7, [2], 2);
+  verifySubjects([
+    subjects[0],
+    subjects[1],
+    subjects[9],
+    ...subjects.slice(11),
+  ]);
+
+  // Delete the last message.
+  threadTree.selectedIndex = 6;
+  await messageLoaded(14);
+  await doDeleteCommand(13);
+  await verifySelection(6, [5], 5);
+  verifySubjects([
+    subjects[0],
+    subjects[1],
+    subjects[9],
+    ...subjects.slice(11, 14),
+  ]);
+
+  // Now cause a delete to happen from outside the UI.
+  await doDeleteExternal(1);
+  await verifySelection(5, [4], 4);
+  verifySubjects([subjects[0], subjects[9], ...subjects.slice(11, 14)]);
+
+  // Delete the selected message from outside the UI.
+  threadTree.selectedIndex = 2;
+  await messageLoaded(11);
+  await doDeleteExternal(2, 12);
+  await verifySelection(4, [2], 2);
+  verifySubjects([subjects[0], subjects[9], ...subjects.slice(12, 14)]);
+}
+
+async function messageLoaded(index) {
+  await BrowserTestUtils.browserLoaded(messagePaneBrowser);
+  Assert.equal(
+    aboutMessage.gMessage.messageId,
+    sourceMessageIDs[index],
+    "correct message loaded"
+  );
+}
+
+async function _doDelete(callback, index, expectedLoad) {
+  let selectCount = 0;
+  let onSelect = () => selectCount++;
+  threadTree.addEventListener("select", onSelect);
+
+  let selectPromise;
+  if (expectedLoad !== undefined) {
+    selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  }
+  await callback();
+  if (selectPromise) {
+    await selectPromise;
+    await messageLoaded(expectedLoad);
+  }
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 25));
+  if (selectPromise) {
+    Assert.equal(selectCount, 1, "'select' event should've happened only once");
+  } else {
+    Assert.equal(selectCount, 0, "'select' event should not have happened");
+  }
+
+  threadTree.removeEventListener("select", onSelect);
+}
+
+async function doDeleteCommand(expectedLoad) {
+  await _doDelete(
+    function () {
+      goDoCommand("cmd_delete");
+    },
+    undefined,
+    expectedLoad
+  );
+}
+
+async function doDeleteClick(expectedLoad) {
+  await _doDelete(
+    function () {
+      let messageView =
+        threadTree.selectedIndices.length == 1
+          ? aboutMessage
+          : multiMessageView;
+      EventUtils.synthesizeMouseAtCenter(
+        messageView.document.getElementById("hdrTrashButton"),
+        {},
+        messageView
+      );
+    },
+    undefined,
+    expectedLoad
+  );
+}
+
+async function doDeleteExternal(index, expectedLoad) {
+  await _doDelete(
+    function () {
+      let message = about3Pane.gDBView.getMsgHdrAt(index);
+      message.folder.deleteMessages(
+        [message], // messages
+        null, // msgWindow
+        true, // deleteStorage
+        false, // isMove
+        null, // listener
+        false // canUndo
+      );
+    },
+    index,
+    expectedLoad
+  );
+}
+
+async function verifySelection(rowCount, selectedIndices, currentIndex) {
+  Assert.equal(threadTree.view.rowCount, rowCount, "row count of view");
+  await TestUtils.waitForCondition(
+    () => threadTree.table.body.rows.length == rowCount,
+    "waiting table row count to match the view's row count"
+  );
+
+  Assert.deepEqual(
+    threadTree.selectedIndices,
+    selectedIndices,
+    "table's selected indices"
+  );
+  let selectedRows = Array.from(threadTree.querySelectorAll(".selected"));
+  Assert.equal(
+    selectedRows.length,
+    selectedIndices.length,
+    "number of rows with .selected class"
+  );
+  for (let index of selectedIndices) {
+    let row = threadTree.getRowAtIndex(index);
+    Assert.ok(
+      selectedRows.includes(row),
+      `.selected row at ${index} is expected`
+    );
+  }
+
+  Assert.equal(threadTree.currentIndex, currentIndex, "table's current index");
+  let currentRows = threadTree.querySelectorAll(".current");
+  Assert.equal(currentRows.length, 1, "one row should have .current");
+  Assert.equal(
+    currentRows[0],
+    threadTree.getRowAtIndex(currentIndex),
+    `.current row at ${currentIndex} is expected`
+  );
+
+  let contextTargetRows = threadTree.querySelectorAll(".context-menu-target");
+  Assert.equal(
+    contextTargetRows.length,
+    0,
+    "no rows should have .context-menu-target"
+  );
+}
+
+function verifySubjects(expectedSubjects) {
+  let actualSubjects = Array.from(
+    threadTree.table.body.rows,
+    row =>
+      row.querySelector(".thread-card-subject-container > .subject").textContent
+  );
+  Assert.equal(actualSubjects.length, expectedSubjects.length, "row count");
+  for (let i = 0; i < expectedSubjects.length; i++) {
+    Assert.equal(actualSubjects[i], expectedSubjects[i], `subject at ${i}`);
+  }
+}
diff --git a/comm/mail/base/test/browser/browser_threadTreeQuirks.js b/comm/mail/base/test/browser/browser_threadTreeQuirks.js
new file mode 100644
index 0000000000..f0f0012d57
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_threadTreeQuirks.js
@@ -0,0 +1,669 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+const { PromiseTestUtils } = ChromeUtils.import(
+  "resource://testing-common/mailnews/PromiseTestUtils.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let threadTree = about3Pane.threadTree;
+// Not `currentAboutMessage` as (a) that's null right now, and (b) we'll be
+// testing things that happen when about:message is hidden.
+let aboutMessage = about3Pane.messageBrowser.contentWindow;
+let messagePaneBrowser = aboutMessage.getMessagePaneBrowser();
+let rootFolder, folderA, folderB, trashFolder, sourceMessages, sourceMessageIDs;
+
+add_setup(async function () {
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("threadTreeQuirksA", null);
+  folderA = rootFolder
+    .getChildNamed("threadTreeQuirksA")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  rootFolder.createSubfolder("threadTreeQuirksB", null);
+  folderB = rootFolder.getChildNamed("threadTreeQuirksB");
+  trashFolder = rootFolder.getFolderWithFlags(Ci.nsMsgFolderFlags.Trash);
+
+  // Make some messages, then change their dates to simulate a different order.
+  let syntheticMessages = generator.makeMessages({
+    count: 15,
+    msgsPerThread: 5,
+  });
+  syntheticMessages[1].date = generator.makeDate();
+  syntheticMessages[2].date = generator.makeDate();
+  syntheticMessages[3].date = generator.makeDate();
+  syntheticMessages[4].date = generator.makeDate();
+
+  folderA.addMessageBatch(
+    syntheticMessages.map(message => message.toMboxString())
+  );
+  sourceMessages = [...folderA.messages];
+  sourceMessageIDs = sourceMessages.map(m => m.messageId);
+
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function testExpandCollapseUpdates() {
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderA.URI,
+  });
+
+  // Clicking the twisty to collapse a row should update the message display.
+  goDoCommand("cmd_expandAllThreads");
+  threadTree.selectedIndex = 5;
+  await messageLoaded(10);
+
+  let selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(5).querySelector(".twisty"),
+    {},
+    about3Pane
+  );
+  await selectPromise;
+  // Thread root still selected.
+  await validateTree(11, [5], 5);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.messageBrowser),
+    "messageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became visible"
+  );
+
+  // Clicking the twisty to expand a row should update the message display.
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  EventUtils.synthesizeMouseAtCenter(
+    threadTree.getRowAtIndex(5).querySelector(".twisty"),
+    {},
+    about3Pane
+  );
+  await selectPromise;
+  await messageLoaded(10);
+  await validateTree(15, [5], 5);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.messageBrowser),
+    "messageBrowser became visible"
+  );
+
+  // Collapsing all rows while the first message in a thread is selected should
+  // update the message display.
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_collapseAllThreads");
+  await selectPromise;
+  // Thread root still selected.
+  await validateTree(3, [1], 1);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.messageBrowser),
+    "messageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became visible"
+  );
+
+  // Expanding all rows while the first message in a thread is selected should
+  // update the message display.
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_expandAllThreads");
+  await selectPromise;
+  await messageLoaded(10);
+  await validateTree(15, [5], 5);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.messageBrowser),
+    "messageBrowser became visible"
+  );
+
+  // Collapsing all rows while a message inside a thread is selected should
+  // select the first message in the thread and update the message display.
+  threadTree.selectedIndex = 2;
+  await messageLoaded(7);
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_collapseAllThreads");
+  await selectPromise;
+  // Thread root became selected.
+  await validateTree(3, [0], 0);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.messageBrowser),
+    "messageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became visible"
+  );
+
+  // Expanding all rows while the first message in a thread is selected should
+  // update the message display. (This is effectively the same test as earlier.)
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_expandAllThreads");
+  await selectPromise;
+  await messageLoaded(5);
+  await validateTree(15, [0], 0);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.messageBrowser),
+    "messageBrowser became visible"
+  );
+
+  // Select several things and collapse all.
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  threadTree.selectedIndices = [2, 3, 5];
+  await selectPromise;
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.messageBrowser),
+    "messageBrowser became hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser became visible"
+  );
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_collapseAllThreads");
+  await selectPromise;
+  // Thread roots became selected.
+  await validateTree(3, [0, 1], 1);
+  Assert.ok(
+    BrowserTestUtils.is_hidden(about3Pane.messageBrowser),
+    "messageBrowser stayed hidden"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "multiMessageBrowser stayed visible"
+  );
+});
+
+add_task(async function testThreadUpdateKeepsSelection() {
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderB.URI,
+  });
+
+  // Put some messages from different threads in the folder and select one.
+  await move([sourceMessages[0]], folderA, folderB);
+  await move([sourceMessages[5]], folderA, folderB);
+  threadTree.selectedIndex = 1;
+  await messageLoaded(5);
+
+  // Move a "newer" message into the folder. This should switch the order of
+  // the threads, but no selection change should occur.
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  await move([sourceMessages[1]], folderA, folderB);
+  // Selection should have moved.
+  await validateTree(2, [0], 0);
+  Assert.equal(
+    aboutMessage.gMessage.messageId,
+    sourceMessageIDs[5],
+    "correct message still loaded"
+  );
+
+  // Wait to prove unwanted selection or load didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  await restoreMessages();
+});
+
+add_task(async function testArchiveDeleteUpdates() {
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderA.URI,
+  });
+  about3Pane.sortController.sortUnthreaded();
+
+  threadTree.table.body.focus();
+  threadTree.selectedIndex = 3;
+  await messageLoaded(7);
+
+  let selectCount = 0;
+  let onSelect = () => selectCount++;
+  threadTree.addEventListener("select", onSelect);
+
+  let selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_delete");
+  await selectPromise;
+  await messageLoaded(8);
+  await validateTree(14, [3], 3);
+  Assert.equal(selectCount, 1, "'select' event should've happened only once");
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_delete");
+  await selectPromise;
+  await messageLoaded(9);
+  await validateTree(13, [3], 3);
+  Assert.equal(selectCount, 2, "'select' event should've happened only once");
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_archive");
+  await selectPromise;
+  await messageLoaded(10);
+  await validateTree(12, [3], 3);
+  Assert.equal(selectCount, 3, "'select' event should've happened only once");
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_archive");
+  await selectPromise;
+  await messageLoaded(11);
+  await validateTree(11, [3], 3);
+  Assert.equal(selectCount, 4, "'select' event should've happened only once");
+
+  selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  goDoCommand("cmd_delete");
+  await selectPromise;
+  await messageLoaded(12);
+  await validateTree(10, [3], 3);
+  Assert.equal(selectCount, 5, "'select' event should've happened only once");
+
+  threadTree.removeEventListener("select", onSelect);
+
+  await restoreMessages();
+});
+
+add_task(async function testMessagePaneSelection() {
+  await move(sourceMessages.slice(6, 9), folderA, folderB);
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderB.URI,
+  });
+  about3Pane.sortController.sortUnthreaded();
+  about3Pane.sortController.sortThreadPane("byDate");
+  about3Pane.sortController.sortDescending();
+
+  threadTree.table.body.focus();
+  threadTree.selectedIndex = 1;
+  await messageLoaded(7);
+  await validateTree(3, [1], 1);
+
+  // Check the initial selection in about:message.
+  Assert.equal(aboutMessage.gDBView.selection.getRangeCount(), 1);
+  let min = {},
+    max = {};
+  aboutMessage.gDBView.selection.getRangeAt(0, min, max);
+  Assert.equal(min.value, 1);
+  Assert.equal(max.value, 1);
+
+  // Add a new message to the folder, which should appear first.
+  threadTree.addEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+  await move(sourceMessages.slice(9, 10), folderA, folderB);
+  await validateTree(4, [2], 2);
+
+  Assert.deepEqual(
+    Array.from(folderB.messages, m => m.messageId),
+    sourceMessageIDs.slice(6, 10),
+    "all expected messages are in the folder"
+  );
+
+  // Check the selection in about:message.
+  Assert.equal(aboutMessage.gDBView.selection.getRangeCount(), 1);
+  aboutMessage.gDBView.selection.getRangeAt(0, min, max);
+  Assert.equal(min.value, 2);
+  Assert.equal(max.value, 2);
+
+  // Wait to prove unwanted selection or load didn't happen.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 500));
+  threadTree.removeEventListener("select", reportBadSelectEvent);
+  messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+
+  // Now click the delete button in about:message.
+  let deletePromise = PromiseTestUtils.promiseFolderEvent(
+    folderB,
+    "DeleteOrMoveMsgCompleted"
+  );
+  let loadPromise = messageLoaded(6);
+  EventUtils.synthesizeMouseAtCenter(
+    aboutMessage.document.getElementById("hdrTrashButton"),
+    {},
+    aboutMessage
+  );
+  await Promise.all([deletePromise, loadPromise]);
+
+  // Check which message was deleted.
+  Assert.deepEqual(
+    Array.from(trashFolder.messages, m => m.messageId),
+    [sourceMessageIDs[7]],
+    "the right message was deleted"
+  );
+  Assert.deepEqual(
+    Array.from(folderB.messages, m => m.messageId),
+    [sourceMessageIDs[6], sourceMessageIDs[8], sourceMessageIDs[9]],
+    "the right messages were kept"
+  );
+
+  await validateTree(3, [2], 2);
+
+  // Check the selection in about:message again.
+  Assert.equal(aboutMessage.gDBView.selection.getRangeCount(), 1);
+  aboutMessage.gDBView.selection.getRangeAt(0, min, max);
+  Assert.equal(min.value, 2);
+  Assert.equal(max.value, 2);
+
+  await restoreMessages();
+});
+
+add_task(async function testNonSelectionContextMenu() {
+  let mailContext = about3Pane.document.getElementById("mailContext");
+  let openNewTabItem = about3Pane.document.getElementById(
+    "mailContext-openNewTab"
+  );
+  let replyItem = about3Pane.document.getElementById("mailContext-replySender");
+
+  about3Pane.restoreState({
+    messagePaneVisible: true,
+    folderURI: folderA.URI,
+  });
+  about3Pane.sortController.sortUnthreaded();
+  threadTree.scrollToIndex(0, true);
+
+  threadTree.selectedIndex = 0;
+  await messageLoaded(0);
+  await validateTree(15, [0], 0);
+  await subtestOpenTab(1, sourceMessageIDs[5]);
+  await subtestReply(6, sourceMessageIDs[10]);
+
+  threadTree.selectedIndices = [3, 6, 9];
+  await BrowserTestUtils.browserLoaded(
+    messagePaneBrowser,
+    false,
+    "about:blank"
+  );
+  await subtestOpenTab(0, sourceMessageIDs[0]);
+
+  async function doContextMenu(testIndex, messageId, itemToActivate) {
+    let originalSelection = threadTree.selectedIndices;
+
+    threadTree.addEventListener("select", reportBadSelectEvent);
+    messagePaneBrowser.addEventListener("load", reportBadLoad, true);
+
+    let shownPromise = BrowserTestUtils.waitForEvent(mailContext, "popupshown");
+    EventUtils.synthesizeMouseAtCenter(
+      threadTree
+        .getRowAtIndex(testIndex)
+        .querySelector(".thread-card-subject-container"),
+      { type: "contextmenu" },
+      about3Pane
+    );
+    await shownPromise;
+
+    Assert.ok(about3Pane.mailContextMenu.selectionIsOverridden);
+    Assert.deepEqual(
+      threadTree.selectedIndices,
+      [testIndex],
+      "selection should be only the right-clicked-on row"
+    );
+    let contextTargetRows = threadTree.querySelectorAll(".context-menu-target");
+    Assert.equal(
+      contextTargetRows.length,
+      1,
+      "one row should have .context-menu-target"
+    );
+    Assert.equal(
+      contextTargetRows[0].index,
+      testIndex,
+      "correct row has .context-menu-target"
+    );
+
+    let hiddenPromise = BrowserTestUtils.waitForEvent(
+      mailContext,
+      "popuphidden"
+    );
+    mailContext.activateItem(itemToActivate);
+    await hiddenPromise;
+
+    Assert.ok(!about3Pane.mailContextMenu.selectionIsOverridden);
+    Assert.equal(
+      document.activeElement,
+      tabmail.tabInfo[0].chromeBrowser,
+      "about:3pane should have focus after context menu"
+    );
+    Assert.equal(
+      about3Pane.document.activeElement,
+      threadTree.table.body,
+      "table body should have focus after context menu"
+    );
+
+    // Selection should be restored.
+    await validateTree(
+      15,
+      threadTree.selectedIndices,
+      originalSelection.at(-1)
+    );
+
+    // Wait to prove unwanted selection or load didn't happen.
+    // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    threadTree.removeEventListener("select", reportBadSelectEvent);
+    messagePaneBrowser.removeEventListener("load", reportBadLoad, true);
+  }
+
+  // Opening a new tab should open the clicked-on message, not the selected.
+  async function subtestOpenTab(testIndex, messageId) {
+    let newAboutMessagePromise = BrowserTestUtils.waitForEvent(
+      tabmail,
+      "aboutMessageLoaded"
+    ).then(async function (event) {
+      await BrowserTestUtils.browserLoaded(
+        event.target.getMessagePaneBrowser()
+      );
+      return event.target;
+    });
+    await doContextMenu(testIndex, messageId, openNewTabItem);
+
+    let newAboutMessage = await newAboutMessagePromise;
+    Assert.equal(
+      newAboutMessage.gMessage.messageId,
+      messageId,
+      "correct message should have opened in a tab"
+    );
+    Assert.equal(
+      tabmail.tabInfo.length,
+      2,
+      "only one new tab should have opened"
+    );
+    tabmail.closeOtherTabs(0);
+  }
+
+  // Replying should quote the clicked-on message, not the selected, even when
+  // some text is selected in the message pane.
+  async function subtestReply(testIndex, messageId) {
+    Assert.stringContains(
+      messagePaneBrowser.contentDocument.body.textContent,
+      "Hello Bob Bell!"
+    );
+    messagePaneBrowser.contentWindow
+      .getSelection()
+      .selectAllChildren(messagePaneBrowser.contentDocument.body);
+
+    let composeWindowPromise = BrowserTestUtils.domWindowOpenedAndLoaded();
+    await doContextMenu(testIndex, messageId, replyItem);
+    let composeWindow = await composeWindowPromise;
+    let composeEditor = composeWindow.GetCurrentEditorElement();
+    let composeBody = await TestUtils.waitForCondition(
+      () => composeEditor.contentDocument.body.textContent
+    );
+
+    Assert.stringContains(
+      composeBody,
+      "Hello Felix Flowers!",
+      "new message should quote the right-clicked-on message"
+    );
+    Assert.ok(
+      !composeBody.includes("Hello Bob Bell!"),
+      "new message should not quote the selected message"
+    );
+
+    await BrowserTestUtils.closeWindow(composeWindow);
+  }
+});
+
+async function messageLoaded(index) {
+  await BrowserTestUtils.browserLoaded(messagePaneBrowser);
+  Assert.equal(
+    aboutMessage.gMessage.messageId,
+    sourceMessageIDs[index],
+    "correct message loaded"
+  );
+}
+
+async function validateTree(rowCount, selectedIndices, currentIndex) {
+  Assert.equal(threadTree.view.rowCount, rowCount, "row count of view");
+  await TestUtils.waitForCondition(
+    () => threadTree.table.body.rows.length == rowCount,
+    "waiting table row count to match the view's row count"
+  );
+
+  Assert.deepEqual(
+    threadTree.selectedIndices,
+    selectedIndices,
+    "table's selected indices"
+  );
+  let selectedRows = Array.from(threadTree.querySelectorAll(".selected"));
+  Assert.equal(
+    selectedRows.length,
+    selectedIndices.length,
+    "number of rows with .selected class"
+  );
+  for (let index of selectedIndices) {
+    let row = threadTree.getRowAtIndex(index);
+    Assert.ok(
+      selectedRows.includes(row),
+      `.selected row at ${index} is expected`
+    );
+  }
+
+  Assert.equal(threadTree.currentIndex, currentIndex, "table's current index");
+  let currentRows = threadTree.querySelectorAll(".current");
+  Assert.equal(currentRows.length, 1, "one row should have .current");
+  Assert.equal(
+    currentRows[0],
+    threadTree.getRowAtIndex(currentIndex),
+    ".current row is expected"
+  );
+
+  let contextTargetRows = threadTree.querySelectorAll(".context-menu-target");
+  Assert.equal(
+    contextTargetRows.length,
+    0,
+    "no rows should have .context-menu-target"
+  );
+}
+
+async function move(messages, source, dest) {
+  let copyListener = new PromiseTestUtils.PromiseCopyListener();
+  MailServices.copy.copyMessages(
+    source,
+    messages,
+    dest,
+    true,
+    copyListener,
+    top.msgWindow,
+    false
+  );
+  await copyListener.promise;
+}
+
+function reportBadSelectEvent() {
+  Assert.report(
+    true,
+    undefined,
+    undefined,
+    "should not have fired a select event"
+  );
+}
+
+function reportBadLoad() {
+  Assert.report(true, undefined, undefined, "should not have loaded a message");
+}
+
+async function restoreMessages() {
+  // Move all of the messages back to folder A.
+  await move([...folderB.messages], folderB, folderA);
+  let archiveFolder = rootFolder.getFolderWithFlags(
+    Ci.nsMsgFolderFlags.Archive
+  );
+  if (archiveFolder) {
+    for (let folder of archiveFolder.subFolders) {
+      await move([...folder.messages], folder, folderA);
+    }
+  }
+  await move([...trashFolder.messages], trashFolder, folderA);
+
+  // Restore all of the messages in `sourceMessages`, in the right order.
+  sourceMessages = [...folderA.messages].sort(
+    (a, b) =>
+      sourceMessageIDs.indexOf(a.messageId) -
+      sourceMessageIDs.indexOf(b.messageId)
+  );
+}
+
+add_task(async function testThreadTreeA11yRoles() {
+  Assert.equal(
+    threadTree.table.body.getAttribute("role"),
+    "listbox",
+    "The tree view should be presented as ListBox"
+  );
+  Assert.equal(
+    threadTree.getRowAtIndex(0).getAttribute("role"),
+    "option",
+    "The message row should be presented as Option"
+  );
+
+  about3Pane.sortController.sortThreaded();
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.table.body.getAttribute("role") == "tree",
+    "The tree view should switch to a Tree View role"
+  );
+  Assert.equal(
+    threadTree.getRowAtIndex(0).getAttribute("role"),
+    "treeitem",
+    "The message row should be presented as Tree Item"
+  );
+
+  about3Pane.sortController.groupBySort();
+  threadTree.scrollToIndex(0, true);
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.table.body.getAttribute("role") == "tree",
+    "The message list table should remain presented as Tree View"
+  );
+  Assert.equal(
+    threadTree.getRowAtIndex(0).getAttribute("role"),
+    "treeitem",
+    "The first dummy message row should be presented as Tree Item"
+  );
+
+  about3Pane.sortController.sortUnthreaded();
+});
diff --git a/comm/mail/base/test/browser/browser_threadTreeSorting.js b/comm/mail/base/test/browser/browser_threadTreeSorting.js
new file mode 100644
index 0000000000..be3bf0f2eb
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_threadTreeSorting.js
@@ -0,0 +1,344 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let { sortController, threadTree } = about3Pane;
+let rootFolder, testFolder, sourceMessageIDs;
+let menuHelper = new MenuTestHelper("menu_View");
+
+add_setup(async function () {
+  Services.prefs.setBoolPref("mailnews.scroll_to_new_message", false);
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder.QueryInterface(
+    Ci.nsIMsgLocalMailFolder
+  );
+
+  testFolder = rootFolder
+    .createLocalSubfolder("threadTreeSort")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator
+      .makeMessages({ count: 320 })
+      .map(message => message.toMboxString())
+  );
+
+  about3Pane.restoreState({
+    messagePaneVisible: false,
+    folderURI: testFolder.URI,
+  });
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  registerCleanupFunction(async () => {
+    await ensure_cards_view();
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.setBoolPref("mailnews.scroll_to_new_message", true);
+  });
+});
+
+add_task(async function () {
+  const messagesByDate = [...testFolder.messages];
+  const messagesBySubject = messagesByDate
+    .slice()
+    .sort((m1, m2) => (m1.subject < m2.subject ? -1 : 1));
+  const dateHeaderButton = about3Pane.document.getElementById("dateCol");
+  const subjectHeaderButton = about3Pane.document.getElementById("subjectCol");
+
+  // Sanity check.
+
+  Assert.equal(
+    about3Pane.gViewWrapper.primarySortType,
+    Ci.nsMsgViewSortType.byDate,
+    "initial sort column should be byDate"
+  );
+  Assert.equal(
+    about3Pane.gViewWrapper.primarySortOrder,
+    Ci.nsMsgViewSortOrder.ascending,
+    "initial sort order should be ascending"
+  );
+  Assert.ok(
+    about3Pane.gViewWrapper.showThreaded,
+    "initial mode should be threaded"
+  );
+  Assert.equal(
+    threadTree.view.rowCount,
+    320,
+    "correct number of rows in the view"
+  );
+  Assert.equal(
+    threadTree.getLastVisibleIndex(),
+    319,
+    "should be scrolled to the bottom"
+  );
+
+  Assert.equal(getCardActualSubject(320 - 1), messagesByDate.at(-1).subject);
+  Assert.equal(getCardActualSubject(320 - 2), messagesByDate.at(-2).subject);
+  Assert.equal(getCardActualSubject(320 - 3), messagesByDate.at(-3).subject);
+
+  // Switch to horizontal layout and table view so we can interact with the
+  // table header and sort rows properly.
+  await ensure_table_view();
+
+  // Check sorting with no message selected.
+
+  await clickHeader(dateHeaderButton, "byDate", "descending");
+  Assert.equal(
+    threadTree.view.rowCount,
+    320,
+    "correct number of rows in the view"
+  );
+  Assert.equal(
+    threadTree.getFirstVisibleIndex(),
+    0,
+    "should be scrolled to the top"
+  );
+
+  Assert.equal(getActualSubject(0), messagesByDate.at(-1).subject);
+  Assert.equal(getActualSubject(1), messagesByDate.at(-2).subject);
+  Assert.equal(getActualSubject(2), messagesByDate.at(-3).subject);
+
+  await clickHeader(dateHeaderButton, "byDate", "ascending");
+  Assert.equal(
+    threadTree.view.rowCount,
+    320,
+    "correct number of rows in the view"
+  );
+  Assert.equal(
+    threadTree.getLastVisibleIndex(),
+    319,
+    "should be scrolled to the bottom"
+  );
+
+  Assert.equal(getActualSubject(320 - 1), messagesByDate.at(-1).subject);
+  Assert.equal(getActualSubject(320 - 2), messagesByDate.at(-2).subject);
+  Assert.equal(getActualSubject(320 - 3), messagesByDate.at(-3).subject);
+
+  // Select a message and check the selection remains after sorting.
+
+  const targetMessage = messagesByDate[49];
+  info(`selecting message "${targetMessage.subject}"`);
+  threadTree.scrollToIndex(49, true);
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  threadTree.selectedIndex = 49;
+  verifySelection([49], [targetMessage.subject]);
+
+  await clickHeader(dateHeaderButton, "byDate", "descending");
+  verifySelection([319 - 49], [targetMessage.subject], {
+    where: "last",
+  });
+
+  await clickHeader(dateHeaderButton, "byDate", "ascending");
+  verifySelection([49], [targetMessage.subject], { where: "first" });
+
+  const targetIndexBySubject = messagesBySubject.indexOf(targetMessage);
+
+  // Switch columns.
+
+  await clickHeader(subjectHeaderButton, "bySubject", "ascending");
+  verifySelection([targetIndexBySubject], [targetMessage.subject]);
+
+  await clickHeader(subjectHeaderButton, "bySubject", "descending");
+  verifySelection([319 - targetIndexBySubject], [targetMessage.subject]);
+
+  await clickHeader(subjectHeaderButton, "bySubject", "ascending");
+  verifySelection([targetIndexBySubject], [targetMessage.subject]);
+
+  // Switch back again.
+
+  await clickHeader(dateHeaderButton, "byDate", "ascending");
+  verifySelection([49], [targetMessage.subject], { where: "first" });
+
+  // Select multiple messages, two adjacent to each other, one non-adjacent,
+  // and check the selection remains after sorting.
+
+  const targetMessages = [
+    messagesByDate[80],
+    messagesByDate[81],
+    messagesByDate[83],
+  ];
+  info(
+    `selecting messages "${targetMessages.map(m => m.subject).join('", "')}"`
+  );
+  threadTree.scrollToIndex(83, true);
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  threadTree.selectedIndices = [80, 81, 83];
+  verifySelection(
+    [80, 81, 83],
+    [
+      targetMessages[0].subject,
+      targetMessages[1].subject,
+      targetMessages[2].subject,
+    ],
+    { currentIndex: 83 }
+  );
+
+  await clickHeader(dateHeaderButton, "byDate", "descending");
+  verifySelection(
+    [319 - 83, 319 - 81, 319 - 80],
+    [
+      targetMessages[2].subject,
+      // Rows for these two messages probably don't exist yet.
+      // targetMessages[1].subject,
+      // targetMessages[0].subject,
+    ],
+    { where: "last" }
+  );
+
+  await clickHeader(dateHeaderButton, "byDate", "ascending");
+  verifySelection(
+    [80, 81, 83],
+    [
+      // Rows for these two messages probably don't exist yet.
+      undefined, // targetMessages[0].subject,
+      undefined, // targetMessages[1].subject,
+      targetMessages[2].subject,
+    ],
+    { currentIndex: 83, where: "first" }
+  );
+});
+
+async function clickHeader(header, type, order) {
+  info(`sorting ${type} ${order}`);
+  const button = header.querySelector("button");
+
+  let scrollEvents = 0;
+  let listener = () => scrollEvents++;
+
+  threadTree.addEventListener("scroll", listener);
+  EventUtils.synthesizeMouseAtCenter(button, {}, about3Pane);
+
+  // Wait long enough that any more scrolling would trigger more events.
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+  await new Promise(resolve => setTimeout(resolve, 100));
+  threadTree.removeEventListener("scroll", listener);
+  Assert.lessOrEqual(scrollEvents, 1, "only one scroll event should fire");
+
+  Assert.equal(
+    about3Pane.gViewWrapper.primarySortType,
+    Ci.nsMsgViewSortType[type],
+    `sort type should be ${type}`
+  );
+  Assert.equal(
+    about3Pane.gViewWrapper.primarySortOrder,
+    Ci.nsMsgViewSortOrder[order],
+    `sort order should be ${order}`
+  );
+  Assert.ok(about3Pane.gViewWrapper.showThreaded, "mode should be threaded");
+
+  Assert.ok(
+    button.classList.contains("sorting"),
+    "header button should have the sorted class"
+  );
+  Assert.equal(
+    button.classList.contains("ascending"),
+    order == "ascending",
+    `header button ${
+      order == "ascending" ? "should" : "should not"
+    } have the ascending class`
+  );
+  Assert.equal(
+    button.classList.contains("descending"),
+    order == "descending",
+    `header button ${
+      order == "descending" ? "should" : "should not"
+    } have the descending class`
+  );
+
+  Assert.equal(
+    threadTree.table.header.querySelectorAll(
+      ".sorting, .ascending, .descending"
+    ).length,
+    1,
+    "no other header buttons should have sorting classes"
+  );
+
+  if (AppConstants.platform != "macosx") {
+    await menuHelper.testItems({
+      viewSortMenu: {},
+      sortByDateMenuitem: { checked: type == "byDate" },
+      sortBySubjectMenuitem: { checked: type == "bySubject" },
+      sortAscending: { checked: order == "ascending" },
+      sortDescending: { checked: order == "descending" },
+      sortThreaded: { checked: true },
+      sortUnthreaded: {},
+      groupBySort: {},
+    });
+  }
+}
+
+function verifySelection(
+  selectedIndices,
+  subjects,
+  { currentIndex, where } = {}
+) {
+  if (currentIndex === undefined) {
+    currentIndex = selectedIndices[0];
+  }
+
+  Assert.deepEqual(
+    threadTree.selectedIndices,
+    selectedIndices,
+    "selectedIndices"
+  );
+  Assert.equal(threadTree.currentIndex, currentIndex, "currentIndex");
+  if (where == "first") {
+    Assert.equal(
+      threadTree.getFirstVisibleIndex(),
+      currentIndex,
+      "currentIndex should be first"
+    );
+  } else {
+    Assert.lessOrEqual(
+      threadTree.getFirstVisibleIndex(),
+      currentIndex,
+      "currentIndex should be at or below first"
+    );
+  }
+  if (where == "last") {
+    Assert.equal(
+      threadTree.getLastVisibleIndex(),
+      currentIndex,
+      "currentIndex should be last"
+    );
+  } else {
+    Assert.greaterOrEqual(
+      threadTree.getLastVisibleIndex(),
+      currentIndex,
+      "currentIndex should be at or above last"
+    );
+  }
+  for (let i = 0; i < subjects.length; i++) {
+    if (subjects[i]) {
+      Assert.equal(getActualSubject(selectedIndices[i]), subjects[i]);
+    }
+  }
+}
+
+function getCardActualSubject(index) {
+  let row = threadTree.getRowAtIndex(index);
+  return row.querySelector(".thread-card-subject-container > .subject")
+    .textContent;
+}
+
+function getActualSubject(index) {
+  let row = threadTree.getRowAtIndex(index);
+  return row.querySelector(".subject-line > span").textContent;
+}
+
+function getActualSubjects() {
+  return Array.from(
+    threadTree.table.body.rows,
+    row => row.querySelector(".subject-line > span").textContent
+  );
+}
diff --git a/comm/mail/base/test/browser/browser_threads.js b/comm/mail/base/test/browser/browser_threads.js
new file mode 100644
index 0000000000..4bfcb5fc11
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_threads.js
@@ -0,0 +1,385 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+let tabmail = document.getElementById("tabmail");
+let about3Pane = tabmail.currentAbout3Pane;
+let { threadPane, threadTree } = about3Pane;
+let { notificationBox } = threadPane;
+let rootFolder, testFolder, testMessages;
+
+add_setup(async function () {
+  Services.prefs.setStringPref(
+    "mail.ignore_thread.learn_more_url",
+    "http://mochi.test:8888/"
+  );
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("threads", null);
+  testFolder = rootFolder
+    .getChildNamed("threads")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  testFolder.addMessageBatch(
+    generator
+      .makeMessages({ count: 25, msgsPerThread: 5 })
+      .map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  about3Pane.displayFolder(testFolder.URI);
+  about3Pane.paneLayout.messagePaneVisible = false;
+  goDoCommand("cmd_expandAllThreads");
+
+  await ensure_table_view();
+
+  // Check the initial state of a sample of messages.
+
+  checkRowThreadState(0, true);
+  checkRowThreadState(1, false);
+  checkRowThreadState(2, false);
+  checkRowThreadState(3, false);
+  checkRowThreadState(4, false);
+  checkRowThreadState(5, true);
+  checkRowThreadState(10, true);
+  checkRowThreadState(15, true);
+  checkRowThreadState(20, true);
+
+  registerCleanupFunction(async () => {
+    await ensure_cards_view();
+    MailServices.accounts.removeAccount(account, false);
+    about3Pane.paneLayout.messagePaneVisible = true;
+    Services.prefs.clearUserPref("mail.ignore_thread.learn_more_url");
+  });
+});
+
+/**
+ * Test that a double click on a button doesn't trigger the opening of the
+ * message.
+ */
+add_task(async function checkDoubleClickOnThreadButton() {
+  let row = threadTree.getRowAtIndex(20);
+  Assert.ok(
+    !row.classList.contains("collapsed"),
+    "The thread row should be expanded"
+  );
+
+  Assert.equal(tabmail.tabInfo.length, 1, "Only 1 tab currently visible");
+
+  let button = row.querySelector(".thread-container .twisty");
+  // Simulate a double click on the twisty icon.
+  EventUtils.synthesizeMouseAtCenter(button, { clickCount: 2 }, about3Pane);
+
+  Assert.equal(
+    tabmail.tabInfo.length,
+    1,
+    "The message wasn't opened in another tab"
+  );
+
+  // Normally a double click on the twisty would close and open the thread, but
+  // this simulated click is too fast and the second click happens before the
+  // row is collapsed. Let's click on it again once to return to the original
+  // state.
+  EventUtils.synthesizeMouseAtCenter(button, {}, about3Pane);
+
+  Assert.ok(
+    !row.classList.contains("collapsed"),
+    "The double click was registered as 2 separate clicks and the thread row is still expanded"
+  );
+});
+
+add_task(async function testIgnoreThread() {
+  // Check the menu items for the root message in a thread.
+
+  threadTree.selectedIndex = 0;
+  await checkMessageMenu({ killThread: false });
+  await checkContextMenu(0, { "mailContext-ignoreThread": false });
+
+  // Check and use the menu items for a message inside a thread. Ignoring a
+  // thread should work from any message in the thread.
+  threadTree.selectedIndex = 2;
+  await checkMessageMenu({ killThread: false });
+  await checkContextMenu(
+    2,
+    { "mailContext-ignoreThread": false },
+    "mailContext-ignoreThread"
+  );
+
+  // Check the thread is ignored and collapsed.
+
+  checkRowThreadState(0, "ignore");
+  Assert.ok(
+    threadTree.getRowAtIndex(0).classList.contains("collapsed"),
+    "ignored row should have the 'collapsed' class"
+  );
+
+  // Restore the thread using the context menu item.
+
+  threadTree.selectedIndex = 0;
+  await checkMessageMenu({ killThread: true });
+  await checkContextMenu(
+    0,
+    { "mailContext-ignoreThread": true },
+    "mailContext-ignoreThread"
+  );
+
+  checkRowThreadState(0, true);
+
+  // Ignore the next thread. The first thread was collapsed by ignoring it,
+  // so the next thread is at index 1.
+
+  threadTree.selectedIndex = 1;
+  await checkMessageMenu({ killThread: false });
+  await checkContextMenu(
+    1,
+    { "mailContext-ignoreThread": false },
+    "mailContext-ignoreThread"
+  );
+
+  checkRowThreadState(1, "ignore");
+  Assert.ok(
+    threadTree.getRowAtIndex(1).classList.contains("collapsed"),
+    "ignored row should have the 'collapsed' class"
+  );
+
+  // Check the notification about the ignored thread.
+
+  let notification =
+    notificationBox.getNotificationWithValue("ignoreThreadInfo");
+  let label = notification.shadowRoot.querySelector(
+    "label.notification-message"
+  );
+  Assert.stringContains(label.textContent, testMessages[5].subject);
+  let buttons = notification.shadowRoot.querySelectorAll(
+    "button.notification-button"
+  );
+  Assert.equal(buttons.length, 2);
+
+  // Click the Learn More button, and check it opens the support page in a new tab.
+  let tabOpenPromise = BrowserTestUtils.waitForEvent(
+    tabmail.tabContainer,
+    "TabOpen"
+  );
+  EventUtils.synthesizeMouseAtCenter(buttons[0], {}, about3Pane);
+  let event = await tabOpenPromise;
+  await BrowserTestUtils.browserLoaded(event.detail.tabInfo.browser);
+  Assert.equal(
+    event.detail.tabInfo.browser.currentURI.spec,
+    "http://mochi.test:8888/"
+  );
+  tabmail.closeTab(event.detail.tabInfo);
+  Assert.ok(notification.parentNode, "notification should not be closed");
+
+  // Click the Undo button, and check it stops ignoring the thread.
+  EventUtils.synthesizeMouseAtCenter(buttons[1], {}, about3Pane);
+  await TestUtils.waitForCondition(() => !notification.parentNode);
+  checkRowThreadState(1, true);
+
+  goDoCommand("cmd_expandAllThreads");
+});
+
+add_task(async function testIgnoreSubthread() {
+  // Check and use the menu items for a message inside a thread.
+
+  threadTree.selectedIndex = 12;
+  await checkMessageMenu({ killSubthread: false });
+  await checkContextMenu(
+    12,
+    { "mailContext-ignoreSubthread": false },
+    "mailContext-ignoreSubthread"
+  );
+
+  // Check all messages in that subthread are marked as ignored.
+
+  checkRowThreadState(12, "ignoreSubthread");
+  checkRowThreadState(13, "ignoreSubthread");
+  checkRowThreadState(14, "ignoreSubthread");
+
+  // Restore the subthread using the context menu item.
+
+  threadTree.selectedIndex = 12;
+  await checkMessageMenu({ killSubthread: true });
+  await checkContextMenu(
+    12,
+    { "mailContext-ignoreSubthread": true },
+    "mailContext-ignoreSubthread"
+  );
+
+  checkRowThreadState(12, false);
+  checkRowThreadState(13, false);
+  checkRowThreadState(14, false);
+
+  // Ignore a different subthread.
+
+  threadTree.selectedIndex = 17;
+  await checkMessageMenu({ killSubthread: false });
+  await checkContextMenu(
+    17,
+    { "mailContext-ignoreSubthread": false },
+    "mailContext-ignoreSubthread"
+  );
+
+  checkRowThreadState(17, "ignoreSubthread");
+  checkRowThreadState(18, "ignoreSubthread");
+  checkRowThreadState(19, "ignoreSubthread");
+
+  // Check the notification about the ignored subthread.
+
+  let notification =
+    notificationBox.getNotificationWithValue("ignoreThreadInfo");
+  let label = notification.shadowRoot.querySelector(
+    "label.notification-message"
+  );
+  Assert.stringContains(label.textContent, testMessages[17].subject);
+  let buttons = notification.shadowRoot.querySelectorAll(
+    "button.notification-button"
+  );
+  Assert.equal(buttons.length, 2);
+
+  // Click the Undo button, and check it stops ignoring the subthread.
+  EventUtils.synthesizeMouseAtCenter(buttons[1], {}, about3Pane);
+  await TestUtils.waitForCondition(() => !notification.parentNode);
+  checkRowThreadState(17, false);
+  checkRowThreadState(18, false);
+  checkRowThreadState(19, false);
+});
+
+add_task(async function testWatchThread() {
+  threadTree.selectedIndex = 20;
+  await checkMessageMenu({ watchThread: false });
+  await checkContextMenu(
+    20,
+    { "mailContext-watchThread": false },
+    "mailContext-watchThread"
+  );
+
+  checkRowThreadState(20, "watched");
+  checkRowThreadState(21, false);
+
+  await checkMessageMenu({ watchThread: true });
+  await checkContextMenu(
+    20,
+    { "mailContext-watchThread": true },
+    "mailContext-watchThread"
+  );
+
+  checkRowThreadState(20, true);
+  checkRowThreadState(21, false);
+});
+
+async function checkContextMenu(index, expectedStates, itemToActivate) {
+  let contextMenu = about3Pane.document.getElementById("mailContext");
+  let row = threadTree.getRowAtIndex(index);
+
+  let shownPromise = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(
+    row.querySelector(".subject-line"),
+    { type: "contextmenu" },
+    about3Pane
+  );
+  await shownPromise;
+
+  for (let [id, checkedState] of Object.entries(expectedStates)) {
+    assertCheckedState(about3Pane.document.getElementById(id), checkedState);
+  }
+
+  let hiddenPromise = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
+  if (itemToActivate) {
+    contextMenu.activateItem(
+      about3Pane.document.getElementById(itemToActivate)
+    );
+  } else {
+    contextMenu.hidePopup();
+  }
+  await hiddenPromise;
+}
+
+async function checkMessageMenu(expectedStates) {
+  if (AppConstants.platform == "macosx") {
+    // Can't check the menu.
+    return;
+  }
+
+  let messageMenu = document.getElementById("messageMenu");
+
+  let shownPromise = BrowserTestUtils.waitForEvent(
+    messageMenu.menupopup,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(messageMenu, {}, window);
+  await shownPromise;
+
+  for (let [id, checkedState] of Object.entries(expectedStates)) {
+    assertCheckedState(document.getElementById(id), checkedState);
+  }
+
+  messageMenu.menupopup.hidePopup();
+}
+
+function assertCheckedState(menuItem, checkedState) {
+  if (checkedState) {
+    Assert.equal(menuItem.getAttribute("checked"), "true");
+  } else {
+    Assert.ok(
+      !menuItem.hasAttribute("checked") ||
+        menuItem.getAttribute("checked") == "false"
+    );
+  }
+}
+
+function checkRowThreadState(index, expected) {
+  let row = threadTree.getRowAtIndex(index);
+  let icon = row.querySelector(".threadcol-column img");
+
+  if (!expected) {
+    Assert.ok(
+      !row.classList.contains("children"),
+      "row should not have the 'children' class"
+    );
+    Assert.ok(BrowserTestUtils.is_hidden(icon), "icon should be hidden");
+    return;
+  }
+
+  Assert.ok(BrowserTestUtils.is_visible(icon), "icon should be visible");
+
+  let shouldHaveChildrenClass = true;
+  let iconContent = getComputedStyle(icon).content;
+
+  switch (expected) {
+    case true:
+      Assert.stringContains(iconContent, "/thread-sm.svg");
+      break;
+    case "ignore":
+      Assert.stringContains(row.dataset.properties, "ignore");
+      Assert.stringContains(iconContent, "/thread-ignored.svg");
+      break;
+    case "ignoreSubthread":
+      Assert.stringContains(row.dataset.properties, "ignoreSubthread");
+      Assert.stringContains(iconContent, "/subthread-ignored.svg");
+      shouldHaveChildrenClass = false;
+      break;
+    case "watched":
+      Assert.stringContains(row.dataset.properties, "watch");
+      Assert.stringContains(iconContent, "/eye.svg");
+      break;
+  }
+
+  Assert.equal(
+    row.classList.contains("children"),
+    shouldHaveChildrenClass,
+    `row should${
+      shouldHaveChildrenClass ? "" : " not"
+    } have the 'children' class`
+  );
+}
diff --git a/comm/mail/base/test/browser/browser_toolsMenu.js b/comm/mail/base/test/browser/browser_toolsMenu.js
new file mode 100644
index 0000000000..8dbf5911c8
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_toolsMenu.js
@@ -0,0 +1,109 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+/** @type MenuData */
+const toolsMenuData = {
+  tasksMenuMail: { hidden: true },
+  addressBook: {},
+  menu_openSavedFilesWnd: {},
+  addonsManager: {},
+  activityManager: {},
+  imAccountsStatus: { disabled: true },
+  imStatusAvailable: {},
+  imStatusUnavailable: {},
+  imStatusOffline: {},
+  imStatusShowAccounts: {},
+  joinChatMenuItem: { disabled: true },
+  filtersCmd: {},
+  applyFilters: { disabled: ["mail3PaneTab", "contentTab"] },
+  applyFiltersToSelection: { disabled: ["mail3PaneTab", "contentTab"] },
+  runJunkControls: { disabled: true },
+  deleteJunk: { disabled: true },
+  menu_import: {},
+  menu_export: {},
+  manageKeysOpenPGP: {},
+  devtoolsMenu: {},
+  devtoolsToolbox: {},
+  addonDebugging: {},
+  javascriptConsole: {},
+  sanitizeHistory: {},
+};
+if (AppConstants.platform == "win") {
+  toolsMenuData.menu_preferences = {};
+  toolsMenuData.menu_accountmgr = {};
+}
+let helper = new MenuTestHelper("tasksMenu", toolsMenuData);
+
+let tabmail = document.getElementById("tabmail");
+let rootFolder, testFolder, testMessages;
+
+add_setup(async function () {
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("tools menu", null);
+  testFolder = rootFolder
+    .getChildNamed("tools menu")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  testFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...testFolder.messages];
+
+  window.OpenMessageInNewTab(testMessages[0], { background: true });
+  await BrowserTestUtils.waitForEvent(
+    tabmail.tabInfo[1].chromeBrowser,
+    "MsgLoaded"
+  );
+
+  window.openTab("contentTab", {
+    url: "https://example.com/",
+    background: true,
+  });
+
+  registerCleanupFunction(() => {
+    tabmail.closeOtherTabs(0);
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function test3PaneTab() {
+  tabmail.currentAbout3Pane.displayFolder(rootFolder);
+  await helper.testAllItems("mail3PaneTab");
+
+  tabmail.currentAbout3Pane.displayFolder(testFolder);
+  await helper.testItems({
+    applyFilters: {},
+    runJunkControls: {},
+    deleteJunk: {},
+  });
+
+  tabmail.currentAbout3Pane.threadTree.selectedIndex = 1;
+  await helper.testItems({
+    applyFilters: {},
+    applyFiltersToSelection: {},
+    runJunkControls: {},
+    deleteJunk: {},
+  });
+});
+
+add_task(async function testMessageTab() {
+  tabmail.switchToTab(1);
+  await helper.testAllItems("mailMessageTab");
+});
+
+add_task(async function testContentTab() {
+  tabmail.switchToTab(2);
+  await helper.testAllItems("contentTab");
+});
diff --git a/comm/mail/base/test/browser/browser_treeListbox.js b/comm/mail/base/test/browser/browser_treeListbox.js
new file mode 100644
index 0000000000..558bef991e
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_treeListbox.js
@@ -0,0 +1,1313 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let tabmail = document.getElementById("tabmail");
+registerCleanupFunction(() => {
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+});
+
+async function withTab(callback) {
+  let tab = tabmail.openTab("contentTab", {
+    url: "chrome://mochitests/content/browser/comm/mail/base/test/browser/files/treeListbox.xhtml",
+  });
+  await BrowserTestUtils.browserLoaded(tab.browser);
+
+  tab.browser.focus();
+  await SpecialPowers.spawn(tab.browser, [], callback);
+
+  tabmail.closeTab(tab);
+}
+
+add_task(async function testKeyboard() {
+  await withTab(subtestKeyboard);
+});
+add_task(async function testMutation() {
+  await withTab(subtestMutation);
+});
+add_task(async function testExpandCollapse() {
+  await withTab(subtestExpandCollapse);
+});
+add_task(async function testSelectOnRemoval1() {
+  await withTab(subtestSelectOnRemoval1);
+});
+add_task(async function testSelectOnRemoval2() {
+  await withTab(subtestSelectOnRemoval2);
+});
+add_task(async function testSelectOnRemoval3() {
+  await withTab(subtestSelectOnRemoval3);
+});
+add_task(async function testUnselectable() {
+  await withTab(subtestUnselectable);
+});
+
+/**
+ * Tests keyboard navigation up and down the list.
+ */
+async function subtestKeyboard() {
+  let doc = content.document;
+
+  let list = doc.querySelector(`ul[is="tree-listbox"]`);
+  Assert.ok(!!list, "the list exists");
+
+  let initialRowIds = [
+    "row-1",
+    "row-2",
+    "row-2-1",
+    "row-2-2",
+    "row-3",
+    "row-3-1",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+  Assert.equal(list.rowCount, initialRowIds.length, "rowCount is correct");
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    initialRowIds,
+    "initial rows are correct"
+  );
+  Assert.equal(list.selectedIndex, 0, "selectedIndex is set to 0");
+
+  let selectHandler = {
+    seenEvent: null,
+    selectedAtEvent: null,
+
+    reset() {
+      this.seenEvent = null;
+      this.selectedAtEvent = null;
+    },
+    handleEvent(event) {
+      this.seenEvent = event;
+      this.selectedAtEvent = list.selectedIndex;
+    },
+  };
+
+  function pressKey(key, expectEvent = true) {
+    info(`pressing ${key}`);
+
+    selectHandler.reset();
+    list.addEventListener("select", selectHandler);
+    EventUtils.synthesizeKey(key, {}, content);
+    list.removeEventListener("select", selectHandler);
+    Assert.equal(
+      !!selectHandler.seenEvent,
+      expectEvent,
+      `'select' event ${expectEvent ? "fired" : "did not fire"}`
+    );
+  }
+
+  function checkSelected(expectedIndex, expectedId) {
+    Assert.equal(list.selectedIndex, expectedIndex, "selectedIndex is correct");
+    if (selectHandler.selectedAtEvent !== null) {
+      // Check the value was already set when the select event fired.
+      Assert.deepEqual(
+        selectHandler.selectedAtEvent,
+        expectedIndex,
+        "selectedIndex was correct at the last 'select' event"
+      );
+    }
+
+    Assert.deepEqual(
+      Array.from(list.querySelectorAll(".selected"), row => row.id),
+      [expectedId],
+      "correct rows have the 'selected' class"
+    );
+  }
+
+  // Key down the list.
+
+  list.focus();
+  for (let i = 1; i < initialRowIds.length; i++) {
+    pressKey("KEY_ArrowDown");
+    checkSelected(i, initialRowIds[i]);
+  }
+
+  pressKey("KEY_ArrowDown", false);
+  checkSelected(7, "row-3-1-2");
+
+  pressKey("KEY_PageDown", false);
+  checkSelected(7, "row-3-1-2");
+
+  pressKey("KEY_End", false);
+  checkSelected(7, "row-3-1-2");
+
+  // And up again.
+
+  for (let i = initialRowIds.length - 2; i >= 0; i--) {
+    pressKey("KEY_ArrowUp");
+    checkSelected(i, initialRowIds[i]);
+  }
+
+  pressKey("KEY_ArrowUp", false);
+  checkSelected(0, "row-1");
+
+  pressKey("KEY_PageUp", false);
+  checkSelected(0, "row-1");
+
+  pressKey("KEY_Home", false);
+  checkSelected(0, "row-1");
+
+  // Jump around.
+
+  pressKey("KEY_End");
+  checkSelected(7, "row-3-1-2");
+
+  pressKey("KEY_PageUp");
+  checkSelected(0, "row-1");
+
+  pressKey("KEY_PageDown");
+  checkSelected(7, "row-3-1-2");
+
+  pressKey("KEY_Home");
+  checkSelected(0, "row-1");
+}
+
+/**
+ * Tests that rows added to or removed from the tree cause their parent rows
+ * to gain or lose the 'children' class as appropriate. This is done with a
+ * mutation observer so the tree is not updated immediately, but at the end of
+ * the event loop.
+ */
+async function subtestMutation() {
+  let doc = content.document;
+  let list = doc.querySelector(`ul[is="tree-listbox"]`);
+  let idsWithChildren = ["row-2", "row-3", "row-3-1"];
+  let idsWithoutChildren = [
+    "row-1",
+    "row-2-1",
+    "row-2-2",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+
+  // Check the initial state.
+
+  function createNewRow() {
+    let template = doc.getElementById("rowToAdd");
+    return template.content.cloneNode(true).firstElementChild;
+  }
+
+  function checkHasClass(id, shouldHaveClass = true) {
+    let row = doc.getElementById(id);
+    if (shouldHaveClass) {
+      Assert.ok(
+        row.classList.contains("children"),
+        `${id} should have the 'children' class`
+      );
+    } else {
+      Assert.ok(
+        !row.classList.contains("children"),
+        `${id} should NOT have the 'children' class`
+      );
+    }
+  }
+
+  for (let id of idsWithChildren) {
+    checkHasClass(id, true);
+  }
+  for (let id of idsWithoutChildren) {
+    checkHasClass(id, false);
+  }
+
+  // Add a new row without children to the end of the list.
+
+  info("adding new row to end of list");
+  let newRow = list.appendChild(createNewRow());
+  // Wait for mutation observer. It does nothing, but let's be sure.
+  await new Promise(r => content.setTimeout(r));
+  checkHasClass("new-row", false);
+  newRow.remove();
+  await new Promise(r => content.setTimeout(r));
+
+  // Add and remove a single row to rows with existing children.
+
+  for (let id of idsWithChildren) {
+    let row = doc.getElementById(id);
+
+    info(`adding new row to ${id}`);
+    newRow = row.querySelector("ul").appendChild(createNewRow());
+    // Wait for mutation observer. It does nothing, but let's be sure.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass("new-row", false);
+    checkHasClass(id, true);
+
+    info(`removing new row from ${id}`);
+    newRow.remove();
+    // Wait for mutation observer. It does nothing, but let's be sure.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass(id, true);
+
+    if (id == "row-3-1") {
+      checkHasClass("row-3", true);
+    }
+  }
+
+  // Add and remove a single row to rows without existing children.
+
+  for (let id of idsWithoutChildren) {
+    let row = doc.getElementById(id);
+    let childList = row.appendChild(doc.createElement("ul"));
+
+    info(`adding new row to ${id}`);
+    newRow = childList.appendChild(createNewRow());
+    // Wait for mutation observer.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass("new-row", false);
+    checkHasClass(id, true);
+
+    info(`removing new row from ${id}`);
+    newRow.remove();
+    // Wait for mutation observer.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass(id, false);
+
+    // This time remove the child list, not the row itself.
+
+    info(`adding new row to ${id} again`);
+    newRow = childList.appendChild(createNewRow());
+    // Wait for mutation observer.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass("new-row", false);
+    checkHasClass(id, true);
+
+    info(`removing child list from ${id}`);
+    childList.remove();
+    // Wait for mutation observer.
+    await new Promise(r => content.setTimeout(r));
+    checkHasClass(id, false);
+
+    if (["row-2-1", "row-2-2"].includes(id)) {
+      checkHasClass("row-2", true);
+    } else if (["row-3-1-1", "row-3-1-2"].includes(id)) {
+      checkHasClass("row-3-1", true);
+      checkHasClass("row-3", true);
+    }
+  }
+
+  // Add a row with children and a grandchild to the end of the list. The new
+  // row should be given the "children" class. The child with a grandchild
+  // should be given the "children" class. I think it's safe to assume this
+  // works no matter where in the tree it's added.
+
+  let template = doc.getElementById("rowsToAdd");
+  newRow = template.content.cloneNode(true).firstElementChild;
+  list.appendChild(newRow);
+  // Wait for mutation observer.
+  await new Promise(r => content.setTimeout(r));
+  checkHasClass("added-row", true);
+  checkHasClass("added-row-1", true);
+  checkHasClass("added-row-1-1", false);
+  checkHasClass("added-row-2", false);
+  newRow.remove();
+  await new Promise(r => content.setTimeout(r));
+
+  // Add a new row without children to the middle of the list. Selection should
+  // be maintained.
+
+  list.selectedIndex = 5; // row-3-1
+
+  info("adding new row to middle of list");
+  newRow = template.content.cloneNode(true).firstElementChild;
+  list.insertBefore(newRow, list.querySelector("#row-3"));
+  await new Promise(r => content.setTimeout(r));
+  Assert.equal(list.selectedIndex, 9, "row-3-1 is still selected");
+
+  newRow.remove();
+  await new Promise(r => content.setTimeout(r));
+  Assert.equal(list.selectedIndex, 5, "row-3-1 is still selected");
+
+  list.selectedIndex = 0;
+}
+
+/**
+ * Checks that expanding and collapsing works. Twisties in the test file are
+ * styled as coloured squares: red for collapsed, green for expanded.
+ *
+ * @note This is practically the same test as in browser_treeView.js,
+ * but for TreeListbox instead of TreeView. If you make changes here
+ * you may want to make changes there too.
+ */
+async function subtestExpandCollapse() {
+  let doc = content.document;
+  let list = doc.querySelector(`ul[is="tree-listbox"]`);
+  let allIds = [
+    "row-1",
+    "row-2",
+    "row-2-1",
+    "row-2-2",
+    "row-3",
+    "row-3-1",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+  let idsWithoutChildren = [
+    "row-1",
+    "row-2-1",
+    "row-2-2",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+
+  let listener = {
+    reset() {
+      this.collapsedRow = null;
+      this.expandedRow = null;
+    },
+    handleEvent(event) {
+      if (event.type == "collapsed") {
+        this.collapsedRow = event.target;
+      } else if (event.type == "expanded") {
+        this.expandedRow = event.target;
+      }
+    },
+  };
+  list.addEventListener("collapsed", listener);
+  list.addEventListener("expanded", listener);
+
+  let selectHandler = {
+    seenEvent: null,
+    selectedAtEvent: null,
+
+    reset() {
+      this.seenEvent = null;
+      this.selectedAtEvent = null;
+    },
+    handleEvent(event) {
+      this.seenEvent = event;
+      this.selectedAtEvent = list.selectedIndex;
+    },
+  };
+
+  Assert.equal(
+    list.querySelectorAll("collapsed").length,
+    0,
+    "no rows are collapsed"
+  );
+  Assert.equal(list.rowCount, 8, "row count");
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    [
+      "row-1",
+      "row-2",
+      "row-2-1",
+      "row-2-2",
+      "row-3",
+      "row-3-1",
+      "row-3-1-1",
+      "row-3-1-2",
+    ],
+    "rows property"
+  );
+
+  function checkSelected(expectedIndex, expectedId) {
+    Assert.equal(list.selectedIndex, expectedIndex, "selectedIndex is correct");
+    let selected = [...list.querySelectorAll(".selected")].map(row => row.id);
+    Assert.deepEqual(
+      selected,
+      [expectedId],
+      "correct rows have the 'selected' class"
+    );
+  }
+
+  checkSelected(0, "row-1");
+
+  // Click the twisties of rows without children.
+
+  function performChange(id, expectedChange, changeCallback) {
+    listener.reset();
+    let row = doc.getElementById(id);
+    let before = row.classList.contains("collapsed");
+
+    changeCallback(row);
+
+    if (expectedChange == "collapsed") {
+      Assert.ok(!before, `${id} was expanded`);
+      Assert.ok(row.classList.contains("collapsed"), `${id} collapsed`);
+      Assert.equal(listener.collapsedRow, row, `${id} fired 'collapse' event`);
+      Assert.ok(!listener.expandedRow, `${id} did not fire 'expand' event`);
+    } else if (expectedChange == "expanded") {
+      Assert.ok(before, `${id} was collapsed`);
+      Assert.ok(!row.classList.contains("collapsed"), `${id} expanded`);
+      Assert.ok(!listener.collapsedRow, `${id} did not fire 'collapse' event`);
+      Assert.equal(listener.expandedRow, row, `${id} fired 'expand' event`);
+    } else {
+      Assert.equal(
+        row.classList.contains("collapsed"),
+        before,
+        `${id} state did not change`
+      );
+    }
+  }
+
+  function clickTwisty(id, expectedChange) {
+    info(`clicking the twisty on ${id}`);
+    performChange(id, expectedChange, row =>
+      EventUtils.synthesizeMouseAtCenter(
+        row.querySelector(".twisty"),
+        {},
+        content
+      )
+    );
+  }
+
+  function doubleClick(id, expectedChange) {
+    info(`double clicking on ${id}`);
+    performChange(id, expectedChange, row =>
+      EventUtils.synthesizeMouseAtCenter(row, { clickCount: 2 }, content)
+    );
+  }
+
+  for (let id of idsWithoutChildren) {
+    clickTwisty(id, null);
+    Assert.equal(list.querySelector(".selected").id, id);
+  }
+
+  checkSelected(7, "row-3-1-2");
+
+  // Click the twisties of rows with children.
+
+  function checkRowsAreHidden(...hiddenIds) {
+    let remainingIds = allIds.slice();
+
+    for (let id of allIds) {
+      if (hiddenIds.includes(id)) {
+        Assert.equal(doc.getElementById(id).clientHeight, 0, `${id} is hidden`);
+        remainingIds.splice(remainingIds.indexOf(id), 1);
+      } else {
+        Assert.greater(
+          doc.getElementById(id).clientHeight,
+          0,
+          `${id} is visible`
+        );
+      }
+    }
+
+    Assert.equal(list.rowCount, 8 - hiddenIds.length, "row count");
+    Assert.deepEqual(
+      list.rows.map(r => r.id),
+      remainingIds,
+      "rows property"
+    );
+  }
+
+  // Collapse row 2.
+
+  clickTwisty("row-2", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelected(5, "row-3-1-2");
+
+  // Collapse row 3.
+
+  clickTwisty("row-3", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(2, "row-3");
+
+  // Expand row 2.
+
+  doubleClick("row-2", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Expand row 3.
+
+  doubleClick("row-3", "expanded");
+  checkRowsAreHidden();
+  checkSelected(4, "row-3");
+
+  // Collapse row 3-1.
+
+  clickTwisty("row-3-1", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Collapse row 3.
+
+  clickTwisty("row-3", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Expand row 3.
+
+  clickTwisty("row-3", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Expand row 3-1.
+
+  clickTwisty("row-3-1", "expanded");
+  checkRowsAreHidden();
+  checkSelected(4, "row-3");
+
+  // Test key presses.
+
+  function pressKey(id, key, expectedChange) {
+    info(`pressing ${key}`);
+    performChange(id, expectedChange, row => {
+      EventUtils.synthesizeKey(key, {}, content);
+    });
+  }
+
+  // Row 0 has no children or parent, nothing should happen.
+
+  list.selectedIndex = 0;
+  pressKey("row-1", "VK_LEFT");
+  checkSelected(0, "row-1");
+  pressKey("row-1", "VK_RIGHT");
+  checkSelected(0, "row-1");
+
+  // Collapse row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelected(1, "row-2");
+
+  pressKey("row-2", "VK_LEFT");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelected(1, "row-2");
+
+  // Collapse row 3.
+
+  list.selectedIndex = 2;
+  pressKey("row-3", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(2, "row-3");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(2, "row-3");
+
+  // Expand row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_RIGHT", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(1, "row-2");
+
+  // Expand row 3.
+
+  list.selectedIndex = 4;
+  pressKey("row-3", "VK_RIGHT", "expanded");
+  checkRowsAreHidden();
+  checkSelected(4, "row-3");
+
+  // Go down the tree to row 3-1-1.
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  // Collapse row 3-1.
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+
+  // Collapse row 3.
+
+  pressKey("row-3-1", "VK_LEFT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  pressKey("row-3", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Expand row 3.
+
+  pressKey("row-3", "VK_RIGHT", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+
+  // Expand row 3-1.
+
+  pressKey("row-3-1", "VK_RIGHT", "expanded");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  // Toggle expansion of row 3-1 with Enter key.
+
+  list.selectedIndex = 5;
+  pressKey("row-3-1", "KEY_Enter", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3-1", "KEY_Enter", "expanded");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  // Same again, with a RTL tree.
+
+  info("switching to RTL");
+  doc.documentElement.dir = "rtl";
+
+  // Row 0 has no children or parent, nothing should happen.
+
+  list.selectedIndex = 0;
+  pressKey("row-1", "VK_RIGHT");
+  checkSelected(0, "row-1");
+  pressKey("row-1", "VK_LEFT");
+  checkSelected(0, "row-1");
+
+  // Collapse row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelected(1, "row-2");
+
+  pressKey("row-2", "VK_RIGHT");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelected(1, "row-2");
+
+  // Collapse row 3.
+
+  list.selectedIndex = 2;
+  pressKey("row-3", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(2, "row-3");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(2, "row-3");
+
+  // Expand row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_LEFT", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(1, "row-2");
+
+  // Expand row 3.
+
+  list.selectedIndex = 4;
+  pressKey("row-3", "VK_LEFT", "expanded");
+  checkRowsAreHidden();
+  checkSelected(4, "row-3");
+
+  // Go down the tree to row 3-1-1.
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  // Collapse row 3-1.
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+
+  // Collapse row 3.
+
+  pressKey("row-3-1", "VK_RIGHT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  pressKey("row-3", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  // Expand row 3.
+
+  pressKey("row-3", "VK_LEFT", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+
+  // Expand row 3-1.
+
+  pressKey("row-3-1", "VK_LEFT", "expanded");
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelected(6, "row-3-1-1");
+
+  // Use the class methods for expanding and collapsing.
+
+  selectHandler.reset();
+  list.addEventListener("select", selectHandler);
+  listener.reset();
+
+  list.collapseRowAtIndex(6); // No children, no effect.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.ok(!listener.collapsedRow, "'collapsed' event did not fire");
+
+  list.expandRowAtIndex(6); // No children, no effect.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.ok(!listener.expandedRow, "'expanded' event did not fire");
+
+  list.collapseRowAtIndex(1); // Item with children that aren't selected.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(
+    listener.collapsedRow.id,
+    "row-2",
+    "row-2 fired 'collapsed' event"
+  );
+  listener.reset();
+
+  list.expandRowAtIndex(1); // Item with children that aren't selected.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(
+    listener.expandedRow.id,
+    "row-2",
+    "row-2 fired 'expanded' event"
+  );
+  listener.reset();
+
+  list.collapseRowAtIndex(5); // Item with children that are selected.
+  Assert.ok(selectHandler.seenEvent, "'select' event fired");
+  Assert.equal(
+    selectHandler.selectedAtEvent,
+    5,
+    "selectedIndex was correct when 'select' event fired"
+  );
+  Assert.equal(
+    listener.collapsedRow.id,
+    "row-3-1",
+    "row-3-1 fired 'collapsed' event"
+  );
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelected(5, "row-3-1");
+  selectHandler.reset();
+  listener.reset();
+
+  list.expandRowAtIndex(5); // Selected item with children.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(
+    listener.expandedRow.id,
+    "row-3-1",
+    "row-3-1 fired 'expanded' event"
+  );
+  checkRowsAreHidden();
+  checkSelected(5, "row-3-1");
+  listener.reset();
+
+  list.selectedIndex = 7;
+  selectHandler.reset();
+
+  list.collapseRowAtIndex(4); // Item with grandchildren that are selected.
+  Assert.ok(selectHandler.seenEvent, "'select' event fired");
+  Assert.equal(
+    selectHandler.selectedAtEvent,
+    4,
+    "selectedIndex was correct when 'select' event fired"
+  );
+  Assert.equal(
+    listener.collapsedRow.id,
+    "row-3",
+    "row-3 fired 'collapsed' event"
+  );
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelected(4, "row-3");
+  selectHandler.reset();
+  listener.reset();
+
+  list.expandRowAtIndex(4); // Selected item with grandchildren.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(
+    listener.expandedRow.id,
+    "row-3",
+    "row-3 fired 'expanded' event"
+  );
+  checkRowsAreHidden();
+  checkSelected(4, "row-3");
+  listener.reset();
+
+  list.removeEventListener("collapsed", listener);
+  list.removeEventListener("expanded", listener);
+  list.removeEventListener("select", selectHandler);
+  doc.documentElement.dir = null;
+}
+
+/**
+ * Tests what happens to selection when a row is removed.
+ */
+async function subtestSelectOnRemoval1() {
+  let doc = content.document;
+  let list = doc.getElementById("deleteTree");
+
+  let selectPromise;
+  function promiseSelectEvent() {
+    selectPromise = new Promise(resolve =>
+      list.addEventListener(
+        "select",
+        () => resolve([list.selectedIndex, list.selectedRow?.id ?? null]),
+        {
+          once: true,
+        }
+      )
+    );
+  }
+  // dRow-1
+  // dRow-2
+  //   dRow-2-1
+  //   dRow-2-2
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  //   dRow-4-4
+  // dRow-5
+  //   dRow-5-1
+  // dRow-6
+
+  // Delete a row that is selected, and not at the top level. Selection should
+  // move to the next row under the shared parent.
+
+  list.selectedIndex = 2;
+  Assert.equal(list.selectedRow.id, "dRow-2-1");
+
+  promiseSelectEvent();
+  list.querySelector("#dRow-2-1").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [2, "dRow-2-2"],
+    "selection moved to the next row"
+  );
+
+  // dRow-1
+  // dRow-2
+  //   dRow-2-2
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  //   dRow-4-4
+  // dRow-5
+  //   dRow-5-1
+  // dRow-6
+
+  // Delete a row that contains the selected, and at the top level. Selection
+  // should move to the next top-level row.
+
+  Assert.equal(list.selectedRow.id, "dRow-2-2");
+  promiseSelectEvent();
+  list.querySelector("#dRow-2").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [1, "dRow-3"],
+    "selection moved to the next row"
+  );
+
+  // dRow-1
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  //   dRow-4-4
+  // dRow-5
+  //   dRow-5-1
+  // dRow-6
+
+  // Delete the first top-level row that is selected. Should select the first
+  // row.
+  list.selectedIndex = 0;
+  Assert.equal(list.selectedRow.id, "dRow-1");
+  promiseSelectEvent();
+  list.querySelector("#dRow-1").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [0, "dRow-3"],
+    "selection moved to the first row"
+  );
+
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  //   dRow-4-4
+  // dRow-5
+  //   dRow-5-1
+  // dRow-6
+
+  // Delete the last top-level row that is selected. Should select the last row.
+  list.selectedIndex = 14;
+  Assert.equal(list.selectedRow.id, "dRow-6");
+  promiseSelectEvent();
+  list.querySelector("#dRow-6").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [13, "dRow-5-1"],
+    "selection moved to the new last row"
+  );
+
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  //   dRow-4-4
+  // dRow-5
+  //   dRow-5-1
+
+  // Delete the last selected descendant should move selection to the new
+  // descendant child.
+  list.selectedIndex = 11;
+  Assert.equal(list.selectedRow.id, "dRow-4-4");
+  promiseSelectEvent();
+  list.querySelector("#dRow-4-4").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [10, "dRow-4-3-2"],
+    "selection moved to the new last row"
+  );
+
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-1
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  // dRow-5
+  //   dRow-5-1
+
+  // Delete the first selected child should move selection to the new first child.
+  list.selectedIndex = 6;
+  Assert.equal(list.selectedRow.id, "dRow-4-1");
+  promiseSelectEvent();
+  list.querySelector("#dRow-4-1").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [6, "dRow-4-2"],
+    "selection moved to the new first row"
+  );
+
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-2
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  // dRow-5
+  //   dRow-5-1
+
+  // Delete a row that isn't selected. Nothing should happen.
+
+  list.selectedIndex = 2;
+  Assert.equal(list.selectedRow.id, "dRow-3-1-1");
+
+  list.querySelector("#dRow-3-1-2").remove();
+  await new Promise(resolve => content.setTimeout(resolve));
+  Assert.equal(list.selectedIndex, 2, "selection did not change");
+  Assert.equal(list.selectedRow.id, "dRow-3-1-1", "selection did not change");
+
+  // dRow-3
+  //   dRow-3-1
+  //     dRow-3-1-1
+  //     dRow-3-1-3
+  // dRow-4
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  // dRow-5
+  //   dRow-5-1
+
+  // Deleting the last row under a parent that contains the selection should
+  // select the parent.
+  list.selectedIndex = 2;
+  Assert.equal(list.selectedRow.id, "dRow-3-1-1");
+
+  promiseSelectEvent();
+  let rowToReplace = list.querySelector("#dRow-3-1");
+  rowToReplace.remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [0, "dRow-3"],
+    "selection moved to the parent row"
+  );
+
+  // dRow-3
+  // dRow-4
+  //   dRow-4-2
+  //   dRow-4-3
+  //     dRow-4-3-1
+  //     dRow-4-3-2
+  // dRow-5
+  //   dRow-5-1
+
+  // Deleting several rows under a parent, should select the parent row.
+  list.selectedIndex = 4;
+  Assert.equal(list.selectedRow.id, "dRow-4-3-1");
+  promiseSelectEvent();
+  list.querySelector("#dRow-4 ul").remove();
+  Assert.deepEqual(
+    await selectPromise,
+    [1, "dRow-4"],
+    "selection moved to the parent row"
+  );
+
+  // Delete the last remaining rows. The selected index should be -1.
+
+  promiseSelectEvent();
+  list.replaceChildren();
+  Assert.deepEqual(await selectPromise, [-1, null], "selection was cleared");
+
+  // Add back a row. One of the row's children was selected, this should be
+  // removed and the selection set to the top-level row.
+
+  promiseSelectEvent();
+  list.appendChild(rowToReplace);
+  Assert.deepEqual(
+    await selectPromise,
+    [0, "dRow-3-1"],
+    "selection set to the added row"
+  );
+  Assert.ok(list.querySelector("#dRow-3-1-1"), "child of the added row exists");
+  Assert.ok(
+    !list.querySelector("#dRow-3-1-1").classList.contains("selected"),
+    "child of the added row is not selected"
+  );
+}
+
+/**
+ * Tests what happens to selection when a row is removed.
+ */
+async function subtestSelectOnRemoval2() {
+  let doc = content.document;
+  let list = doc.querySelector(`ul[is="tree-listbox"]`);
+
+  let selectPromise;
+  function promiseSelectEvent() {
+    selectPromise = new Promise(resolve =>
+      list.addEventListener("select", () => resolve(list.selectedIndex), {
+        once: true,
+      })
+    );
+  }
+
+  // Delete row-3 containing the selection.
+
+  list.selectedIndex = 7; // row-3-1-2
+
+  promiseSelectEvent();
+  list.querySelector("#row-3").remove();
+  Assert.equal(await selectPromise, 3, "selection moved to the last row");
+
+  // Delete row-2. Selection should move to the only row.
+
+  promiseSelectEvent();
+  list.querySelector("#row-2").remove();
+  Assert.equal(
+    await selectPromise,
+    0, // row-1
+    "selection moved to the last row"
+  );
+}
+
+/**
+ * Tests what happens to selection when elements above it are removed.
+ */
+async function subtestSelectOnRemoval3() {
+  let doc = content.document;
+  let list = doc.querySelector(`ul[is="tree-listbox"]`);
+
+  // Delete a row.
+
+  list.selectedIndex = 6; // row-3-1-1
+
+  list.querySelector("#row-2-1").remove();
+  await new Promise(r => content.setTimeout(r));
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    ["row-1", "row-2", "row-2-2", "row-3", "row-3-1", "row-3-1-1", "row-3-1-2"]
+  );
+  Assert.equal(
+    list.selectedIndex,
+    5, // row-3-1-1
+    "selection moved to the previous top-level row"
+  );
+
+  // Delete an element that isn't a row.
+
+  list.querySelector("#row-2 div").remove();
+  await new Promise(r => content.setTimeout(r));
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    ["row-1", "row-2", "row-2-2", "row-3", "row-3-1", "row-3-1-1", "row-3-1-2"]
+  );
+  Assert.equal(
+    list.selectedIndex,
+    5, // row-3-1-1
+    "selection moved to the previous top-level row"
+  );
+
+  // Delete an element that contains a row.
+
+  list.querySelector("#row-2 ul").remove();
+  await new Promise(r => content.setTimeout(r));
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    ["row-1", "row-2", "row-3", "row-3-1", "row-3-1-1", "row-3-1-2"]
+  );
+  Assert.equal(
+    list.selectedIndex,
+    4, // row-3-1-1
+    "selection moved to the previous top-level row"
+  );
+}
+
+/**
+ * Tests that rows marked as unselectable cannot be selected.
+ */
+async function subtestUnselectable() {
+  let doc = content.document;
+
+  let list = doc.querySelector(`ul#unselectableTree`);
+  Assert.ok(!!list, "the list exists");
+
+  let initialRowIds = [
+    "uRow-2-1",
+    "uRow-2-2",
+    "uRow-3-1",
+    "uRow-3-1-1",
+    "uRow-3-1-2",
+  ];
+  Assert.equal(list.rowCount, initialRowIds.length, "rowCount is correct");
+  Assert.deepEqual(
+    list.rows.map(r => r.id),
+    initialRowIds,
+    "initial rows are correct"
+  );
+
+  function checkSelected(expectedIndex, expectedId) {
+    Assert.equal(list.selectedIndex, expectedIndex, "selectedIndex is correct");
+    Assert.deepEqual(
+      Array.from(list.querySelectorAll(".selected"), row => row.id),
+      [expectedId],
+      "correct rows have the 'selected' class"
+    );
+  }
+
+  checkSelected(0, "uRow-2-1");
+
+  // Clicking unselectable rows should not change the selection.
+  EventUtils.synthesizeMouseAtCenter(
+    doc.querySelector("#uRow-1 > div"),
+    {},
+    content
+  );
+  checkSelected(0, "uRow-2-1");
+  EventUtils.synthesizeMouseAtCenter(
+    doc.querySelector("#uRow-2 > div"),
+    {},
+    content
+  );
+  checkSelected(0, "uRow-2-1");
+  EventUtils.synthesizeMouseAtCenter(
+    doc.querySelector("#uRow-3 > div"),
+    {},
+    content
+  );
+  checkSelected(0, "uRow-2-1");
+
+  // Unselectable rows should not be accessible by keyboard.
+  EventUtils.synthesizeKey("KEY_ArrowUp", {}, content);
+  checkSelected(0, "uRow-2-1");
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, content);
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, content);
+  checkSelected(2, "uRow-3-1");
+  EventUtils.synthesizeKey("KEY_Home", {}, content);
+  checkSelected(0, "uRow-2-1");
+  EventUtils.synthesizeKey("KEY_End", {}, content);
+  checkSelected(4, "uRow-3-1-2");
+  EventUtils.synthesizeKey("KEY_PageUp", {}, content);
+  checkSelected(0, "uRow-2-1");
+  EventUtils.synthesizeKey("KEY_PageDown", {}, content);
+  checkSelected(4, "uRow-3-1-2");
+
+  EventUtils.synthesizeKey("VK_LEFT", {}, content); // Move up to 3-1.
+  checkSelected(2, "uRow-3-1");
+  EventUtils.synthesizeKey("VK_LEFT", {}, content); // Collapse.
+  checkSelected(2, "uRow-3-1");
+  EventUtils.synthesizeKey("VK_LEFT", {}, content); // Try to move to 3.
+  checkSelected(2, "uRow-3-1");
+}
diff --git a/comm/mail/base/test/browser/browser_treeView.js b/comm/mail/base/test/browser/browser_treeView.js
new file mode 100644
index 0000000000..bf1eeda35a
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_treeView.js
@@ -0,0 +1,1941 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let tabmail = document.getElementById("tabmail");
+registerCleanupFunction(() => {
+  tabmail.closeOtherTabs(tabmail.tabInfo[0]);
+});
+
+// We wish to run several variants of each test with minor differences, based on
+// changes in the source file, in order to verify that certain variables don't
+// impact behavior.
+const TEST_VARIANTS = ["header", "no-header"];
+
+/**
+ * Run a given test in a new tab and script sandbox.
+ *
+ * @param {Function} test - The test function to run in the sandbox.
+ * @param {string} filenameFragment - The fragment of the filename representing
+ *   the test variant to run.
+ * @param {object[]} sandboxArgs - Arguments to the sandbox spawner to pass to
+ *   the test function.
+ */
+async function runTestInSandbox(test, filenameFragment, sandboxArgs = []) {
+  // Create a new tab with our custom content.
+  const tab = tabmail.openTab("contentTab", {
+    url: `chrome://mochitests/content/browser/comm/mail/base/test/browser/files/tree-element-test-${filenameFragment}.xhtml`,
+  });
+
+  await BrowserTestUtils.browserLoaded(tab.browser);
+  tab.browser.focus();
+
+  // Spawn a new JavaScript sandbox for the tab and run the test function inside
+  // of it.
+  await SpecialPowers.spawn(tab.browser, sandboxArgs, test);
+
+  tabmail.closeTab(tab);
+}
+
+/**
+ * Checks that interactions with the widget do as expected.
+ */
+add_task(async function testKeyboardAndMouse() {
+  for (const variant of TEST_VARIANTS) {
+    info(`Running keyboard and mouse test for ${variant}`);
+    await runTestInSandbox(subtestKeyboardAndMouse, variant, [variant]);
+  }
+});
+
+async function subtestKeyboardAndMouse(variant) {
+  let doc = content.document;
+
+  let list = doc.getElementById("testTree");
+  Assert.ok(!!list, "the list exists");
+
+  async function doListActionAndWaitForRowBuffer(actionFn) {
+    // Filling the row buffer is fiddly timing, so provide an event to indicate
+    // that actions which may trigger changes in the row buffer have finished.
+    const eventName = "_treerowbufferfill";
+    list._rowBufferReadyEvent = new content.CustomEvent(eventName);
+
+    const promise = new Promise(resolve =>
+      list.addEventListener(eventName, resolve, { once: true })
+    );
+
+    await actionFn();
+    await promise;
+
+    list._rowBufferReadyEvent = null;
+  }
+
+  async function scrollListToPosition(topOfScroll) {
+    await doListActionAndWaitForRowBuffer(() => {
+      list.scrollTo(0, topOfScroll);
+    });
+  }
+
+  Assert.equal(list._rowElementName, "test-row");
+  Assert.equal(list._rowElementClass, content.customElements.get("test-row"));
+  Assert.equal(
+    list._toleranceSize,
+    26,
+    "list should have tolerance twice the number of visible rows"
+  );
+
+  // We should be scrolled to the top already, but this will ensure we get an
+  // event fire one way or another.
+  await scrollListToPosition(0);
+
+  let rows = list.querySelectorAll(`tr[is="test-row"]`);
+  // Count is calculated from the height of `list` divided by
+  // TestCardRow.ROW_HEIGHT, plus list._toleranceSize.
+  Assert.equal(rows.length, 13 + 26, "the list has the right number of rows");
+
+  Assert.equal(doc.activeElement, doc.body);
+
+  // Verify the tab order of list elements by tabbing both forward and backward
+  // through them.
+  EventUtils.synthesizeKey("VK_TAB", {}, content);
+  Assert.equal(
+    doc.activeElement.id,
+    "before",
+    "the element before the list should have focus"
+  );
+
+  if (variant == "header") {
+    // Tab order changes slightly if the table has a header versus if it
+    // doesn't, so we need to account for that variation.
+    EventUtils.synthesizeKey("VK_TAB", {}, content);
+    Assert.equal(
+      doc.activeElement.id,
+      "testColButton",
+      "the list header button should have focus"
+    );
+  }
+
+  EventUtils.synthesizeKey("VK_TAB", {}, content);
+  Assert.equal(doc.activeElement.id, "testBody", "the list should have focus");
+
+  EventUtils.synthesizeKey("VK_TAB", {}, content);
+  Assert.equal(
+    doc.activeElement.id,
+    "after",
+    "the element after the list should have focus"
+  );
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, content);
+  Assert.equal(doc.activeElement.id, "testBody", "the list should have focus");
+
+  if (variant == "header") {
+    // Tab order changes slightly if the table has a header versus if it
+    // doesn't, so we need to account for that variation.
+    EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, content);
+    Assert.equal(
+      doc.activeElement.id,
+      "testColButton",
+      "the list header button should have focus"
+    );
+  }
+
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, content);
+  Assert.equal(
+    doc.activeElement.id,
+    "before",
+    "the element before the list should have focus"
+  );
+
+  // Check initial selection.
+
+  let selectHandler = {
+    seenEvent: null,
+    currentAtEvent: null,
+    selectedAtEvent: null,
+    t0: Date.now(),
+    time: 0,
+
+    reset() {
+      this.seenEvent = null;
+      this.currentAtEvent = null;
+      this.selectedAtEvent = null;
+      this.t0 = Date.now();
+    },
+    handleEvent(event) {
+      this.seenEvent = event;
+      this.currentAtEvent = list.currentIndex;
+      this.selectedAtEvent = list.selectedIndices;
+      this.time = Date.now() - this.t0;
+    },
+  };
+
+  /**
+   * Check if the spacerTop TBODY of the TreeViewTable is properly allocating
+   * the height of non existing rows.
+   *
+   * @param {int} rows - The number of rows that the spacerTop should be
+   * simulating their height allocation.
+   */
+  function checkTopSpacerHeight(rows) {
+    let table = doc.querySelector(`[is="tree-view-table"]`);
+    // -26 to account for the tolerance buffer.
+    Assert.equal(
+      table.spacerTop.clientHeight,
+      list.getRowAtIndex(rows).clientHeight * (rows - 26),
+      "The top spacer has the correct height"
+    );
+  }
+
+  function checkCurrent(expectedIndex) {
+    Assert.equal(list.currentIndex, expectedIndex, "currentIndex is correct");
+    if (selectHandler.currentAtEvent !== null) {
+      Assert.equal(
+        selectHandler.currentAtEvent,
+        expectedIndex,
+        "currentIndex was correct at the last 'select' event"
+      );
+    }
+
+    let current = list.querySelectorAll(".current");
+    if (expectedIndex == -1) {
+      Assert.equal(current.length, 0, "no rows have the 'current' class");
+    } else {
+      Assert.equal(current.length, 1, "only one row has the 'current' class");
+      Assert.equal(
+        current[0].index,
+        expectedIndex,
+        "correct row has the 'current' class"
+      );
+    }
+  }
+
+  function checkSelected(...expectedIndices) {
+    Assert.deepEqual(
+      list.selectedIndices,
+      expectedIndices,
+      "selectedIndices are correct"
+    );
+
+    if (selectHandler.selectedAtEvent !== null) {
+      // Check the value was already set when the select event fired.
+      Assert.deepEqual(
+        selectHandler.selectedAtEvent,
+        expectedIndices,
+        "selectedIndices were correct at the last 'select' event"
+      );
+    }
+
+    let selected = [...list.querySelectorAll(".selected")].map(
+      row => row.index
+    );
+    expectedIndices.sort((a, b) => a - b);
+    Assert.deepEqual(
+      selected,
+      expectedIndices,
+      "correct rows have the 'selected' class"
+    );
+  }
+
+  checkCurrent(0);
+  checkSelected(0);
+
+  // Click on some individual rows.
+
+  const { TestUtils } = ChromeUtils.importESModule(
+    "resource://testing-common/TestUtils.sys.mjs"
+  );
+  const { AppConstants } = ChromeUtils.importESModule(
+    "resource://gre/modules/AppConstants.sys.mjs"
+  );
+
+  async function clickOnRow(index, modifiers = {}, expectEvent = true) {
+    if (modifiers.shiftKey) {
+      info(`clicking on row ${index} with shift key`);
+    } else if (modifiers.accelKey) {
+      info(`clicking on row ${index} with ctrl key`);
+    } else {
+      info(`clicking on row ${index}`);
+    }
+
+    let x = list.clientWidth / 2;
+    let y = list.table.header.clientHeight + index * 50 + 25;
+
+    selectHandler.reset();
+    list.addEventListener("select", selectHandler, { once: true });
+    EventUtils.synthesizeMouse(list, x, y, modifiers, content);
+    await TestUtils.waitForCondition(
+      () => !!selectHandler.seenEvent == expectEvent,
+      `'select' event should ${expectEvent ? "" : "not "}get fired`
+    );
+  }
+
+  await clickOnRow(0, {}, false);
+  checkCurrent(0);
+  checkSelected(0);
+
+  await clickOnRow(1);
+  checkCurrent(1);
+  checkSelected(1);
+
+  await clickOnRow(2);
+  checkCurrent(2);
+  checkSelected(2);
+
+  // Select multiple rows by shift-clicking.
+
+  await clickOnRow(4, { shiftKey: true });
+  checkCurrent(4);
+  checkSelected(2, 3, 4);
+
+  // Holding ctrl and shift should always produce a range selection.
+  await clickOnRow(6, { accelKey: true, shiftKey: true });
+  checkCurrent(6);
+  checkSelected(2, 3, 4, 5, 6);
+
+  await clickOnRow(0, { shiftKey: true });
+  checkCurrent(0);
+  checkSelected(0, 1, 2);
+
+  await clickOnRow(2, { shiftKey: true });
+  checkCurrent(2);
+  checkSelected(2);
+
+  // Select multiple rows by ctrl-clicking.
+
+  await clickOnRow(5, { accelKey: true });
+  checkCurrent(5);
+  checkSelected(2, 5);
+
+  await clickOnRow(1, { accelKey: true });
+  checkCurrent(1);
+  checkSelected(1, 2, 5);
+
+  await clickOnRow(5, { accelKey: true });
+  checkCurrent(5);
+  checkSelected(1, 2);
+
+  await clickOnRow(1, { accelKey: true });
+  checkCurrent(1);
+  checkSelected(2);
+
+  await clickOnRow(2, { accelKey: true });
+  checkCurrent(2);
+  checkSelected();
+
+  // Move around by pressing keys.
+
+  async function pressKey(key, modifiers = {}, expectEvent = true) {
+    if (modifiers.shiftKey) {
+      info(`pressing ${key} with shift key`);
+    } else if (modifiers.accelKey) {
+      info(`pressing ${key} with accel key`);
+    } else {
+      info(`pressing ${key}`);
+    }
+
+    selectHandler.reset();
+    list.addEventListener("select", selectHandler, { once: true });
+    EventUtils.synthesizeKey(key, modifiers, content);
+    await TestUtils.waitForCondition(
+      () => !!selectHandler.seenEvent == expectEvent,
+      `'select' event should ${expectEvent ? "" : "not "}get fired`
+    );
+    // We don't enforce any delay on multiselection.
+    let multiselect =
+      (AppConstants.platform == "macosx" && key == " ") ||
+      modifiers.shiftKey ||
+      modifiers.accelKey;
+    if (expectEvent && !multiselect) {
+      // We have data-select-delay="250" in treeView.xhtml
+      Assert.greater(selectHandler.time, 240, "should select only after delay");
+    }
+  }
+
+  await pressKey("VK_UP");
+  checkCurrent(1);
+  checkSelected(1);
+
+  await pressKey("VK_UP", { accelKey: true }, false);
+  checkCurrent(0);
+  checkSelected(1);
+
+  // Without Ctrl selection moves with focus again.
+  await pressKey("VK_UP");
+  checkCurrent(0);
+  checkSelected(0);
+
+  // Does nothing.
+  await pressKey("VK_UP", {}, false);
+  checkCurrent(0);
+  checkSelected(0);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(1);
+  checkSelected(0);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(2);
+  checkSelected(0);
+
+  // Multi select with only Space on macOS on a focused row, since Cmd+Space is
+  // captured by the OS.
+  if (AppConstants.platform == "macosx") {
+    await pressKey(" ");
+  } else {
+    // Multi select with Ctrl+Space for Windows and Linux.
+    await pressKey(" ", { accelKey: true });
+  }
+  checkCurrent(2);
+  checkSelected(0, 2);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(3);
+  checkSelected(0, 2);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(4);
+  checkSelected(0, 2);
+
+  if (AppConstants.platform == "macosx") {
+    await pressKey(" ");
+  } else {
+    await pressKey(" ", { accelKey: true });
+  }
+  checkCurrent(4);
+  checkSelected(0, 2, 4);
+
+  // Single selection restored with normal navigation.
+  await pressKey("VK_UP");
+  checkCurrent(3);
+  checkSelected(3);
+
+  // We don't allow unselecting a selected row with Space on macOS due to
+  // conflict with the `mail.advance_on_spacebar` pref.
+  if (AppConstants.platform != "macosx") {
+    // Can select none using Ctrl+Space.
+    await pressKey(" ", { accelKey: true });
+    checkCurrent(3);
+    checkSelected();
+  }
+
+  await pressKey("VK_DOWN");
+  checkCurrent(4);
+  checkSelected(4);
+
+  await pressKey("VK_HOME", { accelKey: true }, false);
+  checkCurrent(0);
+  checkSelected(4);
+
+  if (AppConstants.platform == "macosx") {
+    // We can't clear the selection with only Space on macOS, simulate a Arrow
+    // Up to force clear selection and only select the top most row.
+    await pressKey("VK_UP");
+  } else {
+    // Select only the current item with Space (no modifier).
+    await pressKey(" ");
+  }
+  checkCurrent(0);
+  checkSelected(0);
+
+  // The list is 630px high, so rows 0-12 are fully or partly visible.
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_PAGE_DOWN");
+  });
+  checkCurrent(13);
+  checkSelected(13);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    1,
+    "should have scrolled down a page"
+  );
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_PAGE_UP", { shiftKey: true });
+  });
+  checkCurrent(0);
+  checkSelected(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    0,
+    "should have scrolled up a page"
+  );
+
+  // Shrink shift selection.
+  await pressKey("VK_DOWN", { shiftKey: true });
+  checkCurrent(1);
+  checkSelected(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(2);
+  checkSelected(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
+
+  await pressKey("VK_DOWN", { accelKey: true }, false);
+  checkCurrent(3);
+  checkSelected(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
+
+  if (AppConstants.platform == "macosx") {
+    // We don't allow unselecting a selected row with Space on macOS due to
+    // conflict with the `mail.advance_on_spacebar` pref, so simulate a
+    // CMD+click to unselect it.
+    await clickOnRow(3, { accelKey: true });
+  } else {
+    // Break the shift sequence by Ctrl+Space.
+    await pressKey(" ", { accelKey: true });
+  }
+  checkCurrent(3);
+  checkSelected(1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
+
+  await pressKey("VK_DOWN", { shiftKey: true });
+  checkCurrent(4);
+  checkSelected(3, 4);
+
+  // Reverse selection direction.
+  await pressKey("VK_HOME", { shiftKey: true });
+  checkCurrent(0);
+  checkSelected(0, 1, 2, 3);
+
+  // Now rows 138-149 are fully visible.
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_END");
+  });
+  checkCurrent(149);
+  checkSelected(149);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    137,
+    "should have scrolled to the end"
+  );
+  checkTopSpacerHeight(137);
+
+  // Does nothing.
+  await pressKey("VK_DOWN", {}, false);
+  checkCurrent(149);
+  checkSelected(149);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    137,
+    "should not have changed view"
+  );
+  checkTopSpacerHeight(137);
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_PAGE_UP");
+  });
+  checkCurrent(136);
+  checkSelected(136);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    136,
+    "should have scrolled up a page"
+  );
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_PAGE_DOWN", { shiftKey: true });
+  });
+  checkCurrent(149);
+  checkSelected(
+    136,
+    137,
+    138,
+    139,
+    140,
+    141,
+    142,
+    143,
+    144,
+    145,
+    146,
+    147,
+    148,
+    149
+  );
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    137,
+    "should have scrolled down a page"
+  );
+  checkTopSpacerHeight(137);
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_HOME");
+  });
+  checkCurrent(0);
+  checkSelected(0);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    0,
+    "should have scrolled to the beginning"
+  );
+
+  // Scroll around. Which rows are current and selected should be remembered
+  // even if the row element itself disappears.
+
+  selectHandler.reset();
+  await scrollListToPosition(125);
+  checkCurrent(0);
+  checkSelected(0);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    2,
+    "getFirstVisibleIndex is correct"
+  );
+
+  await scrollListToPosition(2525);
+  Assert.equal(list.currentIndex, 0, "currentIndex is still set");
+  Assert.ok(
+    !list.querySelector(".current"),
+    "no visible rows have the 'current' class"
+  );
+  Assert.deepEqual(list.selectedIndices, [0], "selectedIndices are still set");
+  Assert.ok(
+    !list.querySelector(".selected"),
+    "no visible rows have the 'selected' class"
+  );
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    50,
+    "getFirstVisibleIndex is correct"
+  );
+  Assert.ok(!selectHandler.seenEvent, "should not have fired 'select' event");
+  checkTopSpacerHeight(50);
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await pressKey("VK_DOWN");
+  });
+  checkCurrent(1);
+  checkSelected(1);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    1,
+    "should have scrolled so that the second row is in view"
+  );
+
+  selectHandler.reset();
+  await scrollListToPosition(0);
+  checkCurrent(1);
+  checkSelected(1);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    0,
+    "getFirstVisibleIndex is correct"
+  );
+  Assert.ok(
+    !selectHandler.seenEvent,
+    "'select' event did not fire as expected"
+  );
+
+  await pressKey("VK_UP");
+  checkCurrent(0);
+  checkSelected(0);
+  Assert.equal(
+    list.getFirstVisibleIndex(),
+    0,
+    "should have scrolled so that the first row is in view"
+  );
+
+  // Some literal edge cases. Clicking on a partially visible row should
+  // scroll it into view.
+
+  // Calculate the visible area in order to verify that rows appear where they
+  // are intended to appear.
+  const listRect = list.getBoundingClientRect();
+  const headerHeight = list.table.header.clientHeight;
+
+  const visibleRect = new content.DOMRect(
+    listRect.x,
+    listRect.y + headerHeight,
+    listRect.width,
+    listRect.height - headerHeight
+  );
+
+  Assert.equal(visibleRect.height, 630, "the table body should be 630px tall");
+
+  rows = list.querySelectorAll(`tr[is="test-row"]`);
+  let bcr = rows[12].getBoundingClientRect();
+  Assert.less(
+    Math.round(bcr.top),
+    Math.round(visibleRect.bottom),
+    "top of row 12 is visible"
+  );
+  Assert.greater(
+    Math.round(bcr.bottom),
+    Math.round(visibleRect.bottom),
+    "bottom of row 12 is not visible"
+  );
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await clickOnRow(12);
+  });
+  rows = list.querySelectorAll(`tr[is="test-row"]`);
+  bcr = rows[12].getBoundingClientRect();
+  Assert.less(
+    Math.round(bcr.top),
+    Math.round(visibleRect.bottom),
+    "the top of row 12 should be visible"
+  );
+  Assert.equal(
+    Math.round(bcr.bottom),
+    Math.round(visibleRect.bottom),
+    "row 12 should be at the bottom of the visible area"
+  );
+
+  bcr = rows[0].getBoundingClientRect();
+  Assert.less(
+    Math.round(bcr.top),
+    Math.round(visibleRect.top),
+    "top of row 0 is not visible"
+  );
+  Assert.greater(
+    Math.round(bcr.bottom),
+    Math.round(visibleRect.top),
+    "bottom of row 0 is visible"
+  );
+
+  await doListActionAndWaitForRowBuffer(async () => {
+    await clickOnRow(0);
+  });
+  rows = list.querySelectorAll(`tr[is="test-row"]`);
+  bcr = rows[0].getBoundingClientRect();
+  Assert.equal(
+    Math.round(bcr.top),
+    Math.round(visibleRect.top),
+    "row 0 should be at the top of the visible area"
+  );
+  Assert.greater(
+    Math.round(bcr.bottom),
+    Math.round(visibleRect.top),
+    "the bottom of row 0 should be visible"
+  );
+}
+
+/**
+ * Checks that changes in the view are propagated to the list.
+ */
+add_task(async function testRowCountChange() {
+  for (const variant of TEST_VARIANTS) {
+    info(`Running row count change test for ${variant}`);
+    await runTestInSandbox(subtestRowCountChange, variant);
+  }
+});
+
+async function subtestRowCountChange() {
+  let doc = content.document;
+
+  let ROW_HEIGHT = 50;
+  let list = doc.getElementById("testTree");
+
+  async function doListActionAndWaitForRowBuffer(actionFn) {
+    // Filling the row buffer is fiddly timing, so provide an event to indicate
+    // that actions which may trigger changes in the row buffer have finished.
+    const eventName = "_treerowbufferfill";
+    list._rowBufferReadyEvent = new content.CustomEvent(eventName);
+
+    const promise = new Promise(resolve =>
+      list.addEventListener(eventName, resolve, { once: true })
+    );
+
+    await actionFn();
+    await promise;
+
+    list._rowBufferReadyEvent = null;
+  }
+
+  let view = list.view;
+  let rows;
+
+  // Check the initial state.
+
+  function checkRows(first, last) {
+    let expectedIndices = [];
+    for (let i = first; i <= last; i++) {
+      expectedIndices.push(i);
+    }
+    rows = list.querySelectorAll(`tr[is="test-row"]`);
+    Assert.deepEqual(
+      Array.from(rows, r => r.index),
+      expectedIndices,
+      "the list has the right rows"
+    );
+    Assert.deepEqual(
+      Array.from(rows, r => r.dataset.value),
+      view.values.slice(first, last + 1),
+      "the list has the right rows"
+    );
+  }
+
+  function checkSelected(indices, existingIndices) {
+    Assert.deepEqual(list.selectedIndices, indices);
+    let selectedRows = list.querySelectorAll(`tr[is="test-row"].selected`);
+    Assert.deepEqual(
+      Array.from(selectedRows, r => r.index),
+      existingIndices
+    );
+  }
+
+  let expectedCount = 150;
+
+  // Select every tenth row. We'll check what is selected remains selected.
+
+  list.selectedIndices = [4, 14, 24, 34, 44];
+
+  function getRowsHeight() {
+    return list.scrollHeight - list.table.header.clientHeight;
+  }
+
+  async function addValues(index, values) {
+    view.values.splice(index, 0, ...values);
+    info(`Added ${values.join(", ")} at ${index}`);
+    info(view.values);
+
+    expectedCount += values.length;
+    Assert.equal(
+      view.rowCount,
+      expectedCount,
+      "the view has the right number of rows"
+    );
+
+    await doListActionAndWaitForRowBuffer(() => {
+      list.rowCountChanged(index, values.length);
+    });
+
+    Assert.equal(
+      getRowsHeight(),
+      expectedCount * ROW_HEIGHT,
+      "space for all rows is allocated"
+    );
+  }
+
+  async function removeValues(index, count, expectedRemoved) {
+    let values = view.values.splice(index, count);
+    info(`Removed ${values.join(", ")} from ${index}`);
+    info(view.values);
+
+    Assert.deepEqual(values, expectedRemoved);
+
+    expectedCount -= values.length;
+    Assert.equal(
+      view.rowCount,
+      expectedCount,
+      "the view has the right number of rows"
+    );
+
+    await doListActionAndWaitForRowBuffer(() => {
+      list.rowCountChanged(index, -count);
+    });
+
+    Assert.equal(
+      getRowsHeight(),
+      expectedCount * ROW_HEIGHT,
+      "space for all rows is allocated"
+    );
+  }
+
+  async function scrollListToPosition(topOfScroll) {
+    await doListActionAndWaitForRowBuffer(() => {
+      list.scrollTo(0, topOfScroll);
+    });
+  }
+
+  Assert.equal(
+    view.rowCount,
+    expectedCount,
+    "the view has the right number of rows"
+  );
+  Assert.equal(list.scrollTop, 0, "the list is scrolled to the top");
+  Assert.equal(
+    getRowsHeight(),
+    expectedCount * ROW_HEIGHT,
+    "space for all rows is allocated"
+  );
+
+  // We should be scrolled to the top already, but this will ensure we get an
+  // event fire one way or another.
+  await scrollListToPosition(0);
+
+  checkRows(0, 38);
+  checkSelected([4, 14, 24, 34, 44], [4, 14, 24, 34]);
+  Assert.equal(getRowsHeight(), 150 * 50);
+
+  // Add a value at the end. Only the scroll height should change.
+
+  await addValues(150, [150]);
+  checkRows(0, 38);
+  checkSelected([4, 14, 24, 34, 44], [4, 14, 24, 34]);
+  Assert.equal(getRowsHeight(), 151 * 50);
+
+  // Add more values at the end. Only the scroll height should change.
+
+  await addValues(151, [151, 152, 153]);
+  checkRows(0, 38);
+  checkSelected([4, 14, 24, 34, 44], [4, 14, 24, 34]);
+  Assert.equal(getRowsHeight(), 154 * 50);
+
+  // Add values between the last row and the end.
+  // Only the scroll height should change.
+
+  await addValues(40, ["39a", "39b"]);
+  checkRows(0, 38);
+  checkSelected([4, 14, 24, 34, 46], [4, 14, 24, 34]);
+  Assert.equal(getRowsHeight(), 156 * 50);
+
+  // Add values between the last visible row and the last row.
+  // The changed rows and those below them should be updated.
+
+  await addValues(18, ["17a", "17b", "17c"]);
+  checkRows(0, 38);
+  // Hard-coded sanity checks to prove checkRows is working as intended.
+  Assert.equal(rows[17].dataset.value, "17");
+  Assert.equal(rows[18].dataset.value, "17a");
+  Assert.equal(rows[19].dataset.value, "17b");
+  Assert.equal(rows[20].dataset.value, "17c");
+  Assert.equal(rows[21].dataset.value, "18");
+  checkSelected([4, 14, 27, 37, 49], [4, 14, 27, 37]);
+  Assert.equal(getRowsHeight(), 159 * 50);
+
+  // Add values in the visible rows.
+  // The changed rows and those below them should be updated.
+
+  await addValues(8, ["7a", "7b"]);
+  checkRows(0, 38);
+  Assert.equal(rows[7].dataset.value, "7");
+  Assert.equal(rows[8].dataset.value, "7a");
+  Assert.equal(rows[9].dataset.value, "7b");
+  Assert.equal(rows[10].dataset.value, "8");
+  Assert.equal(rows[22].dataset.value, "17c");
+  checkSelected([4, 16, 29, 39, 51], [4, 16, 29]);
+  Assert.equal(getRowsHeight(), 161 * 50);
+
+  // Add a value at the start. All rows should be updated.
+
+  await addValues(0, [-1]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-1");
+  Assert.equal(rows[1].dataset.value, "0");
+  Assert.equal(rows[22].dataset.value, "17b");
+  checkSelected([5, 17, 30, 40, 52], [5, 17, 30]);
+  Assert.equal(getRowsHeight(), 162 * 50);
+
+  // Add more values at the start. All rows should be updated.
+
+  await addValues(0, [-3, -2]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[1].dataset.value, "-2");
+  Assert.equal(rows[2].dataset.value, "-1");
+  Assert.equal(rows[22].dataset.value, "17");
+  checkSelected([7, 19, 32, 42, 54], [7, 19, 32]);
+  Assert.equal(getRowsHeight(), 164 * 50);
+
+  Assert.equal(list.scrollTop, 0, "the list is still scrolled to the top");
+
+  // Remove values in the order we added them.
+
+  await removeValues(160, 1, [150]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[22].dataset.value, "17");
+  checkSelected([7, 19, 32, 42, 54], [7, 19, 32]);
+  Assert.equal(getRowsHeight(), 163 * 50);
+
+  await removeValues(160, 3, [151, 152, 153]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[22].dataset.value, "17");
+  checkSelected([7, 19, 32, 42, 54], [7, 19, 32]);
+  Assert.equal(getRowsHeight(), 160 * 50);
+
+  await removeValues(48, 2, ["39a", "39b"]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[22].dataset.value, "17");
+  checkSelected([7, 19, 32, 42, 52], [7, 19, 32]);
+  Assert.equal(getRowsHeight(), 158 * 50);
+
+  await removeValues(23, 3, ["17a", "17b", "17c"]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[22].dataset.value, "17");
+  checkSelected([7, 19, 29, 39, 49], [7, 19, 29]);
+  Assert.equal(getRowsHeight(), 155 * 50);
+
+  await removeValues(11, 2, ["7a", "7b"]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[10].dataset.value, "7");
+  Assert.equal(rows[11].dataset.value, "8");
+  Assert.equal(rows[22].dataset.value, "19");
+  checkSelected([7, 17, 27, 37, 47], [7, 17, 27, 37]);
+  Assert.equal(getRowsHeight(), 153 * 50);
+
+  await removeValues(2, 1, [-1]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "-3");
+  Assert.equal(rows[1].dataset.value, "-2");
+  Assert.equal(rows[2].dataset.value, "0");
+  Assert.equal(rows[22].dataset.value, "20");
+  checkSelected([6, 16, 26, 36, 46], [6, 16, 26, 36]);
+  Assert.equal(getRowsHeight(), 152 * 50);
+
+  await removeValues(0, 2, [-3, -2]);
+  checkRows(0, 38);
+  Assert.equal(rows[0].dataset.value, "0");
+  Assert.equal(rows[1].dataset.value, "1");
+  Assert.equal(rows[22].dataset.value, "22");
+  checkSelected([4, 14, 24, 34, 44], [4, 14, 24, 34]);
+  Assert.equal(getRowsHeight(), 150 * 50);
+
+  Assert.equal(list.scrollTop, 0, "the list is still scrolled to the top");
+
+  // Now scroll to the middle and repeat.
+
+  await scrollListToPosition(1735);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[65].dataset.value, "73");
+  checkSelected([4, 14, 24, 34, 44], [14, 24, 34, 44]);
+
+  await addValues(150, [150]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[65].dataset.value, "73");
+  checkSelected([4, 14, 24, 34, 44], [14, 24, 34, 44]);
+
+  await addValues(38, ["37a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[29].dataset.value, "37");
+  Assert.equal(rows[30].dataset.value, "37a");
+  Assert.equal(rows[31].dataset.value, "38");
+  Assert.equal(rows[65].dataset.value, "72");
+  checkSelected([4, 14, 24, 34, 45], [14, 24, 34, 45]);
+
+  await addValues(25, ["24a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[16].dataset.value, "24");
+  Assert.equal(rows[17].dataset.value, "24a");
+  Assert.equal(rows[18].dataset.value, "25");
+  Assert.equal(rows[65].dataset.value, "71");
+  checkSelected([4, 14, 24, 35, 46], [14, 24, 35, 46]);
+
+  await addValues(11, ["10a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[2].dataset.value, "10");
+  Assert.equal(rows[3].dataset.value, "10a");
+  Assert.equal(rows[4].dataset.value, "11");
+  Assert.equal(rows[65].dataset.value, "70");
+  checkSelected([4, 15, 25, 36, 47], [15, 25, 36, 47]);
+
+  await addValues(0, ["-1"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "7");
+  Assert.equal(rows[65].dataset.value, "69");
+  checkSelected([5, 16, 26, 37, 48], [16, 26, 37, 48]);
+
+  Assert.equal(
+    list.scrollTop,
+    1735,
+    "the list is still scrolled to the middle"
+  );
+
+  await removeValues(154, 1, [150]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "7");
+  Assert.equal(rows[65].dataset.value, "69");
+  checkSelected([5, 16, 26, 37, 48], [16, 26, 37, 48]);
+
+  await removeValues(41, 1, ["37a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "7");
+  Assert.equal(rows[65].dataset.value, "70");
+  checkSelected([5, 16, 26, 37, 47], [16, 26, 37, 47]);
+
+  await removeValues(27, 1, ["24a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "7");
+  Assert.equal(rows[65].dataset.value, "71");
+  checkSelected([5, 16, 26, 36, 46], [16, 26, 36, 46]);
+
+  await removeValues(12, 1, ["10a"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "7");
+  Assert.equal(rows[65].dataset.value, "72");
+  checkSelected([5, 15, 25, 35, 45], [15, 25, 35, 45]);
+
+  await removeValues(0, 1, ["-1"]);
+  checkRows(8, 73);
+  Assert.equal(rows[0].dataset.value, "8");
+  Assert.equal(rows[65].dataset.value, "73");
+  checkSelected([4, 14, 24, 34, 44], [14, 24, 34, 44]);
+
+  Assert.equal(
+    list.scrollTop,
+    1735,
+    "the list is still scrolled to the middle"
+  );
+
+  // Now scroll to the bottom and repeat.
+
+  await scrollListToPosition(6870);
+  checkRows(111, 149);
+  Assert.equal(rows[0].dataset.value, "111");
+  Assert.equal(rows[38].dataset.value, "149");
+  checkSelected([4, 14, 24, 34, 44], []);
+
+  await addValues(50, [50]);
+  checkRows(111, 150);
+  Assert.equal(rows[0].dataset.value, "110");
+  Assert.equal(rows[39].dataset.value, "149");
+  checkSelected([4, 14, 24, 34, 44], []);
+
+  await addValues(49, ["48a"]);
+  checkRows(111, 151);
+  Assert.equal(rows[0].dataset.value, "109");
+  Assert.equal(rows[40].dataset.value, "149");
+  checkSelected([4, 14, 24, 34, 44], []);
+
+  await addValues(30, ["29a"]);
+  checkRows(111, 152);
+  Assert.equal(rows[0].dataset.value, "108");
+  Assert.equal(rows[41].dataset.value, "149");
+  checkSelected([4, 14, 24, 35, 45], []);
+
+  await addValues(0, ["-1"]);
+  checkRows(111, 153);
+  Assert.equal(rows[0].dataset.value, "107");
+  Assert.equal(rows[42].dataset.value, "149");
+  checkSelected([5, 15, 25, 36, 46], []);
+
+  Assert.equal(
+    list.scrollTop,
+    6870,
+    "the list is still scrolled to the bottom"
+  );
+
+  await removeValues(53, 1, [50]);
+  checkRows(111, 152);
+  Assert.equal(rows[0].dataset.value, "108");
+  Assert.equal(rows[41].dataset.value, "149");
+  checkSelected([5, 15, 25, 36, 46], []);
+
+  await removeValues(51, 1, ["48a"]);
+  checkRows(111, 151);
+  Assert.equal(rows[0].dataset.value, "109");
+  Assert.equal(rows[40].dataset.value, "149");
+  checkSelected([5, 15, 25, 36, 46], []);
+
+  await removeValues(31, 1, ["29a"]);
+  checkRows(111, 150);
+  Assert.equal(rows[0].dataset.value, "110");
+  Assert.equal(rows[39].dataset.value, "149");
+  checkSelected([5, 15, 25, 35, 45], []);
+
+  await removeValues(0, 1, ["-1"]);
+  checkRows(111, 149);
+  Assert.equal(rows[0].dataset.value, "111");
+  Assert.equal(rows[38].dataset.value, "149");
+  checkSelected([4, 14, 24, 34, 44], []);
+
+  Assert.equal(
+    list.scrollTop,
+    6870,
+    "the list is still scrolled to the bottom"
+  );
+
+  // Remove a selected row and check the selection changes.
+
+  await scrollListToPosition(0);
+
+  checkSelected([4, 14, 24, 34, 44], [4, 14, 24, 34]);
+
+  await removeValues(3, 3, [3, 4, 5]); // 4 is selected.
+  checkSelected([11, 21, 31, 41], [11, 21, 31]);
+
+  await addValues(3, [3, 4, 5]);
+  checkSelected([14, 24, 34, 44], [14, 24, 34]);
+
+  // Remove some consecutive selected rows.
+
+  list.selectedIndices = [6, 7, 8, 9];
+  checkSelected([6, 7, 8, 9], [6, 7, 8, 9]);
+
+  await removeValues(7, 1, [7]);
+  checkSelected([6, 7, 8], [6, 7, 8]);
+
+  await removeValues(7, 1, [8]);
+  checkSelected([6, 7], [6, 7]);
+
+  await removeValues(7, 1, [9]);
+  checkSelected([6], [6]);
+
+  // Reset the list.
+
+  await addValues(7, [7, 8, 9]);
+  list.selectedIndex = -1;
+}
+
+/**
+ * Checks that expanding and collapsing works. Twisties in the test file are
+ * styled as coloured squares: red for collapsed, green for expanded.
+ *
+ * @note This is practically the same test as in browser_treeListbox.js, but
+ * for TreeView instead of TreeListbox. If you make changes here you
+ * may want to make changes there too.
+ */
+add_task(async function testExpandCollapse() {
+  await runTestInSandbox(subtestExpandCollapse, "levels");
+});
+
+async function subtestExpandCollapse() {
+  let doc = content.document;
+  let list = doc.getElementById("testTree");
+  let allIds = [
+    "row-1",
+    "row-2",
+    "row-2-1",
+    "row-2-2",
+    "row-3",
+    "row-3-1",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+  let idsWithoutChildren = [
+    "row-1",
+    "row-2-1",
+    "row-2-2",
+    "row-3-1-1",
+    "row-3-1-2",
+  ];
+
+  let listener = {
+    reset() {
+      this.collapsedIndex = null;
+      this.expandedIndex = null;
+    },
+    handleEvent(event) {
+      if (event.type == "collapsed") {
+        this.collapsedIndex = event.detail;
+      } else if (event.type == "expanded") {
+        this.expandedIndex = event.detail;
+      }
+    },
+  };
+  list.addEventListener("collapsed", listener);
+  list.addEventListener("expanded", listener);
+
+  let selectHandler = {
+    seenEvent: null,
+    selectedAtEvent: null,
+
+    reset() {
+      this.seenEvent = null;
+      this.selectedAtEvent = null;
+    },
+    handleEvent(event) {
+      this.seenEvent = event;
+      this.selectedAtEvent = list.selectedIndex;
+    },
+  };
+
+  Assert.equal(
+    list.querySelectorAll("collapsed").length,
+    0,
+    "no rows are collapsed"
+  );
+  Assert.equal(list.view.rowCount, 8, "row count");
+  Assert.deepEqual(
+    Array.from(list.table.body.children, r => r.id),
+    [
+      "row-1",
+      "row-2",
+      "row-2-1",
+      "row-2-2",
+      "row-3",
+      "row-3-1",
+      "row-3-1-1",
+      "row-3-1-2",
+    ],
+    "rows property"
+  );
+
+  function checkCurrent(expectedIndex) {
+    Assert.equal(list.currentIndex, expectedIndex, "currentIndex is correct");
+    const current = list.querySelectorAll(".current");
+    if (expectedIndex == -1) {
+      Assert.equal(current.length, 0, "no rows have the 'current' class");
+    } else {
+      Assert.equal(current.length, 1, "only one row has the 'current' class");
+      Assert.equal(
+        current[0].index,
+        expectedIndex,
+        "correct row has the 'current' class"
+      );
+    }
+  }
+
+  function checkMultiSelect(...expectedIds) {
+    let selected = [...list.querySelectorAll(".selected")].map(row => row.id);
+    Assert.deepEqual(selected, expectedIds, "selection should be correct");
+  }
+
+  function checkSelectedAndCurrent(expectedIndex, expectedId) {
+    Assert.equal(list.selectedIndex, expectedIndex, "selectedIndex is correct");
+    let selected = [...list.querySelectorAll(".selected")].map(row => row.id);
+    Assert.deepEqual(
+      selected,
+      [expectedId],
+      "correct rows have the 'selected' class"
+    );
+    checkCurrent(expectedIndex);
+  }
+
+  list.selectedIndex = 0;
+  checkSelectedAndCurrent(0, "row-1");
+
+  // Click the twisties of rows without children.
+
+  function performChange(id, expectedChange, changeCallback) {
+    listener.reset();
+    let row = doc.getElementById(id);
+    let before = row.classList.contains("collapsed");
+
+    changeCallback(row);
+
+    row = doc.getElementById(id);
+    if (expectedChange == "collapsed") {
+      Assert.ok(!before, `${id} was expanded`);
+      Assert.ok(row.classList.contains("collapsed"), `${id} collapsed`);
+      Assert.notEqual(
+        listener.collapsedIndex,
+        null,
+        `${id} fired 'collapse' event`
+      );
+      Assert.ok(!listener.expandedIndex, `${id} did not fire 'expand' event`);
+    } else if (expectedChange == "expanded") {
+      Assert.ok(before, `${id} was collapsed`);
+      Assert.ok(!row.classList.contains("collapsed"), `${id} expanded`);
+      Assert.ok(
+        !listener.collapsedIndex,
+        `${id} did not fire 'collapse' event`
+      );
+      Assert.notEqual(
+        listener.expandedIndex,
+        null,
+        `${id} fired 'expand' event`
+      );
+    } else {
+      Assert.equal(
+        row.classList.contains("collapsed"),
+        before,
+        `${id} state did not change`
+      );
+    }
+  }
+
+  function clickTwisty(id, expectedChange) {
+    info(`clicking the twisty on ${id}`);
+    performChange(id, expectedChange, row =>
+      EventUtils.synthesizeMouseAtCenter(
+        row.querySelector(".twisty"),
+        {},
+        content
+      )
+    );
+  }
+
+  function clickThread(id, expectedChange) {
+    info(`clicking the thread on ${id}`);
+    performChange(id, expectedChange, row => {
+      EventUtils.synthesizeMouseAtCenter(
+        row.querySelector(".tree-button-thread"),
+        {},
+        content
+      );
+    });
+  }
+
+  for (let id of idsWithoutChildren) {
+    clickTwisty(id, null);
+    Assert.equal(list.querySelector(".selected").id, id);
+  }
+
+  checkSelectedAndCurrent(7, "row-3-1-2");
+
+  // Click the twisties of rows with children.
+
+  function checkRowsAreHidden(...hiddenIds) {
+    let remainingIds = allIds.slice();
+
+    for (let id of allIds) {
+      if (hiddenIds.includes(id)) {
+        Assert.ok(!doc.getElementById(id), `${id} is hidden`);
+        remainingIds.splice(remainingIds.indexOf(id), 1);
+      } else {
+        Assert.greater(
+          doc.getElementById(id).clientHeight,
+          0,
+          `${id} is visible`
+        );
+      }
+    }
+
+    Assert.equal(list.view.rowCount, 8 - hiddenIds.length, "row count");
+    Assert.deepEqual(
+      Array.from(list.table.body.children, r => r.id),
+      remainingIds,
+      "rows property"
+    );
+  }
+
+  // Collapse row 2.
+
+  clickTwisty("row-2", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelectedAndCurrent(5, "row-3-1-2");
+
+  // Collapse row 3.
+
+  clickTwisty("row-3", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(2, "row-3");
+
+  // Expand row 2.
+
+  clickTwisty("row-2", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Expand row 3.
+
+  clickTwisty("row-3", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Collapse row 3-1.
+
+  clickTwisty("row-3-1", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Collapse row 3.
+
+  clickTwisty("row-3", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Expand row 3.
+
+  clickTwisty("row-3", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Expand row 3-1.
+
+  clickTwisty("row-3-1", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Test key presses.
+
+  function pressKey(id, key, expectedChange) {
+    info(`pressing ${key}`);
+    performChange(id, expectedChange, row => {
+      EventUtils.synthesizeKey(key, {}, content);
+    });
+  }
+
+  // Row 0 has no children or parent, nothing should happen.
+
+  list.selectedIndex = 0;
+  pressKey("row-1", "VK_LEFT");
+  checkSelectedAndCurrent(0, "row-1");
+  pressKey("row-1", "VK_RIGHT");
+  checkSelectedAndCurrent(0, "row-1");
+
+  // Collapse row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  pressKey("row-2", "VK_LEFT");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  // Collapse row 3.
+
+  list.selectedIndex = 2;
+  pressKey("row-3", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(2, "row-3");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(2, "row-3");
+
+  // Expand row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_RIGHT", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  // Expand row 3.
+
+  list.selectedIndex = 4;
+  pressKey("row-3", "VK_RIGHT", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Go down the tree to row 3-1-1.
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  // Collapse row 3-1.
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  // Collapse row 3.
+
+  pressKey("row-3-1", "VK_LEFT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  pressKey("row-3", "VK_LEFT", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Expand row 3.
+
+  pressKey("row-3", "VK_RIGHT", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  // Expand row 3-1.
+
+  pressKey("row-3-1", "VK_RIGHT", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  // Same again, with a RTL tree.
+
+  info("switching to RTL");
+  doc.documentElement.dir = "rtl";
+
+  // Row 0 has no children or parent, nothing should happen.
+
+  list.selectedIndex = 0;
+  pressKey("row-1", "VK_RIGHT");
+  checkSelectedAndCurrent(0, "row-1");
+  pressKey("row-1", "VK_LEFT");
+  checkSelectedAndCurrent(0, "row-1");
+
+  // Collapse row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  pressKey("row-2", "VK_RIGHT");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  // Collapse row 3.
+
+  list.selectedIndex = 2;
+  pressKey("row-3", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(2, "row-3");
+
+  pressKey("row-3", "VK_RIGHT");
+  checkRowsAreHidden("row-2-1", "row-2-2", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(2, "row-3");
+
+  // Expand row 2.
+
+  list.selectedIndex = 1;
+  pressKey("row-2", "VK_LEFT", "expanded");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(1, "row-2");
+
+  // Expand row 3.
+
+  list.selectedIndex = 4;
+  pressKey("row-3", "VK_LEFT", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Go down the tree to row 3-1-1.
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  // Collapse row 3-1.
+
+  pressKey("row-3-1-1", "VK_RIGHT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  // Collapse row 3.
+
+  pressKey("row-3-1", "VK_RIGHT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  pressKey("row-3", "VK_RIGHT", "collapsed");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  // Expand row 3.
+
+  pressKey("row-3", "VK_LEFT", "expanded");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+
+  pressKey("row-3", "VK_LEFT");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  // Expand row 3-1.
+
+  pressKey("row-3-1", "VK_LEFT", "expanded");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+
+  pressKey("row-3-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  pressKey("row-3-1-1", "VK_LEFT");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(6, "row-3-1-1");
+
+  // Use the class methods for expanding and collapsing.
+
+  selectHandler.reset();
+  list.addEventListener("select", selectHandler);
+  listener.reset();
+
+  list.collapseRowAtIndex(6); // No children, no effect.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.ok(!listener.collapsedIndex, "'collapsed' event did not fire");
+
+  list.expandRowAtIndex(6); // No children, no effect.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.ok(!listener.expandedIndex, "'expanded' event did not fire");
+
+  list.collapseRowAtIndex(1); // Item with children that aren't selected.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(listener.collapsedIndex, 1, "row-2 fired 'collapsed' event");
+  listener.reset();
+
+  list.expandRowAtIndex(1); // Item with children that aren't selected.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(listener.expandedIndex, 1, "row-2 fired 'expanded' event");
+  listener.reset();
+
+  list.collapseRowAtIndex(5); // Item with children that are selected.
+  Assert.ok(selectHandler.seenEvent, "'select' event fired");
+  Assert.equal(
+    selectHandler.selectedAtEvent,
+    5,
+    "selectedIndex was correct when 'select' event fired"
+  );
+  Assert.equal(listener.collapsedIndex, 5, "row-3-1 fired 'collapsed' event");
+  checkRowsAreHidden("row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(5, "row-3-1");
+  selectHandler.reset();
+  listener.reset();
+
+  list.expandRowAtIndex(5); // Selected item with children.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(listener.expandedIndex, 5, "row-3-1 fired 'expanded' event");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(5, "row-3-1");
+  listener.reset();
+
+  list.selectedIndex = 7;
+  selectHandler.reset();
+
+  list.collapseRowAtIndex(4); // Item with grandchildren that are selected.
+  Assert.ok(selectHandler.seenEvent, "'select' event fired");
+  Assert.equal(
+    selectHandler.selectedAtEvent,
+    4,
+    "selectedIndex was correct when 'select' event fired"
+  );
+  Assert.equal(listener.collapsedIndex, 4, "row-3 fired 'collapsed' event");
+  checkRowsAreHidden("row-3-1", "row-3-1-1", "row-3-1-2");
+  checkSelectedAndCurrent(4, "row-3");
+  selectHandler.reset();
+  listener.reset();
+
+  list.expandRowAtIndex(4); // Selected item with grandchildren.
+  Assert.ok(!selectHandler.seenEvent, "'select' event did not fire");
+  Assert.equal(listener.expandedIndex, 4, "row-3 fired 'expanded' event");
+  checkRowsAreHidden();
+  checkSelectedAndCurrent(4, "row-3");
+  listener.reset();
+
+  // Click thread for already expanded thread. Should select all in thread.
+  selectHandler.reset();
+  clickThread("row-3"); // Item with grandchildren.
+  Assert.ok(selectHandler.seenEvent, "'select' event fired");
+  Assert.equal(
+    selectHandler.selectedAtEvent,
+    4,
+    "selectedIndex was correct when 'select' event fired"
+  );
+  checkRowsAreHidden();
+  checkMultiSelect("row-3", "row-3-1", "row-3-1-1", "row-3-1-2");
+  checkCurrent(4);
+
+  // Click thread for collapsed thread. Should expand the thread and select all
+  // children.
+  list.collapseRowAtIndex(1); // Item with children that aren't selected.
+  Assert.equal(listener.collapsedIndex, 1, "row-2 fired 'collapsed' event");
+  checkRowsAreHidden("row-2-1", "row-2-2");
+  clickThread("row-2", "expanded");
+  Assert.equal(listener.expandedIndex, 1, "row-2 fired 'expanded' event");
+  checkMultiSelect("row-2", "row-2-1", "row-2-2");
+  checkCurrent(1);
+
+  // Select multiple messages in an expanded thread by keyboard, ending with a
+  // child message, then collapse the thread. After that, currentIndex should
+  // be the root message.
+  selectHandler.reset();
+  list.selectedIndex = 1;
+  checkSelectedAndCurrent(1, "row-2");
+  info(`pressing VK_DOWN with shift key twice`);
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, content);
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, content);
+  checkMultiSelect("row-2", "row-2-1", "row-2-2");
+  checkCurrent(3);
+  clickTwisty("row-2", "collapsed");
+  checkSelectedAndCurrent(1, "row-2");
+
+  list.removeEventListener("collapsed", listener);
+  list.removeEventListener("expanded", listener);
+  list.removeEventListener("select", selectHandler);
+  doc.documentElement.dir = null;
+}
+
+/**
+ * Checks that the row widget can be changed, redrawing the rows and
+ * maintaining the selection.
+ */
+add_task(async function testRowClassChange() {
+  for (const variant of TEST_VARIANTS) {
+    info(`Running row class change test for ${variant}`);
+    await runTestInSandbox(subtestRowClassChange, variant);
+  }
+});
+
+async function subtestRowClassChange() {
+  let doc = content.document;
+  let list = doc.getElementById("testTree");
+  let indices = (list.selectedIndices = [1, 2, 3, 5, 8, 13, 21, 34]);
+  list.currentIndex = 5;
+
+  for (let row of list.table.body.children) {
+    Assert.equal(row.getAttribute("is"), "test-row");
+    Assert.equal(row.clientHeight, 50);
+    Assert.equal(
+      row.classList.contains("selected"),
+      indices.includes(row.index)
+    );
+    Assert.equal(row.classList.contains("current"), row.index == 5);
+  }
+
+  info("switching row class to AlternativeCardRow");
+  list.setAttribute("rows", "alternative-row");
+  Assert.deepEqual(list.selectedIndices, indices);
+  Assert.equal(list.currentIndex, 5);
+
+  for (let row of list.table.body.children) {
+    Assert.equal(row.getAttribute("is"), "alternative-row");
+    Assert.equal(row.clientHeight, 80);
+    Assert.equal(
+      row.classList.contains("selected"),
+      indices.includes(row.index)
+    );
+    Assert.equal(row.classList.contains("current"), row.index == 5);
+  }
+
+  list.selectedIndex = -1;
+  Assert.deepEqual(list.selectedIndices, []);
+  Assert.equal(list.currentIndex, -1);
+
+  info("switching row class to TestCardRow");
+  list.setAttribute("rows", "test-row");
+  Assert.deepEqual(list.selectedIndices, []);
+  Assert.equal(list.currentIndex, -1);
+
+  for (let row of list.table.body.children) {
+    Assert.equal(row.getAttribute("is"), "test-row");
+    Assert.equal(row.clientHeight, 50);
+    Assert.ok(!row.classList.contains("selected"));
+    Assert.ok(!row.classList.contains("current"));
+  }
+}
+
+/**
+ * Checks that resizing the widget automatically adds more rows if necessary.
+ */
+add_task(async function testResize() {
+  for (const variant of TEST_VARIANTS) {
+    info(`Running resize test for ${variant}`);
+    await runTestInSandbox(subtestResize, variant);
+  }
+});
+
+async function subtestResize() {
+  let doc = content.document;
+
+  let list = doc.getElementById("testTree");
+  Assert.ok(!!list, "the list exists");
+
+  async function doListActionAndWaitForRowBuffer(actionFn) {
+    // Filling the row buffer is fiddly timing, so provide an event to indicate
+    // that actions which may trigger changes in the row buffer have finished.
+    const eventName = "_treerowbufferfill";
+    list._rowBufferReadyEvent = new content.CustomEvent(eventName);
+
+    const promise = new Promise(resolve =>
+      list.addEventListener(eventName, resolve, { once: true })
+    );
+
+    await actionFn();
+    await promise;
+
+    list._rowBufferReadyEvent = null;
+  }
+
+  async function scrollVerticallyBy(scrollDistance) {
+    await doListActionAndWaitForRowBuffer(() => {
+      list.scrollBy(0, scrollDistance);
+    });
+  }
+
+  async function changeHeightTo(newHeight) {
+    await doListActionAndWaitForRowBuffer(() => {
+      list.style.height = `${newHeight}px`;
+    });
+  }
+
+  let rowCount = function () {
+    return list.querySelectorAll(`tr[is="test-row"]`).length;
+  };
+
+  let originalHeight = list.clientHeight;
+
+  // We should already be at the top, but this will force us to have finished
+  // loading before we trigger another scroll. Otherwise, we may get back a fill
+  // event for the initial fill when we expect an event in response to a scroll.
+  await doListActionAndWaitForRowBuffer(() => {
+    list.scrollTo(0, 0);
+  });
+
+  // Start by scrolling to somewhere in the middle of the list, so that we
+  // don't have to think about buffer rows that don't exist at the ends.
+  await scrollVerticallyBy(2650);
+
+  // The list has enough space for 13 visible rows, and 26 buffer rows should
+  // exist above and below.
+  Assert.equal(
+    rowCount(),
+    13 + 26 + 26,
+    "the list should contain the right number of rows"
+  );
+
+  // Make the list shorter by 5 rows. This should not affect the number of rows,
+  // but this is a bit flaky, so check we have at least the minimum required.
+  await changeHeightTo(originalHeight - 250);
+  Assert.equal(list._toleranceSize, 16);
+  Assert.greaterOrEqual(
+    rowCount(),
+    8 + 26 + 26,
+    "making the list shorter should not change the number of rows"
+  );
+
+  // Scrolling the list by any amount should remove excess rows.
+  await scrollVerticallyBy(50);
+  Assert.equal(
+    rowCount(),
+    8 + 16 + 16,
+    "scrolling the list after resize should remove the excess rows"
+  );
+
+  // Return to the original height. More buffer rows should be added. We have
+  // to wait for the ResizeObserver to be triggered.
+  await changeHeightTo(originalHeight);
+  Assert.equal(list._toleranceSize, 26);
+  Assert.equal(
+    rowCount(),
+    13 + 26 + 26,
+    "making the list taller should change the number of rows"
+  );
+
+  // Make the list taller by 5 rows. We have to wait for the ResizeObserver
+  // to be triggered.
+  await changeHeightTo(originalHeight + 250);
+  Assert.equal(list._toleranceSize, 36);
+  Assert.equal(
+    rowCount(),
+    18 + 36 + 36,
+    "making the list taller should change the number of rows"
+  );
+
+  // Scrolling the list should not affect the number of rows.
+  await scrollVerticallyBy(50);
+  Assert.equal(
+    rowCount(),
+    18 + 36 + 36,
+    "scrolling the list should not change the number of rows"
+  );
+}
diff --git a/comm/mail/base/test/browser/browser_viewMenu.js b/comm/mail/base/test/browser/browser_viewMenu.js
new file mode 100644
index 0000000000..d24e868595
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_viewMenu.js
@@ -0,0 +1,218 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+/** @type MenuData */
+const viewMenuData = {
+  menu_Toolbars: {},
+  view_toolbars_popup_quickFilterBar: { checked: true },
+  viewToolbarsPopupSpacesToolbar: { checked: true },
+  menu_showTaskbar: { checked: true },
+  customizeMailToolbars: {},
+  menu_MessagePaneLayout: {},
+  messagePaneClassic: {},
+  messagePaneWide: {},
+  messagePaneVertical: { checked: true },
+  menu_showFolderPane: { checked: true },
+  menu_toggleThreadPaneHeader: { disabled: true, checked: true },
+  menu_showMessage: {},
+  menu_FolderViews: {},
+  menu_toggleFolderHeader: { checked: true },
+  menu_allFolders: { disabled: true, checked: true },
+  menu_smartFolders: {},
+  menu_unreadFolders: {},
+  menu_favoriteFolders: {},
+  menu_recentFolders: {},
+  menu_tags: {},
+  menu_compactMode: { disabled: true },
+  menu_uiDensity: {},
+  uiDensityCompact: {},
+  uiDensityNormal: { checked: true },
+  uiDensityTouch: {},
+  viewFullZoomMenu: {},
+  menu_fullZoomEnlarge: { disabled: true },
+  menu_fullZoomReduce: { disabled: true },
+  menu_fullZoomReset: { disabled: true },
+  menu_fullZoomToggle: { disabled: true },
+  menu_uiFontSize: {},
+  menu_fontSizeEnlarge: {},
+  menu_fontSizeReduce: {},
+  menu_fontSizeReset: {},
+  calTodayPaneMenu: { hidden: true },
+  "calShowTodayPane-2": {},
+  calTodayPaneDisplayMiniday: {},
+  calTodayPaneDisplayMinimonth: {},
+  calTodayPaneDisplayNone: {},
+  calCalendarMenu: { hidden: true },
+  calChangeViewDay: {},
+  calChangeViewWeek: {},
+  calChangeViewMultiweek: {},
+  calChangeViewMonth: {},
+  calCalendarPaneMenu: {},
+  calViewCalendarPane: {},
+  calTasksViewMinimonth: {},
+  calTasksViewCalendarlist: {},
+  calCalendarCurrentViewMenu: {},
+  calWorkdaysOnlyMenuitem: {},
+  calTasksInViewMenuitem: {},
+  calShowCompletedInViewMenuItem: {},
+  calViewRotated: {},
+  calTasksMenu: { hidden: true },
+  calTasksViewFilterTasks: {},
+  calTasksViewFilterCurrent: {},
+  calTasksViewFilterToday: {},
+  calTasksViewFilterNext7days: {},
+  calTasksViewFilterNotstartedtasks: {},
+  calTasksViewFilterOverdue: {},
+  calTasksViewFilterCompleted: {},
+  calTasksViewFilterOpen: {},
+  calTasksViewFilterAll: {},
+  viewSortMenu: { disabled: true },
+  sortByDateMenuitem: {},
+  sortByReceivedMenuitem: {},
+  sortByFlagMenuitem: {},
+  sortByOrderReceivedMenuitem: {},
+  sortByPriorityMenuitem: {},
+  sortByFromMenuitem: {},
+  sortByRecipientMenuitem: {},
+  sortByCorrespondentMenuitem: {},
+  sortBySizeMenuitem: {},
+  sortByStatusMenuitem: {},
+  sortBySubjectMenuitem: {},
+  sortByUnreadMenuitem: {},
+  sortByTagsMenuitem: {},
+  sortByJunkStatusMenuitem: {},
+  sortByAttachmentsMenuitem: {},
+  sortAscending: {},
+  sortDescending: {},
+  sortThreaded: {},
+  sortUnthreaded: {},
+  groupBySort: {},
+  viewMessageViewMenu: { hidden: true },
+  viewMessageAll: {},
+  viewMessageUnread: {},
+  viewMessageNotDeleted: {},
+  viewMessageTags: {},
+  viewMessageCustomViews: {},
+  viewMessageVirtualFolder: {},
+  viewMessageCustomize: {},
+  viewMessagesMenu: { disabled: true },
+  viewAllMessagesMenuItem: { disabled: true, checked: true },
+  viewUnreadMessagesMenuItem: { disabled: true },
+  viewThreadsWithUnreadMenuItem: { disabled: true },
+  viewWatchedThreadsWithUnreadMenuItem: { disabled: true },
+  viewIgnoredThreadsMenuItem: { disabled: true },
+  menu_expandAllThreads: { disabled: true },
+  collapseAllThreads: { disabled: true },
+  viewheadersmenu: {},
+  viewallheaders: {},
+  viewnormalheaders: { checked: true },
+  viewBodyMenu: {},
+  bodyAllowHTML: { checked: true },
+  bodySanitized: {},
+  bodyAsPlaintext: {},
+  bodyAllParts: { hidden: true },
+  viewFeedSummary: { hidden: true },
+  bodyFeedGlobalWebPage: {},
+  bodyFeedGlobalSummary: {},
+  bodyFeedPerFolderPref: {},
+  bodyFeedSummaryAllowHTML: {},
+  bodyFeedSummarySanitized: {},
+  bodyFeedSummaryAsPlaintext: {},
+  viewAttachmentsInlineMenuitem: { checked: true },
+  pageSourceMenuItem: { disabled: true },
+};
+let helper = new MenuTestHelper("menu_View", viewMenuData);
+
+let tabmail = document.getElementById("tabmail");
+let inboxFolder, rootFolder, testMessages;
+
+add_setup(async function () {
+  document.getElementById("toolbar-menubar").removeAttribute("autohide");
+
+  let generator = new MessageGenerator();
+
+  MailServices.accounts.createLocalMailAccount();
+  let account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+  rootFolder = account.incomingServer.rootFolder;
+
+  rootFolder.createSubfolder("view menu", null);
+  inboxFolder = rootFolder
+    .getChildNamed("view menu")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+  inboxFolder.addMessageBatch(
+    generator.makeMessages({ count: 5 }).map(message => message.toMboxString())
+  );
+  testMessages = [...inboxFolder.messages];
+
+  registerCleanupFunction(() => {
+    tabmail.closeOtherTabs(0);
+    MailServices.accounts.removeAccount(account, false);
+  });
+});
+
+add_task(async function test3PaneTab() {
+  tabmail.currentAbout3Pane.restoreState({
+    folderPaneVisible: true,
+    messagePaneVisible: true,
+    folderURI: rootFolder,
+  });
+  await new Promise(resolve => setTimeout(resolve));
+  await helper.testAllItems("mail3PaneTab");
+
+  tabmail.currentAbout3Pane.displayFolder(inboxFolder);
+  await helper.testItems({
+    menu_Toolbars: {},
+    view_toolbars_popup_quickFilterBar: { checked: true },
+    menu_MessagePaneLayout: {},
+    menu_showFolderPane: { checked: true },
+    menu_toggleThreadPaneHeader: { checked: true },
+    menu_showMessage: { checked: true },
+    viewSortMenu: { disabled: false },
+    viewMessagesMenu: { disabled: false },
+  });
+
+  goDoCommand("cmd_toggleQuickFilterBar");
+  await helper.testItems({
+    menu_Toolbars: {},
+    view_toolbars_popup_quickFilterBar: { checked: false },
+  });
+
+  goDoCommand("cmd_toggleFolderPane");
+  await helper.testItems({
+    menu_MessagePaneLayout: {},
+    menu_showFolderPane: { checked: false },
+    menu_showMessage: { checked: true },
+  });
+
+  goDoCommand("cmd_toggleThreadPaneHeader");
+  await helper.testItems({
+    menu_MessagePaneLayout: {},
+    menu_toggleThreadPaneHeader: { checked: false },
+  });
+
+  goDoCommand("cmd_toggleMessagePane");
+  await helper.testItems({
+    menu_MessagePaneLayout: {},
+    menu_showFolderPane: { checked: false },
+    menu_showMessage: { checked: false },
+  });
+
+  goDoCommand("cmd_toggleQuickFilterBar");
+  goDoCommand("cmd_toggleFolderPane");
+  goDoCommand("cmd_toggleThreadPaneHeader");
+  goDoCommand("cmd_toggleMessagePane");
+  await helper.testItems({
+    menu_Toolbars: {},
+    view_toolbars_popup_quickFilterBar: { checked: true },
+    menu_MessagePaneLayout: {},
+    menu_showFolderPane: { checked: true },
+    menu_toggleThreadPaneHeader: { checked: true },
+    menu_showMessage: { checked: true },
+  });
+});
diff --git a/comm/mail/base/test/browser/browser_webSearchTelemetry.js b/comm/mail/base/test/browser/browser_webSearchTelemetry.js
new file mode 100644
index 0000000000..cd420e3b83
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_webSearchTelemetry.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* globals openWebSearch */
+
+/**
+ * Test telemetry related to web search usage.
+ */
+
+let { TelemetryTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/TelemetryTestUtils.sys.mjs"
+);
+let { MockRegistrar } = ChromeUtils.importESModule(
+  "resource://testing-common/MockRegistrar.sys.mjs"
+);
+
+/** @implements {nsIExternalProtocolService} */
+let mockExternalProtocolService = {
+  loadURI(aURI, aWindowContext) {},
+  QueryInterface: ChromeUtils.generateQI(["nsIExternalProtocolService"]),
+};
+
+let mockExternalProtocolServiceCID = MockRegistrar.register(
+  "@mozilla.org/uriloader/external-protocol-service;1",
+  mockExternalProtocolService
+);
+
+registerCleanupFunction(() => {
+  MockRegistrar.unregister(mockExternalProtocolServiceCID);
+});
+
+/**
+ * Test that we're counting how many times search on web was used.
+ */
+add_task(async function test_web_search_usage() {
+  Services.telemetry.clearScalars();
+
+  const NUM_SEARCH = 5;
+  let engine = await Services.search.getDefault();
+  await Promise.all(
+    Array.from({ length: NUM_SEARCH }).map(() => openWebSearch("thunderbird"))
+  );
+
+  let scalars = TelemetryTestUtils.getProcessScalars("parent", true);
+  Assert.equal(
+    scalars["tb.websearch.usage"][engine.name.toLowerCase()],
+    NUM_SEARCH,
+    "Count of search on web times must be correct."
+  );
+});
diff --git a/comm/mail/base/test/browser/browser_zoom.js b/comm/mail/base/test/browser/browser_zoom.js
new file mode 100644
index 0000000000..0dbda439ca
--- /dev/null
+++ b/comm/mail/base/test/browser/browser_zoom.js
@@ -0,0 +1,110 @@
+/* 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/. */
+
+const { MessageGenerator } = ChromeUtils.import(
+  "resource://testing-common/mailnews/MessageGenerator.jsm"
+);
+
+const tabmail = document.getElementById("tabmail");
+const about3Pane = tabmail.currentAbout3Pane;
+const { threadTree } = about3Pane;
+
+add_setup(async function () {
+  Services.prefs.setBoolPref("mailnews.scroll_to_new_message", false);
+  // Create an account for the test.
+  MailServices.accounts.createLocalMailAccount();
+  const account = MailServices.accounts.accounts[0];
+  account.addIdentity(MailServices.accounts.createIdentity());
+
+  // Create a folder for the account to store test messages.
+  const rootFolder = account.incomingServer.rootFolder;
+  rootFolder.createSubfolder("zoom", null);
+  const testFolder = rootFolder
+    .getChildNamed("zoom")
+    .QueryInterface(Ci.nsIMsgLocalMailFolder);
+
+  // Generate test messages.
+  const generator = new MessageGenerator();
+  testFolder.addMessageBatch(
+    generator
+      .makeMessages({ count: 5, msgsPerThread: 5 })
+      .map(message => message.toMboxString())
+  );
+
+  // Use the test folder.
+  about3Pane.displayFolder(testFolder.URI);
+  await ensure_cards_view();
+
+  // Remove test account on cleanup.
+  registerCleanupFunction(() => {
+    MailServices.accounts.removeAccount(account, false);
+    Services.prefs.setBoolPref("mailnews.scroll_to_new_message", true);
+  });
+});
+
+/**
+ * Tests zooming in and out of the multi-message view using keyboard shortcuts
+ * when viewing a thread.
+ */
+add_task(async function testMultiMessageZoom() {
+  // Threads need to be collapsed, otherwise the multi-message view
+  // won't be shown.
+  const row = threadTree.getRowAtIndex(0);
+  Assert.ok(
+    row.classList.contains("collapsed"),
+    "The thread row should be collapsed"
+  );
+
+  const subjectLine = row.querySelector(
+    ".thread-card-subject-container .subject"
+  );
+  // Simulate a click on the row's subject line to select the row.
+  const selectPromise = BrowserTestUtils.waitForEvent(threadTree, "select");
+  EventUtils.synthesizeMouseAtCenter(
+    subjectLine,
+    { clickCount: 1 },
+    about3Pane
+  );
+  await selectPromise;
+  // Make sure the correct thread is selected and that the multi-message view is
+  // visible.
+  Assert.ok(
+    row.classList.contains("selected"),
+    "The thread row should be selected"
+  );
+  Assert.ok(
+    BrowserTestUtils.is_visible(about3Pane.multiMessageBrowser),
+    "The multi-message browser should be visible"
+  );
+
+  // Record the zoom value before the operation.
+  let previousZoom = top.ZoomManager.getZoomForBrowser(
+    about3Pane.multiMessageBrowser
+  );
+
+  // Emulate a zoom in.
+  EventUtils.synthesizeKey("+", { accelKey: true });
+
+  // Test that the zoom value increases.
+  await TestUtils.waitForCondition(
+    () =>
+      top.ZoomManager.getZoomForBrowser(about3Pane.multiMessageBrowser) >
+      previousZoom,
+    "zoom value should be greater than before keyboard event"
+  );
+
+  // Emulate a zoom out.
+  previousZoom = top.ZoomManager.getZoomForBrowser(
+    about3Pane.multiMessageBrowser
+  );
+  EventUtils.synthesizeKey("-", { accelKey: true });
+
+  // Test that the zoom value decreases.
+  await TestUtils.waitForCondition(
+    () =>
+      previousZoom >
+      top.ZoomManager.getZoomForBrowser(about3Pane.multiMessageBrowser),
+    "zoom value should be less than before keyboard event"
+  );
+});
diff --git a/comm/mail/base/test/browser/files/formContent.html b/comm/mail/base/test/browser/files/formContent.html
new file mode 100644
index 0000000000..6779051746
--- /dev/null
+++ b/comm/mail/base/test/browser/files/formContent.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Form Content</title>
+  </head>
+  <body>
+    <form>
+      <div>
+        <input type="date" />
+      </div>
+      <div>
+        <select>
+          <option value=""></option>
+          <option value="3.141592654">&pi;</option>
+          <option value="6.283185308">&tau;</option>
+        </select>
+      </div>
+      <div>
+        <input list="letters"/>
+        <datalist id="letters">
+          <option value="alpha"/>
+          <option value="beta"/>
+          <option value="gamma"/>
+          <option value="delta"/>
+          <option value="epsilon"/>
+          <option value="zeta"/>
+          <option value="eta"/>
+          <option value="theta"/>
+          <option value="iota"/>
+          <option value="kappa"/>
+        </datalist>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/comm/mail/base/test/browser/files/links.html b/comm/mail/base/test/browser/files/links.html
new file mode 100644
index 0000000000..f5703dc4ef
--- /dev/null
+++ b/comm/mail/base/test/browser/files/links.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Links to other places</title>
+</head>
+<body>
+  <h1>Links to things</h1>
+  <p>This page is a test of what happens when you click on links. It should be loaded from http://example.org:80.</p>
+
+  <h2>This page:</h2>
+  <ul>
+    <li><a id="this-hash" href="#hash">Anchor on this page</a></li>
+    <li><a id="this-nohash" href="links.html">This page</a></li>
+  </ul>
+
+  <h2>Pages on this domain:</h2>
+  <ul>
+    <li><a id="local-here" href="sampleContent.html">A page in the same directory</a></li>
+    <li><a id="local-elsewhere" href="/browser/comm/mail/components/extensions/test/browser/data/content.html">A page elsewhere</a></li>
+  </ul>
+
+  <h2>Pages on other places on this TLD:</h2>
+  <ul>
+    <li><a id="other-https" href="https://example.org/browser/comm/mail/base/test/browser/files/links.html">This page, but over HTTPS</a></li>
+    <li><a id="other-port" href="http://example.org:8000/browser/comm/mail/base/test/browser/files/links.html">This page, but on example.com:8000</a></li>
+    <li><a id="other-subdomain" href="http://test1.example.org/browser/comm/mail/base/test/browser/files/links.html">This page, but on test1.example.com</a></li>
+    <li><a id="other-subsubdomain" href="http://sub1.test1.example.org/browser/comm/mail/base/test/browser/files/links.html">This page, but on sub1.test1.example.com</a></li>
+  </ul>
+
+  <h2>Pages on a completely different domain:</h2>
+  <ul style="margin-bottom: 100vh;">
+    <li><a id="other-domain" href="http://mochi.test:8888/browser/comm/mail/base/test/browser/files/links.html">This page, but on mochi.test</a></li>
+  </ul>
+
+  <h2 id="hash">This is the hash target!</h2>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/menulist.xhtml b/comm/mail/base/test/browser/files/menulist.xhtml
new file mode 100644
index 0000000000..cba2bbcf86
--- /dev/null
+++ b/comm/mail/base/test/browser/files/menulist.xhtml
@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
+<?xml-stylesheet type="text/css" href="chrome://messenger/skin/menulist.css"?>
+
+<window align="start" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
+  <button id="before" label="I'm just a button" onclick="alert('I\'m a button!')"/>
+
+  <menulist>
+    <menupopup>
+      <menuitem value="foo" label="foo"/>
+      <menuitem value="bar" label="bar"/>
+    </menupopup>
+  </menulist>
+
+  <menulist is="menulist-editable">
+    <menupopup>
+      <menuitem value="foo" label="foo"/>
+      <menuitem value="bar" label="bar"/>
+    </menupopup>
+  </menulist>
+
+  <menulist is="menulist-editable" editable="true" width="100">
+    <menupopup>
+      <menuitem value="foo" label="foo"/>
+      <menuitem value="bar" label="bar"/>
+    </menupopup>
+  </menulist>
+
+  <button id="after" label="I'm just a button"/>
+</window>
diff --git a/comm/mail/base/test/browser/files/orderableTreeListbox.xhtml b/comm/mail/base/test/browser/files/orderableTreeListbox.xhtml
new file mode 100644
index 0000000000..63154cbce9
--- /dev/null
+++ b/comm/mail/base/test/browser/files/orderableTreeListbox.xhtml
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the orderable-tree-listbox custom element</title>
+  <style>
+    :focus {
+      outline: 3px blue solid;
+    }
+    html {
+      height: 100%;
+    }
+    body {
+      height: 100%;
+      display: flex;
+      margin: 0;
+    }
+    #list {
+      overflow-y: auto;
+      white-space: nowrap;
+      margin: 1em;
+      border: 1px solid black;
+      width: 400px;
+      outline: none;
+    }
+    @media not (prefers-reduced-motion) {
+      #list {
+        scroll-behavior: smooth;
+      }
+    }
+    ol, ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    li > div {
+      display: flex;
+      align-items: center;
+      padding: 4px;
+      line-height: 24px;
+    }
+    li.selected > div {
+      color: white;
+      background-color: blue;
+    }
+    li > ul > li > div {
+      padding-inline-start: calc(1em + 8px);
+    }
+    li.collapsed > ul {
+      display: none;
+    }
+    div.twisty {
+      width: 1em;
+      height: 1em;
+      margin-inline-end: 4px;
+    }
+    li.children > div > div.twisty {
+      background-color: green;
+    }
+    li.children.collapsed > div > div.twisty {
+      background-color: red;
+    }
+
+    #list > li {
+      transition: opacity 250ms;
+    }
+    #list > li.dragging {
+      opacity: 0.75;
+    }
+  </style>
+  <!-- This script is used for the automated test. -->
+  <script defer="defer" src="chrome://messenger/content/tree-listbox.js"></script>
+  <!-- This script is used when this file is loaded in a browser. -->
+  <script defer="defer" src="../../../content/widgets/tree-listbox.js"></script>
+</head>
+<body>
+  <ol id="list" is="orderable-tree-listbox" role="tree">
+    <li id="row-1">
+      <div draggable="true">
+        <div class="twisty"></div>
+        Item 1
+      </div>
+    </li>
+    <li id="row-2">
+      <div draggable="true">
+        <div class="twisty"></div>
+        Item 2
+      </div>
+      <ul>
+        <li id="row-2-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+        </li>
+        <li id="row-2-2">
+          <div>
+            <div class="twisty"></div>
+            Second child
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li id="row-3">
+      <div draggable="true">
+        <div class="twisty"></div>
+        Item 3
+      </div>
+      <ul>
+        <li id="row-3-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+        </li>
+        <li id="row-3-2">
+          <div>
+            <div class="twisty"></div>
+            Second child
+          </div>
+        </li>
+        <li id="row-3-3">
+          <div>
+            <div class="twisty"></div>
+            Third child
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li id="row-4">
+      <div draggable="true">
+        <div class="twisty"></div>
+        Item 4
+      </div>
+    </li>
+    <li id="row-5">
+      <div draggable="true">
+        <div class="twisty"></div>
+        Item 5
+      </div>
+      <ul>
+        <li id="row-5-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+        </li>
+        <li id="row-5-2">
+          <div>
+            <div class="twisty"></div>
+            Second child
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ol>
+
+  <div id="marker" style="position: absolute; left: 500px; border-top: 1px red solid;"></div>
+  <script>
+    function moveMarker(event) {
+      let marker = document.getElementById("marker");
+      marker.style.top = `${event.clientY}px`;
+      marker.textContent = `${event.type} event here`;
+    }
+
+    document.addEventListener("dragstart", moveMarker);
+    document.addEventListener("dragover", moveMarker);
+    document.addEventListener("drop", moveMarker);
+  </script>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/paneSplitter.xhtml b/comm/mail/base/test/browser/files/paneSplitter.xhtml
new file mode 100644
index 0000000000..7d25e5596e
--- /dev/null
+++ b/comm/mail/base/test/browser/files/paneSplitter.xhtml
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the pane-splitter custom element</title>
+  <style>
+    hr[is="pane-splitter"] {
+      margin: 0 -3px;
+      border: none;
+      z-index: 1;
+      cursor: ew-resize;
+      opacity: .4;
+      background-color: red;
+    }
+
+    #splitter3,
+    #splitter4 {
+      margin: -3px 0;
+      cursor: ns-resize;
+    }
+
+    #horizontal-before {
+      display: grid;
+      grid-template-columns: minmax(auto, var(--splitter1-width)) 0 auto;
+      width: 500px;
+      height: 100px;
+      --splitter1-width: 200px;
+      margin: 1em;
+    }
+
+    #horizontal-after {
+      display: grid;
+      grid-template-columns: auto 0 minmax(auto, var(--splitter2-width));
+      width: 500px;
+      height: 100px;
+      --splitter2-width: 200px;
+      margin: 1em;
+    }
+
+    #vertical-before {
+      display: inline-grid;
+      grid-template-rows: minmax(auto, var(--splitter3-height)) 0 auto;
+      width: 100px;
+      height: 500px;
+      --splitter3-height: 200px;
+      margin: 1em;
+    }
+
+    #vertical-after {
+      display: inline-grid;
+      grid-template-rows: auto 0 minmax(auto, var(--splitter4-height));
+      width: 100px;
+      height: 500px;
+      --splitter4-height: 200px;
+      margin: 1em;
+    }
+
+    .resized {
+      background-color: lightblue;
+    }
+
+    .fill {
+      background-color: lightslategrey;
+    }
+  </style>
+  <!-- This path is used for the automated test. -->
+  <script src="chrome://messenger/content/pane-splitter.js"></script>
+  <!-- This path is used when this file is loaded in a browser. -->
+  <script src="../../../content/widgets/pane-splitter.js"></script>
+  <script>
+    function moveMarker(event) {
+      let markerX = document.getElementById("markerX");
+      markerX.style.left = `${event.clientX + window.scrollX}px`;
+      markerX.textContent = `${event.type} event here`;
+
+      let markerY = document.getElementById("markerY");
+      markerY.style.top = `${event.clientY + window.scrollY}px`;
+      markerY.textContent = `${event.type} event here`;
+    }
+
+    document.addEventListener("mousedown", moveMarker);
+    document.addEventListener("mousemove", moveMarker);
+    document.addEventListener("mouseup", moveMarker);
+
+    window.addEventListener("load", () => {
+      for (let splitter of document.querySelectorAll('hr[is="pane-splitter"]')) {
+        splitter.resizeElement = splitter.parentNode.querySelector(".resized");
+      }
+    });
+  </script>
+</head>
+<body>
+  <div id="horizontal-before">
+    <div id="splitter1-before" class="resized"></div>
+    <hr is="pane-splitter" id="splitter1" resize-direction="horizontal" />
+    <div id="splitter1-after" class="fill"></div>
+  </div>
+
+  <div id="horizontal-after">
+    <div id="splitter2-before" class="fill"></div>
+    <hr is="pane-splitter" id="splitter2" resize="next" resize-direction="horizontal" />
+    <div id="splitter2-after" class="resized"></div>
+  </div>
+
+  <div style="display: flex;">
+    <div id="vertical-before">
+      <div id="splitter3-before" class="resized"></div>
+      <hr is="pane-splitter" id="splitter3" />
+      <div id="splitter3-after" class="fill"></div>
+    </div>
+
+    <div id="vertical-after">
+      <div id="splitter4-before" class="fill"></div>
+      <hr is="pane-splitter" id="splitter4" resize="next" />
+      <div id="splitter4-after" class="resized"></div>
+    </div>
+  </div>
+
+  <div id="markerX" style="position: absolute; top: 0px; border-left: 1px red solid;"></div>
+  <div id="markerY" style="position: absolute; left: 550px; border-top: 1px red solid;"></div>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/rss.xml b/comm/mail/base/test/browser/files/rss.xml
new file mode 100644
index 0000000000..8ff0540a66
--- /dev/null
+++ b/comm/mail/base/test/browser/files/rss.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>Test Feed</title>
+    <link>https://example.org/</link>
+    <description></description>
+    <lastBuildDate>Thu, 21 Jan 2021 17:57:54 +0000</lastBuildDate>
+    <language>en-US</language>
+
+    <item>
+      <title>Test Article</title>
+      <link>https://example.org/browser/comm/mail/base/test/browser/files/sampleContent.html</link>
+      <pubDate>Wed, 20 Jan 2021 17:00:39 +0000</pubDate>
+    </item>
+  </channel>
+</rss>
diff --git a/comm/mail/base/test/browser/files/sampleContent.eml b/comm/mail/base/test/browser/files/sampleContent.eml
new file mode 100644
index 0000000000..f0465ad2bd
--- /dev/null
+++ b/comm/mail/base/test/browser/files/sampleContent.eml
@@ -0,0 +1,160 @@
+From andy@anway.invalid
+Content-Type: multipart/related;
+ boundary="--------------CHOPCHOP0"
+Subject: Big Meeting Today
+From: "Andy Anway" <andy@anway.invalid>
+To: "Bob Bell" <bob@bell.invalid>
+Message-Id: <0@made.up.invalid>
+Date: Tue, 01 Feb 2000 00:00:00 +1300
+
+This is a multi-part message in MIME format.
+----------------CHOPCHOP0
+Content-Type: text/html; charset=ISO-8859-1; format=flowed
+Content-Transfer-Encoding: 7bit
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" href="http://mochi.test:8888/browser/comm/mail/base/test/browser/files/tb-logo.png" />
+  </head>
+  <body>
+    <p>This is a page of sample content for tests.</p>
+    <p><a href="https://www.thunderbird.net/">Link to a web page</a></p>
+    <form>
+      <input type="text" />
+    </form>
+    <p><img src="cid:logo" width="304" height="84" /></p>
+  </body>
+</html>
+
+----------------CHOPCHOP0
+Content-Type: image/png; charset=ISO-8859-1; format=flowed;
+ name="tb-logo.png"
+Content-Transfer-Encoding: base64
+Content-Disposition: attachment;
+ filename="tb-logo.png"
+Content-ID: <logo>
+
+iVBORw0KGgoAAAANSUhEUgAAATAAAABUCAMAAAAyN5s5AAAC91BMVEVMaXErLDVPU1wYFx1O
+T1RPT1RNT1MTExoFBwZNTlNOTlNNT1RNTlNMTFRNTlMGBgoDBgYFBQZNTlQGBgdOTlNNTlMA
+AwMEBQVNTlNOUFRMTFUAAABNTlMEBgdNT1QFBwoEBAZOTlNNTlMuOoNNTlQACghNTlRNTlNO
+T1RNTlMTDytNT1N/qs1NTlMxPolNTlSZydyfmI8pMHosPIYaFSFNTlMdEkRNUFVNTlMrM38U
+EBczT5hNTlMtNX8UDy8+XqIqN4AkGmCTiIEwN4JHaKgRCygnLHdzmsNYdq2Fd3N2nMRvlL8g
+G00RCi0TCzAsQYsqHGJMbq5pjLsWDj9HYqV/qdh6nsxpYFljhsL////7+PL38+z59u////z8
++/f8+vT28ufz7+UoG2D+/fnx7ODu6NvRyb3g2c7k39bSzcXr5NbIvq/Z0si9sqLJw7jDuKjb
+0cCJhYHOxbbn3s/n5eGjn5mtqKPY1M+0r6rl2MS9ubVwbW54dXZgXl5HREZnZWHHxcJWVlU/
+PjevpJXazbR/fX0cJGV/d29UaaFPTka5rZx0b2P/++T77c9UVEphW01BQFtXTl6QnavN3exg
+hcBIa65bgL0rS5dOcbGKt9NKZ6dPdLZdhbk8ZKlDcbNVd7RWe7l0pcszX6c5WpyKvN5EYaI9
+aK8yWaNJdrRff7OBsdc0RZUvUppukr8xN3knRZItLXkoUqFiisUoPIlsnMVpirxKfcdekL+Z
+yusoQY4EAQktOIQOBVVWicRBaqgqMmp3msRTgr40VJ1SiLhAbrFwmc1glc5DWaEqMoBRcKtp
+kMh0ntRMfrlHdronKVek1vYVCzd/ptg7aaEYGG83UZM6X6JDc6taea1cZXwkIUJDV5kLAyW3
+6P2PwOlhp+A4QIIcDg8+TpYoIXQiFVY0SYuClLAFABlZKzUdFWgyN4zU//82MTUrIGkpHWVO
+T1SUjoosIm0eK3oSCS89RYwpGjNNQHREVIaXdlSjqrsmJCHZ+P6hTAAuJnRz9RRfAAAAWXRS
+TlMAAw0H2DaeARv9u/JCJ39bSVawUY/kECNSFBsL6jdqQS2nyiBjFnOGWS6XSv75/cP+/Y1X
+gpf+INIxbcWMRrneatP7sn305HhA1FEovMfh4/W3xtjNzNPUx47MeaUAABWdSURBVHhe7JTH
+a1xXHIUleZ1lwPEygpDgFzEZEQUjhGQiYiEtjIwV8ofd13uv03vvvaj34t7Se1/kzigkJLGJ
+DN69+VZv8eM++DjnjL2YyVXv2PjYRRlxI/bRxOJFhY0YX4tdH781Oz13oesRE2sg61377jaj
+3phYWVpeXl5aWpl44fWISx93toN1FE/sVRAPIlpIkRHM/fnVxbnndnTEJ51UU+O2EomEkrQQ
+yycwTIvK75Yd56Z37j9JG7HacXC94osqIkkiluVjKgSlynggNWTKO/mP6xGLHXZvi0laikLC
+OopMpdJS5TIeCOAOBIcf3qW/r0d4sR4TNdYVMblORsWoub9PQV9lJxTSdUliWUmSQqH5xfNm
+jrh2vZEzTuF2iUpSSUR9574cR4eqqlzVMFiJzaMsy1KL8HqEV93p9RRFXEes5Knoi/3pK6Sz
+WrXKGWy1qlVZlCAIFKVuT47i9WHMPKrW1hWPYsG9h75ME+6XrEsatFXqsqymcRyNogSPDlhw
+ua8F2xJ/lOvJpMdDIkjRx5gMQ6hQFywj1zUMbhgzjqYJAUVpCDrr6pBNR0D0zgP2dOCLRIqw
+jibDq7I09LXXzUtcb1BL2hB4YQBN8xx+zcW+dHYnkw12PENfvv1Wi2eEPMyXBC11u908rGWP
+MwwaI2gBwwQAnWFayrXGptmw/HD7a8Qa+jIpimoxOUIuwxoaRrfUBiwH6Q36yA908TwvhAVM
+v3nJnb6W1E1Bnsr+fCJCX8VWQ4W+EiW1vCPvVnu5er1taL0Bw2wBrN0WiBYP2mE0MOtKXysq
+Im5NPb3zq4dUyFjjXqNBYfUcKpfxQr9feHhExOPxbreUK5XCAACBAAwtwIzVajyOu9HYBAWs
+van72UefkiRp2vcaRypTrxuyg+OpwuHMzMZG34nHSyWAUqBdqwECxkvAYDc7IBQKudDYLbZd
+iXzTzD46IUmfbTcaKl87K+06eAASKRQK/Y3jB1I8v8uiFAFqYBivMDRWq4UgC64rpEnndzLP
+vkjvnyBIy7bvb9udszo38JWCRDL+gr//+DgSh5tPU1SrxUNXcMEw3lfEoTB90m0BA5i8Y//+
+OH2wjhQbdvb7J5+fwYCd+4pAMk2/37+RLsTjtCAQBMFjAPaxBng+ltIlXXJZKZdj7YScCh6n
+7x6cirHy0x+e/PbTWT3/l68MpBn0Z2bS/XhOwHiC57EwgAPWxhrlgCNpEjv9EgLeuHz1VQn4
+4K2rr116iam+/PZzX7nyP4Ku/Os3iE/cCzS/vfvLZwebRdPOfnWYfu+s5wRwuPm4nYLCmpBg
+0H+YLtQxDNBQWLstYJs1UA6E8LKmafMXFfDO+2++++Xrr0rYH9Taa0xbV54A8AvEMCbgD8iW
+MEJonCIeojYiFXGiTbVVsttKuyuNZjRayQ9sLNtgk5TGwRhi3qQB0mTSxwJmTAgkLjEJJHXi
+MCkkdRpPaAykXcjYycRWCiZe1IiJzSOTCRIf9pxzL8fGNYnbrdLu/wO+HI7v43f/93+Oj0ny
++/3p+eyotGjM/K1+f4R9bPNzd7/kpOFhOLjhnSsXTo5cW55tbjpR9+XE/cG52dl/PPzTkOHS
+yFILiCXHYxQWMMFYHvV9BUpXV1/nBHgep6d7YQUznPn61tnwFMvhxH8/OMlEph8ePOYnAqP5
+YfCjAkuFXbnsyLuIfyFYMnor/kbt9Svjhs8eja7W1dY1XRgefzzS9hx4XRp5tDw7u7q6+q/L
+Ho9neWoKvoDN7smJiV4ANjlxe/ih0Qoq2NClU19/HZ5iHH+kyCVy8Wn/ZGD0tOgqAR3KJBOR
+TzT2pWBbcIKdvjL0mWN+daHpSE3T/ZPjg8Zvvz1rNrQsA62F5vqjJ04crV9YnR0dHZ33LC/P
+t0yOjXX2to9Nj5lun/eCkn/GbOjpvNMRlmLMSF7pCUQaHefEKwaLSY8IlkKCsaMH+8/Tw0Pm
+R7PN/vramtove1w+Y4f5jHVqFmo1NdU11Bwp0OkqA7V19IWny575+fHpyfbuzsnzY/2G/sEh
+Oyj5l8ydNwfCBsrCSGDbQN3dii/xFYMRWyKCZSCvnUTUYP9+4fVzZ02e1aMN9U0N6sZn5+qd
+Zw0tnlnIBbACldWNVVVVjfrqyoCmtqaufr5levryTePwwwnTkME+ZHfdOmu+1Nd+071xLpa9
+lQyUUFzqF+YvECwhH9WK6MHeGT7fe3NmtBnkUn2DrOGTTz68sTQ1u1DfVFdTq6nUV2lFEoFA
+UCTWNuoCtaBpwXP54cQX7rbPTxrMZrN9yHXq1JlLA5e/uL19A0BcLBnodAqpXxJ+SWA4slLi
+gVfUYL8bPj/e+c3s0boGTaVG+1//0/zg6WozyK1akFyNWokAR5FIpQ/UNNTN+/578gv3ymSH
+HXwVYrebu7p7Lt26fNn9dkSARAiWjRt+YWA4ogeLbbvw+rjxm9UTDUf00irp89WFj+uglkZT
+UF0lRlAw5HI5+KFoDNS0Pr3++aft3hX3bbDC32Oy27s6b5nPTlz2OXZtCsb8fw7GpwfB/s39
+5en71h0LTbXVWoHo+Ucfq6sRV6BSr5UgLcpLIpHKJTK9RlO/PP15r8874+4AAcEuD5jPjvU5
+rr0VPRgf1I48RnxhFg0P+knZqcE7mpqdixpTC9FrEuiaseFS01IZjJxkgr0BLCGJUcjZnRli
+QsvOQZ8HOClZFBifiMvZzWFmhRStBH5eNumYy8iE+wbdmXGkVA46TAyZYQmpmTTinZXXT590
+TDU3VJZKiwTPn6oE1Rrk1aiVYy7SSyiUSlU6TYNn+KHX613xgi+Pulwue9dE95lbY7eXrNuj
+BvMTBIPlR5GIHHJ2ckGlW68p8MqAXmYiwI0HrzvJroVBUA4XtTCT00PAsqhd+lNIDTYHNHBB
+Ox22kWBbiZz1A/Mpr3jYkATOLB6KgmET7TsGysWTXRkxLASWnJKYQfzL0pfnrz6eqj+iL5ZL
+5QJ1gVavI70kCAoF8pIKxWKxTF2te+AeHrzt9q4Yu3sBmLl7rPvMQJ91xLo3ajAWHzWj4Cav
+T0IY2Ji8AnS6KbFoorRhOp6JW1gsDAa748hBh0KbRB7VgsBYwb1tpbIb+YDtONSaQPOvV91U
+JIeSiwSjMQszid/+5dynf/ZOHQ1UgfwBOaYLVOl0gQK9VgqQMBf0AlwisVCkUvtb+m/3Q7C+
+zm4A1jc5cKt/xGqwvp0QLVg6UMOxE7yNEQoWT4HlUucaDFImyx8SCAx74UAYHKgZTx6Lj8Bw
+4FtFNdPWxanuycHbgtUIdkZGJvF7x8wfr3TsaNJpwSMHxQLVjdXVuiqxHPhJqEDpJRTCLaFW
+qWnp6O93r6wY29u7XT2u9ulTA4NWw9CI47VowVAkFlK5k7wJWEywawrJthsVGrKNw9i9bR0M
+ezFpuRksPHNnQDCUTP58KBN+4PSEDWBZOPfgDDuPerwZ2fkUGDx7gvhnX8u5T+9dbypXIDCJ
+QN2q1jeqAR/wowJtw3STCIsEcv3RG139RvfKTNvERJfLZhsbu9MBvADYrh8Als3Hz1ZSZDB8
+hUzQNQ5tJ0Iw8vzz0GCwZR2MfJDQsMFOR3RBgcS8WD4fg6XAvEomtzM2gOWQMPlk93REijI1
+NR1PKwCY96Jl7Nvv6g8qhGJIJBC0arSNWhGoV0IqxECrSFAkBz8E2oJjDR8+6zIa3d6ZtrGJ
+jh5b1/TEHednZgB27c2oweg0PNK/DIxFC9atbXh1ITNsWoEOwyEb89azJ8OPlSkZXAfTcNIE
+wVJxW8i9xIfBYG7f0tqVWzs+kEEwYZFQpW7Qi2RSEUkG3SRyAeACWkXlmmOt75a996zDaPR6
+L96fHrZ19PSe/8prNbvsAOyNqMGSqAbOy8GSMQ0EozhZeEZJgrFx4YKByl4uBcZN2wCGx0aq
+GoSD0UETzuOtFDU7FKzfNzjV/KelI8eBjVyiUMlkumMiiVBcLIIhJpNLAEJd0NpaUCoQFO9r
+s40bV1ZuDE939twxjX9qWzKccdntPwCMHkM1FL4UjBsbBpaOZxghGZaDLw/fhkwKDCcYlkGR
+SiVqOFh+KHpKhJn+P7X5Hj9ornv21wqRUCrTqiRFWm1BgUAqLJYVAy44vy+CWvqC1oAaVLDi
+Yll5W0ev22u5cX6y697NkfF2h9Xc02My/RCwNGzzYjDcFYMl4wsNBcsmrygGRQITFUkKjBMR
+jNoPMwwMG7HRlCIrEth9J+/B0dY9lY0isUolAmOjSCs/XC0AEwixRF4kh8lVVdC6p7oKuIkB
+l+y4vr9vfMW749nnw7ar/Vb74IjB1WFzmUasrwIsB9eWUDCUU1wWFahMxlNgKZHBYrmIJwwM
+J2QSHkTCwfaeM/IenIAzVVUpGBph3RJJ5AG1ADyMUgnQ0ur2aCrLpYIiIXhCi2UA7HnPSfft
+G/P3Hw5cHbcY7CbDkK2r467JynvzFYBl4WoVBGPDo4QH58VgcUg1MTIYvi8RwLbfP2l98GGl
+rlJXrkSVHg6LYDAEVQwkl6x6jyZQDthUYuRVLFMojn9y6r57Zn7qwvkvxv9mNfe7DPaOvns2
+p5W362cDy/8+WP5LMuzFYJmbgr3RdgWAlZfr9Kri4mIRRSYorxYIRPqAJqAXCQRSsVypkiIv
+mUL2h+E/G2fmPX8fG3Mvzg31dLgMpr6T92y+z3iv/bwZxmWFRHp8NGApPxzsNd6Y68GH1ftL
+lUoZJQbIJJLDlQWaPdUygUCO5hZSlVKMvJTH1Xd6LaOewLN+p2XO4eoCYN6rJwfcVgMv7hWA
+ZZBgkWpYPhETjLiEF4Dhr0TiI4LhQTQvAhjxdvtXO5ory2RKhQKJkWQCUeCwSgAKlxhyiUVi
+mUoEvRQK5bD1uqf+A92cw8eb493q7bjLW7ly1e0wOH9DvAKwPHwlEUbJsNgUDH/AyooMhqfH
+kcC28yYvLhSoK1RlZUqFDJiJUEiBlpgM2FAsBEMo5Dr+fOajuoKD79cuuUCGOW+es9nmVk6P
+rznszr0/EVjhi8DYfmwbBKMGNXa0YLhI0SKC4TGBGQnszaW28QXNvv2lpaUqFTSjyAAUjmIQ
+sv1KmVKpLKs4VFFW8sF7f12655ybM0303vN+NzPumOOZnG/9H8GyowEjdqKNsJl+DBclRBRg
+aaHnlU5EAsO6yAgvFLGoxZgE3trMR8d0Jfv374dkKiXKM1GYlkwmUu2XAS+Qh4cOvvfuu3+3
+Dvjm5oxX7tgscxaHw+Jz+Xb9eLCskEtLS38hGAOXYzz688M+MIF90DYDY4Q+kczNwTjUQgpO
+RwxGbB+8/s2xyn0lajVphvKMQitGIUPFq3h/qQJ4VVQcOLhv3+G/Dd6zzM2du3rXt7bm4F2z
+OF28hB8PlhP81JfMwkuAkcCoZ3IrEsvkrl9Wmh/hxFG6LP9mYH5OLpyXpuP1tUhguIhtycUL
+cMH/b/i1/bsdxyrf23cQkAGzKurZJNEwl0KpKCspUwKvUgD2fuC6q3/Rsma0OXlra9d8DovJ
+tJf40WDUDWfl8HOz6dSazmZgRPb6qhYHCKCg4VYWg8anZcLlrsLIYIg9hVpI201sCoa/Ec8v
+jEdFIPT/G/5jcEd96+EDFepy0gyhqVCmQTYUsHopSkuUFRUVhwDYoZrrvpk1yxrPabq2aOH5
+LJa7zjd+NBiqTGHBpW0GFsMK75uHLzAk+N8DC3sftNkcDK3Ahe+Ril95LZ75px8HDiorSsrL
+SwAayjQy1VSwasGAryUHQM0/dKDkwPsf/WUNeK05bb7FxYtO3+LFe78hIga6mYUhYPhZwJUi
+jyxcODKyqQqOZDAYLsLsfKySnhKsS4xQjHxaHFUZsQAfTbyCvTjYMXQBcRv2jQlZ/kebqZh+
+u3OHxzM//7RGdwCY7QNmJBrKNRAVIGD1Kqs4eAiCHfjD4etAa23RYru7trjIM/Ge+GzbiU0y
+jE5HuY8zjE6nc4MZBn5D5SgNyiKUHPit1k404Id0pYFtvPaSRd39ncmxsJm6H3kYcksGNUrS
+6dgFeIC+eUQGi6Qmlamj0FGGgVfoiyNzC6XPJ7jgTwwMFndxbcqzvOwZnV+o1ZUqSsuhGVYD
+UUpGRdmBgyRYDQJ74rsz82RxzWmyPLnrfC0yGDsNRGywISENRkzoX+Oo692dmJjITEUgJAE7
+pGsM3GZj9yQGk5kFUTc052YwU1JQO4pY/Ee8N3i1qdnM7FR8SsGjxOHuOPLAYRhJ1GHSgu1v
+zTwCYIBsfnS+WbOvDJmBpxOz/W/79fPithHHYXiEDjsEWkkRaKBikKDooltaYYggpk7ZwMLa
+LOyh1zKka1hXlfES6KY/LvYpkEP/ht5Nzu02PvRajHDcXHzYg0zYwgwMm6sO/c5Kzm5buuQ+
+fjHo/vAZaTxsOh0Nwet0Mn+lBiZf/ywk//XPtXix+Bxp1aMpTKzuzS+rHx8OvnrcHw0ATamN
+jjYNh6N8OJk8v3emvMTypZBSLhfTcrn4GGnV/ensshbr7sLOdp0P7z39+vj4KM8BDRptmmT5
+ZPT8+7MKpKq1FBWbvl4zAQPTLFrNVkqsiElRXBZdZND07pP+lyffZPngH43zYT5/JaGKcyn4
+y4Uo18sPkG65f83qiZlBD8TaBvGjINn79uRxf5Dl1w2y8akaWBNb/jEr+fknSL+st/M3amIJ
+CuPdorBIEISYuGDWPx7mz7KrcvUbzy9kU3n+23nJZAdp184Oss6VWNElYWTHvR4NbIgSaiV7
++enJUdaYZZMfzip+lWTV78uSCf4R0i7D9JHzdr5aFbuUKqbUsSEXCsIgvbuXwZUifwYNxuUF
+rxNysS4Z4w80HJhhehGyHsG3skgwSAUBYEEOZLkBtdM7e+N8MsmywU9ncgM2fQFe4jOkJxgm
+HolnrUuYWL0tR2XVOSBoJXceqr/djZYQHLSYeIB0TC2MhKHn7rdasZpYM64buXYYuukX/IKL
+dzEmP0VatmP6Hg5DinHabdl0s7CbYI7juiQ6lDe9uAgQpOeZ9CNCQkoxsVwaNBu7eSgBzMbt
+6lpLMNkhqE7T1z4GsjDEwEaD2gzQrgtwXCknwIK4YDFCGoPBxoAMEwjYrtE2OZTGFQcpwUvl
+xQ8DhAyNxWBjpu97UBTVcEotsOtcm7idSigp0SqFkKztI9PcQZqPDPIhUFNoNVlz5U8Oqnpe
+RYtxWSaG4ZmGAtN6ZHU1G6ApMiVGMd2vuOJirV4pJevaKIr8BkxzNOidmiIDMQLzkkJwznrt
+9kElDlPPJNF/B7YdG5CBGE4PKthX2Woncacq2ykx8JXXv8G2Y6u/nF7SacdxYlFi7e8ngWdi
+gj1/6/W/lw0Mh9NQ9zRqE9PwMI6A65bzuBWDIqyCB2gB123z2r7Mmm9mk19z3eK1FQMylQ/B
+w3gfrq3Zpvfm2qo1Ia37G8S93Ux/GSLZAAAAAElFTkSuQmCC
+
+----------------CHOPCHOP0--
+
diff --git a/comm/mail/base/test/browser/files/sampleContent.html b/comm/mail/base/test/browser/files/sampleContent.html
new file mode 100644
index 0000000000..05528ac9f1
--- /dev/null
+++ b/comm/mail/base/test/browser/files/sampleContent.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Sample Content</title>
+    <link rel="icon" href="tb-logo.png" />
+  </head>
+  <body>
+    <p>This is a page of sample content for tests.</p>
+    <p><a href="https://www.thunderbird.net/">Link to a web page</a></p>
+    <form>
+      <input type="text" />
+    </form>
+    <p><img src="tb-logo.png" width="304" height="84" /></p>
+  </body>
+</html>
diff --git a/comm/mail/base/test/browser/files/selectionWidget.js b/comm/mail/base/test/browser/files/selectionWidget.js
new file mode 100644
index 0000000000..b1e5f98e25
--- /dev/null
+++ b/comm/mail/base/test/browser/files/selectionWidget.js
@@ -0,0 +1,225 @@
+/* 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/. */
+
+var { SelectionWidgetController } = ChromeUtils.import(
+  "resource:///modules/SelectionWidgetController.jsm"
+);
+
+/**
+ * Data for a selectable item.
+ *
+ * @typedef {object} ItemData
+ * @property {HTMLElement} element - The DOM node for the item.
+ * @property {boolean} selected - Whether the item is selected.
+ */
+
+class TestSelectionWidget extends HTMLElement {
+  /**
+   * The selectable items for this widget, in DOM ordering.
+   *
+   * @type {ItemData[]}
+   */
+  items = [];
+  #focusItem = this;
+  #controller = null;
+
+  connectedCallback() {
+    let widget = this;
+
+    widget.tabIndex = 0;
+    widget.setAttribute("role", "listbox");
+    widget.setAttribute("aria-label", "Test selection widget");
+    widget.setAttribute(
+      "aria-orientation",
+      widget.getAttribute("layout-direction")
+    );
+    let model = widget.getAttribute("selection-model");
+    widget.setAttribute("aria-multiselectable", model == "browse-multi");
+
+    this.#controller = new SelectionWidgetController(widget, model, {
+      getLayoutDirection() {
+        return widget.getAttribute("layout-direction");
+      },
+      indexFromTarget(target) {
+        for (let i = 0; i < widget.items.length; i++) {
+          if (widget.items[i].element.contains(target)) {
+            return i;
+          }
+        }
+        return null;
+      },
+      getPageSizeDetails() {
+        if (widget.hasAttribute("no-pages")) {
+          return null;
+        }
+        let itemRect = widget.items[0]?.element.getBoundingClientRect();
+        if (widget.getAttribute("layout-direction") == "vertical") {
+          return {
+            itemSize: itemRect?.height ?? null,
+            viewSize: widget.clientHeight,
+            viewOffset: widget.scrollTop,
+          };
+        }
+        return {
+          itemSize: itemRect?.width ?? null,
+          viewSize: widget.clientWidth,
+          viewOffset: Math.abs(widget.scrollLeft),
+        };
+      },
+      setFocusableItem(index, focus) {
+        widget.#focusItem.tabIndex = -1;
+        widget.#focusItem =
+          index == null ? widget : widget.items[index].element;
+        widget.#focusItem.tabIndex = 0;
+        if (focus) {
+          widget.#focusItem.focus();
+          widget.#focusItem.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+          });
+        }
+      },
+      setItemSelectionState(index, number, selected) {
+        for (let i = index; i < index + number; i++) {
+          widget.items[i].selected = selected;
+          widget.items[i].element.classList.toggle("selected", selected);
+          widget.items[i].element.setAttribute("aria-selected", selected);
+        }
+      },
+    });
+  }
+
+  #createItemElement(text) {
+    for (let { element } of this.items) {
+      if (element.textContent == text) {
+        throw new Error(`An item with the text "${text}" already exists`);
+      }
+    }
+    let element = this.ownerDocument.createElement("span");
+    element.textContent = text;
+    element.setAttribute("role", "option");
+    element.tabIndex = -1;
+    element.draggable = this.hasAttribute("items-draggable");
+    return element;
+  }
+
+  /**
+   * Create new items and add them to the widget.
+   *
+   * @param {number} index - The starting index at which to add the items.
+   * @param {string[]} textList - The textContent for the items to add. Each
+   *   entry in the array will create one item in the same order.
+   */
+  addItems(index, textList) {
+    for (let [i, text] of textList.entries()) {
+      let element = this.#createItemElement(text);
+      this.insertBefore(element, this.items[index + i]?.element ?? null);
+      this.items.splice(index + i, 0, { element });
+    }
+    this.#controller.addedSelectableItems(index, textList.length);
+    // Force re-layout. This is needed for the items to be able to enter the
+    // focus cycle immediately.
+    this.getBoundingClientRect();
+  }
+
+  /**
+   * Remove items from the widget.
+   *
+   * @param {number} index - The starting index at which to remove items.
+   * @param {number} number - How many items to remove.
+   */
+  removeItems(index, number) {
+    this.#controller.removeSelectableItems(index, number, () => {
+      for (let { element } of this.items.splice(index, number)) {
+        element.remove();
+      }
+    });
+  }
+
+  /**
+   * Move items within the widget.
+   *
+   * @param {number} from - The index at which to move items from.
+   * @param {number} to - The index at which to move items to.
+   * @param {number} number - How many items to move.
+   * @param {boolean} reCreate - Whether to recreate the item when
+   *   moving it. Otherwise the existing item is used.
+   */
+  moveItems(from, to, number, reCreate) {
+    if (reCreate == undefined) {
+      throw new Error("Missing reCreate argument");
+    }
+    this.#controller.moveSelectableItems(from, to, number, () => {
+      let moving = this.items.splice(from, number);
+      for (let [i, item] of moving.entries()) {
+        item.element.remove();
+        if (reCreate) {
+          let text = item.element.textContent;
+          item = { element: this.#createItemElement(text) };
+        }
+        this.insertBefore(item.element, this.items[to + i]?.element ?? null);
+        this.items.splice(to + i, 0, item);
+      }
+    });
+  }
+
+  /**
+   * Selects a single item via the SelectionWidgetController.selectSingleItem
+   * method.
+   *
+   * @param {number} index - The index of the item to select.
+   */
+  selectSingleItem(index) {
+    this.#controller.selectSingleItem(index);
+  }
+
+  /**
+   * Changes the selection state of an item via the
+   * SelectionWidgetController.setItemSelected method.
+   *
+   * @param {number} index - The index of the item to set the selection state
+   *   of.
+   * @param {boolean} select - Whether to select the item.
+   */
+  setItemSelected(index, select) {
+    this.#controller.setItemSelected(index, select);
+  }
+
+  /**
+   * Get the list of selected item's indices.
+   *
+   * @returns {number[]} - The indices for selected items.
+   */
+  selectedIndices() {
+    let indices = [];
+    for (let i = 0; i < this.items.length; i++) {
+      // Assert that the item has a defined selection state set in
+      // setItemSelectionState.
+      if (typeof this.items[i].selected != "boolean") {
+        throw new Error(`Item ${i} has an undefined selection state`);
+      }
+      // Assert that our stored selection state matches that returned by the
+      // controller API.
+      let itemIsSelected = this.#controller.itemIsSelected(i);
+      if (this.items[i].selected != itemIsSelected) {
+        throw new Error(
+          `itemIsSelected(${i}): "${itemIsSelected}" does not match stored selection state "${this.items[i].selected}"`
+        );
+      }
+      if (itemIsSelected) {
+        indices.push(i);
+      }
+    }
+    return indices;
+  }
+
+  /**
+   * Get the return of SelectionWidgetController.getSelectionRanges
+   */
+  getSelectionRanges() {
+    return this.#controller.getSelectionRanges();
+  }
+}
+
+customElements.define("test-selection-widget", TestSelectionWidget);
diff --git a/comm/mail/base/test/browser/files/selectionWidget.xhtml b/comm/mail/base/test/browser/files/selectionWidget.xhtml
new file mode 100644
index 0000000000..e5f66fc30c
--- /dev/null
+++ b/comm/mail/base/test/browser/files/selectionWidget.xhtml
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for SelectionWidgetController</title>
+  <style>
+    test-selection-widget {
+      display: flex;
+      align-items: start;
+      border: 1px solid black;
+      width: 600px;
+      height: 600px;
+      overflow: auto;
+    }
+
+    test-selection-widget[layout-direction="vertical"] {
+      flex-direction: column;
+    }
+
+    /* Fit 20 items in the view. */
+    test-selection-widget[layout-direction="vertical"] > * {
+      height: 30px;
+    }
+    test-selection-widget[layout-direction="horizontal"] > * {
+      width: 30px;
+      writing-mode: vertical-rl;
+    }
+
+    test-selection-widget > * {
+      padding-inline: 10px;
+      box-sizing: border-box;
+      border: 1px solid grey;
+      white-space: nowrap;
+      flex: 0 0 auto;
+    }
+
+    .selected {
+      background: pink;
+    }
+
+    :focus {
+      outline: 3px dashed black;
+      outline-offset: -3px;
+    }
+
+    :focus-visible {
+      outline-color: blue;
+    }
+  </style>
+  <!-- Load the SelectionWidgetController class inline if testing in a browser.
+  <script src="../../../../modules/SelectionWidgetController.jsm"></script>
+  -->
+  <script defer="defer" src="selectionWidget.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/tb-logo.png b/comm/mail/base/test/browser/files/tb-logo.png
new file mode 100644
index 0000000000..aac56e2546
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tb-logo.png
diff --git a/comm/mail/base/test/browser/files/tree-element-test-common.js b/comm/mail/base/test/browser/files/tree-element-test-common.js
new file mode 100644
index 0000000000..6f22962aca
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-common.js
@@ -0,0 +1,73 @@
+/* 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/. */
+
+// FIXME: Wrap the whole method around the document load listener to prevent the
+// undefined state of the "tree-view-table-row" element. This is due to the .mjs
+// nature of the class file.
+window.addEventListener("load", () => {
+  class AlternativeCardRow extends customElements.get("tree-view-table-row") {
+    static ROW_HEIGHT = 80;
+
+    connectedCallback() {
+      if (this.hasConnected) {
+        return;
+      }
+
+      super.connectedCallback();
+
+      this.cell = this.appendChild(document.createElement("td"));
+    }
+
+    get index() {
+      return super.index;
+    }
+
+    set index(index) {
+      super.index = index;
+      this.cell.textContent = this.view.getCellText(index, {
+        id: "GeneratedName",
+      });
+    }
+  }
+  customElements.define("alternative-row", AlternativeCardRow, {
+    extends: "tr",
+  });
+
+  class TestView {
+    values = [];
+
+    constructor(start, count) {
+      for (let i = start; i < start + count; i++) {
+        this.values.push(i);
+      }
+    }
+
+    get rowCount() {
+      return this.values.length;
+    }
+
+    getCellText(index, column) {
+      return `${column.id} ${this.values[index]}`;
+    }
+
+    isContainer() {
+      return false;
+    }
+
+    isContainerOpen() {
+      return false;
+    }
+
+    selectionChanged() {}
+
+    setTree() {}
+  }
+
+  const tree = document.getElementById("testTree");
+  tree.table.setBodyID("testBody");
+  tree.addEventListener("select", () => {
+    console.log("select event, selected indices:", tree.selectedIndices);
+  });
+  tree.view = new TestView(0, 150);
+});
diff --git a/comm/mail/base/test/browser/files/tree-element-test-header.js b/comm/mail/base/test/browser/files/tree-element-test-header.js
new file mode 100644
index 0000000000..37d3b583e4
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-header.js
@@ -0,0 +1,64 @@
+/* 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/. */
+
+// FIXME: Wrap the whole method around the document load listener to prevent the
+// undefined state of the "tree-view-table-row" element. This is due to the .mjs
+// nature of the class file.
+window.addEventListener("load", () => {
+  class TestCardRow extends customElements.get("tree-view-table-row") {
+    static ROW_HEIGHT = 50;
+
+    static COLUMNS = [
+      {
+        id: "testCol",
+        // Ensure that a table header is rendered in order to verify that the
+        // header's presence doesn't cause issues with scroll calculations.
+        l10n: {
+          header: "threadpane-column-header-subject",
+          menuitem: "threadpane-column-label-subject",
+        },
+      },
+    ];
+
+    connectedCallback() {
+      if (this.hasConnected) {
+        return;
+      }
+
+      super.connectedCallback();
+
+      this.cell = this.appendChild(document.createElement("td"));
+      let container = this.cell.appendChild(document.createElement("div"));
+
+      this.d1 = container.appendChild(document.createElement("div"));
+      this.d1.classList.add("d1");
+
+      this.d2 = this.d1.appendChild(document.createElement("div"));
+      this.d2.classList.add("d2");
+
+      this.d3 = this.d1.appendChild(document.createElement("div"));
+      this.d3.classList.add("d3");
+    }
+
+    get index() {
+      return super.index;
+    }
+
+    set index(index) {
+      super.index = index;
+      this.d2.textContent = this.view.getCellText(index, {
+        id: "GeneratedName",
+      });
+      this.d3.textContent = this.view.getCellText(index, {
+        id: "PrimaryEmail",
+      });
+      this.dataset.value = this.view.values[index];
+    }
+  }
+  customElements.define("test-row", TestCardRow, { extends: "tr" });
+
+  const tree = document.getElementById("testTree");
+  tree.setAttribute("rows", "test-row");
+  tree.table.setColumns(TestCardRow.COLUMNS);
+});
diff --git a/comm/mail/base/test/browser/files/tree-element-test-header.xhtml b/comm/mail/base/test/browser/files/tree-element-test-header.xhtml
new file mode 100644
index 0000000000..522e3e5c60
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-header.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.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/. -->
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the tree-view custom element</title>
+  <link rel="stylesheet" href="chrome://messenger/skin/shared/tree-listbox.css" />
+  <!-- Localization is necessary for the table header to display text. -->
+  <link rel="localization" href="messenger/about3Pane.ftl" />
+  <style>
+    :root {
+      --color-gray-20: gray;
+      --selected-item-color: rebeccapurple;
+      --selected-item-text-color: white;
+    }
+
+    /* We want a total visible row area of 630px, but we need to account for the
+     * height of the header as well. */
+    #testTree {
+      height: calc(var(--tree-header-table-height) + 630px);
+    }
+
+    .tree-view-scrollable-container {
+      scroll-behavior: unset;
+    }
+
+    tr[is="test-row"] td > div {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+
+    tr[is="test-row"] td div.d1 {
+      flex: 1;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d2 {
+      line-height: 1.2;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d3 {
+      line-height: 1.2;
+      font-size: 13px;
+    }
+  </style>
+  <script type="module" src="chrome://messenger/content/tree-view.mjs"></script>
+  <script src="tree-element-test-header.js"></script>
+  <script src="tree-element-test-common.js"></script>
+</head>
+<!-- We force layout-table in order to ensure that table header rows are
+     displayed.-->
+<body class="layout-table">
+  <input id="before" placeholder="something to focus on" />
+  <tree-view id="testTree" data-select-delay="250"/>
+  <input id="after" placeholder="something to focus on" />
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/tree-element-test-levels.js b/comm/mail/base/test/browser/files/tree-element-test-levels.js
new file mode 100644
index 0000000000..7ea7eb8232
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-levels.js
@@ -0,0 +1,118 @@
+/* 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/. */
+
+/* globals PROTO_TREE_VIEW */
+
+// FIXME: Wrap the whole method around the document load listener to prevent the
+// undefined state of the "tree-view-table-row" element. This is due to the .mjs
+// nature of the class file.
+window.addEventListener("load", () => {
+  class TestCardRow extends customElements.get("tree-view-table-row") {
+    static ROW_HEIGHT = 30;
+
+    static COLUMNS = [
+      {
+        id: "testCol",
+      },
+    ];
+
+    connectedCallback() {
+      if (this.hasConnected) {
+        return;
+      }
+
+      super.connectedCallback();
+
+      this.cell = this.appendChild(document.createElement("td"));
+      let container = this.cell.appendChild(document.createElement("div"));
+
+      this.threader = container.appendChild(document.createElement("button"));
+      this.threader.textContent = "↳";
+      this.threader.classList.add("tree-button-thread");
+
+      this.twisty = container.appendChild(document.createElement("div"));
+      this.twisty.textContent = "v";
+      this.twisty.classList.add("twisty");
+
+      this.d2 = container.appendChild(document.createElement("div"));
+      this.d2.classList.add("d2");
+    }
+
+    get index() {
+      return super.index;
+    }
+
+    set index(index) {
+      super.index = index;
+      this.id = this.view.getRowProperties(index);
+      this.classList.remove("level0", "level1", "level2");
+      this.classList.add(`level${this.view.getLevel(index)}`);
+      this.d2.textContent = this.view.getCellText(index, { id: "text" });
+    }
+  }
+  customElements.define("test-row", TestCardRow, { extends: "tr" });
+
+  class TreeItem {
+    _children = [];
+
+    constructor(id, text, open = false, level = 0) {
+      this._id = id;
+      this._text = text;
+      this._open = open;
+      this._level = level;
+    }
+
+    getText() {
+      return this._text;
+    }
+
+    get open() {
+      return this._open;
+    }
+
+    get level() {
+      return this._level;
+    }
+
+    get children() {
+      return this._children;
+    }
+
+    getProperties() {
+      return this._id;
+    }
+
+    addChild(treeItem) {
+      treeItem._parent = this;
+      treeItem._level = this._level + 1;
+      this.children.push(treeItem);
+    }
+  }
+
+  let testView = new PROTO_TREE_VIEW();
+  testView._rowMap.push(new TreeItem("row-1", "Item with no children"));
+  testView._rowMap.push(new TreeItem("row-2", "Item with children"));
+  testView._rowMap.push(new TreeItem("row-3", "Item with grandchildren"));
+  testView._rowMap[1].addChild(new TreeItem("row-2-1", "First child"));
+  testView._rowMap[1].addChild(new TreeItem("row-2-2", "Second child"));
+  testView._rowMap[2].addChild(new TreeItem("row-3-1", "First child"));
+  testView._rowMap[2].children[0].addChild(
+    new TreeItem("row-3-1-1", "First grandchild")
+  );
+  testView._rowMap[2].children[0].addChild(
+    new TreeItem("row-3-1-2", "Second grandchild")
+  );
+  testView.toggleOpenState(1);
+  testView.toggleOpenState(4);
+  testView.toggleOpenState(5);
+
+  let tree = document.getElementById("testTree");
+  tree.table.setBodyID("testBody");
+  tree.setAttribute("rows", "test-row");
+  tree.table.setColumns(TestCardRow.COLUMNS);
+  tree.addEventListener("select", () => {
+    console.log("select event, selected indices:", tree.selectedIndices);
+  });
+  tree.view = testView;
+});
diff --git a/comm/mail/base/test/browser/files/tree-element-test-levels.xhtml b/comm/mail/base/test/browser/files/tree-element-test-levels.xhtml
new file mode 100644
index 0000000000..1175887e74
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-levels.xhtml
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the tree-view custom element</title>
+  <link rel="stylesheet" href="chrome://messenger/skin/shared/tree-listbox.css" />
+  <style>
+    :root {
+      --color-gray-20: gray;
+      --selected-item-color: rebeccapurple;
+      --selected-item-text-color: white;
+    }
+
+    .tree-view-scrollable-container {
+      height: 630px;
+      scroll-behavior: unset;
+    }
+
+    tr[is="test-row"] td > div {
+      display: flex;
+      align-items: center;
+    }
+
+    button.threader {
+      width: 1em;
+      height: 1em;
+    }
+
+    div.twisty {
+      width: 1em;
+      height: 1em;
+    }
+
+    tr[is="test-row"].children button.threader {
+      display: inline-block;
+    }
+
+    tr[is="test-row"] button.threader {
+      display: hidden;
+    }
+
+    tr[is="test-row"].children div.twisty {
+      background-color: green;
+    }
+
+    tr[is="test-row"].children.collapsed div.twisty {
+      background-color: red;
+    }
+
+    tr[is="test-row"].level1 .d2 {
+      padding-inline-start: 1em;
+    }
+
+    tr[is="test-row"].level2 .d2 {
+      padding-inline-start: 2em;
+    }
+  </style>
+  <script type="module" defer="defer" src="chrome://messenger/content/tree-view.mjs"></script>
+  <script defer="defer" src="chrome://messenger/content/jsTreeView.js"></script>
+  <script defer="defer" src="tree-element-test-levels.js"></script>
+</head>
+<body>
+  <tree-view id="testTree" data-select-delay="250"/>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/tree-element-test-no-header.js b/comm/mail/base/test/browser/files/tree-element-test-no-header.js
new file mode 100644
index 0000000000..8a515be5e2
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-no-header.js
@@ -0,0 +1,58 @@
+/* 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/. */
+
+// FIXME: Wrap the whole method around the document load listener to prevent the
+// undefined state of the "tree-view-table-row" element. This is due to the .mjs
+// nature of the class file.
+window.addEventListener("load", () => {
+  class TestCardRow extends customElements.get("tree-view-table-row") {
+    static ROW_HEIGHT = 50;
+
+    static COLUMNS = [
+      {
+        id: "testCol",
+      },
+    ];
+
+    connectedCallback() {
+      if (this.hasConnected) {
+        return;
+      }
+
+      super.connectedCallback();
+
+      this.cell = this.appendChild(document.createElement("td"));
+      let container = this.cell.appendChild(document.createElement("div"));
+
+      this.d1 = container.appendChild(document.createElement("div"));
+      this.d1.classList.add("d1");
+
+      this.d2 = this.d1.appendChild(document.createElement("div"));
+      this.d2.classList.add("d2");
+
+      this.d3 = this.d1.appendChild(document.createElement("div"));
+      this.d3.classList.add("d3");
+    }
+
+    get index() {
+      return super.index;
+    }
+
+    set index(index) {
+      super.index = index;
+      this.d2.textContent = this.view.getCellText(index, {
+        id: "GeneratedName",
+      });
+      this.d3.textContent = this.view.getCellText(index, {
+        id: "PrimaryEmail",
+      });
+      this.dataset.value = this.view.values[index];
+    }
+  }
+  customElements.define("test-row", TestCardRow, { extends: "tr" });
+
+  const tree = document.getElementById("testTree");
+  tree.setAttribute("rows", "test-row");
+  tree.table.setColumns(TestCardRow.COLUMNS);
+});
diff --git a/comm/mail/base/test/browser/files/tree-element-test-no-header.xhtml b/comm/mail/base/test/browser/files/tree-element-test-no-header.xhtml
new file mode 100644
index 0000000000..7605279ba6
--- /dev/null
+++ b/comm/mail/base/test/browser/files/tree-element-test-no-header.xhtml
@@ -0,0 +1,54 @@
+<?xml version="1.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/. -->
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the tree-view custom element</title>
+  <link rel="stylesheet" href="chrome://messenger/skin/shared/tree-listbox.css" />
+  <style>
+    :root {
+      --color-gray-20: gray;
+      --selected-item-color: rebeccapurple;
+      --selected-item-text-color: white;
+    }
+
+    /* We want a total visible row area of 630px. Intentionally avoid leaving
+     * room for a header. */
+    .tree-view-scrollable-container {
+      height: 630px;
+      scroll-behavior: unset;
+    }
+
+    tr[is="test-row"] td > div {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+
+    tr[is="test-row"] td div.d1 {
+      flex: 1;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d2 {
+      line-height: 1.2;
+    }
+
+    tr[is="test-row"] td div.d1 > div.d3 {
+      line-height: 1.2;
+      font-size: 13px;
+    }
+  </style>
+  <script type="module" src="chrome://messenger/content/tree-view.mjs"></script>
+  <script src="tree-element-test-no-header.js"></script>
+  <script src="tree-element-test-common.js"></script>
+</head>
+<body>
+  <input id="before" placeholder="something to focus on" />
+  <tree-view id="testTree" data-select-delay="250"/>
+  <input id="after" placeholder="something to focus on" />
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/files/treeListbox.xhtml b/comm/mail/base/test/browser/files/treeListbox.xhtml
new file mode 100644
index 0000000000..a760ca141d
--- /dev/null
+++ b/comm/mail/base/test/browser/files/treeListbox.xhtml
@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test for the tree-listbox custom element</title>
+  <style>
+    :focus {
+      outline: 3px blue solid;
+    }
+    html {
+      height: 100%;
+    }
+    body {
+      height: 100%;
+      display: flex;
+      margin: 0;
+    }
+    ul[is="tree-listbox"] {
+      overflow-y: auto;
+      white-space: nowrap;
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    li > div {
+      display: flex;
+      align-items: center;
+    }
+    li.selected > div {
+      color: white;
+      background-color: blue;
+    }
+    li > ul {
+      padding-inline-start: 1em;
+    }
+    li.collapsed > ul {
+      display: none;
+    }
+    div.twisty {
+      width: 1em;
+      height: 1em;
+    }
+    li.children > div > div.twisty {
+      background-color: green;
+    }
+    li.children.collapsed > div > div.twisty {
+      background-color: red;
+    }
+    li.unselectable > div {
+      background-color: red;
+    }
+  </style>
+  <script defer="defer" src="chrome://messenger/content/tree-listbox.js"></script>
+</head>
+<body>
+  <ul is="tree-listbox" role="tree">
+    <li id="row-1">
+      <div>
+        <div class="twisty"></div>
+        Item with no children
+      </div>
+    </li>
+    <li id="row-2">
+      <div>
+        <div class="twisty"></div>
+        Item with children
+      </div>
+      <ul>
+        <li id="row-2-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+        </li>
+        <li id="row-2-2">
+          <div>
+            <div class="twisty"></div>
+            Second child
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li id="row-3">
+      <div>
+        <div class="twisty"></div>
+        Item with grandchildren
+      </div>
+      <ul>
+        <li id="row-3-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+          <ul>
+            <li id="row-3-1-1">
+              <div>
+                <div class="twisty"></div>
+                First grandchild
+              </div>
+            </li>
+            <li id="row-3-1-2">
+              <div>
+                <div class="twisty"></div>
+                Second grandchild
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <template id="rowToAdd">
+    <li id="new-row">
+      <div>
+        <div class="twisty"></div>
+        New row
+      </div>
+    </li>
+  </template>
+  <template id="rowsToAdd">
+    <li id="added-row">
+      <div>
+        <div class="twisty"></div>
+        Added row
+      </div>
+      <ul>
+        <li id="added-row-1">
+          <div>
+            <div class="twisty"></div>
+            Added child
+          </div>
+          <ul>
+            <li id="added-row-1-1">
+              <div>
+                <div class="twisty"></div>
+                Added grandchild
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li id="added-row-2">
+          <div>
+            <div class="twisty"></div>
+            Added child
+          </div>
+        </li>
+      </ul>
+    </li>
+  </template>
+  <!-- Larger tree for deleting from -->
+  <ul>
+    <li>Before</li>
+    <li>
+      <!-- Place under a plain <li> an <ul> to make sure our selector logic
+         - doesn't break down. -->
+      <ul is="tree-listbox" id="deleteTree" role="tree">
+        <li id="dRow-1" class="collapsed">
+          <div>
+            <div class="twisty"></div>
+            Item with collapsed children
+          </div>
+          <ul>
+            <li id="dRow-1-1">
+              <div>
+                <div class="twisty"></div>
+                Hidden child
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li id="dRow-2">
+          <div>
+            <div class="twisty"></div>
+            Item with children
+          </div>
+          <ul>
+            <li id="dRow-2-1">
+              <div>
+                <div class="twisty"></div>
+                First child
+              </div>
+            </li>
+            <li id="dRow-2-2">
+              <div>
+                <div class="twisty"></div>
+                Second child
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li id="dRow-3">
+          <div>
+            <div class="twisty"></div>
+            Item with grandchildren
+          </div>
+          <ul>
+            <li id="dRow-3-1">
+              <div>
+                <div class="twisty"></div>
+                First child
+              </div>
+              <ul>
+                <li id="dRow-3-1-1" class="collapsed">
+                  <div>
+                    <div class="twisty"></div>
+                    First grandchild
+                  </div>
+                  <ul>
+                    <li id="dRow-3-1-1-1">
+                      <div>
+                        <div class="twisty"></div>
+                        Hidden child
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li id="dRow-3-1-2">
+                  <div>
+                    <div class="twisty"></div>
+                    Second grandchild
+                  </div>
+                </li>
+                <li id="dRow-3-1-3" class="collapsed">
+                  <div>
+                    <div class="twisty"></div>
+                    Third grandchild
+                  </div>
+                  <ul>
+                    <li id="dRow-3-1-3-1">
+                      <div>
+                        <div class="twisty"></div>
+                        Hidden child
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li id="dRow-4">
+          <div>
+            <div class="twisty"></div>
+            Fourth item
+          </div>
+          <ul>
+            <li id="dRow-4-1" class="collapsed">
+              <div>
+                <div class="twisty"></div>
+                First child
+              </div>
+              <ul>
+                <li id="dRow-4-1-1">
+                  <div>
+                    <div class="twisty"></div>
+                    Hidden child 1
+                  </div>
+                </li>
+                <li id="dRow-4-1-2">
+                  <div>
+                    <div class="twisty"></div>
+                    Hidden child 2
+                  </div>
+                </li>
+              </ul>
+            </li>
+            <li id="dRow-4-2">
+              <div>
+                <div class="twisty"></div>
+                Second child
+              </div>
+            </li>
+            <li id="dRow-4-3">
+              <div>
+                <div class="twisty"></div>
+                Third child
+              </div>
+              <ul>
+                <li id="dRow-4-3-1">
+                  <div>
+                    <div class="twisty"></div>
+                    First Grand child
+                  </div>
+                </li>
+                <li id="dRow-4-3-2">
+                  <div>
+                    <div class="twisty"></div>
+                    Second Grand child
+                  </div>
+                </li>
+              </ul>
+            </li>
+            <li id="dRow-4-4" class="collapsed">
+              <div>
+                <div class="twisty"></div>
+                Fourth child
+              </div>
+              <ul>
+                <li id="dRow-4-4-1">
+                  <div>
+                    <div class="twisty"></div>
+                    Hidden child 1
+                  </div>
+                </li>
+                <li id="dRow-4-4-2">
+                  <div>
+                    <div class="twisty"></div>
+                    Hidden child 2
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li id="dRow-5">
+          <div>
+            <div class="twisty"></div>
+            Second last item
+          </div>
+          <ul>
+            <li id="dRow-5-1">
+              <div>
+                <div class="twisty"></div>
+                Last child
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li id="dRow-6">
+          <div>
+            <div class="twisty"></div>
+            Last item
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li>After</li>
+  </ul>
+  <!-- Tree with unselectable rows -->
+  <ul is="tree-listbox" id="unselectableTree" role="tree">
+    <li id="uRow-1" class="unselectable">
+      <div>Item with no children</div>
+    </li>
+    <li id="uRow-2" class="unselectable">
+      <div>Item with children</div>
+      <ul>
+        <li id="uRow-2-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+        </li>
+        <li id="uRow-2-2">
+          <div>
+            <div class="twisty"></div>
+            Second child
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li id="uRow-3" class="unselectable">
+      <div>Item with grandchildren</div>
+      <ul>
+        <li id="uRow-3-1">
+          <div>
+            <div class="twisty"></div>
+            First child
+          </div>
+          <ul>
+            <li id="uRow-3-1-1">
+              <div>
+                <div class="twisty"></div>
+                First grandchild
+              </div>
+            </li>
+            <li id="uRow-3-1-2">
+              <div>
+                <div class="twisty"></div>
+                Second grandchild
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/comm/mail/base/test/browser/head.js b/comm/mail/base/test/browser/head.js
new file mode 100644
index 0000000000..4ee9845d89
--- /dev/null
+++ b/comm/mail/base/test/browser/head.js
@@ -0,0 +1,371 @@
+/* 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/. */
+
+var { MailServices } = ChromeUtils.import(
+  "resource:///modules/MailServices.jsm"
+);
+
+async function focusWindow(win) {
+  win.focus();
+  await TestUtils.waitForCondition(
+    () => Services.focus.focusedWindow?.browsingContext.topChromeWindow == win,
+    "waiting for window to be focused"
+  );
+}
+
+async function openExtensionPopup(win, buttonId) {
+  await focusWindow(win.top);
+
+  let actionButton = await TestUtils.waitForCondition(
+    () =>
+      win.document.querySelector(
+        `#${buttonId}, [item-id="${buttonId}"] button`
+      ),
+    "waiting for the action button to exist"
+  );
+  await TestUtils.waitForCondition(
+    () => BrowserTestUtils.is_visible(actionButton),
+    "waiting for action button to be visible"
+  );
+  EventUtils.synthesizeMouseAtCenter(actionButton, {}, win);
+
+  let panel = win.top.document.getElementById(
+    "webextension-remote-preload-panel"
+  );
+  let browser = panel.querySelector("browser");
+  await TestUtils.waitForCondition(
+    () => browser.clientWidth > 100,
+    "waiting for browser to resize"
+  );
+
+  return { actionButton, panel, browser };
+}
+
+function getSmartServer() {
+  return MailServices.accounts.findServer("nobody", "smart mailboxes", "none");
+}
+
+function resetSmartMailboxes() {
+  let oldServer = getSmartServer();
+  // Clean up any leftover server from an earlier test.
+  if (oldServer) {
+    let oldAccount = MailServices.accounts.FindAccountForServer(oldServer);
+    MailServices.accounts.removeAccount(oldAccount, false);
+  }
+}
+
+class MenuTestHelper {
+  /** @type {XULMenuElement} */
+  menu;
+
+  /**
+   * An object describing the state of a <menu> or <menuitem>.
+   *
+   * @typedef {Object} MenuItemData
+   * @property {boolean|string[]} [hidden] - true if the item should be hidden
+   *   in all modes, or a list of modes in which it should be hidden.
+   * @property {boolean|string[]} [disabled] - true if the item should be
+   *   disabled in all modes, or a list of modes in which it should be
+   *   disabled. If the item should be hidden this property is ignored.
+   * @property {boolean|string[]} [checked] - true if the item should be
+   *   checked in all modes, or a list of modes in which it should be
+   *   checked. If the item should be hidden this property is ignored.
+   * @property {string} [l10nID] - the ID of the Fluent string this item
+   *   should be displaying. If specified, `l10nArgs` will be checked.
+   * @property {object} [l10nArgs] - the arguments for the Fluent string this
+   *   item should be displaying. If not specified, the string should not have
+   *   arguments.
+   */
+  /**
+   * An object describing the possible states of a menu's items. Object keys
+   * are the item's ID, values describe the item's state.
+   *
+   * @typedef {Object.<string, MenuItemData>} MenuData
+   */
+
+  /** @type {MenuData} */
+  baseData;
+
+  constructor(menuID, baseData) {
+    this.menu = document.getElementById(menuID);
+    this.baseData = baseData;
+  }
+
+  /**
+   * Clicks on the menu and waits for it to open.
+   */
+  async openMenu() {
+    let shownPromise = BrowserTestUtils.waitForEvent(
+      this.menu.menupopup,
+      "popupshown"
+    );
+    EventUtils.synthesizeMouseAtCenter(this.menu, {});
+    await shownPromise;
+  }
+
+  /**
+   * Check that an item matches the expected state.
+   *
+   * @param {XULElement} actual - A <menu> or <menuitem>.
+   * @param {MenuItemData} expected
+   */
+  checkItem(actual, expected) {
+    Assert.equal(
+      BrowserTestUtils.is_hidden(actual),
+      !!expected.hidden,
+      `${actual.id} hidden`
+    );
+    if (!expected.hidden) {
+      Assert.equal(
+        actual.disabled,
+        !!expected.disabled,
+        `${actual.id} disabled`
+      );
+    }
+    if (expected.checked) {
+      Assert.equal(
+        actual.getAttribute("checked"),
+        "true",
+        `${actual.id} checked`
+      );
+    } else if (["checkbox", "radio"].includes(actual.getAttribute("type"))) {
+      Assert.ok(
+        !actual.hasAttribute("checked") ||
+          actual.getAttribute("checked") == "false",
+        `${actual.id} not checked`
+      );
+    }
+    if (expected.l10nID) {
+      let attributes = actual.ownerDocument.l10n.getAttributes(actual);
+      Assert.equal(attributes.id, expected.l10nID, `${actual.id} L10n string`);
+      Assert.deepEqual(
+        attributes.args,
+        expected.l10nArgs ?? null,
+        `${actual.id} L10n args`
+      );
+    }
+  }
+
+  /**
+   * Recurses through submenus performing checks on items.
+   *
+   * @param {XULPopupElement} popup - The current pop-up to check.
+   * @param {MenuData} data - The expected values to test against.
+   * @param {boolean} [itemsMustBeInData=false] - If true, all menu items and
+   *   menus within `popup` must be specified in `data`. If false, items not
+   *   in `data` will be ignored.
+   */
+  async iterate(popup, data, itemsMustBeInData = false) {
+    if (popup.state != "open") {
+      await BrowserTestUtils.waitForEvent(popup, "popupshown");
+    }
+
+    for (let item of popup.children) {
+      if (!item.id || item.localName == "menuseparator") {
+        continue;
+      }
+
+      if (!(item.id in data)) {
+        if (itemsMustBeInData) {
+          Assert.report(true, undefined, undefined, `${item.id} in data`);
+        }
+        continue;
+      }
+      let itemData = data[item.id];
+      this.checkItem(item, itemData);
+      delete data[item.id];
+
+      if (item.localName == "menu") {
+        if (BrowserTestUtils.is_visible(item) && !item.disabled) {
+          item.openMenu(true);
+          await this.iterate(item.menupopup, data, itemsMustBeInData);
+        } else {
+          for (let hiddenItem of item.querySelectorAll("menu, menuitem")) {
+            delete data[hiddenItem.id];
+          }
+        }
+      }
+    }
+
+    popup.hidePopup();
+    await new Promise(resolve => setTimeout(resolve));
+  }
+
+  /**
+   * Checks every item in the menu and submenus against the expected states.
+   *
+   * @param {string} mode - The current mode, used to select the right expected
+   *   values from `baseData`.
+   */
+  async testAllItems(mode) {
+    // Get the data for just this mode.
+    let data = {};
+    for (let [id, itemData] of Object.entries(this.baseData)) {
+      data[id] = {
+        ...itemData,
+        hidden: itemData.hidden === true || itemData.hidden?.includes(mode),
+        disabled:
+          itemData.disabled === true || itemData.disabled?.includes(mode),
+        checked: itemData.checked === true || itemData.checked?.includes(mode),
+      };
+    }
+
+    // Open the menu and all submenus and check the items.
+    await this.openMenu();
+    await this.iterate(this.menu.menupopup, data, true);
+
+    // Report any unexpected items.
+    for (let id of Object.keys(data)) {
+      Assert.report(true, undefined, undefined, `extra item ${id} in data`);
+    }
+  }
+
+  /**
+   * Checks specific items in the menu.
+   *
+   * @param {MenuData} data - The expected values to test against.
+   */
+  async testItems(data) {
+    await this.openMenu();
+    await this.iterate(this.menu.menupopup, data);
+
+    for (let id of Object.keys(data)) {
+      Assert.report(true, undefined, undefined, `extra item ${id} in data`);
+    }
+
+    if (this.menu.menupopup.state != "closed") {
+      let hiddenPromise = BrowserTestUtils.waitForEvent(
+        this.menu.menupopup,
+        "popuphidden"
+      );
+      this.menu.menupopup.hidePopup();
+      await hiddenPromise;
+    }
+    await new Promise(resolve => setTimeout(resolve));
+  }
+
+  /**
+   * Activates the item in the menu.
+   *
+   * @note This currently only works on top-level items.
+   * @param {string} menuItemID - The item to activate.
+   * @param {MenuData} [data] - If given, the expected state of the menu item
+   *   before activation.
+   */
+  async activateItem(menuItemID, data) {
+    await this.openMenu();
+    let hiddenPromise = BrowserTestUtils.waitForEvent(
+      this.menu.menupopup,
+      "popuphidden"
+    );
+    let item = document.getElementById(menuItemID);
+    if (data) {
+      this.checkItem(item, data);
+    }
+    this.menu.menupopup.activateItem(item);
+    await hiddenPromise;
+    await new Promise(resolve => setTimeout(resolve));
+  }
+}
+
+/**
+ * Helper method to switch to a cards view with vertical layout.
+ */
+async function ensure_cards_view() {
+  const { threadTree, threadPane } =
+    document.getElementById("tabmail").currentAbout3Pane;
+
+  Services.prefs.setIntPref("mail.pane_config.dynamic", 2);
+  Services.xulStore.setValue(
+    "chrome://messenger/content/messenger.xhtml",
+    "threadPane",
+    "view",
+    "cards"
+  );
+  threadPane.updateThreadView("cards");
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-card",
+    "The tree view switched to a cards layout"
+  );
+}
+
+/**
+ * Helper method to switch to a table view with classic layout.
+ */
+async function ensure_table_view() {
+  const { threadTree, threadPane } =
+    document.getElementById("tabmail").currentAbout3Pane;
+
+  Services.prefs.setIntPref("mail.pane_config.dynamic", 0);
+  Services.xulStore.setValue(
+    "chrome://messenger/content/messenger.xhtml",
+    "threadPane",
+    "view",
+    "table"
+  );
+  threadPane.updateThreadView("table");
+
+  await BrowserTestUtils.waitForCondition(
+    () => threadTree.getAttribute("rows") == "thread-row",
+    "The tree view switched to a table layout"
+  );
+}
+
+// Report and remove any remaining accounts/servers. If we register a cleanup
+// function here, it will run before any other cleanup function has had a
+// chance to run. Instead, when it runs register another cleanup function
+// which will run last.
+registerCleanupFunction(function () {
+  registerCleanupFunction(function () {
+    Services.prefs.clearUserPref("mail.pane_config.dynamic");
+    Services.xulStore.removeValue(
+      "chrome://messenger/content/messenger.xhtml",
+      "threadPane",
+      "view"
+    );
+
+    let tabmail = document.getElementById("tabmail");
+    if (tabmail.tabInfo.length > 1) {
+      Assert.report(
+        true,
+        undefined,
+        undefined,
+        "Unexpected tab(s) open at the end of the test run"
+      );
+      tabmail.closeOtherTabs(0);
+    }
+
+    for (let server of MailServices.accounts.allServers) {
+      Assert.report(
+        true,
+        undefined,
+        undefined,
+        `Found ${server} at the end of the test run`
+      );
+      MailServices.accounts.removeIncomingServer(server, false);
+    }
+    for (let account of MailServices.accounts.accounts) {
+      Assert.report(
+        true,
+        undefined,
+        undefined,
+        `Found ${account} at the end of the test run`
+      );
+      MailServices.accounts.removeAccount(account, false);
+    }
+
+    resetSmartMailboxes();
+    ensure_cards_view();
+
+    // Some tests that open new windows don't return focus to the main window
+    // in a way that satisfies mochitest, and the test times out.
+    Services.focus.focusedWindow = window;
+    // Focus an element in the main window, then blur it again to avoid it
+    // hijacking keypresses.
+    let mainWindowElement = document.getElementById("button-appmenu");
+    mainWindowElement.focus();
+    mainWindowElement.blur();
+  });
+});
diff --git a/comm/mail/base/test/browser/head_spacesToolbar.js b/comm/mail/base/test/browser/head_spacesToolbar.js
new file mode 100644
index 0000000000..f08f3deee5
--- /dev/null
+++ b/comm/mail/base/test/browser/head_spacesToolbar.js
@@ -0,0 +1,34 @@
+/* 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/. */
+
+async function sub_test_toolbar_alignment(drawInTitlebar, hideMenu) {
+  let menubar = document.getElementById("toolbar-menubar");
+  let tabsInTitlebar =
+    document.documentElement.getAttribute("tabsintitlebar") == "true";
+  Assert.equal(tabsInTitlebar, drawInTitlebar);
+
+  if (hideMenu) {
+    menubar.setAttribute("autohide", true);
+    menubar.setAttribute("inactive", true);
+  } else {
+    menubar.removeAttribute("autohide");
+    menubar.removeAttribute("inactive");
+  }
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  let size = document
+    .getElementById("spacesToolbar")
+    .getBoundingClientRect().width;
+
+  Assert.equal(
+    document.getElementById("titlebar").getBoundingClientRect().left,
+    size,
+    "The correct style was applied to the #titlebar"
+  );
+  Assert.equal(
+    document.getElementById("toolbar-menubar").getBoundingClientRect().left,
+    size,
+    "The correct style was applied to the #toolbar-menubar"
+  );
+}