chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -217,11 +217,11 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     if (!snapshot) {
       this.update();
       this.populatePieChart(0, []);
-      this.selectionWindowInternal.setEnabled(false);
+      this.selectionWindowInternal.setResizeEnabled(false);
       return;
     }
 
-    this.selectionWindowInternal.setEnabled(true);
+    this.selectionWindowInternal.setResizeEnabled(true);
     this.progressBanner.classList.remove('hidden');
     this.updateImage();
 
@@ -370,8 +370,8 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
       return null;
     }
 
-    const screenLeft = (this.selectionWindowInternal.windowLeft || 0) * this.canvas.width;
-    const screenRight = (this.selectionWindowInternal.windowRight || 0) * this.canvas.width;
+    const screenLeft = (this.selectionWindowInternal.windowLeftRatio || 0) * this.canvas.width;
+    const screenRight = (this.selectionWindowInternal.windowRightRatio || 0) * this.canvas.width;
     const barLeft = Math.floor(screenLeft / this.outerBarWidth);
     const barRight = Math.floor((screenRight + this.innerBarWidth - this.barPaddingWidth / 2) / this.outerBarWidth);
     const stepLeft = Platform.NumberUtilities.clamp(barLeft * this.samplesPerBar, 0, this.log.length - 1);
@@ -409,7 +409,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     this.snapshot = null;
     this.profiles = null;
     this.selectionWindowInternal.reset();
