Move RequestHeadersView out of components

When migrating to lit, it will stop being a component, and this
simplifies the review.

Bypass-Check-License: Files were moved.
Bug: 407751697
Change-Id: I49a6377cd8ba03dde20cfe18ac04e140a9cb9627
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7594993
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>

Author: pfaffe

config/gni/devtools_grd_files.gni

@@ -1770,6 +1770,7 @@ grd_files_unbundled_sources = [
   "front_end/panels/network/RequestCookiesView.js",
   "front_end/panels/network/RequestDeviceBoundSessionsView.js",
   "front_end/panels/network/RequestHTMLView.js",
+  "front_end/panels/network/RequestHeadersView.js",
   "front_end/panels/network/RequestInitiatorView.js",
   "front_end/panels/network/RequestPayloadView.js",
   "front_end/panels/network/RequestPreviewView.js",
@@ -1789,7 +1790,6 @@ grd_files_unbundled_sources = [
   "front_end/panels/network/components/RequestHeaderSection.css.js",
   "front_end/panels/network/components/RequestHeaderSection.js",
   "front_end/panels/network/components/RequestHeadersView.css.js",
-  "front_end/panels/network/components/RequestHeadersView.js",
   "front_end/panels/network/components/RequestTrustTokensView.css.js",
   "front_end/panels/network/components/RequestTrustTokensView.js",
   "front_end/panels/network/components/ResponseHeaderSection.css.js",

front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -15,7 +15,6 @@ import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrappe
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as NetworkComponents from '../network/components/components.js';
 import * as Network from '../network/network.js';
 
 import * as ApplicationComponents from './components/components.js';
@@ -545,7 +544,7 @@ export class RequestView extends UI.Widget.VBox {
     this.tabbedPane.appendTab(
         'headers', i18nString(UIStrings.headers),
         LegacyWrapper.LegacyWrapper.legacyWrapper(
-            UI.Widget.VBox, new NetworkComponents.RequestHeadersView.RequestHeadersView(request)));
+            UI.Widget.VBox, new Network.RequestHeadersView.RequestHeadersView(request)));
     this.tabbedPane.appendTab(
         'preview', i18nString(UIStrings.preview), new Network.RequestPreviewView.RequestPreviewView(request));
     this.tabbedPane.show(this.element);

front_end/panels/network/BUILD.gn

@@ -52,6 +52,7 @@ devtools_ui_module("network") {
     "RequestCookiesView.ts",
     "RequestDeviceBoundSessionsView.ts",
     "RequestHTMLView.ts",
+    "RequestHeadersView.ts",
     "RequestInitiatorView.ts",
     "RequestPayloadView.ts",
     "RequestPreviewView.ts",
@@ -173,6 +174,7 @@ devtools_ui_module("unittests") {
     "RequestCookiesView.test.ts",
     "RequestDeviceBoundSessionsView.test.ts",
     "RequestHTMLView.test.ts",
+    "RequestHeadersView.test.ts",
     "RequestInitiatorView.test.ts",
     "RequestPayloadView.test.ts",
     "RequestPreviewView.test.ts",

front_end/panels/network/NetworkItemView.ts

@@ -22,6 +22,7 @@ import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestDeviceBoundSessionsView} from './RequestDeviceBoundSessionsView.js';
+import * as RequestHeadersView from './RequestHeadersView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
@@ -148,7 +149,7 @@ const requestToPreviewView = new WeakMap<SDK.NetworkRequest.NetworkRequest, Requ
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   #request: SDK.NetworkRequest.NetworkRequest;
   readonly #resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  readonly #headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
+  readonly #headersViewComponent: RequestHeadersView.RequestHeadersView|undefined;
   #payloadView: RequestPayloadView|null = null;
   readonly #responseView: RequestResponseView|undefined;
   #cookiesView: RequestCookiesView|null = null;
@@ -174,7 +175,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.headers));
     } else {
       this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-      this.#headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.#headersViewComponent = new RequestHeadersView.RequestHeadersView(request);
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
           LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.#headersViewComponent),
@@ -426,7 +427,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.#headersViewComponent?.revealHeader(section, header);
   }
 
