Quelle ui.js Sprache: JAVA

/* 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",
    partitionKey: "Partition Key",
    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");

    // Set suggested sizes for the xul:splitter's, so that the sidebar doesn't take too much space
    // in horizontal mode (width) and vertical (height).
    this.sidebar.style.width = "300px";
    this.sidebar.style.height = "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() {}

  _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() {
    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;
}

quality95%

¤ Dauer der Verarbeitung: 0.22 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung ist noch experimentell.