chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -8,51 +8,50 @@ import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
 import type {AnnotationModifiedEvent} from './ModificationsManager.js';
-import type * as Overlays from './overlays/overlays.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description text used to announce to a screen reader that they have entered the mode to edit the label
+   * @description text used to announce to a screen reader that they have entered the mode to edit the label
    */
   srEnterLabelEditMode: 'Editing the annotation label text',
   /**
-   *@description text used to announce to a screen reader that the entry label text has been updated
-   *@example {Hello world} PH1
+   * @description text used to announce to a screen reader that the entry label text has been updated
+   * @example {Hello world} PH1
    */
   srLabelTextUpdated: 'Label updated to {PH1}',
   /**
-   *@description text used to announce to a screen reader that the bounds of a time range annotation have been upodated
-   *@example {13ms} PH1
-   *@example {20ms} PH2
+   * @description text used to announce to a screen reader that the bounds of a time range annotation have been upodated
+   * @example {13ms} PH1
+   * @example {20ms} PH2
    */
   srTimeRangeBoundsUpdated: 'Time range updated, starting at {PH1} and ending at {PH2}',
   /**
-   *@description label for a time range overlay
+   * @description label for a time range overlay
    */
   timeRange: 'time range',
   /**
-   *@description label for a entry label overlay
+   * @description label for a entry label overlay
    */
   entryLabel: 'entry label',
   /**
-   *@description label for a connected entries overlay
+   * @description label for a connected entries overlay
    */
   entriesLink: 'connected entries',
   /**
-   *@description screen reader text to announce that an annotation has been removed
-   *@example {Entry Label} PH1
+   * @description screen reader text to announce that an annotation has been removed
+   * @example {Entry Label} PH1
    */
   srAnnotationRemoved: 'The {PH1} annotation has been removed',
   /**
-   *@description screen reader text to announce that an annotation has been added
-   *@example {Entry Label} PH1
+   * @description screen reader text to announce that an annotation has been added
+   * @example {Entry Label} PH1
    */
   srAnnotationAdded: 'The {PH1} annotation has been added',
   /**
-   *@description screen reader text to announce the two events that the connected entries annotation links to
-   *@example {Paint} PH1
-   *@example {Function call} PH2
+   * @description screen reader text to announce the two events that the connected entries annotation links to
+   * @example {Paint} PH1
+   * @example {Function call} PH2
    */
   srEntriesLinked: 'The connected entries annotation now links from {PH1} to {PH2}',
 
@@ -136,27 +135,27 @@ export function getAnnotationWindow(
   return annotationWindow;
 }
 
