chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/models/trace/insights/{ThirdPartyWeb.ts → ThirdParties.ts}

@@ -2,19 +2,34 @@
 // 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 * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
 import * as Extras from '../extras/extras.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
+import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+
+const UIStrings = {
+  /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
+  title: 'Third parties',
+  /**
+   * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
+   * This is displayed after a user expands the section to see more. No character length limits.
+   */
+  description: 'Third party code can significantly impact load performance. ' +
+      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {
   return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
 }
 
-export type ThirdPartyWebInsightResult = InsightResult<{
+export type ThirdPartiesInsightModel = InsightModel<{
   entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Entity>,
   requestsByEntity: Map<Extras.ThirdParties.Entity, Types.Events.SyntheticNetworkRequest[]>,
   summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Summary>,
@@ -37,8 +52,12 @@ function getRelatedEvents(
   return events;
 }
 
+function finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'>): ThirdPartiesInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartyWebInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartiesInsightModel {
   const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
     if (!context.navigation) {
       return false;
@@ -58,12 +77,12 @@ export function generateInsight(
   const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
       Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);
 
-  return {
+  return finalize({
     relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
     entityByRequest,
     requestsByEntity: summaries.requestsByEntity,
     summaryByRequest: summaries.byRequest,
     summaryByEntity: summaries.byEntity,
     firstPartyEntity,
-  };
+  });
 }

package/front_end/models/trace/insights/Viewport.test.ts

@@ -36,7 +36,7 @@ describeWithEnvironment('Viewport', function() {
       event.args.is_mobile_optimized = false;
     }
 
-    const insight = Trace.Insights.InsightRunners.Viewport.generateInsight(data, context);
+    const insight = Trace.Insights.Models.Viewport.generateInsight(data, context);
     assert.strictEqual(insight.mobileOptimized, false);
   });
 });

package/front_end/models/trace/insights/Viewport.ts

@@ -2,22 +2,40 @@
 // 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 * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
+  title: 'Viewport not optimized for mobile',
+  /**
+   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
+   */
+  description:
+      'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['Meta', 'UserInteractions'] {
   return ['Meta', 'UserInteractions'];
 }
 
