Include basic end-to-end request duration for developer resources

[email protected]

Bug: None
Change-Id: I90fce3be9daf1cb2f066c2190795f20ad063aea8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6304711
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: szuend

front_end/core/sdk/PageResourceLoader.test.ts

@@ -66,6 +66,7 @@ describeWithLocale('PageResourceLoader', () => {
       success: true,
       initiator,
       size: null,
+      duration: null,
     };
 
     loader.resourceLoadedThroughExtension(extensionResource);

front_end/core/sdk/PageResourceLoader.ts

@@ -56,6 +56,7 @@ export interface PageResource {
   initiator: PageResourceLoadInitiator;
   url: Platform.DevToolsPath.UrlString;
   size: number|null;
+  duration: number|null;
 }
 
 // Used for revealing a resource.
@@ -255,9 +256,11 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       throw new Error('Invalid initiator');
     }
     const key = PageResourceLoader.makeKey(url, initiator);
-    const pageResource: PageResource = {success: null, size: null, errorMessage: undefined, url, initiator};
+    const pageResource:
+        PageResource = {success: null, size: null, duration: null, errorMessage: undefined, url, initiator};
     this.#pageResources.set(key, pageResource);
     this.dispatchEventToListeners(Events.UPDATE);
+    const startTime = performance.now();
     try {
       await this.acquireLoadSlot(initiator.target);
       const resultPromise = this.dispatchLoad(url, initiator);
@@ -278,6 +281,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       }
       throw e;
     } finally {
+      pageResource.duration = performance.now() - startTime;
       this.releaseLoadSlot(initiator.target);
       this.dispatchEventToListeners(Events.UPDATE);
     }

front_end/models/extensions/ExtensionServer.test.ts

@@ -912,6 +912,7 @@ describeWithDevtoolsExtension('Language Extension API', {}, context => {
       initiator: expectedInitiator,
       success: true,
       size: 10,
+      duration: null,
       errorMessage: undefined,
     };
     assert.deepEqual(resource, expectedResource);

front_end/models/extensions/ExtensionServer.ts

@@ -443,6 +443,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       errorMessage: status.errorMessage,
       success: status.success ?? null,
       size: status.size ?? null,
+      duration: null,
     };
     SDK.PageResourceLoader.PageResourceLoader.instance().resourceLoadedThroughExtension(pageResource);
     return this.status.OK();

front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -32,6 +32,10 @@ const UIStrings = {
    *@description Text in Coverage List View of the Coverage tab
    */
   totalBytes: 'Total Bytes',
+  /**
+   * @description Column header. The column contains the time it took to load a resource.
+   */
+  duration: 'Duration',
   /**
    *@description Text for errors
    */
@@ -112,6 +116,9 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
                   <th id="size" sortable fixed width="80px" align="right">
                     ${i18nString(UIStrings.totalBytes)}
                   </th>
+                  <th id="duration" sortable fixed width="80px" align="right">
+                    ${i18nString(UIStrings.duration)}
+                  </th>
                   <th id="error-message" sortable width="200px">
                     ${i18nString(UIStrings.error)}
                   </th>
@@ -136,6 +143,9 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
                     <td aria-label=${item.size !== null ? i18nString(UIStrings.sBytes, {n: item.size}) : nothing}
                         data-value=${item.size ?? nothing}>${
                       item.size !== null ?  html`<span>${withThousandsSeparator(item.size)}</span>` : ''}</td>
+                    <td aria-label=${item.duration !== null ? i18n.TimeUtilities.millisToString(item.duration) : nothing}
+                        data-value=${item.duration ?? nothing}>${
+                        item.duration !== null ? html`<span>${i18n.TimeUtilities.millisToString(item.duration)}</span>` : ''}</td>
                     <td class="error-message">${(() => {
                         const cell = document.createElement('span');
                         if (item.errorMessage) {

front_end/panels/developer_resources/DeveloperResourcesView.test.ts

@@ -15,7 +15,7 @@ describeWithEnvironment('DeveloperResourcesView', () => {
     const extensionId = 'extensionId';
     const initiator = {target: null, frameId: null, extensionId, initiatorUrl: urlString`${extensionId}`};
 
-    const commonInfo = {success: true, initiator, size: 10};
+    const commonInfo = {success: true, initiator, size: 10, duration: 20};
     const resource1 = {url: urlString`http://www.test.com/test.js`, ...commonInfo};
     const resource2 = {url: urlString`http://www.test.com/test2.js`, ...commonInfo};
     const resource3 = {url: urlString`http://www.test.com/test3.js`, ...commonInfo};

test/e2e/extensions/debugger-language-plugins_test.ts

@@ -672,6 +672,7 @@ describe('The Debugger Language Plugins', () => {
       dwoUrl,
       initiatorUrl,
       '',
+      '',
       '404',
       '',
     ]);