chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/third_party/web-vitals/patches/0001-Add-onEachInteraction-to-onINP-options.patch

@@ -1,6 +1,6 @@
-From 0655370c830a309d8808ef365dff611725ea73b1 Mon Sep 17 00:00:00 2001
+From e75293ce1c04be22600fa0eda58ce28cfb2fe7ab Mon Sep 17 00:00:00 2001
 From: Barry Pollard <barrypollard@google.com>
-Date: Tue, 21 Apr 2026 12:43:38 +0100
+Date: Tue, 21 Apr 2026 14:20:47 +0100
 Subject: [PATCH] Add onEachInteraction to onINP options
 
 This adds an "onEachInteraction" option to onINP, which exposes to us
@@ -8,18 +8,18 @@ each interaction. It also calls attributeINP on each value given to the
 callback.
 
 ---
- src/attribution/onINP.ts | 35 ++++++++++++++++++++++++++++++++++-
+ src/attribution/onINP.ts | 36 +++++++++++++++++++++++++++++++++++-
  src/types/inp.ts         |  1 +
- 2 files changed, 35 insertions(+), 1 deletion(-)
+ 2 files changed, 36 insertions(+), 1 deletion(-)
 
 diff --git a/src/attribution/onINP.ts b/src/attribution/onINP.ts
-index 0d6d098..3fe5050 100644
+index 051bc74..82e3e6e 100644
 --- a/src/attribution/onINP.ts
 +++ b/src/attribution/onINP.ts
-@@ -260,7 +260,40 @@ export const onINP = (
+@@ -261,7 +261,41 @@ export const onINP = (
      cleanupPending = false;
    };
- 
+
 -  interactionManager._onBeforeProcessingEntry = groupEntriesByRenderTime;
 +  async function handleOnEachInteractionCallback(
 +    entry: PerformanceEventTiming,
@@ -43,6 +43,7 @@ index 0d6d098..3fe5050 100644
 +      rating: 'good',
 +      value: entry.duration,
 +      delta: entry.duration,
++      navigationId: (entry as any).navigationId,
 +      navigationType: 'navigate',
 +      id: 'N/A',
 +    });
@@ -56,7 +57,7 @@ index 0d6d098..3fe5050 100644
 +    groupEntriesByRenderTime(entry);
 +  };
    interactionManager._onAfterProcessingINPCandidate = saveInteractionTarget;
- 
+
    const getIntersectingLoAFs = (
 diff --git a/src/types/inp.ts b/src/types/inp.ts
 index 6041b2d..9b6bd2e 100644
@@ -68,8 +69,7 @@ index 6041b2d..9b6bd2e 100644
    includeProcessedEventEntries?: boolean;
 +  onEachInteraction?: (interaction: INPMetricWithAttribution) => void;
  }
- 
+
  /**
--- 
+--
 2.50.1 (Apple Git-155)
-

package/front_end/third_party/web-vitals/rebuild.sh

@@ -4,8 +4,8 @@ set -euo pipefail
 
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 
-VERSION=5.2.0
-GIT_SHA=331486c02721e1d37835177ffc89589a580ba57e # web-vitals does not tag releases.
+VERSION=6.0.0
+GIT_SHA=67a9ddb4cf77f8d1cb2c877ccd870b9c821aa853 # web-vitals does not tag releases.
 
 # Note: this is just to handle updating README.chromium.
 # For the actual sources, below we checkout the repo, apply local patches, then build with tsc.

package/front_end/third_party/web-vitals/web-vitals-tsconfig.json

@@ -10,6 +10,7 @@
     "package/dist/modules/attribution/onLCP.js",
     "package/dist/modules/attribution/onTTFB.js",
     "package/dist/modules/index.js",
+    "package/dist/modules/lib/FCPEntryManager.js",
     "package/dist/modules/lib/InteractionManager.js",
     "package/dist/modules/lib/LCPEntryManager.js",
     "package/dist/modules/lib/LayoutShiftManager.js",
@@ -27,6 +28,7 @@
     "package/dist/modules/lib/observe.js",
     "package/dist/modules/lib/polyfills/interactionCountPolyfill.js",
     "package/dist/modules/lib/runOnce.js",
+    "package/dist/modules/lib/softNavs.js",
     "package/dist/modules/lib/whenActivated.js",
     "package/dist/modules/lib/whenIdleOrHidden.js",
     "package/dist/modules/onCLS.js",

package/front_end/ui/components/buttons/Button.ts

@@ -62,6 +62,7 @@ interface ButtonState {
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
+  accessibleExpanded?: boolean;
 }
 
 interface CommonButtonData {
@@ -87,6 +88,10 @@ interface CommonButtonData {
    * Sets aria-label on the internal <button> element.
    */
   accessibleLabel?: string;
