diff options
Diffstat (limited to 'devtools/client/storage/ui.js')
| -rw-r--r-- | devtools/client/storage/ui.js | 1073 |
1 files changed, 1073 insertions, 0 deletions
diff --git a/devtools/client/storage/ui.js b/devtools/client/storage/ui.js new file mode 100644 index 000000000..6af493e44 --- /dev/null +++ b/devtools/client/storage/ui.js @@ -0,0 +1,1073 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 {Task} = require("devtools/shared/task"); +const EventEmitter = require("devtools/shared/event-emitter"); +const {LocalizationHelper, ELLIPSIS} = require("devtools/shared/l10n"); +const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts"); +const JSOL = require("devtools/client/shared/vendor/jsol"); +const {KeyCodes} = require("devtools/client/shared/keycodes"); + +loader.lazyRequireGetter(this, "TreeWidget", + "devtools/client/shared/widgets/TreeWidget", true); +loader.lazyRequireGetter(this, "TableWidget", + "devtools/client/shared/widgets/TableWidget", true); +loader.lazyRequireGetter(this, "ViewHelpers", + "devtools/client/shared/widgets/view-helpers"); +loader.lazyImporter(this, "VariablesView", + "resource://devtools/client/shared/widgets/VariablesView.jsm"); + +/** + * Localization convenience methods. + */ +const STORAGE_STRINGS = "devtools/client/locales/storage.properties"; +const L10N = new LocalizationHelper(STORAGE_STRINGS); + +const GENERIC_VARIABLES_VIEW_SETTINGS = { + lazyEmpty: true, + // ms + lazyEmptyDelay: 10, + searchEnabled: true, + searchPlaceholder: L10N.getStr("storage.search.placeholder"), + preventDescriptorModifiers: true +}; + +// Columns which are hidden by default in the storage table +const HIDDEN_COLUMNS = [ + "creationTime", + "isDomain", + "isSecure" +]; + +const REASON = { + NEW_ROW: "new-row", + NEXT_50_ITEMS: "next-50-items", + POPULATE: "populate", + UPDATE: "update" +}; + +const COOKIE_KEY_MAP = { + path: "Path", + host: "Domain", + expires: "Expires", + isSecure: "Secure", + isHttpOnly: "HttpOnly", + isDomain: "HostOnly", + creationTime: "CreationTime", + lastAccessed: "LastAccessed" +}; + +// 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; + +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; +} + +/** + * StorageUI is controls and builds the UI of the Storage Inspector. + * + * @param {Front} front + * Front for the storage actor + * @param {Target} target + * Interface for the page we're debugging + * @param {Window} panelWin + * Window of the toolbox panel to populate UI in. + */ +function StorageUI(front, target, panelWin, toolbox) { + EventEmitter.decorate(this); + + this._target = target; + this._window = panelWin; + this._panelDoc = panelWin.document; + this._toolbox = toolbox; + this.front = front; + + let 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); + + let tableNode = this._panelDoc.getElementById("storage-table"); + this.table = new TableWidget(tableNode, { + emptyText: L10N.getStr("table.emptyText"), + highlightUpdated: true, + cellContextMenuId: "storage-table-popup" + }); + + this.displayObjectSidebar = this.displayObjectSidebar.bind(this); + this.table.on(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar); + + this.handleScrollEnd = this.handleScrollEnd.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.setAttribute("width", "300"); + this.view = new VariablesView(this.sidebar.firstChild, + GENERIC_VARIABLES_VIEW_SETTINGS); + + this.searchBox = this._panelDoc.getElementById("storage-searchbox"); + this.filterItems = this.filterItems.bind(this); + this.searchBox.addEventListener("command", this.filterItems); + + let shortcuts = new KeyShortcuts({ + window: this._panelDoc.defaultView, + }); + let key = L10N.getStr("storage.filter.key"); + shortcuts.on(key, (name, event) => { + event.preventDefault(); + this.searchBox.focus(); + }); + + this.front.listStores().then(storageTypes => { + this.populateStorageTree(storageTypes); + }).then(null, console.error); + + this.onUpdate = this.onUpdate.bind(this); + this.front.on("stores-update", this.onUpdate); + this.onCleared = this.onCleared.bind(this); + this.front.on("stores-cleared", this.onCleared); + + 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.onRemoveItem = this.onRemoveItem.bind(this); + this.onRemoveAllFrom = this.onRemoveAllFrom.bind(this); + this.onRemoveAll = this.onRemoveAll.bind(this); + this.onRemoveTreeItem = this.onRemoveTreeItem.bind(this); + + 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._treePopupDeleteAll = this._panelDoc.getElementById( + "storage-tree-popup-delete-all"); + this._treePopupDeleteAll.addEventListener("command", this.onRemoveAll); + + this._treePopupDelete = this._panelDoc.getElementById("storage-tree-popup-delete"); + this._treePopupDelete.addEventListener("command", this.onRemoveTreeItem); +} + +exports.StorageUI = StorageUI; + +StorageUI.prototype = { + + storageTypes: null, + shouldLoadMoreItems: true, + + set animationsEnabled(value) { + this._panelDoc.documentElement.classList.toggle("no-animate", !value); + }, + + destroy: function () { + this.table.off(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar); + this.table.off(TableWidget.EVENTS.SCROLL_END, this.handleScrollEnd); + this.table.off(TableWidget.EVENTS.CELL_EDIT, this.editItem); + this.table.destroy(); + + this.front.off("stores-update", this.onUpdate); + this.front.off("stores-cleared", this.onCleared); + this._panelDoc.removeEventListener("keypress", this.handleKeypress); + this.searchBox.removeEventListener("input", this.filterItems); + this.searchBox = null; + + this._treePopup.removeEventListener("popupshowing", this.onTreePopupShowing); + this._treePopupDeleteAll.removeEventListener("command", this.onRemoveAll); + 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); + }, + + /** + * Empties and hides the object viewer sidebar + */ + hideSidebar: function () { + this.view.empty(); + this.sidebar.hidden = true; + this.table.clearSelection(); + }, + + getCurrentActor: function () { + let type = this.table.datatype; + + return this.storageTypes[type]; + }, + + /** + * Make column fields editable + * + * @param {Array} editableFields + * An array of keys of columns to be made editable + */ + makeFieldsEditable: function* (editableFields) { + if (editableFields && editableFields.length > 0) { + this.table.makeFieldsEditable(editableFields); + } else if (this.table._editableFieldsEngine) { + this.table._editableFieldsEngine.destroy(); + } + }, + + editItem: function (eventType, data) { + let actor = this.getCurrentActor(); + + actor.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. + */ + removeItemFromTable: function (name) { + if (this.table.isSelected(name)) { + if (this.table.selectedIndex == 0) { + this.table.selectNextRow(); + } else { + this.table.selectPreviousRow(); + } + this.table.remove(name); + this.displayObjectSidebar(); + } else { + this.table.remove(name); + } + }, + + /** + * Event handler for "stores-cleared" event coming from the storage actor. + * + * @param {object} response + * An object containing which storage types were cleared + */ + onCleared: function (response) { + function* enumPaths() { + for (let type in response) { + if (Array.isArray(response[type])) { + // Handle the legacy response with array of hosts + for (let host of response[type]) { + yield [type, host]; + } + } else { + // Handle the new format that supports clearing sub-stores in a host + for (let host in response[type]) { + let paths = response[type][host]; + + if (!paths.length) { + yield [type, host]; + } else { + for (let path of paths) { + try { + path = JSON.parse(path); + yield [type, host, ...path]; + } catch (ex) { + // ignore + } + } + } + } + } + } + } + + for (let path of enumPaths()) { + // Find if the path is selected (there is max one) and clear it + if (this.tree.isSelected(path)) { + this.table.clear(); + this.hideSidebar(); + 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. + */ + onUpdate: function ({ changed, added, deleted }) { + if (deleted) { + this.handleDeletedItems(deleted); + } + + if (added) { + this.handleAddedItems(added); + } + + if (changed) { + this.handleChangedItems(changed); + } + + if (added || deleted || changed) { + this.emit("store-objects-updated"); + } + }, + + /** + * Handle added items received by onUpdate + * + * @param {object} See onUpdate docs + */ + handleAddedItems: function (added) { + for (let type in added) { + for (let host in added[type]) { + this.tree.add([type, {id: host, 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]]; + this.fetchStorageObjects(type, host, [JSON.stringify(name)], + REASON.NEW_ROW); + } + } catch (ex) { + // Do nothing + } + } + + if (this.tree.isSelected([type, host])) { + this.fetchStorageObjects(type, host, added[type][host], + REASON.NEW_ROW); + } + } + } + }, + + /** + * Handle deleted items received by onUpdate + * + * @param {object} See onUpdate docs + */ + handleDeletedItems: function (deleted) { + for (let type in deleted) { + for (let 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 (let name of deleted[type][host]) { + try { + // trying to parse names in case of indexedDB or cache + let 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 > 0) { + let tableItemName = names.pop(); + if (this.tree.isSelected([type, host, ...names])) { + this.removeItemFromTable(tableItemName); + } + } + } catch (ex) { + if (this.tree.isSelected([type, host])) { + this.removeItemFromTable(name); + } + } + } + } + } + } + }, + + /** + * Handle changed items received by onUpdate + * + * @param {object} See onUpdate docs + */ + handleChangedItems: function (changed) { + let [type, host, db, objectStore] = this.tree.selectedItem; + if (!changed[type] || !changed[type][host] || + changed[type][host].length == 0) { + return; + } + try { + let toUpdate = []; + for (let name of changed[type][host]) { + let names = JSON.parse(name); + if (names[0] == db && names[1] == objectStore && names[2]) { + toUpdate.push(name); + } + } + this.fetchStorageObjects(type, host, toUpdate, REASON.UPDATE); + } catch (ex) { + 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. + */ + fetchStorageObjects: Task.async(function* (type, host, names, reason) { + let fetchOpts = reason === REASON.NEXT_50_ITEMS ? {offset: this.itemOffset} + : {}; + let storageType = this.storageTypes[type]; + + 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) { + 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) { + let [ dbName, objectStoreName ] = JSON.parse(names[0]); + if (dbName) { + subType = "database"; + } + if (objectStoreName) { + subType = "object store"; + } + } + yield this.resetColumns(type, host, subType); + } + + let {data} = yield storageType.getStoreObjects(host, names, fetchOpts); + if (data.length) { + this.populateTable(data, reason); + } + this.emit("store-objects-updated"); + } catch (ex) { + console.error(ex); + } + }), + + /** + * Populates the storage tree which displays the list of storages present for + * the page. + * + * @param {object} storageTypes + * List of storages and their corresponding hosts returned by the + * StorageFront.listStores call. + */ + populateStorageTree: function (storageTypes) { + this.storageTypes = {}; + for (let type in storageTypes) { + // Ignore `from` field, which is just a protocol.js implementation + // artifact. + if (type === "from") { + continue; + } + let typeLabel = type; + try { + typeLabel = L10N.getStr("tree.labels." + type); + } catch (e) { + console.error("Unable to localize tree label type:" + type); + } + this.tree.add([{id: type, label: typeLabel, type: "store"}]); + if (!storageTypes[type].hosts) { + continue; + } + this.storageTypes[type] = storageTypes[type]; + for (let host in storageTypes[type].hosts) { + this.tree.add([type, {id: host, type: "url"}]); + for (let name of storageTypes[type].hosts[host]) { + try { + let 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]; + } + } + } + }, + + /** + * Populates the selected entry from teh table in the sidebar for a more + * detailed view. + */ + displayObjectSidebar: Task.async(function* () { + let item = this.table.selectedRow; + if (!item) { + // Make sure that sidebar is hidden and return + this.sidebar.hidden = true; + return; + } + + // Get the string value (async action) and the update the UI synchronously. + let value; + if (item.name && item.valueActor) { + value = yield item.valueActor.string(); + } + + // Start updating the UI. Everything is sync beyond this point. + this.sidebar.hidden = false; + this.view.empty(); + let mainScope = this.view.addScope(L10N.getStr("storage.data.label")); + mainScope.expanded = true; + + if (value) { + let 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 + this.parseItemValue(item.name, value); + + // By default the item name and value are shown. If this is the only + // information available, then nothing else is to be displayed. + let itemProps = Object.keys(item); + if (itemProps.length > 3) { + // Display any other information other than the item name and value + // which may be available. + let rawObject = Object.create(null); + let otherProps = itemProps.filter( + e => !["name", "value", "valueActor"].includes(e)); + for (let prop of otherProps) { + let cookieProp = COOKIE_KEY_MAP[prop] || prop; + // The pseduo property of HostOnly refers to converse of isDomain property + rawObject[cookieProp] = (prop === "isDomain") ? !item[prop] : item[prop]; + } + itemVar.populate(rawObject, {sorted: true}); + itemVar.twisty = true; + itemVar.expanded = true; + } + } else { + // Case when displaying IndexedDB db/object store properties. + for (let key in item) { + mainScope.addItem(key, {}, true).setGrip(item[key]); + this.parseItemValue(key, item[key]); + } + } + + this.emit("sidebar-updated"); + }), + + /** + * Tries to parse a string value into either a json or a key-value separated + * object and populates the sidebar with the parsed value. The value can also + * be a key separated array. + * + * @param {string} name + * The key corresponding to the `value` string in the object + * @param {string} value + * The string to be parsed into an object + */ + parseItemValue: function (name, originalValue) { + // Find if value is URLEncoded ie + let decodedValue = ""; + try { + decodedValue = decodeURIComponent(originalValue); + } catch (e) { + // Unable to decode, nothing to do + } + let value = (decodedValue && decodedValue !== originalValue) + ? decodedValue : originalValue; + + let json = null; + try { + json = JSOL.parse(value); + } catch (ex) { + json = null; + } + + if (!json && value) { + json = this._extractKeyValPairs(value); + } + + // return if json is null, or same as value, or just a string. + if (!json || json == value || typeof json == "string") { + return; + } + + // One special case is a url which gets separated as key value pair on : + if ((json.length == 2 || Object.keys(json).length == 1) && + ((json[0] || Object.keys(json)[0]) + "").match(/^(http|file|ftp)/)) { + return; + } + + let jsonObject = Object.create(null); + let view = this.view; + jsonObject[name] = json; + let valueScope = view.getScopeAtIndex(1) || + view.addScope(L10N.getStr("storage.parsedValue.label")); + valueScope.expanded = true; + let jsonVar = valueScope.addItem("", Object.create(null), {relaxed: true}); + jsonVar.expanded = true; + jsonVar.twisty = true; + jsonVar.populate(jsonObject, {expanded: true}); + }, + + /** + * Tries to parse a string into an object on the basis of key-value pairs, + * separated by various separators. If failed, tries to parse for single + * separator separated values to form an array. + * + * @param {string} value + * The string to be parsed into an object or array + */ + _extractKeyValPairs: function (value) { + let makeObject = (keySep, pairSep) => { + let object = {}; + for (let pair of value.split(pairSep)) { + let [key, val] = pair.split(keySep); + object[key] = val; + } + return object; + }; + + // Possible separators. + const separators = ["=", ":", "~", "#", "&", "\\*", ",", "\\."]; + // Testing for object + for (let i = 0; i < separators.length; i++) { + let kv = separators[i]; + for (let j = 0; j < separators.length; j++) { + if (i == j) { + continue; + } + let p = separators[j]; + let word = `[^${kv}${p}]*`; + let keyValue = `${word}${kv}${word}`; + let keyValueList = `${keyValue}(${p}${keyValue})*`; + let regex = new RegExp(`^${keyValueList}$`); + if (value.match && value.match(regex) && value.includes(kv) && + (value.includes(p) || value.split(kv).length == 2)) { + return makeObject(kv, p); + } + } + } + // Testing for array + for (let p of separators) { + let word = `[^${p}]*`; + let wordList = `(${word}${p})+${word}`; + let regex = new RegExp(`^${wordList}$`); + if (value.match && value.match(regex)) { + return value.split(p.replace(/\\*/g, "")); + } + } + return null; + }, + + /** + * Select handler for the storage tree. Fetches details of the selected item + * from the storage details and populates the storage tree. + * + * @param {string} event + * The name of the event fired + * @param {array} item + * An array of ids which represent the location of the selected item in + * the storage tree + */ + onHostSelect: function (event, item) { + this.table.clear(); + this.hideSidebar(); + this.searchBox.value = ""; + + let [type, host] = item; + let names = null; + if (!host) { + return; + } + if (item.length > 2) { + names = [JSON.stringify(item.slice(2))]; + } + this.fetchStorageObjects(type, host, names, REASON.POPULATE); + this.itemOffset = 0; + }, + + /** + * 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. + */ + resetColumns: function* (type, host, subtype) { + this.table.host = host; + this.table.datatype = type; + + let uniqueKey = null; + let columns = {}; + let editableFields = []; + let fields = yield this.getCurrentActor().getFields(subtype); + + fields.forEach(f => { + if (!uniqueKey) { + this.table.uniqueId = uniqueKey = f.name; + } + + if (f.editable) { + editableFields.push(f.name); + } + + columns[f.name] = f.name; + let columnName; + try { + columnName = L10N.getStr("table.headers." + type + "." + f.name); + } catch (e) { + columnName = COOKIE_KEY_MAP[f.name]; + } + + if (!columnName) { + console.error("Unable to localize table header type:" + type + " key:" + f.name); + } else { + columns[f.name] = columnName; + } + }); + + this.table.setColumns(columns, null, HIDDEN_COLUMNS); + this.hideSidebar(); + + yield 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. + */ + populateTable: function (data, reason) { + for (let 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() + : L10N.getStr("label.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: + // Update without flashing the row. + this.table.push(item, true); + break; + case REASON.NEW_ROW: + case REASON.NEXT_50_ITEMS: + // 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) { + this.displayObjectSidebar(); + } + break; + } + + this.shouldLoadMoreItems = true; + } + }, + + /** + * Handles keypress event on the body table to close the sidebar when open + * + * @param {DOMEvent} event + * The event passed by the keypress event. + */ + handleKeypress: function (event) { + if (event.keyCode == KeyCodes.DOM_VK_ESCAPE && !this.sidebar.hidden) { + // Stop Propagation to prevent opening up of split console + this.hideSidebar(); + event.stopPropagation(); + event.preventDefault(); + } + }, + + /** + * Handles filtering the table + */ + filterItems() { + let value = this.searchBox.value; + this.table.filterItems(value, ["valueActor"]); + this._panelDoc.documentElement.classList.toggle("filtering", !!value); + }, + + /** + * Handles endless scrolling for the table + */ + handleScrollEnd: function () { + if (!this.shouldLoadMoreItems) { + return; + } + this.shouldLoadMoreItems = false; + this.itemOffset += 50; + + let item = this.tree.selectedItem; + let [type, host] = item; + let names = null; + if (item.length > 2) { + names = [JSON.stringify(item.slice(2))]; + } + this.fetchStorageObjects(type, host, names, REASON.NEXT_50_ITEMS); + }, + + /** + * Fires before a cell context menu with the "Delete" action is shown. + * If the currently selected storage object doesn't support removing items, prevent + * showing the menu. + */ + onTablePopupShowing: function (event) { + let selectedItem = this.tree.selectedItem; + let type = selectedItem[0]; + let actor = this.getCurrentActor(); + + // IndexedDB only supports removing items from object stores (level 4 of the tree) + if (!actor.removeItem || (type === "indexedDB" && selectedItem.length !== 4)) { + event.preventDefault(); + return; + } + + let rowId = this.table.contextMenuRowId; + let data = this.table.items.get(rowId); + let name = addEllipsis(data[this.table.uniqueId]); + + this._tablePopupDelete.setAttribute("label", + L10N.getFormatStr("storage.popupMenu.deleteLabel", name)); + + if (type === "cookies") { + let host = addEllipsis(data.host); + + this._tablePopupDeleteAllFrom.hidden = false; + this._tablePopupDeleteAllFrom.setAttribute("label", + L10N.getFormatStr("storage.popupMenu.deleteAllFromLabel", host)); + } else { + this._tablePopupDeleteAllFrom.hidden = true; + } + }, + + onTreePopupShowing: function (event) { + let showMenu = false; + let selectedItem = this.tree.selectedItem; + + if (selectedItem) { + let type = selectedItem[0]; + let actor = this.storageTypes[type]; + + // 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 (actor.removeAll) { + 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 action is displayed for: + // - IndexedDB databases (level 3 of the tree) + // - Cache objects (level 3 of the tree) + let showDelete = (type == "indexedDB" || type == "Cache") && + selectedItem.length == 3; + this._treePopupDelete.hidden = !showDelete; + if (showDelete) { + let itemName = addEllipsis(selectedItem[selectedItem.length - 1]); + this._treePopupDelete.setAttribute("label", + L10N.getFormatStr("storage.popupMenu.deleteLabel", itemName)); + } + + showMenu = showDeleteAll || showDelete; + } + + if (!showMenu) { + event.preventDefault(); + } + }, + + /** + * Handles removing an item from the storage + */ + onRemoveItem: function () { + let [, host, ...path] = this.tree.selectedItem; + let actor = this.getCurrentActor(); + let rowId = this.table.contextMenuRowId; + let data = this.table.items.get(rowId); + let name = data[this.table.uniqueId]; + if (path.length > 0) { + name = JSON.stringify([...path, name]); + } + actor.removeItem(host, name); + }, + + /** + * Handles removing all items from the storage + */ + onRemoveAll: function () { + // 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). + let [type, host, ...path] = this.tree.selectedItem; + let actor = this.storageTypes[type]; + let name = path.length > 0 ? JSON.stringify(path) : undefined; + actor.removeAll(host, name); + }, + + /** + * Handles removing all cookies with exactly the same domain as the + * cookie in the selected row. + */ + onRemoveAllFrom: function () { + let [, host] = this.tree.selectedItem; + let actor = this.getCurrentActor(); + let rowId = this.table.contextMenuRowId; + let data = this.table.items.get(rowId); + + actor.removeAll(host, data.host); + }, + + onRemoveTreeItem: function () { + let [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]); + } + }, + + removeDatabase: function (host, dbName) { + let actor = this.storageTypes.indexedDB; + + actor.removeDatabase(host, dbName).then(result => { + if (result.blocked) { + let notificationBox = this._toolbox.getNotificationBox(); + notificationBox.appendNotification( + L10N.getFormatStr("storage.idb.deleteBlocked", dbName), + "storage-idb-delete-blocked", + null, + notificationBox.PRIORITY_WARNING_LOW); + } + }).catch(error => { + let notificationBox = this._toolbox.getNotificationBox(); + notificationBox.appendNotification( + L10N.getFormatStr("storage.idb.deleteError", dbName), + "storage-idb-delete-error", + null, + notificationBox.PRIORITY_CRITICAL_LOW); + }); + }, + + removeCache: function (host, cacheName) { + let actor = this.storageTypes.Cache; + + actor.removeItem(host, JSON.stringify([ cacheName ])); + }, +}; |