-    this.selectionWindowInternal.setEnabled(false);
+    this.selectionWindowInternal.setResizeEnabled(false);
   }
   override wasShown(): void {
     super.wasShown();

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -11,6 +11,7 @@ import * as LighthouseReport from '../../third_party/lighthouse/report/report.js
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {
   NodeDetailsJSON, ReportJSON, RunnerResultArtifacts, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
@@ -92,6 +93,10 @@ export class LighthouseReportRenderer {
     // @ts-ignore Expose Artifacts on DOM for e2e tests
     reportEl._lighthouseArtifactsForTesting = artifacts;
 
+    // This should block the report rendering as we need visual logging ready
+    // before the user starts interacting with the report.
+    LighthouseReportRenderer.installVisualLogging(reportEl);
+
     // Linkifying requires the target be loaded. Do not block the report
     // from rendering, as this is just an embellishment and the main target
     // could take awhile to load.
@@ -177,4 +182,45 @@ export class LighthouseReportRenderer {
       origHTMLElement.appendChild(element);
     }
   }
+
+  static installVisualLogging(el: Element): void {
+    for (const auditEl of el.getElementsByClassName('lh-audit')) {
+      const summaryEl = auditEl.querySelector('summary');
+      if (!summaryEl) {
+        continue;
+      }
+
+      const id = auditEl.id;
+      if (!id) {
+        continue;
+      }
+
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+
+      let state: string|undefined;
+      for (const className of auditEl.classList) {
+        switch (className) {
+          case 'lh-audit--pass':
+            state = 'pass';
+            break;
+          case 'lh-audit--average':
+            state = 'average';
+            break;
+          case 'lh-audit--fail':
+            state = 'fail';
+            break;
+          case 'lh-audit--informative':
+            state = 'informative';
+            break;
+        }
+      }
+
+      if (!state) {
+        continue;
+      }
+
+      summaryEl.setAttribute(
+          'jslog', `${VisualLogging.expand(`lighthouse.audit-summary.${state}`).track({click: true})}`);
+    }
+  }
 }

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -5,6 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -14,11 +16,11 @@ const UIStrings = {
   /**
    *@description Text in Throttling Settings Tab of the Network panel
    */
-  networkThrottlingProfiles: 'Network Throttling Profiles',
+  networkThrottlingProfiles: 'Network throttling profiles',
   /**
    *@description Text of add conditions button in Throttling Settings Tab of the Network panel
    */
-  addCustomProfile: 'Add custom profile...',
+  addCustomProfile: 'Add profile',
   /**
    *@description A value in milliseconds
    *@example {3} PH1
@@ -129,26 +131,33 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('throttling-conditions')}`);
 
-    const header = this.contentElement.createChild('div', 'header');
-    header.textContent = i18nString(UIStrings.networkThrottlingProfiles);
-    UI.ARIAUtils.markAsHeading(header, 1);
-
-    const addButton =
-        UI.UIUtils.createTextButton(i18nString(UIStrings.addCustomProfile), this.addButtonClicked.bind(this), {
-          className: 'add-conditions-button',
-          jslogContext: 'network.add-conditions',
-        });
-    this.contentElement.appendChild(addButton);
-
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
+
+    const addButton = new Buttons.Button.Button();
+    addButton.classList.add('add-conditions-button');
+    addButton.data = {
+      variant: Buttons.Button.Variant.OUTLINED,
+      iconName: 'plus',
+      jslogContext: 'network.add-conditions',
+    };
+    addButton.textContent = i18nString(UIStrings.addCustomProfile);
+    addButton.addEventListener('click', () => this.addButtonClicked());
+
+    const listContainer = settingsContent.createChild('div');
+    const card = new Cards.Card.Card();
+    settingsContent.appendChild(card);
+    card.data = {
+      heading: i18nString(UIStrings.networkThrottlingProfiles),
+      content: [listContainer, addButton],
+    };
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.element.classList.add('conditions-list');
-
-    this.list.show(this.contentElement);
+    this.list.show(listContainer);
 
     this.customSetting = Common.Settings.Settings.instance().moduleSetting('custom-network-conditions');
     this.customSetting.addChangeListener(this.conditionsUpdated, this);
-
-    this.setDefaultFocusedElement(addButton);
   }
 
   override wasShown(): void {

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -4,27 +4,13 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
 .add-conditions-button {
-  flex: none;
-  margin: 10px 5px;
-  min-width: 140px;
-  align-self: flex-start;
+  margin-bottom: var(--sys-size-5);
+  border: none;
 }
 
 .conditions-list {
-  min-width: 640px;
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -38,7 +24,9 @@
 }
 
 .conditions-list-text {
-  flex: 0 0 80px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 0 0 50px;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -57,12 +45,15 @@
 .conditions-list-title {
   text-align: start;
   display: flex;
-  flex: auto;
+  flex-grow: 1;
   align-items: flex-start;
 }
 
 .conditions-list-title-text {
   flex: auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .conditions-list-separator {
@@ -110,3 +101,18 @@
 .editor-buttons {
   margin-top: 10px;
 }
+
+.settings-card-container-wrapper {
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

package/front_end/panels/network/BinaryResourceView.ts

@@ -84,7 +84,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
       new BinaryViewObject(
           'base64', i18n.i18n.lockedString('Base64'), i18nString(UIStrings.copiedAsBase),
           this.binaryResourceViewFactory.createBase64View.bind(this.binaryResourceViewFactory),
-          () => Promise.resolve(this.binaryResourceViewFactory.base64())),
+          this.binaryResourceViewFactory.base64.bind(this.binaryResourceViewFactory)),
       new BinaryViewObject(
           'hex', i18nString(UIStrings.hexViewer), i18nString(UIStrings.copiedAsHex),
           this.binaryResourceViewFactory.createHexView.bind(this.binaryResourceViewFactory),
@@ -105,7 +105,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
 
     const copyButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyToClipboard), 'copy');
     copyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      void this.copySelectedViewToClipboard();
+      this.copySelectedViewToClipboard();
     }, this);
     this.toolbar.appendToolbarItem(copyButton);
 
@@ -129,12 +129,12 @@ export class BinaryResourceView extends UI.Widget.VBox {
     return binaryViewObject || null;
   }
 
-  private async copySelectedViewToClipboard(): Promise<void> {
+  private copySelectedViewToClipboard(): void {
     const viewObject = this.getCurrentViewObject();
     if (!viewObject) {
       return;
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(await viewObject.content());
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(viewObject.content());
     this.copiedText.setText(viewObject.copiedMessage);
     this.copiedText.element.classList.remove('fadeout');
     function addFadeoutClass(this: BinaryResourceView): void {
@@ -208,13 +208,12 @@ export class BinaryViewObject {
   type: string;
   label: string;
   copiedMessage: string;
-  content: () => Promise<string>;
+  content: () => string;
   private createViewFn: () => UI.Widget.Widget;
   private view: UI.Widget.Widget|null;
 
   constructor(
-      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget,
-      content: () => Promise<string>) {
+      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget, content: () => string) {
     this.type = type;
     this.label = label;
     this.copiedMessage = copiedMessage;

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -100,7 +100,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setStriped(true);
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setRowContextMenuCallback(this.onRowContextMenu.bind(this));
     this.dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
     this.sortItems();

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1406,7 +1406,7 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   private renderSizeCell(cell: HTMLElement): void {
-    const resourceSize = Platform.NumberUtilities.bytesToString(this.requestInternal.resourceSize);
+    const resourceSize = i18n.ByteUtilities.bytesToString(this.requestInternal.resourceSize);
 
     if (this.requestInternal.cachedInMemory()) {
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.memoryCache));
@@ -1419,7 +1419,7 @@ export class NetworkRequestNode extends NetworkNode {
       UI.UIUtils.createTextChild(cell, i18n.i18n.lockedString('(ServiceWorker router)'));
       let tooltipText;
       if (serviceWorkerRouterInfo.matchedSourceType === Protocol.Network.ServiceWorkerRouterSource.Network) {
-        const transferSize = Platform.NumberUtilities.bytesToString(this.requestInternal.transferSize);
+        const transferSize = i18n.ByteUtilities.bytesToString(this.requestInternal.transferSize);
         tooltipText = i18nString(
             UIStrings.matchedToServiceWorkerRouterWithNetworkSource,
             {PH1: ruleIdMatched, PH2: transferSize, PH3: resourceSize});
@@ -1449,7 +1449,7 @@ export class NetworkRequestNode extends NetworkNode {
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromDiskCacheResourceSizeS, {PH1: resourceSize}));
       cell.classList.add('network-dim-cell');
     } else {
-      const transferSize = Platform.NumberUtilities.bytesToString(this.requestInternal.transferSize);
+      const transferSize = i18n.ByteUtilities.bytesToString(this.requestInternal.transferSize);
       UI.UIUtils.createTextChild(cell, transferSize);
       UI.Tooltip.Tooltip.install(cell, `${transferSize} transferred over network, resource size: ${resourceSize}`);
     }

package/front_end/panels/network/NetworkLogView.ts

@@ -1144,7 +1144,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         this.handleContextMenuForRequest(contextMenu, request);
       }
     });
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setName('network-log');
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.element.classList.add('network-log-grid');
@@ -1272,26 +1272,26 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
           i18nString(UIStrings.sSTransferred, {
-            PH1: Platform.NumberUtilities.bytesToString(selectedTransferSize),
-            PH2: Platform.NumberUtilities.bytesToString(transferSize),
+            PH1: i18n.ByteUtilities.bytesToString(selectedTransferSize),
+            PH2: i18n.ByteUtilities.bytesToString(transferSize),
           }),
           i18nString(UIStrings.sBSBTransferredOverNetwork, {PH1: selectedTransferSize, PH2: transferSize}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
           i18nString(UIStrings.sSResources, {
-            PH1: Platform.NumberUtilities.bytesToString(selectedResourceSize),
-            PH2: Platform.NumberUtilities.bytesToString(resourceSize),
+            PH1: i18n.ByteUtilities.bytesToString(selectedResourceSize),
+            PH2: i18n.ByteUtilities.bytesToString(resourceSize),
           }),
           i18nString(UIStrings.sBSBResourcesLoadedByThePage, {PH1: selectedResourceSize, PH2: resourceSize}));
     } else {
       appendChunk(i18nString(UIStrings.sRequests, {PH1: nodeCount}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
-          i18nString(UIStrings.sTransferred, {PH1: Platform.NumberUtilities.bytesToString(transferSize)}),
+          i18nString(UIStrings.sTransferred, {PH1: i18n.ByteUtilities.bytesToString(transferSize)}),
           i18nString(UIStrings.sBTransferredOverNetwork, {PH1: transferSize}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
-          i18nString(UIStrings.sResources, {PH1: Platform.NumberUtilities.bytesToString(resourceSize)}),
+          i18nString(UIStrings.sResources, {PH1: i18n.ByteUtilities.bytesToString(resourceSize)}),
           i18nString(UIStrings.sBResourcesLoadedByThePage, {PH1: resourceSize}));
     }
 
@@ -1595,7 +1595,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     this.dataGrid.rootNode().removeChildren();
     this.updateSummaryBar();
-    this.dataGrid.setStickToBottom(true);
     this.scheduleRefresh();
   }
 

package/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');
+  });
 });

package/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 {

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -190,7 +190,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setCellClass('websocket-frame-view-td');
     this.timeComparator =
         (resourceWebSocketFrameNodeTimeComparator as
@@ -422,7 +422,7 @@ export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.Sortab
       description = dataText;
 
     } else if (frame.opCode === OpCodes.BINARY_FRAME) {
-      length = Platform.NumberUtilities.bytesToString(Platform.StringUtilities.base64ToSize(frame.text));
+      length = i18n.ByteUtilities.bytesToString(Platform.StringUtilities.base64ToSize(frame.text));
       description = opCodeDescriptions[frame.opCode]();
 
     } else {

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

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -658,7 +658,7 @@ export class MetricIndicator {
       case Format.PERCENT:
         return percentFormatter.format(value);
       case Format.BYTES:
-        return Platform.NumberUtilities.bytesToString(value);
+        return i18n.ByteUtilities.bytesToString(value);
       default:
         return numberFormatter.format(value);
     }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -164,7 +164,7 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
-        i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
+        i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(event.data.size)}));
     this.setSelectionRange(minId, maxId);
   }
 
@@ -688,8 +688,8 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
       entryInfo.push({title, value});
     }
     pushEntryInfoRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
-    pushEntryInfoRow(i18nString(UIStrings.selfSize), Platform.NumberUtilities.bytesToString(node.self));
-    pushEntryInfoRow(i18nString(UIStrings.totalSize), Platform.NumberUtilities.bytesToString(node.total));
+    pushEntryInfoRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
+    pushEntryInfoRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
     const linkifier = new Components.Linkifier.Linkifier();
     const link = linkifier.maybeLinkifyConsoleCallFrame(
         this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -599,7 +599,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
-        i18nString(UIStrings.selectedSizeS, {PH1: Platform.NumberUtilities.bytesToString(event.data.size)}));
+        i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(event.data.size)}));
     if (this.constructorsDataGrid.snapshot) {
       this.constructorsDataGrid.setSelectionRange(minId, maxId);
     }
@@ -1746,7 +1746,7 @@ export class HeapProfileHeader extends ProfileHeader {
     if (!this.snapshotProxy) {
       return;
     }
-    this.updateStatus(Platform.NumberUtilities.bytesToString(this.snapshotProxy.totalSize), false);
+    this.updateStatus(i18n.ByteUtilities.bytesToString(this.snapshotProxy.totalSize), false);
   }
 
   transferChunk(chunk: string): void {