chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -6,16 +6,17 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 /**
  * @file
- *                                                   ┌────────────┐
- *                                                   │CDP Backend │
- *                                                   └────────────┘
+ *                                                 ┌───────────────┐
+ *                                                 │ CDPConnection │
+ *                                                 └───────────────┘
  *                                                        │ ▲
- *                                                        │ │ parallelConnection
+ *                                                        │ │
  *                          ┌┐                            ▼ │                     ┌┐
  *                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
  *                          ││                     │          ▲                   ││
@@ -28,7 +29,10 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
  *                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
  *                          ││                   │       ▲                              ││
  *                          ││                   ▼       │                              ││
- *  LighthouseWorkerService ││          Either ConnectionProxy or LegacyPort            ││
+ *  LighthouseWorkerService ││               WorkerConnectionTransport                  ││
+ *                          ││                           │ ▲                            ││
+ *                          ││                           ▼ │                            ││
+ *                          ││                     CDPConnection                        ││
  *                          ││                           │ ▲                            ││
  *                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
  *                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
@@ -37,10 +41,10 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
  *                          └┘     └───────────────────────────────────────────────┘    └┘
  *
  * - All messages traversing the worker boundary are action-wrapped.
- * - All messages over the parallelConnection speak pure CDP.
- * - All messages within ConnectionProxy/LegacyPort speak pure CDP.
- * - The foundational CDP connection is `parallelConnection`.
- * - All connections within the worker are not actual ParallelConnection's.
+ * - All messages over the CDPConnection speak pure CDP.
+ * - Within the worker we also use a 'CDPConnection' but with a custom
+ *   transport called WorkerConnectionTransport.
+ * - All messages within WorkerConnectionTransport/LegacyPort speak pure CDP.
  */
 
 let lastId = 1;
