Add ServiceWorker Static Routing API information in HAR.

Currently static routing api info is not available upon HAR export. So,
this cl adds following custom fields that has routing info to the HAR response and timing property.
- serviceWorkerRouterRuleIdMatched
- serviceWorkerRouterMatchedSourceType
- serviceWorkerRouterActualSourceType
- workerRouterEvaluationStart
- workerCacheLookupStart

per https://docs.google.com/document/d/1aVRdEGQiCsWjEwgU6W9Lz7b1AtxxJXybWjPkmMvYURA/edit?tab=t.0

After this CL, HAR contains ServiceWorkerRouterInfo under
response and timing fields, and the timing view shows service worker routing info (id/matched/actual/evalaution/cache lookup) when imported HAR.


Bug: 375515693
Change-Id: Ic63ccefc27edc35b3305d144bc28cb3dcff599c0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6334706
Reviewed-by: Shunya Shishido <[email protected]>
Reviewed-by: Yoshisato Yanagisawa <[email protected]>
Commit-Queue: Monica Chintala <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: monica-ch

front_end/models/har/HARFormat.ts

@@ -254,6 +254,12 @@ class HARResponse extends HARBase {
     this.custom.set('fetchedViaServiceWorker', Boolean(data['_fetchedViaServiceWorker']));
     this.custom.set('responseCacheStorageCacheName', HARBase.optionalString(data['_responseCacheStorageCacheName']));
     this.custom.set('serviceWorkerResponseSource', HARBase.optionalString(data['_serviceWorkerResponseSource']));
+    this.custom.set(
+        'serviceWorkerRouterRuleIdMatched', HARBase.optionalNumber(data['_serviceWorkerRouterRuleIdMatched']));
+    this.custom.set(
+        'serviceWorkerRouterMatchedSourceType', HARBase.optionalString(data['_serviceWorkerRouterMatchedSourceType']));
+    this.custom.set(
+        'serviceWorkerRouterActualSourceType', HARBase.optionalString(data['_serviceWorkerRouterActualSourceType']));
   }
 }
 
@@ -380,6 +386,8 @@ export class HARTimings extends HARBase {
     this.custom.set('workerReady', HARBase.optionalNumber(data['_workerReady']));
     this.custom.set('workerFetchStart', HARBase.optionalNumber(data['_workerFetchStart']));
     this.custom.set('workerRespondWithSettled', HARBase.optionalNumber(data['_workerRespondWithSettled']));
+    this.custom.set('workerRouterEvaluationStart', HARBase.optionalNumber(data['_workerRouterEvaluationStart']));
+    this.custom.set('workerCacheLookupStart', HARBase.optionalNumber(data['_workerCacheLookupStart']));
   }
 }
 

front_end/models/har/Importer.test.ts

