chrome-devtools-frontend 1.0.1665921 → 1.0.1667564

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -753,7 +753,8 @@ export type ViewFunction = typeof DEFAULT_VIEW;
 
 export class ConsoleInsight extends UI.Widget.Widget {
   static async create(promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient): Promise<Lit.LitTemplate> {
-    const aidaPreconditions = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const aidaPreconditions = Host.AidaClient.HostConfigTracker.instance().aidaAvailability ??
+        await Host.AidaClient.AidaClient.checkAccessPreconditions();
     return html`<devtools-widget class="devtools-console-insight" ${
         widget(element => new ConsoleInsight(promptBuilder, aidaClient, aidaPreconditions, element))}>
     </devtools-widget>`;
@@ -780,7 +781,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
   #aidaPreconditions: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   #marked: Marked.Marked.Marked;
 
   constructor(
@@ -885,7 +887,10 @@ export class ConsoleInsight extends UI.Widget.Widget {
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
     // If AIDA availability has changed while the component was disconnected, we need to update.
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
     // The setting might have been turned on/off while the component was disconnected.
     // Update the state, unless the current state is already terminal (`INSIGHT` or `ERROR`).
     if (this.#state.type !== State.INSIGHT && this.#state.type !== State.ERROR) {
@@ -901,15 +906,18 @@ export class ConsoleInsight extends UI.Widget.Widget {
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaPreconditions) {
-      this.#aidaPreconditions = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaPreconditions) {
+      this.#aidaPreconditions = aidaAvailability;
       this.#state = this.#getStateFromAidaAvailability();
       void this.#generateInsightIfNeeded();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #onConsoleInsightsSettingChanged(): void {
     if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true) {
       this.#getOnboardingCompletedSetting().set(true);

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -27,7 +27,7 @@ const UIStrings = {
       'There may be stored data affecting loading performance in this location: {PH1}. Audit this page in an incognito window to stop those resources from affecting your scores.',
   /**
    * @description Text when stored data in multiple locations may affect Lighthouse run.
-   * @example {IndexedDB, WebSQL} PH1
+   * @example {IndexedDB} PH1
    */
   thereMayBeStoredDataAffectingLoadingPlural:
       'There may be stored data affecting loading performance in these locations: {PH1}. Audit this page in an incognito window to stop those resources from affecting your scores.',
@@ -48,10 +48,6 @@ const UIStrings = {
    * @description Text in sidebar of the Application panel.
    */
   indexeddb: 'IndexedDB',
-  /**
-   * @description Text in sidebar of the Application panel.
-   */
-  webSql: 'Web SQL',
   /**
    * @description Text of checkbox to include running the performance audits in Lighthouse.
    */
@@ -713,7 +709,6 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
 const STORAGE_TYPE_NAMES = new Map([
   [Protocol.Storage.StorageType.Local_storage, i18nLazyString(UIStrings.localStorage)],
   [Protocol.Storage.StorageType.Indexeddb, i18nLazyString(UIStrings.indexeddb)],
-  [Protocol.Storage.StorageType.Websql, i18nLazyString(UIStrings.webSql)],
 ]);
 
 let presets: LighthouseModel.RunTypes.Preset[]|null = null;

package/front_end/panels/network/NetworkLogView.ts

@@ -467,9 +467,9 @@ const UIStrings = {
    */
   blockRequestDomain: 'Block request domain',
   /**
-   * @description Text to replay an XHR request
+   * @description Text to resend a network request
    */
-  replayXhr: 'Replay XHR',
+  resend: 'Resend',
   /**
    * @description Text in Network Log View of the Network panel
    */
@@ -734,12 +734,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return !filter(request);
   }
 
-  private static requestPathFilter(regex: RegExp|null, request: SDK.NetworkRequest.NetworkRequest): boolean {
+  private static requestHostAndPathFilter(regex: RegExp|null, request: SDK.NetworkRequest.NetworkRequest): boolean {
     if (!regex) {
       return false;
     }
-
-    return regex.test(request.path() + '/' + request.name());
+    return regex.test(request.parsedURL.urlWithoutScheme());
   }
 
   private static subdomains(domain: string): string[] {
@@ -1186,9 +1185,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           return;
         }
 
-        if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
+        if (SDK.NetworkManager.NetworkManager.canResendRequest(request)) {
           SDK.NetworkManager.NetworkManager.replayRequest(request);
-          void VisualLogging.logKeyDown(this.dataGrid.selectedNode.element(), event, 'replay-xhr');
+          void VisualLogging.logKeyDown(this.dataGrid.selectedNode.element(), event, 'resend');
         }
       }
     });
@@ -1975,10 +1974,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
             {jslogContext: 'throttle-request-domain'});
       }
 
-      if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.replayXhr), SDK.NetworkManager.NetworkManager.replayRequest.bind(null, request),
-            {jslogContext: 'replay-xhr'});
+      if (SDK.NetworkManager.NetworkManager.canResendRequest(request)) {
+        contextMenu.debugSection().appendItem(i18nString(UIStrings.resend),
+                                              SDK.NetworkManager.NetworkManager.replayRequest.bind(null, request),
+                                              {jslogContext: 'resend'});
       }
     }
   }
