[DevTools] Add a preview pane to storage panes

Bug: 738065
Change-Id: Ia706f3a5edd451de462ab8c6a26abc394d493e9e
Reviewed-on: https://chromium-review.googlesource.com/731405
Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#513040}

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

@@ -40,9 +40,30 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView {
       {id: 'value', title: Common.UIString('Value'), sortable: false, editable: true, longText: true, weight: 50}
     ]);
     this._dataGrid = new DataGrid.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
+    this._dataGrid.addEventListener(
+        DataGrid.DataGrid.Events.SelectedNode,
+        event => this._previewEntry(/** @type {!DataGrid.DataGridNode} */ (event.data)));
+    this._dataGrid.addEventListener(DataGrid.DataGrid.Events.DeselectedNode, event => this._previewEntry(null));
     this._dataGrid.setStriped(true);
     this._dataGrid.setName('DOMStorageItemsView');
-    this._dataGrid.asWidget().show(this.element);
+
+    this._splitWidget = new UI.SplitWidget(false, false);
+    this._splitWidget.show(this.element);
+    this._splitWidget.setSecondIsSidebar(true);
+
+    this._previewPanel = new UI.VBox();
+    var resizer = this._previewPanel.element.createChild('div', 'preview-panel-resizer');
+    this._splitWidget.setMainWidget(this._dataGrid.asWidget());
+    this._splitWidget.setSidebarWidget(this._previewPanel);
+    this._splitWidget.installResizer(resizer);
+
+    /** @type {?UI.Widget} */
+    this._preview = null;
+    /** @type {?string} */
+    this._previewValue = null;
+
+    this._showPreview(null, null);
+
     this._eventListeners = [];
     this.setStorage(domStorage);
   }
@@ -107,8 +128,6 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView {
     var rootNode = this._dataGrid.rootNode();
     var children = rootNode.children;
 
-    this.setCanDeleteSelected(true);
-
     for (var i = 0; i < children.length; ++i) {
       if (children[i].data.key === storageData.key)
         return;
@@ -126,27 +145,16 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView {
       return;
 
     var storageData = event.data;
-    var rootNode = this._dataGrid.rootNode();
-    var children = rootNode.children;
+    var childNode = this._dataGrid.rootNode().children.find(child => child.data.key === storageData.key);
+    if (!childNode || childNode.data.value === storageData.value)
+      return;
 
-    var keyFound = false;
-    for (var i = 0; i < children.length; ++i) {
-      var childNode = children[i];
-      if (childNode.data.key === storageData.key) {
-        if (keyFound) {
-          rootNode.removeChild(childNode);
-          return;
-        }
-        keyFound = true;
-        if (childNode.data.value !== storageData.value) {
-          childNode.data.value = storageData.value;
-          childNode.refresh();
-          childNode.select();
-          childNode.reveal();
-        }
-        this.setCanDeleteSelected(true);
-      }
-    }
+    childNode.data.value = storageData.value;
+    childNode.refresh();
+    if (!childNode.selected)
+      return;
+    this._previewEntry(childNode);
+    this.setCanDeleteSelected(true);
   }
 
   /**
@@ -237,4 +245,40 @@ Resources.DOMStorageItemsView = class extends Resources.StorageItemsView {
     if (this._domStorage)
       this._domStorage.removeItem(node.data.key);
   }
+
+  /**
+   * @param {?UI.Widget} preview
+   * @param {?string} value
+   */
+  _showPreview(preview, value) {
+    if (this._preview && this._previewValue === value)
+      return;
+    if (this._preview)
+      this._preview.detach();
+    if (!preview)
+      preview = new UI.EmptyWidget(Common.UIString('Select a value to preview'));
+    this._previewValue = value;
+    this._preview = preview;
+    preview.show(this._previewPanel.contentElement);
+  }
+
+  /**
+   * @param {?DataGrid.DataGridNode} entry
+   */
+  async _previewEntry(entry) {
+    var value = entry && entry.data && entry.data.value;
+    if (!value) {
+      this._showPreview(null, value);
+      return;
+    }
+    var protocol = this._domStorage.isLocalStorage ? 'localstorage' : 'sessionstorage';
+    var url = `${protocol}://${entry.key}`;
+    var provider =
+        Common.StaticContentProvider.fromString(url, Common.resourceTypes.XHR, /** @type {string} */ (value));
+    var preview = await SourceFrame.PreviewFactory.createPreview(provider, 'text/plain');
+    // Selection could've changed while the preview was loaded
+    if (!entry.selected)
+      return;
+    this._showPreview(preview, value);
+  }
 };