diff options
Diffstat (limited to 'devtools/client/storage')
44 files changed, 4290 insertions, 0 deletions
diff --git a/devtools/client/storage/moz.build b/devtools/client/storage/moz.build new file mode 100644 index 000000000..0c7f2f46b --- /dev/null +++ b/devtools/client/storage/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +BROWSER_CHROME_MANIFESTS += ['test/browser.ini'] + +DevToolsModules( + 'panel.js', + 'ui.js' +) diff --git a/devtools/client/storage/panel.js b/devtools/client/storage/panel.js new file mode 100644 index 000000000..c24059d8e --- /dev/null +++ b/devtools/client/storage/panel.js @@ -0,0 +1,87 @@ +/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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("devtools/shared/event-emitter"); + +loader.lazyRequireGetter(this, "StorageFront", + "devtools/shared/fronts/storage", true); +loader.lazyRequireGetter(this, "StorageUI", + "devtools/client/storage/ui", true); + +var StoragePanel = this.StoragePanel = +function StoragePanel(panelWin, toolbox) { + EventEmitter.decorate(this); + + this._toolbox = toolbox; + this._target = toolbox.target; + this._panelWin = panelWin; + + this.destroy = this.destroy.bind(this); +}; + +exports.StoragePanel = StoragePanel; + +StoragePanel.prototype = { + get target() { + return this._toolbox.target; + }, + + get panelWindow() { + return this._panelWin; + }, + + /** + * open is effectively an asynchronous constructor + */ + open: function () { + let targetPromise; + // We always interact with the target as if it were remote + if (!this.target.isRemote) { + targetPromise = this.target.makeRemote(); + } else { + targetPromise = Promise.resolve(this.target); + } + + return targetPromise.then(() => { + this.target.on("close", this.destroy); + this._front = new StorageFront(this.target.client, this.target.form); + + this.UI = new StorageUI(this._front, this._target, + this._panelWin, this._toolbox); + this.isReady = true; + this.emit("ready"); + + return this; + }).catch(e => { + console.log("error while opening storage panel", e); + this.destroy(); + }); + }, + + /** + * Destroy the storage inspector. + */ + destroy: function () { + if (!this._destroyed) { + this.UI.destroy(); + this.UI = null; + + // Destroy front to ensure packet handler is removed from client + this._front.destroy(); + this._front = null; + this._destroyed = true; + + this._target.off("close", this.destroy); + this._target = null; + this._toolbox = null; + this._panelWin = null; + } + + return Promise.resolve(null); + }, +}; diff --git a/devtools/client/storage/storage.xul b/devtools/client/storage/storage.xul new file mode 100644 index 000000000..9fbef5199 --- /dev/null +++ b/devtools/client/storage/storage.xul @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?> +<?xml-stylesheet href="chrome://devtools/skin/storage.css" type="text/css"?> + +<!DOCTYPE window [ + <!ENTITY % storageDTD SYSTEM "chrome://devtools/locale/storage.dtd"> + %storageDTD; +]> + +<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <script type="application/javascript;version=1.8" + src="chrome://devtools/content/shared/theme-switching.js"/> + <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/> + + <commandset id="editMenuCommands"/> + + <popupset id="storagePopupSet"> + <menupopup id="storage-tree-popup"> + <menuitem id="storage-tree-popup-delete-all" + label="&storage.popupMenu.deleteAllLabel;"/> + <menuitem id="storage-tree-popup-delete"/> + </menupopup> + <menupopup id="storage-table-popup"> + <menuitem id="storage-table-popup-delete"/> + <menuitem id="storage-table-popup-delete-all-from"/> + <menuitem id="storage-table-popup-delete-all" + label="&storage.popupMenu.deleteAllLabel;"/> + </menupopup> + </popupset> + + <box flex="1" class="devtools-responsive-container theme-body"> + <vbox id="storage-tree"/> + <splitter class="devtools-side-splitter"/> + <vbox flex="1"> + <hbox id="storage-toolbar" class="devtools-toolbar"> + <textbox id="storage-searchbox" + class="devtools-filterinput" + type="search" + timeout="200" + placeholder="&searchBox.placeholder;"/> + </hbox> + <vbox id="storage-table" class="theme-sidebar" flex="1"/> + </vbox> + <splitter class="devtools-side-splitter"/> + <vbox id="storage-sidebar" class="devtools-sidebar-tabs" hidden="true"> + <vbox flex="1"/> + </vbox> + </box> + +</window> diff --git a/devtools/client/storage/test/.eslintrc.js b/devtools/client/storage/test/.eslintrc.js new file mode 100644 index 000000000..8d15a76d9 --- /dev/null +++ b/devtools/client/storage/test/.eslintrc.js @@ -0,0 +1,6 @@ +"use strict"; + +module.exports = { + // Extend from the shared list of defined globals for mochitests. + "extends": "../../../.eslintrc.mochitests.js" +}; diff --git a/devtools/client/storage/test/browser.ini b/devtools/client/storage/test/browser.ini new file mode 100644 index 000000000..dd7f48bd7 --- /dev/null +++ b/devtools/client/storage/test/browser.ini @@ -0,0 +1,44 @@ +[DEFAULT] +tags = devtools +subsuite = devtools +support-files = + storage-cache-error.html + storage-complex-values.html + storage-cookies.html + storage-empty-objectstores.html + storage-idb-delete-blocked.html + storage-listings.html + storage-localstorage.html + storage-overflow.html + storage-search.html + storage-secured-iframe.html + storage-sessionstorage.html + storage-unsecured-iframe.html + storage-updates.html + head.js + !/devtools/client/framework/test/shared-head.js + +[browser_storage_basic.js] +[browser_storage_cache_delete.js] +[browser_storage_cache_error.js] +[browser_storage_cookies_delete_all.js] +[browser_storage_cookies_domain.js] +[browser_storage_cookies_edit.js] +[browser_storage_cookies_edit_keyboard.js] +[browser_storage_cookies_tab_navigation.js] +[browser_storage_delete.js] +[browser_storage_delete_all.js] +[browser_storage_delete_tree.js] +[browser_storage_dynamic_updates.js] +[browser_storage_empty_objectstores.js] +[browser_storage_indexeddb_delete.js] +[browser_storage_indexeddb_delete_blocked.js] +[browser_storage_localstorage_edit.js] +[browser_storage_localstorage_error.js] +[browser_storage_overflow.js] +[browser_storage_search.js] +[browser_storage_search_keyboard_trap.js] +[browser_storage_sessionstorage_edit.js] +[browser_storage_sidebar.js] +[browser_storage_sidebar_update.js] +[browser_storage_values.js] diff --git a/devtools/client/storage/test/browser_storage_basic.js b/devtools/client/storage/test/browser_storage_basic.js new file mode 100644 index 000000000..343d46170 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_basic.js @@ -0,0 +1,118 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Basic test to assert that the storage tree and table corresponding to each +// item in the storage tree is correctly displayed + +// Entries that should be present in the tree for this test +// Format for each entry in the array : +// [ +// ["path", "to", "tree", "item"], - The path to the tree item to click formed +// by id of each item +// ["key_value1", "key_value2", ...] - The value of the first (unique) column +// for each row in the table corresponding +// to the tree item selected. +// ] +// These entries are formed by the cookies, local storage, session storage and +// indexedDB entries created in storage-listings.html, +// storage-secured-iframe.html and storage-unsecured-iframe.html + +"use strict"; + +const testCases = [ + [["cookies", "test1.example.org"], + ["c1", "cs2", "c3", "uc1"]], + [["cookies", "sectest1.example.org"], + ["uc1", "cs2", "sc1"]], + [["localStorage", "http://test1.example.org"], + ["ls1", "ls2"]], + [["localStorage", "http://sectest1.example.org"], + ["iframe-u-ls1"]], + [["localStorage", "https://sectest1.example.org"], + ["iframe-s-ls1"]], + [["sessionStorage", "http://test1.example.org"], + ["ss1"]], + [["sessionStorage", "http://sectest1.example.org"], + ["iframe-u-ss1", "iframe-u-ss2"]], + [["sessionStorage", "https://sectest1.example.org"], + ["iframe-s-ss1"]], + [["indexedDB", "http://test1.example.org"], + ["idb1", "idb2"]], + [["indexedDB", "http://test1.example.org", "idb1"], + ["obj1", "obj2"]], + [["indexedDB", "http://test1.example.org", "idb2"], + ["obj3"]], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], + [1, 2, 3]], + [["indexedDB", "http://test1.example.org", "idb1", "obj2"], + [1]], + [["indexedDB", "http://test1.example.org", "idb2", "obj3"], + []], + [["indexedDB", "http://sectest1.example.org"], + []], + [["indexedDB", "https://sectest1.example.org"], + ["idb-s1", "idb-s2"]], + [["indexedDB", "https://sectest1.example.org", "idb-s1"], + ["obj-s1"]], + [["indexedDB", "https://sectest1.example.org", "idb-s2"], + ["obj-s2"]], + [["indexedDB", "https://sectest1.example.org", "idb-s1", "obj-s1"], + [6, 7]], + [["indexedDB", "https://sectest1.example.org", "idb-s2", "obj-s2"], + [16]], + [["Cache", "http://test1.example.org", "plop"], + [MAIN_DOMAIN + "404_cached_file.js", + MAIN_DOMAIN + "browser_storage_basic.js"]], +]; + +/** + * Test that the desired number of tree items are present + */ +function testTree() { + let doc = gPanelWindow.document; + for (let item of testCases) { + ok(doc.querySelector("[data-id='" + JSON.stringify(item[0]) + "']"), + "Tree item " + item[0] + " should be present in the storage tree"); + } +} + +/** + * Test that correct table entries are shown for each of the tree item + */ +function* testTables() { + let doc = gPanelWindow.document; + // Expand all nodes so that the synthesized click event actually works + gUI.tree.expandAll(); + + // First tree item is already selected so no clicking and waiting for update + for (let id of testCases[0][1]) { + ok(doc.querySelector(".table-widget-cell[data-id='" + id + "']"), + "Table item " + id + " should be present"); + } + + // Click rest of the tree items and wait for the table to be updated + for (let item of testCases.slice(1)) { + yield selectTreeItem(item[0]); + + // Check whether correct number of items are present in the table + is(doc.querySelectorAll( + ".table-widget-wrapper:first-of-type .table-widget-cell" + ).length, item[1].length, "Number of items in table is correct"); + + // Check if all the desired items are present in the table + for (let id of item[1]) { + ok(doc.querySelector(".table-widget-cell[data-id='" + id + "']"), + "Table item " + id + " should be present"); + } + } +} + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + testTree(); + yield testTables(); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cache_delete.js b/devtools/client/storage/test/browser_storage_cache_delete.js new file mode 100644 index 000000000..f87aa66e8 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cache_delete.js @@ -0,0 +1,46 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting a Cache object from the tree using context menu + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + let contextMenu = gPanelWindow.document.getElementById("storage-tree-popup"); + let menuDeleteItem = contextMenu.querySelector("#storage-tree-popup-delete"); + + let cacheToDelete = ["Cache", "http://test1.example.org", "plop"]; + + info("test state before delete"); + yield selectTreeItem(cacheToDelete); + ok(gUI.tree.isSelected(cacheToDelete), "Cache item is present in the tree"); + + info("do the delete"); + let eventWait = gUI.once("store-objects-updated"); + + let selector = `[data-id='${JSON.stringify(cacheToDelete)}'] > .tree-widget-item`; + let target = gPanelWindow.document.querySelector(selector); + ok(target, "Cache item's tree element is present"); + + yield waitForContextMenu(contextMenu, target, () => { + info("Opened tree context menu"); + menuDeleteItem.click(); + + let cacheName = cacheToDelete[2]; + ok(menuDeleteItem.getAttribute("label").includes(cacheName), + `Context menu item label contains '${cacheName}')`); + }); + + yield eventWait; + + info("test state after delete"); + yield selectTreeItem(cacheToDelete); + ok(!gUI.tree.isSelected(cacheToDelete), "Cache item is no longer present in the tree"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cache_error.js b/devtools/client/storage/test/browser_storage_cache_error.js new file mode 100644 index 000000000..dfc6056a7 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cache_error.js @@ -0,0 +1,19 @@ +/* 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"; + +// Test handling errors in CacheStorage + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-cache-error.html"); + + const cacheItemId = ["Cache", "javascript:parent.frameContent"]; + + yield selectTreeItem(cacheItemId); + ok(gUI.tree.isSelected(cacheItemId), + `The item ${cacheItemId.join(" > ")} is present in the tree`); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cookies_delete_all.js b/devtools/client/storage/test/browser_storage_cookies_delete_all.js new file mode 100644 index 000000000..6e6008e66 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cookies_delete_all.js @@ -0,0 +1,74 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting all cookies + +function* performDelete(store, rowName, deleteAll) { + let contextMenu = gPanelWindow.document.getElementById( + "storage-table-popup"); + let menuDeleteAllItem = contextMenu.querySelector( + "#storage-table-popup-delete-all"); + let menuDeleteAllFromItem = contextMenu.querySelector( + "#storage-table-popup-delete-all-from"); + + let storeName = store.join(" > "); + + yield selectTreeItem(store); + + let eventWait = gUI.once("store-objects-updated"); + + let cells = getRowCells(rowName); + yield waitForContextMenu(contextMenu, cells.name, () => { + info(`Opened context menu in ${storeName}, row '${rowName}'`); + if (deleteAll) { + menuDeleteAllItem.click(); + } else { + menuDeleteAllFromItem.click(); + let hostName = cells.host.value; + ok(menuDeleteAllFromItem.getAttribute("label").includes(hostName), + `Context menu item label contains '${hostName}'`); + } + }); + + yield eventWait; +} + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + info("test state before delete"); + yield checkState([ + [["cookies", "test1.example.org"], ["c1", "c3", "cs2", "uc1"]], + [["cookies", "sectest1.example.org"], ["cs2", "sc1", "uc1"]], + ]); + + info("delete all from domain"); + // delete only cookies that match the host exactly + yield performDelete(["cookies", "test1.example.org"], "c1", false); + + info("test state after delete all from domain"); + yield checkState([ + // Domain cookies (.example.org) must not be deleted. + [["cookies", "test1.example.org"], ["cs2", "uc1"]], + [["cookies", "sectest1.example.org"], ["cs2", "sc1", "uc1"]], + ]); + + info("delete all"); + // delete all cookies for host, including domain cookies + yield performDelete(["cookies", "sectest1.example.org"], "uc1", true); + + info("test state after delete all"); + yield checkState([ + // Domain cookies (.example.org) are deleted too, so deleting in sectest1 + // also removes stuff from test1. + [["cookies", "test1.example.org"], []], + [["cookies", "sectest1.example.org"], []], + ]); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cookies_domain.js b/devtools/client/storage/test/browser_storage_cookies_domain.js new file mode 100644 index 000000000..dc93d6e67 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cookies_domain.js @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test that cookies with domain equal to full host name are listed. +// E.g., ".example.org" vs. example.org). Bug 1149497. + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-cookies.html"); + + yield checkState([ + [["cookies", "test1.example.org"], + ["test1", "test2", "test3", "test4", "test5"]], + ]); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cookies_edit.js b/devtools/client/storage/test/browser_storage_cookies_edit.js new file mode 100644 index 000000000..5818e4864 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cookies_edit.js @@ -0,0 +1,22 @@ +/* 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/. */ + +// Basic test to check the editing of cookies. + +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-cookies.html"); + showAllColumns(true); + + yield editCell("test3", "name", "newTest3"); + yield editCell("newTest3", "path", "/"); + yield editCell("newTest3", "host", "test1.example.org"); + yield editCell("newTest3", "expires", "Tue, 14 Feb 2040 17:41:14 GMT"); + yield editCell("newTest3", "value", "newValue3"); + yield editCell("newTest3", "isSecure", "true"); + yield editCell("newTest3", "isHttpOnly", "true"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cookies_edit_keyboard.js b/devtools/client/storage/test/browser_storage_cookies_edit_keyboard.js new file mode 100644 index 000000000..1208c4376 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cookies_edit_keyboard.js @@ -0,0 +1,23 @@ +/* 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/. */ + +// Basic test to check the editing of cookies with the keyboard. + +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-cookies.html"); + showAllColumns(true); + + yield startCellEdit("test4", "name"); + yield typeWithTerminator("test6", "VK_TAB"); + yield typeWithTerminator("/", "VK_TAB"); + yield typeWithTerminator(".example.org", "VK_TAB"); + yield typeWithTerminator("Tue, 25 Dec 2040 12:00:00 GMT", "VK_TAB"); + yield typeWithTerminator("test6value", "VK_TAB"); + yield typeWithTerminator("false", "VK_TAB"); + yield typeWithTerminator("false", "VK_TAB"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_cookies_tab_navigation.js b/devtools/client/storage/test/browser_storage_cookies_tab_navigation.js new file mode 100644 index 000000000..783a0c844 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_cookies_tab_navigation.js @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Basic test to check cookie table tab navigation. + +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-cookies.html"); + showAllColumns(true); + + yield startCellEdit("test1", "name"); + + PressKeyXTimes("VK_TAB", 18); + is(getCurrentEditorValue(), "value3", + "We have tabbed to the correct cell."); + + PressKeyXTimes("VK_TAB", 18, {shiftKey: true}); + is(getCurrentEditorValue(), "test1", + "We have shift-tabbed to the correct cell."); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_delete.js b/devtools/client/storage/test/browser_storage_delete.js new file mode 100644 index 000000000..c0e2b0ad7 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_delete.js @@ -0,0 +1,56 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting storage items + +const TEST_CASES = [ + [["localStorage", "http://test1.example.org"], + "ls1", "name"], + [["sessionStorage", "http://test1.example.org"], + "ss1", "name"], + [["cookies", "test1.example.org"], + "c1", "name"], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], + 1, "name"], + [["Cache", "http://test1.example.org", "plop"], + MAIN_DOMAIN + "404_cached_file.js", "url"], +]; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + let contextMenu = gPanelWindow.document.getElementById("storage-table-popup"); + let menuDeleteItem = contextMenu.querySelector("#storage-table-popup-delete"); + + for (let [ treeItem, rowName, cellToClick] of TEST_CASES) { + let treeItemName = treeItem.join(" > "); + + info(`Selecting tree item ${treeItemName}`); + yield selectTreeItem(treeItem); + + let row = getRowCells(rowName); + ok(gUI.table.items.has(rowName), `There is a row '${rowName}' in ${treeItemName}`); + + let eventWait = gUI.once("store-objects-updated"); + + yield waitForContextMenu(contextMenu, row[cellToClick], () => { + info(`Opened context menu in ${treeItemName}, row '${rowName}'`); + menuDeleteItem.click(); + let truncatedRowName = String(rowName).substr(0, 16); + ok(menuDeleteItem.getAttribute("label").includes(truncatedRowName), + `Context menu item label contains '${rowName}' (maybe truncated)`); + }); + + yield eventWait; + + ok(!gUI.table.items.has(rowName), + `There is no row '${rowName}' in ${treeItemName} after deletion`); + } + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_delete_all.js b/devtools/client/storage/test/browser_storage_delete_all.js new file mode 100644 index 000000000..c4b6048fb --- /dev/null +++ b/devtools/client/storage/test/browser_storage_delete_all.js @@ -0,0 +1,90 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting all storage items + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + let contextMenu = gPanelWindow.document.getElementById("storage-table-popup"); + let menuDeleteAllItem = contextMenu.querySelector( + "#storage-table-popup-delete-all"); + + info("test state before delete"); + const beforeState = [ + [["localStorage", "http://test1.example.org"], + ["ls1", "ls2"]], + [["localStorage", "http://sectest1.example.org"], + ["iframe-u-ls1"]], + [["localStorage", "https://sectest1.example.org"], + ["iframe-s-ls1"]], + [["sessionStorage", "http://test1.example.org"], + ["ss1"]], + [["sessionStorage", "http://sectest1.example.org"], + ["iframe-u-ss1", "iframe-u-ss2"]], + [["sessionStorage", "https://sectest1.example.org"], + ["iframe-s-ss1"]], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], + [1, 2, 3]], + [["Cache", "http://test1.example.org", "plop"], + [MAIN_DOMAIN + "404_cached_file.js", MAIN_DOMAIN + "browser_storage_basic.js"]], + ]; + + yield checkState(beforeState); + + info("do the delete"); + const deleteHosts = [ + [["localStorage", "https://sectest1.example.org"], "iframe-s-ls1", "name"], + [["sessionStorage", "https://sectest1.example.org"], "iframe-s-ss1", "name"], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], 1, "name"], + [["Cache", "http://test1.example.org", "plop"], + MAIN_DOMAIN + "404_cached_file.js", "url"], + ]; + + for (let [store, rowName, cellToClick] of deleteHosts) { + let storeName = store.join(" > "); + + yield selectTreeItem(store); + + let eventWait = gUI.once("store-objects-cleared"); + + let cell = getRowCells(rowName)[cellToClick]; + yield waitForContextMenu(contextMenu, cell, () => { + info(`Opened context menu in ${storeName}, row '${rowName}'`); + menuDeleteAllItem.click(); + }); + + yield eventWait; + } + + info("test state after delete"); + const afterState = [ + // iframes from the same host, one secure, one unsecure, are independent + // from each other. Delete all in one doesn't touch the other one. + [["localStorage", "http://test1.example.org"], + ["ls1", "ls2"]], + [["localStorage", "http://sectest1.example.org"], + ["iframe-u-ls1"]], + [["localStorage", "https://sectest1.example.org"], + []], + [["sessionStorage", "http://test1.example.org"], + ["ss1"]], + [["sessionStorage", "http://sectest1.example.org"], + ["iframe-u-ss1", "iframe-u-ss2"]], + [["sessionStorage", "https://sectest1.example.org"], + []], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], + []], + [["Cache", "http://test1.example.org", "plop"], + []], + ]; + + yield checkState(afterState); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_delete_tree.js b/devtools/client/storage/test/browser_storage_delete_tree.js new file mode 100644 index 000000000..867a1c8b6 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_delete_tree.js @@ -0,0 +1,67 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting all storage items from the tree. + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + let contextMenu = gPanelWindow.document.getElementById("storage-tree-popup"); + let menuDeleteAllItem = contextMenu.querySelector( + "#storage-tree-popup-delete-all"); + + info("test state before delete"); + yield checkState([ + [["cookies", "test1.example.org"], ["c1", "c3", "cs2", "uc1"]], + [["localStorage", "http://test1.example.org"], ["ls1", "ls2"]], + [["sessionStorage", "http://test1.example.org"], ["ss1"]], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], [1, 2, 3]], + [["Cache", "http://test1.example.org", "plop"], + [MAIN_DOMAIN + "404_cached_file.js", MAIN_DOMAIN + "browser_storage_basic.js"]], + ]); + + info("do the delete"); + const deleteHosts = [ + ["cookies", "test1.example.org"], + ["localStorage", "http://test1.example.org"], + ["sessionStorage", "http://test1.example.org"], + ["indexedDB", "http://test1.example.org", "idb1", "obj1"], + ["Cache", "http://test1.example.org", "plop"], + ]; + + for (let store of deleteHosts) { + let storeName = store.join(" > "); + + yield selectTreeItem(store); + + let eventName = "store-objects-" + + (store[0] == "cookies" ? "updated" : "cleared"); + let eventWait = gUI.once(eventName); + + let selector = `[data-id='${JSON.stringify(store)}'] > .tree-widget-item`; + let target = gPanelWindow.document.querySelector(selector); + ok(target, `tree item found in ${storeName}`); + yield waitForContextMenu(contextMenu, target, () => { + info(`Opened tree context menu in ${storeName}`); + menuDeleteAllItem.click(); + }); + + yield eventWait; + } + + info("test state after delete"); + yield checkState([ + [["cookies", "test1.example.org"], []], + [["localStorage", "http://test1.example.org"], []], + [["sessionStorage", "http://test1.example.org"], []], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], []], + [["Cache", "http://test1.example.org", "plop"], []], + ]); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_dynamic_updates.js b/devtools/client/storage/test/browser_storage_dynamic_updates.js new file mode 100644 index 000000000..f881146d2 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_dynamic_updates.js @@ -0,0 +1,213 @@ +/* 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"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-updates.html"); + + let $ = id => gPanelWindow.document.querySelector(id); + let $$ = sel => gPanelWindow.document.querySelectorAll(sel); + + gUI.tree.expandAll(); + + ok(gUI.sidebar.hidden, "Sidebar is initially hidden"); + yield selectTableItem("c1"); + + // test that value is something initially + let initialValue = [[ + {name: "c1", value: "1.2.3.4.5.6.7"}, + {name: "c1.Path", value: "/browser"} + ], [ + {name: "c1", value: "Array"}, + {name: "c1.0", value: "1"}, + {name: "c1.6", value: "7"} + ]]; + + // test that value is something initially + let finalValue = [[ + {name: "c1", value: '{"foo": 4,"bar":6}'}, + {name: "c1.Path", value: "/browser"} + ], [ + {name: "c1", value: "Object"}, + {name: "c1.foo", value: "4"}, + {name: "c1.bar", value: "6"} + ]]; + // Check that sidebar shows correct initial value + yield findVariableViewProperties(initialValue[0], false); + yield findVariableViewProperties(initialValue[1], true); + // Check if table shows correct initial value + ok($("#value [data-id='c1'].table-widget-cell"), "cell is present"); + is($("#value [data-id='c1'].table-widget-cell").value, "1.2.3.4.5.6.7", + "correct initial value in table"); + gWindow.addCookie("c1", '{"foo": 4,"bar":6}', "/browser"); + yield gUI.once("sidebar-updated"); + + yield findVariableViewProperties(finalValue[0], false); + yield findVariableViewProperties(finalValue[1], true); + ok($("#value [data-id='c1'].table-widget-cell"), + "cell is present after update"); + is($("#value [data-id='c1'].table-widget-cell").value, '{"foo": 4,"bar":6}', + "correct final value in table"); + + // Add a new entry + is($$("#value .table-widget-cell").length, 2, + "Correct number of rows before update 0"); + + gWindow.addCookie("c3", "booyeah"); + + // Wait once for update and another time for value fetching + yield gUI.once("store-objects-updated"); + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 3, + "Correct number of rows after update 1"); + + // Add another + gWindow.addCookie("c4", "booyeah"); + + // Wait once for update and another time for value fetching + yield gUI.once("store-objects-updated"); + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 4, + "Correct number of rows after update 2"); + + // Removing cookies + gWindow.removeCookie("c1", "/browser"); + + yield gUI.once("sidebar-updated"); + + is($$("#value .table-widget-cell").length, 3, + "Correct number of rows after delete update 3"); + + ok(!$("#c1"), "Correct row got deleted"); + + ok(!gUI.sidebar.hidden, "Sidebar still visible for next row"); + + // Check if next element's value is visible in sidebar + yield findVariableViewProperties([{name: "c2", value: "foobar"}]); + + // Keep deleting till no rows + + gWindow.removeCookie("c3"); + + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 2, + "Correct number of rows after delete update 4"); + + // Check if next element's value is visible in sidebar + yield findVariableViewProperties([{name: "c2", value: "foobar"}]); + + gWindow.removeCookie("c2", "/browser"); + + yield gUI.once("sidebar-updated"); + + yield findVariableViewProperties([{name: "c4", value: "booyeah"}]); + + is($$("#value .table-widget-cell").length, 1, + "Correct number of rows after delete update 5"); + + gWindow.removeCookie("c4"); + + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 0, + "Correct number of rows after delete update 6"); + ok(gUI.sidebar.hidden, "Sidebar is hidden when no rows"); + + // Testing in local storage + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + + is($$("#value .table-widget-cell").length, 7, + "Correct number of rows after delete update 7"); + + ok($(".table-widget-cell[data-id='ls4']"), "ls4 exists before deleting"); + + gWindow.localStorage.removeItem("ls4"); + + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 6, + "Correct number of rows after delete update 8"); + ok(!$(".table-widget-cell[data-id='ls4']"), + "ls4 does not exists after deleting"); + + gWindow.localStorage.setItem("ls4", "again"); + + yield gUI.once("store-objects-updated"); + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 7, + "Correct number of rows after delete update 9"); + ok($(".table-widget-cell[data-id='ls4']"), + "ls4 came back after adding it again"); + + // Updating a row + gWindow.localStorage.setItem("ls2", "ls2-changed"); + + yield gUI.once("store-objects-updated"); + yield gUI.once("store-objects-updated"); + + is($("#value [data-id='ls2']").value, "ls2-changed", + "Value got updated for local storage"); + + // Testing in session storage + yield selectTreeItem(["sessionStorage", "http://test1.example.org"]); + + is($$("#value .table-widget-cell").length, 3, + "Correct number of rows for session storage"); + + gWindow.sessionStorage.setItem("ss4", "new-item"); + + yield gUI.once("store-objects-updated"); + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 4, + "Correct number of rows after session storage update"); + + // deleting item + + gWindow.sessionStorage.removeItem("ss3"); + + yield gUI.once("store-objects-updated"); + + gWindow.sessionStorage.removeItem("ss1"); + + yield gUI.once("store-objects-updated"); + + is($$("#value .table-widget-cell").length, 2, + "Correct number of rows after removing items from session storage"); + + yield selectTableItem("ss2"); + + ok(!gUI.sidebar.hidden, "sidebar is visible"); + + // Checking for correct value in sidebar before update + yield findVariableViewProperties([{name: "ss2", value: "foobar"}]); + + gWindow.sessionStorage.setItem("ss2", "changed=ss2"); + + yield gUI.once("sidebar-updated"); + + is($("#value [data-id='ss2']").value, "changed=ss2", + "Value got updated for session storage in the table"); + + yield findVariableViewProperties([{name: "ss2", value: "changed=ss2"}]); + + // Clearing items. Bug 1233497 makes it so that we can no longer yield + // CPOWs from Tasks. We work around this by calling clear via a ContentTask + // instead. + yield ContentTask.spawn(gBrowser.selectedBrowser, null, function* () { + return Task.spawn(content.wrappedJSObject.clear); + }); + + yield gUI.once("store-objects-cleared"); + + is($$("#value .table-widget-cell").length, 0, + "Table should be cleared"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_empty_objectstores.js b/devtools/client/storage/test/browser_storage_empty_objectstores.js new file mode 100644 index 000000000..1749c91b8 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_empty_objectstores.js @@ -0,0 +1,77 @@ +/* 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/. */ + +// Basic test to assert that the storage tree and table corresponding to each +// item in the storage tree is correctly displayed. + +"use strict"; + +// Entries that should be present in the tree for this test +// Format for each entry in the array: +// [ +// ["path", "to", "tree", "item"], +// - The path to the tree item to click formed by id of each item +// ["key_value1", "key_value2", ...] +// - The value of the first (unique) column for each row in the table +// corresponding to the tree item selected. +// ] +// These entries are formed by the cookies, local storage, session storage and +// indexedDB entries created in storage-listings.html, +// storage-secured-iframe.html and storage-unsecured-iframe.html +const storeItems = [ + [["indexedDB", "http://test1.example.org"], + ["idb1", "idb2"]], + [["indexedDB", "http://test1.example.org", "idb1"], + ["obj1", "obj2"]], + [["indexedDB", "http://test1.example.org", "idb2"], + []], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"], + [1, 2, 3]], + [["indexedDB", "http://test1.example.org", "idb1", "obj2"], + [1]] +]; + +/** + * Test that the desired number of tree items are present + */ +function testTree() { + let doc = gPanelWindow.document; + for (let [item] of storeItems) { + ok(doc.querySelector(`[data-id='${JSON.stringify(item)}']`), + `Tree item ${item} should be present in the storage tree`); + } +} + +/** + * Test that correct table entries are shown for each of the tree item + */ +let testTables = function* () { + let doc = gPanelWindow.document; + // Expand all nodes so that the synthesized click event actually works + gUI.tree.expandAll(); + + // Click the tree items and wait for the table to be updated + for (let [item, ids] of storeItems) { + yield selectTreeItem(item); + + // Check whether correct number of items are present in the table + is(doc.querySelectorAll( + ".table-widget-wrapper:first-of-type .table-widget-cell" + ).length, ids.length, "Number of items in table is correct"); + + // Check if all the desired items are present in the table + for (let id of ids) { + ok(doc.querySelector(".table-widget-cell[data-id='" + id + "']"), + `Table item ${id} should be present`); + } + } +}; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-empty-objectstores.html"); + + testTree(); + yield testTables(); + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_indexeddb_delete.js b/devtools/client/storage/test/browser_storage_indexeddb_delete.js new file mode 100644 index 000000000..18a0daf69 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_indexeddb_delete.js @@ -0,0 +1,47 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test deleting indexedDB database from the tree using context menu + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-empty-objectstores.html"); + + let contextMenu = gPanelWindow.document.getElementById("storage-tree-popup"); + let menuDeleteDb = contextMenu.querySelector("#storage-tree-popup-delete"); + + info("test state before delete"); + yield checkState([ + [["indexedDB", "http://test1.example.org"], ["idb1", "idb2"]], + ]); + + info("do the delete"); + const deletedDb = ["indexedDB", "http://test1.example.org", "idb1"]; + + yield selectTreeItem(deletedDb); + + // Wait once for update and another time for value fetching + let eventWait = gUI.once("store-objects-updated").then( + () => gUI.once("store-objects-updated")); + + let selector = `[data-id='${JSON.stringify(deletedDb)}'] > .tree-widget-item`; + let target = gPanelWindow.document.querySelector(selector); + ok(target, `tree item found in ${deletedDb.join(" > ")}`); + yield waitForContextMenu(contextMenu, target, () => { + info(`Opened tree context menu in ${deletedDb.join(" > ")}`); + menuDeleteDb.click(); + }); + + yield eventWait; + + info("test state after delete"); + yield checkState([ + [["indexedDB", "http://test1.example.org"], ["idb2"]], + ]); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_indexeddb_delete_blocked.js b/devtools/client/storage/test/browser_storage_indexeddb_delete_blocked.js new file mode 100644 index 000000000..6e89c4f28 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_indexeddb_delete_blocked.js @@ -0,0 +1,58 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* import-globals-from ../../framework/test/shared-head.js */ + +"use strict"; + +// Test what happens when deleting indexedDB database is blocked + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-idb-delete-blocked.html"); + + info("test state before delete"); + yield checkState([ + [["indexedDB", "http://test1.example.org"], ["idb"]] + ]); + + info("do the delete"); + yield selectTreeItem(["indexedDB", "http://test1.example.org"]); + let actor = gUI.getCurrentActor(); + let result = yield actor.removeDatabase("http://test1.example.org", "idb"); + + ok(result.blocked, "removeDatabase attempt is blocked"); + + info("test state after blocked delete"); + yield checkState([ + [["indexedDB", "http://test1.example.org"], ["idb"]] + ]); + + let eventWait = gUI.once("store-objects-updated"); + + info("telling content to close the db"); + yield ContentTask.spawn(gBrowser.selectedBrowser, null, function* () { + let win = content.wrappedJSObject; + yield win.closeDb(); + }); + + info("waiting for store update events"); + yield eventWait; + + info("test state after real delete"); + yield checkState([ + [["indexedDB", "http://test1.example.org"], []] + ]); + + info("try to delete database from nonexistent host"); + let errorThrown = false; + try { + result = yield actor.removeDatabase("http://test2.example.org", "idb"); + } catch (ex) { + errorThrown = true; + } + + ok(errorThrown, "error was reported when trying to delete"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_localstorage_edit.js b/devtools/client/storage/test/browser_storage_localstorage_edit.js new file mode 100644 index 000000000..86409e0ac --- /dev/null +++ b/devtools/client/storage/test/browser_storage_localstorage_edit.js @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Basic test to check the editing of localStorage. + +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-localstorage.html"); + + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + + yield editCell("TestLS1", "name", "newTestLS1"); + yield editCell("newTestLS1", "value", "newValueLS1"); + + yield editCell("TestLS3", "name", "newTestLS3"); + yield editCell("newTestLS3", "value", "newValueLS3"); + + yield editCell("TestLS5", "name", "newTestLS5"); + yield editCell("newTestLS5", "value", "newValueLS5"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_localstorage_error.js b/devtools/client/storage/test/browser_storage_localstorage_error.js new file mode 100644 index 000000000..923ca6ca9 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_localstorage_error.js @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +// Test that for pages where local/sessionStorage is not available (like about:home), +// the host still appears in the storage tree and no unhandled exception is thrown. + +add_task(function* () { + yield openTabAndSetupStorage("about:home"); + + let itemsToOpen = [ + ["localStorage", "about:home"], + ["sessionStorage", "about:home"] + ]; + + for (let item of itemsToOpen) { + yield selectTreeItem(item); + ok(gUI.tree.isSelected(item), `Item ${item.join(" > ")} is present in the tree`); + } + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_overflow.js b/devtools/client/storage/test/browser_storage_overflow.js new file mode 100644 index 000000000..88181ca05 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_overflow.js @@ -0,0 +1,41 @@ +// Test endless scrolling when a lot of items are present in the storage +// inspector table. +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-overflow.html"); + + let $ = id => gPanelWindow.document.querySelector(id); + let $$ = sel => gPanelWindow.document.querySelectorAll(sel); + + gUI.tree.expandAll(); + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + + let table = $("#storage-table .table-widget-body"); + let cellHeight = $(".table-widget-cell").getBoundingClientRect().height; + + is($$("#value .table-widget-cell").length, 50, + "Table should initially display 50 items"); + + let onStoresUpdate = gUI.once("store-objects-updated"); + table.scrollTop += cellHeight * 50; + yield onStoresUpdate; + + is($$("#value .table-widget-cell").length, 100, + "Table should display 100 items after scrolling"); + + onStoresUpdate = gUI.once("store-objects-updated"); + table.scrollTop += cellHeight * 50; + yield onStoresUpdate; + + is($$("#value .table-widget-cell").length, 150, + "Table should display 150 items after scrolling"); + + onStoresUpdate = gUI.once("store-objects-updated"); + table.scrollTop += cellHeight * 50; + yield onStoresUpdate; + + is($$("#value .table-widget-cell").length, 160, + "Table should display all 160 items after scrolling"); + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_search.js b/devtools/client/storage/test/browser_storage_search.js new file mode 100644 index 000000000..bbe0947b9 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_search.js @@ -0,0 +1,87 @@ +// Tests the filter search box in the storage inspector +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-search.html"); + + let $$ = sel => gPanelWindow.document.querySelectorAll(sel); + gUI.tree.expandAll(); + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + + // Results: 0=hidden, 1=visible + let testcases = [ + // Test that search isn't case-sensitive + { + value: "FoO", + results: [0, 0, 1, 1, 0, 1, 0] + }, + { + value: "OR", + results: [0, 1, 0, 0, 0, 1, 0] + }, + { + value: "aNImAl", + results: [0, 1, 0, 0, 0, 0, 0] + }, + // Test numbers + { + value: "01", + results: [1, 0, 0, 0, 0, 0, 1] + }, + { + value: "2016", + results: [0, 0, 0, 0, 0, 0, 1] + }, + { + value: "56789", + results: [1, 0, 0, 0, 0, 0, 0] + }, + // Test filtering by value + { + value: "horse", + results: [0, 1, 0, 0, 0, 0, 0] + }, + { + value: "$$$", + results: [0, 0, 0, 0, 1, 0, 0] + }, + { + value: "bar", + results: [0, 0, 1, 1, 0, 0, 0] + }, + // Test input with whitespace + { + value: "energy b", + results: [0, 0, 0, 1, 0, 0, 0] + }, + // Test no input at all + { + value: "", + results: [1, 1, 1, 1, 1, 1, 1] + }, + // Test input that matches nothing + { + value: "input that matches nothing", + results: [0, 0, 0, 0, 0, 0, 0] + } + ]; + + let names = $$("#name .table-widget-cell"); + let rows = $$("#value .table-widget-cell"); + for (let testcase of testcases) { + info(`Testing input: ${testcase.value}`); + + gUI.searchBox.value = testcase.value; + gUI.filterItems(); + + for (let i = 0; i < rows.length; i++) { + info(`Testing row ${i}`); + info(`key: ${names[i].value}, value: ${rows[i].value}`); + let state = testcase.results[i] ? "visible" : "hidden"; + is(rows[i].hasAttribute("hidden"), !testcase.results[i], + `Row ${i} should be ${state}`); + } + } + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_search_keyboard_trap.js b/devtools/client/storage/test/browser_storage_search_keyboard_trap.js new file mode 100644 index 000000000..71dfd32c0 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_search_keyboard_trap.js @@ -0,0 +1,15 @@ +// Test ability to focus search field by using keyboard +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-search.html"); + + gUI.tree.expandAll(); + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + + yield focusSearchBoxUsingShortcut(gPanelWindow); + ok(containsFocus(gPanelWindow.document, gUI.searchBox), + "Focus is in a searchbox"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_sessionstorage_edit.js b/devtools/client/storage/test/browser_storage_sessionstorage_edit.js new file mode 100644 index 000000000..9629eec0b --- /dev/null +++ b/devtools/client/storage/test/browser_storage_sessionstorage_edit.js @@ -0,0 +1,24 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Basic test to check the editing of localStorage. + +"use strict"; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-sessionstorage.html"); + + yield selectTreeItem(["sessionStorage", "http://test1.example.org"]); + + yield editCell("TestSS1", "name", "newTestSS1"); + yield editCell("newTestSS1", "value", "newValueSS1"); + + yield editCell("TestSS3", "name", "newTestSS3"); + yield editCell("newTestSS3", "value", "newValueSS3"); + + yield editCell("TestSS5", "name", "newTestSS5"); + yield editCell("newTestSS5", "value", "newValueSS5"); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_sidebar.js b/devtools/client/storage/test/browser_storage_sidebar.js new file mode 100644 index 000000000..9b60026a0 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_sidebar.js @@ -0,0 +1,125 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Test to verify that the sidebar opens, closes and updates +// This test is not testing the values in the sidebar, being tested in _values + +// Format: [ +// <id of the table item to click> or <id array for tree item to select> or +// null to press Escape, +// <do we wait for the async "sidebar-updated" event>, +// <is the sidebar open> +// ] + +"use strict"; + +const testCases = [ + { + location: ["cookies", "sectest1.example.org"], + sidebarHidden: true + }, + { + location: "cs2", + sidebarHidden: false + }, + { + sendEscape: true + }, + { + location: "cs2", + sidebarHidden: false + }, + { + location: "uc1", + sidebarHidden: false + }, + { + location: "uc1", + sidebarHidden: false + }, + + { + location: ["localStorage", "http://sectest1.example.org"], + sidebarHidden: true + }, + { + location: "iframe-u-ls1", + sidebarHidden: false + }, + { + location: "iframe-u-ls1", + sidebarHidden: false + }, + { + sendEscape: true + }, + + { + location: ["sessionStorage", "http://test1.example.org"], + sidebarHidden: true + }, + { + location: "ss1", + sidebarHidden: false + }, + { + sendEscape: true + }, + + { + location: ["indexedDB", "http://test1.example.org"], + sidebarHidden: true + }, + { + location: "idb2", + sidebarHidden: false + }, + + { + location: ["indexedDB", "http://test1.example.org", "idb2", "obj3"], + sidebarHidden: true + }, + + { + location: ["indexedDB", "https://sectest1.example.org", "idb-s2"], + sidebarHidden: true + }, + { + location: "obj-s2", + sidebarHidden: false + }, + { + sendEscape: true + }, { + location: "obj-s2", + sidebarHidden: false + } +]; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-listings.html"); + + for (let test of testCases) { + let { location, sidebarHidden, sendEscape } = test; + + info("running " + JSON.stringify(test)); + + if (Array.isArray(location)) { + yield selectTreeItem(location); + } else if (location) { + yield selectTableItem(location); + } + + if (sendEscape) { + EventUtils.sendKey("ESCAPE", gPanelWindow); + } else { + is(gUI.sidebar.hidden, sidebarHidden, + "correct visibility state of sidebar."); + } + + info("-".repeat(80)); + } + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_sidebar_update.js b/devtools/client/storage/test/browser_storage_sidebar_update.js new file mode 100644 index 000000000..419d63020 --- /dev/null +++ b/devtools/client/storage/test/browser_storage_sidebar_update.js @@ -0,0 +1,41 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Test to verify that the sidebar is not broken when several updates +// come in quick succession. See bug 1260380 - it could happen that the +// "Parsed Value" section gets duplicated. + +"use strict"; + +add_task(function* () { + const ITEM_NAME = "ls1"; + const UPDATE_COUNT = 3; + + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-complex-values.html"); + + let updated = gUI.once("sidebar-updated"); + yield selectTreeItem(["localStorage", "http://test1.example.org"]); + yield selectTableItem(ITEM_NAME); + yield updated; + + is(gUI.sidebar.hidden, false, "sidebar is visible"); + + // do several updates in a row and wait for them to finish + let updates = []; + for (let i = 0; i < UPDATE_COUNT; i++) { + info(`Performing update #${i}`); + updates.push(gUI.once("sidebar-updated")); + gUI.displayObjectSidebar(); + } + yield promise.all(updates); + + info("Updates performed, going to verify result"); + let parsedScope = gUI.view.getScopeAtIndex(1); + let elements = parsedScope.target.querySelectorAll( + `.name[value="${ITEM_NAME}"]`); + is(elements.length, 1, + `There is only one displayed variable named '${ITEM_NAME}'`); + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/browser_storage_values.js b/devtools/client/storage/test/browser_storage_values.js new file mode 100644 index 000000000..920ce350e --- /dev/null +++ b/devtools/client/storage/test/browser_storage_values.js @@ -0,0 +1,165 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Test to verify that the values shown in sidebar are correct + +// Format: [ +// <id of the table item to click> or <id array for tree item to select> or +// null do click nothing, +// null to skip checking value in variables view or a key value pair object +// which will be asserted to exist in the storage sidebar, +// true if the check is to be made in the parsed value section +// ] + +"use strict"; + +const LONG_WORD = "a".repeat(1000); + +const testCases = [ + ["cs2", [ + {name: "cs2", value: "sessionCookie"}, + {name: "cs2.Path", value: "/"}, + {name: "cs2.HostOnly", value: "false"}, + {name: "cs2.HttpOnly", value: "false"}, + {name: "cs2.Domain", value: ".example.org"}, + {name: "cs2.Expires", value: "Session"}, + {name: "cs2.Secure", value: "false"}, + ]], + ["c1", [ + {name: "c1", value: JSON.stringify(["foo", "Bar", {foo: "Bar"}])}, + {name: "c1.Path", value: "/browser"}, + {name: "c1.HostOnly", value: "true"}, + {name: "c1.HttpOnly", value: "false"}, + {name: "c1.Domain", value: "test1.example.org"}, + {name: "c1.Expires", value: new Date(2000000000000).toUTCString()}, + {name: "c1.Secure", value: "false"}, + ]], + [null, [ + {name: "c1", value: "Array"}, + {name: "c1.0", value: "foo"}, + {name: "c1.1", value: "Bar"}, + {name: "c1.2", value: "Object"}, + {name: "c1.2.foo", value: "Bar"}, + ], true], + ["c_encoded", [ + {name: "c_encoded", value: encodeURIComponent(JSON.stringify({foo: {foo1: "bar"}}))} + ]], + [null, [ + {name: "c_encoded", value: "Object"}, + {name: "c_encoded.foo", value: "Object"}, + {name: "c_encoded.foo.foo1", value: "bar"} + ], true], + [["localStorage", "http://test1.example.org"]], + ["ls2", [ + {name: "ls2", value: "foobar-2"} + ]], + ["ls1", [ + {name: "ls1", value: JSON.stringify({ + es6: "for", the: "win", baz: [0, 2, 3, { + deep: "down", + nobody: "cares" + }]})} + ]], + [null, [ + {name: "ls1", value: "Object"}, + {name: "ls1.es6", value: "for"}, + {name: "ls1.the", value: "win"}, + {name: "ls1.baz", value: "Array"}, + {name: "ls1.baz.0", value: "0"}, + {name: "ls1.baz.1", value: "2"}, + {name: "ls1.baz.2", value: "3"}, + {name: "ls1.baz.3", value: "Object"}, + {name: "ls1.baz.3.deep", value: "down"}, + {name: "ls1.baz.3.nobody", value: "cares"}, + ], true], + ["ls3", [ + {name: "ls3", "value": "http://foobar.com/baz.php"} + ]], + [null, [ + {name: "ls3", "value": "http://foobar.com/baz.php", dontMatch: true} + ], true], + [["sessionStorage", "http://test1.example.org"]], + ["ss1", [ + {name: "ss1", value: "This#is#an#array"} + ]], + [null, [ + {name: "ss1", value: "Array"}, + {name: "ss1.0", value: "This"}, + {name: "ss1.1", value: "is"}, + {name: "ss1.2", value: "an"}, + {name: "ss1.3", value: "array"}, + ], true], + ["ss2", [ + {name: "ss2", value: "Array"}, + {name: "ss2.0", value: "This"}, + {name: "ss2.1", value: "is"}, + {name: "ss2.2", value: "another"}, + {name: "ss2.3", value: "array"}, + ], true], + ["ss3", [ + {name: "ss3", value: "Object"}, + {name: "ss3.this", value: "is"}, + {name: "ss3.an", value: "object"}, + {name: "ss3.foo", value: "bar"}, + ], true], + ["ss4", [ + {name: "ss4", value: "Array"}, + {name: "ss4.0", value: ""}, + {name: "ss4.1", value: "array"}, + {name: "ss4.2", value: ""}, + {name: "ss4.3", value: "with"}, + {name: "ss4.4", value: "empty"}, + {name: "ss4.5", value: "items"}, + ], true], + ["ss5", [ + {name: "ss5", value: "Array"}, + {name: "ss5.0", value: LONG_WORD}, + {name: "ss5.1", value: LONG_WORD}, + {name: "ss5.2", value: LONG_WORD}, + {name: "ss5.3", value: `${LONG_WORD}&${LONG_WORD}`}, + {name: "ss5.4", value: `${LONG_WORD}&${LONG_WORD}`}, + ], true], + [["indexedDB", "http://test1.example.org", "idb1", "obj1"]], + [1, [ + {name: 1, value: JSON.stringify({id: 1, name: "foo", email: "foo@bar.com"})} + ]], + [null, [ + {name: "1.id", value: "1"}, + {name: "1.name", value: "foo"}, + {name: "1.email", value: "foo@bar.com"}, + ], true], + [["indexedDB", "http://test1.example.org", "idb1", "obj2"]], + [1, [ + {name: 1, value: JSON.stringify({ + id2: 1, name: "foo", email: "foo@bar.com", extra: "baz" + })} + ]], + [null, [ + {name: "1.id2", value: "1"}, + {name: "1.name", value: "foo"}, + {name: "1.email", value: "foo@bar.com"}, + {name: "1.extra", value: "baz"}, + ], true] +]; + +add_task(function* () { + yield openTabAndSetupStorage(MAIN_DOMAIN + "storage-complex-values.html"); + + gUI.tree.expandAll(); + + for (let item of testCases) { + info("clicking for item " + item); + + if (Array.isArray(item[0])) { + yield selectTreeItem(item[0]); + continue; + } else if (item[0]) { + yield selectTableItem(item[0]); + } + + yield findVariableViewProperties(item[1], item[2]); + } + + yield finishTests(); +}); diff --git a/devtools/client/storage/test/head.js b/devtools/client/storage/test/head.js new file mode 100644 index 000000000..9662393cf --- /dev/null +++ b/devtools/client/storage/test/head.js @@ -0,0 +1,840 @@ +/* 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"; + +/* eslint no-unused-vars: [2, {"vars": "local"}] */ +/* import-globals-from ../../framework/test/shared-head.js */ + +// shared-head.js handles imports, constants, and utility functions +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", + this); + +const {TableWidget} = require("devtools/client/shared/widgets/TableWidget"); +const SPLIT_CONSOLE_PREF = "devtools.toolbox.splitconsoleEnabled"; +const STORAGE_PREF = "devtools.storage.enabled"; +const DUMPEMIT_PREF = "devtools.dump.emit"; +const DEBUGGERLOG_PREF = "devtools.debugger.log"; +// Allows Cache API to be working on usage `http` test page +const CACHES_ON_HTTP_PREF = "dom.caches.testing.enabled"; +const PATH = "browser/devtools/client/storage/test/"; +const MAIN_DOMAIN = "http://test1.example.org/" + PATH; +const ALT_DOMAIN = "http://sectest1.example.org/" + PATH; +const ALT_DOMAIN_SECURED = "https://sectest1.example.org:443/" + PATH; + +var gToolbox, gPanelWindow, gWindow, gUI; + +// Services.prefs.setBoolPref(DUMPEMIT_PREF, true); +// Services.prefs.setBoolPref(DEBUGGERLOG_PREF, true); + +Services.prefs.setBoolPref(STORAGE_PREF, true); +Services.prefs.setBoolPref(CACHES_ON_HTTP_PREF, true); +registerCleanupFunction(() => { + gToolbox = gPanelWindow = gWindow = gUI = null; + Services.prefs.clearUserPref(STORAGE_PREF); + Services.prefs.clearUserPref(SPLIT_CONSOLE_PREF); + Services.prefs.clearUserPref(DUMPEMIT_PREF); + Services.prefs.clearUserPref(DEBUGGERLOG_PREF); + Services.prefs.clearUserPref(CACHES_ON_HTTP_PREF); +}); + +/** + * This generator function opens the given url in a new tab, then sets up the + * page by waiting for all cookies, indexedDB items etc. to be created; Then + * opens the storage inspector and waits for the storage tree and table to be + * populated. + * + * @param url {String} The url to be opened in the new tab + * + * @return {Promise} A promise that resolves after storage inspector is ready + */ +function* openTabAndSetupStorage(url) { + let tab = yield addTab(url); + let content = tab.linkedBrowser.contentWindow; + + gWindow = content.wrappedJSObject; + + // Setup the async storages in main window and for all its iframes + yield ContentTask.spawn(gBrowser.selectedBrowser, null, function* () { + /** + * Get all windows including frames recursively. + * + * @param {Window} [baseWindow] + * The base window at which to start looking for child windows + * (optional). + * @return {Set} + * A set of windows. + */ + function getAllWindows(baseWindow) { + let windows = new Set(); + + let _getAllWindows = function (win) { + windows.add(win.wrappedJSObject); + + for (let i = 0; i < win.length; i++) { + _getAllWindows(win[i]); + } + }; + _getAllWindows(baseWindow); + + return windows; + } + + let windows = getAllWindows(content); + for (let win of windows) { + let readyState = win.document.readyState; + info(`Found a window: ${readyState}`); + if (readyState != "complete") { + yield new Promise(resolve => { + let onLoad = () => { + win.removeEventListener("load", onLoad); + resolve(); + }; + win.addEventListener("load", onLoad); + }); + } + if (win.setup) { + yield win.setup(); + } + } + }); + + // open storage inspector + return yield openStoragePanel(); +} + +/** + * Open the toolbox, with the storage tool visible. + * + * @param cb {Function} Optional callback, if you don't want to use the returned + * promise + * + * @return {Promise} a promise that resolves when the storage inspector is ready + */ +var openStoragePanel = Task.async(function* (cb) { + info("Opening the storage inspector"); + let target = TargetFactory.forTab(gBrowser.selectedTab); + + let storage, toolbox; + + // Checking if the toolbox and the storage are already loaded + // The storage-updated event should only be waited for if the storage + // isn't loaded yet + toolbox = gDevTools.getToolbox(target); + if (toolbox) { + storage = toolbox.getPanel("storage"); + if (storage) { + gPanelWindow = storage.panelWindow; + gUI = storage.UI; + gToolbox = toolbox; + info("Toolbox and storage already open"); + if (cb) { + return cb(storage, toolbox); + } + + return { + toolbox: toolbox, + storage: storage + }; + } + } + + info("Opening the toolbox"); + toolbox = yield gDevTools.showToolbox(target, "storage"); + storage = toolbox.getPanel("storage"); + gPanelWindow = storage.panelWindow; + gUI = storage.UI; + gToolbox = toolbox; + + // The table animation flash causes some timeouts on Linux debug tests, + // so we disable it + gUI.animationsEnabled = false; + + info("Waiting for the stores to update"); + yield gUI.once("store-objects-updated"); + + yield waitForToolboxFrameFocus(toolbox); + + if (cb) { + return cb(storage, toolbox); + } + + return { + toolbox: toolbox, + storage: storage + }; +}); + +/** + * Wait for the toolbox frame to receive focus after it loads + * + * @param toolbox {Toolbox} + * + * @return a promise that resolves when focus has been received + */ +function waitForToolboxFrameFocus(toolbox) { + info("Making sure that the toolbox's frame is focused"); + let def = promise.defer(); + waitForFocus(def.resolve, toolbox.win); + return def.promise; +} + +/** + * Forces GC, CC and Shrinking GC to get rid of disconnected docshells and + * windows. + */ +function forceCollections() { + Cu.forceGC(); + Cu.forceCC(); + Cu.forceShrinkingGC(); +} + +/** + * Cleans up and finishes the test + */ +function* finishTests() { + // Bug 1233497 makes it so that we can no longer yield CPOWs from Tasks. + // We work around this by calling clear() via a ContentTask instead. + yield ContentTask.spawn(gBrowser.selectedBrowser, null, function* () { + /** + * Get all windows including frames recursively. + * + * @param {Window} [baseWindow] + * The base window at which to start looking for child windows + * (optional). + * @return {Set} + * A set of windows. + */ + function getAllWindows(baseWindow) { + let windows = new Set(); + + let _getAllWindows = function (win) { + windows.add(win.wrappedJSObject); + + for (let i = 0; i < win.length; i++) { + _getAllWindows(win[i]); + } + }; + _getAllWindows(baseWindow); + + return windows; + } + + let windows = getAllWindows(content); + for (let win of windows) { + // Some windows (e.g., about: URLs) don't have storage available + try { + win.localStorage.clear(); + win.sessionStorage.clear(); + } catch (ex) { + // ignore + } + + if (win.clear) { + yield win.clear(); + } + } + }); + + Services.cookies.removeAll(); + forceCollections(); + finish(); +} + +// Sends a click event on the passed DOM node in an async manner +function* click(node) { + let def = promise.defer(); + + node.scrollIntoView(); + + // We need setTimeout here to allow any scrolling to complete before clicking + // the node. + setTimeout(() => { + node.click(); + def.resolve(); + }, 200); + + return def; +} + +/** + * Recursively expand the variables view up to a given property. + * + * @param options + * Options for view expansion: + * - rootVariable: start from the given scope/variable/property. + * - expandTo: string made up of property names you want to expand. + * For example: "body.firstChild.nextSibling" given |rootVariable: + * document|. + * @return object + * A promise that is resolved only when the last property in |expandTo| + * is found, and rejected otherwise. Resolution reason is always the + * last property - |nextSibling| in the example above. Rejection is + * always the last property that was found. + */ +function variablesViewExpandTo(options) { + let root = options.rootVariable; + let expandTo = options.expandTo.split("."); + let lastDeferred = promise.defer(); + + function getNext(prop) { + let name = expandTo.shift(); + let newProp = prop.get(name); + + if (expandTo.length > 0) { + ok(newProp, "found property " + name); + if (newProp && newProp.expand) { + newProp.expand(); + getNext(newProp); + } else { + lastDeferred.reject(prop); + } + } else if (newProp) { + lastDeferred.resolve(newProp); + } else { + lastDeferred.reject(prop); + } + } + + if (root && root.expand) { + root.expand(); + getNext(root); + } else { + lastDeferred.resolve(root); + } + + return lastDeferred.promise; +} + +/** + * Find variables or properties in a VariablesView instance. + * + * @param array ruleArray + * The array of rules you want to match. Each rule is an object with: + * - name (string|regexp): property name to match. + * - value (string|regexp): property value to match. + * - dontMatch (boolean): make sure the rule doesn't match any property. + * @param boolean parsed + * true if we want to test the rules in the parse value section of the + * storage sidebar + * @return object + * A promise object that is resolved when all the rules complete + * matching. The resolved callback is given an array of all the rules + * you wanted to check. Each rule has a new property: |matchedProp| + * which holds a reference to the Property object instance from the + * VariablesView. If the rule did not match, then |matchedProp| is + * undefined. + */ +function findVariableViewProperties(ruleArray, parsed) { + // Initialize the search. + function init() { + // If parsed is true, we are checking rules in the parsed value section of + // the storage sidebar. That scope uses a blank variable as a placeholder + // Thus, adding a blank parent to each name + if (parsed) { + ruleArray = ruleArray.map(({name, value, dontMatch}) => { + return {name: "." + name, value, dontMatch}; + }); + } + // Separate out the rules that require expanding properties throughout the + // view. + let expandRules = []; + let rules = ruleArray.filter(rule => { + if (typeof rule.name == "string" && rule.name.indexOf(".") > -1) { + expandRules.push(rule); + return false; + } + return true; + }); + + // Search through the view those rules that do not require any properties to + // be expanded. Build the array of matchers, outstanding promises to be + // resolved. + let outstanding = []; + + finder(rules, gUI.view, outstanding); + + // Process the rules that need to expand properties. + let lastStep = processExpandRules.bind(null, expandRules); + + // Return the results - a promise resolved to hold the updated ruleArray. + let returnResults = onAllRulesMatched.bind(null, ruleArray); + + return promise.all(outstanding).then(lastStep).then(returnResults); + } + + function onMatch(prop, rule, matched) { + if (matched && !rule.matchedProp) { + rule.matchedProp = prop; + } + } + + function finder(rules, view, promises) { + for (let scope of view) { + for (let [, prop] of scope) { + for (let rule of rules) { + let matcher = matchVariablesViewProperty(prop, rule); + promises.push(matcher.then(onMatch.bind(null, prop, rule))); + } + } + } + } + + function processExpandRules(rules) { + let rule = rules.shift(); + if (!rule) { + return promise.resolve(null); + } + + let deferred = promise.defer(); + let expandOptions = { + rootVariable: gUI.view.getScopeAtIndex(parsed ? 1 : 0), + expandTo: rule.name + }; + + variablesViewExpandTo(expandOptions).then(function onSuccess(prop) { + let name = rule.name; + let lastName = name.split(".").pop(); + rule.name = lastName; + + let matched = matchVariablesViewProperty(prop, rule); + return matched.then(onMatch.bind(null, prop, rule)).then(function () { + rule.name = name; + }); + }, function onFailure() { + return promise.resolve(null); + }).then(processExpandRules.bind(null, rules)).then(function () { + deferred.resolve(null); + }); + + return deferred.promise; + } + + function onAllRulesMatched(rules) { + for (let rule of rules) { + let matched = rule.matchedProp; + if (matched && !rule.dontMatch) { + ok(true, "rule " + rule.name + " matched for property " + matched.name); + } else if (matched && rule.dontMatch) { + ok(false, "rule " + rule.name + " should not match property " + + matched.name); + } else { + ok(rule.dontMatch, "rule " + rule.name + " did not match any property"); + } + } + return rules; + } + + return init(); +} + +/** + * Check if a given Property object from the variables view matches the given + * rule. + * + * @param object prop + * The variable's view Property instance. + * @param object rule + * Rules for matching the property. See findVariableViewProperties() for + * details. + * @return object + * A promise that is resolved when all the checks complete. Resolution + * result is a boolean that tells your promise callback the match + * result: true or false. + */ +function matchVariablesViewProperty(prop, rule) { + function resolve(result) { + return promise.resolve(result); + } + + if (!prop) { + return resolve(false); + } + + if (rule.name) { + let match = rule.name instanceof RegExp ? + rule.name.test(prop.name) : + prop.name == rule.name; + if (!match) { + return resolve(false); + } + } + + if ("value" in rule) { + let displayValue = prop.displayValue; + if (prop.displayValueClassName == "token-string") { + displayValue = displayValue.substring(1, displayValue.length - 1); + } + + let match = rule.value instanceof RegExp ? + rule.value.test(displayValue) : + displayValue == rule.value; + if (!match) { + info("rule " + rule.name + " did not match value, expected '" + + rule.value + "', found '" + displayValue + "'"); + return resolve(false); + } + } + + return resolve(true); +} + +/** + * Click selects a row in the table. + * + * @param {[String]} ids + * The array id of the item in the tree + */ +function* selectTreeItem(ids) { + /* If this item is already selected, return */ + if (gUI.tree.isSelected(ids)) { + return; + } + + let updated = gUI.once("store-objects-updated"); + gUI.tree.selectedItem = ids; + yield updated; +} + +/** + * Click selects a row in the table. + * + * @param {String} id + * The id of the row in the table widget + */ +function* selectTableItem(id) { + let selector = ".table-widget-cell[data-id='" + id + "']"; + let target = gPanelWindow.document.querySelector(selector); + ok(target, "table item found with ids " + id); + + yield click(target); + yield gUI.once("sidebar-updated"); +} + +/** + * Wait for eventName on target. + * @param {Object} target An observable object that either supports on/off or + * addEventListener/removeEventListener + * @param {String} eventName + * @param {Boolean} [useCapture] for addEventListener/removeEventListener + * @return A promise that resolves when the event has been handled + */ +function once(target, eventName, useCapture = false) { + info("Waiting for event: '" + eventName + "' on " + target + "."); + + let deferred = promise.defer(); + + for (let [add, remove] of [ + ["addEventListener", "removeEventListener"], + ["addListener", "removeListener"], + ["on", "off"] + ]) { + if ((add in target) && (remove in target)) { + target[add](eventName, function onEvent(...aArgs) { + target[remove](eventName, onEvent, useCapture); + deferred.resolve.apply(deferred, aArgs); + }, useCapture); + break; + } + } + + return deferred.promise; +} + +/** + * Get values for a row. + * + * @param {String} id + * The uniqueId of the given row. + * @param {Boolean} includeHidden + * Include hidden columns. + * + * @return {Object} + * An object of column names to values for the given row. + */ +function getRowValues(id, includeHidden = false) { + let cells = getRowCells(id, includeHidden); + let values = {}; + + for (let name in cells) { + let cell = cells[name]; + + values[name] = cell.value; + } + + return values; +} + +/** + * Get cells for a row. + * + * @param {String} id + * The uniqueId of the given row. + * @param {Boolean} includeHidden + * Include hidden columns. + * + * @return {Object} + * An object of column names to cells for the given row. + */ +function getRowCells(id, includeHidden = false) { + let doc = gPanelWindow.document; + let table = gUI.table; + let item = doc.querySelector(".table-widget-column#" + table.uniqueId + + " .table-widget-cell[value='" + id + "']"); + + if (!item) { + ok(false, "Row id '" + id + "' exists"); + } + + let index = table.columns.get(table.uniqueId).visibleCellNodes.indexOf(item); + let cells = {}; + + for (let [name, column] of [...table.columns]) { + if (!includeHidden && column.column.parentNode.hidden) { + continue; + } + cells[name] = column.visibleCellNodes[index]; + } + + return cells; +} + +/** + * Get a cell value. + * + * @param {String} id + * The uniqueId of the row. + * @param {String} column + * The id of the column + * + * @yield {String} + * The cell value. + */ +function getCellValue(id, column) { + let row = getRowValues(id, true); + + return row[column]; +} + +/** + * Edit a cell value. The cell is assumed to be in edit mode, see startCellEdit. + * + * @param {String} id + * The uniqueId of the row. + * @param {String} column + * The id of the column + * @param {String} newValue + * Replacement value. + * @param {Boolean} validate + * Validate result? Default true. + * + * @yield {String} + * The uniqueId of the changed row. + */ +function* editCell(id, column, newValue, validate = true) { + let row = getRowCells(id, true); + let editableFieldsEngine = gUI.table._editableFieldsEngine; + + editableFieldsEngine.edit(row[column]); + + yield typeWithTerminator(newValue, "VK_RETURN", validate); +} + +/** + * Begin edit mode for a cell. + * + * @param {String} id + * The uniqueId of the row. + * @param {String} column + * The id of the column + * @param {Boolean} selectText + * Select text? Default true. + */ +function* startCellEdit(id, column, selectText = true) { + let row = getRowCells(id, true); + let editableFieldsEngine = gUI.table._editableFieldsEngine; + let cell = row[column]; + + info("Selecting row " + id); + gUI.table.selectedRow = id; + + info("Starting cell edit (" + id + ", " + column + ")"); + editableFieldsEngine.edit(cell); + + if (!selectText) { + let textbox = gUI.table._editableFieldsEngine.textbox; + textbox.selectionEnd = textbox.selectionStart; + } +} + +/** + * Check a cell value. + * + * @param {String} id + * The uniqueId of the row. + * @param {String} column + * The id of the column + * @param {String} expected + * Expected value. + */ +function checkCell(id, column, expected) { + is(getCellValue(id, column), expected, + column + " column has the right value for " + id); +} + +/** + * Show or hide a column. + * + * @param {String} id + * The uniqueId of the given column. + * @param {Boolean} state + * true = show, false = hide + */ +function showColumn(id, state) { + let columns = gUI.table.columns; + let column = columns.get(id); + + if (state) { + column.wrapper.removeAttribute("hidden"); + } else { + column.wrapper.setAttribute("hidden", true); + } +} + +/** + * Show or hide all columns. + * + * @param {Boolean} state + * true = show, false = hide + */ +function showAllColumns(state) { + let columns = gUI.table.columns; + + for (let [id] of columns) { + showColumn(id, state); + } +} + +/** + * Type a string in the currently selected editor and then wait for the row to + * be updated. + * + * @param {String} str + * The string to type. + * @param {String} terminator + * The terminating key e.g. VK_RETURN or VK_TAB + * @param {Boolean} validate + * Validate result? Default true. + */ +function* typeWithTerminator(str, terminator, validate = true) { + let editableFieldsEngine = gUI.table._editableFieldsEngine; + let textbox = editableFieldsEngine.textbox; + let colName = textbox.closest(".table-widget-column").id; + + let changeExpected = str !== textbox.value; + + if (!changeExpected) { + return editableFieldsEngine.currentTarget.getAttribute("data-id"); + } + + info("Typing " + str); + EventUtils.sendString(str); + + info("Pressing " + terminator); + EventUtils.synthesizeKey(terminator, {}); + + if (validate) { + info("Validating results... waiting for ROW_EDIT event."); + let uniqueId = yield gUI.table.once(TableWidget.EVENTS.ROW_EDIT); + + checkCell(uniqueId, colName, str); + return uniqueId; + } + + return yield gUI.table.once(TableWidget.EVENTS.ROW_EDIT); +} + +function getCurrentEditorValue() { + let editableFieldsEngine = gUI.table._editableFieldsEngine; + let textbox = editableFieldsEngine.textbox; + + return textbox.value; +} + +/** + * Press a key x times. + * + * @param {String} key + * The key to press e.g. VK_RETURN or VK_TAB + * @param {Number} x + * The number of times to press the key. + * @param {Object} modifiers + * The event modifier e.g. {shiftKey: true} + */ +function PressKeyXTimes(key, x, modifiers = {}) { + for (let i = 0; i < x; i++) { + EventUtils.synthesizeKey(key, modifiers); + } +} + +/** + * Verify the storage inspector state: check that given type/host exists + * in the tree, and that the table contains rows with specified names. + * + * @param {Array} state Array of state specifications. For example, + * [["cookies", "example.com"], ["c1", "c2"]] means to select the + * "example.com" host in cookies and then verify there are "c1" and "c2" + * cookies (and no other ones). + */ +function* checkState(state) { + for (let [store, names] of state) { + let storeName = store.join(" > "); + info(`Selecting tree item ${storeName}`); + yield selectTreeItem(store); + + let items = gUI.table.items; + + is(items.size, names.length, + `There is correct number of rows in ${storeName}`); + for (let name of names) { + ok(items.has(name), + `There is item with name '${name}' in ${storeName}`); + } + } +} + +/** + * Checks if document's active element is within the given element. + * @param {HTMLDocument} doc document with active element in question + * @param {DOMNode} container element tested on focus containment + * @return {Boolean} + */ +function containsFocus(doc, container) { + let elm = doc.activeElement; + while (elm) { + if (elm === container) { + return true; + } + elm = elm.parentNode; + } + return false; +} + +var focusSearchBoxUsingShortcut = Task.async(function* (panelWin, callback) { + info("Focusing search box"); + let searchBox = panelWin.document.getElementById("storage-searchbox"); + let focused = once(searchBox, "focus"); + + panelWin.focus(); + let strings = Services.strings.createBundle( + "chrome://devtools/locale/storage.properties"); + synthesizeKeyShortcut(strings.GetStringFromName("storage.filter.key")); + + yield focused; + + if (callback) { + callback(); + } +}); diff --git a/devtools/client/storage/test/storage-cache-error.html b/devtools/client/storage/test/storage-cache-error.html new file mode 100644 index 000000000..80b14e287 --- /dev/null +++ b/devtools/client/storage/test/storage-cache-error.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Storage inspector test for handling errors in CacheStorage</title> +</head> +<body> +<script type="application/javascript;version=1.7"> +"use strict"; + +// Create an iframe with a javascript: source URL. Such iframes are +// considered untrusted by the CacheStorage. +let frameEl = document.createElement("iframe"); +document.body.appendChild(frameEl); + +window.frameContent = 'Hello World'; +frameEl.contentWindow.location.href = "javascript:parent.frameContent"; +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-complex-values.html b/devtools/client/storage/test/storage-complex-values.html new file mode 100644 index 000000000..d96da1932 --- /dev/null +++ b/devtools/client/storage/test/storage-complex-values.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<html> +<!-- +Bug 970517 - Storage inspector front end - tests +--> +<head> + <meta charset="utf-8"> + <title>Storage inspector test for correct values in the sidebar</title> +</head> +<body> +<script type="application/javascript;version=1.7"> +"use strict"; +let partialHostname = location.hostname.match(/^[^.]+(\..*)$/)[1]; +let cookieExpiresTime = 2000000000000; +// Setting up some cookies to eat. +document.cookie = "c1=" + JSON.stringify([ + "foo", "Bar", { + foo: "Bar" + }]) + "; expires=" + new Date(cookieExpiresTime).toGMTString() + + "; path=/browser"; +document.cookie = "cs2=sessionCookie; path=/; domain=" + partialHostname; +// URLEncoded cookie +document.cookie = "c_encoded=" + encodeURIComponent(JSON.stringify({foo: {foo1: "bar"}})); + +// ... and some local storage items .. +const es6 = "for"; +localStorage.setItem("ls1", JSON.stringify({ + es6, the: "win", baz: [0, 2, 3, { + deep: "down", + nobody: "cares" + }]})); +localStorage.setItem("ls2", "foobar-2"); +localStorage.setItem("ls3", "http://foobar.com/baz.php"); +// ... and finally some session storage items too +sessionStorage.setItem("ss1", "This#is#an#array"); +sessionStorage.setItem("ss2", "This~is~another~array"); +sessionStorage.setItem("ss3", "this#is~an#object~foo#bar"); +sessionStorage.setItem("ss4", "#array##with#empty#items"); +// long string that is almost an object and might trigger exponential +// regexp backtracking +let s = "a".repeat(1000); +sessionStorage.setItem("ss5", `${s}=${s}=${s}=${s}&${s}=${s}&${s}`); +console.log("added cookies and stuff from main page"); + +let idbGenerator = function*() { + let request = indexedDB.open("idb1", 1); + request.onerror = function() { + throw new Error("error opening db connection"); + }; + let db = yield new Promise(done => { + request.onupgradeneeded = event => { + let db = event.target.result; + let store1 = db.createObjectStore("obj1", { keyPath: "id" }); + store1.createIndex("name", "name", { unique: false }); + store1.createIndex("email", "email", { unique: true }); + db.createObjectStore("obj2", { keyPath: "id2" }); + store1.transaction.oncomplete = () => { + done(db); + }; + }; + }); + + // Prevents AbortError + yield new Promise(done => { + request.onsuccess = done; + }); + + let transaction = db.transaction(["obj1", "obj2"], "readwrite"); + let store1 = transaction.objectStore("obj1"); + let store2 = transaction.objectStore("obj2"); + + store1.add({id: 1, name: "foo", email: "foo@bar.com"}); + store1.add({id: 2, name: "foo2", email: "foo2@bar.com"}); + store1.add({id: 3, name: "foo2", email: "foo3@bar.com"}); + store2.add({ + id2: 1, + name: "foo", + email: "foo@bar.com", + extra: "baz"}); + + db.close(); + + request = indexedDB.open("idb2", 1); + let db2 = yield new Promise(done => { + request.onupgradeneeded = event => { + let db2 = event.target.result; + let store3 = db2.createObjectStore("obj3", { keyPath: "id3" }); + store3.createIndex("name2", "name2", { unique: true }); + store3.transaction.oncomplete = () => { + done(db2); + }; + }; + }); + + // Prevents AbortError during close() + yield new Promise(done => { + request.onsuccess = done; + }); + + db2.close(); + console.log("added cookies and stuff from main page"); +}; + +function deleteDB(dbName) { + return new Promise(resolve => { + dump("removing database " + dbName + " from " + document.location + "\n"); + indexedDB.deleteDatabase(dbName).onsuccess = resolve; + }); +} + +window.setup = function*() { + yield idbGenerator(); +}; + +window.clear = function*() { + yield deleteDB("idb1"); + yield deleteDB("idb2"); + + dump("removed indexedDB data from " + document.location + "\n"); +}; +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-cookies.html b/devtools/client/storage/test/storage-cookies.html new file mode 100644 index 000000000..97c15abaa --- /dev/null +++ b/devtools/client/storage/test/storage-cookies.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html> + <!-- + Bug 970517 - Storage inspector front end - tests + --> + <head> + <meta charset="utf-8"> + <title>Storage inspector cookie test</title> + </head> + <body> + <script type="application/javascript;version=1.7"> + "use strict"; + let expiresIn24Hours = new Date(Date.now() + 60 * 60 * 24 * 1000).toUTCString(); + for (let i = 1; i <= 5; i++) { + let cookieString = "test" + i + "=value" + i + + ";expires=" + expiresIn24Hours + ";path=/browser"; + if (i % 2) { + cookieString += ";domain=test1.example.org"; + } + document.cookie = cookieString; + } + </script> + </body> +</html> diff --git a/devtools/client/storage/test/storage-empty-objectstores.html b/devtools/client/storage/test/storage-empty-objectstores.html new file mode 100644 index 000000000..096e90a32 --- /dev/null +++ b/devtools/client/storage/test/storage-empty-objectstores.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test for proper listing indexedDB databases with no object stores</title> +</head> +<body> +<script type="application/javascript;version=1.7"> + +window.setup = function* () { + let request = indexedDB.open("idb1", 1); + let db = yield new Promise((resolve, reject) => { + request.onerror = e => reject(Error("error opening db connection")); + request.onupgradeneeded = event => { + let db = event.target.result; + let store1 = db.createObjectStore("obj1", { keyPath: "id" }); + store1.createIndex("name", "name", { unique: false }); + store1.createIndex("email", "email", { unique: true }); + let store2 = db.createObjectStore("obj2", { keyPath: "id2" }); + store1.transaction.oncomplete = () => resolve(db); + }; + }); + + yield new Promise(resolve => request.onsuccess = resolve); + + let transaction = db.transaction(["obj1", "obj2"], "readwrite"); + let store1 = transaction.objectStore("obj1"); + let store2 = transaction.objectStore("obj2"); + + store1.add({id: 1, name: "foo", email: "foo@bar.com"}); + store1.add({id: 2, name: "foo2", email: "foo2@bar.com"}); + store1.add({id: 3, name: "foo2", email: "foo3@bar.com"}); + store2.add({id2: 1, name: "foo", email: "foo@bar.com", extra: "baz"}); + + yield new Promise(resolve => transaction.oncomplete = resolve); + + db.close(); + + request = indexedDB.open("idb2", 1); + let db2 = yield new Promise((resolve, reject) => { + request.onerror = e => reject(Error("error opening db2 connection")); + request.onupgradeneeded = event => resolve(event.target.result); + }); + + yield new Promise(resolve => request.onsuccess = resolve); + + db2.close(); + dump("added indexedDB items from main page\n"); +}; + +window.clear = function* () { + for (let dbName of ["idb1", "idb2"]) { + yield new Promise(resolve => { + indexedDB.deleteDatabase(dbName).onsuccess = resolve; + }); + } + dump("removed indexedDB items from main page\n"); +}; + +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-idb-delete-blocked.html b/devtools/client/storage/test/storage-idb-delete-blocked.html new file mode 100644 index 000000000..ef7017f08 --- /dev/null +++ b/devtools/client/storage/test/storage-idb-delete-blocked.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Test for proper listing indexedDB databases with no object stores</title> +</head> +<body> +<script type="application/javascript;version=1.7"> + +let db; + +window.setup = function* () { + db = yield new Promise((resolve, reject) => { + let request = indexedDB.open("idb", 1); + + request.onsuccess = e => resolve(e.target.result); + request.onerror = e => reject(new Error("error opening db connection")); + + request.onupgradeneeded = e => { + let db = e.target.result; + let store = db.createObjectStore("obj", { keyPath: "id" }); + }; + }); + + dump("opened indexedDB\n"); +}; + +window.closeDb = function* () { + db.close(); +}; + +window.deleteDb = function* () { + yield new Promise((resolve, reject) => { + let request = indexedDB.deleteDatabase("idb"); + + request.onsuccess = resolve; + request.onerror = e => reject(new Error("error deleting db")); + }); +}; + +window.clear = function* () { + for (let dbName of ["idb1", "idb2"]) { + yield new Promise(resolve => { + indexedDB.deleteDatabase(dbName).onsuccess = resolve; + }); + } + dump("removed indexedDB items from main page\n"); +}; + +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-listings.html b/devtools/client/storage/test/storage-listings.html new file mode 100644 index 000000000..de3054d3a --- /dev/null +++ b/devtools/client/storage/test/storage-listings.html @@ -0,0 +1,126 @@ +<!DOCTYPE HTML> +<html> +<!-- +Bug 970517 - Storage inspector front end - tests +--> +<head> + <meta charset="utf-8"> + <title>Storage inspector test for listing hosts and storages</title> +</head> +<body> +<iframe src="http://sectest1.example.org/browser/devtools/client/storage/test/storage-unsecured-iframe.html"></iframe> +<iframe src="https://sectest1.example.org:443/browser/devtools/client/storage/test/storage-secured-iframe.html"></iframe> +<script type="application/javascript;version=1.7"> +"use strict"; +let partialHostname = location.hostname.match(/^[^.]+(\..*)$/)[1]; +let cookieExpiresTime1 = 2000000000000; +let cookieExpiresTime2 = 2000000001000; +// Setting up some cookies to eat. +document.cookie = "c1=foobar; expires=" + + new Date(cookieExpiresTime1).toGMTString() + "; path=/browser"; +document.cookie = "cs2=sessionCookie; path=/; domain=" + partialHostname; +document.cookie = "c3=foobar-2; expires=" + + new Date(cookieExpiresTime2).toGMTString() + "; path=/"; +// ... and some local storage items .. +localStorage.setItem("ls1", "foobar"); +localStorage.setItem("ls2", "foobar-2"); +// ... and finally some session storage items too +sessionStorage.setItem("ss1", "foobar-3"); +dump("added cookies and storage from main page\n"); + +let idbGenerator = function*() { + let request = indexedDB.open("idb1", 1); + request.onerror = function() { + throw new Error("error opening db connection"); + }; + let db = yield new Promise(done => { + request.onupgradeneeded = event => { + let db = event.target.result; + let store1 = db.createObjectStore("obj1", { keyPath: "id" }); + store1.createIndex("name", "name", { unique: false }); + store1.createIndex("email", "email", { unique: true }); + let store2 = db.createObjectStore("obj2", { keyPath: "id2" }); + store1.transaction.oncomplete = () => { + done(db); + }; + }; + }); + + // Prevents AbortError + yield new Promise(done => { + request.onsuccess = done; + }); + + let transaction = db.transaction(["obj1", "obj2"], "readwrite"); + let store1 = transaction.objectStore("obj1"); + let store2 = transaction.objectStore("obj2"); + store1.add({id: 1, name: "foo", email: "foo@bar.com"}); + store1.add({id: 2, name: "foo2", email: "foo2@bar.com"}); + store1.add({id: 3, name: "foo2", email: "foo3@bar.com"}); + store2.add({ + id2: 1, + name: "foo", + email: "foo@bar.com", + extra: "baz" + }); + // Prevents AbortError during close() + yield new Promise(success => { + transaction.oncomplete = success; + }); + + db.close(); + + request = indexedDB.open("idb2", 1); + let db2 = yield new Promise(done => { + request.onupgradeneeded = event => { + let db2 = event.target.result; + let store3 = db2.createObjectStore("obj3", { keyPath: "id3" }); + store3.createIndex("name2", "name2", { unique: true }); + store3.transaction.oncomplete = () => { + done(db2); + } + }; + }); + // Prevents AbortError during close() + yield new Promise(done => { + request.onsuccess = done; + }); + db2.close(); + + dump("added indexedDB from main page\n"); +}; + +function deleteDB(dbName) { + return new Promise(resolve => { + dump("removing database " + dbName + " from " + document.location + "\n"); + indexedDB.deleteDatabase(dbName).onsuccess = resolve; + }); +} + +function fetchPut(cache, url) { + let response = yield fetch(url); + yield cache.put(url, response); +} + +let cacheGenerator = function*() { + let cache = yield caches.open("plop"); + yield fetchPut(cache, "404_cached_file.js"); + yield fetchPut(cache, "browser_storage_basic.js"); +}; + +window.setup = function*() { + yield idbGenerator(); + yield cacheGenerator(); +}; + +window.clear = function*() { + yield deleteDB("idb1"); + yield deleteDB("idb2"); + + yield caches.delete("plop"); + + dump("removed indexedDB and cache data from " + document.location + "\n"); +}; +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-localstorage.html b/devtools/client/storage/test/storage-localstorage.html new file mode 100644 index 000000000..3a560b096 --- /dev/null +++ b/devtools/client/storage/test/storage-localstorage.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <!-- + Bug 1231155 - Storage inspector front end - tests + --> + <head> + <meta charset="utf-8" /> + <title>Storage inspector localStorage test</title> + <script type="application/javascript;version=1.7"> + "use strict"; + + function setup() { + localStorage.setItem("TestLS1", "ValueLS1"); + localStorage.setItem("TestLS2", "ValueLS2"); + localStorage.setItem("TestLS3", "ValueLS3"); + localStorage.setItem("TestLS4", "ValueLS4"); + localStorage.setItem("TestLS5", "ValueLS5"); + } + </script> + </head> + <body onload="setup()"> + </body> +</html> diff --git a/devtools/client/storage/test/storage-overflow.html b/devtools/client/storage/test/storage-overflow.html new file mode 100644 index 000000000..ee8db36e6 --- /dev/null +++ b/devtools/client/storage/test/storage-overflow.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<!-- +Bug 1171903 - Storage Inspector endless scrolling +--> +<head> + <meta charset="utf-8"> + <title>Storage inspector endless scrolling test</title> +</head> +<body> +<script type="text/javascript;version=1.8"> +"use strict"; + +for (let i = 0; i < 160; i++) { + localStorage.setItem(`item-${i}`, `value-${i}`); +} +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-search.html b/devtools/client/storage/test/storage-search.html new file mode 100644 index 000000000..1a84ff622 --- /dev/null +++ b/devtools/client/storage/test/storage-search.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<!-- +Bug 1224115 - Storage Inspector table filtering +--> +<head> + <meta charset="utf-8"> + <title>Storage inspector table filtering test</title> +</head> +<body> +<script type="text/javascript;version=1.8"> +"use strict"; + +localStorage.setItem("01234", "56789"); +localStorage.setItem("ANIMAL", "hOrSe"); +localStorage.setItem("FOO", "bArBaz"); +localStorage.setItem("food", "energy bar"); +localStorage.setItem("money", "##$$$**"); +localStorage.setItem("sport", "football"); +localStorage.setItem("year", "2016"); +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-secured-iframe.html b/devtools/client/storage/test/storage-secured-iframe.html new file mode 100644 index 000000000..8424fd4cd --- /dev/null +++ b/devtools/client/storage/test/storage-secured-iframe.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML> +<html> +<!-- +Iframe for testing multiple host detetion in storage actor +--> +<head> + <meta charset="utf-8"> +</head> +<body> +<script type="application/javascript;version=1.7"> +"use strict"; +document.cookie = "sc1=foobar;"; +localStorage.setItem("iframe-s-ls1", "foobar"); +sessionStorage.setItem("iframe-s-ss1", "foobar-2"); +dump("added cookies and storage from secured iframe\n"); + +let idbGenerator = function*() { + let request = indexedDB.open("idb-s1", 1); + request.onerror = function() { + throw new Error("error opening db connection"); + }; + let db = yield new Promise(done => { + request.onupgradeneeded = event => { + let db = event.target.result; + let store1 = db.createObjectStore("obj-s1", { keyPath: "id" }); + store1.transaction.oncomplete = () => { + done(db); + }; + }; + }); + yield new Promise(done => { + request.onsuccess = done; + }); + + let transaction = db.transaction(["obj-s1"], "readwrite"); + let store1 = transaction.objectStore("obj-s1"); + store1.add({id: 6, name: "foo", email: "foo@bar.com"}); + store1.add({id: 7, name: "foo2", email: "foo2@bar.com"}); + yield new Promise(success => { + transaction.oncomplete = success; + }); + + db.close(); + + request = indexedDB.open("idb-s2", 1); + let db2 = yield new Promise(done => { + request.onupgradeneeded = event => { + let db2 = event.target.result; + let store3 = + db2.createObjectStore("obj-s2", { keyPath: "id3", autoIncrement: true }); + store3.createIndex("name2", "name2", { unique: true }); + store3.transaction.oncomplete = () => { + done(db2); + }; + }; + }); + yield new Promise(done => { + request.onsuccess = done; + }); + + transaction = db2.transaction(["obj-s2"], "readwrite"); + let store3 = transaction.objectStore("obj-s2"); + store3.add({id3: 16, name2: "foo", email: "foo@bar.com"}); + yield new Promise(success => { + transaction.oncomplete = success; + }); + + db2.close(); + dump("added indexedDB from secured iframe\n"); +}; + +function deleteDB(dbName) { + return new Promise(resolve => { + dump("removing database " + dbName + " from " + document.location + "\n"); + indexedDB.deleteDatabase(dbName).onsuccess = resolve; + }); +} + +window.setup = function*() { + yield idbGenerator(); +}; + +window.clear = function*() { + yield deleteDB("idb-s1"); + yield deleteDB("idb-s2"); + + dump("removed indexedDB data from " + document.location + "\n"); +}; +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-sessionstorage.html b/devtools/client/storage/test/storage-sessionstorage.html new file mode 100644 index 000000000..12de07e13 --- /dev/null +++ b/devtools/client/storage/test/storage-sessionstorage.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <!-- + Bug 1231179 - Storage inspector front end - tests + --> + <head> + <meta charset="utf-8" /> + <title>Storage inspector sessionStorage test</title> + <script type="application/javascript;version=1.7"> + "use strict"; + + function setup() { + sessionStorage.setItem("TestSS1", "ValueSS1"); + sessionStorage.setItem("TestSS2", "ValueSS2"); + sessionStorage.setItem("TestSS3", "ValueSS3"); + sessionStorage.setItem("TestSS4", "ValueSS4"); + sessionStorage.setItem("TestSS5", "ValueSS5"); + } + </script> + </head> + <body onload="setup()"> + </body> +</html> diff --git a/devtools/client/storage/test/storage-unsecured-iframe.html b/devtools/client/storage/test/storage-unsecured-iframe.html new file mode 100644 index 000000000..a69ffdfd1 --- /dev/null +++ b/devtools/client/storage/test/storage-unsecured-iframe.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<!-- +Iframe for testing multiple host detetion in storage actor +--> +<head> + <meta charset="utf-8"> +</head> +<body> +<script> +"use strict"; +document.cookie = "uc1=foobar; domain=.example.org; path=/"; +localStorage.setItem("iframe-u-ls1", "foobar"); +sessionStorage.setItem("iframe-u-ss1", "foobar1"); +sessionStorage.setItem("iframe-u-ss2", "foobar2"); +dump("added cookies and storage from unsecured iframe\n"); +</script> +</body> +</html> diff --git a/devtools/client/storage/test/storage-updates.html b/devtools/client/storage/test/storage-updates.html new file mode 100644 index 000000000..a009814b2 --- /dev/null +++ b/devtools/client/storage/test/storage-updates.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<html> +<!-- +Bug 965872 - Storage inspector actor with cookies, local storage and session storage. +--> +<head> + <meta charset="utf-8"> + <title>Storage inspector blank html for tests</title> +</head> +<body> +<script type="application/javascript;version=1.7"> +"use strict"; +window.addCookie = function(name, value, path, domain, expires, secure) { + let cookieString = name + "=" + value + ";"; + if (path) { + cookieString += "path=" + path + ";"; + } + if (domain) { + cookieString += "domain=" + domain + ";"; + } + if (expires) { + cookieString += "expires=" + expires + ";"; + } + if (secure) { + cookieString += "secure=true;"; + } + document.cookie = cookieString; +}; + +window.removeCookie = function(name, path) { + document.cookie = + name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=" + path; +}; + +/** + * We keep this method here even though these items are automatically cleared + * after the test is complete. this is so that the store-objects-cleared event + * can be tested. + */ +window.clear = function*() { + sessionStorage.clear(); + + dump("removed sessionStorage from " + document.location + "\n"); +}; + +window.onload = function() { + addCookie("c1", "1.2.3.4.5.6.7", "/browser"); + addCookie("c2", "foobar", "/browser"); + + localStorage.setItem("ls1", "testing"); + localStorage.setItem("ls2", "testing"); + localStorage.setItem("ls3", "testing"); + localStorage.setItem("ls4", "testing"); + localStorage.setItem("ls5", "testing"); + localStorage.setItem("ls6", "testing"); + localStorage.setItem("ls7", "testing"); + + sessionStorage.setItem("ss1", "foobar"); + sessionStorage.setItem("ss2", "foobar"); + sessionStorage.setItem("ss3", "foobar"); +}; +</script> +</body> +</html> 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 ])); + }, +}; |