chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/panels/sources/ProfilePlugin.ts

@@ -5,10 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -90,22 +89,31 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 function markersFromProfileData(
-    map: Map<number, number>, state: CodeMirror.EditorState,
-    type: SourceFrame.SourceFrame.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
-  const markerType = type === SourceFrame.SourceFrame.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
+    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
+  const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      const {from} = state.doc.line(line);
-      markers.push(new markerType(value).range(from));
+      if (value instanceof Map) {
+        for (const [, data] of value) {
+          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
+        }
+        continue;
+      }
+      aggregatedByLine.set(line, value);
     }
   }
+  for (const [line, value] of aggregatedByLine) {
+    const {from} = state.doc.line(line);
+    markers.push(new markerType(value).range(from));
+  }
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType): typeof Plugin =>
-    class extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Map<number, number>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
@@ -134,7 +142,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|undefined {
+  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
     return this.uiSourceCode.getDecorationData(type);
   }
 
@@ -144,7 +152,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
         !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
     const installed = Boolean(editor.state.field(this.field, false));
     const map = this.getLineMap();
@@ -189,6 +197,6 @@ const theme = CodeMirror.EditorView.baseTheme({
   },
 });
 
-export const MemoryProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+export const MemoryProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.MEMORY);
 
-export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
+export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.PERFORMANCE);

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -136,7 +136,7 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
         continue;
       }
       const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
-      if (binding && binding.network === uiSourceCode) {
+      if (binding?.network === uiSourceCode) {
         continue;
       }
       if (dirtyOnly && !uiSourceCode.isDirty()) {

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -238,6 +238,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
+    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);
@@ -423,7 +424,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
 
   private onDecorationChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     for (const plugin of this.plugins) {
-      plugin.decorationChanged(event.data as SourceFrame.SourceFrame.DecoratorType, this.textEditor);
+      plugin.decorationChanged(event.data as Workspace.UISourceCode.DecoratorType, this.textEditor);
     }
   }
 

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -42,6 +42,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
@@ -306,6 +307,13 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
   }
 }
 
+class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {
+  constructor() {
+    super();
+    this.initialize(TextEditor.JavaScript.completeInContext);
+  }
+}
+
 export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #treeElement!: UI.TreeOutline.TreeElement;
   private nameElement!: Element;
@@ -315,7 +323,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private element: HTMLDivElement;
   private editing: boolean;
   private linkifier: Components.Linkifier.Linkifier;
-  private textPrompt?: ObjectUI.ObjectPropertiesSection.ObjectPropertyPrompt;
+  private textPrompt?: ObjectPropertyPrompt;
   private result?: SDK.RemoteObject.RemoteObject|null;
   private preventClickTimeout?: number;
   constructor(
@@ -390,7 +398,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.element.removeChildren();
     const newDiv = this.element.createChild('div');
     newDiv.textContent = this.nameElement.textContent;
-    this.textPrompt = new ObjectUI.ObjectPropertiesSection.ObjectPropertyPrompt();
+    this.textPrompt = new ObjectPropertyPrompt();
     this.textPrompt.renderAsBlock();
     const proxyElement = (this.textPrompt.attachAndStartEditing(newDiv, this.finishEditing.bind(this)) as HTMLElement);
     this.#treeElement.listItemElement.classList.add('watch-expression-editing');

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

@@ -232,18 +232,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotAutomaticallyRevealFilesIn: 'Do not automatically reveal files in sidebar',
-  /**
-   * @description Setting under the Sources category to toggle usage of JavaScript source maps.
-   */
-  javaScriptSourceMaps: 'JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
   /**
    * @description Title of a setting under the Sources category.
    *'tab moves focus' is the name of the setting, which means that when the user
@@ -373,18 +361,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotDisplayVariableValuesInline: 'Do not display variable values inline while debugging',
-  /**
-   * @description Title of a setting under the Sources category
-   */
-  cssSourceMaps: 'CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableCssSourceMaps: 'Enable CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableCssSourceMaps: 'Disable CSS source maps',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1556,25 +1532,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
-  settingName: 'js-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,
@@ -1799,25 +1756,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.cssSourceMaps),
-  settingName: 'css-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableCssSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableCssSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/timeline/README.md

