[DevTools] Provide a way to delete Indexed DBs

third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js

Index: third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js b/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
index 9c4c429f65a249c7ec3d7c57f848702110fcbb43..7105deb42a5b0c49d003eb96fed3a4a78b2f7df9 100644
--- a/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
+++ b/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
@@ -33,18 +33,27 @@
  */
 Resources.IDBDatabaseView = class extends UI.VBox {
   /**
+   * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.Database} database
    */
-  constructor(database) {
+  constructor(model, database) {
     super();
-    this.registerRequiredCSS('resources/indexedDBViews.css');
 
-    this.element.classList.add('indexed-db-database-view');
-    this.element.classList.add('storage-view');
+    this._model = model;
+
+    this._reportView = new UI.ReportView(database.databaseId.name);
+    this._reportView.registerRequiredCSS('resources/indexedDBViews.css');

[pfeldman, 2017/01/24 23:14:21]

You should not be mixing alien styles into report view, only bring what you need
(if anything).

[eostroukhov, 2017/01/25 19:56:35]

Turns out, there's no need for custom styling - reverted.

+    this._reportView.show(this.contentElement);
 
-    this._securityOriginElement = this.element.createChild('div', 'header-row');
-    this._nameElement = this.element.createChild('div', 'header-row');
-    this._versionElement = this.element.createChild('div', 'header-row');
+    var bodySection = this._reportView.appendSection('');
+
+    this._securityOriginElement = bodySection.appendRow();
+    this._versionElement = bodySection.appendRow();
+
+    var footer = this._reportView.appendSection('').appendRow();
+    this._clearButton = UI.createTextButton(

[pfeldman, 2017/01/24 23:14:21]

This looks more like a UI.List control to me, but that is fine for now.

[eostroukhov, 2017/01/25 19:56:35]

Acknowledged.

+        Common.UIString('Delete database'), () => this._deleteDatabase(), Common.UIString('Delete database'));
+    footer.appendChild(this._clearButton);
 
     this.update(database);
   }
@@ -63,7 +72,6 @@ Resources.IDBDatabaseView = class extends UI.VBox {
   _refreshDatabase() {
     this._formatHeader(
         this._securityOriginElement, Common.UIString('Security origin'), this._database.databaseId.securityOrigin);
-    this._formatHeader(this._nameElement, Common.UIString('Name'), this._database.databaseId.name);
     this._formatHeader(this._versionElement, Common.UIString('Version'), this._database.version);
   }
 
@@ -74,6 +82,12 @@ Resources.IDBDatabaseView = class extends UI.VBox {
     this._database = database;
     this._refreshDatabase();
   }
+
+  _deleteDatabase() {
+    if (confirm(Common.UIString(

[pfeldman, 2017/01/24 23:14:21]

Don't use native confirm, use software dialog instead.

[eostroukhov, 2017/01/25 19:56:35]

Done.

+            'Are you sure you want to delete IndexedDB database "%s"?', this._database.databaseId.name)))
+      this._model.deleteDatabase(this._database.databaseId);
+  }
 };
 
 /**