chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/panels/profiler/HeapProfileView.ts

@@ -6,13 +6,14 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.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 type * as Protocol from '../../generated/protocol.js';
 import * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {Events, HeapTimelineOverview, type IdsRangeChangedEvent, type Samples} from './HeapTimelineOverview.js';
 import type {Formatter, ProfileDataGridNode} from './ProfileDataGrid.js';
@@ -103,6 +104,10 @@ const UIStrings = {
    * @description Text for web URLs
    */
   url: 'URL',
+  /**
+   * @description Label for a checkbox in the memory panel to enable sampling heap profiler timeline.
+   */
+  samplingHeapProfilerTimeline: 'Sampling heap profiler timeline',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapProfileView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -144,7 +149,7 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
 
     this.timelineOverview = new HeapTimelineOverview();
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE)) {
+    if (this.profileType.hasTemporaryView()) {
       this.timelineOverview.addEventListener(Events.IDS_RANGE_CHANGED, this.onIdsRangeChanged.bind(this));
       this.timelineOverview.show(this.element, this.element.firstChild);
       this.timelineOverview.start();
@@ -337,6 +342,9 @@ let samplingHeapProfileTypeInstance: SamplingHeapProfileType;
 export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
   updateTimer: number;
   updateIntervalMs: number;
+  readonly #recordTimelineSetting: Common.Settings.Setting<boolean>;
+  customContentInternal: UI.UIUtils.CheckboxLabel|null = null;
+
   constructor() {
     super(SamplingHeapProfileType.TypeId, i18nString(UIStrings.allocationSampling));
     if (!samplingHeapProfileTypeInstance) {
@@ -345,6 +353,8 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
 
     this.updateTimer = 0;
     this.updateIntervalMs = 200;
+    this.#recordTimelineSetting =
+        Common.Settings.Settings.instance().createSetting('record-sampling-heap-profiler-timeline', false);
   }
 
   static get instance(): SamplingHeapProfileType {
@@ -362,7 +372,22 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
   }
 
   override hasTemporaryView(): boolean {
-    return Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE);
+    return this.#recordTimelineSetting.get();
+  }
+
+  override customContent(): Element|null {
+    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.samplingHeapProfilerTimeline), this.#recordTimelineSetting);
+    this.customContentInternal = checkboxSetting;
+    checkboxSetting.setAttribute(
+        'jslog', `${VisualLogging.toggle('record-sampling-heap-profiler-timeline').track({click: true})}`);
+    return checkboxSetting;
+  }
+
+  override setCustomContentEnabled(enable: boolean): void {
+    if (this.customContentInternal) {
+      this.customContentInternal.disabled = !enable;
+    }
   }
 
   override startSampling(): void {
@@ -372,7 +397,7 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
     }
 
     void heapProfilerModel.startSampling();
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE)) {
+    if (this.#recordTimelineSetting.get()) {
       this.updateTimer = window.setTimeout(() => {
         void this.updateStats();
       }, this.updateIntervalMs);

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -145,8 +145,8 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
   selectedProfileType?: ProfileType;
   static registry: ProfileTypeRegistry = {
     heapSnapshotProfileType: new HeapSnapshotProfileType(),
-    samplingHeapProfileType: new SamplingHeapProfileType(),
     trackingHeapSnapshotProfileType: new TrackingHeapSnapshotProfileType(),
+    samplingHeapProfileType: new SamplingHeapProfileType(),
     detachedElementProfileType: new DetachedElementsProfileType(),
   };
 

package/front_end/panels/protocol_monitor/JSONEditor.css

@@ -65,14 +65,21 @@ ul {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
 }
 
 .editor-wrapper {
   padding-left: 1em;
   overflow-x: hidden;
   flex-grow: 1;
-  padding-bottom: 50px;
   padding-top: 0.5em;
+  min-height: 1lh;
+}
+
+.editor-wrapper::after {
+  content: "";
+  display: block;
+  height: 50px;
 }
 
 .clear-button,

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -137,6 +137,7 @@ interface ViewInput {
   onParameterValueBlur: (event: Event) => void;
   displayTargetSelector?: boolean;
   displayCommandInput?: boolean;
+  displayToolbar?: boolean;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -188,6 +189,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #view: View;
   displayTargetSelector = true;
   displayCommandInput = true;
+  displayToolbar = true;
 
   constructor(element: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -252,8 +254,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  set commandToDisplay(command: string) {
-    this.displayCommand(command, {});
+  set commandToDisplay(data: {command: string, parameters?: Record<string, unknown>}) {
+    this.displayCommand(data.command, data.parameters ?? {});
   }
 
   get targetId(): string|undefined {
@@ -992,6 +994,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       },
       displayTargetSelector: this.displayTargetSelector,
       displayCommandInput: this.displayCommandInput,
+      displayToolbar: this.displayToolbar,
     };
     const viewOutput = {};
     this.#view(viewInput, viewOutput, this.contentElement);
@@ -1275,6 +1278,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           ${renderParameters(input, input.parameters)}
         ` : nothing}
       </div>
+      ${input.displayToolbar !== false ? html`
       <devtools-toolbar class="protocol-monitor-sidebar-toolbar">
         <devtools-button title=${i18nString(UIStrings.copyCommand)}
                         .iconName=${'copy'}
@@ -1288,6 +1292,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                         .variant=${Buttons.Button.Variant.PRIMARY_TOOLBAR}
                         @click=${input.onCommandSend}></devtools-button>
       </devtools-toolbar>
+      ` : nothing}
     </div>`, target);
   // clang-format on
 };

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -18,7 +18,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {Events as JSONEditorEvents, JSONEditor, type Parameter} from './JSONEditor.js';
+import {JSONEditor, type Parameter} from './JSONEditor.js';
 import protocolMonitorStyles from './protocolMonitor.css.js';
 
 const {styleMap} = Directives;
@@ -183,6 +183,7 @@ export interface ViewInput {
   onCommandSubmitted: (input: string) => void;
   onTargetChange: (targetId: string) => void;
   onToggleSidebar: () => void;
+  onEditorSubmit: (command: string, parameters: Record<string, unknown>, targetId?: string) => void;
   targets: SDK.Target.Target[];
   selectedTargetId: string;
 }
@@ -350,6 +351,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </div>
           <devtools-widget slot="sidebar"
               ${widget(JSONEditor, { metadataByCommand, typesByName, enumsByName})}
+              @submiteditor=${(e: CustomEvent) => input.onEditorSubmit(e.detail.command, e.detail.parameters, e.detail.targetId)}
               ${widgetRef(JSONEditor, e => {output.editorWidget = e;})}>
           </devtools-widget>
         </devtools-split-view>`,
@@ -385,9 +387,6 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel implements SDK.TargetMan
 
     this.#selectedTargetId = 'main';
     this.performUpdate();
-    this.#editorWidget.addEventListener(JSONEditorEvents.SUBMIT_EDITOR, event => {
-      this.onCommandSend(event.data.command, event.data.parameters, event.data.targetId);
-    });
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, () => {
           this.requestUpdate();
@@ -471,6 +470,9 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel implements SDK.TargetMan
         this.#sidebarVisible = !this.#sidebarVisible;
         this.requestUpdate();
       },
+      onEditorSubmit: (command: string, parameters: Record<string, unknown>, targetId?: string) => {
+        this.onCommandSend(command, parameters, targetId);
+      },
       targets: SDK.TargetManager.TargetManager.instance().targets(),
       selectedTargetId: this.#selectedTargetId,
     };

package/front_end/panels/recorder/components/ControlButton.ts

@@ -16,7 +16,7 @@ export interface ViewInput {
   onClick: (event: Event) => void;
 }
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: unknown, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: unknown, target: HTMLElement|DocumentFragment): void => {
   const {label, shape, disabled, onClick} = input;
   const handleClickEvent = (event: Event): void => {
     if (disabled) {
@@ -36,11 +36,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: unknown, target: HTMLEle
       <div class="icon ${shape}"></div>
       <div class="label">${label}</div>
     </button>
-  `, target);
+  `, target, {container: {attributes: {classes: 'flex-none'}}});
   // clang-format on
 };
 
-export class ControlButton extends UI.Widget.Widget {
+export class ControlButton extends UI.Widget.Widget<ShadowRoot> {
   #label = '';
   #shape = 'square';
   #disabled = false;
@@ -49,7 +49,7 @@ export class ControlButton extends UI.Widget.Widget {
   #view: typeof DEFAULT_VIEW;
 
   constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
-    super(element, {useShadowDom: true, classes: ['flex-none']});
+    super(element, {useShadowDom: 'pure'});
     this.#view = view || DEFAULT_VIEW;
   }
 

package/front_end/panels/recorder/components/StepView.ts

@@ -492,12 +492,12 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
       </devtools-widget>
     </div>
   `,
-    target,
+    target, {container: {classes: ['step-view-widget']}}
   );
   // clang-format on
 };
 