@@ -14,15 +14,7 @@ The first method is to run DevTools! Load up the Chrome for Testing version that
 
 DevTools, navigate to the Performance Panel and record or import a trace. There are a number of trace files saved in `devtools-frontend/test/unittests/fixtures/traces` that you can use.
 
-#### Option 2: the components server
-
-You can also use the DevTools component server. This server runs standalone parts of DevTools in the browser. To do this, run `npm run components-server` in the terminal, which will run a server on `localhost:8090`.
-
-You can then navigate to the Performance Panel examples using the link on the index page. This runs the real Performance Panel code in isolation, and you can additionally preload a trace by appending `?trace=name-of-trace-file-from-fixtures`. This is a nicer development cycle because you do not have to manually import a trace after each change. Note though that some parts of the experience are stubbed, so you always should test your work in proper DevTools too.
-
-These examples can also be used to create screenshot tests, which are an important tool for the Performance Panel because it is the only way to test `<canvas>` output. We define these as interaction tests (`devtools-frontend/tests/interactions/panels/performance`).
-
-#### Option 3: bundled DevTools in the browser
+#### Option 2: bundled DevTools in the browser
 
 This option loads the DevTools frontend in a browser tab in Chrome, but requires a little more setup to easily load traces.
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -135,13 +135,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-/**
- * This appender is only triggered when the Renderer handler is run. At
- * the moment this only happens in the basic component server example.
- * In the future, once this appender fully supports the behaviour of the
- * old engine's thread/sync tracks we can always run it by enabling the
- * Renderer and Samples handler by default.
- **/
 export class ThreadAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Thread';
 

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -777,7 +777,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   hoverAnnotationInSidebar(annotation: Trace.Types.File.Annotation): void {
     const overlay = ModificationsManager.activeManager()?.getOverlaybyAnnotation(annotation);
-    if (overlay && overlay.type === 'ENTRY_LABEL') {
+    if (overlay?.type === 'ENTRY_LABEL') {
       this.#overlays.highlightOverlay(overlay);
     }
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -945,12 +945,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         throw new Error('could not create performance agent focus');
       }
 
-      const agent = conversationHandler.createAgent(AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE);
-      const conversation = new AiAssistanceModel.AiHistoryStorage.Conversation(
+      const conversation = new AiAssistanceModel.AiConversation.AiConversation(
           AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
           [],
-          agent.id,
+          undefined,
           /* isReadOnly */ true,
+          conversationHandler.aidaClient,
+          undefined,
           /* isExternal */ true,
       );
 
@@ -960,7 +961,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.#externalAIConversationData = {
         conversationHandler,
         conversation,
-        agent,
         selected,
       };
     }
@@ -1599,7 +1599,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const recordingData = this.#historyManager.navigate(direction);
     // When navigating programmatically, you cannot navigate to the landing page
     // view, so we can discount that possibility here.
