chrome-devtools-frontend 1.0.1587572 → 1.0.1587905

package/front_end/panels/network/RequestHeadersView.ts

@@ -1,7 +1,6 @@
 // Copyright 2022 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/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
@@ -12,18 +11,15 @@ import * as SDK from '../../core/sdk/sdk.js';
 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 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';
 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 * as Sources from '../sources/sources.js';
 
 import * as NetworkComponents from './components/components.js';
+import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
-const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = Lit;
 
 const UIStrings = {
@@ -91,10 +87,6 @@ const UIStrings = {
    * @description Title text for a link to the Sources panel to the file containing the header override definitions
    */
   revealHeaderOverrides: 'Reveal header override definitions',
-  /**
-   * @description Text to show more content
-   */
-  showMore: 'Show more',
   /**
    * @description HTTP response code
    */
@@ -103,189 +95,224 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  #request: Readonly<SDK.NetworkRequest.NetworkRequest>;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  showRequestHeadersText: boolean;
+  showResponseHeadersText: boolean;
+  request: SDK.NetworkRequest.NetworkRequest;
+  toggleShowRawResponseHeaders: () => void;
+  toggleShowRawRequestHeaders: () => void;
+  revealHeadersFile?: () => void;
+  toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string};
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  render(
+      html`
+        <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
+        <style>${Input.checkboxStyles}</style>
+        ${renderGeneralSection(input)}
+        ${renderEarlyHintsHeaders(input)}
+        ${renderResponseHeaders(input)}
+        ${renderRequestHeaders(input)}
+      `,
+      target);
+};
+
+export class RequestHeadersView extends UI.Widget.Widget {
+  #request?: SDK.NetworkRequest.NetworkRequest;
   #showResponseHeadersText = false;
   #showRequestHeadersText = false;
-  #showResponseHeadersTextFull = false;
-  #showRequestHeadersTextFull = false;
   #toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string} = undefined;
   readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
+  #view: View;
+  get request(): SDK.NetworkRequest.NetworkRequest|undefined {
+    return this.#request;
+  }
+
+  set request(val) {
+    this.#removeEventListeners();
+    this.#request = val;
+    this.#addEventListeners();
+  }
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
-    this.#request = request;
-    this.setAttribute('jslog', `${VisualLogging.pane('headers').track({resize: true})}`);
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super({jslog: `${VisualLogging.pane('headers').track({resize: true})}`});
+    this.#view = view;
+  }
+
+  #addEventListeners(): void {
+    this.#request?.addEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
+    this.#request?.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
+    this.#request?.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshHeadersView, this);
+    this.#request?.addEventListener(
+        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.#resetAndRefreshHeadersView, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('persistence-network-overrides-enabled')
+        .addChangeListener(this.requestUpdate, this);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.#request.addEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
-    this.#request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
-    this.#request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshHeadersView, this);
-    this.#request.addEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.#resetAndRefreshHeadersView, this);
+    this.#addEventListeners();
     this.#toReveal = undefined;
     this.#refreshHeadersView();
   }
 
   override willHide(): void {
     super.willHide();
-    this.#request.removeEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
-    this.#request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
-    this.#request.removeEventListener(
+    this.#removeEventListeners();
+  }
+
+  #removeEventListeners(): void {
+    this.#request?.removeEventListener(
+        SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
+    this.#request?.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);
+    this.#request?.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.#refreshHeadersView, this);
-    this.#request.removeEventListener(
+    this.#request?.removeEventListener(
         SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.#resetAndRefreshHeadersView, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('persistence-network-overrides-enabled')
+        .removeChangeListener(this.requestUpdate, this);
   }
 
   #resetAndRefreshHeadersView(): void {
-    this.#request.deleteAssociatedData(NetworkComponents.ResponseHeaderSection.RESPONSE_HEADER_SECTION_DATA_KEY);
-    void this.render();
+    this.#request?.deleteAssociatedData(NetworkComponents.ResponseHeaderSection.RESPONSE_HEADER_SECTION_DATA_KEY);
+    this.requestUpdate();
   }
 
   #refreshHeadersView(): void {