-export type ViewportInsightResult = InsightResult<{
+export type ViewportInsightModel = InsightModel<{
   mobileOptimized: boolean | null,
   viewportEvent?: Types.Events.ParseMetaViewport,
 }>;
 
+function finalize(partialModel: Omit<ViewportInsightModel, 'title'|'description'>): ViewportInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightModel {
   const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
     if (event.args.frame !== context.frameId) {
       return false;
@@ -28,10 +46,10 @@ export function generateInsight(
 
   if (!compositorEvents.length) {
     // Trace doesn't have the data we need.
-    return {
+    return finalize({
       mobileOptimized: null,
       warnings: [InsightWarning.NO_LAYOUT],
-    };
+    });
   }
 
   const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {
@@ -45,16 +63,16 @@ export function generateInsight(
   // Returns true only if all events are mobile optimized.
   for (const event of compositorEvents) {
     if (!event.args.is_mobile_optimized) {
-      return {
+      return finalize({
         mobileOptimized: false,
         viewportEvent,
         metricSavings: {INP: 300 as Types.Timing.MilliSeconds},
-      };
+      });
     }
   }
 
-  return {
+  return finalize({
     mobileOptimized: true,
     viewportEvent,
-  };
+  });
 }

package/front_end/models/trace/insights/insights.ts

@@ -3,5 +3,5 @@
 // found in the LICENSE file.
 
 export * as Common from './Common.js';
-export * as InsightRunners from './InsightRunners.js';
+export * as Models from './Models.js';
 export * as Types from './types.js';

package/front_end/models/trace/insights/types.ts

@@ -6,7 +6,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
 
-import type * as InsightsRunners from './InsightRunners.js';
+import type * as Models from './Models.js';
 
 /**
  * Context for the portion of the trace an insight should look at.
@@ -33,7 +33,7 @@ export interface LanternContext {
   metrics: Record<string, Lantern.Metrics.MetricResult>;
 }
 
-export type InsightRunnersType = typeof InsightsRunners;
+export type InsightModelsType = typeof Models;
 
 export enum InsightWarning {
   NO_FP = 'NO_FP',
@@ -53,7 +53,9 @@ export interface MetricSavings {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type InsightResult<R extends Record<string, unknown>> = R&{
+export type InsightModel<R extends Record<string, unknown>> = R&{
+  title: string,
+  description: string,
   relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
   metricSavings?: MetricSavings,
@@ -64,22 +66,22 @@ export type InsightResult<R extends Record<string, unknown>> = R&{
  * this could instead represent the duration from the beginning of the trace up to the first recorded
  * navigation (or the end of the trace).
  */
-export type InsightSets = {
+export type InsightSet = {
   /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId,
   /** The URL to show in the accordion list. */
   url: URL,
   frameId: string,
   bounds: Types.Timing.TraceWindowMicroSeconds,
-  data: InsightResults,
+  model: InsightModels,
   navigation?: Types.Events.NavigationStart,
 };
 
 /**
- * Contains insights for a specific navigation.
+ * Contains insights for a specific insight set.
  */
-export type InsightResults = {
-  [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;
+export type InsightModels = {
+  [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
 };
 
 /**
@@ -88,7 +90,7 @@ export type InsightResults = {
  * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no
  * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.
  */
-export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;
+export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
 
 /**
  * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.

package/front_end/models/trace/types/TraceEvents.ts

@@ -52,6 +52,8 @@ export const enum Phase {
   CLOCK_SYNC = 'c',
 }
 
+export type NonEmptyString = string&{_tag: 'NonEmptyString'};
+
 export function isNestableAsyncPhase(phase: Phase): boolean {
   return phase === Phase.ASYNC_NESTABLE_START || phase === Phase.ASYNC_NESTABLE_END ||
       phase === Phase.ASYNC_NESTABLE_INSTANT;
@@ -266,28 +268,38 @@ export interface End extends Event {
  */
 export type SyntheticComplete = Complete;
 
-export interface EventTiming extends Event {
-  ph: Phase.ASYNC_NESTABLE_START|Phase.ASYNC_NESTABLE_END;
+// TODO(paulirish): Migrate to the new (Sept 2024) EventTiming trace events.
+// See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7
+export type EventTimingBeginOrEnd = EventTimingBegin|EventTimingEnd;
+
+export interface EventTimingBegin extends Event {
+  ph: Phase.ASYNC_NESTABLE_START;
   name: Name.EVENT_TIMING;
   id: string;
   args: Args&{
-    frame: string,
-    data?: ArgsData&{
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/performance_event_timing.cc;l=297;drc=4f00803ca25c0d0480ed14844d6406933c21e80e
+    data: ArgsData & {
       cancelable: boolean,
       duration: MilliSeconds,
-      processingEnd: MilliSeconds,
-      processingStart: MilliSeconds,
-      timeStamp: MilliSeconds,
-      interactionId?: number, type: string,
+      type: string,
+      interactionId: number,
+      interactionOffset: number,
+      nodeId: Protocol.DOM.BackendNodeId,
+      frame?: string,  // From May 2022 onwards, this is where frame is located. https://chromium-review.googlesource.com/c/chromium/src/+/3632661
+      processingEnd?: MilliSeconds,
+      processingStart?: MilliSeconds,
+      timeStamp?: MilliSeconds,
+      enqueuedToMainThreadTime?: MilliSeconds,
+      commitFinishTime?: MilliSeconds,
     },
+    frame?: string,  // Prior to May 2022, `frame` was here in args.
   };
 }
-
-export interface EventTimingBegin extends EventTiming {
-  ph: Phase.ASYNC_NESTABLE_START;
-}
-export interface EventTimingEnd extends EventTiming {
+export interface EventTimingEnd extends Event {
   ph: Phase.ASYNC_NESTABLE_END;
+  name: Name.EVENT_TIMING;
+  id: string;
+  args: Args;
 }
 
 export interface GPUTask extends Complete {
@@ -584,11 +596,13 @@ export interface Mark extends Event {
   ph: Phase.MARK;
 }
 
-export interface NavigationStart extends Mark {
+// An unreliable and non-legit navigationStart. See NavigationStartWithUrl
+export interface NavigationStartUnreliable extends Mark {
   name: 'navigationStart';
   args: Args&{
     data?: ArgsData & {
-      documentLoaderURL: string,
+      /** An empty documentLoaderURL means this navigationStart is unreliable noise and can be ignored. */
+      documentLoaderURL: never,
       isLoadingMainFrame: boolean,
       // isOutermostMainFrame was introduced in crrev.com/c/3625434 and exists
       // because of Fenced Frames
@@ -613,6 +627,16 @@ export interface NavigationStart extends Mark {
   };
 }
 
+// NavigationStart but definitely has a populated documentLoaderURL
+export interface NavigationStart extends NavigationStartUnreliable {
+  args: NavigationStartUnreliable['args']&{
+    data: NavigationStartUnreliable['args']['data'] & {
+      /** This navigationStart is valid, as the documentLoaderURL isn't empty. */
+      documentLoaderURL: NonEmptyString,
+    },
+  };
+}
+
 export interface FirstContentfulPaint extends Mark {
   name: Name.MARK_FCP;
   args: Args&{
@@ -974,8 +998,9 @@ export interface ResourceChangePriority extends Instant {
   };
 }
 
+/** Only sent for navigations. https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/devtools_instrumentation.cc;l=1612-1647;drc=ec7daf93d0479b758610c75f4e146fd4d2d6ed2b */
 export interface ResourceWillSendRequest extends Instant {
-  name: 'ResourceWillSendRequest';
+  name: Name.RESOURCE_WILL_SEND_REQUEST;
   args: Args&{
     data: ArgsData & {
       requestId: string,
@@ -1007,6 +1032,7 @@ export interface ResourceReceivedData extends Instant {
   };
 }
 
+/** See https://mdn.github.io/shared-assets/images/diagrams/api/performance/timestamp-diagram.svg  */
 interface ResourceReceiveResponseTimingData {
   connectEnd: MilliSeconds;
   connectStart: MilliSeconds;
@@ -1018,6 +1044,7 @@ interface ResourceReceiveResponseTimingData {
   pushStart: MilliSeconds;
   receiveHeadersEnd: MilliSeconds;
   receiveHeadersStart: MilliSeconds;
+  /** When the network service is about to handle a request, ie. just before going to the HTTP cache or going to the network for DNS/connection setup. */
   requestTime: Seconds;
   sendEnd: MilliSeconds;
   sendStart: MilliSeconds;
@@ -1449,7 +1476,7 @@ export type SyntheticConsoleTimingPair = SyntheticEventPair<ConsoleTime>;
 
 export type SyntheticAnimationPair = SyntheticEventPair<Animation>;
 
-export interface SyntheticInteractionPair extends SyntheticEventPair<EventTiming> {
+export interface SyntheticInteractionPair extends SyntheticEventPair<EventTimingBeginOrEnd> {
   // InteractionID and type are available within the beginEvent's data, but we
   // put them on the top level for ease of access.
   interactionId: number;
@@ -1923,9 +1950,10 @@ export function isCommitLoad(
   return event.name === 'CommitLoad';
 }
 
-export function isNavigationStart(
+/** @deprecated You probably want `isNavigationStart` instead. */
+export function isNavigationStartUnreliable(
     event: Event,
-    ): event is NavigationStart {
+    ): event is NavigationStartUnreliable {
   return event.name === 'navigationStart';
 }
 
@@ -1989,7 +2017,7 @@ export function isInteractiveTime(event: Event): event is InteractiveTime {
   return event.name === 'InteractiveTime';
 }
 
-export function isEventTiming(event: Event): event is EventTiming {
+export function isEventTiming(event: Event): event is EventTimingBeginOrEnd {
   return event.name === Name.EVENT_TIMING;
 }
 
@@ -2080,8 +2108,9 @@ export function isPrePaint(
   return event.name === 'PrePaint';
 }
 
-export function isNavigationStartWithURL(event: Event): event is NavigationStart {
-  return Boolean(isNavigationStart(event) && event.args.data && event.args.data.documentLoaderURL !== '');
+/** A VALID navigation start (as it has a populated documentLoaderURL) */
+export function isNavigationStart(event: Event): event is NavigationStart {
+  return Boolean(isNavigationStartUnreliable(event) && event.args.data && event.args.data.documentLoaderURL !== '');
 }
 
 export function isMainFrameViewport(

package/front_end/panels/application/SharedStorageItemsView.test.ts

@@ -1035,14 +1035,14 @@ describeWithMockConnection('SharedStorageItemsView', function() {
     const cellElement = getCellElementFromNodeAndColumnId(view.dataGrid, selectedNode, 'key');
     assert.exists(cellElement);
 
-    // Editing a key will cause `deleteEntry()`, `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
+    // Editing a key will cause `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
     const editedPromise = itemsListener.waitForItemsEditedTotal(1);
     cellElement.textContent = 'key4';
     dispatchKeyDownEvent(cellElement, {key: 'Enter'});
     await raf();
     await editedPromise;
 
-    assert.isTrue(deleteEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: ''}));
+    assert.isTrue(deleteEntrySpy.notCalled);
     assert.isTrue(
         setEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: 'key4', value: '', ignoreIfPresent: false}));
     assert.isTrue(getMetadataSpy.calledThrice);
@@ -1052,7 +1052,7 @@ describeWithMockConnection('SharedStorageItemsView', function() {
 
     assert.deepEqual(view.getEntriesForTesting(), ENTRIES_NEW_KEY);
     assert.deepEqual(itemsListener.editedEvents, [
-      {columnIdentifier: 'key', oldText: '', newText: 'key4'} as View.SharedStorageItemsDispatcher.ItemEditedEvent,
+      {columnIdentifier: 'key', oldText: null, newText: 'key4'},
     ]);
 
     // Verify that the preview loads.

package/front_end/panels/application/SharedStorageItemsView.ts

@@ -87,7 +87,7 @@ export namespace SharedStorageItemsDispatcher {
 
   export interface ItemEditedEvent {
     columnIdentifier: string;
-    oldText: string;
+    oldText: string|null;
     newText: string;
   }
 
@@ -241,7 +241,7 @@ export class SharedStorageItemsView extends StorageItemsView {
 
   async #editingCallback(
       editingNode: DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>, columnIdentifier: string,
-      oldText: string, newText: string): Promise<void> {
+      oldText: string|null, newText: string): Promise<void> {
     if (columnIdentifier === 'key' && newText === '') {
       // The Shared Storage backend does not currently allow '' as a key, so we only set a new entry with a new key if its new key is nonempty.
       await this.refreshItems();
@@ -249,7 +249,9 @@ export class SharedStorageItemsView extends StorageItemsView {
       return;
     }
     if (columnIdentifier === 'key') {
-      await this.#sharedStorage.deleteEntry(oldText);
+      if (oldText !== null) {
+        await this.#sharedStorage.deleteEntry(oldText);
+      }
       await this.#sharedStorage.setEntry(newText, editingNode.data.value || '', false);
     } else {
       // The Shared Storage backend does not currently allow '' as a key, so we use ' ' as the default key instead.

package/front_end/panels/application/StorageView.ts

@@ -507,8 +507,8 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
     const quotaOverridden = response.overrideActive;
-    const quotaAsString = Platform.NumberUtilities.bytesToString(response.quota);
-    const usageAsString = Platform.NumberUtilities.bytesToString(response.usage);
+    const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
+    const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
     const quota =
         quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
@@ -550,7 +550,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.pieChart.data = {
       chartName: i18nString(UIStrings.storageUsage),
       size: 110,
-      formatter: Platform.NumberUtilities.bytesToString,
+      formatter: i18n.ByteUtilities.bytesToString,
       showLegend: true,
       total,
       slices,

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -5,7 +5,6 @@
 import '../../../ui/components/report_view/report_view.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 Buttons from '../../../ui/components/buttons/buttons.js';
@@ -216,7 +215,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       ${this.key(i18nString(UIStrings.durability))}
       ${this.value(durability)}
       ${this.key(i18nString(UIStrings.quota))}
-      ${this.value(Platform.NumberUtilities.bytesToString(quota))}
+      ${this.value(i18n.ByteUtilities.bytesToString(quota))}
       ${this.key(i18nString(UIStrings.expiration))}
       ${this.value(this.#getExpirationString())}`;
   }

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -137,19 +137,20 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     UI.ARIAUtils.setLabel(inputElement, i18nString(UIStrings.urlBreakpoint));
     this.addListElement(inputElementContainer, this.#list.element.firstChild as Element | null);
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (_element: Element, newText: string): void => {
       this.removeListElement(inputElementContainer);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, true);
-        this.setBreakpoint(text);
-      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, true);
+      this.setBreakpoint(newText);
       this.update();
-    }
+    };
+
+    const cancel = (): void => {
+      this.removeListElement(inputElementContainer);
+      this.update();
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, undefined);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   heightForItem(_item: string): number {
@@ -336,33 +337,35 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       element.classList.add('hidden');
     }
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (inputElement: Element, newText: string, _oldText: string|null, element?: Element): void => {
       this.removeListElement(inputElement);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
-        this.removeBreakpoint(breakKeyword);
-        let enabled = true;
-        if (element) {
-          const breakpointEntryElement = containerToBreakpointEntry.get(element);
-          const checkboxElement =
-              breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
-          if (checkboxElement) {
-            enabled = checkboxElement.checked;
-          }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
+      this.removeBreakpoint(breakKeyword);
+      let enabled = true;
+      if (element) {
+        const breakpointEntryElement = containerToBreakpointEntry.get(element);
+        const checkboxElement =
+            breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
+        if (checkboxElement) {
+          enabled = checkboxElement.checked;
         }
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, enabled);
-        this.setBreakpoint(text);
-        this.#list.selectItem(text);
-      } else if (element) {
+      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, enabled);
+      this.setBreakpoint(newText);
+      this.#list.selectItem(newText);
+      this.focus();
+    };
+
+    const cancel = (inputElement: Element, element?: Element): void => {
+      this.removeListElement(inputElement);
+      if (element) {
         element.classList.remove('hidden');
       }
       this.focus();
-    }
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, element);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   flavorChanged(_object: Object|null): void {

package/front_end/panels/coverage/CoverageView.ts

@@ -542,10 +542,10 @@ export class CoverageView extends UI.Widget.VBox {
       const used = total - unused;
       const percentUsed = total ? Math.round(100 * used / total) : 0;
       return i18nString(UIStrings.sOfSSUsedSoFarSUnused, {
-        PH1: Platform.NumberUtilities.bytesToString(used),
-        PH2: Platform.NumberUtilities.bytesToString(total),
+        PH1: i18n.ByteUtilities.bytesToString(used),
+        PH2: i18n.ByteUtilities.bytesToString(total),
         PH3: percentUsed,
-        PH4: Platform.NumberUtilities.bytesToString(unused),
+        PH4: i18n.ByteUtilities.bytesToString(unused),
       });
     }
   }

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -51,6 +51,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
         cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onComputedStyleChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onComputedStyleChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onComputedStyleChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onComputedStyleChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
       ];
@@ -59,6 +60,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 
   private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|null): void {
     delete this.computedStylePromise;
+    // If the event contains `nodeId` and that's not the same as this node's id
+    // we don't emit the COMPUTED_STYLE_CHANGED event.
+    if (event?.data && 'nodeId' in event.data && event.data.nodeId !== this.nodeInternal?.id) {
+      return;
+    }
+
     this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
   }
 
@@ -125,8 +132,8 @@ export const enum Events {
 }
 
 export type ComputedStyleChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|
-                                        SDK.CSSModel.StyleSheetChangedEvent|void|SDK.CSSModel.PseudoStateForcedEvent|
-                                        null;
+                                        SDK.CSSModel.StyleSheetChangedEvent|SDK.CSSModel.PseudoStateForcedEvent|
+                                        SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
 
 export type EventTypes = {
   [Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,