chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

package/front_end/models/emulation/DeviceModeModel.ts

@@ -11,6 +11,8 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../geometry/geometry.js';
 
 import {
+  type Cutout,
+  CutoutShape,
   type EmulatedDevice,
   Horizontal,
   HorizontalSpanned,
@@ -85,6 +87,13 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/emulation/DeviceModeModel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const CUTOUT_SHAPE_TO_PROTOCOL: Record<CutoutShape, Protocol.Overlay.DisplayCutoutShape> = {
+  [CutoutShape.PILL]: Protocol.Overlay.DisplayCutoutShape.Pill,
+  [CutoutShape.NOTCH]: Protocol.Overlay.DisplayCutoutShape.Notch,
+  [CutoutShape.CIRCLE]: Protocol.Overlay.DisplayCutoutShape.Circle,
+  [CutoutShape.RECTANGLE]: Protocol.Overlay.DisplayCutoutShape.Rectangle,
+};
+
 export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDK.TargetManager.SDKModelObserver<SDK.EmulationModel.EmulationModel> {
   #screenRect: Rect;
@@ -506,7 +515,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return;
     }
 
-    this.showHingeIfApplicable(overlayModel);
+    this.showDeviceOverlaysIfApplicable(overlayModel);
   }
 
   private onScreenOrientationLockChanged(
@@ -638,7 +647,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const mobile = this.isMobile();
     const overlayModel = this.#emulationModel ? this.#emulationModel.overlayModel() : null;
     if (overlayModel) {
-      this.showHingeIfApplicable(overlayModel);
+      this.showDeviceOverlaysIfApplicable(overlayModel);
     }
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
@@ -878,14 +887,67 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  private showHingeIfApplicable(overlayModel: SDK.OverlayModel.OverlayModel): void {
+  private showDeviceOverlaysIfApplicable(overlayModel: SDK.OverlayModel.OverlayModel): void {
     const orientation = (this.#device && this.#mode) ? this.#device.orientationByName(this.#mode.orientation) : null;
     if (orientation?.hinge) {
       overlayModel.showHingeForDualScreen(orientation.hinge);
-      return;
+    } else {
+      overlayModel.showHingeForDualScreen(null);
+    }
+
+    overlayModel.showDisplayCutout(this.currentDisplayCutout());
+  }
+
+  private currentDisplayCutout(): SDK.OverlayModel.DisplayCutout|null {
+    const device = this.#device;
+    const mode = this.#mode;
+    if (!device || !mode || !device.modes.includes(mode)) {
+      return null;
+    }
+
+    const cutout = mode.cutout;
+    if (cutout) {
+      return this.toDisplayCutout(cutout);
     }
 
-    overlayModel.showHingeForDualScreen(null);
+    if (mode.orientation !== Horizontal) {
+      return null;
+    }
+
+    const rotationPartner = device.getRotationPartner(mode);
+    const rotatedCutout = rotationPartner?.cutout;
+    if (rotationPartner?.orientation !== Vertical || !rotatedCutout) {
+      return null;
+    }
+
+    const orientation = device.orientationByName(mode.orientation);
+    if (rotatedCutout.shape === CutoutShape.CIRCLE) {
+      return this.toDisplayCutout({
+        ...rotatedCutout,
+        x: orientation.width - rotatedCutout.y - rotatedCutout.height,
+        y: rotatedCutout.x,
+        width: rotatedCutout.height,
+        height: rotatedCutout.width,
+        cx: orientation.width - rotatedCutout.cy,
+        cy: rotatedCutout.cx,
+      });
+    }
+    return this.toDisplayCutout({
+      ...rotatedCutout,
+      x: orientation.width - rotatedCutout.y - rotatedCutout.height,
+      y: rotatedCutout.x,
+      width: rotatedCutout.height,
+      height: rotatedCutout.width,
+    });
+  }
+
+  private toDisplayCutout(cutout: Cutout): SDK.OverlayModel.DisplayCutout {
+    const {shape, ...rest} = cutout;
+    return {
+      ...rest,
+      shape: CUTOUT_SHAPE_TO_PROTOCOL[shape],
+      contentColor: {r: 0, g: 0, b: 0, a: 1},
+    } as SDK.OverlayModel.DisplayCutout;
   }
 
   private getDisplayFeatureOrientation(): Protocol.Emulation.DisplayFeatureOrientation {

package/front_end/models/emulation/EmulatedDevices.ts

@@ -581,7 +581,7 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
   #standard: Set<EmulatedDevice>;
   readonly #customSetting: Common.Settings.Setting<any[]>;
   readonly #custom: Set<EmulatedDevice>;
-  constructor(settings: Common.Settings.Settings = Common.Settings.Settings.instance()) {
+  constructor(settings: Common.Settings.Settings) {
     super();
 
     this.#standardSetting = settings.createSetting('standard-emulated-device-list', []);
@@ -598,7 +598,8 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
 
   static instance(): EmulatedDevicesList {
     if (!Root.DevToolsContext.globalInstance().has(EmulatedDevicesList)) {
-      Root.DevToolsContext.globalInstance().set(EmulatedDevicesList, new EmulatedDevicesList());
+      Root.DevToolsContext.globalInstance().set(EmulatedDevicesList,
+                                                new EmulatedDevicesList(Common.Settings.Settings.instance()));
     }
     return Root.DevToolsContext.globalInstance().get(EmulatedDevicesList);
   }

package/front_end/models/extensions/RecorderPluginManager.ts

@@ -3,11 +3,10 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 
 import type {RecorderExtensionEndpoint} from './RecorderExtensionEndpoint.js';
 
-let instance: RecorderPluginManager|null = null;
-
 export interface ViewDescriptor {
   id: string;
   title: string;
@@ -21,11 +20,16 @@ export class RecorderPluginManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #plugins = new Set<RecorderExtensionEndpoint>();
   #views = new Map<string, ViewDescriptor>();
 
-  static instance(): RecorderPluginManager {
-    if (!instance) {
-      instance = new RecorderPluginManager();
+  static instance(opts?: {forceNew: boolean}): RecorderPluginManager {
+    if (!Root.DevToolsContext.globalInstance().has(RecorderPluginManager) || opts?.forceNew) {
+      Root.DevToolsContext.globalInstance().set(RecorderPluginManager, new RecorderPluginManager());
     }
-    return instance;
+
+    return Root.DevToolsContext.globalInstance().get(RecorderPluginManager);
+  }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(RecorderPluginManager);
   }
 
   addPlugin(plugin: RecorderExtensionEndpoint): void {

package/front_end/models/har/Importer.ts

@@ -5,8 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../text_utils/text_utils.js';
 
 import type {HARCookie, HAREntry, HARLog, HARPage, HARTimings} from './HARFormat.js';
 

package/front_end/models/har/Log.snapshot.txt

@@ -0,0 +1,193 @@
+Title: HAR Log build converts network requests into a complete HAR log with pages and entries
+Content:
+{
+  "version": "1.2",
+  "creator": {
+    "name": "WebInspector",
+    "version": "VERSION"
+  },
+  "pages": [
+    {
+      "startedDateTime": "1970-01-01T00:00:01.000Z",
+      "id": "page_1",
+      "title": "http://127.0.0.1:8000/devtools/resources/inspected-page.html",
+      "pageTimings": {
+        "onContentLoad": 9000,
+        "onLoad": 14000
+      }
+    }
+  ],
+  "entries": [
+    {
+      "_initiator": null,
+      "_priority": null,
+      "_resourceType": "document",
+      "cache": {},
+      "request": {
+        "method": "GET",
+        "url": "http://127.0.0.1:8000/devtools/resources/inspected-page.html",
+        "httpVersion": "HTTP/1.1",
+        "headers": [
+          {
+            "name": "version",
+            "value": "HTTP/1.1"
+          }
+        ],
+        "queryString": [],
+        "cookies": [
+          {
+            "name": "a",
+            "value": "b",
+            "path": "/path",
+            "domain": "example.com",
+            "expires": null,
+            "httpOnly": false,
+            "secure": false
+          },
+          {
+            "name": "a1",
+            "value": "b1",
+            "expires": null,
+            "httpOnly": false,
+            "secure": false
+          },
+          {
+            "name": "c1",
+            "value": "d1",
+            "expires": null,
+            "httpOnly": false,
+            "secure": false
+          }
+        ],
+        "headersSize": -1,
+        "bodySize": 0
+      },
+      "response": {
+        "status": 0,
+        "statusText": "",
+        "httpVersion": "",
+        "headers": [
+          {
+            "name": "Set-Cookie",
+            "value": "x=y; Path=/path; Domain=example.com; httpOnly; Secure\nx1=y1; SameSite=Strict\nz2=y2; SameSite=Lax"
+          }
+        ],
+        "cookies": [
+          {
+            "name": "x",
+            "value": "y",
+            "path": "/path",
+            "domain": "example.com",
+            "expires": null,
+            "httpOnly": true,
+            "secure": true
+          },
+          {
+            "name": "x1",
+            "value": "y1",
+            "domain": "127.0.0.1",
+            "expires": null,
+            "httpOnly": false,
+            "secure": false,
+            "sameSite": "Strict"
+          },
+          {
+            "name": "z2",
+            "value": "y2",
+            "domain": "127.0.0.1",
+            "expires": null,
+            "httpOnly": false,
+            "secure": false,
+            "sameSite": "Lax"
+          }
+        ],
+        "content": {
+          "size": 0,
+          "mimeType": "x-unknown"
+        },
+        "redirectURL": "",
+        "headersSize": -1,
+        "bodySize": -1,
+        "_transferSize": 0,
+        "_error": null,
+        "_fetchedViaServiceWorker": true,
+        "_responseCacheStorageCacheName": "v1",
+        "_serviceWorkerResponseSource": "cache-storage",
+        "_serviceWorkerRouterRuleIdMatched": 3,
+        "_serviceWorkerRouterMatchedSourceType": "cache",
+        "_serviceWorkerRouterActualSourceType": "cache"
+      },
+      "serverIPAddress": "",
+      "startedDateTime": "1969-12-31T23:59:59.000Z",
+      "time": 0,
+      "timings": {
+        "blocked": 0,
+        "dns": -1,
+        "ssl": -1,
+        "connect": -1,
+        "send": 0,
+        "wait": 0,
+        "receive": 0,
+        "_blocked_queueing": 2000
+      },
+      "pageref": "page_1"
+    },
+    {
+      "_initiator": null,
+      "_priority": null,
+      "_resourceType": "xhr",
+      "cache": {},
+      "request": {
+        "method": "POST",
+        "url": "http://127.0.0.1:8000/devtools/resources/post-target.cgi",
+        "httpVersion": "",
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "text/xml"
+          }
+        ],
+        "queryString": [],
+        "cookies": [],
+        "headersSize": -1,
+        "bodySize": 11,
+        "postData": {
+          "mimeType": "text/xml",
+          "text": "<xml></xml>"
+        }
+      },
+      "response": {
+        "status": 0,
+        "statusText": "",
+        "httpVersion": "",
+        "headers": [],
+        "cookies": [],
+        "content": {
+          "size": 0,
+          "mimeType": "application/xml"
+        },
+        "redirectURL": "",
+        "headersSize": -1,
+        "bodySize": -1,
+        "_transferSize": 0,
+        "_error": null,
+        "_fetchedViaServiceWorker": false
+      },
+      "serverIPAddress": "",
+      "startedDateTime": "1969-12-31T23:59:59.000Z",
+      "time": 0,
+      "timings": {
+        "blocked": 0,
+        "dns": -1,
+        "ssl": -1,
+        "connect": -1,
+        "send": 0,
+        "wait": 0,
+        "receive": 0,
+        "_blocked_queueing": -1
+      },
+      "pageref": "page_1"
+    }
+  ]
+}
+=== end content

package/front_end/models/har/Log.ts

@@ -9,7 +9,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=58127 for details.
 
 import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.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';
 
@@ -33,7 +33,8 @@ export class Log {
   }
 
   private creator(): Creator {
-    const webKitVersion = /AppleWebKit\/([^ ]+)/.exec(window.navigator.userAgent);
+    const userAgent = Platform.HostRuntime.HOST_RUNTIME.getUserAgent();
+    const webKitVersion = /AppleWebKit\/([^ ]+)/.exec(userAgent);
 
     return {name: 'WebInspector', version: webKitVersion ? webKitVersion[1] : 'n/a'};
   }

package/front_end/models/har/Writer.ts

@@ -36,7 +36,7 @@ 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 type * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../text_utils/text_utils.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 
 import {type BuildOptions, type EntryDTO, Log} from './Log.js';
 

package/front_end/models/issues_manager/IssueAggregator.ts

@@ -16,6 +16,7 @@ import {HeavyAdIssue} from './HeavyAdIssue.js';
 import {Issue, IssueCategory, IssueKind, unionIssueKind} from './Issue.js';
 import type {EventTypes as IssuesManagerEventsTypes, IssueAddedEvent} from './IssuesManager.js';
 import {Events as IssuesManagerEvents} from './IssuesManagerEvents.js';
+import {LazyLoadImageIssue} from './LazyLoadImageIssue.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
@@ -67,6 +68,7 @@ export class AggregatedIssue extends Issue {
   #mixedContentIssues = new Set<MixedContentIssue>();
   #partitioningBlobURLIssues = new Set<PartitioningBlobURLIssue>();
   #permissionElementIssues = new Set<PermissionElementIssue>();
+  #lazyLoadImageIssues = new Set<LazyLoadImageIssue>();
   #selectivePermissionsInterventionIssues = new Set<SelectivePermissionsInterventionIssue>();
   #sharedArrayBufferIssues = new Set<SharedArrayBufferIssue>();
   #quirksModeIssues = new Set<QuirksModeIssue>();
@@ -190,6 +192,10 @@ export class AggregatedIssue extends Issue {
     return this.#permissionElementIssues;
   }
 
+  getLazyLoadImageIssues(): Iterable<LazyLoadImageIssue> {
+    return this.#lazyLoadImageIssues;
+  }
+
   /**
    * Produces a primary key for a cookie. Use this instead of `JSON.stringify` in
    * case new fields are added to `AffectedCookie`.
@@ -279,6 +285,9 @@ export class AggregatedIssue extends Issue {
     if (issue instanceof PermissionElementIssue) {
       this.#permissionElementIssues.add(issue);
     }
+    if (issue instanceof LazyLoadImageIssue) {
+      this.#lazyLoadImageIssues.add(issue);
+    }
     if (issue instanceof SelectivePermissionsInterventionIssue) {
       this.#selectivePermissionsInterventionIssues.add(issue);
     }

package/front_end/models/issues_manager/IssuesManager.ts

@@ -23,6 +23,7 @@ import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
 import {Events} from './IssuesManagerEvents.js';
+import {LazyLoadImageIssue} from './LazyLoadImageIssue.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
 import {PermissionElementIssue} from './PermissionElementIssue.js';
@@ -154,6 +155,10 @@ const issueCodeHandlers =
             Protocol.Audits.InspectorIssueCode.SelectivePermissionsInterventionIssue,
             SelectivePermissionsInterventionIssue.fromInspectorIssue,
           ],
+          [
+            Protocol.Audits.InspectorIssueCode.LazyLoadImageIssue,
+            LazyLoadImageIssue.fromInspectorIssue,
+          ],
         ]);
 
 export function isIssueCodeSupported(code: Protocol.Audits.InspectorIssueCode): boolean {

package/front_end/models/issues_manager/LazyLoadImageIssue.ts

@@ -0,0 +1,76 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {type AffectedElement, Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+   * @description Link title for the lazy-loaded image with zero size issue in the Issues panel.
+   */
+  lazyLoadImageZeroSize: 'Lazy-loaded images should have explicit dimensions',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/LazyLoadImageIssue.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class LazyLoadImageIssue extends Issue<Protocol.Audits.LazyLoadImageIssueDetails> {
+  constructor(issueDetails: Protocol.Audits.LazyLoadImageIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    const umaCode = [Protocol.Audits.InspectorIssueCode.LazyLoadImageIssue, 'ZeroSize'].join('::');
+    super({code: Protocol.Audits.InspectorIssueCode.LazyLoadImageIssue, umaCode}, issueDetails, issuesModel);
+  }
+
+  primaryKey(): string {
+    return `${this.code()}-(${this.details().nodeId})-(${this.details().url})`;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.OTHER;
+  }
+
+  getDescription(): MarkdownIssueDescription {
+    return {
+      file: 'lazyLoadImageZeroSize.md',
+      links: [
+        {
+          link: 'https://web.dev/articles/browser-level-image-lazy-loading/#dimension-attributes',
+          linkTitle: i18nString(UIStrings.lazyLoadImageZeroSize),
+        },
+      ],
+    };
+  }
+
+  elementCount(): number {
+    return this.details().nodeId ? 1 : 0;
+  }
+
+  override elements(): Iterable<AffectedElement> {
+    if (this.details().nodeId) {
+      const target = this.model()?.target();
+      return [{
+        backendNodeId: this.details().nodeId,
+        nodeName: 'img',
+        target: target || null,
+      }];
+    }
+    return [];
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.IMPROVEMENT;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel|null,
+                            inspectorIssue: Protocol.Audits.InspectorIssue): LazyLoadImageIssue[] {
+    const details = inspectorIssue.details.lazyLoadImageIssueDetails;
+    if (!details) {
+      console.warn('Lazy-loaded image issue without details received.');
+      return [];
+    }
+    return [new LazyLoadImageIssue(details, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/descriptions/lazyLoadImageZeroSize.md

@@ -0,0 +1,7 @@
+# Lazy-loaded images should have explicit dimensions
+
+An image on this page specifies `loading="lazy"` without explicit width and height dimensions or aspect ratio styling.
+
+When lazy-loaded images lack dimensions, the browser allocates an initial 0x0 bounding box before network loading completes. As the user scrolls and the image loads, its sudden expansion triggers unexpected layout shifts (CLS) and can displace or clip surrounding content.
+
+To prevent layout shifts, always include explicit `width` and `height` attributes on lazy-loaded images, or define their aspect ratio using CSS.

package/front_end/models/issues_manager/issues_manager.ts

@@ -20,6 +20,7 @@ import * as Issue from './Issue.js';
 import * as IssueAggregator from './IssueAggregator.js';
 import * as IssueResolver from './IssueResolver.js';
 import * as IssuesManager from './IssuesManager.js';
+import * as LazyLoadImageIssue from './LazyLoadImageIssue.js';
 import * as MarkdownIssueDescription from './MarkdownIssueDescription.js';
 import * as MixedContentIssue from './MixedContentIssue.js';
 import * as PartitioningBlobURLIssue from './PartitioningBlobURLIssue.js';
@@ -54,6 +55,7 @@ export {
   IssueAggregator,
   IssueResolver,
   IssuesManager,
+  LazyLoadImageIssue,
   MarkdownIssueDescription,
   MixedContentIssue,
   PartitioningBlobURLIssue,

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -226,7 +226,7 @@ export const NativeFunctions = [
   {
     name: "create",
     signatures: [["?options"]],
-    receivers: ["CredentialsContainer","Classifier","SemanticEmbedder"]
+    receivers: ["CredentialsContainer","SemanticEmbedder"]
   },
   {
     name: "defineProperty",
@@ -8257,15 +8257,6 @@ export const NativeFunctions = [
     name: "WorkletAnimation",
     signatures: [["animatorName","effects","?timeline","?options"]]
   },
-  {
-    name: "availability",
-    signatures: [["?options"]],
-    receivers: ["SemanticEmbedder"]
-  },
-  {
-    name: "classify",
-    signatures: [["input","?options"]]
-  },
   {
     name: "LanguageModelToolCall",
     signatures: [["init"]]
@@ -8278,6 +8269,10 @@ export const NativeFunctions = [
     name: "LanguageModelToolError",
     signatures: [["init"]]
   },
+  {
+    name: "availability",
+    signatures: [["?options"]]
+  },
   {
     name: "embed",
     signatures: [["input","?options"]]
@@ -8642,6 +8637,10 @@ export const NativeFunctions = [
     name: "Touch",
     signatures: [["initDict"]]
   },
+  {
+    name: "InstallResultEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "TrackEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -17,12 +17,11 @@ const UIStrings = {
   /**
    * @description Warning text indicating that the Largest Contentful Paint (LCP) performance metric was affected by the user changing the simulated device.
    */
-  lcpEmulationWarning:
-      'Simulating a new device after the page loads can affect LCP. Reload the page after simulating a new device for accurate LCP data.',
+  lcpEmulationWarning: 'Simulating a device after the page loads can affect LCP. Reload the page for accurate LCP.',
   /**
    * @description Warning text indicating that the Largest Contentful Paint (LCP) performance metric was affected by the page loading in the background.
    */
-  lcpVisibilityWarning: 'LCP value may be inflated because the page started loading in the background.',
+  lcpVisibilityWarning: 'LCP may be inflated because the page started loading in the background.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/live-metrics/LiveMetrics.ts', UIStrings);

package/front_end/models/logs/NetworkLog.ts

@@ -35,8 +35,8 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   readonly #settings: Common.Settings.Settings;
 
   constructor(
-      targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
-      settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+      targetManager: SDK.TargetManager.TargetManager,
+      settings: Common.Settings.Settings,
   ) {
     super();
     this.#targetManager = targetManager;
@@ -55,7 +55,8 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
 
   static instance(): NetworkLog {
     if (!Root.DevToolsContext.globalInstance().has(NetworkLog)) {
-      Root.DevToolsContext.globalInstance().set(NetworkLog, new NetworkLog());
+      Root.DevToolsContext.globalInstance().set(
+          NetworkLog, new NetworkLog(SDK.TargetManager.TargetManager.instance(), Common.Settings.Settings.instance()));
     }
 
     return Root.DevToolsContext.globalInstance().get(NetworkLog);

package/front_end/models/logs/logs-meta.ts

@@ -9,7 +9,7 @@ const UIStrings = {
   /**
    * @description Text to preserve the log after refreshing
    */
-  preserveLog: 'Preserve log',
+  preserveLog: 'Keep log',
   /**
    * @description A term that can be used to search in the command menu, and will find the search
    * result 'Preserve log on page reload / navigation'. This is an additional search term to help
@@ -31,11 +31,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu
    */
-  preserveLogOnPageReload: 'Preserve log on page reload / navigation',
+  preserveLogOnPageReload: 'Keep log on page reload / navigation',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu
    */
-  doNotPreserveLogOnPageReload: 'Do not preserve log on page reload / navigation',
+  doNotPreserveLogOnPageReload: 'Don’t keep log on page reload / navigation',
   /**
    * @description Title of an action in the network tool to toggle recording
    */