From 5cbacdc6f0b1924d5a5f6cccbd06b45699bc09bc Mon Sep 17 00:00:00 2001 From: Jan Scheffler Date: Fri, 27 Sep 2019 13:59:15 +0000 Subject: [PATCH] [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 Commit-Queue: Jan Scheffler Cr-Original-Commit-Position: refs/heads/master@{#700706} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 2c327126ab78b37dfbcedee2a8a267d2a54dadfc --- BUILD.gn | 1 + front_end/resources/CookieItemsView.js | 85 ++++++++++++++++++++-- front_end/resources/cookieItemsView.css | 12 +++ front_end/resources/module.json | 3 +- front_end/resources/resources_strings.grdp | 3 + 5 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 front_end/resources/cookieItemsView.css 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