-export class StepView extends UI.Widget.Widget {
+export class StepView extends UI.Widget.Widget<ShadowRoot> {
   #observer: IntersectionObserver = new IntersectionObserver(result => {
     this.#viewInput.isVisible = result[0].isIntersecting;
   });
@@ -532,7 +532,7 @@ export class StepView extends UI.Widget.Widget {
   #view: typeof DEFAULT_VIEW;
 
   constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
-    super(element, {useShadowDom: true, classes: ['step-view-widget']});
+    super(element, {useShadowDom: 'pure'});
     this.#view = view || DEFAULT_VIEW;
   }
 
@@ -551,7 +551,7 @@ export class StepView extends UI.Widget.Widget {
     this.#viewInput.state = state;
     this.performUpdate();
     if (this.#viewInput.state !== prevState && this.#viewInput.state === 'current' && !this.#viewInput.isVisible) {
-      this.contentElement.scrollIntoView();
+      this.element.scrollIntoView();
     }
   }
 
@@ -650,13 +650,13 @@ export class StepView extends UI.Widget.Widget {
 
   override wasShown(): void {
     super.wasShown();
-    this.#observer.observe(this.contentElement);
+    this.#observer.observe(this.element);
     this.requestUpdate();
   }
 
   override willHide(): void {
     super.willHide();
-    this.#observer.unobserve(this.contentElement);
+    this.#observer.unobserve(this.element);
   }
 
   #toggleShowDetails(): void {

package/front_end/panels/search/SearchView.ts

@@ -134,7 +134,7 @@ export interface SearchViewOutput {
   collapseAllResults: () => void;
 }
 
-export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement|DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
@@ -262,11 +262,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             </devtools-progress>` : ''}
         </div>
         <div class="search-message">${searchResultsMessage}</div>
-      </div>`, target);
+      </div>`, target, {container: {attributes: {jslog: `${VisualLogging.panel('search').track({resize: true})}`}}});
   // clang-format on
 };
 
-export class SearchView extends UI.Widget.VBox {
+export class SearchView extends UI.Widget.VBox<ShadowRoot> {
   readonly #view: View;
   #focusSearchInput = (): void => {};
   #showAllMatches = (): void => {};
@@ -295,10 +295,7 @@ export class SearchView extends UI.Widget.VBox {
   #searchResults: SearchResult[] = [];
 
   constructor(settingKey: string, view = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
     this.#view = view;
     this.setMinimumSize(0, 40);
 

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -153,43 +153,39 @@ function domBreakpointSubtext(data: DOMBreakpointData): Lit.LitTemplate {
   `;
 }
 