-  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
+  getHeadersViewComponent(): RequestHeadersView.RequestHeadersView|undefined {
     return this.#headersViewComponent;
   }
 }

…rk/components/RequestHeadersView.test.ts …anels/network/RequestHeadersView.test.tsfront_end/panels/network/components/RequestHeadersView.test.ts renamed to front_end/panels/network/RequestHeadersView.test.ts front_end/panels/network/components/RequestHeadersView.test.ts renamed to front_end/panels/network/RequestHeadersView.test.ts

@@ -2,37 +2,38 @@
 // 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 Host from '../../../core/host/host.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import * as Protocol from '../../../generated/protocol.js';
-import * as Persistence from '../../../models/persistence/persistence.js';
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as Persistence from '../../models/persistence/persistence.js';
 import {
   assertScreenshot,
   dispatchClickEvent,
   dispatchCopyEvent,
   dispatchKeyDownEvent,
   getCleanTextContentFromElements,
   renderElementIntoDOM,
-} from '../../../testing/DOMHelpers.js';
+} from '../../testing/DOMHelpers.js';
 import {
   deinitializeGlobalVars,
-} from '../../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../../testing/MockConnection.js';
+} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {
   createWorkspaceProject,
   setUpEnvironment,
-} from '../../../testing/OverridesHelpers.js';
-import {createFileSystemUISourceCode} from '../../../testing/UISourceCodeHelpers.js';
+} from '../../testing/OverridesHelpers.js';
+import {createFileSystemUISourceCode} from '../../testing/UISourceCodeHelpers.js';
 import {
   recordedMetricsContain,
   resetRecordedMetrics,
-} from '../../../testing/UserMetricsHelpers.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as NetworkForward from '../forward/forward.js';
+} from '../../testing/UserMetricsHelpers.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
-import * as NetworkComponents from './components.js';
+import type * as NetworkComponents from './components/components.js';
+import * as NetworkForward from './forward/forward.js';
+import * as Network from './network.js';
 
 const {urlString} = Platform.DevToolsPath;
 const defaultRequest = {
@@ -73,7 +74,7 @@ const defaultRequest = {
 
 async function renderHeadersComponent(request: SDK.NetworkRequest.NetworkRequest) {
   Object.setPrototypeOf(request, SDK.NetworkRequest.NetworkRequest.prototype);
-  const component = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+  const component = new Network.RequestHeadersView.RequestHeadersView(request);
   renderElementIntoDOM(component);
   component.wasShown();
   await RenderCoordinator.done();
@@ -120,7 +121,7 @@ const getRowHighlightStatus = (container: HTMLElement) => {
 };
 
 describeWithMockConnection('RequestHeadersView', () => {
-  let component: NetworkComponents.RequestHeadersView.RequestHeadersView|null|undefined = null;
+  let component: Network.RequestHeadersView.RequestHeadersView|null|undefined = null;
 
   beforeEach(() => {
     setUpEnvironment();

…network/components/RequestHeadersView.ts …end/panels/network/RequestHeadersView.tsfront_end/panels/network/components/RequestHeadersView.ts renamed to front_end/panels/network/RequestHeadersView.ts front_end/panels/network/components/RequestHeadersView.ts renamed to front_end/panels/network/RequestHeadersView.ts

@@ -2,31 +2,26 @@
 // 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';
-import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-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 {RequestHeaderSection} from './RequestHeaderSection.js';
-import requestHeadersViewStyles from './RequestHeadersView.css.js';
-import {
-  RESPONSE_HEADER_SECTION_DATA_KEY,
-  type ResponseHeaderSectionData,
-} from './ResponseHeaderSection.js';
+import '../../ui/kit/kit.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';
+import * as Platform from '../../core/platform/platform.js';
+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';
 
 const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = Lit;
@@ -105,7 +100,7 @@ const UIStrings = {
    */
   statusCode: 'Status Code',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', 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 {
@@ -146,7 +141,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   #resetAndRefreshHeadersView(): void {
-    this.#request.deleteAssociatedData(RESPONSE_HEADER_SECTION_DATA_KEY);
+    this.#request.deleteAssociatedData(NetworkComponents.ResponseHeaderSection.RESPONSE_HEADER_SECTION_DATA_KEY);
     void this.render();
   }
 
@@ -194,7 +189,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       render(html`
-        <style>${requestHeadersViewStyles}</style>
+        <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
         <style>${Input.checkboxStyles}</style>
         ${this.#renderGeneralSection()}
         ${this.#renderEarlyHintsHeaders()}
@@ -230,7 +225,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           <devtools-early-hints-header-section .data=${{
         request: this.#request,
         toReveal: this.#toReveal,
-      } as ResponseHeaderSectionData}></devtools-early-hints-header-section>
+      } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData}></devtools-early-hints-header-section>
         `
     });
   }
@@ -260,7 +255,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           <devtools-response-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData} jslog=${
+          } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData} jslog=${
               VisualLogging.section('response-headers')}></devtools-response-header-section>
         `
     });
@@ -344,10 +339,11 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       contents: (this.#showRequestHeadersText && requestHeadersText) ?
           this.#renderRawHeaders(requestHeadersText, false) :
           html`
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(RequestHeaderSection, {
-            request: this.#request,
-            toReveal: this.#toReveal,
-          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
+          <devtools-widget .widgetConfig=${
+              UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
+                request: this.#request,
+                toReveal: this.#toReveal,
+              })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
     });
   }
 

front_end/panels/network/components/BUILD.gn

@@ -25,7 +25,6 @@ devtools_ui_module("components") {
     "EditableSpan.ts",
     "HeaderSectionRow.ts",
     "RequestHeaderSection.ts",
-    "RequestHeadersView.ts",
     "RequestTrustTokensView.ts",
     "ResponseHeaderSection.ts",
   ]
@@ -82,7 +81,6 @@ devtools_ui_module("unittests") {
     "DirectSocketConnectionView.test.ts",
     "HeaderSectionRow.test.ts",
     "RequestHeaderSection.test.ts",
-    "RequestHeadersView.test.ts",
     "RequestTrustTokensView.test.ts",
     "ResponseHeaderSection.test.ts",
   ]

front_end/panels/network/components/RequestHeaderSection.ts

@@ -14,6 +14,9 @@ import * as NetworkForward from '../forward/forward.js';
 
 import {EditingAllowedStatus, type HeaderDescriptor} from './HeaderSectionRow.js';
 import requestHeaderSectionStyles from './RequestHeaderSection.css.js';
+import requestHeadersViewStyles from './RequestHeadersView.css.js';
+
+export {requestHeadersViewStyles};
 
 const {render, html} = Lit;
 

front_end/panels/network/components/components.ts

@@ -6,7 +6,6 @@ import * as DirectSocketConnectionView from './DirectSocketConnectionView.js';
 import * as EditableSpan from './EditableSpan.js';
 import * as HeaderSectionRow from './HeaderSectionRow.js';
 import * as RequestHeaderSection from './RequestHeaderSection.js';
-import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 import * as ResponseHeaderSection from './ResponseHeaderSection.js';
 
@@ -15,7 +14,6 @@ export {
   EditableSpan,
   HeaderSectionRow,
   RequestHeaderSection,
-  RequestHeadersView,
   RequestTrustTokensView,
   ResponseHeaderSection,
 };

front_end/panels/network/network.ts

@@ -18,6 +18,7 @@ import './NetworkSearchScope.js';
 import './NetworkWaterfallColumn.js';
 import './RequestCookiesView.js';
 import './RequestHTMLView.js';
+import './RequestHeadersView.js';
 import './RequestInitiatorView.js';
 import './RequestResponseView.js';
 import './RequestPreviewView.js';
@@ -44,6 +45,7 @@ import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
 import * as RequestConditionsDrawer from './RequestConditionsDrawer.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestDeviceBoundSessionsView from './RequestDeviceBoundSessionsView.js';
+import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
 import * as RequestPayloadView from './RequestPayloadView.js';
@@ -72,6 +74,7 @@ export {
   RequestConditionsDrawer,
   RequestCookiesView,
   RequestDeviceBoundSessionsView,
+  RequestHeadersView,
   RequestHTMLView,
   RequestInitiatorView,
   RequestPayloadView,