-export function isTimeRangeLabel(overlay: Overlays.Overlays.TimelineOverlay):
-    overlay is Overlays.Overlays.TimeRangeLabel {
+export function isTimeRangeLabel(overlay: Trace.Types.Overlays.Overlay):
+    overlay is Trace.Types.Overlays.TimeRangeLabel {
   return overlay.type === 'TIME_RANGE';
 }
 
-export function isEntriesLink(overlay: Overlays.Overlays.TimelineOverlay): overlay is Overlays.Overlays.EntriesLink {
+export function isEntriesLink(overlay: Trace.Types.Overlays.Overlay): overlay is Trace.Types.Overlays.EntriesLink {
   return overlay.type === 'ENTRIES_LINK';
 }
 
-export function isEntryLabel(overlay: Overlays.Overlays.TimelineOverlay): overlay is Overlays.Overlays.EntryLabel {
+export function isEntryLabel(overlay: Trace.Types.Overlays.Overlay): overlay is Trace.Types.Overlays.EntryLabel {
   return overlay.type === 'ENTRY_LABEL';
 }
 
-function labelForOverlay(overlay: Overlays.Overlays.TimelineOverlay): string|null {
+function labelForOverlay(overlay: Trace.Types.Overlays.Overlay): string|null {
   if (isTimeRangeLabel(overlay) || isEntryLabel(overlay)) {
     return overlay.label;
   }
   return null;
 }
 
-export function ariaDescriptionForOverlay(overlay: Overlays.Overlays.TimelineOverlay): string|null {
+export function ariaDescriptionForOverlay(overlay: Trace.Types.Overlays.Overlay): string|null {
   if (isTimeRangeLabel(overlay)) {
     return i18nString(UIStrings.timeRange);
   }
@@ -173,6 +172,9 @@ export function ariaDescriptionForOverlay(overlay: Overlays.Overlays.TimelineOve
 }
 
 export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent): string|null {
+  if (event.muteAriaNotifications) {
+    return null;
+  }
   const {overlay, action} = event;
   switch (action) {
     case 'Remove': {
@@ -228,6 +230,9 @@ export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent)
     case 'EnterLabelEditState': {
       return (i18nString(UIStrings.srEnterLabelEditMode));
     }
+    case 'LabelBringForward': {
+      break;
+    }
     default:
       Platform.assertNever(action, 'Unsupported action for AnnotationModifiedEvent');
   }

package/front_end/panels/timeline/AppenderUtils.ts

@@ -14,8 +14,8 @@ const UIStrings = {
    * @description Text in the Performance panel to show how long was spent in a particular part of the code.
    * The first placeholder is the total time taken for this node and all children, the second is the self time
    * (time taken in this node, without children included).
-   *@example {10ms} PH1
-   *@example {10ms} PH2
+   * @example {10ms} PH1
+   * @example {10ms} PH2
    */
   sSelfS: '{PH1} (self {PH2})',
 } as const;

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -111,7 +111,7 @@ export interface TrackAppender {
    * Appends into the flame chart data the data corresponding to a track.
    * @param level the horizontal level of the flame chart events where the
    * track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -574,19 +574,6 @@ export class CompatibilityTracksAppender {
     return result;
   }
 
-  /**
-   * Sets the visible tracks internally
-   * @param visibleTracks set with the names of the visible track
-   * appenders. If undefined, all tracks are set to be visible.
-   */
-  setVisibleTracks(visibleTracks?: Set<TrackAppenderName>): void {
-    if (!visibleTracks) {
-      this.#visibleTrackNames = new Set([...TrackNames]);
-      return;
-    }
-    this.#visibleTrackNames = visibleTracks;
-  }
-
   getDrawOverride(event: Trace.Types.Events.Event, level: number): DrawOverride|undefined {
     const track = this.#trackForLevel.get(level);
     if (!track) {

package/front_end/panels/timeline/CountersGraph.ts

@@ -44,29 +44,29 @@ import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 
 const UIStrings = {
   /**
-   *@description Text for a heap profile type
+   * @description Text for a heap profile type
    */
   jsHeap: 'JS heap',
   /**
-   *@description Text for documents, a type of resources
+   * @description Text for documents, a type of resources
    */
   documents: 'Documents',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   nodes: 'Nodes',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   listeners: 'Listeners',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   gpuMemory: 'GPU memory',
   /**
-   *@description Range text content in Counters Graph of the Performance panel
-   *@example {2} PH1
-   *@example {10} PH2
+   * @description Range text content in Counters Graph of the Performance panel
+   * @example {2} PH1
+   * @example {10} PH2
    */
   ss: '[{PH1} – {PH2}]',
   /**
@@ -416,15 +416,14 @@ export class CounterUI {
   counter: Counter;
   private readonly formatter: (arg0: number) => string;
   private readonly setting: Common.Settings.Setting<boolean>;
-  private filter: UI.Toolbar.ToolbarSettingCheckbox;
-  private range: HTMLElement;
-  private value: HTMLElement;
+  private readonly filter: UI.Toolbar.ToolbarSettingCheckbox;
+  private readonly value: HTMLElement;
   graphColor: string;
   limitColor: string|null|undefined;
   graphYValues: number[];
   private readonly verticalPadding: number;
-  private currentValueLabel: string;
-  private marker: HTMLElement;
+  private readonly counterName: Common.UIString.LocalizedString;
+  private readonly marker: HTMLElement;
 
   constructor(
       countersPane: CountersGraph, title: Common.UIString.LocalizedString, settingsKey: string, graphColor: string,
@@ -447,7 +446,6 @@ export class CounterUI {
     }
     this.filter.element.addEventListener('click', this.toggleCounterGraph.bind(this));
     countersPane.toolbar.appendToolbarItem(this.filter);
-    this.range = this.filter.element.createChild('span', 'range');
 
     this.value = (countersPane.currentValuesBar as HTMLElement).createChild('span', 'memory-counter-value');
     this.value.style.color = graphColor;
@@ -458,20 +456,31 @@ export class CounterUI {
     this.graphYValues = [];
     this.verticalPadding = 10;
 
-    this.currentValueLabel = title;
+    this.counterName = title;
     this.marker = countersPane.canvasContainer.createChild('div', 'memory-counter-marker');
     this.marker.style.backgroundColor = graphColor;
     this.clearCurrentValueAndMarker();
   }
 
+  /**
+   * Updates both the user visible text and the title & aria-label for the
+   * checkbox label shown in the toolbar
+   */
+  #updateFilterLabel(text: Common.UIString.LocalizedString): void {
+    this.filter.setLabelText(text);
+    this.filter.setTitle(text);
+  }
+
   reset(): void {
-    this.range.textContent = '';
+    this.#updateFilterLabel(this.counterName);
   }
 
   setRange(minValue: number, maxValue: number): void {
     const min = this.formatter(minValue);
     const max = this.formatter(maxValue);
-    this.range.textContent = i18nString(UIStrings.ss, {PH1: min, PH2: max});
+    const rangeText = i18nString(UIStrings.ss, {PH1: min, PH2: max});
+    const newLabelText = `${this.counterName} ${rangeText}` as Common.UIString.LocalizedString;
+    this.#updateFilterLabel(newLabelText);
   }
 
   private toggleCounterGraph(): void {
@@ -492,7 +501,7 @@ export class CounterUI {
     }
     const index = this.recordIndexAt(x);
     const value = Platform.NumberUtilities.withThousandsSeparator(this.counter.values[index]);
-    this.value.textContent = `${this.currentValueLabel}: ${value}`;
+    this.value.textContent = `${this.counterName}: ${value}`;
     const y = this.graphYValues[index] / window.devicePixelRatio;
     this.marker.style.left = x + 'px';
     this.marker.style.top = y + 'px';
@@ -579,7 +588,7 @@ export class CounterUI {
   }
 }
 
-export class Calculator implements PerfUI.TimelineGrid.Calculator {
+export class Calculator implements Calculator {
   private minimumBoundaryInternal: number;
   private maximumBoundaryInternal: number;
   private workingArea: number;

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -19,15 +19,15 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text for the start time of an activity
+   * @description Text for the start time of an activity
    */
   startTime: 'Start time',
   /**
-   *@description Screen reader label for a select box that filters the Performance panel Event Log by duration.
+   * @description Screen reader label for a select box that filters the Performance panel Event Log by duration.
    */
   durationFilter: 'Duration filter',
   /**
-   *@description Text for everything
+   * @description Text for everything
    */
   all: 'All',
 } as const;
@@ -73,29 +73,8 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  private findNodeWithEvent(event: Trace.Types.Events.Event): Trace.Extras.TraceTree.Node|null {
-    if (event.name === Trace.Types.Events.Name.RUN_TASK) {
-      // No node is ever created for the top level RunTask event, so
-      // bail out preemptively
-      return null;
-    }
-    const iterators = [this.currentTree.children().values()];
-    while (iterators.length) {
-      const {done, value: child} = iterators[iterators.length - 1].next();
-      if (done) {
-        iterators.pop();
-        continue;
-      }
-      if (child.event === event) {
-        return child;
-      }
-      iterators.push(child.children().values());
-    }
-    return null;
-  }
-
   private selectEvent(event: Trace.Types.Events.Event, expand?: boolean): void {
-    const node = this.findNodeWithEvent(event);
+    const node = this.eventToTreeNode.get(event);
     if (!node) {
       return;
     }

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -17,14 +17,9 @@ import * as Extensions from './extensions/extensions.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description The subtitle to show (by the side of the track name).
    */
-  customTrackDescription: 'This is a custom track added by a third party.',
-  /**
-   * @description The name of a track, which is a horizontal division of the timeline, synonym with "swimlane".
-   * @example {A track name} PH1
-   */
-  customTrackName: '{PH1} — Custom track',
+  customTrackSubtitle: '— Custom',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ExtensionTrackAppender.ts', UIStrings);
@@ -59,13 +54,13 @@ export class ExtensionTrackAppender implements TrackAppender {
    */
   #appendTopLevelHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const style = buildGroupStyle({shareHeaderLine: false, collapsible: true});
-    const headerTitle = i18nString(UIStrings.customTrackName, {PH1: this.#extensionTopLevelTrack.name});
+    const headerTitle = this.#extensionTopLevelTrack.name;
     const jsLogContext = this.#extensionTopLevelTrack.name === '🅰️ Angular' ? VisualLoggingTrackName.ANGULAR_TRACK :
                                                                              VisualLoggingTrackName.EXTENSION;
     const group = buildTrackHeader(
         jsLogContext, currentLevel, headerTitle, style,
         /* selectable= */ true, expanded);
-    group.description = i18nString(UIStrings.customTrackDescription);
+    group.subtitle = i18nString(UIStrings.customTrackSubtitle);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);
   }
 
@@ -106,8 +101,8 @@ export class ExtensionTrackAppender implements TrackAppender {
   }
 
   setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
-    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
-        event.args.tooltipText :
+    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.devtoolsObj.tooltipText ?
+        event.devtoolsObj.tooltipText :
         this.titleForEvent(event);
     info.formattedTime = getDurationString(event.dur);
   }

package/front_end/panels/timeline/GPUTrackAppender.ts

@@ -15,7 +15,7 @@ import {
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   gpu: 'GPU',
 } as const;
@@ -39,7 +39,7 @@ export class GPUTrackAppender implements TrackAppender {
    * GPU track.
    * @param trackStartLevel the horizontal level of the flame chart events where
    * the track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -60,7 +60,7 @@ export class GPUTrackAppender implements TrackAppender {
    * in the future).
    * @param currentLevel the flame chart level at which the header is
    * appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const style = buildGroupStyle({collapsible: false});

package/front_end/panels/timeline/Initiators.ts

@@ -10,6 +10,22 @@ export interface InitiatorData {
   isEntryHidden?: boolean;
   isInitiatorHidden?: boolean;
 }
+
+export interface InitiatorDataOptions {
+  /**
+   * Used to limit how far back through the chain we go; some large JS apps can
+   * have vast amounts of initiator stacks and it's hard to render them
+   * efficiently, and also not very useful to the user if we just show loads of
+   * them.
+   */
+  predecessorLimit: number;
+}
+
+// We limit the amount of predecessors to 10; on large traces with large JS
+// stacks there can be a huge number of these. It's not super useful to
+// walk back too far and if we draw too many arrows on the timeline, the view becomes very cluttered and noisy.
+const MAX_PREDECESSOR_INITIATOR_LIMIT = 10;
+
 /**
  * Given an event that the user has selected, this function returns all the
  * data of events and their initiators that need to be drawn on the flamechart.
@@ -18,11 +34,9 @@ export interface InitiatorData {
  * work backwards to draw each one, as well as the events initiated directly by the entry.
  */
 export function initiatorsDataToDraw(
-    parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    selectedEvent: Trace.Types.Events.Event,
+    parsedTrace: Trace.Handlers.Types.ParsedTrace, selectedEvent: Trace.Types.Events.Event,
     hiddenEntries: Trace.Types.Events.Event[],
-    expandableEntries: Trace.Types.Events.Event[],
-    ): readonly InitiatorData[] {
+    expandableEntries: Trace.Types.Events.Event[]): readonly InitiatorData[] {
   const initiatorsData = [
     ...findInitiatorDataPredecessors(parsedTrace, selectedEvent, parsedTrace.Initiators.eventToInitiator),
     ...findInitiatorDataDirectSuccessors(selectedEvent, parsedTrace.Initiators.initiatorToEvents),
@@ -49,13 +63,12 @@ function findInitiatorDataPredecessors(
     eventToInitiator: Map<Trace.Types.Events.Event, Trace.Types.Events.Event>,
     ): readonly InitiatorData[] {
   const initiatorsData: InitiatorData[] = [];
-
   let currentEvent: Trace.Types.Events.Event|null = selectedEvent;
   const visited = new Set<Trace.Types.Events.Event>();
   visited.add(currentEvent);
 
   // Build event initiator data up to the selected one
-  while (currentEvent) {
+  while (currentEvent && initiatorsData.length < MAX_PREDECESSOR_INITIATOR_LIMIT) {
     const currentInitiator = eventToInitiator.get(currentEvent);
 
     if (currentInitiator) {

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -19,7 +19,7 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   interactions: 'Interactions',
 } as const;
@@ -47,7 +47,7 @@ export class InteractionsTrackAppender implements TrackAppender {
    * interactions track.
    * @param trackStartLevel the horizontal level of the flame chart events where
    * the track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -115,11 +115,11 @@ export class InteractionsTrackAppender implements TrackAppender {
     decorationsForEvent.push(
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.CANDY,
+          // Where the striping starts is hard. The problem is the whole interaction, isolating the part of it *responsible* for
+          // making the interaction 200ms is hard and our decoration won't do it perfectly. To simplify we just flag all the overage.
+          // AKA the first 200ms of the interaction aren't flagged. A downside is we often flag a lot of render delay.
+          // It'd be fair to shift the candystriping segment earlier in the interaction... Let's see what the feedback is like.
           startAtTime: Trace.Handlers.ModelHandlers.UserInteractions.LONG_INTERACTION_THRESHOLD,
-          // Interaction events have whiskers, so we do not want to candy stripe
-          // the entire duration. The box represents processing duration, so we only
-          // candystripe up to the end of processing.
-          endAtTime: entry.processingEnd,
         },
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,

package/front_end/panels/timeline/IsolateSelector.ts

@@ -10,11 +10,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   *@description Text to show an item is empty
+   * @description Text to show an item is empty
    */
   empty: '(empty)',
   /**
-   *@description Text in isolate selector in Performance panel
+   * @description Text in isolate selector in Performance panel
    */
   selectJavascriptVmInstance: 'Select JavaScript VM instance',
 } as const;

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -5,9 +5,9 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -23,15 +23,15 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   layoutShifts: 'Layout shifts',
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   layoutShiftCluster: 'Layout shift cluster',
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   layoutShift: 'Layout shift',
 } as const;
@@ -63,7 +63,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
    * layout shifts track.
    * @param trackStartLevel the horizontal level of the flame chart events where
    * the track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -144,7 +144,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     if (Trace.Types.Events.isSyntheticLayoutShift(event)) {
       // Screenshots are max 500x500 naturally, but on a laptop in dock-to-right, 500px tall usually doesn't fit.
       // In the future, we may investigate a way to dynamically scale this tooltip content per available space.
-      const maxSize = new UI.Geometry.Size(510, 400);
+      const maxSize = new Geometry.Size(510, 400);
       const vizElem = LayoutShiftsTrackAppender.createShiftViz(event, this.#parsedTrace, maxSize);
       if (vizElem) {
         info.additionalElements.push(vizElem);
@@ -227,7 +227,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
 
   static createShiftViz(
       event: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      maxSize: UI.Geometry.Size): HTMLElement|undefined {
+      maxSize: Geometry.Size): HTMLElement|undefined {
     const screenshots = event.parsedData.screenshots;
     const {viewportRect, devicePixelRatio: dpr} = parsedTrace.Meta;
     const vizContainer = document.createElement('div');
@@ -240,7 +240,8 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       return;
     }
 
-    /** 1 of 3 scaling factors.
+    /**
+     * 1 of 3 scaling factors.
      * The Layout Instability API in Blink, which reports the LayoutShift trace events, is not based on CSS pixels but
      * physical pixels. As such the values in the impacted_nodes field need to be normalized to CSS units in order to
      * map them to the viewport dimensions, which we get in CSS pixels. We do that by dividing the values by the devicePixelRatio.