-const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: HTMLElement): void => {
-  render(
-      html`
+const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: DocumentFragment): void => {
+  // clang-format off
+  render(html`
     <style>${debuggerPausedMessageStyles}</style>
-    <div aria-live="polite" ?hidden=${!input}>${
-          input ?
-              html`
+    <div aria-live="polite" ?hidden=${!input}>${input ? html`
       <div class="paused-status ${input.errorLike ? 'error-reason' : ''}">
         <span>
           <div class="status-main">
             <devtools-icon name=${input.errorLike ? 'cross-circle-filled' : 'info'} class="medium"></devtools-icon>
             ${input.mainText}
           </div>
-          ${
-                  input.subText || input.domBreakpointData ?
-                      html`
-            <div class="status-sub monospace" title=${ifDefined(input.title ?? input.subText)}>${
-                          input.domBreakpointData ? domBreakpointSubtext(input.domBreakpointData) : input.subText}</div>
-          ` :
-                      nothing}
+          ${input.subText || input.domBreakpointData ? html`
+            <div class="status-sub monospace" title=${ifDefined(input.title ?? input.subText)}>
+              ${input.domBreakpointData ? domBreakpointSubtext(input.domBreakpointData) : input.subText}
+            </div>` : nothing}
         </span>
-      </div>` :
-              nothing}
-    </div>
-  `,
-      target);
+      </div>` : nothing}
+    </div>`, target, {
+        container: {
+          attributes: {jslog: `${VisualLogging.dialog('debugger-paused')}`},
+          classes: ['paused-message', 'flex-none']
+        }
+      });
+  // clang-format on
 };
 
 type View = typeof DEFAULT_VIEW;
 
