chrome-devtools-frontend 1.0.1625079 → 1.0.1626437

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

@@ -190,7 +190,7 @@ UI.Toolbar.registerToolbarItem({
   order: 1,
 });
 
-Common.AppProvider.registerAppProvider({
+UI.AppProvider.registerAppProvider({
   async loadAppProvider() {
     const Emulation = await loadEmulationModule();
     return Emulation.AdvancedApp.AdvancedAppProvider.instance();

package/front_end/panels/network/NetworkPanel.ts

@@ -660,7 +660,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     UI.Context.Context.instance().setFlavor(NetworkPanel, this);
 
     // Record the network tool load time after the panel has loaded.
-    Host.userMetrics.panelLoaded('network', 'DevTools.Launch.Network');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('network', 'DevTools.Launch.Network');
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(

package/front_end/panels/profiler/HeapProfilerPanel.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 * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -80,7 +79,7 @@ export class HeapProfilerPanel extends ProfilesPanel implements UI.ContextMenu.P
     super.wasShown();
     UI.Context.Context.instance().setFlavor(HeapProfilerPanel, this);
     // Record the memory tool load time.
-    Host.userMetrics.panelLoaded('heap-profiler', 'DevTools.Launch.HeapProfiler');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('heap-profiler', 'DevTools.Launch.HeapProfiler');
   }
 
   override willHide(): void {

package/front_end/panels/screencast/ScreencastApp.ts

@@ -20,7 +20,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/screencast/ScreencastApp.ts', U
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let appInstance: ScreencastApp;
 
-export class ScreencastApp implements Common.App.App,
+export class ScreencastApp implements UI.App.App,
                                       SDK.TargetManager.SDKModelObserver<SDK.ScreenCaptureModel.ScreenCaptureModel> {
   private readonly enabledSetting: Common.Settings.Setting<boolean>;
   toggleButton: UI.Toolbar.ToolbarToggle;
@@ -127,7 +127,7 @@ export class ToolbarButtonProvider implements UI.Toolbar.Provider {
 
 let screencastAppProviderInstance: ScreencastAppProvider;
 
-export class ScreencastAppProvider implements Common.AppProvider.AppProvider {
+export class ScreencastAppProvider implements UI.AppProvider.AppProvider {
   static instance(opts: {forceNew: boolean} = {forceNew: false}): ScreencastAppProvider {
     const {forceNew} = opts;
     if (!screencastAppProviderInstance || forceNew) {
@@ -137,7 +137,7 @@ export class ScreencastAppProvider implements Common.AppProvider.AppProvider {
     return screencastAppProviderInstance;
   }
 
-  createApp(): Common.App.App {
+  createApp(): UI.App.App {
     return ScreencastApp.instance();
   }
 }

package/front_end/panels/screencast/screencast-meta.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 * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Screencast from './screencast.js';
@@ -25,7 +24,7 @@ UI.Toolbar.registerToolbarItem({
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,
 });
 
-Common.AppProvider.registerAppProvider({
+UI.AppProvider.registerAppProvider({
   async loadAppProvider() {
     const Screencast = await loadScreencastModule();
     return Screencast.ScreencastApp.ScreencastAppProvider.instance();

package/front_end/panels/settings/SettingsScreen.ts

@@ -206,11 +206,11 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
   private reportSettingsPanelShown(tabId: string): void {
     if (tabId === i18nString(UIStrings.shortcuts)) {
-      Host.userMetrics.settingsPanelShown('shortcuts');
+      UI.UIUserMetrics.UIUserMetrics.instance().settingsPanelShown('shortcuts');
       return;
     }
 
-    Host.userMetrics.settingsPanelShown(tabId);
+    UI.UIUserMetrics.UIUserMetrics.instance().settingsPanelShown(tabId);
   }
 
   private onEscapeKeyPressed(event: KeyboardEvent): void {

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
@@ -32,9 +31,8 @@ export class AiCodeCompletionPlugin extends Plugin {
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
     super(uiSourceCode);
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale)) {
-      throw new Error('AI code completion feature is not enabled.');
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionAvailable()) {
+      throw new Error('AI code completion feature is not available.');
     }
 
     this.aiCodeCompletionConfig = {

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -104,6 +104,10 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return scopeChainSidebarPaneInstance;
   }
 
+  treeOutlineForTest(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline {
+    return this.treeOutline;
+  }
+
   flavorChanged(callFrame: StackTrace.StackTrace.DebuggableFrameFlavor|null): void {
     this.#scopeChainModel?.dispose();
     this.#scopeChainModel = null;
@@ -210,6 +214,6 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return section;
   }
 
-  private sidebarPaneUpdatedForTest(): void {
+  sidebarPaneUpdatedForTest(): void {
   }
 }

package/front_end/panels/sources/SourcesNavigator.ts

@@ -117,7 +117,7 @@ export class NetworkNavigatorView extends NavigatorView {
         SDK.TargetManager.Events.INSPECTED_URL_CHANGED, this.inspectedURLChanged, this);
 
     // Record the sources tool load time after the file navigator has loaded.
-    Host.userMetrics.panelLoaded('sources', 'DevTools.Launch.Sources');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('sources', 'DevTools.Launch.Sources');
     SDK.TargetManager.TargetManager.instance().addScopeChangeListener(this.onScopeChange.bind(this));
   }
 

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -6,7 +6,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -327,8 +326,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
       AiWarningInfobarPlugin,
     ];
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale)) {
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionAvailable()) {
       sourceFramePluginsList.push(AiCodeCompletionPlugin);
     }
     return sourceFramePluginsList;

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -49,6 +49,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 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 {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -95,25 +96,98 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/WatchExpressionsSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let watchExpressionsSidebarPaneInstance: WatchExpressionsSidebarPane;
+const {repeat} = Directives;
+interface ViewInput {
+  onCopyWatchExpression(watchExpression: WatchExpression): void;
+  onDeleteAll(): unknown;
+  onAddExpression(): unknown;
+  watchExpressions: WatchExpression[];
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const onContextMenu = (watchExpression: WatchExpression|undefined, event: Event): void => {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const isEditing = input.watchExpressions.some(e => e.isEditing());
+
+    if (!isEditing) {
+      contextMenu.debugSection().appendItem(
+          i18nString(UIStrings.addWatchExpression), input.onAddExpression, {jslogContext: 'add-watch-expression'});
+    }
+
+    if (input.watchExpressions.length > 1) {
+      contextMenu.debugSection().appendItem(
+          i18nString(UIStrings.deleteAllWatchExpressions), input.onDeleteAll,
+          {jslogContext: 'delete-all-watch-expressions'});
+    }
+
+    if (watchExpression) {
+      if (!watchExpression.isEditing()) {
+        contextMenu.editSection().appendItem(
+            i18nString(UIStrings.deleteWatchExpression), watchExpression.updateExpression.bind(watchExpression, null),
+            {jslogContext: 'delete-watch-expression'});
+      }
+
+      if (!watchExpression.isEditing() && watchExpression.result &&
+          (watchExpression.result.type === 'number' || watchExpression.result.type === 'string')) {
+        contextMenu.clipboardSection().appendItem(
+            i18nString(UIStrings.copyValue), () => input.onCopyWatchExpression(watchExpression),
+            {jslogContext: 'copy-watch-expression-value'});
+      }
 
-export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
-    UI.ActionRegistration.ActionDelegate, UI.Toolbar.ItemsProvider,
-    UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame> {
+      contextMenu.appendApplicableItems(watchExpression.result);
+    }
+    void contextMenu.show();
+    event.consume();
+  };
+
+  for (const watchExpression of input.watchExpressions) {
+    watchExpression.treeElement().listItemElement.oncontextmenu = onContextMenu.bind(undefined, watchExpression);
+    watchExpression.treeElement().childrenListElement.oncontextmenu = onContextMenu.bind(undefined, watchExpression);
+  }
+
+  render(
+      // clang-format off
+      html`
+      ${input.watchExpressions.length === 0
+        ? html`<div class=gray-info-message tabindex=-1 >
+        ${i18nString(UIStrings.noWatchExpressions)}
+        </div>`
+        : html`<devtools-tree hide-overflow show-selection-on-keyboard-focus .template=${html`
+        <ul role=tree class="source-code object-properties-section">
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+          <style>${watchExpressionsSidebarPaneStyles}</style>
+          ${repeat(input.watchExpressions,
+               e => html`<devtools-tree-wrapper .treeElement=${e.treeElement()}></devtools-tree-wrapper>`)}
+        </ul>`}>
+      </devtools-tree>`
+      }`,
+      // clang-format on
+      target, {
+        container: {
+          classes: ['watch-expressions'],
+          attributes: {
+            jslog: `${VisualLogging.section('sources.watch')}`,
+            'aria-label': i18nString(UIStrings.addWatchExpression)
+          },
+          listeners: {contextmenu: onContextMenu.bind(undefined, undefined)}
+        }
+      });
+};
+
+export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.ActionRegistration.ActionDelegate,
+                                                                           UI.Toolbar.ItemsProvider {
   #watchExpressions: WatchExpression[];
-  private emptyElement!: HTMLElement;
   #watchExpressionsSetting: Common.Settings.Setting<string[]>;
   private readonly addButton: UI.Toolbar.ToolbarButton;
   private readonly refreshButton: UI.Toolbar.ToolbarButton;
-  private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
-  private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
+  #view: View;
+  #expandControllers = new Map<string, ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker>();
   constructor() {
     super({useShadowDom: true});
     this.registerRequiredCSS(watchExpressionsSidebarPaneStyles, objectValueStyles);
 
-    // 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 =
         Common.Settings.Settings.instance().createLocalSetting<string[]>('watch-expressions', []);
@@ -127,24 +201,15 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     this.refreshButton = new UI.Toolbar.ToolbarButton(
         i18nString(UIStrings.refreshWatchExpressions), 'refresh', undefined, 'refresh-watch-expressions');
     this.refreshButton.setSize(Buttons.Button.Size.SMALL);
-    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.requestUpdate, this);
-
-    this.contentElement.classList.add('watch-expressions');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.watch')}`);
-    this.contentElement.addEventListener('contextmenu', this.contextMenu.bind(this), false);
-    this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline();
-    this.treeOutline.registerRequiredCSS(watchExpressionsSidebarPaneStyles);
-    this.treeOutline.setHideOverflow(true);
-
-    this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
-    this.expandController =
-        new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline);
+    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#refreshExpressions, this);
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.requestUpdate, this);
     UI.Context.Context.instance().addFlavorChangeListener(
-        StackTrace.StackTrace.DebuggableFrameFlavor, this.requestUpdate, this);
+        SDK.RuntimeModel.ExecutionContext, this.#refreshExpressions, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        StackTrace.StackTrace.DebuggableFrameFlavor, this.#refreshExpressions, this);
     this.linkifier = new Components.Linkifier.Linkifier();
-    this.requestUpdate();
+    this.#view = DEFAULT_VIEW;
+    this.#refreshExpressions();
   }
 
   static instance(): WatchExpressionsSidebarPane {
@@ -162,15 +227,6 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     return [this.addButton, this.refreshButton];
   }
 
-  override focus(): void {
-    if (this.hasFocus()) {
-      return;
-    }
-    if (this.#watchExpressions.length > 0) {
-      this.treeOutline.forceSelect();
-    }
-  }
-
   private saveExpressions(): void {
     const toSave = [];
     for (let i = 0; i < this.#watchExpressions.length; i++) {
@@ -185,102 +241,99 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
 
   private async addButtonClicked(): Promise<void> {
     await UI.ViewManager.ViewManager.instance().showView('sources.watch');
-    this.emptyElement.classList.add('hidden');
-    this.createWatchExpression(null).startEditing();
+    const watchExpression = this.createWatchExpression(null);
+    this.requestUpdate();
+    // This synchronization is only needed because startEditing is imperative and
+    // requires the tree element to be in the DOM. This can be removed once the
+    // prompt is migrated to Lit.
+    await this.updateComplete;
+    watchExpression.startEditing();
   }
 
-  override async performUpdate(): Promise<void> {
+  #refreshExpressions(): void {
     this.linkifier.reset();
-    this.contentElement.removeChildren();
-    this.treeOutline.removeChildren();
+    for (const expression of this.#watchExpressions) {
+      expression.removeEventListener(Events.EXPRESSION_UPDATED, this.watchExpressionUpdated, this);
+    }
     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();
-    if (watchExpressionStrings.length) {
-      this.emptyElement.classList.add('hidden');
-    }
+
+    const oldExpandControllers = this.#expandControllers;
+    this.#expandControllers = new Map();
+
     for (let i = 0; i < watchExpressionStrings.length; ++i) {
       const expression = watchExpressionStrings[i];
       if (!expression) {
         continue;
       }
 
+      const controller = oldExpandControllers.get(expression);
+      if (controller) {
+        this.#expandControllers.set(expression, controller);
+      }
+
       this.createWatchExpression(expression);
     }
+    this.requestUpdate();
+  }
+
+  override async performUpdate(): Promise<void> {
     await Promise.all(this.#watchExpressions.map(we => we.updateComplete));
+    this.#view(
+        {
+          watchExpressions: this.watchExpressions,
+          onDeleteAll: this.deleteAllButtonClicked.bind(this),
+          onAddExpression: this.addButtonClicked.bind(this),
+          onCopyWatchExpression: watchExpression => {
+            if (watchExpression.result?.description) {
+              Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(watchExpression.result.description);
+            }
+          }
+        },
+        {}, this.contentElement);
+  }
+
+  #getExpandController(expression: string|null): ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker {
+    if (expression === null) {
+      return new ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker();
+    }
+    let expandController = this.#expandControllers.get(expression);
+    if (!expandController) {
+      expandController = new ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker();
+      this.#expandControllers.set(expression, expandController);
+    }
+    return expandController;
   }
 
   private createWatchExpression(expression: string|null): WatchExpression {
-    this.contentElement.appendChild(this.treeOutline.element);
-    const watchExpression = new WatchExpression(expression, this.expandController, this.linkifier);
-    UI.ARIAUtils.setLabel(this.contentElement, i18nString(UIStrings.addWatchExpression));
+    const expandController = this.#getExpandController(expression);
+    const watchExpression = new WatchExpression(expression, expandController, this.linkifier);
     watchExpression.addEventListener(Events.EXPRESSION_UPDATED, this.watchExpressionUpdated, this);
-    this.treeOutline.appendChild(watchExpression.treeElement());
     this.#watchExpressions.push(watchExpression);
     return watchExpression;
   }
 
   private watchExpressionUpdated({data: watchExpression}: Common.EventTarget.EventTargetEvent<WatchExpression>): void {
-    if (!watchExpression.expression()) {
+    const expression = watchExpression.expression();
+    if (!expression) {
       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.treeOutline.element.remove();
-      }
     }
 
     this.saveExpressions();
-  }
-
-  private contextMenu(event: MouseEvent): void {
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    this.populateContextMenu(contextMenu, event);
-    void contextMenu.show();
-  }
-
-  private populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: MouseEvent): void {
-    let isEditing = false;
-    for (const watchExpression of this.#watchExpressions) {
-      isEditing = isEditing || watchExpression.isEditing();
-    }
-
-    if (!isEditing) {
-      contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.addWatchExpression), this.addButtonClicked.bind(this),
-          {jslogContext: 'add-watch-expression'});
-    }
-
-    if (this.#watchExpressions.length > 1) {
-      contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.deleteAllWatchExpressions), this.deleteAllButtonClicked.bind(this),
-          {jslogContext: 'delete-all-watch-expressions'});
-    }
-
-    const treeElement = this.treeOutline.treeElementFromEvent(event);
-    if (!treeElement) {
-      return;
-    }
-    const currentWatchExpression =
-        this.#watchExpressions.find(watchExpression => treeElement.hasAncestorOrSelf(watchExpression.treeElement()));
-    if (currentWatchExpression) {
-      currentWatchExpression.populateContextMenu(contextMenu, event);
-    }
+    this.requestUpdate();
   }
 
   private deleteAllButtonClicked(): void {
     this.#watchExpressions = [];
     this.saveExpressions();
-    this.requestUpdate();
+    this.#refreshExpressions();
   }
 
   private async focusAndAddExpressionToWatch(expression: string): Promise<void> {
     await UI.ViewManager.ViewManager.instance().showView('sources.watch');
     this.createWatchExpression(expression);
     this.saveExpressions();
-    this.requestUpdate();
+    this.#refreshExpressions();
   }
 
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
@@ -326,32 +379,35 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private nameElement!: Element;
   private valueElement!: Element;
   #expression: string|null;
-  private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
+  readonly #expandController: ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker;
   private element: HTMLDivElement;
   private editing: boolean;
   private linkifier: Components.Linkifier.Linkifier;
   private textPrompt?: ObjectPropertyPrompt;
-  private result?: SDK.RemoteObject.RemoteObject|null;
+  #result?: SDK.RemoteObject.RemoteObject|null;
   private preventClickTimeout?: number;
   #updateComplete: Promise<void> = Promise.resolve();
   constructor(
-      expression: string|null,
-      expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController,
+      expression: string|null, expandController: ObjectUI.ObjectPropertiesSection.ObjectTreeExpansionTracker,
       linkifier: Components.Linkifier.Linkifier) {
     super();
 
     this.#expression = expression;
-    this.expandController = expandController;
+    this.#expandController = expandController;
     this.element = document.createElement('div');
     this.element.classList.add('watch-expression');
     this.element.classList.add('monospace');
     this.editing = false;
     this.linkifier = linkifier;
 
-    this.createWatchExpression();
+    void this.createWatchExpression();
     this.update();
   }
 
+  get result(): SDK.RemoteObject.RemoteObject|null {
+    return this.#result ?? null;
+  }
+
   get updateComplete(): Promise<void> {
     return this.#updateComplete;
   }
@@ -392,16 +448,17 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   update(): void {
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext && this.#expression) {
-      this.#updateComplete = this.#evaluateExpression(currentExecutionContext, this.#expression).then(result => {
-        if ('object' in result) {
-          this.createWatchExpression(result.object, result.exceptionDetails);
-        } else {
-          this.createWatchExpression();
-        }
-      });
+      this.#updateComplete = this.#evaluateExpression(currentExecutionContext, this.#expression)
+                                 .then(async result => {
+                                   if ('object' in result) {
+                                     await this.createWatchExpression(result.object, result.exceptionDetails);
+                                   } else {
+                                     await this.createWatchExpression();
+                                   }
+                                 })
+                                 .catch(() => {});
     } else {
-      this.createWatchExpression();
-      this.#updateComplete = Promise.resolve();
+      this.#updateComplete = this.createWatchExpression();
     }
   }
 
@@ -454,8 +511,8 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   updateExpression(newExpression: string|null): void {
-    if (this.#expression) {
-      this.expandController.stopWatchSectionsWithId(this.#expression);
+    if (this.#expression !== newExpression && newExpression) {
+      this.#expandController.clear();
     }
     this.#expression = newExpression;
     this.update();
@@ -468,13 +525,13 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.updateExpression(null);
   }
 
-  createWatchExpression(result?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails):
-      void {
-    this.result = result || null;
+  async createWatchExpression(
+      result?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<void> {
+    this.#result = result || null;
 
     this.element.removeChildren();
     const oldTreeElement = this.#treeElement;
-    this.createWatchExpressionTreeElement(result, exceptionDetails);
+    await this.#createWatchExpressionTreeElement(result, exceptionDetails);
     if (oldTreeElement?.parent) {
       const root = oldTreeElement.parent;
       const index = root.indexOfChild(oldTreeElement);
@@ -530,20 +587,20 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return headerElement;
   }
 
-  private createWatchExpressionTreeElement(
-      expressionValue?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails): void {
+  async #createWatchExpressionTreeElement(
+      expressionValue?: SDK.RemoteObject.RemoteObject,
+      exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<void> {
     const headerElement = this.createWatchExpressionHeader(expressionValue, exceptionDetails);
 
     if (!exceptionDetails && expressionValue && expressionValue.hasChildren && !expressionValue.customPreview()) {
       headerElement.classList.add('watch-expression-object-header');
-      this.#treeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
-          new ObjectUI.ObjectPropertiesSection.ObjectTree(expressionValue, {
-            readOnly: true,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }),
-          this.linkifier);
-      this.expandController.watchSection(
-          (this.#expression as string), (this.#treeElement as ObjectUI.ObjectPropertiesSection.RootElement));
+      const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(expressionValue, {
+        readOnly: true,
+        propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        expansionTracker: this.#expandController,
+      });
+      await this.#expandController.apply(objectTree);
+      this.#treeElement = new ObjectUI.ObjectPropertiesSection.RootElement(objectTree, this.linkifier);
       this.#treeElement.toggleOnClick = false;
       this.#treeElement.listItemElement.addEventListener('click', this.onSectionClick.bind(this), false);
       this.#treeElement.listItemElement.addEventListener('dblclick', this.dblClickOnWatchExpression.bind(this));
@@ -593,29 +650,6 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): void {
-    if (!this.isEditing()) {
-      contextMenu.editSection().appendItem(
-          i18nString(UIStrings.deleteWatchExpression), this.updateExpression.bind(this, null),
-          {jslogContext: 'delete-watch-expression'});
-    }
-
-    if (!this.isEditing() && this.result && (this.result.type === 'number' || this.result.type === 'string')) {
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyValue), this.copyValueButtonClicked.bind(this),
-          {jslogContext: 'copy-watch-expression-value'});
-    }
-
-    const target = UI.UIUtils.deepElementFromEvent(event);
-    if (target && this.valueElement.isSelfOrAncestor(target) && this.result) {
-      contextMenu.appendApplicableItems(this.result);
-    }
-  }
-
-  private copyValueButtonClicked(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.valueElement.textContent);
-  }
-
   private static readonly watchObjectGroupId = 'watch-group';
 }
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -776,7 +776,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     super.wasShown();
     UI.Context.Context.instance().setFlavor(TimelinePanel, this);
     // Record the performance tool load time.
-    Host.userMetrics.panelLoaded('timeline', 'DevTools.Launch.Timeline');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('timeline', 'DevTools.Launch.Timeline');
 
     const cruxManager = CrUXManager.CrUXManager.instance();
     cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
@@ -2575,7 +2575,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         const measure = performance.measure('TraceLoad', {start, end});
         const duration = Trace.Types.Timing.Milli(measure.duration);
         this.element.dispatchEvent(new TraceLoadEvent(duration));
-        Host.userMetrics.performanceTraceLoad(measure);
+        UI.UIUserMetrics.UIUserMetrics.instance().performanceTraceLoad(measure);
       }, 0);
     });
   }