WebKit merge 40722:40785 (part 1)

third_party/WebKit/WebCore/inspector/front-end/DatabasesPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 28 matching lines @@
     this.sidebarResizeElement.className = "sidebar-resizer-vertical";
     this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarDragging.bind(this), false);
     this.element.appendChild(this.sidebarResizeElement);
 
     this.sidebarTreeElement = document.createElement("ol");
     this.sidebarTreeElement.className = "sidebar-tree";
     this.sidebarElement.appendChild(this.sidebarTreeElement);
 
     this.sidebarTree = new TreeOutline(this.sidebarTreeElement);
 
-    this.databaseViews = document.createElement("div");
-    this.databaseViews.id = "database-views";
-    this.element.appendChild(this.databaseViews);
+    this.databasesListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("DATABASES"), {}, true);
+    this.sidebarTree.appendChild(this.databasesListTreeElement);
+    this.databasesListTreeElement.expand();
+
+    this.localStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("LOCAL STORAGE"), {}, true);
+    this.sidebarTree.appendChild(this.localStorageListTreeElement);
+    this.localStorageListTreeElement.expand();
+
+    this.sessionStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("SESSION STORAGE"), {}, true);
+    this.sidebarTree.appendChild(this.sessionStorageListTreeElement);
+    this.sessionStorageListTreeElement.expand();
+
+    this.storageViews = document.createElement("div");
+    this.storageViews.id = "storage-views";
+    this.element.appendChild(this.storageViews);
 
     this.reset();
 }
 
 WebInspector.DatabasesPanel.prototype = {
     toolbarItemClass: "databases",
 
     get toolbarItemLabel()
     {
         return WebInspector.UIString("Databases");
@@ skipping 12 matching lines @@
             for (var i = 0; i < databasesLength; ++i) {
                 var database = this._databases[i];
 
                 delete database._tableViews;
                 delete database._queryView;
             }
         }
 
         this._databases = [];
 
-        this.sidebarTree.removeChildren();
-        this.databaseViews.removeChildren();
+        if (this._domStorage) {
+            var domStorageLength = this._domStorage.length;
+            for (var i = 0; i < domStorageLength; ++i) {
+                var domStorage = this._domStorage[i];
+
+                delete domStorage._domStorageView;
+            }
+        }
+
+        this._domStorage = [];
+
+        this.databasesListTreeElement.removeChildren();
+        this.localStorageListTreeElement.removeChildren();
+        this.sessionStorageListTreeElement.removeChildren();
+        this.storageViews.removeChildren();
     },
 
     handleKeyEvent: function(event)
     {
         this.sidebarTree.handleKeyEvent(event);
     },
 
     addDatabase: function(database)
     {
         this._databases.push(database);
 
         var databaseTreeElement = new WebInspector.DatabaseSidebarTreeElement(database);
         database._databasesTreeElement = databaseTreeElement;
-
-        this.sidebarTree.appendChild(databaseTreeElement);
+        this.databasesListTreeElement.appendChild(databaseTreeElement);
+    },
+
+    addDOMStorage: function(domStorage)
+    {
+        this._domStorage.push(domStorage);
+        var domStorageTreeElement = new WebInspector.DOMStorageSidebarTreeElement(domStorage);
+        domStorage._domStorageTreeElement = domStorageTreeElement;
+        if (domStorage.isLocalStorage)
+            this.localStorageListTreeElement.appendChild(domStorageTreeElement);
+        else
+            this.sessionStorageListTreeElement.appendChild(domStorageTreeElement);
     },
 
     showDatabase: function(database, tableName)
     {
         if (!database)
             return;
 
-        if (this.visibleDatabaseView)
-            this.visibleDatabaseView.hide();
+        if (this.visibleView)
+            this.visibleView.hide();
 
         var view;
         if (tableName) {
             if (!("_tableViews" in database))
                 database._tableViews = {};
             view = database._tableViews[tableName];
             if (!view) {
                 view = new WebInspector.DatabaseTableView(database, tableName);
                 database._tableViews[tableName] = view;
             }
         } else {
             view = database._queryView;
             if (!view) {
                 view = new WebInspector.DatabaseQueryView(database);
                 database._queryView = view;
             }
         }
 
-        view.show(this.databaseViews);
-
-        this.visibleDatabaseView = view;
+        view.show(this.storageViews);
+
+        this.visibleView = view;
+    },
+
+    showDOMStorage: function(domStorage)
+    {
+        if (!domStorage)
+            return;
+
+        if (this.visibleView)
+            this.visibleView.hide();
+
+        var view;
+        view = domStorage._domStorageView;
+        if (!view) {
+            view = new WebInspector.DOMStorageItemsView(domStorage);
+            domStorage._domStorageView = view;
+        }
+
+        view.show(this.storageViews);
+
+        this.visibleView = view;
     },
 
     closeVisibleView: function()
     {
-        if (this.visibleDatabaseView)
-            this.visibleDatabaseView.hide();
-        delete this.visibleDatabaseView;
+        if (this.visibleView)
+            this.visibleView.hide();
+        delete this.visibleView;
     },
 
     updateDatabaseTables: function(database)
     {
         if (!database || !database._databasesTreeElement)
             return;
 
         database._databasesTreeElement.shouldRefreshChildren = true;
 
         if (!("_tableViews" in database))
             return;
 
         var tableNamesHash = {};
         var tableNames = database.tableNames;
         var tableNamesLength = tableNames.length;
         for (var i = 0; i < tableNamesLength; ++i)
             tableNamesHash[tableNames[i]] = true;
 
         for (var tableName in database._tableViews) {
             if (!(tableName in tableNamesHash)) {
-                if (this.visibleDatabaseView === database._tableViews[tableName])
+                if (this.visibleView === database._tableViews[tableName])
                     this.closeVisibleView();
                 delete database._tableViews[tableName];
             }
         }
     },
 
     dataGridForResult: function(result)
     {
         if (!result.rows.length)
             return null;
@@ skipping 65 matching lines @@
             columns[columnIdentifier].width += "%";
 
         var dataGrid = new WebInspector.DataGrid(columns);
         var length = nodes.length;
         for (var i = 0; i < length; ++i)
             dataGrid.appendChild(nodes[i]);
 
         return dataGrid;
     },
 
