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 <petermarshall@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>

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)';

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 {

front_end/resources/resources_strings.grdp

@@ -136,9 +136,6 @@ table is empty.
   <message name="IDS_DEVTOOLS_457e0305e5c05fccf452f238863faa46" desc="Manifest installability error in the Application panel">
     Manifest start URL is not valid
   </message>
-  <message name="IDS_DEVTOOLS_458efe6e41ed41835b8d84b28db3f394" desc="Filter label text content in Service Workers View of the Application panel">
-    <ph name="LOCKED_TERM">Service workers</ph> from other origins
-  </message>
   <message name="IDS_DEVTOOLS_45e035baf33a8e403766a606457f8b10" desc="Text in App Manifest View of the Application panel">
     Theme color
   </message>
@@ -250,9 +247,6 @@ table is empty.
   <message name="IDS_DEVTOOLS_87e059dc2492bd5041581f05daef12f7" desc="Text in Service Worker Cache Views of the Application panel">
     Filter by Path
   </message>
-  <message name="IDS_DEVTOOLS_886b9bffdebad3a988a8da87b1affa2d" desc="Text in Service Workers View of the Application panel">
-    Filter <ph name="LOCKED_TERM">service worker</ph>
-  </message>
   <message name="IDS_DEVTOOLS_897356954c2cd3d41b221e3f24f99bba" desc="Text in DOMStorage Items View of the Application panel">
     Key
   </message>

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;
 }