chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/whats_new/ReleaseNoteView.ts

@@ -0,0 +1,157 @@
+// 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 '../../ui/components/markdown_view/markdown_view.js';
+
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as Marked from '../../third_party/marked/marked.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
+import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import {getReleaseNote} from './ReleaseNoteText.js';
+import releaseNoteViewStyles from './releaseNoteView.css.js';
+import {releaseNoteViewId} from './WhatsNewImpl.js';
+
+const {html} = LitHtml;
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+const UIStrings = {
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+  /**
+   *@description Text to close something
+   */
+  close: 'Close',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/whats_new/ReleaseNoteView.ts', UIStrings);
+
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+let releaseNoteViewInstance: ReleaseNoteViewWrapper;
+
+export class ReleaseNoteViewWrapper extends UI.Widget.VBox {
+  releaseNoteElement: ReleaseNoteView;
+  constructor() {
+    super(true);
+    this.element.setAttribute('jslog', `${VisualLogging.panel().context('whats-new')}`);
+    this.releaseNoteElement = new ReleaseNoteView();
+    this.contentElement.appendChild(this.releaseNoteElement);
+  }
+
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReleaseNoteViewWrapper {
+    const {forceNew} = opts;
+    if (!releaseNoteViewInstance || forceNew) {
+      releaseNoteViewInstance = new ReleaseNoteViewWrapper();
+    }
+    return releaseNoteViewInstance;
+  }
+}
+
+export class ReleaseNoteView extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [
+      releaseNoteViewStyles,
+    ];
+    this.#render();
+  }
+
+  static async getFileContent(): Promise<string> {
+    const url = new URL('./resources/WNDT.md', import.meta.url);
+    try {
+      const response = await fetch(url.toString());
+      return response.text();
+    } catch (error) {
+      throw new Error(`Markdown file ${
+          url.toString()} not found. Make sure it is correctly listed in the relevant BUILD.gn files.`);
+    }
+  }
+
+  async #renderHighlights(): Promise<LitHtml.TemplateResult> {
+    const markdown = await ReleaseNoteView.getFileContent();
+    const markdownAst = Marked.Marked.lexer(markdown);
+
+    // clang-format off
+    return html`<devtools-markdown-view .data=${{tokens: markdownAst} as MarkdownView.MarkdownView.MarkdownViewData}>
+      </devtools-markdown-view>
+    `;
+    // clang-format on
+  }
+
+  #render(): void {
+    const releaseNote = getReleaseNote();
+    void coordinator.write(() => {
+      // clang-format off
+      const tmpl = html`
+      <div class="release-note-top-section">
+        ${getReleaseNote().header}
+      </div>
+      <div class="hbox">
+        <div class="release-note-container" jslog=${VisualLogging.section().context('release-notes')}>
+         <ul aria-label=${releaseNote.header}>
+            ${LitHtml.Directives.until(this.#renderHighlights())}
+          </ul>
+          <div>
+            <devtools-button
+              .data=${{
+                variant: Buttons.Button.Variant.OUTLINED,
+              } as Buttons.Button.ButtonData}
+              .jslogContext=${'learn-more'}
+              @click=${(event: MouseEvent): void => {
+                event.consume(true);
+                  Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(releaseNote.link as Platform.DevToolsPath.UrlString);
+                }}
+            >${i18nString(UIStrings.learnMore)}
+            </devtools-button>
+            <devtools-button
+              .data=${{
+                variant: Buttons.Button.Variant.OUTLINED,
+              } as Buttons.Button.ButtonData}
+              .jslogContext=${'close'}
+              @click=${(event: MouseEvent): void => {
+                event.consume(true);
+                UI.InspectorView.InspectorView.instance().closeDrawerTab(releaseNoteViewId, true);
+                }}
+            >
+            ${i18nString(UIStrings.close)}
+            </devtools-button>
+          </div>
+        </div>
+        <x-link
+          href=${releaseNote.link}
+          class="devtools-link release-note-image"
+          jslog=${VisualLogging.link().track({click: true}).context('learn-more')}
+        >
+          <img src=${new URL('./resources/whatsnew.avif', import.meta.url).toString()}>
+        </x-link>
+      </div>
+      `;
+      // clang-format on
+      LitHtml.render(tmpl, this.#shadow, {host: this});
+      const releaseNoteImage = this.#shadow.querySelector('img');
+      if (releaseNoteImage) {
+        UI.Tooltip.Tooltip.install(releaseNoteImage, getReleaseNote().header);
+      }
+    });
+  }
+}
+
+customElements.define('devtools-release-note-view', ReleaseNoteView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-release-note-view': ReleaseNoteView;
+  }
+}

