chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/whats_new/resources/WNDT.md

@@ -0,0 +1,6 @@
+### [Persistent AI chat history](persistent-chat-history)
+The AI assistance panel now persists your chat history across sessions, so you can view your previous conversations with Gemini.
+### [Classic and modern keyboard navigation in Performance](perf-nav)
+The Performance panel now lets you choose your preferred style of keyboard navigation and shows the corresponding list of shortcuts.
+### [Image delivery insight in Performance](perf-image-delivery)
+The Insights tab in the Performance panel now highlights images whose file size you can optimize.

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

@@ -0,0 +1,142 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+// eslint-disable-next-line rulesdir/es-modules-import
+import type * as WhatsNew from './whats_new.js';
+
+const UIStrings = {
+  /**
+   *@description Title of the 'What's New' tool in the bottom drawer
+   */
+  whatsNew: 'What\'s new',
+  /**
+   *@description Command for showing the 'What's New' tool in the bottom drawer
+   */
+  showWhatsNew: 'Show what\'s new',
+  /**
+   *@description Title of an action in the 'What's New' tool to release notes
+   */
+  releaseNotes: 'Release notes',
+  /**
+   *@description Title of an action in the 'What's New' tool to file an issue
+   */
+  reportADevtoolsIssue: 'Report a DevTools issue',
+  /**
+   *@description A search term referring to a software defect (i.e. bug) that can be entered in the command menu
+   */
+  bug: 'bug',
+  /**
+   *@description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   */
+  showWhatsNewAfterEachUpdate: 'Show what\'s new after each update',
+  /**
+   *@description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   */
+  doNotShowWhatsNewAfterEachUpdate: 'Don\'t show what\'s new after each update',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/whats_new/whats_new-meta.ts', UIStrings);
+
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+let loadedHelpModule: (typeof WhatsNew|undefined);
+
+async function loadWhatsNewModule(): Promise<typeof WhatsNew> {
+  if (!loadedHelpModule) {
+    loadedHelpModule = await import('./whats_new.js');
+  }
+  return loadedHelpModule;
+}
+UI.ViewManager.maybeRemoveViewExtension('release-note');
+UI.ActionRegistration.maybeRemoveActionExtension('help.release-notes');
+UI.ActionRegistration.maybeRemoveActionExtension('help.report-issue');
+Common.Settings.maybeRemoveSettingExtension('help.show-release-note');
+UI.ContextMenu.maybeRemoveItem({
+  location: UI.ContextMenu.ItemLocation.MAIN_MENU_HELP_DEFAULT,
+  actionId: 'help.release-notes',
+  order: undefined,
+});
+UI.ContextMenu.maybeRemoveItem({
+  location: UI.ContextMenu.ItemLocation.MAIN_MENU_HELP_DEFAULT,
+  actionId: 'help.report-issue',
+  order: undefined,
+});
+
+Common.Runnable.maybeRemoveLateInitializationRunnable('whats-new');
+
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
+  id: 'release-note',
+  title: i18nLazyString(UIStrings.whatsNew),
+  commandPrompt: i18nLazyString(UIStrings.showWhatsNew),
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
+  order: 1,
+  async loadView() {
+    const WhatsNew = await loadWhatsNewModule();
+    return new WhatsNew.ReleaseNoteView.ReleaseNoteView();
+  },
+});
+
+UI.ActionRegistration.registerActionExtension({
+  category: UI.ActionRegistration.ActionCategory.HELP,
+  actionId: 'help.release-notes',
+  title: i18nLazyString(UIStrings.releaseNotes),
+  async loadActionDelegate() {
+    const WhatsNew = await loadWhatsNewModule();
+    return WhatsNew.WhatsNew.ReleaseNotesActionDelegate.instance();
+  },
+});
+
+UI.ActionRegistration.registerActionExtension({
+  category: UI.ActionRegistration.ActionCategory.HELP,
+  actionId: 'help.report-issue',
+  title: i18nLazyString(UIStrings.reportADevtoolsIssue),
+  async loadActionDelegate() {
+    const WhatsNew = await loadWhatsNewModule();
+    return WhatsNew.WhatsNew.ReportIssueActionDelegate.instance();
+  },
+  tags: [i18nLazyString(UIStrings.bug)],
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  title: i18nLazyString(UIStrings.showWhatsNewAfterEachUpdate),
+  settingName: 'help.show-release-note',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.showWhatsNewAfterEachUpdate),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.doNotShowWhatsNewAfterEachUpdate),
+    },
+  ],
+});
+
+UI.ContextMenu.registerItem({
+  location: UI.ContextMenu.ItemLocation.MAIN_MENU_HELP_DEFAULT,
+  actionId: 'help.release-notes',
+  order: 10,
+});
+
+UI.ContextMenu.registerItem({
+  location: UI.ContextMenu.ItemLocation.MAIN_MENU_HELP_DEFAULT,
+  actionId: 'help.report-issue',
+  order: 11,
+});
+
+Common.Runnable.registerLateInitializationRunnable({
+  id: 'whats-new',
+  async loadRunnable() {
+    const WhatsNew = await loadWhatsNewModule();
+    return WhatsNew.WhatsNew.HelpLateInitialization.instance();
+  },
+});

