chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

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

@@ -6,8 +6,6 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
-import type {
-  LegacyJavaScriptInsightModel, PatternMatchResult} from '../../../../models/trace/insights/LegacyJavaScript.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -21,7 +19,8 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
+export class LegacyJavaScript extends
+    BaseInsightComponent<Trace.Insights.Models.LegacyJavaScript.LegacyJavaScriptInsightModel> {
   override internalName = 'legacy-javascript';
 
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
@@ -32,7 +31,8 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
     return true;
   }
 
-  async #revealLocation(script: Trace.Handlers.ModelHandlers.Scripts.Script, match: PatternMatchResult): Promise<void> {
+  async #revealLocation(script: Trace.Handlers.ModelHandlers.Scripts.Script,
+                        match: Trace.Insights.Models.LegacyJavaScript.PatternMatchResult): Promise<void> {
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!target) {
       return;

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

@@ -4,7 +4,6 @@
 
 import './Table.js';
 
-import type {ModernHTTPInsightModel} from '../../../../models/trace/insights/ModernHTTP.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -18,7 +17,7 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.M
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
+export class ModernHTTP extends BaseInsightComponent<Trace.Insights.Models.ModernHTTP.ModernHTTPInsightModel> {
   override internalName = 'modern-http';
 
   protected override hasAskAiSupport(): boolean {

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

@@ -6,9 +6,6 @@ import './Table.js';
 import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {
-  CriticalRequestNode, NetworkDependencyTreeInsightModel} from
-  '../../../../models/trace/insights/NetworkDependencyTree.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -27,7 +24,8 @@ const {widget} = UI.Widget;
 
 export const MAX_CHAINS_TO_SHOW = 5;
 
-export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependencyTreeInsightModel> {
+export class NetworkDependencyTree extends
+    BaseInsightComponent<Trace.Insights.Models.NetworkDependencyTree.NetworkDependencyTreeInsightModel> {
   override internalName = 'long-critical-network-tree';
 
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
@@ -48,7 +46,7 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     return overlays;
   }
 
-  #renderNetworkTreeRow(node: CriticalRequestNode): Lit.LitTemplate {
+  #renderNetworkTreeRow(node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): Lit.LitTemplate {
     const requestStyles = Lit.Directives.styleMap({
       display: 'flex',
       '--override-timeline-link-text-color': node.isLongest ? 'var(--sys-color-error)' : '',
@@ -71,7 +69,7 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     // clang-format on
   }
 
-  mapNetworkDependencyToRow(node: CriticalRequestNode): TableDataRow|null {
+  mapNetworkDependencyToRow(node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): TableDataRow|null {
     // Check early if we've exceeded the maximum number of chains to show.
     // If so, and this is a leaf node, increment count and then skip rendering.
     // Otherwise, simply skip rendering.
@@ -93,11 +91,15 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
       values: [this.#renderNetworkTreeRow(node)],
       overlays: this.#createOverlayForChain(node.relatedRequests),
       // Filter out the empty rows otherwise the `Table`component will render a super short row
-      subRows: node.children.map(child => this.mapNetworkDependencyToRow(child)).filter(row => row !== null),
+      subRows: node.children
+                   .map((child: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode) =>
+                            this.mapNetworkDependencyToRow(child))
+                   .filter((row: TableDataRow|null) => row !== null),
     };
   }
 
-  #renderNetworkDependencyTree(nodes: CriticalRequestNode[]): Lit.LitTemplate|null {
+  #renderNetworkDependencyTree(nodes: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode[]):
+      Lit.LitTemplate|null {
     if (nodes.length === 0) {
       return null;
     }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -17,7 +16,8 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.R
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
+export class RenderBlocking extends
+    BaseInsightComponent<Trace.Insights.Models.RenderBlocking.RenderBlockingInsightModel> {
   override internalName = 'render-blocking-requests';
 
   mapToRow(request: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {

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

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {InsightModel} from '../../../../models/trace/insights/types.js';
+import type * as Insights from '../../../../models/trace/insights/insights.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
+type InsightModel = Insights.Types.InsightModel;
+
 export interface InsightDetails {
   title: string;
   description: string;

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

@@ -8,7 +8,6 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import type {SlowCSSSelectorInsightModel} from '../../../../models/trace/insights/SlowCSSSelector.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -22,7 +21,8 @@ const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
+export class SlowCSSSelector extends
+    BaseInsightComponent<Trace.Insights.Models.SlowCSSSelector.SlowCSSSelectorInsightModel> {
   override internalName = 'slow-css-selector';
   #selectorLocations = new Map<string, Protocol.CSS.SourceRange[]>();
 

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -18,7 +17,7 @@ const {widget} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
-export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
+export class ThirdParties extends BaseInsightComponent<Trace.Insights.Models.ThirdParties.ThirdPartiesInsightModel> {
   override internalName = 'third-parties';
 
   #mainThreadTimeAggregator: RowLimitAggregator<Trace.Extras.ThirdParties.EntitySummary> = {

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
@@ -11,7 +10,7 @@ import {nodeLink} from './NodeLink.js';
 
 const {html} = Lit;
 
-export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
+export class Viewport extends BaseInsightComponent<Trace.Insights.Models.Viewport.ViewportInsightModel> {
   override internalName = 'viewport';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -15,7 +15,6 @@ import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
-import type {SectionPosition} from './components/TimespanBreakdownOverlay.js';
 
 const UIStrings = {
   /**
@@ -939,7 +938,7 @@ export class Overlays extends EventTarget {
     widget.left = leftEdgePixel;
     widget.width = rangeWidth;
 
-    const widths: SectionPosition[] = [];
+    const widths: Components.TimespanBreakdownOverlay.SectionPosition[] = [];
     for (const section of overlay.sections) {
       const leftPixel = this.#xPixelForMicroSeconds('main', section.bounds.min);
       const rightPixel = this.#xPixelForMicroSeconds('main', section.bounds.max);

package/front_end/panels/timeline/timeline.ts

@@ -7,7 +7,6 @@ import * as AnnotationHelpers from './AnnotationHelpers.js';
 import * as AppenderUtils from './AppenderUtils.js';
 import * as BenchmarkEvents from './BenchmarkEvents.js';
 import * as CompatibilityTracksAppender from './CompatibilityTracksAppender.js';
-import * as NetworkTrackWidget from './components/NetworkTrackWidget.js';
 import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
@@ -62,7 +61,6 @@ export {
   LayoutShiftsTrackAppender,
   ModificationsManager,
   NetworkTrackAppender,
-  NetworkTrackWidget,
   RecordingMetadata,
   SaveFileFormatter,
   TargetForEvent,

package/front_end/panels/web_audio/WebAudioView.ts

@@ -49,6 +49,10 @@ const UIStrings = {
    * @description Label for the callback buffer size of an audio context.
    */
   callbackBufferSize: 'Callback buffer size',
+  /**
+   * @description Label for the render quantum size of an audio context.
+   */
+  renderQuantumSize: 'Render quantum size',
   /**
    * @description Label in the WebAudio tool for the maximum number of output channels of an audio context.
    */
@@ -128,7 +132,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             link: WEBAUDIO_EXPLANATION_URL,
           })}
         </div>` : html`<div class="web-audio-details-container vbox flex-auto">
-          <div class="context-detail-container">
+          <div class="context-detail-container" jslog=${VisualLogging.section('audio-context-details')}>
             <div class="context-detail-header">
               <div class="context-detail-title">
                 ${selectedContext.contextType === 'realtime' ? i18n.i18n.lockedString('AudioContext')
@@ -136,20 +140,24 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               </div>
               <div class="context-detail-subtitle">${selectedContext.contextId}</div>
             </div>
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.state)}</div>
               <div class="context-detail-row-value">${selectedContext.contextState}</div>
             </div>
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.sampleRate)}</div>
               <div class="context-detail-row-value">${selectedContext.sampleRate} Hz</div>
             </div>
             ${selectedContext.contextType === 'realtime' ? html`
-              <div class="context-detail-row">
+              <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
                 <div class="context-detail-row-entry">${i18nString(UIStrings.callbackBufferSize)}</div>
                 <div class="context-detail-row-value">${selectedContext.callbackBufferSize} frames</div>
               </div>` : ''}
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
+              <div class="context-detail-row-entry">${i18nString(UIStrings.renderQuantumSize)}</div>
+              <div class="context-detail-row-value">${selectedContext.renderQuantumSize} frames</div>
+            </div>
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.maxOutputChannels)}</div>
               <div class="context-detail-row-value">${selectedContext.maxOutputChannelCount} ch</div>
             </div>
@@ -157,7 +165,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </div>`}
       <div class="web-audio-summary-container">
         ${contextRealtimeData ?
-            html`<div class="context-summary-container">
+            html`<div class="context-summary-container" jslog=${VisualLogging.section('audio-context-summary')}>
             <span>${i18nString(UIStrings.currentTime)}: ${contextRealtimeData.currentTime.toFixed(3)} s</span>
             <span>\u2758</span>
             <span>${i18nString(UIStrings.callbackInterval)}: μ = ${

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -189,7 +189,7 @@ function renderCredentialsDataGrid(
         </thead>
         <tbody>
         ${credentials.length ? repeat(credentials, c => c.credentialId, credential => html`
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('credential')}>
             <td>${credential.credentialId}</td>
             <td>${credential.isResidentCredential}</td>
             <td>${credential.rpId}</td>
@@ -492,19 +492,19 @@ function renderAuthenticatorFields(
   // clang-format off
   return html`
     <div class="authenticator-fields">
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.uuid)}</label>
         <div class="authenticator-field-value">${authenticatorId}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.protocol)}</label>
         <div class="authenticator-field-value">${options.protocol}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.transport)}</label>
         <div class="authenticator-field-value">${options.transport}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsResidentKeys)}
         </label>
@@ -512,7 +512,7 @@ function renderAuthenticatorFields(
           ${options.hasResidentKey ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsLargeBlob)}
         </label>
@@ -520,7 +520,7 @@ function renderAuthenticatorFields(
           ${options.hasLargeBlob ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsUserVerification)}
         </label>
@@ -528,7 +528,7 @@ function renderAuthenticatorFields(
           ${options.hasUserVerification ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsHmacSecret)}
         </label>
@@ -536,7 +536,7 @@ function renderAuthenticatorFields(
           ${options.hasHmacSecret ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsHmacSecretMc)}
         </label>

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: 86cee6df69e0463a839c0cc8435c9d4c259434d3
+Revision: e35c9c6a769bb2bfc92bbbd8270b7ef6b330b939
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

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

@@ -33,6 +33,6 @@ cd -
 
 # Copy the source files to our repo, and build it.
 cp -r tmp-repo/src package/src
-../../../node_modules/.bin/tsc --ignoreConfig -d -t esnext -m esnext --moduleResolution bundler --strict --outDir package/dist/modules/ package/src/**/*.ts package/src/index.ts
+vpython3 ../../../third_party/typescript/typescript.py --ignoreConfig --skipLibCheck -d -t esnext -m esnext --moduleResolution bundler --strict --outDir package/dist/modules/ package/src/**/*.ts package/src/index.ts
 
 echo "Rebuild complete."

package/front_end/ui/components/diff_view/DiffView.ts

@@ -201,7 +201,8 @@ class DiffRenderer {
     return html`
       <style>${diffViewStyles}</style>
       <style>${CodeHighlighter.codeHighlighterStyles}</style>
-      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
+      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)} jslog=${
+        VisualLogging.section('diff-view')}>
         ${rows.map(row => this.#renderRow(row))}
       </div>`;
   }

package/front_end/ui/components/report_view/ReportView.docs.ts

@@ -6,7 +6,7 @@ import './report_view.js';
 
 import * as Lit from '../../lit/lit.js';
 
-import type {ReportData} from './ReportView.js';
+import type * as ReportView from './report_view.js';
 
 const {html} = Lit;
 
@@ -19,7 +19,7 @@ export function render(container: HTMLElement) {
   // clang-format off
   Lit.render(
       html`
-        <devtools-report .data=${{reportTitle: 'Optional Title'} as ReportData}>
+        <devtools-report .data=${{reportTitle: 'Optional Title'} as ReportView.ReportView.ReportData}>
           <devtools-report-section-header>Section 1</devtools-report-section-header>
           <devtools-report-key>Basic plain text field</devtools-report-key>
           <devtools-report-value>And this is the value</devtools-report-value>

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

@@ -237,19 +237,18 @@ async function evaluateExpression(
     expression: string,
     group: string,
     ): Promise<SDK.RemoteObject.RemoteObject|null> {
-  const result = await context.evaluate(
-      {
-        expression,
-        objectGroup: group,
-        includeCommandLineAPI: true,
-        silent: true,
-        returnByValue: false,
-        generatePreview: false,
-        throwOnSideEffect: true,
-        timeout: 500,
-        replMode: true,
-      },
-      false, false);
+  const result = await context.evaluateWithSelectedFrameFallback({
+    expression,
+    objectGroup: group,
+    includeCommandLineAPI: true,
+    silent: true,
+    returnByValue: false,
+    generatePreview: false,
+    throwOnSideEffect: true,
+    timeout: 500,
+    replMode: true,
+  },
+                                                                 false, false);
   if ('error' in result || result.exceptionDetails || !result.object) {
     return null;
   }

package/front_end/ui/legacy/GlassPane.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
-import type {Size} from '../../models/geometry/geometry.js';
+import type * as Geometry from '../../models/geometry/geometry.js';
 
 import glassPaneStyles from './glassPane.css.js';
 import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
@@ -16,7 +16,7 @@ export class GlassPane {
   private readonly onMouseDownBound: (event: Event) => void;
   private onClickOutsideCallback: ((arg0: Event) => void)|null = null;
   #onHideCallback: (() => void)|null = null;
-  private maxSize: Size|null = null;
+  private maxSize: Geometry.Size|null = null;
   private positionX: number|null = null;
   private positionY: number|null = null;
   private anchorBox: AnchorBox|null = null;
@@ -60,9 +60,13 @@ export class GlassPane {
 
   setPointerEventsBehavior(pointerEventsBehavior: PointerEventsBehavior): void {
     this.element.classList.toggle(
-        'no-pointer-events', pointerEventsBehavior !== PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
+        'no-pointer-events',
+        pointerEventsBehavior !== PointerEventsBehavior.BLOCKED_BY_GLASS_PANE,
+    );
     this.contentElement.classList.toggle(
-        'no-pointer-events', pointerEventsBehavior === PointerEventsBehavior.PIERCE_CONTENTS);
+        'no-pointer-events',
+        pointerEventsBehavior === PointerEventsBehavior.PIERCE_CONTENTS,
+    );
   }
 
   setOutsideClickCallback(callback: ((arg0: Event) => void)|null): void {
@@ -73,7 +77,7 @@ export class GlassPane {
     this.#onHideCallback = cb;
   }
 
-  setMaxContentSize(size: Size|null): void {
+  setMaxContentSize(size: Geometry.Size|null): void {
     this.maxSize = size;
     this.positionContent();
   }
@@ -133,8 +137,16 @@ export class GlassPane {
 
   #onDetach(): void {
     panes.delete(this);
-    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
-    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener(
+        'mousedown',
+        this.onMouseDownBound,
+        true,
+    );
+    this.element.ownerDocument.body.removeEventListener(
+        'pointerdown',
+        this.onMouseDownBound,
+        true,
+    );
   }
 
   private onMouseDown(event: Event): void {
@@ -157,7 +169,7 @@ export class GlassPane {
     const scrollbarSize = measuredScrollbarWidth(this.element.ownerDocument);
     const offsetSize = 10;
 
-    const container = (containers.get((this.element.ownerDocument))) as HTMLElement;
+    const container = containers.get(this.element.ownerDocument) as HTMLElement;
     if (this.sizeBehavior === SizeBehavior.MEASURE_CONTENT) {
       this.contentElement.positionAt(0, 0);
       this.contentElement.style.width = '';
@@ -189,7 +201,7 @@ export class GlassPane {
 
     if (this.anchorBox) {
       const anchorBox = this.anchorBox.relativeToElement(container);
-      let behavior: AnchorBehavior.PREFER_BOTTOM|AnchorBehavior.PREFER_TOP|AnchorBehavior.PREFER_RIGHT|
+      let behavior:|AnchorBehavior.PREFER_BOTTOM|AnchorBehavior.PREFER_TOP|AnchorBehavior.PREFER_RIGHT|
           AnchorBehavior.PREFER_LEFT|AnchorBehavior = this.anchorBehavior;
 
       if (behavior === AnchorBehavior.PREFER_TOP || behavior === AnchorBehavior.PREFER_BOTTOM) {
@@ -226,14 +238,20 @@ export class GlassPane {
           }
         }
 
-        const naturalPositionX = Math.min(anchorBox.x, containerWidth - width - gutterSize);
+        const naturalPositionX = Math.min(
+            anchorBox.x,
+            containerWidth - width - gutterSize,
+        );
         positionX = Math.max(gutterSize, naturalPositionX);
         if (this.#ignoreLeftMargin && gutterSize > naturalPositionX) {
           positionX = 0;
         }
 
         if (!enoughHeight) {
-          positionX = Math.min(positionX + offsetSize, containerWidth - width - gutterSize);
+          positionX = Math.min(
+              positionX + offsetSize,
+              containerWidth - width - gutterSize,
+          );
         } else if (positionX - offsetSize >= gutterSize) {
           positionX -= offsetSize;
         }
@@ -272,9 +290,15 @@ export class GlassPane {
           }
         }
 
-        positionY = Math.max(gutterSize, Math.min(anchorBox.y, containerHeight - height - gutterSize));
+        positionY = Math.max(
+            gutterSize,
+            Math.min(anchorBox.y, containerHeight - height - gutterSize),
+        );
         if (!enoughWidth) {
-          positionY = Math.min(positionY + offsetSize, containerHeight - height - gutterSize);
+          positionY = Math.min(
+              positionY + offsetSize,
+              containerHeight - height - gutterSize,
+          );
         } else if (positionY - offsetSize >= gutterSize) {
           positionY -= offsetSize;
         }
@@ -303,7 +327,7 @@ export class GlassPane {
   }
 
   static setContainer(element: Element): void {
-    containers.set((element.ownerDocument), element);
+    containers.set(element.ownerDocument, element);
     GlassPane.containerMoved(element);
   }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -1876,20 +1876,26 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   }
 
   #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper):
-      {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList}|null {
+      {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList, attributes?: NamedNodeMap}|null {
     const subtreeRoot = element.parentElement;
     if (!(subtreeRoot instanceof HTMLUListElement)) {
       return null;
     }
     if (subtreeRoot.role === 'tree') {
-      return {treeElement: this.#treeOutline.rootElement(), expanded: false, classes: subtreeRoot.classList};
+      return {
+        treeElement: this.#treeOutline.rootElement(),
+        expanded: false,
+        classes: subtreeRoot.classList,
+        attributes: subtreeRoot.attributes,
+      };
     }
     if (subtreeRoot.role !== 'group' || !subtreeRoot.parentElement) {
       return null;
     }
     const treeElement = TreeViewTreeElement.get(subtreeRoot.parentElement);
     const expanded = treeElement ? treeElement.expanded : hasBooleanAttribute(subtreeRoot.parentElement, 'open');
-    return treeElement ? {expanded, treeElement, classes: subtreeRoot.classList} : null;
+    return treeElement ? {expanded, treeElement, classes: subtreeRoot.classList, attributes: subtreeRoot.attributes} :
+                         null;
   }
 
   protected override updateNode(node: Node, attributeName: string|null): void {
@@ -1929,6 +1935,11 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       }
       if (parent.treeElement.childCount() === 0) {
         parent.treeElement.childrenListElement.classList.add(...parent.classes.values());
+        for (const attr of parent.attributes || []) {
+          if (attr.name !== 'role' && attr.name !== 'class') {
+            parent.treeElement.childrenListElement.setAttribute(attr.name, attr.value);
+          }
+        }
       }
       let nextElement: TreeElement|null = null;
       for (let e: Element|null = node.nextElementSibling; e; e = e.nextElementSibling) {