chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

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

@@ -113,12 +113,12 @@ function estimateSavingsWithGraphs(deferredIds: Set<string>, lanternContext: Lan
   return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0)) as Types.Timing.Milli;
 }
 
-function hasImageLCP(parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContextWithNavigation): boolean {
-  return parsedTrace.LargestImagePaint.lcpRequestByNavigationId.has(context.navigationId);
+function hasImageLCP(data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation): boolean {
+  return data.LargestImagePaint.lcpRequestByNavigationId.has(context.navigationId);
 }
 
 function computeSavings(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContextWithNavigation,
+    data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation,
     renderBlockingRequests: Types.Events.SyntheticNetworkRequest[]):
     Pick<RenderBlockingInsightModel, 'metricSavings'|'requestIdToWastedMs'>|undefined {
   if (!context.lantern) {
@@ -155,7 +155,7 @@ function computeSavings(
     metricSavings.FCP = estimateSavingsWithGraphs(deferredNodeIds, context.lantern);
 
     // In most cases, render blocking resources only affect LCP if LCP isn't an image.
-    if (!hasImageLCP(parsedTrace, context)) {
+    if (!hasImageLCP(data, context)) {
       metricSavings.LCP = metricSavings.FCP;
     }
   }
@@ -176,14 +176,14 @@ function finalize(partialModel: PartialInsightModel<RenderBlockingInsightModel>)
 }
 
 export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): RenderBlockingInsightModel {
+    data: Handlers.Types.HandlerData, context: InsightSetContext): RenderBlockingInsightModel {
   if (!context.navigation) {
     return finalize({
       renderBlockingRequests: [],
     });
   }
 
-  const firstPaintTs = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
+  const firstPaintTs = data.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
                            ?.get(context.navigationId)
                            ?.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP)
                            ?.event?.ts;
@@ -195,7 +195,7 @@ export function generateInsight(
   }
 
   let renderBlockingRequests: Types.Events.SyntheticNetworkRequest[] = [];
-  for (const req of parsedTrace.NetworkRequests.byTime) {
+  for (const req of data.NetworkRequests.byTime) {
     if (req.args.data.frame !== context.frameId) {
       continue;
     }
@@ -223,14 +223,13 @@ export function generateInsight(
       }
     }
 
-    const navigation =
-        Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, parsedTrace.Meta.navigationsByFrameId);
+    const navigation = Helpers.Trace.getNavigationForTraceEvent(req, context.frameId, data.Meta.navigationsByFrameId);
     if (navigation === context.navigation) {
       renderBlockingRequests.push(req);
     }
   }
 
-  const savings = computeSavings(parsedTrace, context, renderBlockingRequests);
+  const savings = computeSavings(data, context, renderBlockingRequests);
 
   // Sort by request duration for insights.
   renderBlockingRequests = renderBlockingRequests.sort((a, b) => {

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

@@ -119,8 +119,8 @@ export function isSlowCSSSelectorInsight(model: InsightModel): model is SlowCSSS
 }
 
 export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): SlowCSSSelectorInsightModel {
-  const selectorStatsData = parsedTrace.SelectorStats;
+    data: Handlers.Types.HandlerData, context: InsightSetContext): SlowCSSSelectorInsightModel {
+  const selectorStatsData = data.SelectorStats;
 
   if (!selectorStatsData) {
     throw new Error('no selector stats data');

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

@@ -78,13 +78,12 @@ export function isThirdPartyInsight(model: InsightModel): model is ThirdPartiesI
 }
 
 export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ThirdPartiesInsightModel {
-  const entitySummaries =
-      Extras.ThirdParties.summarizeByThirdParty(parsedTrace as Handlers.Types.ParsedTrace, context.bounds);
+    data: Handlers.Types.HandlerData, context: InsightSetContext): ThirdPartiesInsightModel {
+  const entitySummaries = Extras.ThirdParties.summarizeByThirdParty(data as Handlers.Types.HandlerData, context.bounds);
 
-  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
+  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? data.Meta.mainFrameURL;
   const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
-      Handlers.Helpers.makeUpEntity(parsedTrace.Renderer.entityMappings.createdEntityCache, firstPartyUrl);
+      Handlers.Helpers.makeUpEntity(data.Renderer.entityMappings.createdEntityCache, firstPartyUrl);
 
   return finalize({
     relatedEvents: getRelatedEvents(entitySummaries, firstPartyEntity),

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

@@ -52,9 +52,12 @@ function finalize(partialModel: PartialInsightModel<ViewportInsightModel>): View
   };
 }
 
-export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ViewportInsightModel {
-  const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {
+export function isViewportInsight(model: InsightModel): model is ViewportInsightModel {
+  return model.insightKey === InsightKeys.VIEWPORT;
+}
+
+export function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): ViewportInsightModel {
+  const viewportEvent = data.UserInteractions.parseMetaViewportEvents.find(event => {
     if (event.args.data.frame !== context.frameId) {
       return false;
     }
@@ -62,7 +65,7 @@ export function generateInsight(
     return Helpers.Timing.eventIsInBounds(event, context.bounds);
   });
 
-  const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
+  const compositorEvents = data.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
     if (event.args.frame !== context.frameId) {
       return false;
     }
@@ -88,7 +91,7 @@ export function generateInsight(
   for (const event of compositorEvents) {
     if (!event.args.is_mobile_optimized) {
       // Grab all the pointer events with at least 50ms of input delay.
-      const longPointerInteractions = [...parsedTrace.UserInteractions.interactionsOverThreshold.values()].filter(
+      const longPointerInteractions = [...data.UserInteractions.interactionsOverThreshold.values()].filter(
           interaction => Handlers.ModelHandlers.UserInteractions.categoryOfInteraction(interaction) === 'POINTER' &&
               interaction.inputDelay >= 50_000);
 

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

@@ -150,4 +150,5 @@ export const enum InsightKeys {
   SLOW_CSS_SELECTOR = 'SlowCSSSelector',
   VIEWPORT = 'Viewport',
   MODERN_HTTP = 'ModernHTTP',
+  CACHE = 'Cache',
 }

package/front_end/models/trace/lantern/testing/MetricTestUtils.ts

@@ -15,15 +15,15 @@ function toLanternTrace(traceEvents: readonly Trace.Types.Events.Event[]): Lante
   };
 }
 
-async function runTrace(context: Mocha.Suite|Mocha.Context, trace: Lantern.Types.Trace) {
+async function runTraceProcessor(context: Mocha.Suite|Mocha.Context, trace: Lantern.Types.Trace) {
   TraceLoader.TraceLoader.setTestTimeout(context);
 
   const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
   await processor.parse(trace.traceEvents as Trace.Types.Events.Event[], {isCPUProfile: false, isFreshRecording: true});
-  if (!processor.parsedTrace) {
+  if (!processor.data) {
     throw new Error('No data');
   }
-  return processor.parsedTrace;
+  return processor.data;
 }
 
 async function getComputationDataFromFixture(context: Mocha.Suite|Mocha.Context, {trace, settings, url}: {
@@ -35,28 +35,28 @@ async function getComputationDataFromFixture(context: Mocha.Suite|Mocha.Context,
   if (!settings.throttlingMethod) {
     settings.throttlingMethod = 'simulate';
   }
-  const parsedTrace = await runTrace(context, trace);
-  const requests = Trace.LanternComputationData.createNetworkRequests(trace, parsedTrace);
+  const data = await runTraceProcessor(context, trace);
+  const requests = Trace.LanternComputationData.createNetworkRequests(trace, data);
   const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
   if (!networkAnalysis) {
     throw new Error('no networkAnalysis');
   }
 
-  const frameId = parsedTrace.Meta.mainFrameId;
-  const navigationId = parsedTrace.Meta.mainFrameNavigations[0].args.data?.navigationId;
+  const frameId = data.Meta.mainFrameId;
+  const navigationId = data.Meta.mainFrameNavigations[0].args.data?.navigationId;
   if (!navigationId) {
     throw new Error('no navigation id found');
   }
 
   return {
     simulator: Lantern.Simulation.Simulator.createSimulator({...settings, networkAnalysis}),
-    graph: Trace.LanternComputationData.createGraph(requests, trace, parsedTrace, url),
-    processedNavigation: Trace.LanternComputationData.createProcessedNavigation(parsedTrace, frameId, navigationId),
+    graph: Trace.LanternComputationData.createGraph(requests, trace, data, url),
+    processedNavigation: Trace.LanternComputationData.createProcessedNavigation(data, frameId, navigationId),
   };
 }
 
 export {
   getComputationDataFromFixture,
-  runTrace,
+  runTraceProcessor as runTrace,
   toLanternTrace,
 };

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -434,96 +434,96 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
 const elementsToAXBreadcrumb = new WeakMap<Element, AXBreadcrumb>();
 
 export class AXBreadcrumb {
-  private readonly axNodeInternal: SDK.AccessibilityModel.AccessibilityNode;
-  private readonly elementInternal: HTMLDivElement;
-  private nodeElementInternal: HTMLDivElement;
+  readonly #axNode: SDK.AccessibilityModel.AccessibilityNode;
+  readonly #element: HTMLDivElement;
+  #nodeElement: HTMLDivElement;
   private readonly nodeWrapper: HTMLDivElement;
   private readonly selectionElement: HTMLDivElement;
   private readonly childrenGroupElement: HTMLDivElement;
   private readonly children: AXBreadcrumb[];
   private hovered: boolean;
-  private preselectedInternal: boolean;
+  #preselected: boolean;
   private parent: AXBreadcrumb|null;
-  private inspectedInternal: boolean;
+  #inspected: boolean;
   expandLoggable = {};
   constructor(axNode: SDK.AccessibilityModel.AccessibilityNode, depth: number, inspected: boolean) {
-    this.axNodeInternal = axNode;
+    this.#axNode = axNode;
 
-    this.elementInternal = document.createElement('div');
-    this.elementInternal.classList.add('ax-breadcrumb');
-    this.elementInternal.setAttribute(
+    this.#element = document.createElement('div');
+    this.#element.classList.add('ax-breadcrumb');
+    this.#element.setAttribute(
         'jslog',
         `${VisualLogging.treeItem().track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter'})}`);
-    elementsToAXBreadcrumb.set(this.elementInternal, this);
+    elementsToAXBreadcrumb.set(this.#element, this);
 
-    this.nodeElementInternal = document.createElement('div');
-    this.nodeElementInternal.classList.add('ax-node');
-    UI.ARIAUtils.markAsTreeitem(this.nodeElementInternal);
-    this.nodeElementInternal.tabIndex = -1;
-    this.elementInternal.appendChild(this.nodeElementInternal);
+    this.#nodeElement = document.createElement('div');
+    this.#nodeElement.classList.add('ax-node');
+    UI.ARIAUtils.markAsTreeitem(this.#nodeElement);
+    this.#nodeElement.tabIndex = -1;
+    this.#element.appendChild(this.#nodeElement);
     this.nodeWrapper = document.createElement('div');
     this.nodeWrapper.classList.add('wrapper');
-    this.nodeElementInternal.appendChild(this.nodeWrapper);
+    this.#nodeElement.appendChild(this.nodeWrapper);
 
     this.selectionElement = document.createElement('div');
     this.selectionElement.classList.add('selection');
     this.selectionElement.classList.add('fill');
-    this.nodeElementInternal.appendChild(this.selectionElement);
+    this.#nodeElement.appendChild(this.selectionElement);
 
     this.childrenGroupElement = document.createElement('div');
     this.childrenGroupElement.classList.add('children');
     UI.ARIAUtils.markAsGroup(this.childrenGroupElement);
-    this.elementInternal.appendChild(this.childrenGroupElement);
+    this.#element.appendChild(this.childrenGroupElement);
 
     this.children = [];
     this.hovered = false;
-    this.preselectedInternal = false;
+    this.#preselected = false;
     this.parent = null;
 
-    this.inspectedInternal = inspected;
-    this.nodeElementInternal.classList.toggle('inspected', inspected);
+    this.#inspected = inspected;
+    this.#nodeElement.classList.toggle('inspected', inspected);
 
-    this.nodeElementInternal.style.paddingLeft = (16 * depth + 4) + 'px';
+    this.#nodeElement.style.paddingLeft = (16 * depth + 4) + 'px';
 
-    if (this.axNodeInternal.ignored()) {
+    if (this.#axNode.ignored()) {
       this.appendIgnoredNodeElement();
     } else {
-      this.appendRoleElement(this.axNodeInternal.role());
-      const axNodeName = this.axNodeInternal.name();
+      this.appendRoleElement(this.#axNode.role());
+      const axNodeName = this.#axNode.name();
       if (axNodeName?.value) {
         this.nodeWrapper.createChild('span', 'separator').textContent = '\xA0';
         this.appendNameElement(axNodeName.value as string);
       }
     }
 
-    if (!this.axNodeInternal.ignored() && this.axNodeInternal.hasOnlyUnloadedChildren()) {
-      this.nodeElementInternal.classList.add('children-unloaded');
-      UI.ARIAUtils.setExpanded(this.nodeElementInternal, false);
+    if (!this.#axNode.ignored() && this.#axNode.hasOnlyUnloadedChildren()) {
+      this.#nodeElement.classList.add('children-unloaded');
+      UI.ARIAUtils.setExpanded(this.#nodeElement, false);
       VisualLogging.registerLoggable(
-          this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal, new DOMRect(0, 0, 16, 16));
+          this.expandLoggable, `${VisualLogging.expand()}`, this.#element, new DOMRect(0, 0, 16, 16));
     }
 
-    if (!this.axNodeInternal.isDOMNode()) {
-      this.nodeElementInternal.classList.add('no-dom-node');
+    if (!this.#axNode.isDOMNode()) {
+      this.#nodeElement.classList.add('no-dom-node');
     }
   }
 
   element(): HTMLElement {
-    return this.elementInternal;
+    return this.#element;
   }
 
   nodeElement(): HTMLElement {
-    return this.nodeElementInternal;
+    return this.#nodeElement;
   }
 
   appendChild(breadcrumb: AXBreadcrumb): void {
     this.children.push(breadcrumb);
     breadcrumb.setParent(this);
-    this.nodeElementInternal.classList.add('parent');
-    UI.ARIAUtils.setExpanded(this.nodeElementInternal, true);
+    this.#nodeElement.classList.add('parent');
+    UI.ARIAUtils.setExpanded(this.#nodeElement, true);
     this.childrenGroupElement.appendChild(breadcrumb.element());
     VisualLogging.registerLoggable(
-        this.expandLoggable, `${VisualLogging.expand()}`, this.elementInternal, new DOMRect(0, 0, 16, 16));
+        this.expandLoggable, `${VisualLogging.expand()}`, this.#element, new DOMRect(0, 0, 16, 16));
   }
 
   hasExpandedChildren(): number {
@@ -535,26 +535,26 @@ export class AXBreadcrumb {
   }
 
   preselected(): boolean {
-    return this.preselectedInternal;
+    return this.#preselected;
   }
 
   setPreselected(preselected: boolean, selectedByUser: boolean): void {
-    if (this.preselectedInternal === preselected) {
+    if (this.#preselected === preselected) {
       return;
     }
-    this.preselectedInternal = preselected;
-    this.nodeElementInternal.classList.toggle('preselected', preselected);
+    this.#preselected = preselected;
+    this.#nodeElement.classList.toggle('preselected', preselected);
     if (preselected) {
-      this.nodeElementInternal.tabIndex = 0;
+      this.#nodeElement.tabIndex = 0;
     } else {
-      this.nodeElementInternal.tabIndex = -1;
+      this.#nodeElement.tabIndex = -1;
     }
-    if (this.preselectedInternal) {
+    if (this.#preselected) {
       if (selectedByUser) {
-        this.nodeElementInternal.focus();
+        this.#nodeElement.focus();
       }
-      if (!this.inspectedInternal) {
-        this.axNodeInternal.highlightDOMNode();
+      if (!this.#inspected) {
+        this.#axNode.highlightDOMNode();
       } else {
         SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
       }
@@ -566,23 +566,23 @@ export class AXBreadcrumb {
       return;
     }
     this.hovered = hovered;
-    this.nodeElementInternal.classList.toggle('hovered', hovered);
+    this.#nodeElement.classList.toggle('hovered', hovered);
     if (this.hovered) {
-      this.nodeElementInternal.classList.toggle('hovered', true);
-      this.axNodeInternal.highlightDOMNode();
+      this.#nodeElement.classList.toggle('hovered', true);
+      this.#axNode.highlightDOMNode();
     }
   }
 
   axNode(): SDK.AccessibilityModel.AccessibilityNode {
-    return this.axNodeInternal;
+    return this.#axNode;
   }
 
   inspected(): boolean {
-    return this.inspectedInternal;
+    return this.#inspected;
   }
 
   isDOMNode(): boolean {
-    return this.axNodeInternal.isDOMNode();
+    return this.#axNode.isDOMNode();
   }
 
   nextBreadcrumb(): AXBreadcrumb|null {

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -16,8 +16,8 @@ import {SourceOrderPane} from './SourceOrderView.js';
 let accessibilitySidebarViewInstance: AccessibilitySidebarView;
 
 export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget {
-  private nodeInternal: SDK.DOMModel.DOMNode|null;
-  private axNodeInternal: SDK.AccessibilityModel.AccessibilityNode|null;
+  #node: SDK.DOMModel.DOMNode|null;
+  #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
   private readonly sidebarPaneStack: UI.View.ViewLocation;
   private readonly breadcrumbsSubPane: AXBreadcrumbsPane;
@@ -27,8 +27,8 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   private constructor(throttlingTimeout?: number) {
     super(false /* useShadowDom */, throttlingTimeout);
     this.element.classList.add('accessibility-sidebar-view');
-    this.nodeInternal = null;
-    this.axNodeInternal = null;
+    this.#node = null;
+    this.#axNode = null;
     this.skipNextPullNode = false;
     this.sidebarPaneStack = UI.ViewManager.ViewManager.instance().createStackLocation();
     this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
@@ -55,16 +55,16 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.nodeInternal;
+    return this.#node;
   }
 
   axNode(): SDK.AccessibilityModel.AccessibilityNode|null {
-    return this.axNodeInternal;
+    return this.#axNode;
   }
 
   setNode(node: SDK.DOMModel.DOMNode|null, fromAXTree?: boolean): void {
     this.skipNextPullNode = Boolean(fromAXTree);
-    this.nodeInternal = node;
+    this.#node = node;
     this.update();
   }
 
@@ -73,7 +73,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
       return;
     }
 
-    this.axNodeInternal = axNode;
+    this.#axNode = axNode;
 
     if (axNode.isDOMNode()) {
       void this.sidebarPaneStack.showView(this.ariaSubPane, this.axNodeSubPane);

package/front_end/panels/animation/AnimationTimeline.ts

@@ -234,7 +234,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   #selectedGroup!: SDK.AnimationModel.AnimationGroup|null;
   #renderQueue!: AnimationUI[];
   #defaultDuration: number;
-  #durationInternal: number;
+  #duration: number;
   #timelineControlsWidth: number;
   readonly #nodesMap: Map<number, NodeUI>;
   #uiAnimations: AnimationUI[];
@@ -298,7 +298,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     noEffectSelectedPlaceholder.show(timelineHint);
 
     /** @constant */ this.#defaultDuration = 100;
-    this.#durationInternal = this.#defaultDuration;
+    this.#duration = this.#defaultDuration;
     this.#nodesMap = new Map();
     this.#uiAnimations = [];
     this.#groupBuffer = [];
@@ -593,11 +593,11 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   duration(): number {
-    return this.#durationInternal;
+    return this.#duration;
   }
 
   setDuration(duration: number): void {
-    this.#durationInternal = duration;
+    this.#duration = duration;
     this.scheduleRedraw();
   }
 
@@ -613,7 +613,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.#nodesMap.clear();
     this.#animationsMap.clear();
     this.#animationsContainer.removeChildren();
-    this.#durationInternal = this.#defaultDuration;
+    this.#duration = this.#defaultDuration;
     this.#timelineScrubber.classList.add('hidden');
     this.#gridHeader.classList.remove('scrubber-enabled');
     this.#selectedGroup = null;

package/front_end/panels/animation/AnimationUI.ts

@@ -39,7 +39,7 @@ interface CachedElement {
 }
 
 export class AnimationUI {
-  #animationInternal: SDK.AnimationModel.AnimationImpl;
+  #animation: SDK.AnimationModel.AnimationImpl;
   #timeline: AnimationTimeline;
   #keyframes?: SDK.AnimationModel.KeyframeStyle[];
   #nameElement: HTMLElement;
@@ -58,10 +58,10 @@ export class AnimationUI {
   #downMouseX?: number;
 
   constructor(animation: SDK.AnimationModel.AnimationImpl, timeline: AnimationTimeline, parentElement: Element) {
-    this.#animationInternal = animation;
+    this.#animation = animation;
     this.#timeline = timeline;
 
-    const keyframesRule = this.#animationInternal.source().keyframesRule();
+    const keyframesRule = this.#animation.source().keyframesRule();
     if (keyframesRule) {
       this.#keyframes = keyframesRule.keyframes();
       if (animation.viewOrScrollTimeline() && animation.playbackRate() < 0) {
@@ -69,7 +69,7 @@ export class AnimationUI {
       }
     }
     this.#nameElement = parentElement.createChild('div', 'animation-name');
-    this.#nameElement.textContent = this.#animationInternal.name();
+    this.#nameElement.textContent = this.#animation.name();
 
     this.#svg = UI.UIUtils.createSVGChild(parentElement, 'svg', 'animation-ui');
     this.#svg.setAttribute('height', Options.AnimationSVGHeight.toString());
@@ -78,7 +78,7 @@ export class AnimationUI {
     this.#activeIntervalGroup = UI.UIUtils.createSVGChild(this.#svg, 'g');
     this.#activeIntervalGroup.setAttribute('jslog', `${VisualLogging.animationClip().track({drag: true})}`);
 
-    if (!this.#animationInternal.viewOrScrollTimeline()) {
+    if (!this.#animation.viewOrScrollTimeline()) {
       UI.UIUtils.installDragHandle(
           this.#activeIntervalGroup, this.mouseDown.bind(this, Events.ANIMATION_DRAG, null), this.mouseMove.bind(this),
           this.mouseUp.bind(this), '-webkit-grabbing', '-webkit-grab');
@@ -90,7 +90,7 @@ export class AnimationUI {
 
     this.#movementInMs = 0;
     this.#keyboardMovementRateMs = 50;
-    this.#color = AnimationUI.colorForAnimation(this.#animationInternal);
+    this.#color = AnimationUI.colorForAnimation(this.#animation);
   }
 
   static colorForAnimation(animation: SDK.AnimationModel.AnimationImpl): string {
@@ -110,7 +110,7 @@ export class AnimationUI {
   }
 
   animation(): SDK.AnimationModel.AnimationImpl {
-    return this.#animationInternal;
+    return this.#animation;
   }
 
   get nameElement(): HTMLElement {
@@ -152,7 +152,7 @@ export class AnimationUI {
       this.#delayLine = this.createLine(parentElement, 'animation-delay-line');
       this.#endDelayLine = this.createLine(parentElement, 'animation-delay-line');
     }
-    const fill = this.#animationInternal.source().fill();
+    const fill = this.#animation.source().fill();
     this.#delayLine.classList.toggle('animation-fill', fill === 'backwards' || fill === 'both');
     const margin = Options.AnimationMargin;
     this.#delayLine.setAttribute('x1', margin.toString());
@@ -162,15 +162,14 @@ export class AnimationUI {
     this.#endDelayLine.classList.toggle('animation-fill', forwardsFill);
     const leftMargin = Math.min(
         this.#timeline.width(),
-        (this.delayOrStartTime() + this.duration() * this.#animationInternal.source().iterations()) *
+        (this.delayOrStartTime() + this.duration() * this.#animation.source().iterations()) *
             this.#timeline.pixelTimeRatio());
     (this.#endDelayLine as HTMLElement).style.transform = 'translateX(' + leftMargin.toFixed(2) + 'px)';
     this.#endDelayLine.setAttribute('x1', margin.toString());
     this.#endDelayLine.setAttribute(
         'x2',
-        forwardsFill ?
-            (this.#timeline.width() - leftMargin + margin).toFixed(2) :
-            (this.#animationInternal.source().endDelay() * this.#timeline.pixelTimeRatio() + margin).toFixed(2));
+        forwardsFill ? (this.#timeline.width() - leftMargin + margin).toFixed(2) :
+                       (this.#animation.source().endDelay() * this.#timeline.pixelTimeRatio() + margin).toFixed(2));
   }
 
   private drawPoint(iteration: number, parentElement: Element, x: number, keyframeIndex: number, attachEvents: boolean):
@@ -242,7 +241,7 @@ export class AnimationUI {
     }
     const group = cache[keyframeIndex];
     group.tabIndex = 0;
-    UI.ARIAUtils.setLabel(group, i18nString(UIStrings.sSlider, {PH1: this.#animationInternal.name()}));
+    UI.ARIAUtils.setLabel(group, i18nString(UIStrings.sSlider, {PH1: this.#animation.name()}));
     group.style.transform = 'translateX(' + leftDistance.toFixed(2) + 'px)';
 
     if (easing === 'linear') {
@@ -279,7 +278,7 @@ export class AnimationUI {
     this.#nameElement.style.width = (this.duration() * this.#timeline.pixelTimeRatio()).toFixed(2) + 'px';
     this.drawDelayLine((this.#svg as HTMLElement));
 
-    if (this.#animationInternal.type() === 'CSSTransition') {
+    if (this.#animation.type() === 'CSSTransition') {
       this.renderTransition();
       return;
     }
@@ -293,9 +292,9 @@ export class AnimationUI {
     // Some iterations are getting rendered in an invisible area if the delay is negative.
     const invisibleAreaWidth =
         this.delayOrStartTime() < 0 ? -this.delayOrStartTime() * this.#timeline.pixelTimeRatio() : 0;
-    for (iteration = 1; iteration < this.#animationInternal.source().iterations() &&
+    for (iteration = 1; iteration < this.#animation.source().iterations() &&
          iterationWidth * (iteration - 1) < invisibleAreaWidth + this.#timeline.width() &&
-         (iterationWidth > 0 || this.#animationInternal.source().iterations() !== Infinity);
+         (iterationWidth > 0 || this.#animation.source().iterations() !== Infinity);
          iteration++) {
       this.renderIteration(this.#tailGroup, iteration);
     }
@@ -315,7 +314,7 @@ export class AnimationUI {
     this.drawAnimationLine(0, activeIntervalGroup);
     this.renderKeyframe(
         0, 0, activeIntervalGroup, Options.AnimationMargin, this.duration() * this.#timeline.pixelTimeRatio(),
-        this.#animationInternal.source().easing());
+        this.#animation.source().easing());
     this.drawPoint(0, activeIntervalGroup, Options.AnimationMargin, 0, true);
     this.drawPoint(
         0, activeIntervalGroup, this.duration() * this.#timeline.pixelTimeRatio() + Options.AnimationMargin, -1, true);
@@ -355,7 +354,7 @@ export class AnimationUI {
   }
 
   private delayOrStartTime(): number {
-    let delay = this.#animationInternal.delayOrStartTime();
+    let delay = this.#animation.delayOrStartTime();
     if (this.#mouseEventType === Events.ANIMATION_DRAG || this.#mouseEventType === Events.START_ENDPOINT_MOVE) {
       delay += this.#movementInMs;
     }
@@ -363,7 +362,7 @@ export class AnimationUI {
   }
 
   private duration(): number {
-    let duration = this.#animationInternal.iterationDuration();
+    let duration = this.#animation.iterationDuration();
     if (this.#mouseEventType === Events.FINISH_ENDPOINT_MOVE) {
       duration += this.#movementInMs;
     } else if (this.#mouseEventType === Events.START_ENDPOINT_MOVE) {
@@ -380,7 +379,7 @@ export class AnimationUI {
     let offset = this.#keyframes[i].offsetAsNumber();
     if (this.#mouseEventType === Events.KEYFRAME_MOVE && i === this.#keyframeMoved) {
       console.assert(i > 0 && i < this.#keyframes.length - 1, 'First and last keyframe cannot be moved');
-      offset += this.#movementInMs / this.#animationInternal.iterationDuration();
+      offset += this.#movementInMs / this.#animation.iterationDuration();
       offset = Math.max(offset, this.#keyframes[i - 1].offsetAsNumber());
       offset = Math.min(offset, this.#keyframes[i + 1].offsetAsNumber());
     }
@@ -436,7 +435,7 @@ export class AnimationUI {
         this.#keyframes[this.#keyframeMoved].setOffset(this.offset(this.#keyframeMoved));
       }
     } else {
-      this.#animationInternal.setTiming(this.duration(), this.delayOrStartTime());
+      this.#animation.setTiming(this.duration(), this.delayOrStartTime());
     }
 
     this.#movementInMs = 0;
@@ -468,7 +467,7 @@ export class AnimationUI {
         this.#keyframes[this.#keyframeMoved].setOffset(this.offset(this.#keyframeMoved));
       }
     } else {
-      this.#animationInternal.setTiming(this.duration(), this.delayOrStartTime());
+      this.#animation.setTiming(this.duration(), this.delayOrStartTime());
     }
     this.setMovementAndRedraw(0);
 
@@ -488,7 +487,7 @@ export class AnimationUI {
       void contextMenu.show();
     }
 
-    void this.#animationInternal.remoteObjectPromise().then(showContextMenu);
+    void this.#animation.remoteObjectPromise().then(showContextMenu);
     event.consume(true);
   }
 }