@@ -2169,13 +2168,13 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       if (key) {
         const defaultText = Platform.StringUtilities.escapeForRegExp(key + ':' + text);
         filter = this.createSpecialFilter((key as NetworkForward.UIFilter.FilterType), text) ||
-            NetworkLogView.requestPathFilter.bind(null, new RegExp(defaultText, 'i'));
+            NetworkLogView.requestHostAndPathFilter.bind(null, new RegExp(defaultText, 'i'));
       } else if (descriptor.regex) {
-        filter = NetworkLogView.requestPathFilter.bind(null, (regex as RegExp));
+        filter = NetworkLogView.requestHostAndPathFilter.bind(null, (regex as RegExp));
       } else if (this.isValidUrl(text)) {
         filter = NetworkLogView.requestUrlFilter.bind(null, text);
       } else {
-        filter = NetworkLogView.requestPathFilter.bind(
+        filter = NetworkLogView.requestHostAndPathFilter.bind(
             null, new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i'));
       }
       if ((descriptor.negative && !invert) || (!descriptor.negative && invert)) {

package/front_end/panels/screencast/ScreencastApp.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Foundation from '../../foundation/foundation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ScreencastView} from './ScreencastView.js';
@@ -28,7 +29,9 @@ export class ScreencastApp implements UI.App.App,
   private screenCaptureModel?: SDK.ScreenCaptureModel.ScreenCaptureModel;
   private screencastView?: ScreencastView;
   rootView?: UI.RootView.RootView;
-  constructor() {
+  readonly #universe: Foundation.Universe.Universe;
+  constructor(universe: Foundation.Universe.Universe) {
+    this.#universe = universe;
     this.enabledSetting = Common.Settings.Settings.instance().createSetting('screencast-enabled', true);
     this.toggleButton = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleScreencast), 'devices');
     this.toggleButton.setToggled(this.enabledSetting.get());
@@ -37,15 +40,18 @@ export class ScreencastApp implements UI.App.App,
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.ScreenCaptureModel.ScreenCaptureModel, this);
   }
 
-  static instance(): ScreencastApp {
+  static instance(universe?: Foundation.Universe.Universe): ScreencastApp {
     if (!appInstance) {
-      appInstance = new ScreencastApp();
+      if (!universe) {
+        throw new Error('ScreencastApp.instance() requires a Universe on initial instantiation');
+      }
+      appInstance = new ScreencastApp(universe);
     }
     return appInstance;
   }
 
   presentUI(document: Document): void {
-    this.rootView = new UI.RootView.RootView();
+    this.rootView = new UI.RootView.RootView(this.#universe);
     this.rootView.registerRequiredCSS(UI.inspectorCommonStyles);
 
     this.rootSplitWidget =
@@ -137,7 +143,7 @@ export class ScreencastAppProvider implements UI.AppProvider.AppProvider {
     return screencastAppProviderInstance;
   }
 
-  createApp(): UI.App.App {
-    return ScreencastApp.instance();
+  createApp(universe: Foundation.Universe.Universe): UI.App.App {
+    return ScreencastApp.instance(universe);
   }
 }

package/front_end/panels/screencast/ScreencastView.ts

@@ -179,6 +179,18 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.stopCasting();
   }
 
+  override onDetach(): void {
+    this.navigationProgressBar?.dispose();
+    SDK.TargetManager.TargetManager.instance().removeEventListener(SDK.TargetManager.Events.SUSPEND_STATE_CHANGED,
+                                                                   this.onSuspendStateChange, this);
+    if (this.resourceTreeModel) {
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                 this.requestNavigationHistoryEvent, this);
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,
+                                                 this.requestNavigationHistoryEvent, this);
+    }
+  }
+
   private async startCasting(): Promise<void> {
     if (SDK.TargetManager.TargetManager.instance().allTargetsSuspended()) {
       return;
@@ -629,11 +641,9 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
   }
 
   private createCheckerboardPattern(context: CanvasRenderingContext2D): CanvasPattern|null {
-    const pattern = document.createElement('canvas');
     const size = 32;
-    pattern.width = size * 2;
-    pattern.height = size * 2;
-    const pctx = pattern.getContext('2d', {willReadFrequently: true}) as CanvasRenderingContext2D;
+    const pattern = new OffscreenCanvas(size * 2, size * 2);
+    const pctx = pattern.getContext('2d', {willReadFrequently: true}) as OffscreenCanvasRenderingContext2D;
 
     pctx.fillStyle = 'var(--sys-color-neutral-outline)';
     pctx.fillRect(0, 0, size * 2, size * 2);
@@ -787,6 +797,8 @@ export const HTTP_REGEX = /^http:\/\/(.+)/;
 export const SCHEME_REGEX = /^(https?|about|chrome):/;
 
 export class ProgressTracker {
+  private readonly resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null;
+  private readonly networkManager: SDK.NetworkManager.NetworkManager|null;
   private element: HTMLElement;
   private requestIds: Map<string, SDK.NetworkRequest.NetworkRequest>|null;
   private startedRequests: number;
@@ -797,14 +809,16 @@ export class ProgressTracker {
       resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null,
       networkManager: SDK.NetworkManager.NetworkManager|null, element: HTMLElement) {
     this.element = element;
-    if (resourceTreeModel) {
-      resourceTreeModel.addEventListener(
-          SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.onPrimaryPageChanged, this);
-      resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.Load, this.onLoad, this);
+    this.resourceTreeModel = resourceTreeModel;
+    this.networkManager = networkManager;
+    if (this.resourceTreeModel) {
+      this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                              this.onPrimaryPageChanged, this);
+      this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.Load, this.onLoad, this);
     }
-    if (networkManager) {
-      networkManager.addEventListener(SDK.NetworkManager.Events.RequestStarted, this.onRequestStarted, this);
-      networkManager.addEventListener(SDK.NetworkManager.Events.RequestFinished, this.onRequestFinished, this);
+    if (this.networkManager) {
+      this.networkManager.addEventListener(SDK.NetworkManager.Events.RequestStarted, this.onRequestStarted, this);
+      this.networkManager.addEventListener(SDK.NetworkManager.Events.RequestFinished, this.onRequestFinished, this);
     }
     this.requestIds = null;
     this.startedRequests = 0;
@@ -812,6 +826,18 @@ export class ProgressTracker {
     this.maxDisplayedProgress = 0;
   }
 
+  dispose(): void {
+    if (this.resourceTreeModel) {
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+                                                 this.onPrimaryPageChanged, this);
+      this.resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.Load, this.onLoad, this);
+    }
+    if (this.networkManager) {
+      this.networkManager.removeEventListener(SDK.NetworkManager.Events.RequestStarted, this.onRequestStarted, this);
+      this.networkManager.removeEventListener(SDK.NetworkManager.Events.RequestFinished, this.onRequestFinished, this);
+    }
+  }
+
   private onPrimaryPageChanged(): void {
     this.requestIds = new Map();
     this.startedRequests = 0;

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+* {
+  font-family: var(--default-font-family);
+}
+
 .add-locations-button {
   margin-bottom: var(--sys-size-5);
   border: none;

package/front_end/panels/settings/AISettingsTab.ts

@@ -438,7 +438,8 @@ export class AISettingsTab extends UI.Widget.VBox {
   #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
   #aiCodeCompletionSetting?: Common.Settings.Setting<boolean>;
   #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
   // Setting to parameters needed to display it in the UI.
   // To display a a setting, it needs to be added to this map.
   #settingToParams = new Map<Common.Settings.Setting<boolean>, AiSettingParams>();
@@ -514,7 +515,10 @@ export class AISettingsTab extends UI.Widget.VBox {
     super.wasShown();
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
     this.requestUpdate();
   }
 
@@ -657,14 +661,17 @@ export class AISettingsTab extends UI.Widget.VBox {
     }
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = aidaAvailability;
       this.requestUpdate();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #getAiAssistanceSettingDescription(): Platform.UIString.LocalizedString {
     const {hostConfig} = Root.Runtime;
     if (hostConfig.devToolsAiAssistanceV2?.enabled) {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -2287,16 +2287,27 @@ export function computePopoverHighlightRange(state: CodeMirror.EditorState, mime
   }
 }
 
-function containsSideEffects(doc: CodeMirror.Text, root: CodeMirror.SyntaxNode): boolean {
+export function containsSideEffects(doc: CodeMirror.Text, root: CodeMirror.SyntaxNode): boolean {
   let containsSideEffects = false;
   root.toTree().iterate({
     enter(node: CodeMirror.SyntaxNode): boolean {
       switch (node.name) {
         case 'AssignmentExpression':
-        case 'CallExpression': {
+        case 'CallExpression':
+        case 'NewExpression':
+        case 'TaggedTemplateExpression':
+        case 'DynamicImport': {
           containsSideEffects = true;
           return false;
         }
+        case 'UnaryExpression': {
+          const text = doc.sliceString(root.from + node.from, root.from + node.to).trim();
+          if (text.startsWith('delete')) {
+            containsSideEffects = true;
+            return false;
+          }
+          break;
+        }
         case 'ArithOp': {
           const op = doc.sliceString(root.from + node.from, root.from + node.to);
           if (op === '++' || op === '--') {

package/front_end/panels/sources/breakpointEditDialog.css

@@ -31,13 +31,13 @@
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .source-frame-breakpoint-toolbar {
-  font-family: sans-serif;
+  font-family: var(--default-font-family);
   font-size: 12px;
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .link,
 .devtools-link {
-  font-family: sans-serif;
+  font-family: var(--default-font-family);
   font-size: 12px;
   margin: 0 3px;
 }

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -17,6 +17,7 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
+import type * as Spec from '../../../models/live-metrics/web-vitals-injected/spec/spec.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
@@ -44,6 +45,10 @@ const DEVICE_OPTION_LIST: DeviceOption[] = ['AUTO', ...CrUXManager.DEVICE_SCOPE_
 const RTT_MINIMUM = 60;
 
 const UIStrings = {
+  /**
+   * @description Label of a badge/pill indicating that the metrics are for a soft navigation.
+   */
+  softNavigationPillText: 'SOFT NAV',
   /**
    * @description Title of a view that shows performance metrics from the local environment and field metrics collected from real users. "field metrics" should be interpreted as "real user metrics".
    */
@@ -317,6 +322,7 @@ export interface ViewInput {
   logExtraInteractionDetails: (interaction: LiveMetrics.Interaction) => void;
   highlightedInteractionId?: string;
   highlightedLayoutShiftClusterIds?: Set<string>;
+  navigationType?: Spec.NavigationType;
 }
 
 export interface ViewOutput {
@@ -1010,7 +1016,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     <div class="container">
       <div class="live-metrics-view">
         <main class="live-metrics">
-          <h2 class="section-title">${liveMetricsTitle}</h2>
+          <div class="section-header">
+            <h2 class="section-title">${liveMetricsTitle}</h2>
+            ${input.navigationType === 'soft-navigation' ? html`<span class="badge">${i18nString(UIStrings.softNavigationPillText)}</span>` : nothing}
+          </div>
           <div class="metric-cards">
             <div id="lcp">
               ${renderLcpCard(input)}
@@ -1098,6 +1107,7 @@ export class LiveMetricsView extends UI.Widget.Widget {
   #lcpValue?: LiveMetrics.LcpValue;
   #clsValue?: LiveMetrics.ClsValue;
   #inpValue?: LiveMetrics.InpValue;
+  #navigationType?: Spec.NavigationType;
   #interactions: LiveMetrics.InteractionMap = new Map();
   #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
@@ -1125,6 +1135,7 @@ export class LiveMetricsView extends UI.Widget.Widget {
     this.#lcpValue = event.data.lcp;
     this.#clsValue = event.data.cls;
     this.#inpValue = event.data.inp;
+    this.#navigationType = event.data.navigationType;
 
     const hasNewLS = this.#layoutShifts.length < event.data.layoutShifts.length;
     this.#layoutShifts = [...event.data.layoutShifts];
@@ -1182,6 +1193,7 @@ export class LiveMetricsView extends UI.Widget.Widget {
     this.#inpValue = liveMetrics.inpValue;
     this.#interactions = liveMetrics.interactions;
     this.#layoutShifts = liveMetrics.layoutShifts;
+    this.#navigationType = liveMetrics.navigationType;
     this.requestUpdate();
   }
 
@@ -1249,6 +1261,7 @@ export class LiveMetricsView extends UI.Widget.Widget {
       logExtraInteractionDetails: this.#logExtraInteractionDetails.bind(this),
       highlightedInteractionId: this.#highlightedInteractionId,
       highlightedLayoutShiftClusterIds: this.#highlightedLayoutShiftClusterIds,
+      navigationType: this.#navigationType,
     };
 
     this.#view(viewInput, this.#viewOutput, this.contentElement);

package/front_end/panels/timeline/components/cpuThrottlingSelector.css

@@ -12,6 +12,10 @@
     height: 20px;
   }
 
+  * {
+    font-family: var(--default-font-family);
+  }
+
   devtools-icon[name="info"] {
     margin-left: var(--sys-size-3);
     width: var(--sys-size-8);

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -394,3 +394,31 @@ devtools-link {
 .node-description {
   margin-bottom: 12px;
 }
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.section-header .section-title {
+  margin-bottom: 0;
+}
+
+.section-header .badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  height: var(--sys-size-8);
+  line-height: var(--sys-size-8);
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-3);
+  border: var(--sys-size-1) solid var(--sys-color-primary);
+  color: var(--sys-color-primary);
+  font-weight: var(--ref-typeface-weight-bold);
+  font-size: var(--sys-size-5);
+  text-align: center;
+  margin-top: var(--sys-size-5);
+  margin-bottom: var(--sys-size-5);
+}

package/front_end/panels/timeline/timeline-meta.ts

@@ -66,6 +66,10 @@ const UIStrings = {
    * @description Title of a setting under the Performance category in Settings
    */
   timelineShowAllEvents: 'Show all events',
+  /**
+   * @description Title of a setting under the Performance category in Settings
+   */
+  enableSoftNavigations: 'Enable soft navigation performance monitoring',
   /**
    * @description Title of a setting under the Performance category in Settings
    */
@@ -399,6 +403,15 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.enableSoftNavigations),
+  settingName: 'timeline-enable-soft-navigations',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
 // IMPORTANT: if you are updating this, you should also update the setting in
 // js_timeline-meta.
 Common.Settings.registerSettingExtension({

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 8e5dd02f11d866b080045c734fbb8cbb99e9064c
+Revision: e5e53aeb8a8dee88dadf13158fd44662113307d2
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/menus/menu.css

@@ -16,6 +16,10 @@
   background-color: var(--override-menu-active-background-color, var(--sys-color-neutral-container));
 }
 
+* {
+  font-family: inherit;
+}
+
 #container {
   list-style-type: none;
   margin-top: var(--sys-size-4);

package/front_end/ui/components/menus/menuItem.css

@@ -29,6 +29,10 @@
   padding: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);
 }
 
+* {
+  font-family: inherit;
+}
+
 .is-selected-item::before {
   content: "";
   position: absolute;

package/front_end/ui/components/menus/selectMenu.css

@@ -20,6 +20,10 @@
     linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
 }
 
+* {
+  font-family: inherit;
+}
+
 button {
   background: none;
 }

package/front_end/ui/components/menus/selectMenuButton.css

@@ -10,6 +10,10 @@
   display: block;
 }
 
+* {
+  font-family: inherit;
+}
+
 .show {
   display: block;
   font-size: 12px;

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -78,7 +78,16 @@ export class AiCodeCompletionProvider {
   #aiCodeGenerationConfig?: AiCodeGenerationConfig;
   #aiCodeGenerationProvider?: AiCodeGenerationProvider;
 
-  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+  #boundOnAidaAvailabilityChange =
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void => {
+        this.#updateAiCodeCompletionStateWithAvailability(ev.data);
+      };
+  #boundOnSettingChange = (): void => {
+    const aidaAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (aidaAvailability !== undefined) {
+      this.#updateAiCodeCompletionStateWithAvailability(aidaAvailability);
+    }
+  };
 
   private constructor(aiCodeCompletionConfig: AiCodeCompletionConfig) {
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionAvailable()) {
@@ -122,9 +131,9 @@ export class AiCodeCompletionProvider {
   dispose(): void {
     this.#detachTeaser();
     this.#teaser = undefined;
-    this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnUpdateAiCodeCompletionState);
-    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnSettingChange);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                     this.#boundOnAidaAvailabilityChange);
     this.#cleanupAiCodeCompletion();
     this.#aiCodeGenerationProvider?.dispose();
   }
@@ -139,10 +148,13 @@ export class AiCodeCompletionProvider {
       this.#editor.editor.dispatch(
           {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
     }
-    Host.AidaClient.HostConfigTracker.instance().addEventListener(
-        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
-    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
-    void this.#updateAiCodeCompletionState();
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED,
+                                                                  this.#boundOnAidaAvailabilityChange);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnSettingChange);
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAiCodeCompletionStateWithAvailability(initialAvailability);
+    }
     this.#aiCodeGenerationProvider?.editorInitialized(editor);
   }
 
@@ -183,8 +195,7 @@ export class AiCodeCompletionProvider {
     this.#aiCodeCompletionConfig?.onFeatureDisabled();
   }
 
-  async #updateAiCodeCompletionState(): Promise<void> {
-    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+  #updateAiCodeCompletionStateWithAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
     const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
     const aiCodeCompletionEnabled =