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

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

1 files changed, 1511 insertions, 0 deletions

diff --git a/comm/mailnews/import/content/aboutImport.js b/comm/mailnews/import/content/aboutImport.js
new file mode 100644
index 0000000000..1f0d06d38d
--- /dev/null
+++ b/comm/mailnews/import/content/aboutImport.js
@@ -0,0 +1,1511 @@
+/* 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/. */
+
+/* global MozElements */
+
+var { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+XPCOMUtils.defineLazyModuleGetters(this, {
+  MailServices: "resource:///modules/MailServices.jsm",
+  MailUtils: "resource:///modules/MailUtils.jsm",
+  AddrBookFileImporter: "resource:///modules/AddrBookFileImporter.jsm",
+  CalendarFileImporter: "resource:///modules/CalendarFileImporter.jsm",
+  ProfileExporter: "resource:///modules/ProfileExporter.jsm",
+  cal: "resource:///modules/calendar/calUtils.jsm",
+});
+
+/**
+ * An object to represent a source profile to import from.
+ *
+ * @typedef {object} SourceProfile
+ * @property {string} [name] - The profile name.
+ * @property {nsIFile} dir - The profile location.
+ */
+
+/**
+ * @typedef {object} Step
+ * @property {Function} returnTo - Function that resets to this step. Should end
+ *  up calling |updateSteps()| with this step again.
+ */
+
+const Steps = {
+  _pastSteps: [],
+  /**
+   * Toggle visibility of the navigation steps.
+   *
+   * @param {boolean} visible - If the navigation steps should be shown.
+   */
+  toggle(visible) {
+    document.getElementById("stepNav").hidden = !visible;
+  },
+  /**
+   * Update the currently displayed steps by adding a new step and updating the
+   * forecast of remaining steps.
+   *
+   * @param {Step} currentStep
+   * @param {number} plannedSteps - Amount of steps to follow this step,
+   *  including summary.
+   */
+  updateSteps(currentStep, plannedSteps) {
+    this._pastSteps.push(currentStep);
+    let confirm = document.getElementById("navConfirm");
+    const isConfirmStep = plannedSteps === 0;
+    confirm.classList.toggle("current", isConfirmStep);
+    confirm.toggleAttribute("disabled", isConfirmStep);
+    confirm.removeAttribute("aria-current");
+    document.getElementById("stepNav").replaceChildren(
+      ...this._pastSteps.map((step, index) => {
+        const li = document.createElement("li");
+        const button = document.createElement("button");
+        if (step === currentStep) {
+          if (isConfirmStep) {
+            confirm.setAttribute("aria-current", "step");
+            return confirm;
+          }
+          li.classList.add("current");
+          li.setAttribute("aria-current", "step");
+          button.setAttribute("disabled", "disabled");
+        } else {
+          li.classList.add("completed");
+          button.addEventListener("click", () => {
+            this.backTo(index);
+          });
+        }
+        document.l10n.setAttributes(button, "step-count", {
+          number: index + 1,
+        });
+        li.append(button);
+        //TODO tooltips
+        return li;
+      }),
+      ...new Array(Math.max(plannedSteps - 1, 0))
+        .fill(null)
+        .map((item, index) => {
+          const li = document.createElement("li");
+          const button = document.createElement("button");
+          document.l10n.setAttributes(button, "step-count", {
+            number: this._pastSteps.length + index + 1,
+          });
+          button.setAttribute("disabled", "disabled");
+          li.append(button);
+          //TODO tooltips
+          return li;
+        }),
+      isConfirmStep ? "" : confirm
+    );
+  },
+  /**
+   * Return to a previous step.
+   *
+   * @param {number} [stepIndex=-1] - The absolute index of the step to return
+   *  to. By default goes back one step.
+   * @returns {boolean} if a previous step was recalled.
+   */
+  backTo(stepIndex = -1) {
+    if (!this._pastSteps.length || stepIndex >= this._pastSteps.length) {
+      return false;
+    }
+    if (stepIndex < 0) {
+      // Make relative step index absolute
+      stepIndex = this._pastSteps.length + stepIndex - 1;
+    }
+    let targetStep = this._pastSteps[stepIndex];
+    this._pastSteps = this._pastSteps.slice(0, stepIndex);
+    targetStep.returnTo();
+    return true;
+  },
+  /**
+   * If any previous steps have been recorded.
+   *
+   * @returns {boolean} If there are steps preceding the current state.
+   */
+  hasStepHistory() {
+    return this._pastSteps.length > 0;
+  },
+  /**
+   * Reset step state.
+   */
+  reset() {
+    this._pastSteps = [];
+  },
+};
+
+/**
+ * The base controller for an importing process.
+ */
+class ImporterController {
+  _logger = console.createInstance({
+    prefix: "mail.import",
+    maxLogLevel: "Warn",
+    maxLogLevelPref: "mail.import.loglevel",
+  });
+
+  /**
+   * @param {string} elementId - The root element id.
+   * @param {string} paneIdPrefix - The prefix of sub pane id.
+   */
+  constructor(elementId, paneIdPrefix) {
+    this._el = document.getElementById(elementId);
+    this._paneIdPrefix = paneIdPrefix;
+  }
+
+  /**
+   * Show a specific pane, hide all the others.
+   *
+   * @param {string} id - The pane id to show.
+   */
+  showPane(id) {
+    this._currentPane = id;
+    id = `${this._paneIdPrefix}-${id}`;
+    for (let pane of this._el.querySelectorAll(":scope > section")) {
+      pane.hidden = pane.id != id;
+    }
+  }
+
+  /**
+   * Show the previous pane.
+   */
+  back() {
+    ImporterController.notificationBox.removeAllNotifications();
+    Steps.backTo();
+  }
+
+  /**
+   * Show the next pane.
+   */
+  next() {
+    if (this._restartOnOk) {
+      window.close();
+      MailUtils.restartApplication();
+      return;
+    }
+    ImporterController.notificationBox.removeAllNotifications();
+  }
+
+  /**
+   * Show the first pane.
+   */
+  reset() {
+    this._el.classList.remove(
+      "restart-only",
+      "progress",
+      "complete",
+      "final-step"
+    );
+    this._toggleBackButton(true);
+  }
+
+  /**
+   * Show the progress bar.
+   *
+   * @param {string} progressL10nId - Fluent ID to use for the progress
+   *  description. Should have a |progressPercent| variable expecting the
+   *  current progress like "50%".
+   */
+  showProgress(progressL10nId) {
+    this._progressL10nId = progressL10nId;
+    this.updateProgress(0);
+    this._el.classList.add("progress");
+    this._toggleBackButton(false);
+    this._inProgress = true;
+  }
+
+  /**
+   * Update the progress bar.
+   *
+   * @param {number} value - A number between 0 and 1 to represent the progress.
+   */
+  updateProgress(value) {
+    this._el.querySelector(".progressPaneProgressBar").value = value;
+    document.l10n.setAttributes(
+      this._el.querySelector(".progressPaneDesc"),
+      this._progressL10nId,
+      {
+        progressPercent: ImporterController.percentFormatter.format(value),
+      }
+    );
+  }
+
+  /**
+   * Show the finish text.
+   *
+   * @param {boolean} [restartNeeded=false] - Whether restart is needed to
+   *  finish the importing.
+   */
+  finish(restartNeeded = false) {
+    this._restartOnOk = restartNeeded;
+    this._el.classList.toggle("restart-required", restartNeeded);
+    this._el.classList.add("complete");
+    document.l10n.setAttributes(
+      this._el.querySelector(".progressPaneDesc"),
+      "progress-pane-finished-desc2"
+    );
+    this._inProgress = false;
+  }
+
+  /**
+   * Show the error pane, with an error message.
+   *
+   * @param {string} msgId - The error message fluent id.
+   */
+  showError(msgId) {
+    if (this._inProgress) {
+      this._toggleBackButton(true);
+      this._el.classList.remove("progress");
+      this._restartOnOk = false;
+      this._inProgress = false;
+    }
+    ImporterController.notificationBox.removeAllNotifications();
+    let notification = ImporterController.notificationBox.appendNotification(
+      "error",
+      {
+        label: {
+          "l10n-id": msgId,
+        },
+        priority: ImporterController.notificationBox.PRIORITY_CRITICAL_HIGH,
+      },
+      null
+    );
+    notification.removeAttribute("dismissable");
+  }
+
+  /**
+   * Disable/enable the back button.
+   *
+   * @param {boolean} enable - If the back button should be enabled
+   */
+  _toggleBackButton(enable) {
+    if (this._el.querySelector(".buttons-container")) {
+      this._el.querySelector(".back").disabled = !enable;
+    }
+  }
+}
+
+XPCOMUtils.defineLazyGetter(
+  ImporterController,
+  "percentFormatter",
+  () =>
+    new Intl.NumberFormat(undefined, {
+      style: "percent",
+    })
+);
+XPCOMUtils.defineLazyGetter(
+  ImporterController,
+  "notificationBox",
+  () =>
+    new MozElements.NotificationBox(element => {
+      element.setAttribute("notificationside", "bottom");
+      document.getElementById("errorNotifications").append(element);
+    })
+);
+
+/**
+ * Control the #tabPane-app element, to support importing from an application.
+ */
+class ProfileImporterController extends ImporterController {
+  constructor() {
+    super("tabPane-app", "app");
+    document.getElementById("appItemsList").addEventListener(
+      "input",
+      () => {
+        let state = this._getItemsChecked(true);
+        document.getElementById("profileNextButton").disabled = Object.values(
+          state
+        ).every(isChecked => !isChecked);
+      },
+      {
+        capture: true,
+        passive: true,
+      }
+    );
+  }
+
+  /**
+   * A map from radio input value to the importer module name.
+   */
+  _sourceModules = {
+    Thunderbird: "ThunderbirdProfileImporter",
+    Seamonkey: "SeamonkeyProfileImporter",
+    Outlook: "OutlookProfileImporter",
+    Becky: "BeckyProfileImporter",
+    AppleMail: "AppleMailProfileImporter",
+  };
+
+  /**
+   * Maps app radio input values to their respective representations in l10n
+   * ids.
+   */
+  _sourceL10nIds = {
+    Thunderbird: "thunderbird",
+    Seamonkey: "seamonkey",
+    Outlook: "outlook",
+    Becky: "becky",
+    AppleMail: "apple-mail",
+  };
+  _sourceAppName = "thunderbird";
+
+  next() {
+    super.next();
+    switch (this._currentPane) {
+      case "profiles":
+        this._onSelectProfile();
+        break;
+      case "items":
+        this._onSelectItems();
+        break;
+      case "summary":
+        window.close();
+        break;
+    }
+  }
+
+  /**
+   * Handler for the Continue button on the sources pane.
+   *
+   * @param {string} source - Profile source to import.
+   */
+  async _onSelectSource(source) {
+    this._sourceAppName = this._sourceL10nIds[source];
+    let sourceModule = this._sourceModules[source];
+
+    let module = ChromeUtils.import(`resource:///modules/${sourceModule}.jsm`);
+    this._importer = new module[sourceModule]();
+
+    let sourceProfiles = await this._importer.getSourceProfiles();
+    if (sourceProfiles.length > 1 || this._importer.USE_FILE_PICKER) {
+      // Let the user pick a profile if there are multiple options.
+      this._showProfiles(sourceProfiles, this._importer.USE_FILE_PICKER);
+    } else if (sourceProfiles.length == 1) {
+      // Let the user pick what to import.
+      this._showItems(sourceProfiles[0]);
+    } else {
+      this.showError("error-message-no-profile");
+      throw new Error("No profile found, do not advance to app flow.");
+    }
+  }
+
+  /**
+   * Show the profiles pane, with a list of profiles and optional file pickers.
+   *
+   * @param {SourceProfile[]} profiles - An array of profiles.
+   * @param {boolean} useFilePicker - Whether to render file pickers.
+   */
+  _showProfiles(profiles, useFilePicker) {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showProfiles(profiles, useFilePicker);
+        },
+      },
+      2
+    );
+    this._sourceProfiles = profiles;
+    document.l10n.setAttributes(
+      document.getElementById("profilesPaneTitle"),
+      `from-app-${this._sourceAppName}`
+    );
+    document.l10n.setAttributes(
+      document.getElementById("profilesPaneSubtitle"),
+      `profiles-pane-title-${this._sourceAppName}`
+    );
+    let elProfileList = document.getElementById("profileList");
+    elProfileList.hidden = !profiles.length;
+    elProfileList.innerHTML = "";
+    document.getElementById("filePickerList").hidden = !useFilePicker;
+
+    for (let profile of profiles) {
+      let label = document.createElement("label");
+      label.className = "toggle-container-with-text";
+
+      let input = document.createElement("input");
+      input.type = "radio";
+      input.name = "appProfile";
+      input.value = profile.dir.path;
+      label.append(input);
+
+      let name = document.createElement("p");
+      if (profile.name) {
+        document.l10n.setAttributes(name, "profile-source-named", {
+          profileName: profile.name,
+        });
+      } else {
+        document.l10n.setAttributes(name, "profile-source");
+      }
+      label.append(name);
+
+      let profileDetails = document.createElement("dl");
+      profileDetails.className = "result-indent tip-caption";
+      let profilePathLabel = document.createElement("dt");
+      document.l10n.setAttributes(profilePathLabel, "items-pane-directory");
+      let profilePath = document.createElement("dd");
+      profilePath.textContent = profile.dir.path;
+      profileDetails.append(profilePathLabel, profilePath);
+      label.append(profileDetails);
+
+      elProfileList.append(label);
+    }
+    document.querySelector("input[name=appProfile]").checked = true;
+    document.getElementById("profileNextButton").disabled = false;
+
+    this.showPane("profiles");
+  }
+
+  /**
+   * Handler for the Continue button on the profiles pane.
+   */
+  _onSelectProfile() {
+    let index = [
+      ...document.querySelectorAll("input[name=appProfile]"),
+    ].findIndex(el => el.checked);
+    if (this._sourceProfiles[index]) {
+      this._showItems(this._sourceProfiles[index]);
+    } else {
+      this._openFilePicker(
+        index == this._sourceProfiles.length ? "dir" : "zip"
+      );
+    }
+  }
+
+  /**
+   * Open a file picker to select a folder or a zip file.
+   *
+   * @param {'dir' | 'zip'} type - Whether to pick a folder or a zip file.
+   */
+  async _openFilePicker(type) {
+    let filePicker = Cc["@mozilla.org/filepicker;1"].createInstance(
+      Ci.nsIFilePicker
+    );
+    let [filePickerTitleDir, filePickerTitleZip] =
+      await document.l10n.formatValues([
+        "profile-file-picker-directory",
+        "profile-file-picker-archive-title",
+      ]);
+    if (type == "zip") {
+      filePicker.init(window, filePickerTitleZip, filePicker.modeOpen);
+      filePicker.appendFilter("", "*.zip");
+    } else {
+      filePicker.init(window, filePickerTitleDir, filePicker.modeGetFolder);
+    }
+    let rv = await new Promise(resolve => filePicker.open(resolve));
+    if (rv != Ci.nsIFilePicker.returnOK) {
+      return;
+    }
+    let selectedFile = filePicker.file;
+    if (!selectedFile.isDirectory()) {
+      if (selectedFile.fileSize > 2147483647) {
+        // nsIZipReader only supports zip file less than 2GB.
+        this.showError("error-message-zip-file-too-big2");
+        return;
+      }
+      this._importingFromZip = true;
+    }
+    this._showItems({ dir: selectedFile });
+  }
+
+  /**
+   * Show the items pane, with a list of items to import.
+   *
+   * @param {SourceProfile} profile - The profile to import from.
+   */
+  _showItems(profile) {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showItems(profile);
+        },
+      },
+      1
+    );
+    this._el.classList.remove("final-step", "progress");
+    this._sourceProfile = profile;
+    document.l10n.setAttributes(
+      this._el.querySelector("#app-items h1"),
+      `from-app-${this._sourceAppName}`
+    );
+    document.getElementById("appSourceProfilePath").textContent =
+      profile.dir.path;
+    document.getElementById("appSourceProfilePath").textContent =
+      this._sourceProfile.dir.path;
+    document.getElementById("appSourceProfileNameWrapper").hidden =
+      !this._sourceProfile.name;
+    if (this._sourceProfile.name) {
+      document.getElementById("appSourceProfileName").textContent =
+        this._sourceProfile.name;
+    }
+    this._setItemsChecked(this._importer.SUPPORTED_ITEMS);
+    document.getElementById("profileNextButton").disabled = Object.values(
+      this._importer.SUPPORTED_ITEMS
+    ).every(isChecked => !isChecked);
+
+    this.showPane("items");
+  }
+
+  /** A map from checkbox id to ImportItems field */
+  _itemCheckboxes = {
+    checkAccounts: "accounts",
+    checkAddressBooks: "addressBooks",
+    checkCalendars: "calendars",
+    checkMailMessages: "mailMessages",
+  };
+
+  /**
+   * Map of fluent IDs from ImportItems if they differ.
+   *
+   * @type {Object<string>}
+   */
+  _importItemFluentId = {
+    addressBooks: "address-books",
+    mailMessages: "mail-messages",
+  };
+
+  /**
+   * Set checkbox states according to an ImportItems object.
+   *
+   * @param {ImportItems} items.
+   */
+  _setItemsChecked(items) {
+    for (let [id, field] of Object.entries(this._itemCheckboxes)) {
+      let supported = items[field];
+      let checkbox = document.getElementById(id);
+      checkbox.checked = supported;
+      checkbox.disabled = !supported;
+    }
+  }
+
+  /**
+   * Construct an ImportItems object from the checkbox states.
+   *
+   * @param {boolean} [onlySupported=false] - Only return supported ImportItems.
+   * @returns {ImportItems}
+   */
+  _getItemsChecked(onlySupported = false) {
+    let items = {};
+    for (let id in this._itemCheckboxes) {
+      let checkbox = document.getElementById(id);
+      if (!onlySupported || !checkbox.disabled) {
+        items[this._itemCheckboxes[id]] = checkbox.checked;
+      }
+    }
+    return items;
+  }
+
+  /**
+   * Handler for the Continue button on the items pane.
+   */
+  _onSelectItems() {
+    let checkedItems = this._getItemsChecked(true);
+    if (Object.values(checkedItems).some(isChecked => isChecked)) {
+      this._showSummary();
+    }
+  }
+
+  _showSummary() {
+    Steps.updateSteps({}, 0);
+    this._el.classList.add("final-step");
+    document.l10n.setAttributes(
+      this._el.querySelector("#app-summary h1"),
+      `from-app-${this._sourceAppName}`
+    );
+    document.getElementById("appSummaryProfilePath").textContent =
+      this._sourceProfile.dir.path;
+    document.getElementById("appSummaryProfileNameWrapper").hidden =
+      !this._sourceProfile.name;
+    if (this._sourceProfile.name) {
+      document.getElementById("appSummaryProfileName").textContent =
+        this._sourceProfile.name;
+    }
+    document.getElementById("appSummaryItems").replaceChildren(
+      ...Object.entries(this._getItemsChecked(true))
+        .filter(([item, checked]) => checked)
+        .map(([item]) => {
+          let li = document.createElement("li");
+          let fluentId = this._importItemFluentId[item] ?? item;
+          document.l10n.setAttributes(li, `items-pane-checkbox-${fluentId}`);
+          return li;
+        })
+    );
+    this.showPane("summary");
+  }
+
+  /**
+   * Extract the zip file to a tmp dir, set _sourceProfile.dir to the tmp dir.
+   */
+  async _extractZipFile() {
+    // Extract the zip file to a tmp dir.
+    let targetDir = Services.dirsvc.get("TmpD", Ci.nsIFile);
+    targetDir.append("tmp-profile");
+    targetDir.createUnique(Ci.nsIFile.DIRECTORY_TYPE, 0o755);
+    let ZipReader = Components.Constructor(
+      "@mozilla.org/libjar/zip-reader;1",
+      "nsIZipReader",
+      "open"
+    );
+    let zip = ZipReader(this._sourceProfile.dir);
+    for (let entry of zip.findEntries(null)) {
+      let parts = entry.split("/");
+      if (
+        this._importer.IGNORE_DIRS.includes(parts[1]) ||
+        entry.endsWith("/")
+      ) {
+        continue;
+      }
+      // Folders can not be unzipped recursively, have to iterate and
+      // extract all file entries one by one.
+      let target = targetDir.clone();
+      for (let part of parts.slice(1)) {
+        // Drop the root folder name in the zip file.
+        target.append(part);
+      }
+      if (!target.parent.exists()) {
+        target.parent.create(Ci.nsIFile.DIRECTORY_TYPE, 0o755);
+      }
+      try {
+        this._logger.debug(`Extracting ${entry} to ${target.path}`);
+        zip.extract(entry, target);
+        this._extractedFileCount++;
+        if (this._extractedFileCount % 10 == 0) {
+          let progress = Math.min((this._extractedFileCount / 200) * 0.2, 0.2);
+          this.updateProgress(progress);
+          await new Promise(resolve => setTimeout(resolve));
+        }
+      } catch (e) {
+        this._logger.error(e);
+      }
+    }
+    // Use the tmp dir as source profile dir.
+    this._sourceProfile = { dir: targetDir };
+    this.updateProgress(0.2);
+  }
+
+  async startImport() {
+    this.showProgress("progress-pane-importing2");
+    if (this._importingFromZip) {
+      this._extractedFileCount = 0;
+      try {
+        await this._extractZipFile();
+      } catch (e) {
+        this.showError("error-message-extract-zip-file-failed2");
+        throw e;
+      }
+    }
+    this._importer.onProgress = (current, total) => {
+      this.updateProgress(
+        this._importingFromZip ? 0.2 + (0.8 * current) / total : current / total
+      );
+    };
+    try {
+      this.finish(
+        await this._importer.startImport(
+          this._sourceProfile.dir,
+          this._getItemsChecked()
+        )
+      );
+    } catch (e) {
+      this.showError("error-message-failed");
+      throw e;
+    } finally {
+      if (this._importingFromZip) {
+        IOUtils.remove(this._sourceProfile.dir.path, { recursive: true });
+      }
+    }
+  }
+}
+
+/**
+ * Control the #tabPane-addressBook element, to support importing from an
+ * address book file.
+ */
+class AddrBookImporterController extends ImporterController {
+  constructor() {
+    super("tabPane-addressBook", "addr-book");
+  }
+
+  /**
+   * Show the next pane.
+   */
+  next() {
+    super.next();
+    switch (this._currentPane) {
+      case "sources":
+        this._onSelectSource();
+        break;
+      case "csvFieldMap":
+        this._onSubmitCsvFieldMap();
+        break;
+      case "directories":
+        this._onSelectDirectory();
+        break;
+      case "summary":
+        window.close();
+        break;
+    }
+  }
+
+  showInitialStep() {
+    this._showSources();
+  }
+
+  /**
+   * Show the sources pane.
+   */
+  _showSources() {
+    document.getElementById("addrBookBackButton").hidden =
+      !Steps.hasStepHistory();
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showSources();
+        },
+      },
+      2
+    );
+    this.showPane("sources");
+  }
+
+  /**
+   * Handler for the Continue button on the sources pane.
+   */
+  async _onSelectSource() {
+    this._fileType = document.querySelector(
+      "input[name=addrBookSource]:checked"
+    ).value;
+    this._importer = new AddrBookFileImporter(this._fileType);
+
+    let filePicker = Cc["@mozilla.org/filepicker;1"].createInstance(
+      Ci.nsIFilePicker
+    );
+    let [filePickerTitle] = await document.l10n.formatValues([
+      "addr-book-file-picker",
+    ]);
+    filePicker.init(window, filePickerTitle, filePicker.modeOpen);
+    let filter = {
+      csv: "*.csv; *.tsv; *.tab",
+      ldif: "*.ldif",
+      vcard: "*.vcf",
+      sqlite: "*.sqlite",
+      mab: "*.mab",
+    }[this._fileType];
+    if (filter) {
+      filePicker.appendFilter("", filter);
+    }
+    filePicker.appendFilters(Ci.nsIFilePicker.filterAll);
+    let rv = await new Promise(resolve => filePicker.open(resolve));
+    if (rv != Ci.nsIFilePicker.returnOK) {
+      return;
+    }
+
+    this._sourceFile = filePicker.file;
+    document.getElementById("addrBookSourcePath").textContent =
+      filePicker.file.path;
+
+    if (this._fileType == "csv") {
+      let unmatchedRows = await this._importer.parseCsvFile(filePicker.file);
+      if (unmatchedRows.length) {
+        document.getElementById("csvFieldMap").data = unmatchedRows;
+        this._showCsvFieldMap();
+        return;
+      }
+    }
+    this._showDirectories();
+  }
+
+  /**
+   * Show the csvFieldMap pane, user can map source CSV fields to address book
+   * fields.
+   */
+  _showCsvFieldMap() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showCsvFieldMap();
+        },
+      },
+      2
+    );
+    document.getElementById("addrBookBackButton").hidden = false;
+    this.showPane("csvFieldMap");
+  }
+
+  /**
+   * Handler for the Continue button on the csvFieldMap pane.
+   */
+  async _onSubmitCsvFieldMap() {
+    this._importer.setCsvFields(document.getElementById("csvFieldMap").value);
+    this._showDirectories();
+  }
+
+  /**
+   * Show the directories pane, with a list of existing directories and an
+   * option to create a new directory.
+   */
+  async _showDirectories() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showDirectories();
+        },
+      },
+      1
+    );
+    document.getElementById("addrBookBackButton").hidden = false;
+    this._el.classList.remove("final-step", "progress");
+    let sourceFileName = this._sourceFile.leafName;
+    this._fallbackABName = sourceFileName.slice(
+      0,
+      sourceFileName.lastIndexOf(".") == -1
+        ? Infinity
+        : sourceFileName.lastIndexOf(".")
+    );
+    document.l10n.setAttributes(
+      document.getElementById("newDirectoryLabel"),
+      "addr-book-import-into-new-directory2",
+      {
+        addressBookName: this._fallbackABName,
+      }
+    );
+    let elList = document.getElementById("directoryList");
+    elList.innerHTML = "";
+    this._directories = MailServices.ab.directories.filter(
+      dir => dir.dirType == Ci.nsIAbManager.JS_DIRECTORY_TYPE
+    );
+    for (let directory of this._directories) {
+      let label = document.createElement("label");
+      label.className = "toggle-container-with-text";
+
+      let input = document.createElement("input");
+      input.type = "radio";
+      input.name = "addrBookDirectory";
+      input.value = directory.dirPrefId;
+      label.append(input);
+
+      let name = document.createElement("div");
+      name.className = "strong";
+      name.textContent = directory.dirName;
+      label.append(name);
+
+      elList.append(label);
+    }
+    document.querySelector("input[name=addrBookDirectory]").checked = true;
+
+    this.showPane("directories");
+  }
+
+  /**
+   * Handler for the Continue button on the directories pane.
+   */
+  _onSelectDirectory() {
+    let index = [
+      ...document.querySelectorAll("input[name=addrBookDirectory]"),
+    ].findIndex(el => el.checked);
+    this._selectedAddressBook = this._directories[index];
+    this._showSummary();
+  }
+
+  _showSummary() {
+    Steps.updateSteps({}, 0);
+    this._el.classList.add("final-step");
+    document.getElementById("addrBookSummaryPath").textContent =
+      this._sourceFile.path;
+    let targetAddressBook = this._selectedAddressBook?.dirName;
+    let newAddressBook = false;
+    if (!targetAddressBook) {
+      targetAddressBook = this._fallbackABName;
+      newAddressBook = true;
+    }
+    let description = this._el.querySelector("#addr-book-summary .description");
+    description.hidden = !newAddressBook;
+    if (newAddressBook) {
+      document.l10n.setAttributes(
+        description,
+        "addr-book-summary-description",
+        {
+          addressBookName: targetAddressBook,
+        }
+      );
+    }
+    document.l10n.setAttributes(
+      document.getElementById("addrBookSummarySubtitle"),
+      "addr-book-summary-title",
+      {
+        addressBookName: targetAddressBook,
+      }
+    );
+    this.showPane("summary");
+  }
+
+  async startImport() {
+    let targetDirectory = this._selectedAddressBook;
+    if (!targetDirectory) {
+      // User selected to create a new address book and import into it. Create
+      // one based on the file name.
+      let dirId = MailServices.ab.newAddressBook(
+        this._fallbackABName,
+        "",
+        Ci.nsIAbManager.JS_DIRECTORY_TYPE
+      );
+      targetDirectory = MailServices.ab.getDirectoryFromId(dirId);
+    }
+
+    this.showProgress("progress-pane-importing2");
+    this._importer.onProgress = (current, total) => {
+      this.updateProgress(current / total);
+    };
+    try {
+      this.finish(
+        await this._importer.startImport(this._sourceFile, targetDirectory)
+      );
+    } catch (e) {
+      this.showError("error-message-failed");
+      throw e;
+    }
+  }
+}
+
+/**
+ * Control the #tabPane-calendar element, to support importing from a calendar
+ * file.
+ */
+class CalendarImporterController extends ImporterController {
+  constructor() {
+    super("tabPane-calendar", "calendar");
+  }
+
+  next() {
+    super.next();
+    switch (this._currentPane) {
+      case "sources":
+        this._onSelectSource();
+        break;
+      case "items":
+        this._onSelectItems();
+        break;
+      case "calendars":
+        this._onSelectCalendar();
+        break;
+      case "summary":
+        window.close();
+        break;
+    }
+  }
+
+  showInitialStep() {
+    this._showSources();
+  }
+
+  /**
+   * When filter changes, re-render the item list.
+   *
+   * @param {HTMLInputElement} filterInput - The filter input.
+   */
+  onFilterChange(filterInput) {
+    let term = filterInput.value.toLowerCase();
+    this._filteredItems = [];
+    for (let item of this._items) {
+      let element = this._itemElements[item.id];
+      if (item.title.toLowerCase().includes(term)) {
+        element.hidden = false;
+        this._filteredItems.push(item);
+      } else {
+        element.hidden = true;
+      }
+    }
+  }
+
+  /**
+   * Select or deselect all visible items.
+   *
+   * @param {boolean} selected - Select all if true, otherwise deselect all.
+   */
+  selectAllItems(selected) {
+    for (let item of this._filteredItems) {
+      let element = this._itemElements[item.id];
+      element.querySelector("input").checked = selected;
+      if (selected) {
+        this._selectedItems.add(item);
+      } else {
+        this._selectedItems.delete(item);
+      }
+    }
+    document.getElementById("calendarNextButton").disabled =
+      this._selectedItems.size == 0;
+  }
+
+  /**
+   * Show the sources pane.
+   */
+  _showSources() {
+    document.getElementById("calendarBackButton").hidden =
+      !Steps.hasStepHistory();
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showSources();
+        },
+      },
+      3
+    );
+    this.showPane("sources");
+  }
+
+  /**
+   * Handler for the Continue button on the sources pane.
+   */
+  async _onSelectSource() {
+    let filePicker = Cc["@mozilla.org/filepicker;1"].createInstance(
+      Ci.nsIFilePicker
+    );
+    filePicker.appendFilter("", "*.ics");
+    filePicker.appendFilters(Ci.nsIFilePicker.filterAll);
+    filePicker.init(
+      window,
+      await document.l10n.formatValue("file-calendar-description"),
+      filePicker.modeOpen
+    );
+    let rv = await new Promise(resolve => filePicker.open(resolve));
+    if (rv != Ci.nsIFilePicker.returnOK) {
+      return;
+    }
+
+    this._sourceFile = filePicker.file;
+    this._importer = new CalendarFileImporter();
+
+    document.getElementById("calendarSourcePath").textContent =
+      filePicker.file.path;
+
+    this._showItems();
+  }
+
+  /**
+   * Show the sources pane.
+   */
+  async _showItems() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showItems();
+        },
+      },
+      2
+    );
+    document.getElementById("calendarBackButton").hidden = false;
+    let elItemList = document.getElementById("calendar-item-list");
+    document.getElementById("calendarItemsTools").hidden = true;
+    document.l10n.setAttributes(elItemList, "calendar-items-loading");
+    this.showPane("items");
+
+    // Give the UI a chance to render.
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    try {
+      this._items = await this._importer.parseIcsFile(this._sourceFile);
+    } catch (e) {
+      this.showError("error-failed-to-parse-ics-file");
+      throw e;
+    }
+
+    document.getElementById("calendarItemsTools").hidden =
+      this._items.length < 2;
+    elItemList.innerHTML = "";
+    this._filteredItems = this._items;
+    this._selectedItems = new Set(this._items);
+    this._itemElements = {};
+
+    for (let item of this._items) {
+      let wrapper = document.createElement("div");
+      wrapper.className = "calendar-item-wrapper";
+      elItemList.appendChild(wrapper);
+      this._itemElements[item.id] = wrapper;
+
+      let summary = document.createXULElement("calendar-item-summary");
+      wrapper.appendChild(summary);
+      summary.item = item;
+      summary.updateItemDetails();
+
+      let input = document.createElement("input");
+      input.type = "checkbox";
+      input.checked = true;
+      wrapper.appendChild(input);
+
+      wrapper.addEventListener("click", e => {
+        if (e.target != input) {
+          input.checked = !input.checked;
+        }
+        if (input.checked) {
+          this._selectedItems.add(item);
+        } else {
+          this._selectedItems.delete(item);
+        }
+        document.getElementById("calendarNextButton").disabled =
+          this._selectedItems.size == 0;
+      });
+    }
+  }
+
+  /**
+   * Handler for the Continue button on the items pane.
+   */
+  _onSelectItems() {
+    this._showCalendars();
+  }
+
+  /**
+   * Show the calendars pane, with a list of existing writable calendars and an
+   * option to create a new calendar.
+   */
+  _showCalendars() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          this._showCalendars();
+        },
+      },
+      1
+    );
+    this._el.classList.remove("final-step", "progress");
+    document.getElementById("calendarCalPath").textContent =
+      this._sourceFile.path;
+    let elList = document.getElementById("calendarList");
+    elList.innerHTML = "";
+
+    let sourceFileName = this._sourceFile.leafName;
+    this._fallbackCalendarName = sourceFileName.slice(
+      0,
+      sourceFileName.lastIndexOf(".") == -1
+        ? Infinity
+        : sourceFileName.lastIndexOf(".")
+    );
+
+    document.l10n.setAttributes(
+      document.getElementById("newCalendarLabel"),
+      "calendar-import-into-new-calendar2",
+      {
+        targetCalendar: this._fallbackCalendarName,
+      }
+    );
+
+    this._calendars = this._importer.getTargetCalendars();
+    for (let calendar of this._calendars) {
+      let label = document.createElement("label");
+      label.className = "toggle-container-with-text";
+
+      let input = document.createElement("input");
+      input.type = "radio";
+      input.name = "targetCalendar";
+      input.value = calendar.id;
+      label.append(input);
+
+      let name = document.createElement("div");
+      name.className = "strong";
+      name.textContent = calendar.name;
+      label.append(name);
+
+      elList.append(label);
+    }
+    document.querySelector("input[name=targetCalendar]").checked = true;
+
+    this.showPane("calendars");
+  }
+
+  _onSelectCalendar() {
+    let index = [
+      ...document.querySelectorAll("input[name=targetCalendar]"),
+    ].findIndex(el => el.checked);
+    this._selectedCalendar = this._calendars[index];
+    this._showSummary();
+  }
+
+  _showSummary() {
+    Steps.updateSteps({}, 0);
+    this._el.classList.add("final-step");
+    document.getElementById("calendarSummaryPath").textContent =
+      this._sourceFile.path;
+    let targetCalendar = this._selectedCalendar?.name;
+    let newCalendar = false;
+    if (!targetCalendar) {
+      targetCalendar = this._fallbackCalendarName;
+      newCalendar = true;
+    }
+    let description = this._el.querySelector("#calendar-summary .description");
+    description.hidden = !newCalendar;
+    if (newCalendar) {
+      document.l10n.setAttributes(description, "calendar-summary-description", {
+        targetCalendar,
+      });
+    }
+    document.l10n.setAttributes(
+      document.getElementById("calendarSummarySubtitle"),
+      "calendar-summary-title",
+      {
+        itemCount: this._selectedItems.size,
+        targetCalendar,
+      }
+    );
+    this.showPane("summary");
+  }
+
+  /**
+   * Handler for the Continue button on the calendars pane.
+   */
+  async startImport() {
+    let targetCalendar = this._selectedCalendar;
+    if (!targetCalendar) {
+      // Create a new calendar.
+      targetCalendar = cal.manager.createCalendar(
+        "storage",
+        Services.io.newURI("moz-storage-calendar://")
+      );
+      targetCalendar.name = this._fallbackCalendarName;
+      cal.manager.registerCalendar(targetCalendar);
+    }
+    this.showProgress("progress-pane-importing2");
+    this._importer.onProgress = (current, total) => {
+      this.updateProgress(current / total);
+    };
+    try {
+      await this._importer.startImport(
+        [...this._selectedItems],
+        targetCalendar
+      );
+      this.finish();
+    } catch (e) {
+      this.showError("error-message-failed");
+      throw e;
+    }
+  }
+}
+
+/**
+ * Control the #tabPane-export element, to support exporting the current profile
+ * to a zip file.
+ */
+class ExportController extends ImporterController {
+  constructor() {
+    super("tabPane-export", "");
+  }
+
+  back() {
+    window.close();
+  }
+
+  async next() {
+    super.next();
+    let [filePickerTitle, brandName] = await document.l10n.formatValues([
+      "export-file-picker2",
+      "export-brand-name",
+    ]);
+    let filePicker = Cc["@mozilla.org/filepicker;1"].createInstance(
+      Ci.nsIFilePicker
+    );
+    filePicker.init(window, filePickerTitle, Ci.nsIFilePicker.modeSave);
+    filePicker.defaultString = `${brandName}_profile_backup.zip`;
+    filePicker.defaultExtension = "zip";
+    filePicker.appendFilter("", "*.zip");
+    let rv = await new Promise(resolve => filePicker.open(resolve));
+    if (
+      ![Ci.nsIFilePicker.returnOK, Ci.nsIFilePicker.returnReplace].includes(rv)
+    ) {
+      return;
+    }
+
+    let exporter = new ProfileExporter();
+    this.showProgress("progress-pane-exporting2");
+    exporter.onProgress = (current, total) => {
+      this.updateProgress(current / total);
+    };
+    try {
+      await exporter.startExport(filePicker.file);
+      this.finish();
+    } catch (e) {
+      this.showError("error-export-failed");
+      throw e;
+    }
+  }
+
+  openProfileFolder() {
+    Services.dirsvc.get("ProfD", Ci.nsIFile).reveal();
+  }
+}
+
+class StartController extends ImporterController {
+  constructor() {
+    super("tabPane-start", "start");
+  }
+
+  next() {
+    super.next();
+    switch (this._currentPane) {
+      case "sources":
+        this._onSelectSource();
+        break;
+      case "file":
+        this._onSelectFile();
+        break;
+    }
+  }
+
+  showInitialStep() {
+    this._showSources();
+  }
+
+  /**
+   * Show the sources pane.
+   */
+  _showSources() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          showTab("tab-start");
+          //showTab will always call showInitialStep
+        },
+      },
+      3
+    );
+    document.getElementById("startBackButton").hidden = true;
+    this.showPane("sources");
+  }
+
+  /**
+   * Handler for the Continue button on the sources pane.
+   */
+  async _onSelectSource() {
+    let checkedInput = document.querySelector("input[name=appSource]:checked");
+
+    switch (checkedInput.value) {
+      case "file":
+        this._showFile();
+        break;
+      default:
+        await profileController._onSelectSource(checkedInput.value);
+        showTab("tab-app");
+        // Don't change back button state, since we switch to app flow.
+        return;
+    }
+
+    document.getElementById("startBackButton").hidden = false;
+  }
+
+  _showFile() {
+    Steps.updateSteps(
+      {
+        returnTo: () => {
+          this.reset();
+          showTab("tab-start");
+          this._showFile();
+        },
+      },
+      3
+    );
+    this.showPane("file");
+  }
+
+  async _onSelectFile() {
+    let checkedInput = document.querySelector("input[name=startFile]:checked");
+    switch (checkedInput.value) {
+      case "profile":
+        // Go to the import profile from zip file step in profile flow for TB.
+        profileController.reset();
+        await profileController._onSelectSource("Thunderbird");
+        document.getElementById("appFilePickerZip").checked = true;
+        await profileController._onSelectProfile();
+        showTab("tab-app");
+        break;
+      case "calendar":
+        calendarController.reset();
+        showTab("tab-calendar");
+        calendarController.showInitialStep();
+        await calendarController._onSelectSource();
+        break;
+      case "addressbook":
+        addrBookController.reset();
+        showTab("tab-addressBook");
+        addrBookController.showInitialStep();
+        break;
+    }
+  }
+}
+
+/**
+ * Show a specific importing tab.
+ *
+ * @param {"tab-app"|"tab-addressBook"|"tab-calendar"|"tab-export"|"tab-start"} tabId -
+ *  Tab to show.
+ * @param {boolean} [reset=false] - If the state should be reset as if this was
+ *  the initial tab shown.
+ */
+function showTab(tabId, reset = false) {
+  if (reset) {
+    Steps.reset();
+    restart();
+  }
+  let selectedPaneId = `tabPane-${tabId.split("-")[1]}`;
+  let isExport = tabId === "tab-export";
+  document.getElementById("importDocs").hidden = isExport;
+  document.getElementById("exportDocs").hidden = !isExport;
+  Steps.toggle(!isExport);
+  document.l10n.setAttributes(
+    document.querySelector("title"),
+    isExport ? "export-page-title" : "import-page-title"
+  );
+  document.querySelector("link[rel=icon]").href = isExport
+    ? "chrome://messenger/skin/icons/new/compact/export.svg"
+    : "chrome://messenger/skin/icons/new/compact/import.svg";
+  location.hash = isExport ? "export" : "";
+  for (let tabPane of document.querySelectorAll("[id^=tabPane-]")) {
+    tabPane.hidden = tabPane.id != selectedPaneId;
+  }
+  for (let el of document.querySelectorAll("[id^=tab-]")) {
+    el.classList.toggle("is-selected", el.id == tabId);
+  }
+  if (!Steps.hasStepHistory()) {
+    switch (tabId) {
+      case "tab-start":
+        startController.showInitialStep();
+        break;
+      case "tab-addressBook":
+        addrBookController.showInitialStep();
+        break;
+      case "tab-calendar":
+        calendarController.showInitialStep();
+        break;
+      default:
+    }
+  }
+}
+
+/**
+ * Restart the import wizard. Resets all previous choices.
+ */
+function restart() {
+  startController.reset();
+  profileController.reset();
+  addrBookController.reset();
+  calendarController.reset();
+  Steps.backTo(0);
+}
+
+let profileController;
+let addrBookController;
+let calendarController;
+let exportController;
+let startController;
+
+document.addEventListener("DOMContentLoaded", () => {
+  profileController = new ProfileImporterController();
+  addrBookController = new AddrBookImporterController();
+  calendarController = new CalendarImporterController();
+  exportController = new ExportController();
+  startController = new StartController();
+  showTab(location.hash === "#export" ? "tab-export" : "tab-start", true);
+});