Adding upstream version 124.0.1.upstream/124.0.1

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

1 files changed, 1754 insertions, 0 deletions

diff --git a/devtools/client/storage/ui.js b/devtools/client/storage/ui.js
new file mode 100644
index 0000000000..095bb4730b
--- /dev/null
+++ b/devtools/client/storage/ui.js
@@ -0,0 +1,1754 @@
+/* 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/. */
+
+"use strict";
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const { ELLIPSIS } = require("resource://devtools/shared/l10n.js");
+const KeyShortcuts = require("resource://devtools/client/shared/key-shortcuts.js");
+const {
+  parseItemValue,
+} = require("resource://devtools/shared/storage/utils.js");
+const { KeyCodes } = require("resource://devtools/client/shared/keycodes.js");
+const {
+  getUnicodeHostname,
+} = require("resource://devtools/client/shared/unicode-url.js");
+const getStorageTypeURL = require("resource://devtools/client/storage/utils/doc-utils.js");
+
+// GUID to be used as a separator in compound keys. This must match the same
+// constant in devtools/server/actors/resources/storage/index.js,
+// devtools/client/storage/test/head.js and
+// devtools/server/tests/browser/head.js
+const SEPARATOR_GUID = "{9d414cc5-8319-0a04-0586-c0a6ae01670a}";
+
+loader.lazyRequireGetter(
+  this,
+  "TreeWidget",
+  "resource://devtools/client/shared/widgets/TreeWidget.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "TableWidget",
+  "resource://devtools/client/shared/widgets/TableWidget.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "debounce",
+  "resource://devtools/shared/debounce.js",
+  true
+);
+loader.lazyGetter(this, "standardSessionString", () => {
+  const l10n = new Localization(["devtools/client/storage.ftl"], true);
+  return l10n.formatValueSync("storage-expires-session");
+});
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  VariablesView: "resource://devtools/client/storage/VariablesView.sys.mjs",
+});
+
+const REASON = {
+  NEW_ROW: "new-row",
+  NEXT_50_ITEMS: "next-50-items",
+  POPULATE: "populate",
+  UPDATE: "update",
+};
+
+// How long we wait to debounce resize events
+const LAZY_RESIZE_INTERVAL_MS = 200;
+
+// Maximum length of item name to show in context menu label - will be
+// trimmed with ellipsis if it's longer.
+const ITEM_NAME_MAX_LENGTH = 32;
+
+const HEADERS_L10N_IDS = {
+  Cache: {
+    status: "storage-table-headers-cache-status",
+  },
+  cookies: {
+    creationTime: "storage-table-headers-cookies-creation-time",
+    expires: "storage-table-headers-cookies-expires",
+    lastAccessed: "storage-table-headers-cookies-last-accessed",
+    name: "storage-table-headers-cookies-name",
+    size: "storage-table-headers-cookies-size",
+    value: "storage-table-headers-cookies-value",
+  },
+  extensionStorage: {
+    area: "storage-table-headers-extension-storage-area",
+  },
+};
+
+// We only localize certain table headers. The headers that we do not localize
+// along with their label are stored in this dictionary for easy reference.
+const HEADERS_NON_L10N_STRINGS = {
+  Cache: {
+    url: "URL",
+  },
+  cookies: {
+    host: "Domain",
+    hostOnly: "HostOnly",
+    isHttpOnly: "HttpOnly",
+    isSecure: "Secure",
+    path: "Path",
+    sameSite: "SameSite",
+    uniqueKey: "Unique key",
+  },
+  extensionStorage: {
+    name: "Key",
+    value: "Value",
+  },
+  indexedDB: {
+    autoIncrement: "Auto Increment",
+    db: "Database Name",
+    indexes: "Indexes",
+    keyPath: "Key Path",
+    name: "Key",
+    objectStore: "Object Store Name",
+    objectStores: "Object Stores",
+    origin: "Origin",
+    storage: "Storage",
+    uniqueKey: "Unique key",
+    value: "Value",
+    version: "Version",
+  },
+  localStorage: {
+    name: "Key",
+    value: "Value",
+  },
+  sessionStorage: {
+    name: "Key",
+    value: "Value",
+  },
+};
+
+/**
+ * StorageUI is controls and builds the UI of the Storage Inspector.
+ *
+ * @param {Window} panelWin
+ *        Window of the toolbox panel to populate UI in.
+ * @param {Object} commands
+ *        The commands object with all interfaces defined from devtools/shared/commands/
+ */
+class StorageUI {
+  constructor(panelWin, toolbox, commands) {
+    EventEmitter.decorate(this);
+    this._window = panelWin;
+    this._panelDoc = panelWin.document;
+    this._toolbox = toolbox;
+    this._commands = commands;
+    this.sidebarToggledOpen = null;
+    this.shouldLoadMoreItems = true;
+
+    const treeNode = this._panelDoc.getElementById("storage-tree");
+    this.tree = new TreeWidget(treeNode, {
+      defaultType: "dir",
+      contextMenuId: "storage-tree-popup",
+    });
+    this.onHostSelect = this.onHostSelect.bind(this);
+    this.tree.on("select", this.onHostSelect);
+
+    const tableNode = this._panelDoc.getElementById("storage-table");
+    this.table = new TableWidget(tableNode, {
+      emptyText: "storage-table-empty-text",
+      highlightUpdated: true,
+      cellContextMenuId: "storage-table-popup",
+      l10n: this._panelDoc.l10n,
+    });
+
+    this.updateObjectSidebar = this.updateObjectSidebar.bind(this);
+    this.table.on(TableWidget.EVENTS.ROW_SELECTED, this.updateObjectSidebar);
+
+    this.handleScrollEnd = this.loadMoreItems.bind(this);
+    this.table.on(TableWidget.EVENTS.SCROLL_END, this.handleScrollEnd);
+
+    this.editItem = this.editItem.bind(this);
+    this.table.on(TableWidget.EVENTS.CELL_EDIT, this.editItem);
+
+    this.sidebar = this._panelDoc.getElementById("storage-sidebar");
+    this.sidebar.style.width = "300px";
+    this.view = new lazy.VariablesView(this.sidebar.firstChild, {
+      lazyEmpty: true,
+      // ms
+      lazyEmptyDelay: 10,
+      searchEnabled: true,
+      contextMenuId: "variable-view-popup",
+      preventDescriptorModifiers: true,
+    });
+
+    this.filterItems = this.filterItems.bind(this);
+    this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
+    this.setupToolbar();
+
+    this.handleKeypress = this.handleKeypress.bind(this);
+    this._panelDoc.addEventListener("keypress", this.handleKeypress);
+
+    this.onTreePopupShowing = this.onTreePopupShowing.bind(this);
+    this._treePopup = this._panelDoc.getElementById("storage-tree-popup");
+    this._treePopup.addEventListener("popupshowing", this.onTreePopupShowing);
+
+    this.onTablePopupShowing = this.onTablePopupShowing.bind(this);
+    this._tablePopup = this._panelDoc.getElementById("storage-table-popup");
+    this._tablePopup.addEventListener("popupshowing", this.onTablePopupShowing);
+
+    this.onVariableViewPopupShowing =
+      this.onVariableViewPopupShowing.bind(this);
+    this._variableViewPopup = this._panelDoc.getElementById(
+      "variable-view-popup"
+    );
+    this._variableViewPopup.addEventListener(
+      "popupshowing",
+      this.onVariableViewPopupShowing
+    );
+
+    this.onRefreshTable = this.onRefreshTable.bind(this);
+    this.onAddItem = this.onAddItem.bind(this);
+    this.onCopyItem = this.onCopyItem.bind(this);
+    this.onPanelWindowResize = debounce(
+      this.#onLazyPanelResize,
+      LAZY_RESIZE_INTERVAL_MS,
+      this
+    );
+    this.onRemoveItem = this.onRemoveItem.bind(this);
+    this.onRemoveAllFrom = this.onRemoveAllFrom.bind(this);
+    this.onRemoveAll = this.onRemoveAll.bind(this);
+    this.onRemoveAllSessionCookies = this.onRemoveAllSessionCookies.bind(this);
+    this.onRemoveTreeItem = this.onRemoveTreeItem.bind(this);
+
+    this._refreshButton = this._panelDoc.getElementById("refresh-button");
+    this._refreshButton.addEventListener("click", this.onRefreshTable);
+
+    this._addButton = this._panelDoc.getElementById("add-button");
+    this._addButton.addEventListener("click", this.onAddItem);
+
+    this._window.addEventListener("resize", this.onPanelWindowResize, true);
+
+    this._variableViewPopupCopy = this._panelDoc.getElementById(
+      "variable-view-popup-copy"
+    );
+    this._variableViewPopupCopy.addEventListener("command", this.onCopyItem);
+
+    this._tablePopupAddItem = this._panelDoc.getElementById(
+      "storage-table-popup-add"
+    );
+    this._tablePopupAddItem.addEventListener("command", this.onAddItem);
+
+    this._tablePopupDelete = this._panelDoc.getElementById(
+      "storage-table-popup-delete"
+    );
+    this._tablePopupDelete.addEventListener("command", this.onRemoveItem);
+
+    this._tablePopupDeleteAllFrom = this._panelDoc.getElementById(
+      "storage-table-popup-delete-all-from"
+    );
+    this._tablePopupDeleteAllFrom.addEventListener(
+      "command",
+      this.onRemoveAllFrom
+    );
+
+    this._tablePopupDeleteAll = this._panelDoc.getElementById(
+      "storage-table-popup-delete-all"
+    );
+    this._tablePopupDeleteAll.addEventListener("command", this.onRemoveAll);
+
+    this._tablePopupDeleteAllSessionCookies = this._panelDoc.getElementById(
+      "storage-table-popup-delete-all-session-cookies"
+    );
+    this._tablePopupDeleteAllSessionCookies.addEventListener(
+      "command",
+      this.onRemoveAllSessionCookies
+    );
+
+    this._treePopupDeleteAll = this._panelDoc.getElementById(
+      "storage-tree-popup-delete-all"
+    );
+    this._treePopupDeleteAll.addEventListener("command", this.onRemoveAll);
+
+    this._treePopupDeleteAllSessionCookies = this._panelDoc.getElementById(
+      "storage-tree-popup-delete-all-session-cookies"
+    );
+    this._treePopupDeleteAllSessionCookies.addEventListener(
+      "command",
+      this.onRemoveAllSessionCookies
+    );
+
+    this._treePopupDelete = this._panelDoc.getElementById(
+      "storage-tree-popup-delete"
+    );
+    this._treePopupDelete.addEventListener("command", this.onRemoveTreeItem);
+  }
+
+  get currentTarget() {
+    return this._commands.targetCommand.targetFront;
+  }
+
+  async init() {
+    // This is a distionary of arrays, keyed by storage key
+    // - Keys are storage keys, available on each storage resource, via ${resource.resourceKey}
+    //   and are typically "Cache", "cookies", "indexedDB", "localStorage", ...
+    // - Values are arrays of storage fronts. This isn't the deprecated global storage front (target.getFront(storage), only used by legacy listener),
+    //   but rather the storage specific front, i.e. a storage resource. Storage resources are fronts.
+    this.storageResources = {};
+
+    await this._initL10NStringsMap();
+
+    // This can only be done after l10n strings were retrieved as we're using "storage-filter-key"
+    const shortcuts = new KeyShortcuts({
+      window: this._panelDoc.defaultView,
+    });
+    const key = this._l10nStrings.get("storage-filter-key");
+    shortcuts.on(key, event => {
+      event.preventDefault();
+      this.searchBox.focus();
+    });
+
+    this._onTargetAvailable = this._onTargetAvailable.bind(this);
+    this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
+    await this._commands.targetCommand.watchTargets({
+      types: [this._commands.targetCommand.TYPES.FRAME],
+      onAvailable: this._onTargetAvailable,
+      onDestroyed: this._onTargetDestroyed,
+    });
+
+    this._onResourceListAvailable = this._onResourceListAvailable.bind(this);
+
+    const { resourceCommand } = this._toolbox;
+
+    this._listenedResourceTypes = [
+      // The first item in this list will be the first selected storage item
+      // Tests assume Cookie -- moving cookie will break tests
+      resourceCommand.TYPES.COOKIE,
+      resourceCommand.TYPES.CACHE_STORAGE,
+      resourceCommand.TYPES.INDEXED_DB,
+      resourceCommand.TYPES.LOCAL_STORAGE,
+      resourceCommand.TYPES.SESSION_STORAGE,
+    ];
+    // EXTENSION_STORAGE is only relevant when debugging web extensions
+    if (this._commands.descriptorFront.isWebExtensionDescriptor) {
+      this._listenedResourceTypes.push(resourceCommand.TYPES.EXTENSION_STORAGE);
+    }
+    await this._toolbox.resourceCommand.watchResources(
+      this._listenedResourceTypes,
+      {
+        onAvailable: this._onResourceListAvailable,
+      }
+    );
+  }
+
+  async _initL10NStringsMap() {
+    const ids = [
+      "storage-filter-key",
+      "storage-table-headers-cookies-name",
+      "storage-table-headers-cookies-value",
+      "storage-table-headers-cookies-expires",
+      "storage-table-headers-cookies-size",
+      "storage-table-headers-cookies-last-accessed",
+      "storage-table-headers-cookies-creation-time",
+      "storage-table-headers-cache-status",
+      "storage-table-headers-extension-storage-area",
+      "storage-tree-labels-cookies",
+      "storage-tree-labels-local-storage",
+      "storage-tree-labels-session-storage",
+      "storage-tree-labels-indexed-db",
+      "storage-tree-labels-cache",
+      "storage-tree-labels-extension-storage",
+      "storage-expires-session",
+    ];
+    const results = await this._panelDoc.l10n.formatValues(
+      ids.map(s => ({ id: s }))
+    );
+
+    this._l10nStrings = new Map(ids.map((id, i) => [id, results[i]]));
+  }
+
+  async _onResourceListAvailable(resources) {
+    for (const resource of resources) {
+      if (resource.isDestroyed()) {
+        continue;
+      }
+      const { resourceKey } = resource;
+
+      // NOTE: We might be getting more than 1 resource per storage type when
+      //       we have remote frames in content process resources, so we need
+      //       an array to store these.
+      if (!this.storageResources[resourceKey]) {
+        this.storageResources[resourceKey] = [];
+      }
+      this.storageResources[resourceKey].push(resource);
+
+      resource.on(
+        "single-store-update",
+        this._onStoreUpdate.bind(this, resource)
+      );
+      resource.on(
+        "single-store-cleared",
+        this._onStoreCleared.bind(this, resource)
+      );
+    }
+
+    try {
+      await this.populateStorageTree();
+    } catch (e) {
+      if (!this._toolbox || this._toolbox._destroyer) {
+        // The toolbox is in the process of being destroyed... in this case throwing here
+        // is expected and normal so let's ignore the error.
+        return;
+      }
+
+      // The toolbox is open so the error is unexpected and real so let's log it.
+      console.error(e);
+    }
+  }
+
+  // We only need to listen to target destruction, but TargetCommand.watchTarget
+  // requires a target available function...
+  async _onTargetAvailable({ targetFront }) {}
+
+  _onTargetDestroyed({ targetFront }) {
+    // Remove all storages related to this target
+    for (const type in this.storageResources) {
+      this.storageResources[type] = this.storageResources[type].filter(
+        storage => {
+          // Note that the storage front may already be destroyed,
+          // and have a null targetFront attribute. So also remove all already
+          // destroyed fronts.
+          return !storage.isDestroyed() && storage.targetFront != targetFront;
+        }
+      );
+    }
+
+    // Only support top level target and navigation to new processes.
+    // i.e. ignore additional targets created for remote <iframes>
+    if (!targetFront.isTopLevel) {
+      return;
+    }
+
+    this.storageResources = {};
+    this.table.clear();
+    this.hideSidebar();
+    this.tree.clear();
+  }
+
+  set animationsEnabled(value) {
+    this._panelDoc.documentElement.classList.toggle("no-animate", !value);
+  }
+
+  destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+
+    const { resourceCommand } = this._toolbox;
+    resourceCommand.unwatchResources(this._listenedResourceTypes, {
+      onAvailable: this._onResourceListAvailable,
+    });
+
+    this.table.off(TableWidget.EVENTS.ROW_SELECTED, this.updateObjectSidebar);
+    this.table.off(TableWidget.EVENTS.SCROLL_END, this.loadMoreItems);
+    this.table.off(TableWidget.EVENTS.CELL_EDIT, this.editItem);
+    this.table.destroy();
+
+    this._panelDoc.removeEventListener("keypress", this.handleKeypress);
+    this.searchBox.removeEventListener("input", this.filterItems);
+    this.searchBox = null;
+
+    this.sidebarToggleBtn.removeEventListener(
+      "click",
+      this.onPaneToggleButtonClicked
+    );
+    this.sidebarToggleBtn = null;
+
+    this._window.removeEventListener("resize", this.#onLazyPanelResize, true);
+
+    this._treePopup.removeEventListener(
+      "popupshowing",
+      this.onTreePopupShowing
+    );
+    this._refreshButton.removeEventListener("click", this.onRefreshTable);
+    this._addButton.removeEventListener("click", this.onAddItem);
+    this._tablePopupAddItem.removeEventListener("command", this.onAddItem);
+    this._treePopupDeleteAll.removeEventListener("command", this.onRemoveAll);
+    this._treePopupDeleteAllSessionCookies.removeEventListener(
+      "command",
+      this.onRemoveAllSessionCookies
+    );
+    this._treePopupDelete.removeEventListener("command", this.onRemoveTreeItem);
+
+    this._tablePopup.removeEventListener(
+      "popupshowing",
+      this.onTablePopupShowing
+    );
+    this._tablePopupDelete.removeEventListener("command", this.onRemoveItem);
+    this._tablePopupDeleteAllFrom.removeEventListener(
+      "command",
+      this.onRemoveAllFrom
+    );
+    this._tablePopupDeleteAll.removeEventListener("command", this.onRemoveAll);
+    this._tablePopupDeleteAllSessionCookies.removeEventListener(
+      "command",
+      this.onRemoveAllSessionCookies
+    );
+  }
+
+  setupToolbar() {
+    this.searchBox = this._panelDoc.getElementById("storage-searchbox");
+    this.searchBox.addEventListener("input", this.filterItems);
+
+    // Setup the sidebar toggle button.
+    this.sidebarToggleBtn = this._panelDoc.querySelector(".sidebar-toggle");
+    this.updateSidebarToggleButton();
+
+    this.sidebarToggleBtn.addEventListener(
+      "click",
+      this.onPaneToggleButtonClicked
+    );
+  }
+
+  onPaneToggleButtonClicked() {
+    if (this.sidebar.hidden && this.table.selectedRow) {
+      this.sidebar.hidden = false;
+      this.sidebarToggledOpen = true;
+      this.updateSidebarToggleButton();
+    } else {
+      this.sidebarToggledOpen = false;
+      this.hideSidebar();
+    }
+  }
+
+  updateSidebarToggleButton() {
+    let dataL10nId;
+    this.sidebarToggleBtn.hidden = !this.table.hasSelectedRow;
+
+    if (this.sidebar.hidden) {
+      this.sidebarToggleBtn.classList.add("pane-collapsed");
+      dataL10nId = "storage-expand-pane";
+    } else {
+      this.sidebarToggleBtn.classList.remove("pane-collapsed");
+      dataL10nId = "storage-collapse-pane";
+    }
+
+    this._panelDoc.l10n.setAttributes(this.sidebarToggleBtn, dataL10nId);
+  }
+
+  /**
+   * Hide the object viewer sidebar
+   */
+  hideSidebar() {
+    this.sidebar.hidden = true;
+    this.updateSidebarToggleButton();
+  }
+
+  getCurrentFront() {
+    const { datatype, host } = this.table;
+    return this._getStorage(datatype, host);
+  }
+
+  _getStorage(type, host) {
+    const storageType = this.storageResources[type];
+    return storageType.find(x => host in x.hosts);
+  }
+
+  /**
+   *  Make column fields editable
+   *
+   *  @param {Array} editableFields
+   *         An array of keys of columns to be made editable
+   */
+  makeFieldsEditable(editableFields) {
+    if (editableFields && editableFields.length) {
+      this.table.makeFieldsEditable(editableFields);
+    } else if (this.table._editableFieldsEngine) {
+      this.table._editableFieldsEngine.destroy();
+    }
+  }
+
+  editItem(data) {
+    const selectedItem = this.tree.selectedItem;
+    if (!selectedItem) {
+      return;
+    }
+    const front = this.getCurrentFront();
+
+    front.editItem(data);
+  }
+
+  /**
+   * Removes the given item from the storage table. Reselects the next item in
+   * the table and repopulates the sidebar with that item's data if the item
+   * being removed was selected.
+   */
+  async removeItemFromTable(name) {
+    if (this.table.isSelected(name) && this.table.items.size > 1) {
+      if (this.table.selectedIndex == 0) {
+        this.table.selectNextRow();
+      } else {
+        this.table.selectPreviousRow();
+      }
+    }
+
+    this.table.remove(name);
+    await this.updateObjectSidebar();
+  }
+
+  /**
+   * Event handler for "stores-cleared" event coming from the storage actor.
+   *
+   * @param {object}
+   *        An object containing which hosts/paths are cleared from a
+   *        storage
+   */
+  _onStoreCleared(resource, { clearedHostsOrPaths }) {
+    const { resourceKey } = resource;
+    function* enumPaths() {
+      if (Array.isArray(clearedHostsOrPaths)) {
+        // Handle the legacy response with array of hosts
+        for (const host of clearedHostsOrPaths) {
+          yield [host];
+        }
+      } else {
+        // Handle the new format that supports clearing sub-stores in a host
+        for (const host in clearedHostsOrPaths) {
+          const paths = clearedHostsOrPaths[host];
+
+          if (!paths.length) {
+            yield [host];
+          } else {
+            for (let path of paths) {
+              try {
+                path = JSON.parse(path);
+                yield [host, ...path];
+              } catch (ex) {
+                // ignore
+              }
+            }
+          }
+        }
+      }
+    }
+
+    for (const path of enumPaths()) {
+      // Find if the path is selected (there is max one) and clear it
+      if (this.tree.isSelected([resourceKey, ...path])) {
+        this.table.clear();
+        this.hideSidebar();
+
+        // Reset itemOffset to 0 so that items added after local storate is
+        // cleared will be shown
+        this.itemOffset = 0;
+
+        this.emit("store-objects-cleared");
+        break;
+      }
+    }
+  }
+
+  /**
+   * Event handler for "stores-update" event coming from the storage actor.
+   *
+   * @param {object} argument0
+   *        An object containing the details of the added, changed and deleted
+   *        storage objects.
+   *        Each of these 3 objects are of the following format:
+   *        {
+   *          <store_type1>: {
+   *            <host1>: [<store_names1>, <store_name2>...],
+   *            <host2>: [<store_names34>...], ...
+   *          },
+   *          <store_type2>: {
+   *            <host1>: [<store_names1>, <store_name2>...],
+   *            <host2>: [<store_names34>...], ...
+   *          }, ...
+   *        }
+   *        Where store_type1 and store_type2 is one of cookies, indexedDB,
+   *        sessionStorage and localStorage; host1, host2 are the host in which
+   *        this change happened; and [<store_namesX] is an array of the names
+   *        of the changed store objects. This array is empty for deleted object
+   *        if the host was completely removed.
+   */
+  async _onStoreUpdate(resource, update) {
+    const { changed, added, deleted } = update;
+    if (added) {
+      await this.handleAddedItems(added);
+    }
+
+    if (changed) {
+      await this.handleChangedItems(changed);
+    }
+
+    // We are dealing with batches of changes here. Deleted **MUST** come last in case it
+    // is in the same batch as added and changed events e.g.
+    //   - An item is changed then deleted in the same batch: deleted then changed will
+    //     display an item that has been deleted.
+    //   - An item is added then deleted in the same batch: deleted then added will
+    //     display an item that has been deleted.
+    if (deleted) {
+      await this.handleDeletedItems(deleted);
+    }
+
+    if (added || deleted || changed) {
+      this.emit("store-objects-edit");
+    }
+  }
+
+  /**
+   * If the panel is resized we need to check if we should load the next batch of
+   * storage items.
+   */
+  async #onLazyPanelResize() {
+    // We can be called on a closed window or destroyed toolbox because of the
+    // deferred task.
+    if (this._window.closed || this._destroyed || this.table.hasScrollbar) {
+      return;
+    }
+
+    await this.loadMoreItems();
+    this.emit("storage-resize");
+  }
+
+  /**
+   * Get a string for a column name automatically choosing whether or not the
+   * string should be localized.
+   *
+   * @param {String} type
+   *        The storage type.
+   * @param {String} name
+   *        The field name that may need to be localized.
+   */
+  _getColumnName(type, name) {
+    // If the ID exists in HEADERS_NON_L10N_STRINGS then we do not translate it
+    const columnName = HEADERS_NON_L10N_STRINGS[type]?.[name];
+    if (columnName) {
+      return columnName;
+    }
+
+    // otherwise we get it from the L10N Map (populated during init)
+    const l10nId = HEADERS_L10N_IDS[type]?.[name];
+    if (l10nId && this._l10nStrings.has(l10nId)) {
+      return this._l10nStrings.get(l10nId);
+    }
+
+    // If the string isn't localized, we will just use the field name.
+    return name;
+  }
+
+  /**
+   * Handle added items received by onEdit
+   *
+   * @param {object} See onEdit docs
+   */
+  async handleAddedItems(added) {
+    for (const type in added) {
+      for (const host in added[type]) {
+        const label = this.getReadableLabelFromHostname(host);
+        this.tree.add([type, { id: host, label, type: "url" }]);
+        for (let name of added[type][host]) {
+          try {
+            name = JSON.parse(name);
+            if (name.length == 3) {
+              name.splice(2, 1);
+            }
+            this.tree.add([type, host, ...name]);
+            if (!this.tree.selectedItem) {
+              this.tree.selectedItem = [type, host, name[0], name[1]];
+              await this.fetchStorageObjects(
+                type,
+                host,
+                [JSON.stringify(name)],
+                REASON.NEW_ROW
+              );
+            }
+          } catch (ex) {
+            // Do nothing
+          }
+        }
+
+        if (this.tree.isSelected([type, host])) {
+          await this.fetchStorageObjects(
+            type,
+            host,
+            added[type][host],
+            REASON.NEW_ROW
+          );
+        }
+      }
+    }
+  }
+
+  /**
+   * Handle deleted items received by onEdit
+   *
+   * @param {object} See onEdit docs
+   */
+  async handleDeletedItems(deleted) {
+    for (const type in deleted) {
+      for (const host in deleted[type]) {
+        if (!deleted[type][host].length) {
+          // This means that the whole host is deleted, thus the item should
+          // be removed from the storage tree
+          if (this.tree.isSelected([type, host])) {
+            this.table.clear();
+            this.hideSidebar();
+            this.tree.selectPreviousItem();
+          }
+
+          this.tree.remove([type, host]);
+        } else {
+          for (const name of deleted[type][host]) {
+            try {
+              if (["indexedDB", "Cache"].includes(type)) {
+                // For indexedDB and Cache, the key is being parsed because
+                // these storages are represented as a tree and the key
+                // used to notify their changes is not a simple string.
+                const names = JSON.parse(name);
+                // Is a whole cache, database or objectstore deleted?
+                // Then remove it from the tree.
+                if (names.length < 3) {
+                  if (this.tree.isSelected([type, host, ...names])) {
+                    this.table.clear();
+                    this.hideSidebar();
+                    this.tree.selectPreviousItem();
+                  }
+                  this.tree.remove([type, host, ...names]);
+                }
+
+                // Remove the item from table if currently displayed.
+                if (names.length) {
+                  const tableItemName = names.pop();
+                  if (this.tree.isSelected([type, host, ...names])) {
+                    await this.removeItemFromTable(tableItemName);
+                  }
+                }
+              } else if (this.tree.isSelected([type, host])) {
+                // For all the other storage types with a simple string key,
+                // remove the item from the table by name without any parsing.
+                await this.removeItemFromTable(name);
+              }
+            } catch (ex) {
+              if (this.tree.isSelected([type, host])) {
+                await this.removeItemFromTable(name);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Handle changed items received by onEdit
+   *
+   * @param {object} See onEdit docs
+   */
+  async handleChangedItems(changed) {
+    const selectedItem = this.tree.selectedItem;
+    if (!selectedItem) {
+      return;
+    }
+
+    const [type, host, db, objectStore] = selectedItem;
+    if (!changed[type] || !changed[type][host] || !changed[type][host].length) {
+      return;
+    }
+    try {
+      const toUpdate = [];
+      for (const name of changed[type][host]) {
+        if (["indexedDB", "Cache"].includes(type)) {
+          // For indexedDB and Cache, the key is being parsed because
+          // these storage are represented as a tree and the key
+          // used to notify their changes is not a simple string.
+          const names = JSON.parse(name);
+          if (names[0] == db && names[1] == objectStore && names[2]) {
+            toUpdate.push(name);
+          }
+        } else {
+          // For all the other storage types with a simple string key,
+          // update the item from the table by name without any parsing.
+          toUpdate.push(name);
+        }
+      }
+      await this.fetchStorageObjects(type, host, toUpdate, REASON.UPDATE);
+    } catch (ex) {
+      await this.fetchStorageObjects(
+        type,
+        host,
+        changed[type][host],
+        REASON.UPDATE
+      );
+    }
+  }
+
+  /**
+   * Fetches the storage objects from the storage actor and populates the
+   * storage table with the returned data.
+   *
+   * @param {string} type
+   *        The type of storage. Ex. "cookies"
+   * @param {string} host
+   *        Hostname
+   * @param {array} names
+   *        Names of particular store objects. Empty if all are requested
+   * @param {Constant} reason
+   *        See REASON constant at top of file.
+   */
+  async fetchStorageObjects(type, host, names, reason) {
+    const fetchOpts =
+      reason === REASON.NEXT_50_ITEMS ? { offset: this.itemOffset } : {};
+    fetchOpts.sessionString = standardSessionString;
+    const storage = this._getStorage(type, host);
+    this.sidebarToggledOpen = null;
+
+    if (
+      reason !== REASON.NEXT_50_ITEMS &&
+      reason !== REASON.UPDATE &&
+      reason !== REASON.NEW_ROW &&
+      reason !== REASON.POPULATE
+    ) {
+      throw new Error("Invalid reason specified");
+    }
+
+    try {
+      if (
+        reason === REASON.POPULATE ||
+        (reason === REASON.NEW_ROW && this.table.items.size === 0)
+      ) {
+        let subType = null;
+        // The indexedDB type could have sub-type data to fetch.
+        // If having names specified, then it means
+        // we are fetching details of specific database or of object store.
+        if (type === "indexedDB" && names) {
+          const [dbName, objectStoreName] = JSON.parse(names[0]);
+          if (dbName) {
+            subType = "database";
+          }
+          if (objectStoreName) {
+            subType = "object store";
+          }
+        }
+
+        await this.resetColumns(type, host, subType);
+      }
+
+      const { data, total } = await storage.getStoreObjects(
+        host,
+        names,
+        fetchOpts
+      );
+      if (data.length) {
+        await this.populateTable(data, reason, total);
+      } else if (reason === REASON.POPULATE) {
+        await this.clearHeaders();
+      }
+      this.updateToolbar();
+      this.emit("store-objects-updated");
+    } catch (ex) {
+      console.error(ex);
+    }
+  }
+
+  supportsAddItem(type, host) {
+    const storage = this._getStorage(type, host);
+    return storage?.traits.supportsAddItem || false;
+  }
+
+  supportsRemoveItem(type, host) {
+    const storage = this._getStorage(type, host);
+    return storage?.traits.supportsRemoveItem || false;
+  }
+
+  supportsRemoveAll(type, host) {
+    const storage = this._getStorage(type, host);
+    return storage?.traits.supportsRemoveAll || false;
+  }
+
+  supportsRemoveAllSessionCookies(type, host) {
+    const storage = this._getStorage(type, host);
+    return storage?.traits.supportsRemoveAllSessionCookies || false;
+  }
+
+  /**
+   * Updates the toolbar hiding and showing buttons as appropriate.
+   */
+  updateToolbar() {
+    const item = this.tree.selectedItem;
+    if (!item) {
+      return;
+    }
+
+    const [type, host] = item;
+
+    // Add is only supported if the selected item has a host.
+    this._addButton.hidden = !host || !this.supportsAddItem(type, host);
+  }
+
+  /**
+   * Populates the storage tree which displays the list of storages present for
+   * the page.
+   */
+  async populateStorageTree() {
+    const populateTreeFromResource = (type, resource) => {
+      for (const host in resource.hosts) {
+        const label = this.getReadableLabelFromHostname(host);
+        this.tree.add([type, { id: host, label, type: "url" }]);
+        for (const name of resource.hosts[host]) {
+          try {
+            const names = JSON.parse(name);
+            this.tree.add([type, host, ...names]);
+            if (!this.tree.selectedItem) {
+              this.tree.selectedItem = [type, host, names[0], names[1]];
+            }
+          } catch (ex) {
+            // Do Nothing
+          }
+        }
+        if (!this.tree.selectedItem) {
+          this.tree.selectedItem = [type, host];
+        }
+      }
+    };
+
+    // When can we expect the "store-objects-updated" event?
+    //   -> TreeWidget setter `selectedItem` emits a "select" event
+    //   -> on tree "select" event, this module calls `onHostSelect`
+    //   -> finally `onHostSelect` calls `fetchStorageObjects`, which will emit
+    //      "store-objects-updated" at the end of the method.
+    // So if the selection changed, we can wait for "store-objects-updated",
+    // which is emitted at the end of `fetchStorageObjects`.
+    const onStoresObjectsUpdated = this.once("store-objects-updated");
+
+    // Save the initially selected item to check if tree.selected was updated,
+    // see comment above.
+    const initialSelectedItem = this.tree.selectedItem;
+
+    for (const [type, resources] of Object.entries(this.storageResources)) {
+      let typeLabel = type;
+      try {
+        typeLabel = this.getStorageTypeLabel(type);
+      } catch (e) {
+        console.error("Unable to localize tree label type:" + type);
+      }
+
+      this.tree.add([{ id: type, label: typeLabel, type: "store" }]);
+
+      // storageResources values are arrays, with storage resources.
+      // we may have many storage resources per type if we get remote iframes.
+      for (const resource of resources) {
+        populateTreeFromResource(type, resource);
+      }
+    }
+
+    if (initialSelectedItem !== this.tree.selectedItem) {
+      await onStoresObjectsUpdated;
+    }
+  }
+
+  getStorageTypeLabel(type) {
+    let dataL10nId;
+
+    switch (type) {
+      case "cookies":
+        dataL10nId = "storage-tree-labels-cookies";
+        break;
+      case "localStorage":
+        dataL10nId = "storage-tree-labels-local-storage";
+        break;
+      case "sessionStorage":
+        dataL10nId = "storage-tree-labels-session-storage";
+        break;
+      case "indexedDB":
+        dataL10nId = "storage-tree-labels-indexed-db";
+        break;
+      case "Cache":
+        dataL10nId = "storage-tree-labels-cache";
+        break;
+      case "extensionStorage":
+        dataL10nId = "storage-tree-labels-extension-storage";
+        break;
+      default:
+        throw new Error("Unknown storage type");
+    }
+
+    return this._l10nStrings.get(dataL10nId);
+  }
+
+  /**
+   * Populates the selected entry from the table in the sidebar for a more
+   * detailed view.
+   */
+  /* eslint-disable-next-line */
+  async updateObjectSidebar() {
+    const item = this.table.selectedRow;
+    let value;
+
+    // Get the string value (async action) and the update the UI synchronously.
+    if ((item?.name || item?.name === "") && item?.valueActor) {
+      value = await item.valueActor.string();
+    }
+
+    // Bail if the selectedRow is no longer selected, the item doesn't exist or the state
+    // changed in another way during the above yield.
+    if (
+      this.table.items.size === 0 ||
+      !item ||
+      !this.table.selectedRow ||
+      item.uniqueKey !== this.table.selectedRow.uniqueKey
+    ) {
+      this.hideSidebar();
+      return;
+    }
+
+    // Start updating the UI. Everything is sync beyond this point.
+    if (this.sidebarToggledOpen === null || this.sidebarToggledOpen === true) {
+      this.sidebar.hidden = false;
+    }
+
+    this.updateSidebarToggleButton();
+    this.view.empty();
+    const mainScope = this.view.addScope("storage-data");
+    mainScope.expanded = true;
+
+    if (value) {
+      const itemVar = mainScope.addItem(item.name + "", {}, { relaxed: true });
+
+      // The main area where the value will be displayed
+      itemVar.setGrip(value);
+
+      // May be the item value is a json or a key value pair itself
+      const obj = parseItemValue(value);
+      if (typeof obj === "object") {
+        this.populateSidebar(item.name, obj);
+      }
+
+      // By default the item name and value are shown. If this is the only
+      // information available, then nothing else is to be displayed.
+      const itemProps = Object.keys(item);
+      if (itemProps.length > 3) {
+        // Display any other information other than the item name and value
+        // which may be available.
+        const rawObject = Object.create(null);
+        const otherProps = itemProps.filter(
+          e => !["name", "value", "valueActor"].includes(e)
+        );
+        for (const prop of otherProps) {
+          const column = this.table.columns.get(prop);
+          if (column?.private) {
+            continue;
+          }
+
+          const fieldName = this._getColumnName(this.table.datatype, prop);
+          rawObject[fieldName] = item[prop];
+        }
+        itemVar.populate(rawObject, { sorted: true });
+        itemVar.twisty = true;
+        itemVar.expanded = true;
+      }
+    } else {
+      // Case when displaying IndexedDB db/object store properties.
+      for (const key in item) {
+        const column = this.table.columns.get(key);
+        if (column?.private) {
+          continue;
+        }
+
+        mainScope.addItem(key, {}, true).setGrip(item[key]);
+        const obj = parseItemValue(item[key]);
+        if (typeof obj === "object") {
+          this.populateSidebar(item.name, obj);
+        }
+      }
+    }
+
+    this.emit("sidebar-updated");
+  }
+
+  /**
+   * Gets a readable label from the hostname. If the hostname is a Punycode
+   * domain(I.e. an ASCII domain name representing a Unicode domain name), then
+   * this function decodes it to the readable Unicode domain name, and label
+   * the Unicode domain name toggether with the original domian name, and then
+   * return the label; if the hostname isn't a Punycode domain(I.e. it isn't
+   * encoded and is readable on its own), then this function simply returns the
+   * original hostname.
+   *
+   * @param {string} host
+   *        The string representing a host, e.g, example.com, example.com:8000
+   */
+  getReadableLabelFromHostname(host) {
+    try {
+      const { hostname } = new URL(host);
+      const unicodeHostname = getUnicodeHostname(hostname);
+      if (hostname !== unicodeHostname) {
+        // If the hostname is a Punycode domain representing a Unicode domain,
+        // we decode it to the Unicode domain name, and then label the Unicode
+        // domain name together with the original domain name.
+        return host.replace(hostname, unicodeHostname) + " [ " + host + " ]";
+      }
+    } catch (_) {
+      // Skip decoding for a host which doesn't include a domain name, simply
+      // consider them to be readable.
+    }
+    return host;
+  }
+
+  /**
+   * Populates the sidebar with a parsed object.
+   *
+   * @param {object} obj - Either a json or a key-value separated object or a
+   * key separated array
+   */
+  populateSidebar(name, obj) {
+    const jsonObject = Object.create(null);
+    const view = this.view;
+    jsonObject[name] = obj;
+    const valueScope =
+      view.getScopeAtIndex(1) || view.addScope("storage-parsed-value");
+    valueScope.expanded = true;
+    const jsonVar = valueScope.addItem("", Object.create(null), {
+      relaxed: true,
+    });
+    jsonVar.expanded = true;
+    jsonVar.twisty = true;
+    jsonVar.populate(jsonObject, { expanded: true });
+  }
+
+  /**
+   * Select handler for the storage tree. Fetches details of the selected item
+   * from the storage details and populates the storage tree.
+   *
+   * @param {array} item
+   *        An array of ids which represent the location of the selected item in
+   *        the storage tree
+   */
+  async onHostSelect(item) {
+    if (!item) {
+      return;
+    }
+
+    this.table.clear();
+    this.hideSidebar();
+    this.searchBox.value = "";
+
+    const [type, host] = item;
+    this.table.host = host;
+    this.table.datatype = type;
+
+    this.updateToolbar();
+
+    let names = null;
+    if (!host) {
+      let storageTypeHintL10nId = "";
+      switch (type) {
+        case "Cache":
+          storageTypeHintL10nId = "storage-table-type-cache-hint";
+          break;
+        case "cookies":
+          storageTypeHintL10nId = "storage-table-type-cookies-hint";
+          break;
+        case "extensionStorage":
+          storageTypeHintL10nId = "storage-table-type-extensionstorage-hint";
+          break;
+        case "localStorage":
+          storageTypeHintL10nId = "storage-table-type-localstorage-hint";
+          break;
+        case "indexedDB":
+          storageTypeHintL10nId = "storage-table-type-indexeddb-hint";
+          break;
+        case "sessionStorage":
+          storageTypeHintL10nId = "storage-table-type-sessionstorage-hint";
+          break;
+      }
+      this.table.setPlaceholder(
+        storageTypeHintL10nId,
+        getStorageTypeURL(this.table.datatype)
+      );
+
+      // If selected item has no host then reset table headers
+      await this.clearHeaders();
+      return;
+    }
+    if (item.length > 2) {
+      names = [JSON.stringify(item.slice(2))];
+    }
+
+    this.itemOffset = 0;
+    await this.fetchStorageObjects(type, host, names, REASON.POPULATE);
+  }
+
+  /**
+   * Clear the column headers in the storage table
+   */
+  async clearHeaders() {
+    this.table.setColumns({}, null, {}, {});
+  }
+
+  /**
+   * Resets the column headers in the storage table with the pased object `data`
+   *
+   * @param {string} type
+   *        The type of storage corresponding to the after-reset columns in the
+   *        table.
+   * @param {string} host
+   *        The host name corresponding to the table after reset.
+   *
+   * @param {string} [subType]
+   *        The sub type under the given type.
+   */
+  async resetColumns(type, host, subtype) {
+    this.table.host = host;
+    this.table.datatype = type;
+
+    let uniqueKey = null;
+    const columns = {};
+    const editableFields = [];
+    const hiddenFields = [];
+    const privateFields = [];
+    const fields = await this.getCurrentFront().getFields(subtype);
+
+    fields.forEach(f => {
+      if (!uniqueKey) {
+        this.table.uniqueId = uniqueKey = f.name;
+      }
+
+      if (f.editable) {
+        editableFields.push(f.name);
+      }
+
+      if (f.hidden) {
+        hiddenFields.push(f.name);
+      }
+
+      if (f.private) {
+        privateFields.push(f.name);
+      }
+
+      const columnName = this._getColumnName(type, f.name);
+      if (columnName) {
+        columns[f.name] = columnName;
+      } else if (!f.private) {
+        // Private fields are only displayed when running tests so there is no
+        // need to log an error if they are not localized.
+        columns[f.name] = f.name;
+        console.error(
+          `No string defined in HEADERS_NON_L10N_STRINGS for '${type}.${f.name}'`
+        );
+      }
+    });
+
+    this.table.setColumns(columns, null, hiddenFields, privateFields);
+    this.hideSidebar();
+
+    this.makeFieldsEditable(editableFields);
+  }
+
+  /**
+   * Populates or updates the rows in the storage table.
+   *
+   * @param {array[object]} data
+   *        Array of objects to be populated in the storage table
+   * @param {Constant} reason
+   *        See REASON constant at top of file.
+   * @param {number} totalAvailable
+   *        The total number of items available in the current storage type.
+   */
+  async populateTable(data, reason, totalAvailable) {
+    for (const item of data) {
+      if (item.value) {
+        item.valueActor = item.value;
+        item.value = item.value.initial || "";
+      }
+      if (item.expires != null) {
+        item.expires = item.expires
+          ? new Date(item.expires).toUTCString()
+          : this._l10nStrings.get("storage-expires-session");
+      }
+      if (item.creationTime != null) {
+        item.creationTime = new Date(item.creationTime).toUTCString();
+      }
+      if (item.lastAccessed != null) {
+        item.lastAccessed = new Date(item.lastAccessed).toUTCString();
+      }
+
+      switch (reason) {
+        case REASON.POPULATE:
+        case REASON.NEXT_50_ITEMS:
+          // Update without flashing the row.
+          this.table.push(item, true);
+          break;
+        case REASON.NEW_ROW:
+          // Update and flash the row.
+          this.table.push(item, false);
+          break;
+        case REASON.UPDATE:
+          this.table.update(item);
+          if (item == this.table.selectedRow && !this.sidebar.hidden) {
+            await this.updateObjectSidebar();
+          }
+          break;
+      }
+
+      this.shouldLoadMoreItems = true;
+    }
+
+    if (
+      (reason === REASON.POPULATE || reason === REASON.NEXT_50_ITEMS) &&
+      this.table.items.size < totalAvailable &&
+      !this.table.hasScrollbar
+    ) {
+      await this.loadMoreItems();
+    }
+  }
+
+  /**
+   * Handles keypress event on the body table to close the sidebar when open
+   *
+   * @param {DOMEvent} event
+   *        The event passed by the keypress event.
+   */
+  handleKeypress(event) {
+    if (event.keyCode == KeyCodes.DOM_VK_ESCAPE) {
+      if (!this.sidebar.hidden) {
+        this.hideSidebar();
+        this.sidebarToggledOpen = false;
+        // Stop Propagation to prevent opening up of split console
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    } else if (
+      event.keyCode == KeyCodes.DOM_VK_BACK_SPACE ||
+      event.keyCode == KeyCodes.DOM_VK_DELETE
+    ) {
+      if (this.table.selectedRow && event.target.localName != "input") {
+        this.onRemoveItem(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }
+  }
+
+  /**
+   * Handles filtering the table
+   */
+  filterItems() {
+    const value = this.searchBox.value;
+    this.table.filterItems(value, ["valueActor"]);
+    this._panelDoc.documentElement.classList.toggle("filtering", !!value);
+  }
+
+  /**
+   * Load the next batch of 50 items
+   */
+  async loadMoreItems() {
+    if (
+      !this.shouldLoadMoreItems ||
+      this._toolbox.currentToolId !== "storage" ||
+      !this.tree.selectedItem
+    ) {
+      return;
+    }
+    this.shouldLoadMoreItems = false;
+    this.itemOffset += 50;
+
+    const item = this.tree.selectedItem;
+    const [type, host] = item;
+    let names = null;
+    if (item.length > 2) {
+      names = [JSON.stringify(item.slice(2))];
+    }
+    await this.fetchStorageObjects(type, host, names, REASON.NEXT_50_ITEMS);
+  }
+
+  /**
+   * Fires before a cell context menu with the "Add" or "Delete" action is
+   * shown. If the currently selected storage object doesn't support adding or
+   * removing items, prevent showing the menu.
+   */
+  onTablePopupShowing(event) {
+    const selectedItem = this.tree.selectedItem;
+    const [type, host] = selectedItem;
+
+    // IndexedDB only supports removing items from object stores (level 4 of the tree)
+    if (
+      (!this.supportsAddItem(type, host) &&
+        !this.supportsRemoveItem(type, host)) ||
+      (type === "indexedDB" && selectedItem.length !== 4)
+    ) {
+      event.preventDefault();
+      return;
+    }
+
+    const rowId = this.table.contextMenuRowId;
+    const data = this.table.items.get(rowId);
+
+    if (this.supportsRemoveItem(type, host)) {
+      const name = data[this.table.uniqueId];
+      const separatorRegex = new RegExp(SEPARATOR_GUID, "g");
+      const label = addEllipsis((name + "").replace(separatorRegex, "-"));
+
+      this._panelDoc.l10n.setArgs(this._tablePopupDelete, { itemName: label });
+      this._tablePopupDelete.hidden = false;
+    } else {
+      this._tablePopupDelete.hidden = true;
+    }
+
+    this._tablePopupAddItem.hidden = !this.supportsAddItem(type, host);
+
+    let showDeleteAllSessionCookies = false;
+    if (this.supportsRemoveAllSessionCookies(type, host)) {
+      if (selectedItem.length === 2) {
+        showDeleteAllSessionCookies = true;
+      }
+    }
+
+    this._tablePopupDeleteAllSessionCookies.hidden =
+      !showDeleteAllSessionCookies;
+
+    if (type === "cookies") {
+      const hostString = addEllipsis(data.host);
+
+      this._panelDoc.l10n.setArgs(this._tablePopupDeleteAllFrom, {
+        host: hostString,
+      });
+      this._tablePopupDeleteAllFrom.hidden = false;
+    } else {
+      this._tablePopupDeleteAllFrom.hidden = true;
+    }
+  }
+
+  onTreePopupShowing(event) {
+    let showMenu = false;
+    const selectedItem = this.tree.selectedItem;
+
+    if (selectedItem) {
+      const [type, host] = selectedItem;
+
+      // The delete all (aka clear) action is displayed for IndexedDB object stores
+      // (level 4 of tree), for Cache objects (level 3) and for the whole host (level 2)
+      // for other storage types (cookies, localStorage, ...).
+      let showDeleteAll = false;
+      if (this.supportsRemoveAll(type, host)) {
+        let level;
+        if (type == "indexedDB") {
+          level = 4;
+        } else if (type == "Cache") {
+          level = 3;
+        } else {
+          level = 2;
+        }
+
+        if (selectedItem.length == level) {
+          showDeleteAll = true;
+        }
+      }
+
+      this._treePopupDeleteAll.hidden = !showDeleteAll;
+
+      // The delete all session cookies action is displayed for cookie object stores
+      // (level 2 of tree)
+      let showDeleteAllSessionCookies = false;
+      if (this.supportsRemoveAllSessionCookies(type, host)) {
+        if (type === "cookies" && selectedItem.length === 2) {
+          showDeleteAllSessionCookies = true;
+        }
+      }
+
+      this._treePopupDeleteAllSessionCookies.hidden =
+        !showDeleteAllSessionCookies;
+
+      // The delete action is displayed for:
+      // - IndexedDB databases (level 3 of the tree)
+      // - Cache objects (level 3 of the tree)
+      const showDelete =
+        (type == "indexedDB" || type == "Cache") && selectedItem.length == 3;
+      this._treePopupDelete.hidden = !showDelete;
+      if (showDelete) {
+        const itemName = addEllipsis(selectedItem[selectedItem.length - 1]);
+        this._panelDoc.l10n.setArgs(this._treePopupDelete, { itemName });
+      }
+
+      showMenu = showDeleteAll || showDelete;
+    }
+
+    if (!showMenu) {
+      event.preventDefault();
+    }
+  }
+
+  onVariableViewPopupShowing(event) {
+    const item = this.view.getFocusedItem();
+    this._variableViewPopupCopy.setAttribute("disabled", !item);
+  }
+
+  /**
+   * Handles refreshing the selected storage
+   */
+  async onRefreshTable() {
+    await this.onHostSelect(this.tree.selectedItem);
+  }
+
+  /**
+   * Handles adding an item from the storage
+   */
+  onAddItem() {
+    const selectedItem = this.tree.selectedItem;
+    if (!selectedItem) {
+      return;
+    }
+
+    const front = this.getCurrentFront();
+    const [, host] = selectedItem;
+
+    // Prepare to scroll into view.
+    this.table.scrollIntoViewOnUpdate = true;
+    this.table.editBookmark = createGUID();
+    front.addItem(this.table.editBookmark, host);
+  }
+
+  /**
+   * Handles copy an item from the storage
+   */
+  onCopyItem() {
+    this.view._copyItem();
+  }
+
+  /**
+   * Handles removing an item from the storage
+   *
+   * @param {DOMEvent} event
+   *        The event passed by the command or keypress event.
+   */
+  onRemoveItem(event) {
+    const [, host, ...path] = this.tree.selectedItem;
+    const front = this.getCurrentFront();
+    const uniqueId = this.table.uniqueId;
+    const rowId =
+      event.type == "command"
+        ? this.table.contextMenuRowId
+        : this.table.selectedRow[uniqueId];
+    const data = this.table.items.get(rowId);
+
+    let name = data[uniqueId];
+    if (path.length) {
+      name = JSON.stringify([...path, name]);
+    }
+    front.removeItem(host, name);
+
+    return false;
+  }
+
+  /**
+   * Handles removing all items from the storage
+   */
+  onRemoveAll() {
+    // Cannot use this.currentActor() if the handler is called from the
+    // tree context menu: it returns correct value only after the table
+    // data from server are successfully fetched (and that's async).
+    const [, host, ...path] = this.tree.selectedItem;
+    const front = this.getCurrentFront();
+    const name = path.length ? JSON.stringify(path) : undefined;
+    front.removeAll(host, name);
+  }
+
+  /**
+   * Handles removing all session cookies from the storage
+   */
+  onRemoveAllSessionCookies() {
+    // Cannot use this.currentActor() if the handler is called from the
+    // tree context menu: it returns the correct value only after the
+    // table data from server is successfully fetched (and that's async).
+    const [, host, ...path] = this.tree.selectedItem;
+    const front = this.getCurrentFront();
+    const name = path.length ? JSON.stringify(path) : undefined;
+    front.removeAllSessionCookies(host, name);
+  }
+
+  /**
+   * Handles removing all cookies with exactly the same domain as the
+   * cookie in the selected row.
+   */
+  onRemoveAllFrom() {
+    const [, host] = this.tree.selectedItem;
+    const front = this.getCurrentFront();
+    const rowId = this.table.contextMenuRowId;
+    const data = this.table.items.get(rowId);
+
+    front.removeAll(host, data.host);
+  }
+
+  onRemoveTreeItem() {
+    const [type, host, ...path] = this.tree.selectedItem;
+
+    if (type == "indexedDB" && path.length == 1) {
+      this.removeDatabase(host, path[0]);
+    } else if (type == "Cache" && path.length == 1) {
+      this.removeCache(host, path[0]);
+    }
+  }
+
+  async removeDatabase(host, dbName) {
+    const front = this.getCurrentFront();
+
+    try {
+      const result = await front.removeDatabase(host, dbName);
+      if (result.blocked) {
+        const notificationBox = this._toolbox.getNotificationBox();
+        const message = await this._panelDoc.l10n.formatValue(
+          "storage-idb-delete-blocked",
+          { dbName }
+        );
+
+        notificationBox.appendNotification(
+          message,
+          "storage-idb-delete-blocked",
+          null,
+          notificationBox.PRIORITY_WARNING_LOW
+        );
+      }
+    } catch (error) {
+      const notificationBox = this._toolbox.getNotificationBox();
+      const message = await this._panelDoc.l10n.formatValue(
+        "storage-idb-delete-error",
+        { dbName }
+      );
+      notificationBox.appendNotification(
+        message,
+        "storage-idb-delete-error",
+        null,
+        notificationBox.PRIORITY_CRITICAL_LOW
+      );
+    }
+  }
+
+  removeCache(host, cacheName) {
+    const front = this.getCurrentFront();
+
+    front.removeItem(host, JSON.stringify([cacheName]));
+  }
+}
+
+exports.StorageUI = StorageUI;
+
+// Helper Functions
+
+function createGUID() {
+  return "{cccccccc-cccc-4ccc-yccc-cccccccccccc}".replace(/[cy]/g, c => {
+    const r = (Math.random() * 16) | 0;
+    const v = c == "c" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+function addEllipsis(name) {
+  if (name.length > ITEM_NAME_MAX_LENGTH) {
+    if (/^https?:/.test(name)) {
+      // For URLs, add ellipsis in the middle
+      const halfLen = ITEM_NAME_MAX_LENGTH / 2;
+      return name.slice(0, halfLen) + ELLIPSIS + name.slice(-halfLen);
+    }
+
+    // For other strings, add ellipsis at the end
+    return name.substr(0, ITEM_NAME_MAX_LENGTH) + ELLIPSIS;
+  }
+
+  return name;
+}