+  /**
+   * Sets aria-expanded on the internal <button> element.
+   */
+  accessibleExpanded?: boolean;
 }
 
 export type ButtonData = CommonButtonData&(|{
@@ -166,6 +171,7 @@ export class Button extends HTMLElement {
       this.accessibleLabel = data.accessibleLabel;
     }
 
+    this.#props.accessibleExpanded = data.accessibleExpanded;
     this.#props.jslogContext = data.jslogContext;
     this.#props.longClickable = data.longClickable;
     this.#props.inverseColorTheme = data.inverseColorTheme;
@@ -211,6 +217,15 @@ export class Button extends HTMLElement {
     return this.getAttribute('accessibleLabel') || undefined;
   }
 
+  set accessibleExpanded(expanded: boolean|undefined) {
+    this.#props.accessibleExpanded = expanded;
+    this.#render();
+  }
+
+  get accessibleExpanded(): boolean|undefined {
+    return this.#props.accessibleExpanded;
+  }
+
   set reducedFocusRing(reducedFocusRing: boolean) {
     this.#props.reducedFocusRing = reducedFocusRing;
     this.#render();
@@ -385,6 +400,7 @@ export class Button extends HTMLElement {
                 ?disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}
+                aria-expanded=${ifDefined(this.#props.accessibleExpanded)}
                 aria-label=${ifDefined(this.accessibleLabel || this.title || undefined)}
                 jslog=${ifDefined(jslog)}>
           ${hasIcon ? html`

package/front_end/ui/components/dialogs/Dialog.ts

@@ -776,7 +776,7 @@ export const enum DialogVerticalPosition {
 export const enum DialogState {
   EXPANDED = 'expanded',
   COLLAPSED = 'collapsed',
-  DISABLED = 'disabled'
+  DISABLED = 'disabled',
 }
 
 export const enum DialogHorizontalAlignment {

package/front_end/ui/components/highlighting/HighlightManager.ts

@@ -88,7 +88,8 @@ interface HighlightState {
   currentRange?: TextUtils.TextRange.SourceRange;
 }
 
-let highlightManagerInstance: HighlightManager;
+let highlightManagerInstance: HighlightManager|null;
+
 export class HighlightManager {
   #highlights = new Highlight();
   #currentHighlights = new Highlight();
@@ -110,6 +111,10 @@ export class HighlightManager {
     return highlightManagerInstance;
   }
 
+  static removeInstance(): void {
+    highlightManagerInstance = null;
+  }
+
   addHighlights(ranges: Range[]): void {
     ranges.forEach(this.addHighlight.bind(this));
   }

package/front_end/ui/components/highlighting/highlighting.ts

@@ -11,6 +11,6 @@ export {
   highlightedCurrentSearchResultClassName,
   highlightedSearchResultClassName,
   highlightRangesWithStyleClass,
-  revertDomChanges
+  revertDomChanges,
 } from './MarkupHighlight.js';
 export {HighlightManager};

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -52,7 +52,7 @@ export class FileSourceIcon extends HTMLElement {
       dot: Boolean(this.#hasDotBadge),
       purple: Boolean(this.#hasDotBadge && this.#isDotPurple),
       green: Boolean(this.#hasDotBadge && !this.#isDotPurple),
-      ...(this.#contentType ? {[this.#contentType]: this.#contentType} : null)
+      ...(this.#contentType ? {[this.#contentType]: this.#contentType} : null),
     });
 
     // clang-format off

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -63,7 +63,7 @@ export class Linkifier extends HTMLElement {
       lineNumber: this.#lineNumber,
       columnNumber: this.#columnNumber,
       linkText: this.#linkText,
-      title: this.#title
+      title: this.#title,
     };
     return node;
   }

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -68,14 +68,14 @@ export const markdownLinks = new Map<string, string>([
   ['componentParameterReq', 'https://www.rfc-editor.org/rfc/rfc9421.html#content-request-response'],
   [
     'unencodedDigestHeader',
-    'https://lpardue.github.io/draft-pardue-http-identity-digest/draft-pardue-httpbis-identity-digest.html'
+    'https://lpardue.github.io/draft-pardue-http-identity-digest/draft-pardue-httpbis-identity-digest.html',
   ],
   ['storagePartitioningExplainer', 'https://developers.google.com/privacy-sandbox/cookies/storage-partitioning'],
   ['storageAccessAPI', 'https://developer.mozilla.org/en-US/docs/Web/API/StorageAccessHandle/createObjectURL'],
   ['https://goo.gle/ps-status', 'https://goo.gle/ps-status'],
   [
     'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/',
-    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/'
+    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/',
   ],
   ['urlPatternSpec', 'https://urlpattern.spec.whatwg.org/'],
   [

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -11,6 +11,7 @@ import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Lit from '../../lit/lit.js';
+import * as SettingUIRegistration from '../../settings/settings.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as Buttons from '../buttons/buttons.js';
 import * as Input from '../input/input.js';
@@ -67,7 +68,8 @@ export class SettingCheckbox extends HTMLElement {
           this.#setting.deprecation}></devtools-setting-deprecation-warning>`;
     }
 
-    const learnMore = this.#setting.learnMore();
+    const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(this.#setting.descriptor());
+    const learnMore = uiDescriptor?.learnMore ?? this.#setting.learnMore();
     if (learnMore) {
       const jsLogContext = `${this.#setting.name}-documentation`;
       const data: Buttons.Button.ButtonData = {
@@ -136,8 +138,12 @@ export class SettingCheckbox extends HTMLElement {
       throw new Error('No "Setting" object provided for rendering');
     }
 
+    const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(this.#setting.descriptor());
+    const learnMore = uiDescriptor?.learnMore ?? this.#setting.learnMore();
+    const titleText = uiDescriptor?.title?.() ?? this.#setting.title();
+
     const icon = this.icon();
-    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip?.() : ''}`;
+    const title = learnMore?.tooltip?.() ?? '';
     const disabledReasons = this.#setting.disabledReasons();
     const reason = disabledReasons.length ?
         html`
@@ -146,8 +152,7 @@ export class SettingCheckbox extends HTMLElement {
             onclick}></devtools-button>
     ` :
         Lit.nothing;
-    Lit.render(
-        html`
+    Lit.render(html`
       <style>${Input.checkboxStyles}</style>
       <style>${settingCheckboxStyles}</style>
       <p>
@@ -158,13 +163,13 @@ export class SettingCheckbox extends HTMLElement {
             ?disabled=${this.#setting.disabled()}
             @change=${this.#checkboxChanged}
             jslog=${VisualLogging.toggle().track({change: true}).context(this.#setting.name)}
-            aria-label=${this.#setting.title()}
+            aria-label=${titleText}
           />
-          ${this.#textOverride || this.#setting.title()}${reason}
+          ${this.#textOverride || titleText}${reason}
         </label>
         ${icon}
       </p>`,
-        this.#shadow, {host: this});
+               this.#shadow, {host: this});
   }
 
   #checkboxChanged(e: Event): void {

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -374,7 +374,7 @@ export class AiCodeCompletionProvider {
               clearCachedRequest: this.clearCache.bind(this),
               onImpression: this.#aiCodeCompletion?.registerUserImpression.bind(this.#aiCodeCompletion),
               source: AiSuggestionSource.COMPLETION,
-            })
+            }),
           });
         }
         if (fromCache) {
@@ -580,7 +580,7 @@ function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeCompletionTea
           return true;
         }
         return false;
-      }
+      },
     },
   });
 }

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -206,8 +206,8 @@ export class AiCodeGenerationProvider {
             }
           }
           return false;