-export class DebuggerPausedMessage extends UI.Widget.Widget {
+export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
   #viewInput: ViewInput|null = null;
   constructor(element?: HTMLElement, private readonly view: View = DEFAULT_VIEW) {
     super(element, {
-      jslog: `${VisualLogging.dialog('debugger-paused')}`,
-      classes: ['paused-message', 'flex-none'],
-      useShadowDom: true,
+      useShadowDom: 'pure',
     });
   }
 

package/front_end/panels/sources/SourcesView.ts

@@ -246,7 +246,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   visibleView(): UI.Widget.Widget|null {
-    return this.editorContainer.visibleView;
+    return this.editorContainer.visibleView as UI.Widget.Widget | null;
   }
 
   currentSourceFrame(): UISourceCodeFrame|null {

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -166,11 +166,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   get visibleView(): UI.Widget.Widget|null {
-    return this.tabbedPane.visibleView;
+    return this.tabbedPane.visibleView as UI.Widget.Widget | null;
   }
 
   fileViews(): UI.Widget.Widget[] {
-    return this.tabbedPane.tabViews();
+    return this.tabbedPane.tabViews() as UI.Widget.Widget[];
   }
 
   leftToolbar(): UI.Toolbar.Toolbar {

package/front_end/panels/sources/ThreadsSidebarPane.ts

@@ -52,7 +52,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
       </button>
     `)}
     </div>
-  `, target);
+  `, target, {container: {attributes: {jslog: `${VisualLogging.section('sources.threads')}`}}});
 };
 // clang-format on
 
@@ -65,9 +65,7 @@ export class ThreadsSidebarPane extends UI.Widget.VBox implements
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {
-      jslog: `${VisualLogging.section('sources.threads')}`,
-    });
+    super(element);
     this.#view = view;
 
     const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -99,9 +99,9 @@ let watchExpressionsSidebarPaneInstance: WatchExpressionsSidebarPane;
 export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     UI.ActionRegistration.ActionDelegate, UI.Toolbar.ItemsProvider,
     UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame> {
-  private watchExpressions: WatchExpression[];
+  #watchExpressions: WatchExpression[];
   private emptyElement!: HTMLElement;
-  private readonly watchExpressionsSetting: Common.Settings.Setting<string[]>;
+  #watchExpressionsSetting: Common.Settings.Setting<string[]>;
   private readonly addButton: UI.Toolbar.ToolbarButton;
   private readonly refreshButton: UI.Toolbar.ToolbarButton;
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
@@ -114,8 +114,8 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     // TODO(szuend): Replace with a Set once the web test
     // panels/sources/debugger-ui/watch-expressions-preserve-expansion.js is either converted
     // to an e2e test or no longer accesses this variable directly.
-    this.watchExpressions = [];
-    this.watchExpressionsSetting =
+    this.#watchExpressions = [];
+    this.#watchExpressionsSetting =
         Common.Settings.Settings.instance().createLocalSetting<string[]>('watch-expressions', []);
 
     this.addButton = new UI.Toolbar.ToolbarButton(
@@ -154,6 +154,10 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     return watchExpressionsSidebarPaneInstance;
   }
 
+  get watchExpressions(): WatchExpression[] {
+    return this.#watchExpressions;
+  }
+
   toolbarItems(): UI.Toolbar.ToolbarItem[] {
     return [this.addButton, this.refreshButton];
   }
@@ -162,21 +166,21 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     if (this.hasFocus()) {
       return;
     }
-    if (this.watchExpressions.length > 0) {
+    if (this.#watchExpressions.length > 0) {
       this.treeOutline.forceSelect();
     }
   }
 
   private saveExpressions(): void {
     const toSave = [];
-    for (let i = 0; i < this.watchExpressions.length; i++) {
-      const expression = this.watchExpressions[i].expression();
+    for (let i = 0; i < this.#watchExpressions.length; i++) {
+      const expression = this.#watchExpressions[i].expression();
       if (expression) {
         toSave.push(expression);
       }
     }
 
-    this.watchExpressionsSetting.set(toSave);
+    this.#watchExpressionsSetting.set(toSave);
   }
 
   private async addButtonClicked(): Promise<void> {
@@ -189,11 +193,11 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     this.linkifier.reset();
     this.contentElement.removeChildren();
     this.treeOutline.removeChildren();
-    this.watchExpressions = [];
+    this.#watchExpressions = [];
     this.emptyElement = this.contentElement.createChild('div', 'gray-info-message');
     this.emptyElement.textContent = i18nString(UIStrings.noWatchExpressions);
     this.emptyElement.tabIndex = -1;
-    const watchExpressionStrings = this.watchExpressionsSetting.get();
+    const watchExpressionStrings = this.#watchExpressionsSetting.get();
     if (watchExpressionStrings.length) {
       this.emptyElement.classList.add('hidden');
     }
@@ -213,16 +217,16 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     UI.ARIAUtils.setLabel(this.contentElement, i18nString(UIStrings.addWatchExpression));
     watchExpression.addEventListener(Events.EXPRESSION_UPDATED, this.watchExpressionUpdated, this);
     this.treeOutline.appendChild(watchExpression.treeElement());
-    this.watchExpressions.push(watchExpression);
+    this.#watchExpressions.push(watchExpression);
     return watchExpression;
   }
 
   private watchExpressionUpdated({data: watchExpression}: Common.EventTarget.EventTargetEvent<WatchExpression>): void {
     if (!watchExpression.expression()) {
-      Platform.ArrayUtilities.removeElement(this.watchExpressions, watchExpression);
+      Platform.ArrayUtilities.removeElement(this.#watchExpressions, watchExpression);
       this.treeOutline.removeChild(watchExpression.treeElement());
-      this.emptyElement.classList.toggle('hidden', Boolean(this.watchExpressions.length));
-      if (this.watchExpressions.length === 0) {
+      this.emptyElement.classList.toggle('hidden', Boolean(this.#watchExpressions.length));
+      if (this.#watchExpressions.length === 0) {
         this.treeOutline.element.remove();
       }
     }
@@ -238,7 +242,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
 
   private populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: MouseEvent): void {
     let isEditing = false;
-    for (const watchExpression of this.watchExpressions) {
+    for (const watchExpression of this.#watchExpressions) {
       isEditing = isEditing || watchExpression.isEditing();
     }
 
@@ -248,7 +252,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
           {jslogContext: 'add-watch-expression'});
     }
 
-    if (this.watchExpressions.length > 1) {
+    if (this.#watchExpressions.length > 1) {
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.deleteAllWatchExpressions), this.deleteAllButtonClicked.bind(this),
           {jslogContext: 'delete-all-watch-expressions'});
@@ -259,14 +263,14 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
       return;
     }
     const currentWatchExpression =
-        this.watchExpressions.find(watchExpression => treeElement.hasAncestorOrSelf(watchExpression.treeElement()));
+        this.#watchExpressions.find(watchExpression => treeElement.hasAncestorOrSelf(watchExpression.treeElement()));
     if (currentWatchExpression) {
       currentWatchExpression.populateContextMenu(contextMenu, event);
     }
   }
 
   private deleteAllButtonClicked(): void {
-    this.watchExpressions = [];
+    this.#watchExpressions = [];
     this.saveExpressions();
     this.requestUpdate();
   }
@@ -456,8 +460,8 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.updateExpression(null);
   }
 
-  private createWatchExpression(
-      result?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails): void {
+  createWatchExpression(result?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails):
+      void {
     this.result = result || null;
 
     this.element.removeChildren();

package/front_end/panels/timeline/StatusDialog.ts

@@ -62,7 +62,7 @@ export interface ViewInput {
 
 export type ViewOutput = Record<string, never>;
 
-export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: ViewOutput, target: DocumentFragment) => void;
 
 // clang-format off
 export const DEFAULT_VIEW: View = (input, output, target) => {
@@ -118,14 +118,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         ` : nothing}
       </div>
     </div>
-  `, target);
+  `, target, {container: {attributes: {jslog: `${VisualLogging.dialog('timeline-status').track({resize: true})}`}}});
+  // clang-format on
 };
