From fbf20a6507edffeab481efedd1e8de710e4cbfbe Mon Sep 17 00:00:00 2001 From: Nidhi Jaju Date: Wed, 29 Jul 2020 05:41:18 +0000 Subject: [PATCH] Removing "other origins" UI from DevTools Service Worker tab In this CL, we are removing the drop down menu from DevTools that shows the service worker registrations from other origins which would allow us to remove the 'problematic' function GetAllRegistrations() which was causing the crashes. In a follow-up CL, we will be linking to the chrome://serviceworker- internals page in a footnote for the occasion that a developer may want to see service workers from other origins. More details about the plan can be found at the bottom of the document here: https://docs.google.com/document/d/1DdGq832j1ShNZosFOHQ72qVd-SeYeRgqypbz7nIhz5w/edit#heading=h.dsnztm8lg04x Bug: 807440 Change-Id: I63e07e95c5e6cde1085227c15b8fc6b915dbb908 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2308615 Commit-Queue: Peter Marshall Reviewed-by: Paul Lewis Reviewed-by: Peter Marshall Reviewed-by: Benedikt Meurer --- .../ServiceWorkersTestRunner.js | 1 - front_end/resources/ServiceWorkersView.js | 68 ++----------------- front_end/resources/resources_strings.grdp | 6 -- front_end/resources/serviceWorkersView.css | 53 +-------------- 4 files changed, 8 insertions(+), 120 deletions(-) diff --git a/front_end/application_test_runner/ServiceWorkersTestRunner.js b/front_end/application_test_runner/ServiceWorkersTestRunner.js index b77aa98c95..46e7f2a878 100644 --- a/front_end/application_test_runner/ServiceWorkersTestRunner.js +++ b/front_end/application_test_runner/ServiceWorkersTestRunner.js @@ -40,7 +40,6 @@ ApplicationTestRunner.dumpServiceWorkersView = function() { const swView = UI.panels.resources.visibleView; return swView._currentWorkersView._sectionList.childTextNodes() - .concat(swView._otherWorkersView._sectionList.childTextNodes()) .map(function(node) { if (node.textContent === 'Received ' + (new Date(0)).toLocaleString()) { return 'Invalid scriptResponseTime (unix epoch)'; diff --git a/front_end/resources/ServiceWorkersView.js b/front_end/resources/ServiceWorkersView.js index 022820afc6..d99dac7bd2 100644 --- a/front_end/resources/ServiceWorkersView.js +++ b/front_end/resources/ServiceWorkersView.js @@ -35,32 +35,9 @@ export class ServiceWorkersView extends UI.Widget.VBox { /** @type {?SDK.SecurityOriginManager.SecurityOriginManager} */ this._securityOriginManager = null; - this._filterThrottler = new Common.Throttler.Throttler(300); - - this._otherWorkers = this.contentElement.createChild('div', 'service-workers-other-origin'); - this._otherSWFilter = this._otherWorkers.createChild('div', 'service-worker-filter'); - this._otherSWFilter.setAttribute('tabindex', 0); - this._otherSWFilter.setAttribute('role', 'switch'); - this._otherSWFilter.setAttribute('aria-checked', false); - const filterLabel = this._otherSWFilter.createChild('label', 'service-worker-filter-label'); - filterLabel.textContent = Common.UIString.UIString('Service workers from other origins'); - self.onInvokeElement(this._otherSWFilter, event => { - if (event.target === this._otherSWFilter || event.target === filterLabel) { - this._toggleFilter(); - } - }); - - const toolbar = new UI.Toolbar.Toolbar('service-worker-filter-toolbar', this._otherSWFilter); - this._filter = new UI.Toolbar.ToolbarInput(ls`Filter service worker`, '', 1); - this._filter.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged, () => this._filterChanged()); - toolbar.appendToolbarItem(this._filter); - - this._otherWorkersView = new UI.ReportView.ReportView(); - this._otherWorkersView.setBodyScrollable(false); - this._otherWorkersView.show(this._otherWorkers); - this._otherWorkersView.element.classList.add('service-workers-for-other-origins'); - - this._updateCollapsedStyle(); + // TODO(nidhijaju): Add a link to the chrome://servicworker-internals page + // here, along with a UMA counter to see how many people actually click on + // this link. this._toolbar.appendToolbarItem( MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox()); @@ -154,12 +131,10 @@ export class ServiceWorkersView extends UI.Widget.VBox { } _updateSectionVisibility() { - let hasOthers = false; let hasThis = false; const movedSections = []; for (const section of this._sections.values()) { const expectedView = this._getReportViewForOrigin(section._registration.securityOrigin); - hasOthers |= expectedView === this._otherWorkersView; hasThis |= expectedView === this._currentWorkersView; if (section._section.parentWidget() !== expectedView) { movedSections.push(section); @@ -179,11 +154,6 @@ export class ServiceWorkersView extends UI.Widget.VBox { return bTimestamp - aTimestamp; }); - const scorer = new Sources.FilePathScoreFunction(this._filter.value()); - this._otherWorkersView.sortSections((a, b) => { - const cmp = scorer.score(b.title(), null) - scorer.score(a.title(), null); - return cmp === 0 ? a.title().localeCompare(b.title()) : cmp; - }); for (const section of this._sections.values()) { if (section._section.parentWidget() === this._currentWorkersView || this._isRegistrationVisible(section._registration)) { @@ -193,7 +163,6 @@ export class ServiceWorkersView extends UI.Widget.VBox { } } this.contentElement.classList.toggle('service-worker-has-current', !!hasThis); - this._otherWorkers.classList.toggle('hidden', !hasOthers); this._updateListVisibility(); } @@ -240,7 +209,7 @@ export class ServiceWorkersView extends UI.Widget.VBox { this._securityOriginManager.unreachableMainSecurityOrigin() === origin) { return this._currentWorkersView; } - return this._otherWorkersView; + return new UI.ReportView.ReportView(); } /** @@ -290,40 +259,15 @@ export class ServiceWorkersView extends UI.Widget.VBox { * @return {boolean} */ _isRegistrationVisible(registration) { - const filterString = this._filter.value(); - if (!filterString || !registration.scopeURL) { + if (!registration.scopeURL) { return true; } - - const regex = String.filterRegex(filterString); - return regex.test(registration.scopeURL); - } - - _filterChanged() { - this._updateCollapsedStyle(); - this._filterThrottler.schedule(() => Promise.resolve(this._updateSectionVisibility())); - } - - _updateCollapsedStyle() { - const expanded = this._otherSWFilter.getAttribute('aria-checked') === 'true'; - this._otherWorkers.classList.toggle('service-worker-filter-collapsed', !expanded); - if (expanded) { - this._otherWorkersView.showWidget(); - } else { - this._otherWorkersView.hideWidget(); - } - this._otherWorkersView.setHeaderVisible(false); + return false; } _updateListVisibility() { this.contentElement.classList.toggle('service-worker-list-empty', this._sections.size === 0); } - - _toggleFilter() { - const expanded = this._otherSWFilter.getAttribute('aria-checked') === 'true'; - this._otherSWFilter.setAttribute('aria-checked', `${!expanded}`); - this._filterChanged(); - } } export class Section { diff --git a/front_end/resources/resources_strings.grdp b/front_end/resources/resources_strings.grdp index 5df14adea0..f5b9bd85ce 100644 --- a/front_end/resources/resources_strings.grdp +++ b/front_end/resources/resources_strings.grdp @@ -136,9 +136,6 @@ table is empty. Manifest start URL is not valid - - Service workers from other origins - Theme color @@ -250,9 +247,6 @@ table is empty. Filter by Path - - Filter service worker - Key diff --git a/front_end/resources/serviceWorkersView.css b/front_end/resources/serviceWorkersView.css index 86ba8c5dc2..77363bc71e 100644 --- a/front_end/resources/serviceWorkersView.css +++ b/front_end/resources/serviceWorkersView.css @@ -120,62 +120,13 @@ .service-workers-this-origin { flex-shrink: 0; flex-grow: 0; -} - -.service-workers-this-origin, -.service-worker-filter, -.service-workers-other-origin { min-width: 400px; } -.service-worker-has-current .service-workers-other-origin { - margin-top: 16px; +.service-worker-has-current { border-top: 1px solid rgb(230 230 230); } -.service-worker-list-empty .service-workers-other-origin { - display: none; -} - -.service-worker-filter { - padding: 16px 20px 12px 12px; - flex-grow: 0; - flex-shrink: 0; - background-color: white; - border-bottom: solid 1px rgb(230 230 230); -} - -.service-worker-filter-label { - cursor: pointer; - margin-left: 4px; -} - -.service-worker-filter[data-keyboard-focus="true"]:focus { - background-color: var(--toolbar-bg-color); -} - -.service-worker-filter-label::before { - user-select: none; - -webkit-mask-image: url(Images/treeoutlineTriangles.svg); - -webkit-mask-size: 32px 24px; - content: ''; - color: transparent; - background-color: rgb(110 110 110); - text-shadow: none; - height: 12px; - width: 10px; - display: inline-block; -} - -.service-worker-filter[aria-checked="true"] .service-worker-filter-label::before { - -webkit-mask-position: -16px 0; -} - -.service-worker-filter-toolbar { - margin: 8px 10px 0 12px; - max-width: 530px; -} - -.service-worker-filter-collapsed .service-worker-filter-toolbar { +.service-worker-list-empty { display: none; }