@@ -57,14 +61,15 @@ export interface LighthouseRun {
 /**
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
-export class ProtocolService {
-  private mainSessionId?: string;
+export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnectionObserver {
+  private mainSessionId?: Protocol.Target.SessionID;
   private rootTargetId?: string;
-  private parallelConnection?: ProtocolClient.ConnectionTransport.ConnectionTransport;
+  private rootTarget?: SDK.Target.Target;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
   private removeDialogHandler?: () => void;
   private configForTesting?: object;
+  private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
@@ -90,12 +95,15 @@ export class ProtocolService {
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    const {connection, sessionId} = await rootChildTargetManager.createParallelConnection(message => {
-      if (typeof message === 'string') {
-        message = JSON.parse(message);
-      }
-      this.dispatchProtocolMessage(message);
-    });
+    const connection = rootTarget.router()?.connection;
+    if (!connection) {
+      throw new Error('Expected root target to have a session router');
+    }
+
+    const rootTargetId = await rootChildTargetManager.getParentTargetId();
+    const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
+    this.connection = connection;
+    this.connection.observe(this);
 
     // Lighthouse implements its own dialog handler like this, however its lifecycle ends when
     // the internal Lighthouse session is disposed.
@@ -114,8 +122,8 @@ export class ProtocolService {
     this.removeDialogHandler = () =>
         resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.JavaScriptDialogOpening, dialogHandler);
 
-    this.parallelConnection = connection;
-    this.rootTargetId = await rootChildTargetManager.getParentTargetId();
+    this.rootTargetId = rootTargetId;
+    this.rootTarget = rootTarget;
     this.mainSessionId = sessionId;
   }
 
@@ -166,20 +174,22 @@ export class ProtocolService {
 
   async detach(): Promise<void> {
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
-    const oldParallelConnection = this.parallelConnection;
+    const oldRootTarget = this.rootTarget;
 
     // When detaching, make sure that we remove the old promises, before we
     // perform any async cleanups. That way, if there is a message coming from
     // lighthouse while we are in the process of cleaning up, we shouldn't deliver
     // them to the backend.
     this.lighthouseWorkerPromise = undefined;
-    this.parallelConnection = undefined;
+    this.rootTarget = undefined;
+    this.connection?.unobserve(this);
+    this.connection = undefined;
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
     }
-    if (oldParallelConnection) {
-      await oldParallelConnection.disconnect();
+    if (oldRootTarget && this.mainSessionId) {
+      await oldRootTarget.targetAgent().invoke_detachFromTarget({sessionId: this.mainSessionId});
     }
     await SDK.TargetManager.TargetManager.instance().resumeAllTargets();
     this.removeDialogHandler?.();
@@ -189,7 +199,11 @@ export class ProtocolService {
     this.lighthouseMessageUpdateCallback = callback;
   }
 
-  private dispatchProtocolMessage(message: string|object): void {
+  onEvent<T extends ProtocolClient.CDPConnection.Event>(event: ProtocolClient.CDPConnection.CDPEvent<T>): void {
+    this.dispatchProtocolMessage(event);
+  }
+
+  private dispatchProtocolMessage(message: ProtocolClient.CDPConnection.CDPReceivableMessage): void {
     // A message without a sessionId is the main session of the main target (call it "Main session").
     // A parallel connection and session was made that connects to the same main target (call it "Lighthouse session").
     // Messages from the "Lighthouse session" have a sessionId.
@@ -199,15 +213,15 @@ export class ProtocolService {
     //   * the message has a sessionId (is not for the "Main session")
     //   * the message does not have a sessionId (is for the "Main session"), but only for the Target domain
     //     (to kickstart autoAttach in LH).
-    const protocolMessage = message as {
-      sessionId?: string,
-      method?: string,
-    };
-    if (protocolMessage.sessionId || (protocolMessage.method?.startsWith('Target'))) {
+    if (message.sessionId || ('method' in message && message.method?.startsWith('Target'))) {
       void this.send('dispatchProtocolMessage', {message});
     }
   }
 
+  onDisconnect(): void {
+    // Do nothing.
+  }
+
   private initWorker(): Promise<Worker> {
     this.lighthouseWorkerPromise = new Promise<Worker>(resolve => {
       const workerUrl = new URL('../../entrypoints/lighthouse_worker/lighthouse_worker.js', import.meta.url);
@@ -255,9 +269,19 @@ export class ProtocolService {
   }
 
   private sendProtocolMessage(message: string): void {
-    if (this.parallelConnection) {
-      this.parallelConnection.sendRawMessage(message);
-    }
+    const {id, method, params, sessionId} = JSON.parse(message);
+    // CDPConnection manages it's own message IDs and it's important, otherwise we'd clash
+    // with the rest of the DevTools traffic.
+    // Instead, we ignore the ID coming from the worker when sending the command, but
+    // patch it back in when sending the response back to the worker.
+    void this.connection?.send(method, params, sessionId).then(response => {
+      this.dispatchProtocolMessage({
+        id,
+        sessionId,
+        result: 'result' in response ? response.result : undefined,
+        error: 'error' in response ? response.error : undefined,
+      });
+    });
   }
 
   private async send(action: string, args: Record<string, string|string[]|object> = {}): Promise<void> {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -318,9 +318,9 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   appendApplicableItems(
       _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement): void {
-    if (target.property.value?.isLinearMemoryInspectable()) {
+    if (target.property.object?.isLinearMemoryInspectable()) {
       const expression = target.path();
-      const object = target.property.value;
+      const object = target.property.object;
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -204,7 +204,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @endiannesschanged=${input.onEndiannessChanged}
         @jumptopointeraddress=${input.onJumpToAddress}
         >
-      </devtools-linear-memory-inspector-interpreter/>
+      </devtools-linear-memory-inspector-interpreter>
     </div>`}
     `,
          target);

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -163,13 +163,20 @@ export class LinearMemoryNavigator extends HTMLElement {
       'address-input': true,
       invalid: !this.#valid,
     };
-    return html`
-      <input class=${Lit.Directives.classMap(classMap)} data-input="true" .value=${this.#address}
-        jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
+    return html`<input
+      class=${Lit.Directives.classMap(classMap)}
+      data-input="true"
+      .value=${this.#address}
+      jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
       change: true,
     })}
-        title=${ifDefined(this.#valid ? i18nString(UIStrings.enterAddress) : this.#error)} @change=${
-        this.#onAddressChange.bind(this, Mode.SUBMITTED)} @input=${this.#onAddressChange.bind(this, Mode.EDIT)}/>`;
+      title=${
+        ifDefined(
+            this.#valid ? i18nString(UIStrings.enterAddress) : this.#error,
+            )}
+      @change=${this.#onAddressChange.bind(this, Mode.SUBMITTED)}
+      @input=${this.#onAddressChange.bind(this, Mode.EDIT)}
+    />`;
   }
 
   #onAddressChange(mode: Mode, event: Event): void {

package/front_end/panels/network/RequestInitiatorView.ts

@@ -56,7 +56,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager ? networkManager.target() : undefined;
     return new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
+        undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
   }
 
   private createTree(): UI.TreeOutline.TreeOutlineInShadow {

package/front_end/panels/network/RequestPayloadView.ts

@@ -435,7 +435,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private appendJSONPayloadParsed(rootListItem: Category, parsedObject: any, sourceText: string): void {
     const object = (SDK.RemoteObject.RemoteObject.fromLocalObject(parsedObject) as SDK.RemoteObject.LocalJSONObject);
-    const section = new ObjectUI.ObjectPropertiesSection.RootElement(object);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object));
     section.title = (object.description);
     section.expand();
     // `editable` is not a valid property for `ObjectUI.ObjectPropertiesSection.RootElement`. Only for

package/front_end/panels/network/RequestTimingView.ts

@@ -608,7 +608,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     const origRequest = Logs.NetworkLog.NetworkLog.instance().originalRequestForURL(this.#request.url());
     if (origRequest) {
       const requestObject = SDK.RemoteObject.RemoteObject.fromLocalObject(origRequest);
-      const requestTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(requestObject);
+      const requestTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
+          new ObjectUI.ObjectPropertiesSection.ObjectTree(requestObject));
       requestTreeElement.title = i18nString(UIStrings.originalRequest);
       detailsView.appendChild(requestTreeElement);
     }
@@ -616,7 +617,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     const response = Logs.NetworkLog.NetworkLog.instance().originalResponseForURL(this.#request.url());
     if (response) {
       const responseObject = SDK.RemoteObject.RemoteObject.fromLocalObject(response);
-      const responseTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(responseObject);
+      const responseTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
+          new ObjectUI.ObjectPropertiesSection.ObjectTree(responseObject));
       responseTreeElement.title = i18nString(UIStrings.responseReceived);
       detailsView.appendChild(responseTreeElement);
     }

package/front_end/panels/network/components/EditableSpan.ts

@@ -75,7 +75,7 @@ export class EditableSpan extends HTMLElement {
         tabindex="0"
         .innerText=${this.#value}
         jslog=${VisualLogging.value('header-editor').track({change: true, keydown: 'Enter|Escape'})}
-      </span>`, this.#shadow, {host: this});
+        ></span>`, this.#shadow, {host: this});
     // clang-format on
   }
 

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -14,7 +14,6 @@ import * as Persistence from '../../../models/persistence/persistence.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -401,25 +400,33 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       }
     };
 
-    const addContextMenuListener = (el: Element): void => {
-      if (isShortened) {
-        el.addEventListener('contextmenu', onContextMenuOpen);
-      }
-    };
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="row raw-headers-row" on-render=${ComponentHelpers.Directives.nodeRenderedCallback(addContextMenuListener)}>
-        <div class="raw-headers">${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}</div>
-        ${isShortened ? html`
-          <devtools-button
-            .size=${Buttons.Button.Size.SMALL}
-            .variant=${Buttons.Button.Variant.OUTLINED}
-            @click=${showMore}
-            jslog=${VisualLogging.action('raw-headers-show-more').track({click: true})}
-          >${i18nString(UIStrings.showMore)}</devtools-button>
-        ` : Lit.nothing}
+      <div
+        class="row raw-headers-row"
+        @contextmenu=${(event: Event) => {
+          if (isShortened) {
+            onContextMenuOpen(event);
+          }
+        }}
+      >
+        <div class="raw-headers">
+          ${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}
+        </div>
+        ${isShortened
+          ? html`
+              <devtools-button
+                .size=${Buttons.Button.Size.SMALL}
+                .variant=${Buttons.Button.Variant.OUTLINED}
+                @click=${showMore}
+                jslog=${VisualLogging.action('raw-headers-show-more').track({
+                  click: true,
+                })}
+                >${i18nString(UIStrings.showMore)}</devtools-button
+              >
+            `
+          : Lit.nothing}
       </div>
     `;
     // clang-format on

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -1072,7 +1072,7 @@ function renderParameters(
                         ${hasNoKeys ?
                           html`<devtools-suggestion-input
                             data-paramId=${parameterId}
-                            isKey=${true}
+                            .isKey=${true}
                             .isCorrectInput=${live(parameter.isCorrectType)}
                             .options=${hasOptions ? input.computeDropdownValues(parameter) : []}
                             .autocomplete=${false}
@@ -1258,7 +1258,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class=toolbar-spacer></div>
         <devtools-button title=${Host.Platform.isMac() ? i18nString(UIStrings.sendCommandCmdEnter) : i18nString(UIStrings.sendCommandCtrlEnter)}
                         .iconName=${'send'}
-                        jslogContext=${'protocol-monitor.send-command'}
+                        jslogContext="protocol-monitor.send-command"
                         .variant=${Buttons.Button.Variant.PRIMARY_TOOLBAR}
                         @click=${input.onCommandSend}></devtools-button>
       </devtools-toolbar>

package/front_end/panels/recorder/RecorderController.ts

@@ -16,7 +16,6 @@ import * as Emulation from '../../panels/emulation/emulation.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Dialogs from '../../ui/components/dialogs/dialogs.js';
-import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import type * as Menus from '../../ui/components/menus/menus.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -33,7 +32,7 @@ import recorderControllerStyles from './recorderController.css.js';
 import * as Events from './RecorderEvents.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of Constructable Stylesheets.
-const {html, Decorators, LitElement} = Lit;
+const {html, Decorators, Directives: {ref}, LitElement} = Lit;
 const {customElement, state} = Decorators;
 
 const UIStrings = {
@@ -1354,11 +1353,11 @@ export class RecorderController extends LitElement {
             <devtools-button
               id='origin'
               @click=${this.#onExportRecording}
-              on-render=${ComponentHelpers.Directives.nodeRenderedCallback(
-                node => {
-                  this.#exportMenuButton = node as Buttons.Button.Button;
-                },
-              )}
+              ${ref(el => {
+                if (el instanceof HTMLElement) {
+                  this.#exportMenuButton = el as Buttons.Button.Button;
+                }
+              })}
               .data=${
                 {
                   variant: Buttons.Button.Variant.TOOLBAR,

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

@@ -456,7 +456,7 @@ function viewFunction(input: ViewInput, _output: ViewOutput, target: HTMLElement
     } data-section-index=${
       input.sectionIndex
     } class=${Lit.Directives.classMap(stepClasses)}>
-      <svg slot="icon" width="24" height="24" height="100%" class="icon">
+      <svg slot="icon" width="24" height="24" class="icon">
         <circle class="circle-icon"/>
         <g class="error-icon">
           <path d="M1.5 1.5L6.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

package/front_end/panels/recorder/models/RecordingPlayer.ts

@@ -104,23 +104,24 @@ export class RecordingPlayer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     const rootChildTargetManager = rootTarget.model(SDK.ChildTargetManager.ChildTargetManager);
-
     if (!rootChildTargetManager) {
       throw new Error('Could not find the child target manager class for the root target');
     }
 
-    // Pass an empty message handler because it will be overwritten by puppeteer anyways.
-    const result = await rootChildTargetManager.createParallelConnection(() => {});
-    const connection = result.connection as SDK.Connections.ParallelConnectionInterface;
+    const connection = rootTarget.router()?.connection;
+    if (!connection) {
+      throw new Error('Expected root target to have a router');
+    }
 
     const mainTargetId = await childTargetManager.getParentTargetId();
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
-
+    const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
     const {page, browser, puppeteerConnection} =
         await PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnectionViaTab(
             {
               connection,
-              rootTargetId: rootTargetId as string,
+              targetId: rootTargetId,
+              sessionId,
               isPageTargetCallback: isPageTarget,
             },
         );

package/front_end/panels/settings/components/SyncSection.ts

@@ -107,7 +107,7 @@ function renderDataDisclaimer(): HTMLElement {
       aria-details="gdp-profile-tooltip"
       aria-describedby="gdp-profile-tooltip"
       >${i18nString(UIStrings.relevantData)}</span>
-    <devtools-tooltip id="gdp-profile-tooltip" variant=${'rich'}>
+    <devtools-tooltip id="gdp-profile-tooltip" variant="rich">
       <div class="tooltip-content" tabindex="0">${i18nString(UIStrings.tooltipDisclaimerText)}</div>
     </devtools-tooltip>`;
 

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -662,9 +662,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <devtools-icon name="bin" class="medium"
+          <devtools-icon name="bin"
             title=${i18nString(UIStrings.brandUserAgentDelete)}
-            class="delete-icon"
+            class="medium delete-icon"
             tabindex="0"
             role="button"
             @click=${handleDeleteClick}
@@ -757,9 +757,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <devtools-icon name="bin" class="medium"
+          <devtools-icon name="bin" 
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
-            class="delete-icon"
+            class="medium delete-icon"
             tabindex="0"
             role="button"
             @click=${handleDeleteClick}

package/front_end/panels/sources/BreakpointsView.ts

@@ -578,8 +578,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                   ?data-first-group=${groupIndex === 0}
                   ?data-last-group=${groupIndex === input.breakpointGroups.length - 1}
                   role=group
-                  aria-label='${group.name}'
-                  aria-description='${group.url}'
+                  aria-label=${group.name}
+                  aria-description=${group.url}
                   ?open=${live(group.expanded)}
                   @toggle=${input.groupToggleHandler.bind(undefined, group)}>
               <summary @contextmenu=${input.groupContextMenuHandler.bind(undefined, group)}
@@ -596,7 +596,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                           tabindex=-1
                           jslog=${VisualLogging.toggle('breakpoint-group').track({change: true,})}></input>
                   </span>
-                  <span class='group-header-title' title='${group.url}'>
+                  <span class='group-header-title' title=${group.url}>
                     ${group.name}
                     <span class='group-header-differentiator'>
                       ${input.urlToDifferentiatingPath.get(group.url)}

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -197,9 +197,10 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     titleElement.createChild('div', 'scope-chain-sidebar-pane-section-subtitle').textContent = subtitle;
     titleElement.createChild('div', 'scope-chain-sidebar-pane-section-title').textContent = title;
 
-    const section = new ObjectUI.ObjectPropertiesSection.RootElement(
-        scope.object(), this.linkifier, emptyPlaceholder, ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.ALL,
-        scope.extraProperties());
+    const root = new ObjectUI.ObjectPropertiesSection.ObjectTree(
+        scope.object(), ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.ALL);
+    root.addExtraProperties(...scope.extraProperties());
+    const section = new ObjectUI.ObjectPropertiesSection.RootElement(root, this.linkifier, emptyPlaceholder);
     section.title = titleElement;
     section.listItemElement.classList.add('scope-chain-sidebar-pane-section');
     section.listItemElement.setAttribute('aria-label', title);

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -290,7 +290,7 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
       _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame): void {
     if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
-      if (!target.property.synthetic) {
+      if (!target.property.property.synthetic) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.addPropertyPathToWatch), () => this.focusAndAddExpressionToWatch(target.path()),
             {jslogContext: 'add-property-path-to-watch'});
@@ -514,7 +514,8 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (!exceptionDetails && expressionValue && expressionValue.hasChildren && !expressionValue.customPreview()) {
       headerElement.classList.add('watch-expression-object-header');
-      this.#treeElement = new ObjectUI.ObjectPropertiesSection.RootElement(expressionValue, this.linkifier);
+      this.#treeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
+          new ObjectUI.ObjectPropertiesSection.ObjectTree(expressionValue), this.linkifier);
       this.expandController.watchSection(
           (this.#expression as string), (this.#treeElement as ObjectUI.ObjectPropertiesSection.RootElement));
       this.#treeElement.toggleOnClick = false;

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -456,12 +456,12 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#overlays.addEventListener(Overlays.Overlays.EventReferenceClick.eventName, event => {
       const eventRef = (event as Overlays.Overlays.EventReferenceClick);
       const fromTraceEvent = selectionFromEvent(eventRef.event);
-      this.openSelectionDetailsView(fromTraceEvent);
+      void this.openSelectionDetailsView(fromTraceEvent);
     });
 
     // This is for the detail view of layout shift.
     this.element.addEventListener(TimelineInsights.EventRef.EventReferenceClick.eventName, event => {
-      this.setSelectionAndReveal(selectionFromEvent(event.event));
+      void this.setSelectionAndReveal(selectionFromEvent(event.event));
     });
 
     this.element.addEventListener('keydown', this.#keydownHandler.bind(this));
@@ -1469,7 +1469,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
-  setSelectionAndReveal(selection: TimelineSelection|null): void {
+  async setSelectionAndReveal(selection: TimelineSelection|null): Promise<void> {
     if (selection && this.#currentSelection && selectionsEqual(selection, this.#currentSelection)) {
       return;
     }
@@ -1507,8 +1507,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.networkFlameChart.setSelectedEntry(networkIndex);
 
     if (this.detailsView) {
-      // TODO(crbug.com/1459265):  Change to await after migration work.
-      void this.detailsView.setSelection(selection);
+      await this.detailsView.setSelection(selection);
     }
 
     // Create the entry selected overlay if the selection represents a trace event
@@ -1552,9 +1551,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   // Only opens the details view of a selection. This is used for Timing Markers. Timing markers replace
   // their entry with a new UI. Because of that, their entries can no longer be "selected" in the timings track,
   // so if clicked, we only open their details view.
-  openSelectionDetailsView(selection: TimelineSelection|null): void {
+  async openSelectionDetailsView(selection: TimelineSelection|null): Promise<void> {
     if (this.detailsView) {
-      void this.detailsView.setSelection(selection);
+      await this.detailsView.setSelection(selection);
     }
   }
 
@@ -1611,12 +1610,13 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.mainFlameChart.showAllGroups();
   }
 
-  private onAddEntryLabelAnnotation(
+  private async onAddEntryLabelAnnotation(
       dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider,
-      event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>): void {
+      event: Common.EventTarget.EventTargetEvent<{entryIndex: number, withLinkCreationButton: boolean}>):
+      Promise<void> {
     const selection = dataProvider.createSelection(event.data.entryIndex);
     if (selectionIsEvent(selection)) {
-      this.setSelectionAndReveal(selection);
+      await this.setSelectionAndReveal(selection);
       ModificationsManager.activeManager()?.createAnnotation(
           {
             type: 'ENTRY_LABEL',

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2130,7 +2130,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.flameChart.setModel(parsedTrace, this.#eventToRelatedInsights);
     this.flameChart.resizeToPreferredHeights();
     // Reset the visual selection as we've just swapped to a new trace.
-    this.flameChart.setSelectionAndReveal(null);
+    void this.flameChart.setSelectionAndReveal(null);
     this.#sideBar.setParsedTrace(parsedTrace);
 
     this.#searchableView.showWidget();
@@ -2964,7 +2964,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   select(selection: TimelineSelection|null): void {
     this.#announceSelectionToAria(this.selection, selection);
     this.selection = selection;
-    this.flameChart.setSelectionAndReveal(selection);
+    void this.flameChart.setSelectionAndReveal(selection);
   }
 
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void {
@@ -3044,7 +3044,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   #openSummaryTab(): void {
     // If we have a selection, we should remove it.
-    this.flameChart.setSelectionAndReveal(null);
+    void this.flameChart.setSelectionAndReveal(null);
     this.flameChart.selectDetailsViewTab(Tab.Details, null);
   }