package/front_end/panels/whats_new/whats_new.ts

@@ -0,0 +1,13 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as ReleaseNoteText from './ReleaseNoteText.js';
+import * as ReleaseNoteView from './ReleaseNoteView.js';
+import * as WhatsNew from './WhatsNewImpl.js';
+
+export {
+  ReleaseNoteText,
+  ReleaseNoteView,
+  WhatsNew,
+};

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as puppeteer from '../../third_party/puppeteer/puppeteer.js';
-import type * as Protocol from '../../generated/protocol.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as puppeteer from '../../third_party/puppeteer/puppeteer.js';
 
 class Transport implements puppeteer.ConnectionTransport {
   #connection: SDK.Connections.ParallelConnectionInterface;
@@ -84,9 +84,10 @@ export class PuppeteerConnectionHelper {
         [] /* contextIds */,
         false /* ignoreHTTPSErrors */,
         undefined /* defaultViewport */,
+        undefined /* DownloadBehavior */,
         undefined /* process */,
         undefined /* closeCallback */,
-        undefined,
+        undefined /* targetFilterCallback */,
         target => isPageTargetCallback((target as puppeteer.Target)._getTargetInfo()),
         false /* waitForInitiallyDiscoveredTargets */,
     );

package/front_end/testing/DOMHelpers.ts

@@ -33,7 +33,6 @@ export const renderElementIntoDOM = (element: HTMLElement, renderOptions: Render
   if (container.childNodes.length !== 0 && !allowMultipleChildren) {
     throw new Error(`renderElementIntoDOM expects the container to be empty ${container.innerHTML}`);
   }
-
   container.appendChild(element);
   return element;
 };
@@ -142,6 +141,11 @@ export function dispatchMouseUpEvent<T extends Element>(element: T, options: Mou
   element.dispatchEvent(clickEvent);
 }
 
+export function dispatchBlurEvent<T extends Element>(element: T, options: FocusEventInit = {}) {
+  const focusEvent = new FocusEvent('blur', options);
+  element.dispatchEvent(focusEvent);
+}
+
 export function dispatchFocusEvent<T extends Element>(element: T, options: FocusEventInit = {}) {
   const focusEvent = new FocusEvent('focus', options);
   element.dispatchEvent(focusEvent);
@@ -262,6 +266,16 @@ export function getCleanTextContentFromElements(el: ShadowRoot|HTMLElement, sele
   });
 }
 