-    if (recordingData && recordingData.type === 'TRACE_INDEX') {
+    if (recordingData?.type === 'TRACE_INDEX') {
       this.#changeView({
         mode: 'VIEWING_TRACE',
         traceIndex: recordingData.parsedTraceIndex,
@@ -1652,7 +1652,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // Clarifying the window the code is referring to
     const hostWindow = window;
     function onMessageHandler(ev: MessageEvent): void {
-      if (url && ev.data && ev.data.type === 'REHYDRATING_WINDOW_READY') {
+      if (url && ev.data?.type === 'REHYDRATING_WINDOW_READY') {
         rehydratingWindow?.postMessage({type: 'REHYDRATING_TRACE_FILE', traceJson}, url.origin);
       }
       hostWindow.removeEventListener('message', onMessageHandler);
@@ -2865,8 +2865,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       event: Common.EventTarget
           .EventTargetEvent<{resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel, loadTime: number}>):
       Promise<void> {
-    if (this.state !== State.RECORDING || !this.recordingPageReload || !this.controller ||
-        this.controller.primaryPageTarget !== event.data.resourceTreeModel.target()) {
+    if (this.state !== State.RECORDING || !this.recordingPageReload ||
+        this.controller?.primaryPageTarget !== event.data.resourceTreeModel.target()) {
       return;
     }
     const controller = this.controller;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1646,6 +1646,8 @@ export class TimelineUIUtils {
   private static renderEventJson(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper): void {
     contentHelper.addSection(i18nString(UIStrings.traceEvent));
 
+    contentHelper.appendElementRow('eventKey', new Trace.EventsSerializer.EventsSerializer().keyForEvent(event) ?? '?');
+
     const eventWithArgsFirst = {
       ...{args: event.args},
       ...event,
@@ -2462,7 +2464,9 @@ export class TimelineDetailsContentHelper {
       const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
                              .createStackTraceFromProtocolRuntime(runtimeStackTrace, this.target);
       callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
-          undefined, this.target ?? undefined, this.#linkifier, {stackTrace, tabStops: true, showColumnNumber: true});
+          undefined, this.target ?? undefined, this.#linkifier, {tabStops: true, showColumnNumber: true});
+      callFrameContents.stackTrace = stackTrace;
+      await callFrameContents.updateComplete;
     } else {
       // I _think_ this only happens during tests.
       // See "TimelineFlameChartView > shows the details for a selected main thread event".

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

@@ -14,6 +14,7 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import exportTraceOptionsStyles from './exportTraceOptions.css.js';
 
@@ -44,6 +45,10 @@ const UIStrings = {
    * @description Text for the compression option.
    */
   shouldCompress: 'Compress with gzip',
+  /**
+   * @description Text for the explanation link
+   */
+  explanation: 'Explanation',
   /**
    * @description Text for the save trace button
    */
@@ -292,7 +297,16 @@ export class ExportTraceOptions extends HTMLElement {
             'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
-          <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
+          <div class='export-trace-options-row export-trace-options-row-last'>
+            <div class="export-trace-explanation">
+              <x-link
+                href="https://developer.chrome.com/docs/devtools/performance/save-trace"
+                class=devtools-link
+                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('save-trace-explanation')}>
+                  ${i18nString(UIStrings.explanation)}
+              </x-link>
+            </div>
+            <devtools-button
                   class="setup-button"
                   data-export-button
                   @click=${this.#onExportClick.bind(this)}

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

@@ -58,6 +58,14 @@ const UIStrings = {
    * @description Title of a view that shows performance metrics from the local environment.
    */
   localMetrics: 'Local metrics',
+  /**
+   *@description Text for the link to the historical field data for the specific URL or origin that is shown. This link text appears in parenthesis after the collection period information in the field data dialog. The link opens the CrUX Vis viewer (https://cruxvis.withgoogle.com).
+   */
+  fieldDataHistoryLink: 'View history',
+  /**
+   *@description Tooltip for the CrUX Vis viewer link which shows the history of the field data for the specific URL or origin.
+   */
+  fieldDataHistoryTooltip: 'View field data history in CrUX Vis',
   /**
    * @description Accessible label for a section that logs user interactions and layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
    */
@@ -840,6 +848,32 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
+  #renderFieldDataHistoryLink(): Lit.LitTemplate {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
+      return Lit.nothing;
+    }
+    const normalizedUrl = this.#cruxManager.pageResult?.normalizedUrl;
+    if (!normalizedUrl) {
+      return Lit.nothing;
+    }
+    const tmp = new URL('https://cruxvis.withgoogle.com/');
+    tmp.searchParams.set('view', 'cwvsummary');
+    tmp.searchParams.set('url', normalizedUrl);
+    // identifier must be 'origin' or 'url'.
+    const identifier = this.#cruxManager.fieldPageScope;
+    tmp.searchParams.set('identifier', identifier);
+    // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
+    const device = this.#cruxManager.getSelectedDeviceScope();
+    tmp.searchParams.set('device', device);
+    const cruxVis = `${tmp.origin}/#/${tmp.search}`;
+    return html`
+        (<x-link href=${cruxVis}
+                 class="local-field-link"
+                 title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
+        >${i18nString(UIStrings.fieldDataHistoryLink)}</x-link>)
+      `;
+  }
+
   #renderCollectionPeriod(): Lit.LitTemplate {
     const range = this.#getCollectionPeriodRange();
 
@@ -851,11 +885,13 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const fieldDataHistoryLink = range ? this.#renderFieldDataHistoryLink() : Lit.nothing;
+
     const warnings = this.#cruxManager.pageResult?.warnings || [];
 
     return html`
       <div class="field-data-message">
-        <div>${message}</div>
+        <div>${message} ${fieldDataHistoryLink}</div>
         ${warnings.map(warning => html`
           <div class="field-data-warning">${warning}</div>
         `)}

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

@@ -19,13 +19,22 @@
     height: 24px;
   }
 
-  .export-trace-blank {
+  .export-trace-explanation {
     flex: 1;
-    min-width: var(--sys-size-25)
+    min-width: var(--sys-size-25);
   }
 }
 
+.export-trace-options-row-last {
+  align-items: center;
+}
+
 .info-tooltip-container {
   max-width: var(--sys-size-28);
   white-space: normal;
 }
+
+x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+}

package/front_end/panels/timeline/enable-easter-egg.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const path = require('path');
+const path = require('node:path');
 
 const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
 const [, , targetGenDir] = process.argv;

package/front_end/panels/timeline/utils/Treemap.ts

@@ -132,7 +132,7 @@ export function makeScriptNode(src: string, sourceRoot: string, sourcesData: Rec
    * Collapse nodes that have only one child.
    */
   function collapseAll(node: TreemapNode): void {
-    while (node.children && node.children.length === 1) {
+    while (node.children?.length === 1) {
       const child = node.children[0];
       node.name += '/' + child.name;
       if (child.duplicatedNormalizedModuleName) {

package/front_end/third_party/chromium/README.chromium

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

package/front_end/third_party/puppeteer/README.chromium

@@ -1,10 +1,10 @@
 Name: Puppeteer Core
 Short Name: Puppeteer Core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.30.0
+Version: 24.31.0
 License: Apache-2.0
 License File: LICENSE
-Revision: 1afcd1605bd49775cfc8c16ddfc76aae6dacbd8b
+Revision: 1ad21f5e63d828175a1a5ca96c397c3d6ee1802b
 Security Critical: no
 Shipped: yes
 Update Mechanism: Autoroll

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/api/DeviceRequestPrompt.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2025 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { WaitTimeoutOptions } from './Page.js';
+/**
+ * Device in a request prompt.
+ *
+ * @public
+ */
+export declare class DeviceRequestPromptDevice {
+    /**
+     * Device id during a prompt.
+     */
+    id: string;
+    /**
+     * Device name as it appears in a prompt.
+     */
+    name: string;
+    /**
+     * @internal
+     */
+    constructor(id: string, name: string);
+}
+/**
+ * Device request prompts let you respond to the page requesting for a device
+ * through an API like WebBluetooth.
+ *
+ * @remarks
+ * `DeviceRequestPrompt` instances are returned via the
+ * {@link Page.waitForDevicePrompt} method.
+ *
+ * @example
+ *
+ * ```ts
+ * const [devicePrompt] = Promise.all([
+ *   page.waitForDevicePrompt(),
+ *   page.click('#connect-bluetooth'),
+ * ]);
+ * await devicePrompt.select(
+ *   await devicePrompt.waitForDevice(({name}) => name.includes('My Device')),
+ * );
+ * ```
+ *
+ * @public
+ */
+export declare abstract class DeviceRequestPrompt {
+    /**
+     * Current list of selectable devices.
+     */
+    abstract get devices(): DeviceRequestPromptDevice[];
+    /**
+     * Resolve to the first device in the prompt matching a filter.
+     */
+    abstract waitForDevice(filter: (device: DeviceRequestPromptDevice) => boolean, options?: WaitTimeoutOptions): Promise<DeviceRequestPromptDevice>;
+    /**
+     * Select a device in the prompt's list.
+     */
+    abstract select(device: DeviceRequestPromptDevice): Promise<void>;
+    /**
+     * Cancel the prompt.
+     */
+    abstract cancel(): Promise<void>;
+}
+//# sourceMappingURL=DeviceRequestPrompt.d.ts.map

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/api/DeviceRequestPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceRequestPrompt.d.ts","sourceRoot":"","sources":["../../../../src/api/DeviceRequestPrompt.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,WAAW,CAAC;AAElD;;;;GAIG;AACH,qBAAa,yBAAyB;IACpC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;gBACS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;CAIrC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,8BAAsB,mBAAmB;IACvC;;OAEG;IACH,QAAQ,KAAK,OAAO,IAAI,yBAAyB,EAAE,CAAC;IAEpD;;OAEG;IACH,QAAQ,CAAC,aAAa,CACpB,MAAM,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,OAAO,EACtD,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,yBAAyB,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,yBAAyB,GAAG,OAAO,CAAC,IAAI,CAAC;IAEjE;;OAEG;IACH,QAAQ,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;CACjC"}

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/api/DeviceRequestPrompt.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2025 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceRequestPrompt = exports.DeviceRequestPromptDevice = void 0;
+/**
+ * Device in a request prompt.
+ *
+ * @public
+ */
+class DeviceRequestPromptDevice {
+    /**
+     * Device id during a prompt.
+     */
+    id;
+    /**
+     * Device name as it appears in a prompt.
+     */
+    name;
+    /**
+     * @internal
+     */
+    constructor(id, name) {
+        this.id = id;
+        this.name = name;
+    }
+}
+exports.DeviceRequestPromptDevice = DeviceRequestPromptDevice;
+/**
+ * Device request prompts let you respond to the page requesting for a device
+ * through an API like WebBluetooth.
+ *
+ * @remarks
+ * `DeviceRequestPrompt` instances are returned via the
+ * {@link Page.waitForDevicePrompt} method.
+ *
+ * @example
+ *
+ * ```ts
+ * const [devicePrompt] = Promise.all([
+ *   page.waitForDevicePrompt(),
+ *   page.click('#connect-bluetooth'),
+ * ]);
+ * await devicePrompt.select(
+ *   await devicePrompt.waitForDevice(({name}) => name.includes('My Device')),
+ * );
+ * ```
+ *
+ * @public
+ */
+class DeviceRequestPrompt {
+}
+exports.DeviceRequestPrompt = DeviceRequestPrompt;
+//# sourceMappingURL=DeviceRequestPrompt.js.map

package/front_end/third_party/puppeteer/package/lib/cjs/puppeteer/api/DeviceRequestPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceRequestPrompt.js","sourceRoot":"","sources":["../../../../src/api/DeviceRequestPrompt.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAIH;;;;GAIG;AACH,MAAa,yBAAyB;IACpC;;OAEG;IACH,EAAE,CAAS;IAEX;;OAEG;IACH,IAAI,CAAS;IAEb;;OAEG;IACH,YAAY,EAAU,EAAE,IAAY;QAClC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF;AAlBD,8DAkBC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAsB,mBAAmB;CAuBxC;AAvBD,kDAuBC"}