@@ -98,6 +98,9 @@ const exampleLog = new HAR.HARFormat.HARLog({
         _fetchedViaServiceWorker: true,
         _responseCacheStorageCacheName: 'v1',
         _serviceWorkerResponseSource: 'cache-storage',
+        _serviceWorkerRouterRuleIdMatched: 1,
+        _serviceWorkerRouterMatchedSourceType: 'cache',
+        _serviceWorkerRouterActualSourceType: 'network',
       },
       serverIPAddress: '127.0.0.1',
       startedDateTime: '2020-12-14T17:35:53.241Z',
@@ -115,6 +118,8 @@ const exampleLog = new HAR.HARFormat.HARLog({
         _workerReady: 2,
         _workerFetchStart: 10,
         _workerRespondWithSettled: 300,
+        _workerRouterEvaluationStart: 100,
+        _workerCacheLookupStart: 200,
       },
     },
     {
@@ -261,6 +266,9 @@ describe('HAR Importer', () => {
     assert.isTrue(parsedRequest.fetchedViaServiceWorker);
     assert.strictEqual(parsedRequest.getResponseCacheStorageCacheName(), 'v1');
     assert.strictEqual(parsedRequest.serviceWorkerResponseSource(), 'cache-storage');
+    assert.strictEqual(parsedRequest.serviceWorkerRouterInfo?.ruleIdMatched, 1);
+    assert.strictEqual(parsedRequest.serviceWorkerRouterInfo?.matchedSourceType, 'cache');
+    assert.strictEqual(parsedRequest.serviceWorkerRouterInfo?.actualSourceType, 'network');
   });
 
   it('Parses the request timings', () => {
@@ -286,6 +294,8 @@ describe('HAR Importer', () => {
       workerFetchStart: 10,
       workerRespondWithSettled: 300,
       workerStart: 30,
+      workerRouterEvaluationStart: 100,
+      workerCacheLookupStart: 200,
     });
   });
 

front_end/models/har/Importer.ts

@@ -172,6 +172,20 @@ export class Importer {
       request.setResponseCacheStorageCacheName(responseCacheStorageCacheName);
     }
 
+    const ruleIdMatched = entry.response.customAsNumber('serviceWorkerRouterRuleIdMatched');
+    // The router rule ID is 1-indexed. We add router related optional fields
+    // only when there is a matched router rule.
+    if (ruleIdMatched !== undefined) {
+      const routerInfo: Protocol.Network.ServiceWorkerRouterInfo = {
+        ruleIdMatched,
+        matchedSourceType: entry.response.customAsString('serviceWorkerRouterMatchedSourceType') as
+            Protocol.Network.ServiceWorkerRouterSource,
+        actualSourceType: entry.response.customAsString('serviceWorkerRouterActualSourceType') as
+            Protocol.Network.ServiceWorkerRouterSource,
+      };
+      request.serviceWorkerRouterInfo = routerInfo;
+    }
+
     request.finished = true;
   }
 
@@ -250,6 +264,8 @@ export class Importer {
       workerReady: timings.customAsNumber('workerReady') || -1,
       workerFetchStart: timings.customAsNumber('workerFetchStart') || -1,
       workerRespondWithSettled: timings.customAsNumber('workerRespondWithSettled') || -1,
+      workerRouterEvaluationStart: timings.customAsNumber('workerRouterEvaluationStart'),
+      workerCacheLookupStart: timings.customAsNumber('workerCacheLookupStart'),
 
       sendStart: timings.send >= 0 ? lastEntry : -1,
       sendEnd: accumulateTime(timings.send),

front_end/models/har/Log.test.ts

@@ -151,6 +151,13 @@ describe('HAR', () => {
           request.setResponseCacheStorageCacheName(cacheName);
           request.setServiceWorkerResponseSource(Protocol.Network.ServiceWorkerResponseSource.CacheStorage);
 
+          const serviceWorkerRouterInfo: Protocol.Network.ServiceWorkerRouterInfo = {
+            ruleIdMatched: 1,
+            matchedSourceType: Protocol.Network.ServiceWorkerRouterSource.Cache,
+            actualSourceType: Protocol.Network.ServiceWorkerRouterSource.Network,
+          };
+          request.serviceWorkerRouterInfo = serviceWorkerRouterInfo;
+
           const timingInfo: Protocol.Network.ResourceTiming = {
             requestTime: 500,
             proxyStart: 0,
@@ -171,6 +178,8 @@ describe('HAR', () => {
             pushEnd: 0,
             receiveHeadersStart: 0,
             receiveHeadersEnd: 0,
+            workerRouterEvaluationStart: 200,
+            workerCacheLookupStart: 100,
           };
           request.timing = timingInfo;
 
@@ -180,11 +189,18 @@ describe('HAR', () => {
           assert.strictEqual(entry.response._responseCacheStorageCacheName, cacheName);
           assert.strictEqual(
               entry.response._serviceWorkerResponseSource, Protocol.Network.ServiceWorkerResponseSource.CacheStorage);
+          assert.strictEqual(entry.response._serviceWorkerRouterRuleIdMatched, serviceWorkerRouterInfo.ruleIdMatched);
+          assert.strictEqual(
+              entry.response._serviceWorkerRouterMatchedSourceType, serviceWorkerRouterInfo.matchedSourceType);
+          assert.strictEqual(
+              entry.response._serviceWorkerRouterActualSourceType, serviceWorkerRouterInfo.actualSourceType);
 
           assert.strictEqual(entry.timings._workerStart, timingInfo.workerStart);
           assert.strictEqual(entry.timings._workerReady, timingInfo.workerReady);
           assert.strictEqual(entry.timings._workerFetchStart, timingInfo.workerFetchStart);
           assert.strictEqual(entry.timings._workerRespondWithSettled, timingInfo.workerRespondWithSettled);
+          assert.strictEqual(entry.timings._workerRouterEvaluationStart, timingInfo.workerRouterEvaluationStart);
+          assert.strictEqual(entry.timings._workerCacheLookupStart, timingInfo.workerCacheLookupStart);
         });
       });
     });

front_end/models/har/Log.ts

@@ -235,6 +235,7 @@ export class Entry {
 
   private buildResponse(): Response {
     const headersText = this.request.responseHeadersText;
+
     return {
       status: this.request.statusCode,
       statusText: this.request.statusText,
@@ -250,6 +251,9 @@ export class Entry {
       _fetchedViaServiceWorker: this.request.fetchedViaServiceWorker,
       _responseCacheStorageCacheName: this.request.getResponseCacheStorageCacheName(),
       _serviceWorkerResponseSource: this.request.serviceWorkerResponseSource(),
+      _serviceWorkerRouterRuleIdMatched: this.request.serviceWorkerRouterInfo?.ruleIdMatched ?? undefined,
+      _serviceWorkerRouterMatchedSourceType: this.request.serviceWorkerRouterInfo?.matchedSourceType ?? undefined,
+      _serviceWorkerRouterActualSourceType: this.request.serviceWorkerRouterInfo?.actualSourceType ?? undefined,
     };
   }
 
@@ -335,6 +339,8 @@ export class Entry {
       result._workerReady = timing.workerReady;
       result._workerFetchStart = timing.workerFetchStart;
       result._workerRespondWithSettled = timing.workerRespondWithSettled;
+      result._workerRouterEvaluationStart = timing.workerRouterEvaluationStart;
+      result._workerCacheLookupStart = timing.workerCacheLookupStart;
     } else if (this.request.responseReceivedTime === -1) {
       // Means that we don't have any more details after blocked, so attribute all to blocked.
       result.blocked = Entry.toMilliseconds(this.request.endTime - issueTime);
@@ -463,6 +469,8 @@ export interface Timing {
   _workerReady?: number;
   _workerFetchStart?: number;
   _workerRespondWithSettled?: number;
+  _workerRouterEvaluationStart?: number;
+  _workerCacheLookupStart?: number;
 }
 
 export interface Parameter {
@@ -505,6 +513,9 @@ export interface Response {
   _fetchedViaServiceWorker: boolean;
   _responseCacheStorageCacheName: string|undefined;
   _serviceWorkerResponseSource: Protocol.Network.ServiceWorkerResponseSource|undefined;
+  _serviceWorkerRouterRuleIdMatched: number|undefined;
+  _serviceWorkerRouterMatchedSourceType: string|undefined;
+  _serviceWorkerRouterActualSourceType: string|undefined;
 }
 
 export interface EntryDTO {