+/**
+ * Returns the text content for the first element matching the given `selector` within the provided `el`.
+ * Will error if no element is found matching the selector.
+ */
+export function getCleanTextContentFromSingleElement(el: ShadowRoot|HTMLElement, selector: string): string {
+  const element = el.querySelector(selector);
+  assert.isOk(element, `Could not find element with selector ${selector}`);
+  return element.textContent ? element.textContent.trim().replace(/[ \n]{2,}/g, ' ') : '';
+}
+
 export function assertNodeTextContent(component: NodeText.NodeText.NodeText, expectedContent: string) {
   assert.isNotNull(component.shadowRoot);
   const content = Array.from(component.shadowRoot.querySelectorAll('span')).map(span => span.textContent).join('');

package/front_end/testing/DataGridHelpers.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as DataGrid from '../ui/components/data_grid/data_grid.js';
-import * as Coordinator from '../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../ui/components/render_coordinator/render_coordinator.js';
 
 import {
   assertElements,
@@ -12,7 +12,6 @@ import {
   getElementWithinComponent,
 } from './DOMHelpers.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 export const getFocusableCell = (shadowRoot: ShadowRoot) => {
   // We only expect one here, but we qSA so we can assert on only one.
   // Can't use td as it may be a th if the user has focused a column header.
@@ -112,7 +111,7 @@ export const emulateUserKeyboardNavigation =
 export const emulateUserFocusingCellAt = async (shadowRoot: ShadowRoot, position: {column: number, row: number}) => {
   const cellToFocus = getCellByIndexes(shadowRoot, position);
   dispatchFocusEvent(cellToFocus);
-  await coordinator.done();
+  await RenderCoordinator.done();
   assertCurrentFocusedCellIs(shadowRoot, position);
 };
 

package/front_end/testing/EnvironmentHelpers.ts

@@ -123,18 +123,15 @@ const REGISTERED_EXPERIMENTS = [
   'font-editor',
   Root.Runtime.ExperimentName.NETWORK_PANEL_FILTER_BAR_REDESIGN,
   Root.Runtime.ExperimentName.AUTOFILL_VIEW,
-  Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS,
-  Root.Runtime.ExperimentName.TIMELINE_INSIGHTS,
   Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE,
-  Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS,
   Root.Runtime.ExperimentName.TIMELINE_SERVER_TIMINGS,
   Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE,
   Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS,
   Root.Runtime.ExperimentName.TIMELINE_ENHANCED_TRACES,
-  Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER,
   Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
   Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS,
   Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION,
+  Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES,
 ];
 
 export async function initializeGlobalVars({reset = true} = {}) {
@@ -287,13 +284,15 @@ export async function initializeGlobalVars({reset = true} = {}) {
     createSettingValue(
         Common.Settings.SettingCategory.CONSOLE, 'console-trace-expand', false, Common.Settings.SettingType.BOOLEAN),
     createSettingValue(
-        Common.Settings.SettingCategory.PERFORMANCE, 'flamechart-mouse-wheel-action', false,
+        Common.Settings.SettingCategory.PERFORMANCE, 'flamechart-selected-navigation', false,
         Common.Settings.SettingType.ENUM),
     createSettingValue(
         Common.Settings.SettingCategory.ELEMENTS, 'show-css-property-documentation-on-hover', false,
         Common.Settings.SettingType.BOOLEAN),
     createSettingValue(
-        Common.Settings.SettingCategory.CONSOLE, 'ai-assistance-enabled', false, Common.Settings.SettingType.BOOLEAN),
+        Common.Settings.SettingCategory.NONE, 'ai-assistance-enabled', false, Common.Settings.SettingType.BOOLEAN),
+    createSettingValue(
+        Common.Settings.SettingCategory.NONE, 'ai-assistance-history-entries', [], Common.Settings.SettingType.ARRAY),
     createSettingValue(
         Common.Settings.SettingCategory.MOBILE, 'emulation.show-device-outline', false,
         Common.Settings.SettingType.BOOLEAN),
@@ -430,7 +429,7 @@ describeWithLocale.only = function(title: string, fn: (this: Mocha.Suite) => voi
   });
 };
 describeWithLocale.skip = function(title: string, fn: (this: Mocha.Suite) => void) {
-  // eslint-disable-next-line rulesdir/check_test_definitions
+  // eslint-disable-next-line rulesdir/check-test-definitions
   return describe.skip(title, function() {
     fn.call(this);
   });
@@ -506,6 +505,7 @@ export function getGetHostConfigStub(config: Root.Runtime.HostConfig): sinon.Sin
   return sinon.stub(settings, 'getHostConfig').returns({
     aidaAvailability: {
       disallowLogging: false,
+      enterprisePolicyValue: 0,
       ...config.aidaAvailability,
     },
     devToolsConsoleInsights: {
@@ -551,6 +551,17 @@ export function getGetHostConfigStub(config: Root.Runtime.HostConfig): sinon.Sin
       schemeBindingEnabled: false,
       ...config.devToolsEnableOriginBoundCookies,
     } as Root.Runtime.HostConfigEnableOriginBoundCookies,
+    devToolsAnimationStylesInStylesTab: {
+      enabled: false,
+      ...config.devToolsAnimationStylesInStylesTab,
+    } as Root.Runtime.HostConfigAnimationStylesInStylesTab,
     isOffTheRecord: false,
+    thirdPartyCookieControls: {
+      thirdPartyCookieRestrictionEnabled: false,
+      thirdPartyCookieMetadataEnabled: true,
+      thirdPartyCookieHeuristicsEnabled: true,
+      managedBlockThirdPartyCookies: 'Unset',
+      ...config.thirdPartyCookieControls,
+    } as Root.Runtime.HostConfigThirdPartyCookieControls,
   });
 }

package/front_end/testing/InsightHelpers.ts

@@ -4,6 +4,17 @@
 
 import * as Trace from '../models/trace/trace.js';
 
+import {TraceLoader} from './TraceLoader.js';
+
+export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
+  const {parsedTrace, insights, metadata} = await TraceLoader.traceEngine(testContext, traceFile);
+  if (!insights) {
+    throw new Error('No insights');
+  }
+
+  return {data: parsedTrace, insights, metadata};
+}
+
 export function createContextForNavigation(
     parsedTrace: Trace.Handlers.Types.ParsedTrace, navigation: Trace.Types.Events.NavigationStart,
     frameId: string): Trace.Insights.Types.InsightSetContextWithNavigation {

package/front_end/testing/NetworkHelpers.ts

@@ -4,14 +4,12 @@
 
 import * as Common from '../core/common/common.js';
 import * as Network from '../panels/network/network.js';
-import * as Coordinator from '../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../ui/components/render_coordinator/render_coordinator.js';
 
 import {
   registerNoopActions,
 } from './EnvironmentHelpers.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export async function createNetworkPanelForMockConnection(): Promise<Network.NetworkPanel.NetworkPanel> {
   registerNoopActions(['network.toggle-recording', 'network.clear']);
 
@@ -33,6 +31,6 @@ export async function createNetworkPanelForMockConnection(): Promise<Network.Net
   const networkPanel = Network.NetworkPanel.NetworkPanel.instance({forceNew: true, displayScreenshotDelay: 0});
   networkPanel.markAsRoot();
   networkPanel.show(document.body);
-  await coordinator.done();
+  await RenderCoordinator.done();
   return networkPanel;
 }