-// clang-format on
 
 /**
  * This is the dialog shown whilst a trace is being recorded/imported.
  */
-export class StatusDialog extends UI.Widget.VBox {
+export class StatusDialog extends UI.Widget.VBox<ShadowRoot> {
   readonly #view: View;
   #statusText = '';
   readonly #showTimer: boolean;
@@ -153,10 +153,7 @@ export class StatusDialog extends UI.Widget.VBox {
         buttonText?: string,
       },
       onButtonClickCallback: () => (Promise<void>| void), view: View = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.dialog('timeline-status').track({resize: true})}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
 
     this.#view = view;
     this.#showTimer = Boolean(options.showTimer);

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -41,6 +41,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
   #onRowHovered?: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void;
   #onBottomUpButtonClicked?: (node: Trace.Extras.TraceTree.Node|null) => void;
   #onRowClicked?: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void;
+  #isInAIWidget = false;
 
   constructor(element?: HTMLElement) {
     super(element);
@@ -262,6 +263,15 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     return super.maxRows;
   }
 
+  get isInAIWidget(): boolean {
+    return this.#isInAIWidget;
+  }
+
+  set isInAIWidget(x: boolean) {
+    this.#isInAIWidget = x;
+    this.element.classList.toggle('is-in-ai-widget', x);
+  }
+
   override set maxRows(maxRows: number) {
     super.maxRows = maxRows;
     this.element.style.setProperty('--max-rows', String(maxRows));

package/front_end/panels/timeline/TimelineLoader.ts

@@ -147,9 +147,8 @@ export class TimelineLoader {
       return;
     }
 
-    if ('metadata' in trace) {
-      this.#metadata = trace.metadata;
-
+    if (!Array.isArray(trace) && 'traceEvents' in trace) {
+      this.#metadata = trace.metadata ?? {};
       // Older traces set these fields even when throttling is not active, while newer traces do not.
       // Clear them out on load to simplify usage.
       if (this.#metadata.cpuThrottling === 1) {
@@ -241,4 +240,4 @@ export class TimelineLoader {
 /**
  * Used when we parse the input, but do not yet know if it is a raw CPU Profile or a Trace
  **/
-type ParsedJSONFile = Trace.Types.File.Contents|Protocol.Profiler.Profile;
+export type ParsedJSONFile = Trace.Types.File.Contents|Protocol.Profiler.Profile;