[devtools] Adds cookie value preview

This patch adds a pane below the cookie list
to show a cookies value when one is selected.

Bug: chromium:462370
Change-Id: Ibf245d75579ee5be357fddd6a4f5027f766b87b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1807238
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#700706}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 2c327126ab78b37dfbcedee2a8a267d2a54dadfc

BUILD.gn

@@ -538,6 +538,7 @@ all_devtools_files = [
   "front_end/resources/clearStorageView.css",
   "front_end/resources/ClearStorageView.js",
   "front_end/resources/CookieItemsView.js",
+  "front_end/resources/cookieItemsView.css",
   "front_end/resources/DatabaseModel.js",
   "front_end/resources/DatabaseQueryView.js",
   "front_end/resources/DatabaseTableView.js",

front_end/resources/CookieItemsView.js

@@ -35,6 +35,7 @@ Resources.CookieItemsView = class extends Resources.StorageItemsView {
   constructor(model, cookieDomain) {
     super(Common.UIString('Cookies'), 'cookiesPanel');
 
+    this.registerRequiredCSS('resources/cookieItemsView.css');
     this.element.classList.add('storage-view');
 
     this._model = model;
@@ -42,10 +43,34 @@ Resources.CookieItemsView = class extends Resources.StorageItemsView {
 
     this._totalSize = 0;
     /** @type {?CookieTable.CookiesTable} */
-    this._cookiesTable = null;
+    this._cookiesTable = this._cookiesTable = new CookieTable.CookiesTable(
+        /* renderInline */ false, this._saveCookie.bind(this), this.refreshItems.bind(this),
+        this._handleCookieSelected.bind(this), this._deleteCookie.bind(this));
+
+    this._cookiesTable.setMinimumSize(0, 50);
+
+    this._splitWidget = new UI.SplitWidget(false, false);
+    this._splitWidget.show(this.element);
+    this._splitWidget.setSecondIsSidebar(true);
+
+    this._previewPanel = new UI.VBox();
+    const resizer = this._previewPanel.element.createChild('div', 'preview-panel-resizer');
+
+    this._splitWidget.setMainWidget(this._cookiesTable);
+    this._splitWidget.setSidebarWidget(this._previewPanel);
+    this._splitWidget.installResizer(resizer);
+
+
     this._refreshThrottler = new Common.Throttler(300);
     /** @type {!Array<!Common.EventTarget.EventDescriptor>} */
     this._eventDescriptors = [];
+
+
+    /** @type {?UI.Widget} */
+    this._preview = null;
+    /** @type {?SDK.Cookie} */
+    this._previewValue = null;
+
     this.setCookiesDomain(model, cookieDomain);
   }
 
@@ -61,6 +86,57 @@ Resources.CookieItemsView = class extends Resources.StorageItemsView {
     const networkManager = model.target().model(SDK.NetworkManager);
     this._eventDescriptors =
         [networkManager.addEventListener(SDK.NetworkManager.Events.ResponseReceived, this._onResponseReceived, this)];
+
+    this._showPreview(null, null);
+  }
+
+  /**
+   * @param {?UI.Widget} preview
+   * @param {?SDK.Cookie} value
+   */
+  _showPreview(preview, value) {
+    if (this._preview && this._previewValue === value)
+      return;
+
+    if (this._preview)
+      this._preview.detach();
+
+    if (!preview)
+      preview = new UI.EmptyWidget(ls`Select a cookie to preview it value`);
+
+    this._previewValue = value;
+    this._preview = preview;
+
+    preview.show(this._previewPanel.contentElement);
+  }
+
+  _handleCookieSelected() {
+    const cookie = this._cookiesTable.selectedCookie();
+    this.setCanDeleteSelected(!!cookie);
+
+    if (!cookie) {
+      this._showPreview(null, null);
+      return;
+    }
+
+    const value = createElementWithClass('div', 'cookie-value');
+    value.textContent = cookie.value();
+    value.addEventListener('dblclick', handleDblClickOnCookieValue);
+
+    const preview = new UI.VBox();
+    preview.contentElement.appendChild(value);
+
+    this._showPreview(preview, cookie);
+
+    /**
+     * @suppressGlobalPropertiesCheck
+     */
+    function handleDblClickOnCookieValue() {
+      const range = document.createRange();
+      range.selectNode(value);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+    }
   }
 
   /**
@@ -90,19 +166,12 @@ Resources.CookieItemsView = class extends Resources.StorageItemsView {
   _updateWithCookies(allCookies) {
     this._totalSize = allCookies.reduce((size, cookie) => size + cookie.size(), 0);
 
-    if (!this._cookiesTable) {
-      this._cookiesTable = new CookieTable.CookiesTable(
-          /* renderInline */ false, this._saveCookie.bind(this), this.refreshItems.bind(this),
-          () => this.setCanDeleteSelected(!!this._cookiesTable.selectedCookie()), this._deleteCookie.bind(this));
-    }
-
     const parsedURL = this._cookieDomain.asParsedURL();
     const host = parsedURL ? parsedURL.host : '';
     this._cookiesTable.setCookieDomain(host);
 
     const shownCookies = this.filter(allCookies, cookie => `${cookie.name()} ${cookie.value()} ${cookie.domain()}`);
     this._cookiesTable.setCookies(shownCookies);
-    this._cookiesTable.show(this.element);
     this.setCanFilter(true);
     this.setCanDeleteAll(true);
     this.setCanDeleteSelected(!!this._cookiesTable.selectedCookie());

front_end/resources/cookieItemsView.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.cookie-value {
+    padding: 2px 6px;
+    overflow: auto;
+    user-select: text;
+    min-height: 100%;
+}

front_end/resources/module.json

@@ -100,6 +100,7 @@
         "resourcesPanel.css",
         "resourcesSidebar.css",
         "serviceWorkerCacheViews.css",
-        "serviceWorkersView.css"
+        "serviceWorkersView.css",
+        "cookieItemsView.css"
     ]
 }

front_end/resources/resources_strings.grdp

@@ -218,6 +218,9 @@ read the &quot;<ph name="THIS_TABLENAME">$1s<ex>database</ex></ph>&quot; table.
   <message name="IDS_DEVTOOLS_9dce9dd0f39a17c2e029174f5bc86ef9" desc="Text in Background Service View of the Application panel">
     Background Sync
   </message>
+  <message name="IDS_DEVTOOLS_9ea4dd36a0094fc33b5ea341a1f909ee" desc="Text in Cookie Items View of the Application panel">
+    Select a cookie to preview it value
+  </message>
   <message name="IDS_DEVTOOLS_9ff9f5649294f7200b671d6389d17d9a" desc="Text in Application Panel Sidebar of the Application panel">
     multiEntry
   </message>