chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/issues/IssueAggregator.test.ts

@@ -358,3 +358,53 @@ describeWithMockConnection('IssueAggregator', () => {
     assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
   });
 });
+
+describeWithMockConnection('IssueAggregator', () => {
+  function getTestMitigationCookieIssue(warningReason: Protocol.Audits.CookieWarningReason): IssuesManager.Issue.Issue {
+    return IssuesManager.IssuesManager.createIssuesFromProtocolIssue(model, {
+      code: Protocol.Audits.InspectorIssueCode.CookieIssue,
+      details: {
+        cookieIssueDetails: {
+          cookie: {
+            name: 'test',
+            path: '/',
+            domain: 'a.test',
+          },
+          cookieExclusionReasons: [],
+          cookieWarningReasons: [warningReason],
+          operation: Protocol.Audits.CookieOperation.ReadCookie,
+          cookieUrl: 'a.test',
+        },
+      },
+    })[0];
+  }
+
+  let issuesManager: IssuesManager.IssuesManager.IssuesManager;
+  let model: SDK.IssuesModel.IssuesModel;
+
+  beforeEach(() => {
+    const showThirdPartyIssuesSetting = createFakeSetting('third party flag', true);
+    issuesManager = new IssuesManager.IssuesManager.IssuesManager(showThirdPartyIssuesSetting);
+    const target = createTarget();
+    model = target.model(SDK.IssuesModel.IssuesModel) as SDK.IssuesModel.IssuesModel;
+  });
+
+  it('should not aggregate mitigation related cookie issues', async () => {
+    // Preexisting issues should not be added
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    const aggregator = new Issues.IssueAggregator.IssueAggregator(issuesManager);
+
+    // Issues added after aggregator creation should not exist either
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    assert.strictEqual(aggregator.numberOfAggregatedIssues(), 0);
+    assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
+  });
+});

package/front_end/panels/issues/IssueAggregator.ts

@@ -268,15 +268,6 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
-    const excludeFromAggregate = [
-      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
-      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
-    ];
-
-    if (excludeFromAggregate.some(exclude => event.data.issue.code().includes(exclude))) {
-      return;
-    }
-
     this.#aggregateIssue(event.data.issue);
   }
 
@@ -289,7 +280,16 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.FULL_UPDATE_REQUIRED);
   }
 
-  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue {
+  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue|undefined {
+    const excludeFromAggregate = [
+      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
+      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
+    ];
+
+    if (excludeFromAggregate.some(exclude => issue.code().includes(exclude))) {
+      return;
+    }
+
     const map = issue.isHidden() ? this.#hiddenAggregatedIssuesByKey : this.#aggregatedIssuesByKey;
     const aggregatedIssue = this.#aggregateIssueByStatus(map, issue);
     this.dispatchEventToListeners(Events.AGGREGATED_ISSUE_UPDATED, aggregatedIssue);

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -43,7 +43,7 @@ export class HideIssuesMenu extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
   }
 
-  onMenuOpen(event: MouseEvent): void {
+  onMenuOpen(event: Event): void {
     event.stopPropagation();
     const buttonElement = this.#shadow.querySelector('devtools-button');
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
@@ -55,14 +55,6 @@ export class HideIssuesMenu extends HTMLElement {
     void contextMenu.show();
   }
 
-  onKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === 'Space') {
-      // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
-      // so that these get turned into 'click' events properly.
-      event.stopImmediatePropagation();
-    }
-  }
-
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -71,8 +63,7 @@ export class HideIssuesMenu extends HTMLElement {
       .data=${{variant: Buttons.Button.Variant.ICON,iconName: 'dots-vertical', title: i18nString(UIStrings.tooltipTitle)} as Buttons.Button.ButtonData}
       .jslogContext=${'hide-issues'}
       class="hide-issues-menu-btn"
-      @click=${this.onMenuOpen}
-      @keydown=${this.onKeydown}></devtools-button>
+      @click=${this.onMenuOpen}></devtools-button>
     `, this.#shadow, {host: this});
   }
 }

package/front_end/panels/issues/issuesTree.css

@@ -176,7 +176,7 @@ p {
   border-left: 2px solid var(--issue-color-blue);
 }
 
-.tree-outline .issue-body li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+.tree-outline .issue-body li:hover:not(:has(dt-checkbox)) .selection {
   background-color: unset;
 }
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -30,7 +30,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -298,7 +297,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
         i18nString(UIStrings.nearestLayerShiftingContaining), constraint.nearestLayerShiftingContainingBlock());
   }
 
-  update(): void {
+  override update(): void {
     const layer = this.selection && this.selection.layer();
     if (!layer) {
       this.tableElement.remove();
@@ -316,7 +315,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
       this.paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount());
     }
     this.paintCountCell.textContent = String(layer.paintCount());
-    this.memoryEstimateCell.textContent = Platform.NumberUtilities.bytesToString(layer.gpuMemoryUsage());
+    this.memoryEstimateCell.textContent = i18n.ByteUtilities.bytesToString(layer.gpuMemoryUsage());
     void layer.requestCompositingReasons().then(this.updateCompositingReasons.bind(this));
     this.scrollRectsCell.removeChildren();
     layer.scrollRects().forEach(this.createScrollRectElement.bind(this));

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -738,7 +738,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     }
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       this.needsUpdate = true;
       return;

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();
 
@@ -242,7 +242,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  private update(): void {
+  override update(): void {
     this.canvas.width = this.canvasContainer.clientWidth * window.devicePixelRatio;
     this.canvas.height = this.canvasContainer.clientHeight * window.devicePixelRatio;
     this.samplesPerBar = 0;
@@ -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/layers/LayersPanel.ts

@@ -153,7 +153,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     void this.updateThrottler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     if (this.model) {
       this.layerViewHost.setLayerTree(this.model.layerTree());
       const resourceModel = this.model.target().model(SDK.ResourceTreeModel.ResourceTreeModel);

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/lighthouse/lighthouseStartView.css

@@ -112,7 +112,7 @@ input[type="radio"] {
     margin-bottom: 0;
   }
 
-  &:not(:has(span[is="dt-checkbox"])) {
+  &:not(:has(dt-checkbox)) {
     margin-bottom: 6px;
   }
 }

package/front_end/panels/media/TickingFlameChart.ts

@@ -493,7 +493,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
     return false;
   }
 
-  prepareHighlightedEntryInfo(index: number): Element|null {
+  preparePopoverElement(index: number): Element|null {
     const element = document.createElement('div');
     (this.eventMap.get(index) as Event).decorate(element);
     return element;

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', 'throttling-conditions-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/BlockedURLsPane.ts

@@ -212,7 +212,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     return editor;
   }
 
-  update(): void {
+  override update(): void {
     const enabled = this.manager.blockingEnabled();
     this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
 

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}`);
     }
@@ -1489,6 +1489,7 @@ export class NetworkRequestNode extends NetworkNode {
       const aiButtonContainer = document.createElement('span');
       aiButtonContainer.classList.add('ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {

package/front_end/panels/network/NetworkLogView.test.ts

@@ -880,7 +880,7 @@ function clickCheckbox(checkbox: HTMLInputElement) {
 
 function getCheckbox(filterBar: UI.FilterBar.FilterBar, title: string) {
   const checkbox =
-      filterBar.element.querySelector(`[title="${title}"] span`)?.shadowRoot?.querySelector('input') || null;
+      filterBar.element.querySelector(`[title="${title}"] dt-checkbox`)?.shadowRoot?.querySelector('input') || null;
   assert.instanceOf(checkbox, HTMLInputElement);
   return checkbox;
 }

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();
   }