-    void this.render();
+    this.requestUpdate();
   }
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string): void {
     this.#toReveal = {section, header};
-    void this.render();
-  }
-
-  connectedCallback(): void {
-    this.#workspace.addEventListener(
-        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
-    this.#workspace.addEventListener(
-        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
-        .addChangeListener(this.render, this);
-  }
-
-  disconnectedCallback(): void {
-    this.#workspace.removeEventListener(
-        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
-    this.#workspace.removeEventListener(
-        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('persistence-network-overrides-enabled')
-        .removeChangeListener(this.render, this);
+    this.requestUpdate();
   }
 
   #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
     if (this.#getHeaderOverridesFileUrl() === event.data.url()) {
-      void this.render();
+      this.requestUpdate();
     }
   }
 
-  override async render(): Promise<void> {
+  override performUpdate(): void {
     if (!this.#request) {
       return;
     }
 
-    return await RenderCoordinator.write(() => {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      render(html`
-        <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
-        <style>${Input.checkboxStyles}</style>
-        ${this.#renderGeneralSection()}
-        ${this.#renderEarlyHintsHeaders()}
-        ${this.#renderResponseHeaders()}
-        ${this.#renderRequestHeaders()}
-      `, this.#shadow, {host: this});
-
-      // clang-format on
-    });
-  }
-
-  #renderEarlyHintsHeaders(): Lit.LitTemplate {
-    if (!this.#request || !this.#request.earlyHintsHeaders || this.#request.earlyHintsHeaders.length === 0) {
-      return Lit.nothing;
+    let revealHeadersFile;
+    const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
+    if (uiSourceCode) {
+      revealHeadersFile = (): void => {
+        Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
+        void Sources.SourcesPanel.SourcesPanel.instance().revealInNavigator(uiSourceCode);
+      };
     }
-
-    const toggleShowRaw = (): void => {
-      this.#showResponseHeadersText = !this.#showResponseHeadersText;
-      void this.render();
+    const input: ViewInput = {
+      toggleShowRawResponseHeaders: (): void => {
+        this.#showResponseHeadersText = !this.#showResponseHeadersText;
+        this.requestUpdate();
+      },
+      toggleShowRawRequestHeaders: (): void => {
+        this.#showRequestHeadersText = !this.#showRequestHeadersText;
+        this.requestUpdate();
+      },
+      revealHeadersFile,
+      request: this.#request,
+      toReveal: this.#toReveal,
+      showResponseHeadersText: this.#showResponseHeadersText,
+      showRequestHeadersText: this.#showRequestHeadersText,
     };
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    return renderCategory({
-      onToggleRawHeaders: toggleShowRaw,
-      name: 'early-hints-headers',
-      title: i18nString(UIStrings.earlyHintsHeaders),
-      headerCount: this.#request.earlyHintsHeaders.length,
-      checked: undefined,
-      additionalContent: undefined,
-      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.EARLY_HINTS,
-      loggingContext: 'early-hints-headers',
-      contents: this.#showResponseHeadersText ? this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          <devtools-early-hints-header-section .data=${{
-        request: this.#request,
-        toReveal: this.#toReveal,
-      } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData}></devtools-early-hints-header-section>
-        `
-    });
+    this.#view(input, {}, this.contentElement);
   }
 
-  #renderResponseHeaders(): Lit.LitTemplate {
+  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
     if (!this.#request) {
-      return Lit.nothing;
+      return Platform.DevToolsPath.EmptyUrlString;
     }
+    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
+        this.#request.url(), /* ignoreInactive */ true);
+    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
+        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
+  }
+}
 
-    const toggleShowRaw = (): void => {
-      this.#showResponseHeadersText = !this.#showResponseHeadersText;
-      void this.render();
-    };
+function renderEarlyHintsHeaders(input: ViewInput): Lit.LitTemplate {
+  if (!input.request?.earlyHintsHeaders || input.request.earlyHintsHeaders.length === 0) {
+    return Lit.nothing;
+  }
 
-    return renderCategory({
-      onToggleRawHeaders: toggleShowRaw,
-      name: 'response-headers',
-      title: i18nString(UIStrings.responseHeaders),
-      headerCount: this.#request.sortedResponseHeaders.length,
-      checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
-      additionalContent: this.#renderHeaderOverridesLink(),
-      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE,
-      loggingContext: 'response-headers',
-      contents: this.#showResponseHeadersText ?
-          this.#renderRawHeaders(this.#request.responseHeadersText, true) :
-          html`
+  // Disabled until https://crbug.com/1079231 is fixed.
+  return renderCategory({
+    onToggleRawHeaders: input.toggleShowRawResponseHeaders,
+    name: 'early-hints-headers',
+    title: i18nString(UIStrings.earlyHintsHeaders),
+    headerCount: input.request.earlyHintsHeaders.length,
+    checked: undefined,
+    additionalContent: undefined,
+    forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.EARLY_HINTS,
+    loggingContext: 'early-hints-headers',
+    contents: input.showResponseHeadersText ? renderRawHeaders(input.request.responseHeadersText) : html`
+          <devtools-early-hints-header-section .data=${{
+      request: input.request,
+      toReveal: input.toReveal,
+    } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData}></devtools-early-hints-header-section>
+        `
+  });
+}
+
+function renderResponseHeaders(input: ViewInput): Lit.LitTemplate {
+  return renderCategory({
+    onToggleRawHeaders: input.toggleShowRawResponseHeaders,
+    name: 'response-headers',
+    title: i18nString(UIStrings.responseHeaders),
+    headerCount: input.request.sortedResponseHeaders.length,
+    checked: input.request.responseHeadersText ? input.showResponseHeadersText : undefined,
+    additionalContent: renderHeaderOverridesLink(input),
+    forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.RESPONSE,
+    loggingContext: 'response-headers',
+    contents: input.showResponseHeadersText ?
+        renderRawHeaders(input.request.responseHeadersText) :
+        html`
           <devtools-response-header-section .data=${{
-            request: this.#request,
-            toReveal: this.#toReveal,
-          } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData} jslog=${
-              VisualLogging.section('response-headers')}></devtools-response-header-section>
+          request: input.request,
+          toReveal: input.toReveal,
+        } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData} jslog=${
+            VisualLogging.section('response-headers')}></devtools-response-header-section>
         `
-    });
-  }
+  });
+}
 