-        }
-      }
+        },
+      },
     ];
   }
 
@@ -248,7 +248,7 @@ export class AiCodeGenerationProvider {
       effects: [
         setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED),
         setAiAutoCompleteSuggestion.of(null),
-      ]
+      ],
     });
   }
 
@@ -372,8 +372,8 @@ export class AiCodeGenerationProvider {
             onImpression: this.#aiCodeGeneration?.registerUserImpression.bind(this.#aiCodeGeneration),
             source: AiSuggestionSource.GENERATION,
           }),
-          setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)
-        ]
+          setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE),
+        ],
       });
       this.#generationTeaser.displayState =
           PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.GENERATED;
@@ -498,7 +498,7 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
           return true;
         }
         return false;
-      }
+      },
     },
   });
 }

package/front_end/ui/components/text_editor/javascript.ts

@@ -411,8 +411,10 @@ async function completeExpressionInScope(): Promise<CompletionSet> {
     return result;
   }
 
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
   const scopes = await Promise.all(selectedFrame.scopeChain().map(
-      scope => SourceMapScopes.NamesResolver.resolveScopeInObject(scope).getAllProperties(false, false)));
+      scope => SourceMapScopes.NamesResolver.resolveScopeInObject(scope, debuggerWorkspaceBinding)
+                   .getAllProperties(false, false)));
   for (const scope of scopes) {
     for (const property of scope.properties || []) {
       result.add({

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -100,7 +100,7 @@ const positioningUtils = {
 
     return rect1 && rect1.left === rect2.left && rect1.top === rect2.top && rect1.width === rect2.width &&
         rect1.height === rect2.height;
-  }
+  },
 };
 
 export const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {

package/front_end/ui/legacy/ContextMenu.ts

@@ -947,8 +947,18 @@ export class ContextMenu extends SubMenu {
   private static pendingMenu: ContextMenu|null = null;
   private static useSoftMenu = false;
   static readonly groupWeights = [
-    'header', 'new', 'reveal', 'edit', 'clipboard', 'debug', 'view', 'default', 'override', 'save', 'annotation',
-    'footer'
+    'header',
+    'new',
+    'reveal',
+    'edit',
+    'clipboard',
+    'debug',
+    'view',
+    'default',
+    'override',
+    'save',
+    'annotation',
+    'footer',
   ];
 }
 

package/front_end/ui/legacy/ListControl.ts

@@ -392,7 +392,7 @@ export class ListControl<T> {
         element.setAttribute('jslog', `${VisualLogging.item().track({
                                click: true,
                                resize: true,
-                               keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Home|End'
+                               keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Home|End',
                              })}`);
       }
       this.itemToElement.set(item, element);

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -30,24 +30,23 @@ export function render(container: HTMLElement) {
 
   {
     const simpleMenuHTML = createDivWithP('Simple item select with lit-html');
-    Lit.render(
-        html`<select id="menu" aria-label="Select an option"
+    Lit.render(html`<select id="menu" aria-label="Select an option"
                 @change=${onChange}>
         <option hidden>Select an option</option>
         <option id="option-1" jslog=${VisualLogging.item('option-1').track({
-          click: true
-        })}
+                 click: true,
+               })}
                 value="Option1">Option 1</option>
         <option jslog=${VisualLogging.item('option-2').track({
-          click: true
-        })}
+                 click: true,
+               })}
                 value="Option2">Option 2</option>
         <option disabled jslog=${VisualLogging.item('option-3').track({
-          click: true
-        })}
+                 click: true,
+               })}
                 value="Option3">Option 3</option>
       </select>`,
-        simpleMenuHTML);
+               simpleMenuHTML);
   }
 
   {
@@ -57,7 +56,7 @@ export function render(container: HTMLElement) {
         html`<select disabled aria-label="Select an option" @change=${onChange}>
                 <option hidden>Select an option</option>
                 <option jslog=${VisualLogging.item('option-1').track({
-                  click: true
+                  click: true,
                 })} value="Option1">Option 1</option>
               </select>`,
         disabledMenuHTML);
@@ -66,27 +65,26 @@ export function render(container: HTMLElement) {
 
   {
     const groupMenuHTML = createDivWithP('Select with groups with lit-html');
-    Lit.render(
-        html`<select aria-label="Select an option"
+    Lit.render(html`<select aria-label="Select an option"
                   @change=${onChange}>
         <optgroup label="Group 1">
           <option jslog=${VisualLogging.item('option-1').track({
-          click: true
-        })}
+                 click: true,
+               })}
           value="Option1">Option 1</option>
         </optgroup>
         <optgroup label="Group 2">
           <option jslog=${VisualLogging.item('option-2').track({
-          click: true
-        })}
+                 click: true,
+               })}
           value="Option2">Option 2</option>
           <option jslog=${VisualLogging.item('option-3').track({
-          click: true
-        })}
+                 click: true,
+               })}
           value="Option3">Option 3</option>
         </optgroup>
       </select>`,
-        groupMenuHTML);
+               groupMenuHTML);
   }
 
   {

package/front_end/ui/legacy/Toolbar.ts

@@ -12,6 +12,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {createIcon} from '../kit/kit.js';
 import {nothing, render, type TemplateResult} from '../lit/lit.js';
+import * as SettingUIRegistration from '../settings/settings.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -1429,7 +1430,9 @@ export class ToolbarSettingCheckbox extends ToolbarCheckbox {
   constructor(
       setting: Common.Settings.Setting<boolean>, tooltip?: Common.UIString.LocalizedString,
       alternateTitle?: Common.UIString.LocalizedString) {
-    super(alternateTitle || setting.title(), tooltip, undefined, setting.name);
+    const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
+    const title = alternateTitle || uiDescriptor?.title?.() || setting.title();
+    super(title, tooltip, undefined, setting.name);
     bindCheckbox(this.element as CheckboxLabel, setting);
   }
 }