package/front_end/panels/whats_new/WhatsNewImpl.ts

@@ -0,0 +1,102 @@
+// 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';  // eslint-disable-line no-unused-vars
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as UI from '../../ui/legacy/legacy.js';  // eslint-disable-line no-unused-vars
+
+import {getReleaseNote} from './ReleaseNoteText.js';
+
+export const releaseVersionSeen = 'releaseNoteVersionSeen';
+
+export const releaseNoteViewId: string = 'release-note';
+
+let releaseNoteVersionSetting: Common.Settings.Setting<number>;
+
+export function showReleaseNoteIfNeeded(): boolean {
+  const releaseNoteVersionSetting = Common.Settings.Settings.instance().createSetting(releaseVersionSeen, 0);
+  const releaseNoteVersionSettingValue = releaseNoteVersionSetting.get();
+  const releaseNote = getReleaseNote();
+  return innerShowReleaseNoteIfNeeded(
+      releaseNoteVersionSettingValue, releaseNote.version,
+      Common.Settings.Settings.instance().moduleSetting('help.show-release-note').get());
+}
+
+export function getReleaseNoteVersionSetting(): Common.Settings.Setting<number> {
+  if (!releaseNoteVersionSetting) {
+    releaseNoteVersionSetting = Common.Settings.Settings.instance().createSetting(releaseVersionSeen, 0);
+  }
+  return releaseNoteVersionSetting;
+}
+
+function innerShowReleaseNoteIfNeeded(
+    lastSeenVersion: number, latestVersion: number, showReleaseNoteSettingEnabled: boolean): boolean {
+  const releaseNoteVersionSetting = Common.Settings.Settings.instance().createSetting(releaseVersionSeen, 0);
+  if (!lastSeenVersion) {
+    releaseNoteVersionSetting.set(latestVersion);
+    return false;
+  }
+  if (!showReleaseNoteSettingEnabled) {
+    return false;
+  }
+  if (lastSeenVersion >= latestVersion) {
+    return false;
+  }
+  releaseNoteVersionSetting.set(latestVersion);
+  void UI.ViewManager.ViewManager.instance().showView(releaseNoteViewId, true);
+  return true;
+}
+
+let helpLateInitializationInstance: HelpLateInitialization;
+export class HelpLateInitialization implements Common.Runnable.Runnable {
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): HelpLateInitialization {
+    const {forceNew} = opts;
+    if (!helpLateInitializationInstance || forceNew) {
+      helpLateInitializationInstance = new HelpLateInitialization();
+    }
+    return helpLateInitializationInstance;
+  }
+
+  async run(): Promise<void> {
+    if (!Host.InspectorFrontendHost.isUnderTest()) {
+      showReleaseNoteIfNeeded();
+    }
+  }
+}
+
+let releaseNotesActionDelegateInstance: ReleaseNotesActionDelegate;
+export class ReleaseNotesActionDelegate implements UI.ActionRegistration.ActionDelegate {
+  handleAction(_context: UI.Context.Context, _actionId: string): boolean {
+    const releaseNote = getReleaseNote();
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        releaseNote.link as Platform.DevToolsPath.UrlString);
+    return true;
+  }
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReleaseNotesActionDelegate {
+    const {forceNew} = opts;
+    if (!releaseNotesActionDelegateInstance || forceNew) {
+      releaseNotesActionDelegateInstance = new ReleaseNotesActionDelegate();
+    }
+
+    return releaseNotesActionDelegateInstance;
+  }
+}
+
+let reportIssueActionDelegateInstance: ReportIssueActionDelegate;
+export class ReportIssueActionDelegate implements UI.ActionRegistration.ActionDelegate {
+  handleAction(_context: UI.Context.Context, _actionId: string): boolean {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        'https://goo.gle/devtools-bug' as Platform.DevToolsPath.UrlString);
+    return true;
+  }
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ReportIssueActionDelegate {
+    const {forceNew} = opts;
+    if (!reportIssueActionDelegateInstance || forceNew) {
+      reportIssueActionDelegateInstance = new ReportIssueActionDelegate();
+    }
+
+    return reportIssueActionDelegateInstance;
+  }
+}