-  #renderHeaderOverridesLink(): Lit.LitTemplate {
-    if (!this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl())) {
-      return Lit.nothing;
-    }
+function renderHeaderOverridesLink(input: ViewInput): Lit.LitTemplate {
+  if (!input.revealHeadersFile) {
+    return Lit.nothing;
+  }
 
-    const overridesSetting: Common.Settings.Setting<boolean> =
-        Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled');
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+  const revealHeadersFile = (event: Event): void => {
+    event.preventDefault();
+    input.revealHeadersFile?.();
+  };
+  const overridesSetting: Common.Settings.Setting<boolean> =
+      Common.Settings.Settings.instance().moduleSetting('persistence-network-overrides-enabled');
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     const fileIcon = html`
       <devtools-icon name="document" class=${'medium' + overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'}>
       </devtools-icon>`;
-    // clang-format on
-
-    const revealHeadersFile = (event: Event): void => {
-      event.preventDefault();
-      const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
-      if (uiSourceCode) {
-        Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
-        void Sources.SourcesPanel.SourcesPanel.instance().revealInNavigator(uiSourceCode);
-      }
-    };
+  // clang-format on
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
     return html`
       <devtools-link
           href="https://goo.gle/devtools-override"
@@ -304,164 +331,90 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
         ${fileIcon}${Persistence.NetworkPersistenceManager.HEADERS_FILENAME}
       </devtools-link>
     `;
-    // clang-format on
-  }
-
-  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
-    if (!this.#request) {
-      return Platform.DevToolsPath.EmptyUrlString;
-    }
-    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
-        this.#request.url(), /* ignoreInactive */ true);
-    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
-        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
-  }
-
-  #renderRequestHeaders(): Lit.LitTemplate {
-    if (!this.#request) {
-      return Lit.nothing;
-    }
-    const requestHeadersText = this.#request.requestHeadersText();
-
-    const toggleShowRaw = (): void => {
-      this.#showRequestHeadersText = !this.#showRequestHeadersText;
-      void this.render();
-    };
+  // clang-format on
+}
 
