[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..680ccae37a78a0d5a76d8060b71c5792c71f5e6c 100644
--- a/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
+++ b/third_party/WebKit/Source/devtools/front_end/resources/IndexedDBViews.js
@@ -33,38 +33,32 @@
  */
 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._securityOriginElement = this.element.createChild('div', 'header-row');
-    this._nameElement = this.element.createChild('div', 'header-row');
-    this._versionElement = this.element.createChild('div', 'header-row');
+    this._reportView = new UI.ReportView(database.databaseId.name);
+    this._reportView.show(this.contentElement);
 
-    this.update(database);
-  }
+    var bodySection = this._reportView.appendSection('');
+    this._securityOriginElement = bodySection.appendField(Common.UIString('Security origin'));
+    this._versionElement = bodySection.appendField(Common.UIString('Version'));
 
-  /**
-   * @param {!Element} element
-   * @param {string} name
-   * @param {string} value
-   */
-  _formatHeader(element, name, value) {
-    element.removeChildren();
-    element.createChild('div', 'attribute-name').textContent = name + ':';
-    element.createChild('div', 'attribute-value source-code').textContent = value;
+    var footer = this._reportView.appendSection('').appendRow();
+    this._clearButton = UI.createTextButton(
+        Common.UIString('Delete database'), () => this._deleteDatabase(), Common.UIString('Delete database'));
+    footer.appendChild(this._clearButton);
+
+    this.update(database);
   }
 
   _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);
+    this._securityOriginElement.textContent = this._database.databaseId.securityOrigin;
+    this._versionElement.textContent = this._database.version;
   }
 
   /**
@@ -74,6 +68,52 @@ Resources.IDBDatabaseView = class extends UI.VBox {
     this._database = database;
     this._refreshDatabase();
   }
+
+  _deleteDatabase() {
+    Resources.ConfirmDialog.show(
+        Common.UIString('Are you sure you want to delete "%s"?', this._database.databaseId.name),
+        () => this._model.deleteDatabase(this._database.databaseId));
+  }
+};
+
+/**
+ * @unrestricted
+ */
+Resources.ConfirmDialog = class extends UI.VBox {

[pfeldman, 2017/01/25 20:02:45]

Mind moving this into UIUtils.js ? UI.ConfirmDialog

[eostroukhov, 2017/01/25 20:20:03]

Done.

+  /**
+   * @param {string} message
+   * @param {!Function} okCb
+   * @param {!Function} cancelCb
+   */
+  constructor(message, okCb, cancelCb) {
+    super(true);
+    this.registerRequiredCSS('resources/confirm.css');
+    this.contentElement.createChild('div', 'message').createChild('span').textContent = message;
+    var buttonsBar = this.contentElement.createChild('div', 'button');
+    buttonsBar.appendChild(UI.createTextButton(Common.UIString('Ok'), okCb));
+    buttonsBar.appendChild(UI.createTextButton(Common.UIString('Cancel'), cancelCb));
+  }
+
+  /**
+   * @param {string} message
+   * @param {!Function} okCb

[pfeldman, 2017/01/25 20:02:45]

nit: we just name these "callback"

[eostroukhov, 2017/01/25 20:20:03]

Done.

+   */
+  static show(message, okCb) {

[pfeldman, 2017/01/25 20:02:45]

move static above the constructor?

[eostroukhov, 2017/01/25 20:20:03]

Done.

+    var dialog = new UI.Dialog();
+    dialog.setWrapsContent(true);
+    dialog.addCloseButton();
+    dialog.setDimmed(true);
+    new Resources
+        .ConfirmDialog(
+            message,
+            () => {
+              dialog.detach();
+              okCb();
+            },
+            () => dialog.detach())
+        .show(dialog.element);
+    dialog.show();
+  }
 };
 
 /**