+    dataGridForDOMStorage: function(domStorage)
+    {
+        if (!domStorage.length)
+            return null;
+
+        var columns = {};
+        columns[0] = {};
+        columns[1] = {};
+        columns[0].title = WebInspector.UIString("Key");
+        columns[0].width = columns[0].title.length;
+        columns[1].title = WebInspector.UIString("Value");
+        columns[1].width = columns[0].title.length;
+
+        var nodes = [];
+        
+        var length = domStorage.length;
+        for (index = 0; index < domStorage.length; index++) {
+            var data = {};
+       
+            var key = String(domStorage.key(index));
+            data[0] = key;
+            if (key.length > columns[0].width)
+                columns[0].width = key.length;
+        
+            var value = String(domStorage.getItem(key));
+            data[1] = value;
+            if (value.length > columns[1].width)
+                columns[1].width = value.length;
+            var node = new WebInspector.DataGridNode(data, false);
+            node.selectable = false;
+            nodes.push(node);
+        }
+
+        var totalColumnWidths = columns[0].width + columns[1].width;
+        width = Math.round((columns[0].width * 100) / totalColumnWidths);
+        const minimumPrecent = 10;
+        if (width < minimumPrecent)
+            width = minimumPrecent;
+        if (width > 100 - minimumPrecent)
+            width = 100 - minimumPrecent;
+        columns[0].width = width;
+        columns[1].width = 100 - width;
+        columns[0].width += "%";
+        columns[1].width += "%";
+
+        var dataGrid = new WebInspector.DataGrid(columns);
+        var length = nodes.length;
+        for (var i = 0; i < length; ++i)
+            dataGrid.appendChild(nodes[i]);
+
+        return dataGrid;
+    },
+
     _startSidebarDragging: function(event)
     {
         WebInspector.elementDragStart(this.sidebarResizeElement, this._sidebarDragging.bind(this), this._endSidebarDragging.bind(this), event, "col-resize");
     },
 
     _sidebarDragging: function(event)
     {
         this._updateSidebarWidth(event.pageX);
 
         event.preventDefault();
@@ skipping 16 matching lines @@
             this._currentSidebarWidth = this.sidebarElement.offsetWidth;
 
         if (typeof width === "undefined")
             width = this._currentSidebarWidth;
 
         width = Number.constrain(width, Preferences.minSidebarWidth, window.innerWidth / 2);
 
         this._currentSidebarWidth = width;
 
         this.sidebarElement.style.width = width + "px";
-        this.databaseViews.style.left = width + "px";
+        this.storageViews.style.left = width + "px";
         this.sidebarResizeElement.style.left = (width - 3) + "px";
     }
 }
 
 WebInspector.DatabasesPanel.prototype.__proto__ = WebInspector.Panel.prototype;
 
 WebInspector.DatabaseSidebarTreeElement = function(database)
 {
     this.database = database;
 
@@ skipping 57 matching lines @@
 }
 
 WebInspector.SidebarDatabaseTableTreeElement.prototype = {
     onselect: function()
     {
         WebInspector.panels.databases.showDatabase(this.database, this.tableName);
     }
 }
 
 WebInspector.SidebarDatabaseTableTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
+
+WebInspector.DOMStorageSidebarTreeElement = function(domStorage)
+{
+
+    this.domStorage = domStorage;
+
+    WebInspector.SidebarTreeElement.call(this, "domstorage-sidebar-tree-item", domStorage, "", null, false);
+
+    this.refreshTitles();
+}
+
+WebInspector.DOMStorageSidebarTreeElement.prototype = {
+    onselect: function()
+    {
+        WebInspector.panels.databases.showDOMStorage(this.domStorage);
+    },
+
+    get mainTitle()
+    {
+        return this.domStorage.domain;
+    },
+
+    set mainTitle(x)
+    {
+        // Do nothing.
+    },
+
+    get subtitle()
+    {
+        return ""; //this.database.displayDomain;
+    },
+
+    set subtitle(x)
+    {
+        // Do nothing.
+    }
+}
+
+WebInspector.DOMStorageSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;