package/front_end/ui/legacy/Treeoutline.ts

@@ -1692,7 +1692,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): Array<HTMLLIElement|TreeElemen
           return [
             node,
             ...node.querySelectorAll<HTMLLIElement|TreeElementWrapper>(
-                'ul[role="group"] li[role="treeitem"],ul[role="group"] devtools-tree-wrapper')
+                'ul[role="group"] li[role="treeitem"],ul[role="group"] devtools-tree-wrapper'),
           ];
         }
         if (node instanceof HTMLElement) {

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -72,12 +72,11 @@
 
 .spectrum-hue {
   top: 16px;
-  /* stylelint-disable-next-line plugin/use_theme_colors, declaration-property-value-no-unknown */
+  /* stylelint-disable-next-line plugin/use_theme_colors */
   background: linear-gradient(to left in hsl longer hue, #f00 0 100%);
 }
 
 .spectrum-hue.display-p3 {
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   background: linear-gradient(
     to left in hsl longer hue,
     color(display-p3 1 0 0) 0 100%

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1779,7 +1779,7 @@ export class DataGridNode<T> {
     this.elementInternal = document.createElement('tr');
     this.elementInternal.setAttribute('jslog', `${VisualLogging.tableRow().track({
                                         resize: true,
-                                        keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'
+                                        keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space',
                                       })}`);
     this.elementInternal.classList.add('data-grid-data-grid-node');
     if (this.dataGrid) {

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -17,7 +17,7 @@ import {
   DataType,
   Events as DataGridEvents,
   Order,
-  type ResizeMethod
+  type ResizeMethod,
 } from './DataGrid.js';
 import {SortableDataGrid, SortableDataGridNode} from './SortableDataGrid.js';
 
@@ -57,7 +57,7 @@ type DataGridElementNode = SortableNode|DynamicHeightNode;
 const elementToNode = new WeakMap<Element, DataGridElementNode>();
 
 export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
+  static readonly observedAttributes = ['striped', 'name', 'inline', 'resize', 'highlight'];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #dataGrid!: DataGridImpl<any>;
@@ -66,6 +66,13 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       this.#dataGrid.onResize();
     }
   });
+  #scrollResizeObserver = new ResizeObserver(() => {
+    if (this.hasAttribute('autoscroll') && this.#stickToBottom) {
+      const scroll = this.#dataGrid.scrollContainer;
+      scroll.scrollTop = scroll.scrollHeight;
+    }
+  });
+  #stickToBottom = true;
   #shadowRoot: ShadowRoot;
   #columns: ColumnDescriptor[] = [];
   #hideableColumns = new Set<string>();
@@ -109,7 +116,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
         DataGridEvents.COLLAPSED_NODE,
         e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('collapse')));
     this.#dataGrid.addEventListener(DataGridEvents.SORTING_CHANGED, () => this.dispatchEvent(new CustomEvent('sort', {
