Bug 1320362: Move indexedDb storage type in the storage inspector into a new column

Issue #31

devtools/client/locales/en-US/storage.properties

@@ -53,8 +53,10 @@ table.headers.sessionStorage.value=Value
 table.headers.Cache.url=URL
 table.headers.Cache.status=Status
 
+table.headers.indexedDB.uniqueKey=Unique key
 table.headers.indexedDB.name=Key
 table.headers.indexedDB.db=Database Name
+table.headers.indexedDB.storage=Storage
 table.headers.indexedDB.objectStore=Object Store Name
 table.headers.indexedDB.value=Value
 table.headers.indexedDB.origin=Origin

devtools/client/shared/widgets/TableWidget.js

@@ -719,6 +719,10 @@ TableWidget.prototype = {
       if (hiddenColumns.includes(id) || privateColumns.includes(id)) {
         // Hide the column.
         this.columns.get(id).toggleColumn();
+
+        if (privateColumns.includes(id)) {
+          this.columns.get(id).private = true;
+        }
       }
     }
     this.sortedOn = sortOn;
@@ -978,6 +982,9 @@ module.exports.TableWidget = TableWidget;
  *        The displayed string on the column's header.
  */
 function Column(table, id, header) {
+  // By default cells are visible in the UI.
+  this._private = false;
+
   this.tbody = table.tbody;
   this.document = table.document;
   this.window = table.window;
@@ -1060,6 +1067,23 @@ Column.prototype = {
     return this._sortState || 0;
   },
 
+  /**
+   * Get the private state of the column (visibility in the UI).
+   */
+  get private() {
+    return this._private;
+  },
+
+  /**
+   * Set the private state of the column (visibility in the UI).
+   *
+   * @param  {Boolean} state
+   *         Private (true or false)
+   */
+  set private(state) {
+    this._private = state;
+  },
+
   /**
    * Sets the sorted value
    */

devtools/client/storage/ui.js

@@ -573,7 +573,7 @@ StorageUI.prototype = {
   },
 
   /**
-   * Populates the selected entry from teh table in the sidebar for a more
+   * Populates the selected entry from the table in the sidebar for a more
    * detailed view.
    */
   displayObjectSidebar: Task.async(function* () {
@@ -615,6 +615,11 @@ StorageUI.prototype = {
         let otherProps = itemProps.filter(
           e => !["name", "value", "valueActor"].includes(e));
         for (let prop of otherProps) {
+          let column = this.table.columns.get(prop);
+          if (column && column.private) {
+            continue;
+          }
+
           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];
@@ -626,6 +631,11 @@ StorageUI.prototype = {
     } else {
       // Case when displaying IndexedDB db/object store properties.
       for (let key in item) {
+        let column = this.table.columns.get(key);
+        if (column && column.private) {
+          continue;
+        }
+
         mainScope.addItem(key, {}, true).setGrip(item[key]);
         this.parseItemValue(key, item[key]);
       }

devtools/server/actors/storage.js

@@ -1463,7 +1463,9 @@ DatabaseMetadata.prototype = {
 
   toObject() {
     return {
-      name: `${this._name} (${this.storage})`,
+      uniqueKey: `${this._name}${SEPARATOR_GUID}${this.storage}`,
+      name: this._name,
+      storage: this.storage,
       origin: this._origin,
       version: this._version,
       objectStores: this._objectStores.size
@@ -1671,7 +1673,9 @@ StorageActors.createActor({
     if ("objectStores" in item) {
       // DB meta data
       return {
+        uniqueKey: `${item.name} (${item.storage})`,
         db: item.name,
+        storage: item.storage,
         origin: item.origin,
         version: item.version,
         objectStores: item.objectStores
@@ -1813,7 +1817,9 @@ StorageActors.createActor({
       // Detail of indexedDB for one origin
       default:
         return [
+          { name: "uniqueKey", editable: false, private: true },
           { name: "db", editable: false },
+          { name: "storage", editable: false },
           { name: "origin", editable: false },
           { name: "version", editable: false },
           { name: "objectStores", editable: false },

devtools/server/tests/browser/browser_storage_listings.js

@@ -470,17 +470,17 @@ var testIndexedDBs = Task.async(function* (index, hosts, indexedDBActor) {
     for (let item of data.data) {
       let found = false;
       for (let toMatch of IDBValues.dbDetails[host]) {
-        if (item.db == toMatch.db) {
+        if (item.uniqueKey == toMatch.db) {
           found = true;
-          ok(true, "Found indexed db " + item.db + " in response");
+          ok(true, "Found indexed db " + item.uniqueKey + " in response");
           is(item.origin, toMatch.origin, "The origin matches.");
           is(item.version, toMatch.version, "The version matches.");
           is(item.objectStores, toMatch.objectStores,
-             "The numebr of object stores matches.");
+             "The number of object stores matches.");
           break;
         }
       }
-      ok(found, "indexed db " + item.name + " should exist in response");
+      ok(found, "indexed db " + item.uniqueKey + " should exist in response");
     }
   };
 

devtools/shared/specs/storage.js

@@ -40,6 +40,7 @@ function createStorageSpec(options) {
 
 // Cookies store object
 types.addDictType("cookieobject", {
+  uniqueKey: "string",
   name: "string",
   value: "longstring",
   path: "nullable:string",
@@ -176,11 +177,13 @@ createStorageSpec({
 // This is a union on idb object, db metadata object and object store metadata
 // object
 types.addDictType("idbobject", {
+  uniqueKey: "string",
   name: "nullable:string",
   db: "nullable:string",
   objectStore: "nullable:string",
   origin: "nullable:string",
   version: "nullable:number",
+  storage: "nullable:string",
   objectStores: "nullable:number",
   keyPath: "nullable:string",
   autoIncrement: "nullable:boolean",