chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -3,8 +3,6 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import './RequestHeaderSection.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -22,7 +20,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Sources from '../../sources/sources.js';
 
-import type {RequestHeaderSectionData} from './RequestHeaderSection.js';
+import {RequestHeaderSection} from './RequestHeaderSection.js';
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 import {
   RESPONSE_HEADER_SECTION_DATA_KEY,
@@ -366,10 +364,10 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
-          <devtools-request-header-section .data=${{
+          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(RequestHeaderSection, {
             request: this.#request,
             toReveal: this.#toReveal,
-          } as RequestHeaderSectionData} jslog=${VisualLogging.section('request-headers')}></devtools-request-header-section>
+          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>
         `}
       </devtools-request-headers-category>
     `;
@@ -480,30 +478,47 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
         aria-label=${i18nString(UIStrings.general)}
       >
       <div jslog=${VisualLogging.section('general')}>
-        ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url())}
-        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod), this.#request.requestMethod) : Lit.nothing}
-        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.statusCode), statusText, statusClasses) : Lit.nothing}
-        ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress), this.#request.remoteAddress()) : Lit.nothing}
-        ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy), String(this.#request.referrerPolicy())) : Lit.nothing}
+        ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url(), 'request-url')}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod),
+            this.#request.requestMethod, 'request-method') : Lit.nothing}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.statusCode),
+            statusText, 'status-code', statusClasses) : Lit.nothing}
+        ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress),
+            this.#request.remoteAddress(), 'remote-address') : Lit.nothing}
+        ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy),
+            String(this.#request.referrerPolicy()), 'referrer-policy') : Lit.nothing}
       </div>
       </devtools-request-headers-category>
     `;
     // clang-format on
   }
 
-  #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, classNames?: string[]): Lit.LitTemplate {
+  #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, id: string, classNames?: string[]):
+      Lit.LitTemplate {
     const isHighlighted = this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL &&
         name.toLowerCase() === this.#toReveal?.header?.toLowerCase();
     return html`
       <div class="row ${isHighlighted ? 'header-highlight' : ''}">
         <div class="header-name">${name}</div>
         <div
+          id=${id}
           class="header-value ${classNames?.join(' ')}"
           @copy=${() => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
         >${value}</div>
       </div>
     `;
   }
+
+  getHeaderElementById(id: string): Element|null {
+    const categories = this.#shadow.querySelectorAll('devtools-request-headers-category');
+    for (const category of categories) {
+      const element = category.querySelector(`#${id}`);
+      if (element) {
+        return element;
+      }
+    }
+    return null;
+  }
 }
 
 export class ToggleRawHeadersEvent extends Event {

package/front_end/panels/network/components/RequestTrustTokensView.css

@@ -3,20 +3,30 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.code {
-  font-family: var(--monospace-font-family);
-  font-size: var(--monospace-font-size);
-}
+@scope to (devtools-widget > *) {
+  .code {
+    font-family: var(--monospace-font-family);
+    font-size: var(--monospace-font-size);
+  }
 
-.issuers-list {
-  display: flex;
-  flex-direction: column;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
+  .issuers-list {
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .status-icon {
+    margin: 0 0.3em 2px 0;
+    vertical-align: middle;
+
+    &.failure {
+      color: var(--icon-error);
+    }
 
-.status-icon {
-  margin: 0 0.3em 2px 0;
-  vertical-align: middle;
+    &.success {
+      color: var(--icon-checkmark-green);
+    }
+  }
 }

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

@@ -1,7 +1,6 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/kit/kit.js';
@@ -9,14 +8,13 @@ import '../../../ui/kit/kit.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import type {IconWithName} from '../../../ui/kit/kit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import requestTrustTokensViewStyles from './RequestTrustTokensView.css.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const UIStrings = {
   /**
@@ -102,151 +100,183 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestTrustTokensView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #request: SDK.NetworkRequest.NetworkRequest;
+type Status = 'Success'|'Failure';
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
-    this.#request = request;
+export interface ViewInput {
+  params?: Array<{name: string, value: string|string[], isCode?: boolean}>;
+  status?: Status;
+  description?: string;
+  issuedTokenCount?: number;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+function renderRowIfValuePresent<T>(key: string, value: T, isCode?: boolean): Lit.LitTemplate {
+  if (!value || (Array.isArray(value) && value.length === 0)) {
+    return Lit.nothing;
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.#request.addEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
-    void this.render();
+  // clang-format off
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value class=${isCode ? 'code' : ''}>
+      ${Array.isArray(value) ? html`
+        <ul class="issuers-list">
+            ${value.map(item => html`<li>${item}</li>`)}
+        </ul>` :
+    value}
+    </devtools-report-value>
+  `;
+  // clang-format on
+}
+
+const renderResultSection = (status?: Status, description?: string, issuedTokenCount?: number): Lit.LitTemplate => {
+  if (!status) {
+    return Lit.nothing;
   }
 
-  override willHide(): void {
-    super.willHide();
-    this.#request.removeEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
+  // clang-format off
+  return html`
+    <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
+    <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
+    <devtools-report-value>
+      <span>
+        <devtools-icon class="status-icon medium ${status === 'Success' ? 'success' : 'failure'}"
+        name=${status === 'Success' ? 'check-circle' : 'cross-circle-filled'}>
+        </devtools-icon>
+        <strong>${status === 'Success' ? i18nString(UIStrings.success) : i18nString(UIStrings.failure)}</strong>
+        ${description ? html` ${description}` : Lit.nothing}
+      </span>
+    </devtools-report-value>
+    ${renderRowIfValuePresent(i18nString(UIStrings.numberOfIssuedTokens), issuedTokenCount)}
+    <devtools-report-divider></devtools-report-divider>
+    `;
+  // clang-format on
+};
+
+const renderParameterSection = (params: ViewInput['params']): Lit.LitTemplate => {
+  if (!params || params.length === 0) {
+    return Lit.nothing;
   }
+  // clang-format off
+  return html`
+    <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({ resize: true })}>
+      ${i18nString(UIStrings.parameters)}
+    </devtools-report-section-header>
+    ${params.map(param => renderRowIfValuePresent(param.name, param.value, param.isCode))}
+    <devtools-report-divider></devtools-report-divider>
+  `;
+  // clang-format on
+};
 
-  override async render(): Promise<void> {
-    if (!this.#request) {
-      throw new Error('Trying to render a Trust Token report without providing data');
-    }
+// clang-format off
+export const DEFAULT_VIEW: View = (input, output, target): void => {
+  render(html`
+    <style>${requestTrustTokensViewStyles}</style>
+    <devtools-report>
+      ${renderParameterSection(input.params)}
+      ${renderResultSection(input.status, input.description, input.issuedTokenCount)}
+    </devtools-report>
+  `, target);
+};
+// clang-format on
+
+export class RequestTrustTokensView extends UI.Widget.Widget {
+  #request: SDK.NetworkRequest.NetworkRequest|null = null;
+  #view: View;
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    Lit.render(html`
-      <style>${requestTrustTokensViewStyles}</style>
-      <devtools-report>
-        ${this.#renderParameterSection()}
-        ${this.#renderResultSection()}
-      </devtools-report>
-    `, this.#shadow, {host: this});
-    // clang-format on
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  #renderParameterSection(): Lit.LitTemplate {
-    const trustTokenParams = this.#request.trustTokenParams();
-    if (!trustTokenParams) {
-      return Lit.nothing;
-    }
+  get request(): SDK.NetworkRequest.NetworkRequest|null {
+    return this.#request;
+  }
 
-    return html`
-      <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({
-      resize: true,
-    })}>${i18nString(UIStrings.parameters)}</devtools-report-section-header>
-      ${renderRowWithCodeValue(i18nString(UIStrings.type), trustTokenParams.operation.toString())}
-      ${this.#renderRefreshPolicy(trustTokenParams)}
-      ${this.#renderIssuers(trustTokenParams)}
-      ${this.#renderIssuerAndTopLevelOriginFromResult()}
-      <devtools-report-divider></devtools-report-divider>
-    `;
+  set request(request: SDK.NetworkRequest.NetworkRequest|null) {
+    if (this.#request === request) {
+      return;
+    }
+    this.#unsubscribe();
+    this.#request = request;
+    this.#subscribe();
+    this.requestUpdate();
   }
 
-  #renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): Lit.LitTemplate {
-    if (params.operation !== Protocol.Network.TrustTokenOperationType.Redemption) {
-      return Lit.nothing;
+  #subscribe(): void {
+    if (this.#request && this.isShowing()) {
+      this.#request.addEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.requestUpdate, this);
     }
-    return renderRowWithCodeValue(i18nString(UIStrings.refreshPolicy), params.refreshPolicy.toString());
   }
 
-  #renderIssuers(params: Protocol.Network.TrustTokenParams): Lit.LitTemplate {
-    if (!params.issuers || params.issuers.length === 0) {
-      return Lit.nothing;
+  #unsubscribe(): void {
+    if (this.#request) {
+      this.#request.removeEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.requestUpdate, this);
     }
+  }
 
-    return html`
-      <devtools-report-key>${i18nString(UIStrings.issuers)}</devtools-report-key>
-      <devtools-report-value>
-        <ul class="issuers-list">
-          ${params.issuers.map(issuer => html`<li>${issuer}</li>`)}
-        </ul>
-      </devtools-report-value>
-    `;
+  override wasShown(): void {
+    super.wasShown();
+    this.#subscribe();
+    this.requestUpdate();
   }
 
-  // The issuer and top level origin are technically parameters but reported in the
-  // result structure due to the timing when they are calculated in the backend.
-  // Nonetheless, we show them as part of the parameter section.
-  #renderIssuerAndTopLevelOriginFromResult(): Lit.LitTemplate {
-    const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
-    if (!trustTokenResult) {
-      return Lit.nothing;
+  override willHide(): void {
+    super.willHide();
+    this.#unsubscribe();
+  }
+
+  override performUpdate(): void {
+    if (!this.request) {
+      return;
     }
 
-    return html`
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), trustTokenResult.topLevelOrigin)}
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), trustTokenResult.issuerOrigin)}`;
-  }
+    const trustTokenParams = this.request.trustTokenParams();
+    const trustTokenResult = this.request.trustTokenOperationDoneEvent();
 
-  #renderResultSection(): Lit.LitTemplate {
-    const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
-    if (!trustTokenResult) {
-      return Lit.nothing;
+    const viewInput: ViewInput = {};
+
+    if (trustTokenParams) {
+      viewInput.params = [
+        {name: i18nString(UIStrings.type), value: trustTokenParams.operation.toString(), isCode: true},
+      ];
+      if (trustTokenParams.operation === Protocol.Network.TrustTokenOperationType.Redemption) {
+        viewInput.params.push({
+          name: i18nString(UIStrings.refreshPolicy),
+          value: trustTokenParams.refreshPolicy.toString(),
+          isCode: true,
+        });
+      }
+      if (trustTokenParams.issuers && trustTokenParams.issuers.length > 0) {
+        viewInput.params.push({name: i18nString(UIStrings.issuers), value: trustTokenParams.issuers});
+      }
+      if (trustTokenResult?.topLevelOrigin) {
+        viewInput.params.push({name: i18nString(UIStrings.topLevelOrigin), value: trustTokenResult.topLevelOrigin});
+      }
+      if (trustTokenResult?.issuerOrigin) {
+        viewInput.params.push({name: i18nString(UIStrings.issuer), value: trustTokenResult.issuerOrigin});
+      }
     }
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
-      <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
-      <devtools-report-value>
-        <span>
-          <devtools-icon class="status-icon medium"
-            .data=${getIconForStatusCode(trustTokenResult.status)}>
-          </devtools-icon>
-          <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
-          ${getDetailedTextForStatusCode(trustTokenResult.status)}
-        </span>
-      </devtools-report-value>
-      ${this.#renderIssuedTokenCount(trustTokenResult)}
-      <devtools-report-divider></devtools-report-divider>
-      `;
-  }
 
-  #renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): Lit.LitTemplate {
-    if (result.type !== Protocol.Network.TrustTokenOperationType.Issuance) {
-      return Lit.nothing;
+    if (trustTokenResult) {
+      viewInput.status = statusConsideredSuccess(trustTokenResult.status) ? 'Success' : 'Failure';
+      viewInput.description = getDetailedTextForStatusCode(trustTokenResult.status) ?? undefined;
+      viewInput.issuedTokenCount = trustTokenResult.type === Protocol.Network.TrustTokenOperationType.Issuance ?
+          trustTokenResult.issuedTokenCount :
+          undefined;
     }
-    return renderSimpleRowIfValuePresent(i18nString(UIStrings.numberOfIssuedTokens), result.issuedTokenCount);
+
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }
 
-const SUCCESS_ICON_DATA: IconWithName = {
-  color: 'var(--icon-checkmark-green)',
-  iconName: 'check-circle',
-};
-
-const FAILURE_ICON_DATA: IconWithName = {
-  color: 'var(--icon-error)',
-  iconName: 'cross-circle-filled',
-};
-
 export function statusConsideredSuccess(status: Protocol.Network.TrustTokenOperationDoneEventStatus): boolean {
   return status === Protocol.Network.TrustTokenOperationDoneEventStatus.Ok ||
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.AlreadyExists ||
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.FulfilledLocally;
 }
 
-function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): IconWithName {
-  return statusConsideredSuccess(status) ? SUCCESS_ICON_DATA : FAILURE_ICON_DATA;
-}
-
-function getSimplifiedStatusTextForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): string {
-  return statusConsideredSuccess(status) ? i18nString(UIStrings.success) : i18nString(UIStrings.failure);
-}
-
 function getDetailedTextForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): string|null {
   switch (status) {
     case Protocol.Network.TrustTokenOperationDoneEventStatus.Ok:
@@ -273,29 +303,3 @@ function getDetailedTextForStatusCode(status: Protocol.Network.TrustTokenOperati
       return i18nString(UIStrings.perSiteLimit);
   }
 }
-
-function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): Lit.LitTemplate {
-  if (value === undefined) {
-    return Lit.nothing;
-  }
-
-  return html`
-    <devtools-report-key>${key}</devtools-report-key>
-    <devtools-report-value>${value}</devtools-report-value>
-  `;
-}
-
-function renderRowWithCodeValue(key: string, value: string): Lit.TemplateResult {
-  return html`
-    <devtools-report-key>${key}</devtools-report-key>
-    <devtools-report-value class="code">${value}</devtools-report-value>
-  `;
-}
-
-customElements.define('devtools-trust-token-report', RequestTrustTokensView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-trust-token-report': RequestTrustTokensView;
-  }
-}

package/front_end/panels/profiler/IsolateSelector.ts

@@ -88,7 +88,6 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         this.totalTrendDiv, i18nString(UIStrings.totalPageJsHeapSizeChangeTrend, {PH1: trendIntervalMinutes}));
     UI.Tooltip.Tooltip.install(this.totalValueDiv, i18nString(UIStrings.totalPageJsHeapSizeAcrossAllVm));
 
-    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.NAME_CHANGED, this.targetChanged, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
@@ -97,6 +96,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
 
   override wasShown(): void {
     super.wasShown();
+    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.IsolateManager.IsolateManager.instance().addEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
   }
@@ -105,6 +105,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
     super.willHide();
     SDK.IsolateManager.IsolateManager.instance().removeEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
+    SDK.IsolateManager.IsolateManager.instance().unobserveIsolates(this);
   }
 
   isolateAdded(isolate: SDK.IsolateManager.Isolate): void {

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -665,46 +664,63 @@ export class CommandAutocompleteSuggestionProvider {
   }
 }
 
-export class InfoWidget extends UI.Widget.VBox {
-  private readonly tabbedPane: UI.TabbedPane.TabbedPane;
+interface InfoWidgetViewInput {
   request: Record<string, unknown>|undefined;
   response: Record<string, unknown>|undefined;
   type: 'sent'|'received'|undefined;
   selectedTab: 'request'|'response'|undefined;
-  constructor(element: HTMLElement) {
+}
+
+type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HTMLElement) => void;
+
+const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
+  // clang-format off
+  render(html`<devtools-widget .widgetConfig=${widgetConfig(UI.TabbedPane.TabbedPane, {
+    tabs: [
+      {
+        id: 'request',
+        title: i18nString(UIStrings.request),
+        view: input.type === undefined ?
+            new UI.EmptyWidget.EmptyWidget(
+                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
+            SourceFrame.JSONView.JSONView.createViewSync(input.request || null),
+        enabled: input.type === 'sent',
+        selected: input.selectedTab === 'request',
+      },
+      {
+        id: 'response',
+        title: i18nString(UIStrings.response),
+        view: input.type === undefined ?
+            new UI.EmptyWidget.EmptyWidget(
+                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
+            SourceFrame.JSONView.JSONView.createViewSync(input.response || null),
+        selected: input.selectedTab === 'response',
+      }
+    ]})}>
+  </devtools-widget>`, target);
+  // clang-format on
+};
+
+export class InfoWidget extends UI.Widget.VBox {
+  #view: InfoWidgetView;
+  request: Record<string, unknown>|undefined;
+  response: Record<string, unknown>|undefined;
+  type: 'sent'|'received'|undefined;
+  constructor(element: HTMLElement, view = INFO_WIDGET_VIEW) {
     super(element);
-    this.tabbedPane = new UI.TabbedPane.TabbedPane();
-    this.tabbedPane.appendTab('request', i18nString(UIStrings.request), new UI.Widget.Widget());
-    this.tabbedPane.appendTab('response', i18nString(UIStrings.response), new UI.Widget.Widget());
-    this.tabbedPane.show(this.contentElement);
-    this.tabbedPane.selectTab('response');
-    this.request = {};
+    this.#view = view;
+    this.requestUpdate();
   }
 
   override performUpdate(): void {
-    if (!this.request && !this.response) {
-      this.tabbedPane.changeTabView(
-          'request',
-          new UI.EmptyWidget.EmptyWidget(
-              i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)));
-      this.tabbedPane.changeTabView(
-          'response',
-          new UI.EmptyWidget.EmptyWidget(
-              i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)));
-      return;
-    }
-
-    const requestEnabled = this.type && this.type === 'sent';
-    this.tabbedPane.setTabEnabled('request', Boolean(requestEnabled));
-    if (!requestEnabled) {
-      this.tabbedPane.selectTab('response');
-    }
-
-    this.tabbedPane.changeTabView('request', SourceFrame.JSONView.JSONView.createViewSync(this.request || null));
-    this.tabbedPane.changeTabView('response', SourceFrame.JSONView.JSONView.createViewSync(this.response || null));
-    if (this.selectedTab) {
-      this.tabbedPane.selectTab(this.selectedTab);
-    }
+    this.#view(
+        {
+          request: this.request,
+          response: this.response,
+          type: this.type,
+          selectedTab: this.type !== 'sent' ? 'response' : undefined,
+        },
+        undefined, this.contentElement);
   }
 }
 

package/front_end/panels/recorder/RecorderController.ts

@@ -23,7 +23,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
 import type {AddBreakpointEvent, RemoveBreakpointEvent} from './components/StepView.js';
-import type * as Controllers from './controllers/controllers.js';
 import * as Converters from './converters/converters.js';
 import * as Extensions from './extensions/extensions.js';
 import * as Models from './models/models.js';
@@ -982,7 +981,7 @@ export class RecorderController extends LitElement {
     await this.updateComplete;
     // FIXME: call a method on the recording view widget.
     await this.#recordingView?.updateComplete;
-    this.#recordingView?.contentElement?.querySelector('.section:last-child devtools-step-view:last-of-type')
+    this.#recordingView?.contentElement?.querySelector('.section:last-child .step-view-widget:last-of-type')
         ?.shadowRoot?.querySelector<HTMLElement>('.action')
         ?.click();
   }
@@ -1224,7 +1223,7 @@ export class RecorderController extends LitElement {
             titleChanged: this.#handleRecordingTitleChanged.bind(this),
           })}
           @requestselectorattribute=${(
-            event: Controllers.SelectorPicker.RequestSelectorAttributeEvent,
+            event: Components.SelectorPicker.RequestSelectorAttributeEvent,
           ) => {
             event.send(this.currentRecording?.flow.selectorAttribute);
           }}