[ServiceWorker] Change indicator on the Network panel in no-matching-routes case

This CL resolves crbug.com/406022417. Currently, the size column shows
`(ServiceWorker router)` and displays `matched to router#0` by mouse
hover when ServiceWorker static routers are registered for a request but
no matching routes are found. After this CL, the size column shows
network transfer sizes and displays `no matching ServerWorker routes` in
no-matching-routes cases. See the crbug comments for the new UI
appearance.

This CL also applies i10n API to some existing code to maintain
consistency of implementation.

Bug: 406022417
Change-Id: Ifd10a702a8ca9044db66a4370e82ae48bf79540d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6446936
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Shunya Shishido <sisidovski@chromium.org>
Commit-Queue: Takashi Nakayama <tnak@chromium.org>

Author: azaika

front_end/core/sdk/NetworkRequest.ts

@@ -784,6 +784,16 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.#serviceWorkerRouterInfoInternal = x;
   }
 
+  /**
+   * Returns true if the request was matched to a route when using the
+   * ServiceWorker static routing API.
+   */
+  hasMatchingServiceWorkerRouter(): boolean {
+    // See definitions in `browser_protocol.pdl` for justification.
+    return this.#serviceWorkerRouterInfoInternal !== undefined &&
+        this.serviceWorkerRouterInfo?.matchedSourceType !== undefined;
+  }
+
   /**
    * Returns true if the request was sent by a service worker.
    */

front_end/panels/network/NetworkDataGridNode.ts

@@ -190,6 +190,19 @@ const UIStrings = {
    *@description Text of a DOM element in Network Data Grid Node of the Network panel
    */
   serviceWorker: '(`ServiceWorker`)',
+  /**
+   *@description Cell title in Network Data Grid Node of the Network panel
+   *@example {4 B} PH1
+   *@example {10 B} PH2
+   */
+  servedFromNetwork: '{PH1} transferred over network, resource size: {PH2}',
+  /**
+   *@description Cell title in Network Data Grid Node of the Network panel
+   *@example {4 B} PH1
+   *@example {10 B} PH2
+   */
+  servedFromNetworkMissingServiceWorkerRoute:
+      '{PH1} transferred over network, resource size: {PH2}, no matching ServiceWorker routes',
   /**
    *@description Cell title in Network Data Grid Node of the Network panel
    *@example {4 B} PH1
@@ -1405,13 +1418,13 @@ export class NetworkRequestNode extends NetworkNode {
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.memoryCache));
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromMemoryCacheResource, {PH1: resourceSize}));
       cell.classList.add('network-dim-cell');
-    } else if (this.requestInternal.serviceWorkerRouterInfo) {
-      const {serviceWorkerRouterInfo} = this.requestInternal;
-      // If `serviceWorkerRouterInfo.ruleIdMatched` is undefined,store 0 to indicate invalid ID.
-      const ruleIdMatched = serviceWorkerRouterInfo.ruleIdMatched ?? 0;
+    } else if (this.requestInternal.hasMatchingServiceWorkerRouter()) {
+      const ruleIdMatched = this.requestInternal.serviceWorkerRouterInfo?.ruleIdMatched as number;
+      const matchedSourceType =
+          this.requestInternal.serviceWorkerRouterInfo?.matchedSourceType as Protocol.Network.ServiceWorkerRouterSource;
       UI.UIUtils.createTextChild(cell, i18n.i18n.lockedString('(ServiceWorker router)'));
       let tooltipText;
-      if (serviceWorkerRouterInfo.matchedSourceType === Protocol.Network.ServiceWorkerRouterSource.Network) {
+      if (matchedSourceType === Protocol.Network.ServiceWorkerRouterSource.Network) {
         const transferSize = i18n.ByteUtilities.formatBytesToKb(this.requestInternal.transferSize);
         tooltipText = i18nString(
             UIStrings.matchedToServiceWorkerRouterWithNetworkSource,
@@ -1421,6 +1434,14 @@ export class NetworkRequestNode extends NetworkNode {
       }
       UI.Tooltip.Tooltip.install(cell, tooltipText);
       cell.classList.add('network-dim-cell');
+    } else if (this.requestInternal.serviceWorkerRouterInfo) {
+      // ServiceWorker routers are registered, but the request fallbacks to network
+      // because no matching router rules found.
+      const transferSize = i18n.ByteUtilities.formatBytesToKb(this.requestInternal.transferSize);
+      UI.UIUtils.createTextChild(cell, transferSize);
+      UI.Tooltip.Tooltip.install(
+          cell,
+          i18nString(UIStrings.servedFromNetworkMissingServiceWorkerRoute, {PH1: transferSize, PH2: resourceSize}));
     } else if (this.requestInternal.fetchedViaServiceWorker) {
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.serviceWorker));
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromServiceWorkerResource, {PH1: resourceSize}));
@@ -1444,7 +1465,7 @@ export class NetworkRequestNode extends NetworkNode {
     } else {
       const transferSize = i18n.ByteUtilities.formatBytesToKb(this.requestInternal.transferSize);
       UI.UIUtils.createTextChild(cell, transferSize);
-      UI.Tooltip.Tooltip.install(cell, `${transferSize} transferred over network, resource size: ${resourceSize}`);
+      UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromNetwork, {PH1: transferSize, PH2: resourceSize}));
     }
     this.appendSubtitle(cell, resourceSize);
   }