package/front_end/testing/SourceMapEncoder.ts

@@ -141,22 +141,34 @@ export class OriginalScopeBuilder {
     this.#names = names;
   }
 
-  start(line: number, column: number, kind: string, name?: string, variables?: string[]): this {
+  start(
+      line: number, column: number,
+      options?: {name?: string, kind?: string, isStackFrame?: boolean, variables?: string[]}): this {
     if (this.#encodedScope !== '') {
       this.#encodedScope += ',';
     }
 
     const lineDiff = line - this.#lastLine;
     this.#lastLine = line;
-    const flags = (name !== undefined ? 0x1 : 0x0);
-
-    this.#encodedScope += encodeVlqList([lineDiff, column, this.#encodeKind(kind), flags]);
+    let flags = 0;
+    const nameIdxAndKindIdx: number[] = [];
 
-    if (name !== undefined) {
-      this.#encodedScope += encodeVlq(this.#nameIdx(name));
+    if (options?.name) {
+      flags |= SDK.SourceMapScopes.EncodedOriginalScopeFlag.HAS_NAME;
+      nameIdxAndKindIdx.push(this.#nameIdx(options.name));
     }
-    if (variables !== undefined) {
-      this.#encodedScope += encodeVlqList(variables.map(variable => this.#nameIdx(variable)));
+    if (options?.kind) {
+      flags |= SDK.SourceMapScopes.EncodedOriginalScopeFlag.HAS_KIND;
+      nameIdxAndKindIdx.push(this.#encodeKind(options?.kind));
+    }
+    if (options?.isStackFrame) {
+      flags |= SDK.SourceMapScopes.EncodedOriginalScopeFlag.IS_STACK_FRAME;
+    }
+
+    this.#encodedScope += encodeVlqList([lineDiff, column, flags, ...nameIdxAndKindIdx]);
+
+    if (options?.variables) {
+      this.#encodedScope += encodeVlqList(options.variables.map(variable => this.#nameIdx(variable)));
     }
 
     return this;
@@ -218,7 +230,8 @@ export class GeneratedRangeBuilder {
   }
 
   start(line: number, column: number, options?: {
-    isFunctionScope?: boolean,
+    isStackFrame?: boolean,
+    isHidden?: boolean,
     definition?: {sourceIdx: number, scopeIdx: number},
     callsite?: {sourceIdx: number, line: number, column: number},
     bindings?: (string|undefined|{line: number, column: number, name: string|undefined}[])[],
@@ -239,8 +252,11 @@ export class GeneratedRangeBuilder {
     if (options?.callsite) {
       flags |= SDK.SourceMapScopes.EncodedGeneratedRangeFlag.HAS_CALLSITE;
     }
-    if (options?.isFunctionScope) {
-      flags |= SDK.SourceMapScopes.EncodedGeneratedRangeFlag.IS_FUNCTION_SCOPE;
+    if (options?.isStackFrame) {
+      flags |= SDK.SourceMapScopes.EncodedGeneratedRangeFlag.IS_STACK_FRAME;
+    }
+    if (options?.isHidden) {
+      flags |= SDK.SourceMapScopes.EncodedGeneratedRangeFlag.IS_HIDDEN;
     }
     this.#encodedRange += encodeVlq(flags);
 

package/front_end/testing/StubIssue.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Protocol from '../generated/protocol.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import {
   Issue,
   IssueCategory,

package/front_end/testing/TraceHelpers.ts

@@ -56,7 +56,7 @@ export async function getMainFlameChartWithTracks(
   dataProvider.setModel(parsedTrace);
   const tracksAppender = dataProvider.compatibilityTracksAppenderInstance();
   tracksAppender.setVisibleTracks(trackAppenderNames);
-  dataProvider.buildFromTrackAppenders(
+  dataProvider.buildFromTrackAppendersForTest(
       {filterThreadsByName: trackName, expandedTracks: expanded ? trackAppenderNames : undefined});
   const delegate = new MockFlameChartDelegate();
   const flameChart = new PerfUI.FlameChart.FlameChart(dataProvider, delegate);
@@ -276,6 +276,52 @@ export function makeAsyncEndEvent(
   };
 }
 
+/**
+ * Builds a mock flow phase event.
+ */
+export function makeFlowPhaseEvent(
+    name: string, ts: number, cat: string = '*',
+    ph: Trace.Types.Events.Phase.FLOW_START|Trace.Types.Events.Phase.FLOW_END|Trace.Types.Events.Phase.FLOW_STEP,
+    id: number = 0, pid: number = 0, tid: number = 0): Trace.Types.Events.FlowEvent {
+  return {
+    args: {},
+    cat,
+    name,
+    id,
+    ph,
+    pid: Trace.Types.Events.ProcessID(pid),
+    tid: Trace.Types.Events.ThreadID(tid),
+    ts: Trace.Types.Timing.MicroSeconds(ts),
+    dur: Trace.Types.Timing.MicroSeconds(0),
+  };
+}
+
+/**
+ * Builds flow phase events for a list of events belonging to the same
+ * flow. `events` must be ordered.
+ */
+export function makeFlowEvents(events: Trace.Types.Events.Event[], flowId: number = 0): Trace.Types.Events.FlowEvent[] {
+  const lastEvent = events.at(-1);
+  const firstEvent = events.at(0);
+  if (!lastEvent || !firstEvent) {
+    return [];
+  }
+  const flowName = events[0].name;
+  const flowStart = makeFlowPhaseEvent(
+      flowName, firstEvent.ts, firstEvent.cat, Trace.Types.Events.Phase.FLOW_START, flowId, firstEvent.pid,
+      firstEvent.tid);
+  const flowEnd = makeFlowPhaseEvent(
+      flowName, lastEvent.ts, lastEvent.cat, Trace.Types.Events.Phase.FLOW_END, flowId, lastEvent.pid, lastEvent.tid);
+
+  const flowSteps: Trace.Types.Events.FlowEvent[] = [];
+  for (let i = 1; i < events.length - 1; i++) {
+    flowSteps.push(makeFlowPhaseEvent(
+        flowName, events[i].ts, events[i].cat, Trace.Types.Events.Phase.FLOW_STEP, flowId, events[i].pid,
+        events[i].tid));
+  }
+  return [flowStart, ...flowSteps, flowEnd];
+}
+
 export function makeCompleteEventInMilliseconds(
     name: string, tsMillis: number, durMillis: number, cat: string = '*', pid: number = 0,
     tid: number = 0): Trace.Types.Events.Complete {
@@ -335,9 +381,7 @@ export function makeEndEvent(
 }
 
 export function makeProfileCall(
-    functionName: string, tsMs: number, durMs: number,
-    pid: Trace.Types.Events.ProcessID = Trace.Types.Events.ProcessID(0),
-    tid: Trace.Types.Events.ThreadID = Trace.Types.Events.ThreadID(0), nodeId: number = 0,
+    functionName: string, tsUs: number, durUs: number, pid: number = 0, tid: number = 0, nodeId: number = 0,
     url: string = ''): Trace.Types.Events.SyntheticProfileCall {
   return {
     cat: '',
@@ -346,10 +390,10 @@ export function makeProfileCall(
     sampleIndex: 0,
     profileId: Trace.Types.Events.ProfileID('fake-profile-id'),
     ph: Trace.Types.Events.Phase.COMPLETE,
-    pid,
-    tid,
-    ts: Trace.Types.Timing.MicroSeconds(tsMs),
-    dur: Trace.Types.Timing.MicroSeconds(durMs),
+    pid: Trace.Types.Events.ProcessID(pid),
+    tid: Trace.Types.Events.ThreadID(tid),
+    ts: Trace.Types.Timing.MicroSeconds(tsUs),
+    dur: Trace.Types.Timing.MicroSeconds(durUs),
     callFrame: {
       functionName,
       scriptId: '' as Protocol.Runtime.ScriptId,
@@ -366,7 +410,7 @@ export const DevToolsTimelineCategory = 'disabled-by-default-devtools.timeline';
  * Mocks an object compatible with the return type of the
  * RendererHandler using only an array of ordered entries.
  */
-export function makeMockRendererHandlerData(entries: Trace.Types.Events.Event[]):
+export function makeMockRendererHandlerData(entries: Trace.Types.Events.Event[], pid: number = 1, tid: number = 1):
     Trace.Handlers.ModelHandlers.Renderer.RendererHandlerData {
   const {tree, entryToNode} = Trace.Helpers.TreeHelpers.treify(entries, {filter: {has: () => true}});
   const mockThread: Trace.Handlers.ModelHandlers.Renderer.RendererThread = {
@@ -374,12 +418,14 @@ export function makeMockRendererHandlerData(entries: Trace.Types.Events.Event[])
     name: 'thread',
     entries,
     profileCalls: entries.filter(Trace.Types.Events.isProfileCall),
+    layoutEvents: entries.filter(Trace.Types.Events.isLayout),
+    updateLayoutTreeEvents: entries.filter(Trace.Types.Events.isUpdateLayoutTree),
   };
 
   const mockProcess: Trace.Handlers.ModelHandlers.Renderer.RendererProcess = {
     url: 'url',
     isOnMainFrame: true,
-    threads: new Map([[1 as Trace.Types.Events.ThreadID, mockThread]]),
+    threads: new Map([[tid as Trace.Types.Events.ThreadID, mockThread]]),
   };
 
   const renderereEvents: Trace.Types.Events.RendererEvent[] = [];
@@ -390,10 +436,15 @@ export function makeMockRendererHandlerData(entries: Trace.Types.Events.Event[])
   }
 
   return {
-    processes: new Map([[1 as Trace.Types.Events.ProcessID, mockProcess]]),
+    processes: new Map([[pid as Trace.Types.Events.ProcessID, mockProcess]]),
     compositorTileWorkers: new Map(),
     entryToNode,
     allTraceEntries: renderereEvents,
+    entityMappings: {
+      entityByEvent: new Map(),
+      eventsByEntity: new Map(),
+      createdEntityCache: new Map(),
+    },
   };
 }
 
@@ -442,6 +493,27 @@ export function makeMockSamplesHandlerData(profileCalls: Trace.Types.Events.Synt
   };
 }
 
+export function makeMockEntityData(events: Trace.Types.Events.Event[]): Trace.Handlers.Helpers.EntityMappings {
+  const eventsByEntity = new Map<Trace.Handlers.Helpers.Entity, Trace.Types.Events.Event[]>();
+  const entityByEvent = new Map<Trace.Types.Events.Event, Trace.Handlers.Helpers.Entity>();
+  const createdEntityCache = new Map<string, Trace.Handlers.Helpers.Entity>();
+
+  events.forEach(event => {
+    const entity = Trace.Handlers.Helpers.getEntityForEvent(event, createdEntityCache);
+    if (!entity) {
+      return;
+    }
+    if (eventsByEntity.has(entity)) {
+      const events = eventsByEntity.get(entity) ?? [];
+      events?.push(event);
+    } else {
+      eventsByEntity.set(entity, [event]);
+    }
+    entityByEvent.set(event, entity);
+  });
+  return {eventsByEntity, entityByEvent, createdEntityCache};
+}
+
 export class FakeFlameChartProvider implements PerfUI.FlameChart.FlameChartDataProvider {
   minimumBoundary(): number {
     return 0;
@@ -463,7 +535,7 @@ export class FakeFlameChartProvider implements PerfUI.FlameChart.FlameChartDataP
     return 3;
   }
 
-  prepareHighlightedEntryInfo(_entryIndex: number): Element|null {
+  preparePopoverElement(_entryIndex: number): Element|null {
     return null;
   }
 
@@ -531,6 +603,10 @@ type ParsedTrace = Trace.Handlers.Types.ParsedTrace;
 export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {}): ParsedTrace {
   return {
     Animations: {animations: []},
+    AnimationFrames: {
+      animationFrames: [],
+      presentationForFrame: new Map(),
+    },
     LayoutShifts: {
       clusters: [],
       clustersByNavigationId: new Map(),
@@ -575,6 +651,11 @@ export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {})
       compositorTileWorkers: new Map(),
       entryToNode: new Map(),
       allTraceEntries: [],
+      entityMappings: {
+        entityByEvent: new Map(),
+        eventsByEntity: new Map(),
+        createdEntityCache: new Map(),
+      },
     },
     Screenshots: {
       all: [],
@@ -599,6 +680,11 @@ export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {})
       byOrigin: new Map(),
       byTime: [],
       webSocket: [],
+      entityMappings: {
+        entityByEvent: new Map(),
+        eventsByEntity: new Map(),
+        createdEntityCache: new Map(),
+      },
     },
     GPU: {
       mainGPUThreadTasks: [],
@@ -626,6 +712,7 @@ export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {})
     ImagePainting: {
       paintImageByDrawLazyPixelRef: new Map(),
       paintImageForEvent: new Map(),
+      paintImageEventForUrl: new Map(),
     },
     Initiators: {
       eventToInitiator: new Map(),
@@ -661,6 +748,13 @@ export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {})
       workerSessionIdEvents: [],
       workerURLById: new Map(),
     },
+    Flows: {
+      flows: [],
+    },
+    AsyncJSCalls: {
+      schedulerToRunEntryPoints: new Map(),
+      asyncCallToScheduler: new Map(),
+    },
     ...overrides,
   };
 }