Bug 970517 - Storage Inspector front end, r=jwalker, mratcliffe
authorGirish Sharma <scrapmachines@gmail.com>
Fri, 29 Aug 2014 22:02:49 +0530
changeset 224231 048321be093ec43e14591970f19be409f28103cb
parent 224230 8d48127a01e35c4ca53768bd7c89c3110dbcf8a2
child 224232 12c0a04e2a7f52eb87edb13e748c8f547b48b362
push id3979
push userraliiev@mozilla.com
push dateMon, 13 Oct 2014 16:35:44 +0000
treeherdermozilla-beta@30f2cc610691 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwalker, mratcliffe
bugs970517
milestone34.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 970517 - Storage Inspector front end, r=jwalker, mratcliffe
browser/app/profile/firefox.js
browser/devtools/jar.mn
browser/devtools/main.js
browser/devtools/moz.build
browser/devtools/shared/widgets/TableWidget.js
browser/devtools/shared/widgets/TreeWidget.js
browser/devtools/storage/moz.build
browser/devtools/storage/panel.js
browser/devtools/storage/storage.xul
browser/devtools/storage/ui.js
browser/locales/en-US/chrome/browser/devtools/storage.properties
browser/locales/jar.mn
browser/themes/linux/jar.mn
browser/themes/osx/jar.mn
browser/themes/shared/devtools/images/filetypes/store.svg
browser/themes/shared/devtools/images/tool-storage.svg
browser/themes/shared/devtools/storage.css
browser/themes/shared/devtools/widgets.inc.css
browser/themes/windows/jar.mn
toolkit/devtools/server/actors/storage.js
toolkit/devtools/server/tests/browser/browser_storage_dynamic_windows.js
toolkit/devtools/server/tests/browser/browser_storage_listings.js
toolkit/devtools/server/tests/browser/storage-dynamic-windows.html
toolkit/devtools/server/tests/browser/storage-listings.html
toolkit/devtools/server/tests/browser/storage-secured-iframe.html
toolkit/devtools/server/tests/browser/storage-unsecured-iframe.html
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1390,16 +1390,19 @@ pref("devtools.tilt.outro_transition", t
 // - showTrailingSpace: Whether to highlight trailing space or not.
 // - enableCodeFolding: Whether to enable code folding or not.
 // - enableAutocompletion: Whether to enable JavaScript autocompletion.
 pref("devtools.scratchpad.recentFilesMax", 10);
 pref("devtools.scratchpad.showTrailingSpace", false);
 pref("devtools.scratchpad.enableCodeFolding", true);
 pref("devtools.scratchpad.enableAutocompletion", true);
 
+// Enable the Storage Inspector
+pref("devtools.storage.enabled", false);
+
 // Enable the Style Editor.
 pref("devtools.styleeditor.enabled", true);
 pref("devtools.styleeditor.source-maps-enabled", false);
 pref("devtools.styleeditor.autocompletion-enabled", true);
 pref("devtools.styleeditor.showMediaSidebar", true);
 pref("devtools.styleeditor.mediaSidebarWidth", 238);
 pref("devtools.styleeditor.navSidebarWidth", 245);
 pref("devtools.styleeditor.transitions", true);
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -21,16 +21,17 @@ browser.jar:
 *   content/browser/devtools/scratchpad.xul                            (scratchpad/scratchpad.xul)
     content/browser/devtools/scratchpad.js                             (scratchpad/scratchpad.js)
     content/browser/devtools/scratchpad-commands.js                    (scratchpad/scratchpad-commands.js)
     content/browser/devtools/splitview.css                             (shared/splitview.css)
     content/browser/devtools/theme-switching.js                        (shared/theme-switching.js)
     content/browser/devtools/frame-script-utils.js                     (shared/frame-script-utils.js)
     content/browser/devtools/styleeditor.xul                           (styleeditor/styleeditor.xul)
     content/browser/devtools/styleeditor.css                           (styleeditor/styleeditor.css)
+    content/browser/devtools/storage.xul                               (storage/storage.xul)
     content/browser/devtools/computedview.xhtml                        (styleinspector/computedview.xhtml)
     content/browser/devtools/cssruleview.xhtml                         (styleinspector/cssruleview.xhtml)
     content/browser/devtools/ruleview.css                              (styleinspector/ruleview.css)
     content/browser/devtools/layoutview/view.js                        (layoutview/view.js)
     content/browser/devtools/layoutview/view.xhtml                     (layoutview/view.xhtml)
     content/browser/devtools/layoutview/view.css                       (layoutview/view.css)
     content/browser/devtools/fontinspector/font-inspector.js           (fontinspector/font-inspector.js)
     content/browser/devtools/fontinspector/font-inspector.xhtml        (fontinspector/font-inspector.xhtml)
--- a/browser/devtools/main.js
+++ b/browser/devtools/main.js
@@ -30,41 +30,44 @@ loader.lazyGetter(this, "WebConsolePanel
 loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/debugger/panel").DebuggerPanel);
 loader.lazyGetter(this, "StyleEditorPanel", () => require("devtools/styleeditor/styleeditor-panel").StyleEditorPanel);
 loader.lazyGetter(this, "ShaderEditorPanel", () => require("devtools/shadereditor/panel").ShaderEditorPanel);
 loader.lazyGetter(this, "CanvasDebuggerPanel", () => require("devtools/canvasdebugger/panel").CanvasDebuggerPanel);
 loader.lazyGetter(this, "WebAudioEditorPanel", () => require("devtools/webaudioeditor/panel").WebAudioEditorPanel);
 loader.lazyGetter(this, "ProfilerPanel", () => require("devtools/profiler/panel").ProfilerPanel);
 loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/netmonitor/panel").NetMonitorPanel);
 loader.lazyGetter(this, "ScratchpadPanel", () => require("devtools/scratchpad/scratchpad-panel").ScratchpadPanel);
+loader.lazyGetter(this, "StoragePanel", () => require("devtools/storage/panel").StoragePanel);
 
 // Strings
 const toolboxProps = "chrome://browser/locale/devtools/toolbox.properties";
 const inspectorProps = "chrome://browser/locale/devtools/inspector.properties";
 const debuggerProps = "chrome://browser/locale/devtools/debugger.properties";
 const styleEditorProps = "chrome://browser/locale/devtools/styleeditor.properties";
 const shaderEditorProps = "chrome://browser/locale/devtools/shadereditor.properties";
 const canvasDebuggerProps = "chrome://browser/locale/devtools/canvasdebugger.properties";
 const webAudioEditorProps = "chrome://browser/locale/devtools/webaudioeditor.properties";
-
 const webConsoleProps = "chrome://browser/locale/devtools/webconsole.properties";
 const profilerProps = "chrome://browser/locale/devtools/profiler.properties";
 const netMonitorProps = "chrome://browser/locale/devtools/netmonitor.properties";
 const scratchpadProps = "chrome://browser/locale/devtools/scratchpad.properties";
+const storageProps = "chrome://browser/locale/devtools/storage.properties";
+
 loader.lazyGetter(this, "toolboxStrings", () => Services.strings.createBundle(toolboxProps));
 loader.lazyGetter(this, "webConsoleStrings", () => Services.strings.createBundle(webConsoleProps));
 loader.lazyGetter(this, "debuggerStrings", () => Services.strings.createBundle(debuggerProps));
 loader.lazyGetter(this, "styleEditorStrings", () => Services.strings.createBundle(styleEditorProps));
 loader.lazyGetter(this, "shaderEditorStrings", () => Services.strings.createBundle(shaderEditorProps));
 loader.lazyGetter(this, "canvasDebuggerStrings", () => Services.strings.createBundle(canvasDebuggerProps));
 loader.lazyGetter(this, "webAudioEditorStrings", () => Services.strings.createBundle(webAudioEditorProps));
 loader.lazyGetter(this, "inspectorStrings", () => Services.strings.createBundle(inspectorProps));
 loader.lazyGetter(this, "profilerStrings",() => Services.strings.createBundle(profilerProps));
 loader.lazyGetter(this, "netMonitorStrings", () => Services.strings.createBundle(netMonitorProps));
 loader.lazyGetter(this, "scratchpadStrings", () => Services.strings.createBundle(scratchpadProps));
+loader.lazyGetter(this, "storageStrings", () => Services.strings.createBundle(storageProps));
 
 let Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
@@ -313,19 +316,44 @@ Tools.netMonitor = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new NetMonitorPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
+Tools.storage = {
+  id: "storage",
+  key: l10n("open.commandkey", storageStrings),
+  ordinal: 9,
+  accesskey: l10n("open.accesskey", storageStrings),
+  modifiers: "shift",
+  visibilityswitch: "devtools.storage.enabled",
+  icon: "chrome://browser/skin/devtools/tool-storage.svg",
+  invertIconForLightTheme: true,
+  url: "chrome://browser/content/devtools/storage.xul",
+  label: l10n("storage.label", storageStrings),
+  tooltip: l10n("storage.tooltip", storageStrings),
+  inMenu: true,
+
+  isTargetSupported: function(target) {
+    return target.isLocalTab ||
+           (target.client.traits.storageInspector && !target.isAddon);
+  },
+
+  build: function(iframeWindow, toolbox) {
+    let panel = new StoragePanel(iframeWindow, toolbox);
+    return panel.open();
+  }
+};
+
 Tools.scratchpad = {
   id: "scratchpad",
-  ordinal: 9,
+  ordinal: 10,
   visibilityswitch: "devtools.scratchpad.enabled",
   icon: "chrome://browser/skin/devtools/tool-scratchpad.svg",
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/scratchpad.xul",
   label: l10n("scratchpad.label", scratchpadStrings),
   panelLabel: l10n("scratchpad.panelLabel", scratchpadStrings),
   tooltip: l10n("scratchpad.tooltip", scratchpadStrings),
   inMenu: false,
@@ -347,16 +375,17 @@ let defaultTools = [
   Tools.inspector,
   Tools.jsdebugger,
   Tools.styleEditor,
   Tools.shaderEditor,
   Tools.canvasDebugger,
   Tools.webAudioEditor,
   Tools.jsprofiler,
   Tools.netMonitor,
+  Tools.storage,
   Tools.scratchpad
 ];
 
 exports.defaultTools = defaultTools;
 
 for (let definition of defaultTools) {
   gDevTools.registerTool(definition);
 }
--- a/browser/devtools/moz.build
+++ b/browser/devtools/moz.build
@@ -18,16 +18,17 @@ DIRS += [
     'markupview',
     'netmonitor',
     'profiler',
     'responsivedesign',
     'scratchpad',
     'shadereditor',
     'shared',
     'sourceeditor',
+    'storage',
     'styleeditor',
     'styleinspector',
     'tilt',
     'webaudioeditor',
     'webconsole',
     'webide',
 ]
 
--- a/browser/devtools/shared/widgets/TableWidget.js
+++ b/browser/devtools/shared/widgets/TableWidget.js
@@ -33,34 +33,34 @@ const MAX_VISIBLE_STRING_SIZE = 100;
  *        The container element for the table widget.
  * @param {object} options
  *        - initialColumns: map of key vs display name for initial columns of
  *                          the table. See @setupColumns for more info.
  *        - uniqueId: the column which will be the unique identifier of each
  *                    entry in the table. Default: name.
  *        - emptyText: text to display when no entries in the table to display.
  *        - highlightUpdated: true to highlight the changed/added row.
- *        - removableColumns: Whether columns are removeable. If set to true,
+ *        - removableColumns: Whether columns are removeable. If set to false,
  *                            the context menu in the headers will not appear.
  *        - firstColumn: key of the first column that should appear.
  */
 function TableWidget(node, options={}) {
   EventEmitter.decorate(this);
 
   this.document = node.ownerDocument;
   this.window = this.document.defaultView;
   this._parent = node;
 
   let {initialColumns, emptyText, uniqueId, highlightUpdated, removableColumns,
        firstColumn} = options;
   this.emptyText = emptyText || "";
   this.uniqueId = uniqueId || "name";
   this.firstColumn = firstColumn || "";
   this.highlightUpdated = highlightUpdated || false;
-  this.removableColumns = removableColumns || false;
+  this.removableColumns = removableColumns !== false;
 
   this.tbody = this.document.createElementNS(XUL_NS, "hbox");
   this.tbody.className = "table-widget-body theme-body";
   this.tbody.setAttribute("flex", "1");
   this.tbody.setAttribute("tabindex", "0");
   this._parent.appendChild(this.tbody);
 
   this.placeholder = this.document.createElementNS(XUL_NS, "label");
@@ -271,17 +271,17 @@ TableWidget.prototype = {
    * Returns true if the passed string or the row json object corresponds to the
    * selected item in the table.
    */
   isSelected: function(item) {
     if (typeof item == "object") {
       item = item[this.uniqueId];
     }
 
-    return item == this.selectedRow[this.uniqueId];
+    return this.selectedRow && item == this.selectedRow[this.uniqueId];
   },
 
   /**
    * Selects the row corresponding to the `id` json.
    */
   selectRow: function(id) {
     this.selectedRow = id;
   },
@@ -682,25 +682,32 @@ Column.prototype = {
     }
     this.items[item[this.uniqueId]] = index;
     this.cells.splice(index, 0, new Cell(this, item, this.cells[index]));
   },
 
   /**
    * Event handler for the command event coming from the header context menu.
    * Toggles the column if it was requested by the user.
+   * When called explicitly without parameters, it toggles the corresponding
+   * column.
    *
    * @param {string} event
    *        The name of the event. i.e. EVENTS.HEADER_CONTEXT_MENU
    * @param {string} id
    *        Id of the column to be toggled
    * @param {string} checked
    *        true if the column is visible
    */
   toggleColumn: function(event, id, checked) {
+    if (arguments.length == 0) {
+      // Act like a toggling method when called with no params
+      id = this.id;
+      checked = this.wrapper.hasAttribute("hidden");
+    }
     if (id != this.id) {
       return;
     }
     if (checked) {
       this.wrapper.removeAttribute("hidden");
     } else {
       this.wrapper.setAttribute("hidden", "true");
     }
@@ -955,16 +962,18 @@ Cell.prototype = {
   },
 
   /**
    * Flashes the cell for a brief time. This when done for ith cells in all
    * columns, makes it look like the row is being highlighted/flashed.
    */
   flash: function() {
     this.label.classList.remove("flash-out");
+    // Cause a reflow so that the animation retriggers on adding back the class
+    let a = this.label.parentNode.offsetWidth;
     this.label.classList.add("flash-out");
   },
 
   focus: function() {
     this.label.focus();
   },
 
   destroy: function() {
--- a/browser/devtools/shared/widgets/TreeWidget.js
+++ b/browser/devtools/shared/widgets/TreeWidget.js
@@ -60,17 +60,17 @@ TreeWidget.prototype = {
     if (this._selectedLabel) {
       this._selectedLabel.classList.remove("theme-selected");
     }
     let currentSelected = this._selectedLabel;
     if (id == -1) {
       this._selectedLabel = this._selectedItem = null;
       return;
     }
-    if (!typeof id == "array") {
+    if (!Array.isArray(id)) {
       return;
     }
     this._selectedLabel = this.root.setSelectedItem(id);
     if (!this._selectedLabel) {
       this._selectedItem = null;
     } else {
       if (currentSelected != this._selectedLabel) {
         this.ensureSelectedVisible();
new file mode 100644
--- /dev/null
+++ b/browser/devtools/storage/moz.build
@@ -0,0 +1,10 @@
+# -*- Mode: python; c-basic-offset: 4; 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/.
+
+EXTRA_JS_MODULES.devtools.storage += [
+    'panel.js',
+    'ui.js'
+]
new file mode 100644
--- /dev/null
+++ b/browser/devtools/storage/panel.js
@@ -0,0 +1,83 @@
+/* -*- 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/. */
+
+const {Cc, Ci, Cu, Cr} = require("chrome");
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/Promise.jsm");
+
+let EventEmitter = require("devtools/toolkit/event-emitter");
+
+loader.lazyGetter(this, "StorageFront",
+  () => require("devtools/server/actors/storage").StorageFront);
+
+loader.lazyGetter(this, "StorageUI",
+  () => require("devtools/storage/ui").StorageUI);
+
+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() this._toolbox.target,
+
+  get panelWindow() 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.isReady = true;
+      this.emit("ready");
+      return this;
+    }, console.error);
+  },
+
+  /**
+   * Destroy the style editor.
+   */
+  destroy: function() {
+    if (!this._destroyed) {
+      this.UI.destroy();
+      this._destroyed = true;
+
+      this._target.off("close", this.destroy);
+      this._target = null;
+      this._toolbox = null;
+      this._panelDoc = null;
+    }
+
+    return Promise.resolve(null);
+  },
+}
+
+XPCOMUtils.defineLazyGetter(StoragePanel.prototype, "strings",
+  function () {
+    return Services.strings.createBundle(
+            "chrome://browser/locale/devtools/storage.properties");
+  });
new file mode 100644
--- /dev/null
+++ b/browser/devtools/storage/storage.xul
@@ -0,0 +1,31 @@
+<?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://browser/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/storage.css" type="text/css"?>
+
+<?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://browser/content/devtools/theme-switching.js"/>
+  <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
+
+  <commandset id="editMenuCommands"/>
+
+  <box flex="1" class="devtools-responsive-container theme-body">
+    <vbox id="storage-tree"/>
+    <splitter class="devtools-side-splitter"/>
+    <vbox id="storage-table" class="theme-sidebar" flex="1"/>
+    <splitter class="devtools-side-splitter"/>
+    <vbox id="storage-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <vbox flex="1"/>
+    </vbox>
+  </box>
+
+</window>
new file mode 100644
--- /dev/null
+++ b/browser/devtools/storage/ui.js
@@ -0,0 +1,565 @@
+/* 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 {Cu} = require("chrome");
+const STORAGE_STRINGS = "chrome://browser/locale/devtools/storage.properties";
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+XPCOMUtils.defineLazyGetter(this, "TreeWidget",
+  () => require("devtools/shared/widgets/TreeWidget").TreeWidget);
+XPCOMUtils.defineLazyGetter(this, "TableWidget",
+  () => require("devtools/shared/widgets/TableWidget").TableWidget);
+XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
+  "resource://gre/modules/devtools/event-emitter.js");
+XPCOMUtils.defineLazyModuleGetter(this, "ViewHelpers",
+  "resource:///modules/devtools/ViewHelpers.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "VariablesView",
+  "resource:///modules/devtools/VariablesView.jsm");
+
+/**
+ * Localization convenience methods.
+ */
+let L10N = new ViewHelpers.L10N(STORAGE_STRINGS);
+
+const GENERIC_VARIABLES_VIEW_SETTINGS = {
+  lazyEmpty: true,
+  lazyEmptyDelay: 10, // ms
+  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"
+];
+
+/**
+ * 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.
+ */
+this.StorageUI = function StorageUI(front, target, panelWin) {
+  EventEmitter.decorate(this);
+
+  this._target = target;
+  this._window = panelWin;
+  this._panelDoc = panelWin.document;
+  this.front = front;
+
+  let treeNode = this._panelDoc.getElementById("storage-tree");
+  this.tree = new TreeWidget(treeNode, {defaultType: "dir"});
+  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,
+  });
+  this.displayObjectSidebar = this.displayObjectSidebar.bind(this);
+  this.table.on(TableWidget.EVENTS.ROW_SELECTED, this.displayObjectSidebar)
+
+  this.sidebar = this._panelDoc.getElementById("storage-sidebar");
+  this.sidebar.setAttribute("width", "300");
+  this.view = new VariablesView(this.sidebar.firstChild,
+                                GENERIC_VARIABLES_VIEW_SETTINGS);
+
+  this.front.listStores().then(storageTypes => {
+    this.populateStorageTree(storageTypes);
+  });
+  this.onUpdate = this.onUpdate.bind(this);
+  this.front.on("stores-update", this.onUpdate);
+
+  this.handleKeypress = this.handleKeypress.bind(this);
+  this._panelDoc.addEventListener("keypress", this.handleKeypress);
+}
+
+exports.StorageUI = StorageUI;
+
+StorageUI.prototype = {
+
+  storageTypes: null,
+  shouldResetColumns: true,
+
+  destroy: function() {
+    this.front.off("stores-update", this.onUpdate);
+    this._panelDoc.removeEventListener("keypress", this.handleKeypress)
+  },
+
+  /**
+   * Empties and hides the object viewer sidebar
+   */
+  hideSidebar: function() {
+    this.view.empty();
+    this.sidebar.hidden = true;
+    this.table.clearSelection();
+  },
+
+  /**
+   * 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-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) {
+      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 if (this.tree.isSelected([type, host])) {
+            for (let name of deleted[type][host]) {
+              try {
+                // trying to parse names in case its for indexedDB
+                let names = JSON.parse(name);
+                if (!names[2]) {
+                  if (this.tree.isSelected([type, host, names[0], names[1]])) {
+                    this.tree.selectPreviousItem();
+                    this.tree.remove([type, host, names[0], names[1]]);
+                    this.table.clear();
+                    this.hideSidebar();
+                  }
+                }
+                else if (this.tree.isSelected([type, host, names[0], names[1]])) {
+                  this.removeItemFromTable(names[2]);
+                }
+              }
+              catch (ex) {
+                this.removeItemFromTable(name);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    if (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)], 1);
+              }
+            } catch(ex) {}
+          }
+
+          if (this.tree.isSelected([type, host])) {
+            this.fetchStorageObjects(type, host, added[type][host], 1);
+          }
+        }
+      }
+    }
+
+    if (changed) {
+      let [type, host, db, objectStore] = this.tree.selectedItem;
+      if (changed[type] && changed[type][host]) {
+        if (changed[type][host].length) {
+          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, 2);
+          }
+          catch (ex) {
+            this.fetchStorageObjects(type, host, changed[type][host], 2);
+          }
+        }
+      }
+    }
+
+    if (added || deleted || changed) {
+      this.emit("store-objects-updated");
+    }
+  },
+
+  /**
+   * 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 {number} reason
+   *        2 for update, 1 for new row in an existing table and 0 when
+   *        populating a table for the first time for the given host/type
+   */
+  fetchStorageObjects: function(type, host, names, reason) {
+    this.storageTypes[type].getStoreObjects(host, names).then(({data}) => {
+      if (!data.length) {
+        this.emit("store-objects-updated");
+        return;
+      }
+      if (this.shouldResetColumns) {
+        this.resetColumns(data[0], type);
+      }
+      this.populateTable(data, reason);
+      this.emit("store-objects-updated");
+    });
+  },
+
+  /**
+   * 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) {
+      let typeLabel = L10N.getStr("tree.labels." + type);
+      this.tree.add([{id: type, label: typeLabel, type: "store"}]);
+      if (storageTypes[type].hosts) {
+        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]];
+                this.fetchStorageObjects(type, host, [name], 0);
+              }
+            } catch(ex) {}
+          }
+          if (!this.tree.selectedItem) {
+            this.tree.selectedItem = [type, host];
+            this.fetchStorageObjects(type, host, null, 0);
+          }
+        }
+      }
+    }
+  },
+
+  /**
+   * Populates the selected entry from teh table in the sidebar for a more
+   * detailed view.
+   */
+  displayObjectSidebar: function() {
+    let item = this.table.selectedRow;
+    if (!item) {
+      // Make sure that sidebar is hidden and return
+      this.sidebar.hidden = true;
+      return;
+    }
+    this.sidebar.hidden = false;
+    this.view.empty();
+    let mainScope = this.view.addScope(L10N.getStr("storage.data.label"));
+    mainScope.expanded = true;
+
+    if (item.name && item.valueActor) {
+      let itemVar = mainScope.addItem(item.name + "", {}, true);
+
+      item.valueActor.string().then(value => {
+        // 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) {
+          this.emit("sidebar-updated");
+          return;
+        }
+
+        // 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 => e != "name" && e != "value" && e != "valueActor");
+        for (let prop of otherProps) {
+          rawObject[prop] = item[prop];
+        }
+        itemVar.populate(rawObject, {sorted: true});
+        itemVar.twisty = true;
+        itemVar.expanded = true;
+        this.emit("sidebar-updated");
+      });
+      return;
+    }
+
+    // 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, value) {
+    let json = null
+    try {
+      json = JSON.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);
+    jsonObject[name] = json;
+    let valueScope = this.view.getScopeAtIndex(1) ||
+                     this.view.addScope(L10N.getStr("storage.parsedValue.label"));
+    valueScope.expanded = true;
+    let jsonVar = valueScope.addItem("", Object.create(null), 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 regex = new RegExp("^([^" + kv + p + "]*" + kv + "+[^" + kv + p +
+                               "]*" + p + "*)+$", "g");
+        if (value.match(regex) && value.contains(kv) &&
+            (value.contains(p) || value.split(kv).length == 2)) {
+          return makeObject(kv, p);
+        }
+      }
+    }
+    // Testing for array
+    for (let i = 0; i < separators.length; i++) {
+      let p = separators[i];
+      let regex = new RegExp("^[^" + p + "]+(" + p + "+[^" + p + "]*)+$", "g");
+      if (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();
+
+    let [type, host] = item;
+    let names = null;
+    if (!host) {
+      return;
+    }
+    if (item.length > 2) {
+      names = [JSON.stringify(item.slice(2))];
+    }
+    this.shouldResetColumns = true;
+    this.fetchStorageObjects(type, host, names, 0);
+  },
+
+  /**
+   * Resets the column headers in the storage table with the pased object `data`
+   *
+   * @param {object} data
+   *        The object from which key and values will be used for naming the
+   *        headers of the columns
+   * @param {string} type
+   *        The type of storage corresponding to the after-reset columns in the
+   *        table.
+   */
+  resetColumns: function(data, type) {
+    let columns = {};
+    let uniqueKey = null;
+    for (let key in data) {
+      if (!uniqueKey) {
+        this.table.uniqueId = uniqueKey = key;
+      }
+      columns[key] = L10N.getStr("table.headers." + type + "." + key);
+    }
+    this.table.setColumns(columns, null, HIDDEN_COLUMNS);
+    this.shouldResetColumns = false;
+    this.hideSidebar();
+  },
+
+  /**
+   * Populates or updates the rows in the storage table.
+   *
+   * @param {array[object]} data
+   *        Array of objects to be populated in the storage table
+   * @param {number} reason
+   *        The reason of this populateTable call. 2 for update, 1 for new row
+   *        in an existing table and 1 when populating a table for the first
+   *        time for the given host/type
+   */
+  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).toLocaleString()
+          : L10N.getStr("label.expires.session");
+      }
+      if (item.creationTime != null) {
+        item.creationTime = new Date(item.creationTime).toLocaleString();
+      }
+      if (item.lastAccessed != null) {
+        item.lastAccessed = new Date(item.lastAccessed).toLocaleString();
+      }
+      if (reason < 2) {
+        this.table.push(item, reason == 0);
+      }
+      else {
+        this.table.update(item);
+        if (item == this.table.selectedRow && !this.sidebar.hidden) {
+          this.displayObjectSidebar();
+        }
+      }
+    }
+  },
+
+  /**
+   * 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 == event.DOM_VK_ESCAPE && !this.sidebar.hidden) {
+      // Stop Propagation to prevent opening up of split console
+      this.hideSidebar();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/storage.properties
@@ -0,0 +1,100 @@
+# 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/.
+
+# LOCALIZATION NOTE These strings are used inside the Storage Editor tool.
+# LOCALIZATION NOTE The correct localization of this file might be to keep it
+# in English, or another language commonly spoken among web developers.
+# You want to make that choice consistent across the developer tools.
+# A good criteria is the language in which you'd find the best documentation
+# on web development on the web.
+
+# LOCALIZATION NOTE  (chromeWindowTitle): This is the title of the Storage
+# 'chrome' window. That is, the main window with all the cookies, etc.
+# The argument is either the content document's title or its href if no title
+# is available.
+chromeWindowTitle=Storage [%S]
+
+# LOCALIZATION NOTE  (open.commandkey): This the key to use in
+# conjunction with shift to open the storage editor
+open.commandkey=VK_F9
+
+# LOCALIZATION NOTE (open.accesskey): The access key used to open the storage
+# editor.
+open.accesskey=d
+
+# LOCALIZATION NOTE (storage.label):
+# This string is displayed in the title of the tab when the storage editor is
+# displayed inside the developer tools window and in the Developer Tools Menu.
+storage.label=Storage
+
+# LOCALIZATION NOTE (storage.tooltip):
+# This string is displayed in the tooltip of the tab when the storage editor is
+# displayed inside the developer tools window.
+storage.tooltip=Storage Inspector (Cookies, Local Storage ...)
+
+# LOCALIZATION NOTE (tree.emptyText):
+# This string is displayed when the Storage Tree is empty. This can happen when
+# there are no websites on the current page (about:blank)
+tree.emptyText=No hosts on the page
+
+# LOCALIZATION NOTE (table.emptyText):
+# This string is displayed when there are no rows in the Storage Table for the
+# selected host.
+table.emptyText=No data present for selected host
+
+# LOCALIZATION NOTE (tree.labels.*):
+# These strings are the labels for Storage type groups present in the Storage
+# Tree, like cookies, local storage etc.
+tree.labels.cookies=Cookies
+tree.labels.localStorage=Local Storage
+tree.labels.sessionStorage=Session Storage
+tree.labels.indexedDB=Indexed DB
+
+# LOCALIZATION NOTE (table.headers.*.*):
+# These strings are the header names of the columns in the Storage Table for
+# each type of storage available through the Storage Tree to the side.
+table.headers.cookies.name=Name
+table.headers.cookies.path=Path
+table.headers.cookies.host=Domain
+table.headers.cookies.expires=Expires on
+table.headers.cookies.value=Value
+table.headers.cookies.lastAccessed:Last accessed on
+table.headers.cookies.creationTime:Created on
+table.headers.cookies.isHttpOnly:isHttpOnly
+table.headers.cookies.isSecure:isSecure
+table.headers.cookies.isDomain:isDomain
+
+table.headers.localStorage.name=Key
+table.headers.localStorage.value=Value
+
+table.headers.sessionStorage.name=Key
+table.headers.sessionStorage.value=Value
+
+table.headers.indexedDB.name=Key
+table.headers.indexedDB.db=Database Name
+table.headers.indexedDB.objectStore=Object Store Name
+table.headers.indexedDB.value=Value
+table.headers.indexedDB.origin=Origin
+table.headers.indexedDB.version=Version
+table.headers.indexedDB.objectStores=Object Stores
+table.headers.indexedDB.keyPath=Key
+table.headers.indexedDB.autoIncrement=Auto Increment
+table.headers.indexedDB.indexes=Indexes
+
+# LOCALIZATION NOTE (label.expires.session):
+# This string is displayed in the expires column when the cookie is Session
+# Cookie
+label.expires.session=Session
+
+# LOCALIZATION NOTE (storage.search.placeholder):
+# This is the placeholder text in the sidebar search box
+storage.search.placeholder=Filter values
+
+# LOCALIZATION NOTE (storage.data.label):
+# This is the heading displayed over the item value in the sidebar
+storage.data.label=Data
+
+# LOCALIZATION NOTE (storage.parsedValue.label):
+# This is the heading displayed over the item parsed value in the sidebar
+storage.parsedValue.label=Parsed Value
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -38,16 +38,17 @@
     locale/browser/devtools/webaudioeditor.properties   (%chrome/browser/devtools/webaudioeditor.properties)
     locale/browser/devtools/gcli.properties           (%chrome/browser/devtools/gcli.properties)
     locale/browser/devtools/gclicommands.properties   (%chrome/browser/devtools/gclicommands.properties)
     locale/browser/devtools/webconsole.properties     (%chrome/browser/devtools/webconsole.properties)
     locale/browser/devtools/inspector.properties      (%chrome/browser/devtools/inspector.properties)
     locale/browser/devtools/tilt.properties           (%chrome/browser/devtools/tilt.properties)
     locale/browser/devtools/scratchpad.properties     (%chrome/browser/devtools/scratchpad.properties)
     locale/browser/devtools/scratchpad.dtd            (%chrome/browser/devtools/scratchpad.dtd)
+    locale/browser/devtools/storage.properties        (%chrome/browser/devtools/storage.properties)
     locale/browser/devtools/styleeditor.properties    (%chrome/browser/devtools/styleeditor.properties)
     locale/browser/devtools/styleeditor.dtd           (%chrome/browser/devtools/styleeditor.dtd)
     locale/browser/devtools/styleinspector.dtd        (%chrome/browser/devtools/styleinspector.dtd)
     locale/browser/devtools/webConsole.dtd            (%chrome/browser/devtools/webConsole.dtd)
     locale/browser/devtools/VariablesView.dtd         (%chrome/browser/devtools/VariablesView.dtd)
     locale/browser/devtools/sourceeditor.properties   (%chrome/browser/devtools/sourceeditor.properties)
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
     locale/browser/devtools/profiler.dtd              (%chrome/browser/devtools/profiler.dtd)
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -198,16 +198,17 @@ browser.jar:
   skin/classic/browser/devtools/newtab.png             (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png          (../shared/devtools/images/newtab@2x.png)
   skin/classic/browser/devtools/newtab-inverted.png    (../shared/devtools/images/newtab-inverted.png)
   skin/classic/browser/devtools/newtab-inverted@2x.png (../shared/devtools/images/newtab-inverted@2x.png)
 * skin/classic/browser/devtools/widgets.css           (devtools/widgets.css)
   skin/classic/browser/devtools/filetype-dir-close.svg        (../shared/devtools/images/filetypes/dir-close.svg)
   skin/classic/browser/devtools/filetype-dir-open.svg         (../shared/devtools/images/filetypes/dir-open.svg)
   skin/classic/browser/devtools/filetype-globe.svg            (../shared/devtools/images/filetypes/globe.svg)
+  skin/classic/browser/devtools/filetype-store.svg            (../shared/devtools/images/filetypes/store.svg)
   skin/classic/browser/devtools/commandline-icon.png          (../shared/devtools/images/commandline-icon.png)
   skin/classic/browser/devtools/commandline-icon@2x.png       (../shared/devtools/images/commandline-icon@2x.png)
   skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
   skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
   skin/classic/browser/devtools/command-screenshot.png        (../shared/devtools/images/command-screenshot.png)
   skin/classic/browser/devtools/command-screenshot@2x.png     (../shared/devtools/images/command-screenshot@2x.png)
   skin/classic/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
   skin/classic/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
@@ -243,16 +244,17 @@ browser.jar:
 * skin/classic/browser/devtools/debugger.css          (devtools/debugger.css)
   skin/classic/browser/devtools/eyedropper.css        (../shared/devtools/eyedropper.css)
 * skin/classic/browser/devtools/netmonitor.css        (devtools/netmonitor.css)
 * skin/classic/browser/devtools/profiler.css          (devtools/profiler.css)
 * skin/classic/browser/devtools/scratchpad.css        (devtools/scratchpad.css)
 * skin/classic/browser/devtools/shadereditor.css      (devtools/shadereditor.css)
 * skin/classic/browser/devtools/splitview.css         (../shared/devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css       (../shared/devtools/styleeditor.css)
+  skin/classic/browser/devtools/storage.css           (../shared/devtools/storage.css)
 * skin/classic/browser/devtools/webaudioeditor.css    (devtools/webaudioeditor.css)
   skin/classic/browser/devtools/magnifying-glass.png        (../shared/devtools/images/magnifying-glass.png)
   skin/classic/browser/devtools/magnifying-glass@2x.png     (../shared/devtools/images/magnifying-glass@2x.png)
   skin/classic/browser/devtools/magnifying-glass-light.png  (../shared/devtools/images/magnifying-glass-light.png)
   skin/classic/browser/devtools/magnifying-glass-light@2x.png (../shared/devtools/images/magnifying-glass-light@2x.png)
   skin/classic/browser/devtools/itemToggle.png         (../shared/devtools/images/itemToggle.png)
   skin/classic/browser/devtools/itemToggle@2x.png      (../shared/devtools/images/itemToggle@2x.png)
   skin/classic/browser/devtools/itemArrow-dark-rtl.svg (../shared/devtools/images/itemArrow-dark-rtl.svg)
@@ -305,16 +307,17 @@ browser.jar:
   skin/classic/browser/devtools/profiler-stopwatch-checked.svg      (../shared/devtools/images/profiler-stopwatch-checked.svg)
   skin/classic/browser/devtools/tool-options.svg            (../shared/devtools/images/tool-options.svg)
   skin/classic/browser/devtools/tool-webconsole.svg         (../shared/devtools/images/tool-webconsole.svg)
   skin/classic/browser/devtools/tool-debugger.svg           (../shared/devtools/images/tool-debugger.svg)
   skin/classic/browser/devtools/tool-debugger-paused.svg    (../shared/devtools/images/tool-debugger-paused.svg)
   skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
   skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
   skin/classic/browser/devtools/tool-styleeditor.svg        (../shared/devtools/images/tool-styleeditor.svg)
+  skin/classic/browser/devtools/tool-storage.svg            (../shared/devtools/images/tool-storage.svg)
   skin/classic/browser/devtools/tool-profiler.svg           (../shared/devtools/images/tool-profiler.svg)
   skin/classic/browser/devtools/tool-network.svg            (../shared/devtools/images/tool-network.svg)
   skin/classic/browser/devtools/tool-scratchpad.svg         (../shared/devtools/images/tool-scratchpad.svg)
   skin/classic/browser/devtools/tool-webaudio.svg           (../shared/devtools/images/tool-webaudio.svg)
   skin/classic/browser/devtools/close.png                   (../shared/devtools/images/close.png)
   skin/classic/browser/devtools/close@2x.png                (../shared/devtools/images/close@2x.png)
   skin/classic/browser/devtools/vview-delete.png            (../shared/devtools/images/vview-delete.png)
   skin/classic/browser/devtools/vview-delete@2x.png         (../shared/devtools/images/vview-delete@2x.png)
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -321,16 +321,17 @@ browser.jar:
   skin/classic/browser/devtools/newtab.png                  (../shared/devtools/images/newtab.png)
   skin/classic/browser/devtools/newtab@2x.png               (../shared/devtools/images/newtab@2x.png)
   skin/classic/browser/devtools/newtab-inverted.png         (../shared/devtools/images/newtab-inverted.png)
   skin/classic/browser/devtools/newtab-inverted@2x.png      (../shared/devtools/images/newtab-inverted@2x.png)
 * skin/classic/browser/devtools/widgets.css                 (devtools/widgets.css)
   skin/classic/browser/devtools/filetype-dir-close.svg      (../shared/devtools/images/filetypes/dir-close.svg)
   skin/classic/browser/devtools/filetype-dir-open.svg       (../shared/devtools/images/filetypes/dir-open.svg)
   skin/classic/browser/devtools/filetype-globe.svg          (../shared/devtools/images/filetypes/globe.svg)
+  skin/classic/browser/devtools/filetype-store.svg          (../shared/devtools/images/filetypes/store.svg)
   skin/classic/browser/devtools/commandline-icon.png        (../shared/devtools/images/commandline-icon.png)
   skin/classic/browser/devtools/commandline-icon@2x.png     (../shared/devtools/images/commandline-icon@2x.png)
   skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
   skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
   skin/classic/browser/devtools/command-screenshot.png        (../shared/devtools/images/command-screenshot.png)
   skin/classic/browser/devtools/command-screenshot@2x.png     (../shared/devtools/images/command-screenshot@2x.png)
   skin/classic/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
   skin/classic/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
@@ -367,16 +368,17 @@ browser.jar:
 * skin/classic/browser/devtools/debugger.css                (devtools/debugger.css)
   skin/classic/browser/devtools/eyedropper.css              (../shared/devtools/eyedropper.css)
 * skin/classic/browser/devtools/netmonitor.css              (devtools/netmonitor.css)
 * skin/classic/browser/devtools/profiler.css                (devtools/profiler.css)
 * skin/classic/browser/devtools/scratchpad.css              (devtools/scratchpad.css)
 * skin/classic/browser/devtools/shadereditor.css            (devtools/shadereditor.css)
 * skin/classic/browser/devtools/splitview.css               (../shared/devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css             (../shared/devtools/styleeditor.css)
+  skin/classic/browser/devtools/storage.css                 (../shared/devtools/storage.css)
 * skin/classic/browser/devtools/webaudioeditor.css          (devtools/webaudioeditor.css)
   skin/classic/browser/devtools/magnifying-glass.png        (../shared/devtools/images/magnifying-glass.png)
   skin/classic/browser/devtools/magnifying-glass@2x.png     (../shared/devtools/images/magnifying-glass@2x.png)
   skin/classic/browser/devtools/magnifying-glass-light.png  (../shared/devtools/images/magnifying-glass-light.png)
   skin/classic/browser/devtools/magnifying-glass-light@2x.png (../shared/devtools/images/magnifying-glass-light@2x.png)
   skin/classic/browser/devtools/itemToggle.png              (../shared/devtools/images/itemToggle.png)
   skin/classic/browser/devtools/itemToggle@2x.png           (../shared/devtools/images/itemToggle@2x.png)
   skin/classic/browser/devtools/itemArrow-dark-rtl.svg      (../shared/devtools/images/itemArrow-dark-rtl.svg)
@@ -429,16 +431,17 @@ browser.jar:
   skin/classic/browser/devtools/profiler-stopwatch-checked.svg      (../shared/devtools/images/profiler-stopwatch-checked.svg)
   skin/classic/browser/devtools/tool-options.svg            (../shared/devtools/images/tool-options.svg)
   skin/classic/browser/devtools/tool-webconsole.svg         (../shared/devtools/images/tool-webconsole.svg)
   skin/classic/browser/devtools/tool-debugger.svg           (../shared/devtools/images/tool-debugger.svg)
   skin/classic/browser/devtools/tool-debugger-paused.svg    (../shared/devtools/images/tool-debugger-paused.svg)
   skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
   skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
   skin/classic/browser/devtools/tool-styleeditor.svg        (../shared/devtools/images/tool-styleeditor.svg)
+  skin/classic/browser/devtools/tool-storage.svg            (../shared/devtools/images/tool-storage.svg)
   skin/classic/browser/devtools/tool-profiler.svg           (../shared/devtools/images/tool-profiler.svg)
   skin/classic/browser/devtools/tool-network.svg            (../shared/devtools/images/tool-network.svg)
   skin/classic/browser/devtools/tool-scratchpad.svg         (../shared/devtools/images/tool-scratchpad.svg)
   skin/classic/browser/devtools/tool-webaudio.svg           (../shared/devtools/images/tool-webaudio.svg)
   skin/classic/browser/devtools/close.png                   (../shared/devtools/images/close.png)
   skin/classic/browser/devtools/close@2x.png                (../shared/devtools/images/close@2x.png)
   skin/classic/browser/devtools/vview-delete.png            (../shared/devtools/images/vview-delete.png)
   skin/classic/browser/devtools/vview-delete@2x.png         (../shared/devtools/images/vview-delete@2x.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/images/filetypes/store.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g>
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-storage.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1">
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/storage.css
@@ -0,0 +1,48 @@
+/* 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/. */
+
+/* Storage Host Tree */
+
+#storage-tree {
+  min-width: 220px;
+  max-width: 500px;
+  overflow: auto;
+}
+
+.theme-dark #storage-tree {
+  background: #343c45; /* Toolbars */
+}
+
+#storage-tree .tree-widget-item[type="store"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-store.svg);
+  background-size: 18px 18px;
+  background-position: -1px 0;
+}
+
+/* Columns with date should have a min width so that date is visible */
+#expires, #lastAccessed, #creationTime {
+  min-width: 150px;
+}
+
+/* Variables View Sidebar */
+
+#storage-sidebar {
+  max-width: 500px;
+  min-width: 250px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #storage-tree {
+    max-width: 100%;
+  }
+
+  #storage-table #path {
+    display: none;
+  }
+
+  #storage-table .table-widget-cell {
+    min-width: 100px;
+  }
+}
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -1425,16 +1425,17 @@
 .tree-widget-container *:-moz-focusring {
   outline-style: none;
 }
 
 .tree-widget-empty-text {
   padding: 10px 20px;
   font-size: medium;
   background: transparent;
+  pointer-events: none;
 }
 
 /* Tree Item */
 
 .tree-widget-container .tree-widget-item {
   padding: 2px 0px 4px;
   /* OSX has line-height 14px by default, which causes weird alignment issues
    * because of 20px high icons. thus making line-height consistent with that of
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -234,16 +234,17 @@ browser.jar:
         skin/classic/browser/devtools/newtab.png                    (../shared/devtools/images/newtab.png)
         skin/classic/browser/devtools/newtab@2x.png                 (../shared/devtools/images/newtab@2x.png)
         skin/classic/browser/devtools/newtab-inverted.png           (../shared/devtools/images/newtab-inverted.png)
         skin/classic/browser/devtools/newtab-inverted@2x.png        (../shared/devtools/images/newtab-inverted@2x.png)
 *       skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
         skin/classic/browser/devtools/filetype-dir-close.svg        (../shared/devtools/images/filetypes/dir-close.svg)
         skin/classic/browser/devtools/filetype-dir-open.svg         (../shared/devtools/images/filetypes/dir-open.svg)
         skin/classic/browser/devtools/filetype-globe.svg            (../shared/devtools/images/filetypes/globe.svg)
+        skin/classic/browser/devtools/filetype-store.svg            (../shared/devtools/images/filetypes/store.svg)
         skin/classic/browser/devtools/commandline-icon.png          (../shared/devtools/images/commandline-icon.png)
         skin/classic/browser/devtools/commandline-icon@2x.png          (../shared/devtools/images/commandline-icon@2x.png)
         skin/classic/browser/devtools/alerticon-warning.png         (../shared/devtools/images/alerticon-warning.png)
         skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
 *       skin/classic/browser/devtools/ruleview.css                  (../shared/devtools/ruleview.css)
         skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
         skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
         skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
@@ -278,16 +279,17 @@ browser.jar:
         skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
         skin/classic/browser/devtools/eyedropper.css                (../shared/devtools/eyedropper.css)
 *       skin/classic/browser/devtools/canvasdebugger.css            (devtools/canvasdebugger.css)
 *       skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
 *       skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
 *       skin/classic/browser/devtools/profiler.css                  (devtools/profiler.css)
 *       skin/classic/browser/devtools/scratchpad.css                (devtools/scratchpad.css)
 *       skin/classic/browser/devtools/shadereditor.css              (devtools/shadereditor.css)
+        skin/classic/browser/devtools/storage.css                   (../shared/devtools/storage.css)
 *       skin/classic/browser/devtools/splitview.css                 (../shared/devtools/splitview.css)
         skin/classic/browser/devtools/styleeditor.css               (../shared/devtools/styleeditor.css)
 *       skin/classic/browser/devtools/webaudioeditor.css            (devtools/webaudioeditor.css)
         skin/classic/browser/devtools/magnifying-glass.png          (../shared/devtools/images/magnifying-glass.png)
         skin/classic/browser/devtools/magnifying-glass@2x.png       (../shared/devtools/images/magnifying-glass@2x.png)
         skin/classic/browser/devtools/magnifying-glass-light.png    (../shared/devtools/images/magnifying-glass-light.png)
         skin/classic/browser/devtools/magnifying-glass-light@2x.png  (../shared/devtools/images/magnifying-glass-light@2x.png)
         skin/classic/browser/devtools/itemToggle.png                (../shared/devtools/images/itemToggle.png)
@@ -341,16 +343,17 @@ browser.jar:
         skin/classic/browser/devtools/profiler-stopwatch.svg        (../shared/devtools/images/profiler-stopwatch.svg)
         skin/classic/browser/devtools/profiler-stopwatch-checked.svg  (../shared/devtools/images/profiler-stopwatch-checked.svg)
         skin/classic/browser/devtools/tool-options.svg              (../shared/devtools/images/tool-options.svg)
         skin/classic/browser/devtools/tool-webconsole.svg           (../shared/devtools/images/tool-webconsole.svg)
         skin/classic/browser/devtools/tool-debugger.svg             (../shared/devtools/images/tool-debugger.svg)
         skin/classic/browser/devtools/tool-debugger-paused.svg      (../shared/devtools/images/tool-debugger-paused.svg)
         skin/classic/browser/devtools/tool-inspector.svg            (../shared/devtools/images/tool-inspector.svg)
         skin/classic/browser/devtools/tool-styleeditor.svg          (../shared/devtools/images/tool-styleeditor.svg)
+        skin/classic/browser/devtools/tool-storage.svg              (../shared/devtools/images/tool-storage.svg)
         skin/classic/browser/devtools/tool-profiler.svg             (../shared/devtools/images/tool-profiler.svg)
         skin/classic/browser/devtools/tool-network.svg              (../shared/devtools/images/tool-network.svg)
         skin/classic/browser/devtools/tool-scratchpad.svg           (../shared/devtools/images/tool-scratchpad.svg)
         skin/classic/browser/devtools/tool-webaudio.svg             (../shared/devtools/images/tool-webaudio.svg)
         skin/classic/browser/devtools/close.png                     (../shared/devtools/images/close.png)
         skin/classic/browser/devtools/close@2x.png                  (../shared/devtools/images/close@2x.png)
         skin/classic/browser/devtools/vview-delete.png              (../shared/devtools/images/vview-delete.png)
         skin/classic/browser/devtools/vview-delete@2x.png           (../shared/devtools/images/vview-delete@2x.png)
@@ -649,16 +652,17 @@ browser.jar:
         skin/classic/aero/browser/devtools/newtab.png                (../shared/devtools/images/newtab.png)
         skin/classic/aero/browser/devtools/newtab@2x.png             (../shared/devtools/images/newtab@2x.png)
         skin/classic/aero/browser/devtools/newtab-inverted.png       (../shared/devtools/images/newtab-inverted.png)
         skin/classic/aero/browser/devtools/newtab-inverted@2x.png    (../shared/devtools/images/newtab-inverted@2x.png)
 *       skin/classic/aero/browser/devtools/widgets.css               (devtools/widgets.css)
         skin/classic/aero/browser/devtools/filetype-dir-close.svg    (../shared/devtools/images/filetypes/dir-close.svg)
         skin/classic/aero/browser/devtools/filetype-dir-open.svg     (../shared/devtools/images/filetypes/dir-open.svg)
         skin/classic/aero/browser/devtools/filetype-globe.svg        (../shared/devtools/images/filetypes/globe.svg)
+        skin/classic/aero/browser/devtools/filetype-store.svg        (../shared/devtools/images/filetypes/store.svg)
         skin/classic/aero/browser/devtools/commandline-icon.png      (../shared/devtools/images/commandline-icon.png)
         skin/classic/aero/browser/devtools/commandline-icon@2x.png      (../shared/devtools/images/commandline-icon@2x.png)
         skin/classic/aero/browser/devtools/command-paintflashing.png    (../shared/devtools/images/command-paintflashing.png)
         skin/classic/aero/browser/devtools/command-paintflashing@2x.png (../shared/devtools/images/command-paintflashing@2x.png)
         skin/classic/aero/browser/devtools/command-screenshot.png    (../shared/devtools/images/command-screenshot.png)
         skin/classic/aero/browser/devtools/command-screenshot@2x.png (../shared/devtools/images/command-screenshot@2x.png)
         skin/classic/aero/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
         skin/classic/aero/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
@@ -695,16 +699,17 @@ browser.jar:
 *       skin/classic/aero/browser/devtools/debugger.css              (devtools/debugger.css)
         skin/classic/aero/browser/devtools/eyedropper.css            (../shared/devtools/eyedropper.css)
 *       skin/classic/aero/browser/devtools/netmonitor.css            (devtools/netmonitor.css)
 *       skin/classic/aero/browser/devtools/profiler.css              (devtools/profiler.css)
 *       skin/classic/aero/browser/devtools/scratchpad.css            (devtools/scratchpad.css)
 *       skin/classic/aero/browser/devtools/shadereditor.css          (devtools/shadereditor.css)
 *       skin/classic/aero/browser/devtools/splitview.css             (../shared/devtools/splitview.css)
         skin/classic/aero/browser/devtools/styleeditor.css           (../shared/devtools/styleeditor.css)
+        skin/classic/aero/browser/devtools/storage.css               (../shared/devtools/storage.css)
 *       skin/classic/aero/browser/devtools/webaudioeditor.css        (devtools/webaudioeditor.css)
         skin/classic/aero/browser/devtools/magnifying-glass.png      (../shared/devtools/images/magnifying-glass.png)
         skin/classic/aero/browser/devtools/magnifying-glass@2x.png   (../shared/devtools/images/magnifying-glass@2x.png)
         skin/classic/aero/browser/devtools/magnifying-glass-light.png (../shared/devtools/images/magnifying-glass-light.png)
         skin/classic/aero/browser/devtools/magnifying-glass-light@2x.png  (../shared/devtools/images/magnifying-glass-light@2x.png)
         skin/classic/aero/browser/devtools/itemToggle.png            (../shared/devtools/images/itemToggle.png)
         skin/classic/aero/browser/devtools/itemToggle@2x.png         (../shared/devtools/images/itemToggle@2x.png)
         skin/classic/aero/browser/devtools/itemArrow-dark-rtl.svg    (../shared/devtools/images/itemArrow-dark-rtl.svg)
@@ -756,16 +761,17 @@ browser.jar:
         skin/classic/aero/browser/devtools/profiler-stopwatch.svg    (../shared/devtools/images/profiler-stopwatch.svg)
         skin/classic/aero/browser/devtools/profiler-stopwatch-checked.svg      (../shared/devtools/images/profiler-stopwatch-checked.svg)
         skin/classic/aero/browser/devtools/tool-options.svg          (../shared/devtools/images/tool-options.svg)
         skin/classic/aero/browser/devtools/tool-webconsole.svg       (../shared/devtools/images/tool-webconsole.svg)
         skin/classic/aero/browser/devtools/tool-debugger.svg         (../shared/devtools/images/tool-debugger.svg)
         skin/classic/aero/browser/devtools/tool-debugger-paused.svg  (../shared/devtools/images/tool-debugger-paused.svg)
         skin/classic/aero/browser/devtools/tool-inspector.svg        (../shared/devtools/images/tool-inspector.svg)
         skin/classic/aero/browser/devtools/tool-styleeditor.svg      (../shared/devtools/images/tool-styleeditor.svg)
+        skin/classic/aero/browser/devtools/tool-storage.svg          (../shared/devtools/images/tool-storage.svg)
         skin/classic/aero/browser/devtools/tool-profiler.svg         (../shared/devtools/images/tool-profiler.svg)
         skin/classic/aero/browser/devtools/tool-network.svg          (../shared/devtools/images/tool-network.svg)
         skin/classic/aero/browser/devtools/tool-scratchpad.svg       (../shared/devtools/images/tool-scratchpad.svg)
         skin/classic/aero/browser/devtools/tool-webaudio.svg         (../shared/devtools/images/tool-webaudio.svg)
         skin/classic/aero/browser/devtools/close.png                 (../shared/devtools/images/close.png)
         skin/classic/aero/browser/devtools/close@2x.png              (../shared/devtools/images/close@2x.png)
         skin/classic/aero/browser/devtools/vview-delete.png          (../shared/devtools/images/vview-delete.png)
         skin/classic/aero/browser/devtools/vview-delete@2x.png       (../shared/devtools/images/vview-delete@2x.png)
--- a/toolkit/devtools/server/actors/storage.js
+++ b/toolkit/devtools/server/actors/storage.js
@@ -36,17 +36,17 @@ exports.unregister = function(handle) {
   handle.removeTabActor(StorageActor);
 };
 
 // Global required for window less Indexed DB instantiation.
 let global = this;
 
 // Maximum number of cookies/local storage key-value-pairs that can be sent
 // over the wire to the client in one request.
-const MAX_STORE_OBJECT_COUNT = 30;
+const MAX_STORE_OBJECT_COUNT = 50;
 // Interval for the batch job that sends the accumilated update packets to the
 // client.
 const UPDATE_INTERVAL = 500; // ms
 
 // A RegExp for characters that cannot appear in a file/directory name. This is
 // used to sanitize the host name for indexed db to lookup whether the file is
 // present in <profileDir>/storage/persistent/ location
 let illegalFileNameCharacters = [
@@ -275,16 +275,20 @@ StorageActors.defaults = function(typeNa
     /**
      * When a window is removed from the page. This generally means that an
      * iframe was removed, or the current window reload is triggered.
      *
      * @param {window} window
      *        The window which was removed.
      */
     onWindowDestroyed: function(window) {
+      if (!window.location) {
+        // Nothing can be done if location object is null
+        return;
+      }
       let host = this.getHostName(window.location);
       if (!this.hosts.has(host)) {
         this.hostVsStores.delete(host);
         let data = {};
         data[host] = [];
         this.storageActor.update("deleted", typeName, data);
       }
     },
@@ -721,25 +725,30 @@ StorageActors.createActor({
  * StorageActors.createActor for Local Storage and Session Storage.
  * This method exists as both Local Storage and Session Storage have almost
  * identical actors.
  */
 function getObjectForLocalOrSessionStorage(type) {
   return {
     getNamesForHost: function(host) {
       let storage = this.hostVsStores.get(host);
-      return [key for (key in storage)];
+      return Object.keys(storage);
     },
 
     getValuesForHost: function(host, name) {
       let storage = this.hostVsStores.get(host);
       if (name) {
         return [{name: name, value: storage.getItem(name)}];
       }
-      return [{name: name, value: storage.getItem(name)} for (name in storage)];
+      return Object.keys(storage).map(name => {
+        return {
+          name: name,
+          value: storage.getItem(name)
+        };
+      });
     },
 
     getHostName: function(location) {
       if (!location.host) {
         return location.href;
       }
       return location.protocol + "//" + location.host;
     },
--- a/toolkit/devtools/server/tests/browser/browser_storage_dynamic_windows.js
+++ b/toolkit/devtools/server/tests/browser/browser_storage_dynamic_windows.js
@@ -101,20 +101,16 @@ function markOutMatched(toBeEmptied, dat
     if (!data[storageType]) {
       continue;
     }
     info("Testing for " + storageType);
     for (let host in data[storageType]) {
       ok(toBeEmptied[storageType][host], "Host " + host + " found");
       if (!deleted) {
         for (let item of data[storageType][host]) {
-          if ([ 'length', 'key', 'getItem', 'setItem',
-                'removeItem', 'clear'].indexOf(item) != -1) {
-            continue;
-          }
           let index = toBeEmptied[storageType][host].indexOf(item);
           ok(index > -1, "Item found - " + item);
           if (index > -1) {
             toBeEmptied[storageType][host].splice(index, 1);
           }
         }
         if (!toBeEmptied[storageType][host].length) {
           delete toBeEmptied[storageType][host];
--- a/toolkit/devtools/server/tests/browser/browser_storage_listings.js
+++ b/toolkit/devtools/server/tests/browser/browser_storage_listings.js
@@ -5,18 +5,16 @@ Cu.import("resource://gre/modules/devtoo
 Cu.import("resource://gre/modules/devtools/dbg-server.jsm", tempScope);
 let {DebuggerServer, DebuggerClient} = tempScope;
 tempScope = null;
 
 const {StorageFront} = require("devtools/server/actors/storage");
 let {Task} = require("resource://gre/modules/Task.jsm");
 let gWindow = null;
 
-const domStorageProperties = ['length', 'key', 'getItem','setItem', 'removeItem', 'clear'];
-
 const storeMap = {
   cookies: {
     "test1.example.org": [
       {
         name: "c1",
         value: "foobar",
         expires: 2000000000000,
         path: "/browser",
@@ -416,23 +414,19 @@ function testLocalStorage(localStorageAc
   is(Object.keys(localStorageActor.hosts).length, 3,
      "Correct number of host entries for local storage");
   return testLocalStorageObjects(0, localStorageActor.hosts, localStorageActor);
 }
 
 let testLocalStorageObjects = Task.async(function*(index, hosts, localStorageActor) {
   let host = Object.keys(hosts)[index];
   let matchItems = data => {
-    is(data.total - domStorageProperties.length, storeMap.localStorage[host].length,
+    is(data.total, storeMap.localStorage[host].length,
        "Number of local storage items in host " + host + " matches");
     for (let item of data.data) {
-      if (domStorageProperties.indexOf(item.name) != -1) {
-        continue;
-      }
-
       let found = false;
       for (let toMatch of storeMap.localStorage[host]) {
         if (item.name == toMatch.name) {
           found = true;
           ok(true, "Found local storage item " + item.name + " in response");
           is(item.value.str, toMatch.value, "The value matches.");
           break;
         }
@@ -457,23 +451,19 @@ function testSessionStorage(sessionStora
      "Correct number of host entries for session storage");
   return testSessionStorageObjects(0, sessionStorageActor.hosts,
                                    sessionStorageActor);
 }
 
 let testSessionStorageObjects = Task.async(function*(index, hosts, sessionStorageActor) {
   let host = Object.keys(hosts)[index];
   let matchItems = data => {
-    is(data.total - domStorageProperties.length, storeMap.sessionStorage[host].length,
+    is(data.total, storeMap.sessionStorage[host].length,
        "Number of session storage items in host " + host + " matches");
     for (let item of data.data) {
-      if (domStorageProperties.indexOf(item.name) != -1) {
-        continue;
-      }
-
       let found = false;
       for (let toMatch of storeMap.sessionStorage[host]) {
         if (item.name == toMatch.name) {
           found = true;
           ok(true, "Found session storage item " + item.name + " in response");
           is(item.value.str, toMatch.value, "The value matches.");
           break;
         }
--- a/toolkit/devtools/server/tests/browser/storage-dynamic-windows.html
+++ b/toolkit/devtools/server/tests/browser/storage-dynamic-windows.html
@@ -72,16 +72,17 @@ window.idbGenerator = function*(callback
 
 function successClear(event) {
   clearIterator.next(event);
 }
 
 window.clear = function*(callback) {
   document.cookie = "c1=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   document.cookie = "c3=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "cs2=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   localStorage.clear();
   indexedDB.deleteDatabase("idb1").onsuccess = successClear;
   yield undefined;
   indexedDB.deleteDatabase("idb2").onsuccess = successClear;
   yield undefined;
   console.log("removed cookies and stuff from main page");
   callback();
 }
--- a/toolkit/devtools/server/tests/browser/storage-listings.html
+++ b/toolkit/devtools/server/tests/browser/storage-listings.html
@@ -74,16 +74,17 @@ window.idbGenerator = function*(callback
 
 function successClear(event) {
   clearIterator.next(event);
 }
 
 window.clear = function*(callback) {
   document.cookie = "c1=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   document.cookie = "c3=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "cs2=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   localStorage.clear();
   indexedDB.deleteDatabase("idb1").onsuccess = successClear;
   yield undefined;
   indexedDB.deleteDatabase("idb2").onsuccess = successClear;
   yield undefined;
   console.log("removed cookies and stuff from main page");
   callback();
 }
--- a/toolkit/devtools/server/tests/browser/storage-secured-iframe.html
+++ b/toolkit/devtools/server/tests/browser/storage-secured-iframe.html
@@ -51,16 +51,17 @@ window.idbGenerator = function*(callback
   callback();
 }
 
 function successClear(event) {
   clearIterator.next(event);
 }
 
 window.clear = function*(callback) {
+  document.cookie = "sc1=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   localStorage.clear();
   indexedDB.deleteDatabase("idb-s1").onsuccess = successClear;
   yield undefined;
   indexedDB.deleteDatabase("idb-s2").onsuccess = successClear;
   yield undefined;
   console.log("removed cookies and stuff from secured iframe");
   callback();
 }
--- a/toolkit/devtools/server/tests/browser/storage-unsecured-iframe.html
+++ b/toolkit/devtools/server/tests/browser/storage-unsecured-iframe.html
@@ -10,16 +10,18 @@ Iframe for testing multiple host detetio
 <script>
 
 document.cookie = "uc1=foobar; domain=.example.org; path=/; secure=true";
 localStorage.setItem("iframe-u-ls1", "foobar");
 sessionStorage.setItem("iframe-u-ss1", "foobar1");
 sessionStorage.setItem("iframe-u-ss2", "foobar2");
 console.log("added cookies and stuff from unsecured iframe");
 
-window.onunload = function() {
+window.clear = function*(callback) {
+  document.cookie = "uc1=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
   localStorage.clear();
   sessionStorage.clear();
   console.log("removed cookies and stuff from unsecured iframe");
+  callback();
 }
 </script>
 </body>
 </html>