-      detail: {columnId: this.#dataGrid.sortColumnId(), ascending: this.#dataGrid.isSortOrderAscending()}
+      detail: {columnId: this.#dataGrid.sortColumnId(), ascending: this.#dataGrid.isSortOrderAscending()},
     })));
     this.#dataGrid.setRowContextMenuCallback((menu, node) => {
       (node as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('contextmenu', {detail: menu}));
@@ -136,6 +143,22 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     this.addNodes(this.templateRoot.querySelectorAll('tr'));
   }
 
+  connectedCallback(): void {
+    const scroll = this.#dataGrid.scrollContainer;
+    scroll.addEventListener('scroll', this.#onScroll);
+    this.#scrollResizeObserver.observe(scroll.firstElementChild || scroll);
+  }
+
+  disconnectedCallback(): void {
+    const scroll = this.#dataGrid.scrollContainer;
+    scroll.removeEventListener('scroll', this.#onScroll);
+    this.#scrollResizeObserver.disconnect();
+  }
+
+  #onScroll = (): void => {
+    this.#stickToBottom = UI.UIUtils.isScrolledToBottom(this.#dataGrid.scrollContainer);
+  };
+
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
       return;
@@ -153,6 +176,11 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       case 'resize':
         this.#dataGrid.setResizeMethod(newValue as ResizeMethod);
         break;
+      case 'highlight':
+        queueMicrotask(() => {
+          this.#revealHighlightedNode(Number(newValue));
+        });
+        break;
     }
   }
 