-    return renderCategory({
-      onToggleRawHeaders: toggleShowRaw,
-      name: 'request-headers',
-      title: i18nString(UIStrings.requestHeaders),
-      headerCount: this.#request.requestHeaders().length,
-      checked: requestHeadersText ? this.#showRequestHeadersText : undefined,
-      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST,
-      loggingContext: 'request-headers',
-      contents: (this.#showRequestHeadersText && requestHeadersText) ?
-          this.#renderRawHeaders(requestHeadersText, false) :
-          html`
+function renderRequestHeaders(input: ViewInput): Lit.LitTemplate {
+  const requestHeadersText = input.request.requestHeadersText();
+
+  return renderCategory({
+    onToggleRawHeaders: input.toggleShowRawRequestHeaders,
+    name: 'request-headers',
+    title: i18nString(UIStrings.requestHeaders),
+    headerCount: input.request.requestHeaders().length,
+    checked: requestHeadersText ? input.showRequestHeadersText : undefined,
+    forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST,
+    loggingContext: 'request-headers',
+    contents: (input.showRequestHeadersText && requestHeadersText) ?
+        renderRawHeaders(requestHeadersText) :
+        html`
           <devtools-widget .widgetConfig=${
-              UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
-                request: this.#request,
-                toReveal: this.#toReveal,
-              })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
-    });
-  }
-
-  #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): Lit.TemplateResult {
-    const trimmed = rawHeadersText.trim();
-    const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
-    const isShortened = !showFull && trimmed.length > RAW_HEADER_CUTOFF;
-
-    const showMore = (): void => {
-      if (forResponseHeaders) {
-        this.#showResponseHeadersTextFull = true;
-      } else {
-        this.#showRequestHeadersTextFull = true;
-      }
-      void this.render();
-    };
+            UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
+              request: input.request,
+              toReveal: input.toReveal,
+            })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
+  });
+}
 
-    const onContextMenuOpen = (event: Event): void => {
-      const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
-      if (!showFull) {
-        const contextMenu = new UI.ContextMenu.ContextMenu(event);
-        const section = contextMenu.newSection();
-        section.appendItem(i18nString(UIStrings.showMore), showMore, {jslogContext: 'show-more'});
-        void contextMenu.show();
-      }
-    };
+function renderRawHeaders(text: string): Lit.TemplateResult {
+  return html`<div class="row raw-headers-row"><devtools-widget  class=raw-headers .widgetConfig=${
+      UI.Widget.widgetConfig(ShowMoreDetailsWidget, {text})}></devtools-widget></div>`;
+}
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <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
+function renderGeneralSection(input: ViewInput): Lit.LitTemplate {
+  const statusClasses = ['status'];
+  if (input.request.statusCode < 300 || input.request.statusCode === 304) {
+    statusClasses.push('green-circle');
+  } else if (input.request.statusCode < 400) {
+    statusClasses.push('yellow-circle');
+  } else {
+    statusClasses.push('red-circle');
   }
 
-  #renderGeneralSection(): Lit.LitTemplate {
-    if (!this.#request) {
-      return Lit.nothing;
-    }
-
-    const statusClasses = ['status'];
-    if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
-      statusClasses.push('green-circle');
-    } else if (this.#request.statusCode < 400) {
-      statusClasses.push('yellow-circle');
-    } else {
-      statusClasses.push('red-circle');
-    }
-
-    let comment = '';
-    if (this.#request.cachedInMemory()) {
-      comment = i18nString(UIStrings.fromMemoryCache);
-    } else if (this.#request.fromEarlyHints()) {
-      comment = i18nString(UIStrings.fromEarlyHints);
-    } else if (this.#request.fetchedViaServiceWorker) {
-      comment = i18nString(UIStrings.fromServiceWorker);
-    } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
-      comment = i18nString(UIStrings.fromSignedexchange);
-    } else if (this.#request.fromPrefetchCache()) {
-      comment = i18nString(UIStrings.fromPrefetchCache);
-    } else if (this.#request.cached()) {
-      comment = i18nString(UIStrings.fromDiskCache);
-    }
+  let comment = '';
+  if (input.request.cachedInMemory()) {
+    comment = i18nString(UIStrings.fromMemoryCache);
+  } else if (input.request.fromEarlyHints()) {
+    comment = i18nString(UIStrings.fromEarlyHints);
+  } else if (input.request.fetchedViaServiceWorker) {
+    comment = i18nString(UIStrings.fromServiceWorker);
+  } else if (input.request.redirectSourceSignedExchangeInfoHasNoErrors()) {
+    comment = i18nString(UIStrings.fromSignedexchange);
+  } else if (input.request.fromPrefetchCache()) {
+    comment = i18nString(UIStrings.fromPrefetchCache);
+  } else if (input.request.cached()) {
+    comment = i18nString(UIStrings.fromDiskCache);
+  }
 
