[ServiceWorker] Add SW static routing API source types to devtools

This CL adds `actualSourceType` and `matchedSourceType` of SW static
routing API to the devtools network panel under `Router Evaluation`
field. This is only showed when the ServiceWorker static routing API is
used.

Bug: 41496865
Bug: 374656289
Change-Id: I867c712d2c2ad6c981b3cc87ebdf04850416494a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6000197
Reviewed-by: Shunya Shishido <[email protected]>
Reviewed-by: Yoshisato Yanagisawa <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: quasi-mod

front_end/panels/network/RequestTimingView.test.ts

@@ -5,7 +5,10 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 
+import * as Network from './NetworkTimeCalculator.js';
 import * as RequestTimingView from './RequestTimingView.js';
 
 function createNetworkRequest(
@@ -53,7 +56,7 @@ function createNetworkRequest(
   return request;
 }
 
-describe('ResourceTimingView', () => {
+describeWithLocale('ResourceTimingView', () => {
   it('RequestTimeRanges has router evaluation field with SW router source as network', async () => {
     const request = createNetworkRequest(
         Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
@@ -133,4 +136,35 @@ describe('ResourceTimingView', () => {
     assert.strictEqual(cacheLookup?.start, timingInfo.requestTime + cacheLookupStart / 1000);
     assert.strictEqual(cacheLookup?.end, timingInfo.requestTime + timingInfo.sendStart / 1000);
   });
+
+  it('Timing table has router evaluation field with detail tabs', async () => {
+    const request = createNetworkRequest(
+        Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
+
+    const component = new RequestTimingView.RequestTimingView(request, new Network.NetworkTimeCalculator(true));
+    const div = document.createElement('div');
+    renderElementIntoDOM(div);
+    component.markAsRoot();
+    component.show(div);
+
+    // Test if we correctly set details element
+    const routerEvaluationDetailsElement = document.querySelector('.router-evaluation-timing-bar-details');
+    assert.isNotNull(routerEvaluationDetailsElement, 'router evaluation details does not exist');
+    assert.strictEqual(
+        routerEvaluationDetailsElement.childElementCount, 1,
+        'router evaluation details child element count does not match');
+    assert.isNotNull(routerEvaluationDetailsElement.firstElementChild, 'router evaluation first element is non null');
+
+    // Test if we correctly set the tree item inside shadow root
+    const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
+    assert.isNotNull(shadowElement, 'shadow element does not exist');
+    const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
+    assert.strictEqual(content.length, 2, 'does not match the tree item');
+
+    // Check the content of the view. Since the value is set from matched to actual,
+    // the order should be the same.
+    const networkString = String(Protocol.Network.ServiceWorkerRouterSource.Network);
+    assert.strictEqual(content[0], `Matched source: ${networkString}`, 'matched source does not match');
+    assert.strictEqual(content[1], `Actual source: ${networkString}`, 'actual source does not match');
+  });
 });

front_end/panels/network/RequestTimingView.ts

@@ -106,6 +106,14 @@ const UIStrings = {
    *@description Text in Signed Exchange Info View of the Network panel
    */
   label: 'Label',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerEvaluation: 'Router Evaluation',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerCacheLookup: 'Cache Lookup',
   /**
    *@description Inner element text content in Network Log View Columns of the Network panel
    */
@@ -217,6 +225,16 @@ const UIStrings = {
    *@description Text used to show that data was retrieved using ServiceWorker fallback code
    */
   fallbackCode: 'Fallback code',
+  /**
+   *@description Name of the specified source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerMatchedSource: 'Matched source: {PH1}',
+  /**
+   *@description Name of the actually used source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerActualSource: 'Actual source: {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestTimingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -258,6 +276,10 @@ export class RequestTimingView extends UI.Widget.VBox {
         return i18nString(UIStrings.requestToServiceworker);
       case RequestTimeRangeNames.SERVICE_WORKER_PREPARATION:
         return i18nString(UIStrings.startup);
+      case RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION:
+        return i18nString(UIStrings.routerEvaluation);
+      case RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP:
+        return i18nString(UIStrings.routerCacheLookup);
       case RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH:
         return i18nString(UIStrings.respondwith);
       case RequestTimeRangeNames.SSL:
@@ -490,6 +512,15 @@ export class RequestTimingView extends UI.Widget.VBox {
         timingBarTitleElement.setAttribute('role', 'switch');
         UI.ARIAUtils.setChecked(timingBarTitleElement, false);
       }
+
+      if (range.name === 'serviceworker-routerevaluation') {
+        timingBarTitleElement.classList.add('network-fetch-timing-bar-clickable');
+        tableElement.createChild('tr', 'router-evaluation-timing-bar-details');
+
+        timingBarTitleElement.setAttribute('tabindex', '0');
+        timingBarTitleElement.setAttribute('role', 'switch');
+        UI.ARIAUtils.setChecked(timingBarTitleElement, false);
+      }
     }
 
     if (!request.finished && !request.preserved) {
@@ -683,6 +714,67 @@ export class RequestTimingView extends UI.Widget.VBox {
     }
   }
 
+  private constructRouterEvaluationView(): void {
+    if (!this.tableElement) {
+      return;
+    }
+
+    const routerEvaluationDetailsElement = this.tableElement.querySelector('.router-evaluation-timing-bar-details');
+    if (!routerEvaluationDetailsElement) {
+      return;
+    }
+
+    routerEvaluationDetailsElement.classList.add('network-fetch-timing-bar-details-collapsed');
+
+    self.onInvokeElement(
+        this.tableElement, this.onToggleRouterEvaluationDetails.bind(this, routerEvaluationDetailsElement));
+
+    const detailsView = new UI.TreeOutline.TreeOutlineInShadow();
+    routerEvaluationDetailsElement.appendChild(detailsView.element);
+
+    const {serviceWorkerRouterInfo} = this.request;
+    if (!serviceWorkerRouterInfo) {
+      return;
+    }
+
+    const document = this.tableElement.ownerDocument;
+
+    // Add matched source type element
+    const matchedSourceTypeElement = document.createElement('div');
+    matchedSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const matchedSourceType = serviceWorkerRouterInfo.matchedSourceType;
+    const matchedSourceTypeString = String(matchedSourceType) || i18nString(UIStrings.unknown);
+    matchedSourceTypeElement.textContent = i18nString(UIStrings.routerMatchedSource, {PH1: matchedSourceTypeString});
+
+    const matchedSourceTypeTreeElement = new UI.TreeOutline.TreeElement(matchedSourceTypeElement);
+    detailsView.appendChild(matchedSourceTypeTreeElement);
+
+    // Add actual source type element
+    const actualSourceTypeElement = document.createElement('div');
+    actualSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const actualSourceType = serviceWorkerRouterInfo.actualSourceType;
+    const actualSourceTypeString = String(actualSourceType) || i18nString(UIStrings.unknown);
+    actualSourceTypeElement.textContent = i18nString(UIStrings.routerActualSource, {PH1: actualSourceTypeString});
+
+    const actualSourceTypeTreeElement = new UI.TreeOutline.TreeElement(actualSourceTypeElement);
+    detailsView.appendChild(actualSourceTypeTreeElement);
+  }
+
+  private onToggleRouterEvaluationDetails(routerEvaluationDetailsElement: Element, event: Event): void {
+    if (!event.target) {
+      return;
+    }
+
+    const target = (event.target as Element);
+    if (target.classList.contains('network-fetch-timing-bar-clickable')) {
+      const expanded = target.getAttribute('aria-checked') === 'true';
+      target.setAttribute('aria-checked', String(!expanded));
+
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-collapsed');
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-expanded');
+    }
+  }
+
   override wasShown(): void {
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
@@ -709,6 +801,10 @@ export class RequestTimingView extends UI.Widget.VBox {
     if (this.request.fetchedViaServiceWorker) {
       this.constructFetchDetailsView();
     }
+
+    if (this.request.serviceWorkerRouterInfo) {
+      this.constructRouterEvaluationView();
+    }
   }
 
   private boundaryChanged(): void {

front_end/panels/network/networkTimingTable.css

@@ -161,7 +161,8 @@ table.network-timing-table > tr:not(.network-timing-table-header):not(.network-t
   display: block;
 }
 
-.network-fetch-timing-bar-details {
+.network-fetch-timing-bar-details,
+.router-evaluation-timing-bar-details {
   padding-left: 11px;
   width: fit-content;
 }