@@ -209,6 +237,24 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     dataGridNode.setHasChildren(hasChildren);
   }
 
+  #revealHighlightedNode(index: number): void {
+    if (isNaN(index) || index < 1) {
+      return;
+    }
+    let count = 0;
+    let node = this.#dataGrid.rootNode().traverseNextNode(true) as DataGridElementNode | null;
+    while (node) {
+      if (node.configElement.hasAttribute('highlighted')) {
+        count++;
+        if (count === index) {
+          node.revealAndSelect();
+          return;
+        }
+      }
+      node = node.traverseNextNode(true) as DataGridElementNode | null;
+    }
+  }
+
   #updateColumns(): void {
     for (const column of Object.keys(this.#dataGrid.columns)) {
       this.#dataGrid.removeColumn(column);
@@ -681,7 +727,7 @@ export interface DataGridInternalToken {
 }
 
 const INTERNAL_TOKEN: DataGridInternalToken = {
-  token: 'DataGridInternalToken'
+  token: 'DataGridInternalToken',
 };
 
 class IfExpandedDirective extends Lit.Directive.Directive {

package/front_end/ui/legacy/components/object_ui/JavaScriptREPL.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../../../core/sdk/sdk.js';
+import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../../../models/source_map_scopes/source_map_scopes.js';
 import * as Acorn from '../../../../third_party/acorn/acorn.js';
@@ -56,7 +57,8 @@ export class JavaScriptREPL {
     let expression = text;
     const callFrame = executionContext.debuggerModel.selectedCallFrame();
     if (callFrame?.script.isJavaScript()) {
-      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
+      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
+          callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
       try {
         expression =
             await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, nameMap);