-    if (comment) {
-      statusClasses.push('status-with-comment');
-    }
+  if (comment) {
+    statusClasses.push('status-with-comment');
+  }
 
-    const statusText = [this.#request.statusCode, this.#request.getInferredStatusText(), comment].join(' ');
+  const statusText = [input.request.statusCode, input.request.getInferredStatusText(), comment].join(' ');
 
-    return renderCategory({
-      name: 'general',
-      title: i18nString(UIStrings.general),
-      forceOpen: this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL,
-      loggingContext: 'general',
-      // clang-format off
+  return renderCategory({
+    name: 'general',
+    title: i18nString(UIStrings.general),
+    forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL,
+    loggingContext: 'general',
+    // clang-format off
           contents: html`<div jslog=${VisualLogging.section('general')}>
-        ${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),
+        ${renderGeneralRow(i18nString(UIStrings.requestUrl), input.request.url(), 'request-url')}
+        ${input.request.statusCode? renderGeneralRow(i18nString(UIStrings.requestMethod),
+            input.request.requestMethod, 'request-method') : Lit.nothing}
+        ${input.request.statusCode? 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}
+        ${input.request.remoteAddress()? renderGeneralRow(i18nString(UIStrings.remoteAddress),
+            input.request.remoteAddress(), 'remote-address') : Lit.nothing}
+        ${input.request.referrerPolicy()? renderGeneralRow(i18nString(UIStrings.referrerPolicy),
+            String(input.request.referrerPolicy()), 'referrer-policy') : Lit.nothing}
       </div>`});
-    // clang-format on
-  }
+  // clang-format on
 
-  #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();
+  function renderGeneralRow(
+      name: Common.UIString.LocalizedString, value: string, id: string, classNames?: string[]): Lit.LitTemplate {
+    const isHighlighted = input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL &&
+        name.toLowerCase() === input.toReveal?.header?.toLowerCase();
     return html`
       <div class="row ${isHighlighted ? 'header-highlight' : ''}">
         <div class="header-name">${name}</div>
@@ -473,20 +426,9 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       </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;
-  }
 }
 
-function renderCategory(data: {
+export function renderCategory(data: {
   name: string,
   title: Common.UIString.LocalizedString,
   contents: Lit.LitTemplate,
@@ -555,11 +497,3 @@ function renderCategory(data: {
     expandedSetting?.set((event.target as HTMLDetailsElement).open);
   }
 }
-
-customElements.define('devtools-request-headers', RequestHeadersView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-request-headers': RequestHeadersView;
-  }
-}