chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -138,7 +138,7 @@ const UIStrings = {
    * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing.
    * @example {src/myapp.debug.wasm.dwp} PH1
    */
-  debugFileNotFound: 'Failed to load debug file "{PH1}".',
+  debugFileNotFound: 'Failed to load debug file "{PH1}"',
   /**
    * @description Error message that is displayed when no debug info could be loaded.
    * @example {app.wasm} PH1
@@ -666,6 +666,23 @@ export class DebuggerPlugin extends Plugin {
     return {
       box,
       show: async (popover: UI.GlassPane.GlassPane) => {
+        const scopeMappings = await this.#getScopeMappings(selectedCallFrame);
+        const scopedVariable = findVariableInScopeMappings(evaluationText, highlightRange.from, scopeMappings);
+        if (scopedVariable.found) {
+          if (!scopedVariable.value) {
+            return false;
+          }
+          objectPopoverHelper =
+              await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(scopedVariable.value, popover);
+          const potentiallyUpdatedCallFrame =
+              UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+          if (!objectPopoverHelper || debuggableFrame !== potentiallyUpdatedCallFrame) {
+            objectPopoverHelper?.dispose();
+            return false;
+          }
+          return true;
+        }
+
         let resolvedText = '';
         if (selectedCallFrame.script.isJavaScript()) {
           const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
@@ -950,6 +967,23 @@ export class DebuggerPlugin extends Plugin {
     return offset ?? null;
   }
 
+  #cachedScopeMappings?: {callFrame: SDK.DebuggerModel.CallFrame, promise: Promise<ScopeMapping[]>};
+
+  #getScopeMappings(callFrame: SDK.DebuggerModel.CallFrame,
+                    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]> {
+    if (this.#cachedScopeMappings?.callFrame !== callFrame) {
+      const url = this.uiSourceCode.url();
+      this.#cachedScopeMappings = {
+        callFrame,
+        promise: computeScopeMappings(
+            callFrame, location => this.#rawLocationToEditorOffset(location, url),
+            (line, col) => this.editor?.toOffset(this.transformer.uiLocationToEditorLocation(line, col)) ?? null,
+            resolvedScopeChain),
+      };
+    }
+    return this.#cachedScopeMappings.promise;
+  }
+
   private async computeValueDecorations(): Promise<CodeMirror.DecorationSet|null> {
     if (!this.editor) {
       return null;
@@ -968,13 +1002,22 @@ export class DebuggerPlugin extends Plugin {
     const callFrame = debuggableFrame.sdkFrame;
     const url = this.uiSourceCode.url();
 
-    const rawLocationToEditorOffset: (location: SDK.DebuggerModel.Location|null) => Promise<number|null> = location =>
-        this.#rawLocationToEditorOffset(location, url);
-
-    const functionOffsetPromise = this.#rawLocationToEditorOffset(callFrame.functionLocation(), url);
+    const uiPositionToEditorOffset = (lineNumber: number, columnNumber: number): number|null =>
+        this.editor?.toOffset(this.transformer.uiLocationToEditorLocation(lineNumber, columnNumber)) ?? null;
+    const scopeChain = await SourceMapScopes.ScopeChainModel.ScopeChainModel.resolveScopeChain(
+        callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+    const localOriginalScope = scopeChain
+                                   .find((s): s is SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry =>
+                                             s instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry &&
+                                             s.type() === Protocol.Debugger.ScopeType.Local)
+                                   ?.originalScope();
+
+    const functionOffsetPromise = localOriginalScope ?
+        Promise.resolve(uiPositionToEditorOffset(localOriginalScope.start.line, localOriginalScope.start.column)) :
+        this.#rawLocationToEditorOffset(callFrame.functionLocation(), url);
     const executionOffsetPromise = this.#rawLocationToEditorOffset(callFrame.location(), url);
     const [functionOffset, executionOffset] = await Promise.all([functionOffsetPromise, executionOffsetPromise]);
-    if (!functionOffset || !executionOffset || !this.editor) {
+    if (functionOffset === null || !executionOffset || !this.editor) {
       return null;
     }
 
@@ -991,12 +1034,13 @@ export class DebuggerPlugin extends Plugin {
       CodeMirror.ensureSyntaxTree(this.editor.state, executionOffset, 16);
     }
 
-    const variableNames = getVariableNamesByLine(this.editor.state, functionOffset, executionOffset, executionOffset);
+    const variableNames = getVariableNamesByLine(this.editor.state, functionOffset, executionOffset, executionOffset,
+                                                 Boolean(localOriginalScope));
     if (variableNames.length === 0) {
       return null;
     }
 
-    const scopeMappings = await computeScopeMappings(callFrame, rawLocationToEditorOffset);
+    const scopeMappings = await this.#getScopeMappings(callFrame, scopeChain);
     // After the `await` the DebuggerPlugin could have been disposed. Re-check `this.editor`.
     if (!this.editor || scopeMappings.length === 0) {
       return null;
@@ -1986,8 +2030,19 @@ class ValueDecoration extends CodeMirror.WidgetType {
 
 const valueDecorations = defineStatefulDecoration();
 
-function isVariableIdentifier(tokenType: string): boolean {
-  return tokenType === 'VariableName' || tokenType === 'VariableDefinition';
+function isVariableIdentifierNode(node: {name: string, from: number, to: number}, doc: CodeMirror.Text): boolean {
+  switch (node.name) {
+    case 'VariableName':
+    case 'VariableDefinition':
+    case 'Identifier':
+    case 'Definition':
+    case 'variableName':
+    case 'variableName.definition':
+      return (node.from === 0 || doc.sliceString(node.from - 1, node.from) !== '.') &&
+          doc.sliceString(node.to, node.to + 1) !== '(';
+    default:
+      return false;
+  }
 }
 
 function isVariableDefinition(tokenType: string): boolean {
@@ -2007,9 +2062,9 @@ class SiblingScopeVariables {
   variables: Array<{line: number, from: number, id: string}> = [];
 }
 
-export function getVariableNamesByLine(
-    editorState: CodeMirror.EditorState, fromPos: number, toPos: number,
-    currentPos: number): Array<{line: number, from: number, id: string}> {
+export function getVariableNamesByLine(editorState: CodeMirror.EditorState, fromPos: number, toPos: number,
+                                       currentPos: number,
+                                       useOriginalScopes = false): Array<{line: number, from: number, id: string}> {
   const fromLine = editorState.doc.lineAt(fromPos);
   fromPos = Math.min(fromLine.to, fromPos);
   toPos = editorState.doc.lineAt(toPos).from;
@@ -2020,7 +2075,7 @@ export function getVariableNamesByLine(
    * We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
    **/
   function isSiblingScopeNode(node: {name: string, from: number, to: number}): boolean {
-    return isScopeNode(node.name) && (node.to < currentPos || currentPos < node.from);
+    return !useOriginalScopes && isScopeNode(node.name) && (node.to < currentPos || currentPos < node.from);
   }
 
   const names: Array<{line: number, from: number, id: string}> = [];
@@ -2050,7 +2105,7 @@ export function getVariableNamesByLine(
         return;
       }
 
-      const varName = isVariableIdentifier(node.name) && editorState.sliceDoc(node.from, node.to);
+      const varName = isVariableIdentifierNode(node, editorState.doc) && editorState.sliceDoc(node.from, node.to);
       if (!varName) {
         return;
       }
@@ -2083,49 +2138,92 @@ export function getVariableNamesByLine(
   return names;
 }
 
+export interface ScopeMapping {
+  scopeStart: number;
+  scopeEnd: number;
+  variableMap: Map<string, SDK.RemoteObject.RemoteObject|null>;
+}
+
 export async function computeScopeMappings(
     callFrame: SDK.DebuggerModel.CallFrame,
-    rawLocationToEditorOffset: (l: SDK.DebuggerModel.Location|null) => Promise<number|null>):
-    Promise<Array<{scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}>> {
-  const scopeMappings:
-      Array<{scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}> = [];
-  for (const scope of callFrame.scopeChain()) {
-    const scopeStart = await rawLocationToEditorOffset(scope.range()?.start ?? null);
-    if (!scopeStart) {
-      break;
+    rawLocationToEditorOffset: (l: SDK.DebuggerModel.Location|null) => Promise<number|null>,
+    uiPositionToEditorOffset?: (line: number, column: number) => number | null,
+    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]> {
+  const scopeMappings: ScopeMapping[] = [];
+  const scopeChain = resolvedScopeChain ??
+      await SourceMapScopes.ScopeChainModel.ScopeChainModel.resolveScopeChain(
+          callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+  const activeScopes =
+      new Set(scopeChain.filter(s => s instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry)
+                  .map(s => s.originalScope()));
+  const addInactiveChildren =
+      (children: ReturnType<SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry['originalScope']>['children']):
+          void => {
+            for (const child of children) {
+              if (!activeScopes.has(child)) {
+                const scopeStart = uiPositionToEditorOffset?.(child.start.line, child.start.column) ?? null;
+                const scopeEnd = uiPositionToEditorOffset?.(child.end.line, child.end.column) ?? null;
+                if (scopeStart !== null && scopeEnd !== null && child.variables.length > 0) {
+                  scopeMappings.push({scopeStart, scopeEnd, variableMap: new Map(child.variables.map(v => [v, null]))});
+                }
+                addInactiveChildren(child.children);
+              }
+            }
+          };
+
+  for (const scope of scopeChain) {
+    let scopeStart: number|null = null;
+    let scopeEnd: number|null = null;
+    if (scope instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry) {
+      const orig = scope.originalScope();
+      scopeStart = uiPositionToEditorOffset?.(orig.start.line, orig.start.column) ?? null;
+      scopeEnd = uiPositionToEditorOffset?.(orig.end.line, orig.end.column) ?? null;
+      addInactiveChildren(orig.children);
+    } else {
+      scopeStart = await rawLocationToEditorOffset(scope.range()?.start ?? null);
+      scopeEnd = await rawLocationToEditorOffset(scope.range()?.end ?? null);
     }
-    const scopeEnd = await rawLocationToEditorOffset(scope.range()?.end ?? null);
-    if (!scopeEnd) {
+    if (scopeStart === null || scopeEnd === null) {
       break;
     }
 
-    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-    const {properties} = await SourceMapScopes.NamesResolver.resolveScopeInObject(scope, debuggerWorkspaceBinding)
-                             .getAllProperties(false, false);
+    const {properties} = await scope.object().getAllProperties(false, true);
     if (!properties || properties.length > MAX_PROPERTIES_IN_SCOPE_FOR_VALUE_DECORATIONS) {
       break;
     }
-    const variableMap = new Map<string, SDK.RemoteObject.RemoteObject>(
-        properties.map(p => [p.name, p.value] as [string, SDK.RemoteObject.RemoteObject]));
+    const variableMap =
+        new Map<string, SDK.RemoteObject.RemoteObject|null>(properties.map(p => [p.name, p.value ?? null]));
 
     scopeMappings.push({scopeStart, scopeEnd, variableMap});
 
     // Let us only get mappings for block scopes until we see a surrounding function (local) scope.
-    if (scope.type() === Protocol.Debugger.ScopeType.Local) {
+    if (scope.type() === Protocol.Debugger.ScopeType.Local &&
+        !(scope instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry)) {
       break;
     }
   }
   return scopeMappings;
 }
 
-export function getVariableValuesByLine(
-    scopeMappings:
-        Array<{scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}>,
-    variableNames: Array<{line: number, from: number, id: string}>):
+export function findVariableInScopeMappings(name: string, pos: number, scopeMappings: ScopeMapping[]):
+    {found: boolean, value: SDK.RemoteObject.RemoteObject|null} {
+  for (const scope of scopeMappings) {
+    if (pos < scope.scopeStart || pos >= scope.scopeEnd) {
+      continue;
+    }
+    if (scope.variableMap.has(name)) {
+      return {found: true, value: scope.variableMap.get(name) ?? null};
+    }
+  }
+  return {found: false, value: null};
+}
+
+export function getVariableValuesByLine(scopeMappings: ScopeMapping[],
+                                        variableNames: Array<{line: number, from: number, id: string}>):
     Map<number, Map<string, SDK.RemoteObject.RemoteObject>>|null {
   const namesPerLine = new Map<number, Map<string, SDK.RemoteObject.RemoteObject>>();
   for (const {line, from, id} of variableNames) {
-    const varValue = findVariableInChain(id, from, scopeMappings);
+    const varValue = findVariableInScopeMappings(id, from, scopeMappings).value;
     if (!varValue) {
       continue;
     }
@@ -2137,24 +2235,6 @@ export function getVariableValuesByLine(
     names.set(id, varValue);
   }
   return namesPerLine;
-
-  function findVariableInChain(
-      name: string,
-      pos: number,
-      scopeMappings:
-          Array<{scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}>,
-      ): SDK.RemoteObject.RemoteObject|null {
-    for (const scope of scopeMappings) {
-      if (pos < scope.scopeStart || pos >= scope.scopeEnd) {
-        continue;
-      }
-      const value = scope.variableMap.get(name);
-      if (value) {
-        return value;
-      }
-    }
-    return null;
-  }
 }
 
 // Pop-over
@@ -2229,8 +2309,9 @@ export function computePopoverHighlightRange(state: CodeMirror.EditorState, mime
 
     default: {
       // In other languages, just assume a token consisting entirely
-      // of identifier-like characters is an identifier.
-      if (node.to - node.from > 50 || /[^\w_\-$]/.test(state.sliceDoc(node.from, node.to))) {
+      // of identifier-like characters is an identifier, unless it is a member access.
+      if (node.to - node.from > 50 || /[^\w_\-$]/.test(state.sliceDoc(node.from, node.to)) ||
+          state.sliceDoc(node.from - 1, node.from) === '.' || state.sliceDoc(node.from - 2, node.from) === '->') {
         return null;
       }
       return {from: node.from, to: node.to, containsSideEffects: false};

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -244,21 +244,23 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
         ObjectUI.ObjectPropertiesSection.populateObjectTreeContextMenu(
             contextMenu,
             objectTree,
-            async () => {
-              await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.collapseRecursively();
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
-              this.requestUpdate();
-            },
-            () => {
-              objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
-              this.requestUpdate();
+            {
+              expandRecursively: async () => {
+                await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+                this.requestUpdate();
+              },
+              collapseChildren: () => {
+                objectTree.collapseRecursively();
+                this.requestUpdate();
+              },
+              sortPropertiesAlphabetically: node => {
+                node.sortPropertiesAlphabetically = !node.sortPropertiesAlphabetically;
+                this.requestUpdate();
+              },
+              onShowAllToggled: node => {
+                node.includeNullOrUndefinedValues = !node.includeNullOrUndefinedValues;
+                this.requestUpdate();
+              },
             },
         );
       },

package/front_end/panels/timeline/components/DetailsView.ts

@@ -25,7 +25,7 @@ const UIStrings = {
    * @description Warning message indicating that an event is likely a performance bottleneck in the Performance panel.
    * @example {Forced reflow} PH1
    */
-  sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.',
+  sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck',
   /**
    * @description Warning message in the Performance panel for an idle callback function that took longer to execute than its predefined deadline.
    * @example {10ms} PH1
@@ -36,7 +36,7 @@ const UIStrings = {
    * @example {Task} PH1
    * @example {10ms} PH2
    */
-  sTookS: '{PH1} took {PH2}.',
+  sTookS: '{PH1} took {PH2}',
   /**
    * @description Label in the Performance panel for a task that took a long time.
    */
@@ -49,7 +49,7 @@ const UIStrings = {
    * @description Warning message in the Performance panel indicating that an interaction caused poor responsiveness.
    * @example {Long interaction} PH1
    */
-  sIsLikelyPoorPageResponsiveness: '{PH1} indicates poor page responsiveness.',
+  sIsLikelyPoorPageResponsiveness: '{PH1} indicates poor page responsiveness',
   /**
    * @description Label for the WebSocket sub-protocol in the event details view of the Performance panel.
    */

package/front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/menus/menus.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -5,12 +5,11 @@
 import '../../../ui/components/settings/settings.js';
 import '../../../ui/kit/kit.js';
 import './FieldSettingsDialog.js';
-import '../../../ui/components/menus/menus.js';
 import './MetricCard.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
@@ -19,7 +18,6 @@ import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
 import type * as Spec from '../../../models/live-metrics/web-vitals-injected/spec/spec.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import type * as Menus from '../../../ui/components/menus/menus.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -99,14 +97,12 @@ const UIStrings = {
   notEnoughData: 'Not enough data',
   /**
    * @description Label for real user network conditions in the live metrics view of the Performance panel.
-   * @example {75th percentile is similar to Slow 4G throttling} PH1
    */
-  network: 'Network: {PH1}',
+  network: 'Network:',
   /**
    * @description Label for a select dropdown to choose the device form factor in the Performance panel.
-   * @example {Mobile} PH1
    */
-  device: 'Device: {PH1}',
+  device: 'Device:',
   /**
    * @description Label for an option to select all device form factors in the Performance panel.
    */
@@ -303,10 +299,6 @@ const UIStrings = {
    * @description Description text for recording a performance timeline of a connected Node process in the Performance panel.
    */
   nodeClickToRecord: 'Record a performance timeline of the connected Node process',
-  /**
-   * @description Label for the network throttling dropdown in the live metrics view of the Performance panel.
-   */
-  networkThrottling: 'Network:',
   /**
    * @description Tooltip text explaining why the user should adjust throttling settings in the Performance panel.
    */
@@ -326,8 +318,8 @@ export interface ViewInput {
   toggleRecordAction: UI.ActionRegistration.Action;
   recordReloadAction: UI.ActionRegistration.Action;
   cruxManager: CrUXManager.CrUXManager;
-  handlePageScopeSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
-  handleDeviceOptionSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  handlePageScopeSelected: (pageScope: CrUXManager.PageScope) => void;
+  handleDeviceOptionSelected: (deviceOption: DeviceOption) => void;
   revealLayoutShiftCluster: (clusterIds: Set<LiveMetrics.LayoutShift['uniqueLayoutShiftId']>) => void;
   revealInteraction: (interaction: LiveMetrics.Interaction) => void;
   logExtraInteractionDetails: (interaction: LiveMetrics.Interaction) => void;
@@ -636,8 +628,8 @@ function renderRecordingSettings(input: ViewInput): Lit.LitTemplate {
     <div class="device-toolbar-description">${Insights.Helpers.md(i18nString(UIStrings.useDeviceToolbar))}</div>
     ${fieldEnabled ? html`
       <ul class="environment-recs-list">
-        <li>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.device, {PH1: html`<span class="environment-rec">${deviceRec}</span>`})}</li>
-        <li>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.network, {PH1: html`<span class="environment-rec">${networkRec}</span>`})}</li>
+        <li>${i18nString(UIStrings.device)} <span class="environment-rec">${deviceRec}</span></li>
+        <li>${i18nString(UIStrings.network)} <span class="environment-rec">${networkRec}</span></li>
       </ul>
     ` : nothing}
     <div class="environment-option">
@@ -649,7 +641,7 @@ function renderRecordingSettings(input: ViewInput): Lit.LitTemplate {
     </div>
     <div class="environment-option">
       <label class="environment-option-label">
-        ${i18nString(UIStrings.networkThrottling)}
+        ${i18nString(UIStrings.network)}
         <select
           ${widget(MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect, {
             bindToGlobalConditions: true,
@@ -685,35 +677,38 @@ function renderPageScopeSetting(input: ViewInput): Lit.LitTemplate {
   // If there is no data at all we should force users to switch pages or reconfigure CrUX.
   const shouldDisable = !input.cruxManager.pageResult?.['url-ALL'] && !input.cruxManager.pageResult?.['origin-ALL'];
 
-  /* eslint-disable @devtools/no-deprecated-component-usages */
   return html`
-    <devtools-select-menu
+    <select
       id="page-scope-select"
       class="field-data-option"
-      @selectmenuselected=${input.handlePageScopeSelected}
-      .showDivider=${true}
-      .showArrow=${true}
-      .sideButton=${false}
-      .showSelectedItem=${true}
-      .buttonTitle=${buttonTitle}
-      .disabled=${shouldDisable}
+      @change=${
+      (e: Event) => input.handlePageScopeSelected((e.target as HTMLSelectElement).value as CrUXManager.PageScope)}
+      ?disabled=${shouldDisable}
       title=${accessibleTitle}
+      aria-label=${accessibleTitle}
+      .value=${live(input.cruxManager.fieldPageScope)}
+      jslog=${VisualLogging.dropDown('page-scope').track({
+    change: true,
+  })}
     >
-      <devtools-menu-item
-        .value=${'url'}
-        .selected=${input.cruxManager.fieldPageScope === 'url'}
+      <option
+        value="url"
+        jslog=${VisualLogging.item('url').track({
+    click: true,
+  })}
       >
         ${urlLabel}
-      </devtools-menu-item>
-      <devtools-menu-item
-        .value=${'origin'}
-        .selected=${input.cruxManager.fieldPageScope === 'origin'}
+      </option>
+      <option
+        value="origin"
+        jslog=${VisualLogging.item('origin').track({
+    click: true,
+  })}
       >
         ${originLabel}
-      </devtools-menu-item>
-    </devtools-select-menu>
+      </option>
+    </select>
   `;
-  /* eslint-enable @devtools/no-deprecated-component-usages */
 }
 
 function renderDeviceScopeSetting(input: ViewInput): Lit.LitTemplate {
@@ -726,35 +721,35 @@ function renderDeviceScopeSetting(input: ViewInput): Lit.LitTemplate {
   const shouldDisable = !input.cruxManager.getFieldResponse(input.cruxManager.fieldPageScope, 'ALL');
 
   const currentDeviceLabel = getLabelForDeviceOption(input.cruxManager, input.cruxManager.fieldDeviceOption);
+  const accessibleTitle = i18nString(UIStrings.showFieldDataForDevice, {PH1: currentDeviceLabel});
 
   // clang-format off
-  /* eslint-disable @devtools/no-deprecated-component-usages */
   return html`
-    <devtools-select-menu
-      id="device-scope-select"
-      class="field-data-option"
-      @selectmenuselected=${input.handleDeviceOptionSelected}
-      .showDivider=${true}
-      .showArrow=${true}
-      .sideButton=${false}
-      .showSelectedItem=${true}
-      .buttonTitle=${i18nString(UIStrings.device, {PH1: currentDeviceLabel})}
-      .disabled=${shouldDisable}
-      title=${i18nString(UIStrings.showFieldDataForDevice, {PH1: currentDeviceLabel})}
-    >
-      ${DEVICE_OPTION_LIST.map(deviceOption => {
-        return html`
-          <devtools-menu-item
-            .value=${deviceOption}
-            .selected=${input.cruxManager.fieldDeviceOption === deviceOption}
-          >
-            ${getLabelForDeviceOption(input.cruxManager, deviceOption)}
-          </devtools-menu-item>
-        `;
-      })}
-    </devtools-select-menu>
+    <label class="field-data-option">
+      ${i18nString(UIStrings.device)}
+      <select
+        id="device-scope-select"
+        @change=${(e: Event) => input.handleDeviceOptionSelected((e.target as HTMLSelectElement).value as DeviceOption)}
+        ?disabled=${shouldDisable}
+        title=${accessibleTitle}
+        aria-label=${accessibleTitle}
+        .value=${live(input.cruxManager.fieldDeviceOption)}
+        jslog=${VisualLogging.dropDown('device-scope').track({change: true})}
+      >
+        ${DEVICE_OPTION_LIST.map(deviceOption => {
+          return html`
+            <option
+              value=${deviceOption}
+              ?selected=${input.cruxManager.fieldDeviceOption === deviceOption}
+              jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(deviceOption)).track({click: true})}
+            >
+              ${getLabelForDeviceOption(input.cruxManager, deviceOption)}
+            </option>
+          `;
+        })}
+      </select>
+    </label>
   `;
-  /* eslint-enable @devtools/no-deprecated-component-usages */
   // clang-format on
 }
 
@@ -1229,8 +1224,8 @@ export class LiveMetricsView extends UI.Widget.Widget {
         EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
   }
 
-  #onPageScopeMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    if (event.itemValue === 'url') {
+  #onPageScopeMenuItemSelected(pageScope: CrUXManager.PageScope): void {
+    if (pageScope === 'url') {
       this.#cruxManager.fieldPageScope = 'url';
     } else {
       this.#cruxManager.fieldPageScope = 'origin';
@@ -1238,8 +1233,8 @@ export class LiveMetricsView extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #onDeviceOptionMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    this.#cruxManager.fieldDeviceOption = event.itemValue as DeviceOption;
+  #onDeviceOptionMenuItemSelected(deviceOption: DeviceOption): void {
+    this.#cruxManager.fieldDeviceOption = deviceOption;
     this.requestUpdate();
   }
 

package/front_end/panels/timeline/components/OriginMap.ts

@@ -115,7 +115,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
   // clang-format off
   Lit.render(html`
-    <devtools-data-grid striped inline
+    <devtools-data-grid striped inline deletable
         @click=${(e: Event) => { e.stopPropagation(); }}
         @create=${input.onCreate}>
       <table>

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -57,7 +57,7 @@ const UIStrings = {
    * @description Accessible label for the button to expand an insight to view details in the Performance panel sidebar.
    * @example {LCP breakdown} PH1
    */
-  viewDetails: 'View details for {PH1} insight.',
+  viewDetails: 'View details for {PH1} insight',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/BaseInsightComponent.ts', UIStrings);
@@ -108,8 +108,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   let ariaLabel = `${i18nString(UIStrings.viewDetails, {PH1: model.title})}`;
   if (estimatedSavingsAriaLabel) {
-    // space prefix is deliberate to add a gap after the view details text
-    ariaLabel += ` ${estimatedSavingsAriaLabel}`;
+    ariaLabel += `. ${estimatedSavingsAriaLabel}`;
   }
 
   function renderInsightContent(): Lit.LitTemplate {

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -269,6 +269,7 @@
 }
 
 .field-data-option {
+  display: block;
   margin: var(--sys-size-5) 0;
   max-width: 100%;
 }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 87625275b7c30150efc10c7dbf7c86982459704f
+Revision: 9d63ca908583451379cc48bc4e3cc2e5c7041395
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE