diff --git a/BUILD.gn b/BUILD.gn
index f95ebbf056..3ed8136c10 100644
--- a/BUILD.gn
+++ b/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",
diff --git a/front_end/resources/CookieItemsView.js b/front_end/resources/CookieItemsView.js
index b3f23387c8..87f39a479a 100644
--- a/front_end/resources/CookieItemsView.js
+++ b/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} */
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());
diff --git a/front_end/resources/cookieItemsView.css b/front_end/resources/cookieItemsView.css
new file mode 100644
index 0000000000..b2b99302f6
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/front_end/resources/module.json b/front_end/resources/module.json
index 9dbc5449a0..182c1a4678 100644
--- a/front_end/resources/module.json
+++ b/front_end/resources/module.json
@@ -100,6 +100,7 @@
"resourcesPanel.css",
"resourcesSidebar.css",
"serviceWorkerCacheViews.css",
- "serviceWorkersView.css"
+ "serviceWorkersView.css",
+ "cookieItemsView.css"
]
}
diff --git a/front_end/resources/resources_strings.grdp b/front_end/resources/resources_strings.grdp
index c425de1a42..5c48eba865 100644
--- a/front_end/resources/resources_strings.grdp
+++ b/front_end/resources/resources_strings.grdp
@@ -218,6 +218,9 @@ read the "$1sdatabase" table.
Background Sync
+
+ Select a cookie to preview it value
+
multiEntry