package/front_end/panels/whats_new/releaseNoteView.css

@@ -0,0 +1,121 @@
+/*
+ * 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.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+.hbox {
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  position: relative;
+  flex-direction: row;
+}
+
+.release-note-top-section {
+  height: 27px;
+  line-height: 27px;
+  padding: 0 15px;
+  flex: none;
+  color: var(--sys-color-on-surface);
+  background-color: var(--sys-color-cdt-base-container);
+  border-bottom: 1px solid var(--sys-color-divider);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.release-note-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 350px;
+}
+
+.release-note-container ul {
+  display: flex;
+  padding: 10px 16px;
+  flex-direction: column;
+  flex: none;
+  margin: 4px 12px 0 2px;
+  max-width: 600px;
+}
+
+.release-note-container li {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  line-height: 200%;
+  font-size: 14px;
+}
+
+.release-note-container .release-note-link {
+  border: 1px solid var(--sys-color-divider);
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: var(--sys-color-primary);
+}
+
+.release-note-container .release-note-link:hover {
+  box-shadow: 0 0 0 1px var(--box-shadow-outline-color) inset;
+}
+
+.release-note-title,
+.release-note-subtitle {
+  color: inherit;
+  text-decoration: none;
+}
+
+.release-note-subtitle {
+  font-size: 13px;
+  line-height: 125%;
+  padding-bottom: 8px;
+}
+
+devtools-button {
+  margin: 10px 0 20px 20px;
+}
+
+.release-note-container li:not(:hover) .release-note-subtitle {
+  color: var(--sys-color-token-subtle);
+}
+
+.release-note-image {
+  flex-shrink: 2;
+  margin: 30px 15px;
+  width: 260px;
+  height: 200px;
+}
+
+img {
+  width: 260px;
+  height: 200px;
+  flex: none;
+  box-shadow: var(--drop-shadow-depth-1);
+}
+
+img:hover {
+  box-shadow: var(--drop-shadow-depth-4);
+}
+
+@media (forced-colors: active) {
+  .release-note-container .release-note-link {
+    border-color: ButtonText;
+  }
+
+  .release-note-container .release-note-link:hover {
+    forced-color-adjust: none;
+    border-color: Highlight;
+  }
+
+  .release-note-container li .release-note-title,
+  .release-note-container li:not(:hover) .release-note-subtitle {
+    forced-color-adjust: none;
+    color: linktext;
+  }
+}

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

@@ -0,0 +1,6 @@
+### [AI assistance for Network, Performance, and Sources](ai-assistance)
+In the AI assistance panel, you can now chat with Gemini about network requests, source files, and performance traces.
+### [AI chat history](chat-history)
+While DevTools is open, you can now create and view several chats with AI.
+### [Interaction phases in live metrics](interaction-phases)
+The Interactions tab in live metrics in the Performance panel now shows you phases and their timings.

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 WhatsNew.ReleaseNoteView.ReleaseNoteViewWrapper.instance();
+  },
+});
+
+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/EnvironmentHelpers.ts

@@ -131,7 +131,6 @@ const REGISTERED_EXPERIMENTS = [
   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,
@@ -287,7 +286,7 @@ 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,

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/TraceHelpers.ts

@@ -463,7 +463,7 @@ export class FakeFlameChartProvider implements PerfUI.FlameChart.FlameChartDataP
     return 3;
   }
 
-  prepareHighlightedEntryInfo(_entryIndex: number): Element|null {
+  preparePopoverElement(_entryIndex: number): Element|null {
     return null;
   }
 
@@ -626,6 +626,7 @@ export function getBaseTraceParseModelData(overrides: Partial<ParsedTrace> = {})
     ImagePainting: {
       paintImageByDrawLazyPixelRef: new Map(),
       paintImageForEvent: new Map(),
+      paintImageEventForUrl: new Map(),
     },
     Initiators: {
       eventToInitiator: new Map(),