chrome-devtools-frontend 1.0.920568 → 1.0.922044

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -42,6 +42,11 @@ const UIStrings = {
    * parameter.
    */
   invalidTriggerData: 'Invalid `trigger-data`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'event-source-trigger-data' query parameter.
+   */
+  invalidEventSourceTriggerData: 'Invalid `event-source-trigger-data`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -89,6 +94,10 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidEventSourceTriggerData));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -132,6 +141,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionTriggerDataTooLarge:
+      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
         this.appendRequestOrEmptyCell(element, details.request);

package/front_end/panels/issues/IssueAggregator.ts

@@ -271,7 +271,7 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   private aggregateIssueByStatus(
       aggregatedIssuesMap: Map<AggregationKey, AggregatedIssue>, issue: IssuesManager.Issue.Issue): AggregatedIssue {
-    const key = issue.code() as AggregationKey;
+    const key = issue.code() as unknown as AggregationKey;
     let aggregatedIssue = aggregatedIssuesMap.get(key);
     if (!aggregatedIssue) {
       aggregatedIssue = new AggregatedIssue(issue.code(), key);
@@ -310,7 +310,7 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   keyForIssue(issue: IssuesManager.Issue.Issue<string>): AggregationKey {
-    return issue.code() as AggregationKey;
+    return issue.code() as unknown as AggregationKey;
   }
 }
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Common from '../../core/common/common.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';
@@ -155,7 +156,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
+export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
@@ -470,6 +472,10 @@ export enum Events {
   PaintProfilerRequested = 'PaintProfilerRequested',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+};
+
 export const slowScrollRectNames = new Map([
   [SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable, i18nLazyString(UIStrings.nonFastScrollable)],
   [SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler, i18nLazyString(UIStrings.touchEventHandler)],

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -99,7 +99,8 @@ const uniformSamplerLocations = new Map<WebGLProgram, WebGLUniformLocation|null>
 
 const imageForTexture = new Map<WebGLTexture, HTMLImageElement>();
 
-export class Layers3DView extends UI.Widget.VBox implements LayerView {
+export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements LayerView {
   private readonly failBanner: UI.Widget.VBox;
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;
@@ -892,6 +893,11 @@ export enum Events {
   ScaleChanged = 'ScaleChanged',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+  [Events.ScaleChanged]: void,
+};
+
 export const enum ChromeTexture {
   Left = 0,
   Middle = 1,

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -75,7 +76,8 @@ let categories: {[x: string]: PaintProfilerCategory}|null = null;
 
 let logItemCategoriesMap: {[x: string]: PaintProfilerCategory}|null = null;
 
-export class PaintProfilerView extends UI.Widget.HBox {
+export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(
+    UI.Widget.HBox) {
   private canvasContainer: HTMLElement;
   private readonly progressBanner: HTMLElement;
   private pieChart: PerfUI.PieChart.PieChart;
@@ -422,6 +424,10 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export type EventTypes = {
+  [Events.WindowChanged]: void,
+};
+
 export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget {
   private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private log: SDK.PaintProfiler.PaintProfilerLogItem[];

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -317,15 +317,14 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     const item = items[0];
     if (item.kind === 'file') {
-      const entry = items[0].webkitGetAsEntry();
-      if (!entry.isFile) {
+      const file = items[0].getAsFile();
+      if (!file) {
         return;
       }
-      entry.file((file: Blob) => {
-        const reader = new FileReader();
-        reader.onload = (): void => this.loadedFromFile(reader.result as string);
-        reader.readAsText(file);
-      });
+
+      const reader = new FileReader();
+      reader.onload = (): void => this.loadedFromFile(reader.result as string);
+      reader.readAsText(file);
     }
   }
 

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -210,19 +210,23 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
     const titles = content.createChild('div', 'conditions-edit-row');
     const nameLabel = titles.createChild('div', 'conditions-list-text conditions-list-title');
     const nameStr = i18nString(UIStrings.profileName);
-    nameLabel.textContent = nameStr;
+    const nameLabelText = nameLabel.createChild('div', 'conditions-list-title-text');
+    nameLabelText.textContent = nameStr;
     titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
     const downloadLabel = titles.createChild('div', 'conditions-list-text');
     const downloadStr = i18nString(UIStrings.download);
-    downloadLabel.textContent = downloadStr;
+    const downloadLabelText = downloadLabel.createChild('div', 'conditions-list-title-text');
+    downloadLabelText.textContent = downloadStr;
     titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
     const uploadLabel = titles.createChild('div', 'conditions-list-text');
+    const uploadLabelText = uploadLabel.createChild('div', 'conditions-list-title-text');
     const uploadStr = i18nString(UIStrings.upload);
-    uploadLabel.textContent = uploadStr;
+    uploadLabelText.textContent = uploadStr;
     titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
     const latencyLabel = titles.createChild('div', 'conditions-list-text');
     const latencyStr = i18nString(UIStrings.latency);
-    latencyLabel.textContent = latencyStr;
+    const latencyLabelText = latencyLabel.createChild('div', 'conditions-list-title-text');
+    latencyLabelText.textContent = latencyStr;
 
     const fields = content.createChild('div', 'conditions-edit-row');
     const nameInput = editor.createInput('title', 'text', '', titleValidator);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -97,3 +97,7 @@
   right: 0;
   color: var(--color-text-disabled);
 }
+
+.editor-buttons {
+  margin-top: 10px;
+}

package/front_end/panels/network/NetworkItemView.ts

@@ -39,6 +39,7 @@ import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestHeadersView} from './RequestHeadersView.js';
+import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
 import {RequestResponseView} from './RequestResponseView.js';
@@ -53,7 +54,7 @@ const UIStrings = {
   /**
   *@description Text in Network Item View of the Network panel
   */
-  headersAndRequestBody: 'Headers and request body',
+  payload: 'Payload',
   /**
   *@description Text in Network Item View of the Network panel
   */
@@ -129,6 +130,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   private requestInternal: SDK.NetworkRequest.NetworkRequest;
   private readonly resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
   private readonly headersView: RequestHeadersView;
+  private payloadView: RequestPayloadView|null;
   private readonly responseView: RequestResponseView|undefined;
   private cookiesView: RequestCookiesView|null;
   private initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
@@ -146,7 +148,10 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.headersView = new RequestHeadersView(request);
     this.appendTab(
         NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
-        i18nString(UIStrings.headersAndRequestBody));
+        i18nString(UIStrings.headers));
+
+    this.payloadView = null;
+    this.maybeAppendPayloadPanel();
 
     this.addEventListener(UI.TabbedPane.Events.TabSelected, this.tabSelected, this);
 
@@ -201,7 +206,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   wasShown(): void {
     super.wasShown();
     this.requestInternal.addEventListener(
-        SDK.NetworkRequest.Events.RequestHeadersChanged, this.maybeAppendCookiesPanel, this);
+        SDK.NetworkRequest.Events.RequestHeadersChanged, this.requestHeadersChanged, this);
     this.requestInternal.addEventListener(
         SDK.NetworkRequest.Events.ResponseHeadersChanged, this.maybeAppendCookiesPanel, this);
     this.requestInternal.addEventListener(
@@ -221,13 +226,18 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
 
   willHide(): void {
     this.requestInternal.removeEventListener(
-        SDK.NetworkRequest.Events.RequestHeadersChanged, this.maybeAppendCookiesPanel, this);
+        SDK.NetworkRequest.Events.RequestHeadersChanged, this.requestHeadersChanged, this);
     this.requestInternal.removeEventListener(
         SDK.NetworkRequest.Events.ResponseHeadersChanged, this.maybeAppendCookiesPanel, this);
     this.requestInternal.removeEventListener(
         SDK.NetworkRequest.Events.TrustTokenResultAdded, this.maybeShowErrorIconInTrustTokenTabHeader, this);
   }
 
+  private async requestHeadersChanged(): Promise<void> {
+    this.maybeAppendCookiesPanel();
+    this.maybeAppendPayloadPanel();
+  }
+
   private maybeAppendCookiesPanel(): void {
     const cookiesPresent = this.requestInternal.hasRequestCookies() || this.requestInternal.responseCookies.length > 0;
     console.assert(cookiesPresent || !this.cookiesView, 'Cookies were introduced in headers and then removed!');
@@ -239,6 +249,16 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
+  private async maybeAppendPayloadPanel(): Promise<void> {
+    if (this.requestInternal.queryParameters || await this.requestInternal.requestFormData()) {
+      this.payloadView = new RequestPayloadView(this.requestInternal);
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.Payload, i18nString(UIStrings.payload), this.payloadView,
+          i18nString(UIStrings.payload), /* userGesture=*/ void 0,
+          /* isCloseable=*/ void 0, /* index=*/ 1);
+    }
+  }
+
   private maybeShowErrorIconInTrustTokenTabHeader(): void {
     const trustTokenResult = this.requestInternal.trustTokenOperationDoneEvent();
     if (trustTokenResult &&

package/front_end/panels/network/NetworkLogView.ts

@@ -748,12 +748,10 @@ export class NetworkLogView extends UI.Widget.VBox implements
     if (!items.length) {
       return;
     }
-    const entry = items[0].webkitGetAsEntry();
-    if (entry.isDirectory) {
-      return;
+    const file = items[0].getAsFile();
+    if (file) {
+      this.onLoadFromFile(file);
     }
-
-    entry.file(this.onLoadFromFile.bind(this));
   }
 
   async onLoadFromFile(file: File): Promise<void> {
@@ -1719,6 +1717,15 @@ export class NetworkLogView extends UI.Widget.VBox implements
     return true;
   }
 
+  private isValidUrl(url: string): boolean {
+    try {
+      new URL(url);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   private parseFilterQuery(query: string, invert: boolean): void {
     // A query string can have multiple filters, some of them regular
     // expressions, some not. Each one of those filters can be negated with a
@@ -1736,6 +1743,8 @@ export class NetworkLogView extends UI.Widget.VBox implements
             NetworkLogView.requestPathFilter.bind(null, new RegExp(defaultText, 'i'));
       } else if (descriptor.regex) {
         filter = NetworkLogView.requestPathFilter.bind(null, (regex as RegExp));
+      } else if (this.isValidUrl(text)) {
+        filter = NetworkLogView.requestUrlFilter.bind(null, text);
       } else {
         filter = NetworkLogView.requestPathFilter.bind(
             null, new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i'));

package/front_end/panels/network/NetworkPanel.ts

@@ -369,7 +369,8 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.throttlingSelect;
   }
 
-  private onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>):
+      void {
     const startTime = Math.max(this.calculator.minimumBoundary(), event.data.startTime / 1000);
     const endTime = Math.min(this.calculator.maximumBoundary(), event.data.endTime / 1000);
     this.networkLogView.setWindow(startTime, endTime);
@@ -766,18 +767,18 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     appendRevealItem.call(this, request);
   }
 
-  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.overviewPane.setWindowTimes(0, timestamp);
   }
 
-  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.networkOverview.selectFilmStripFrame(timestamp);
     this.networkLogView.selectFilmStripFrame(timestamp / 1000);
   }
 
-  private onFilmFrameExit(_event: Common.EventTarget.EventTargetEvent): void {
+  private onFilmFrameExit(): void {
     this.networkOverview.clearFilmStripFrame();
     this.networkLogView.clearFilmStripFrame();
   }

package/front_end/panels/network/RequestHeadersView.ts

@@ -41,7 +41,6 @@ import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as ClientVariations from '../../third_party/chromium/client-variations/client-variations.js';
-import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/objectPropertiesSection.css.js';
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -57,11 +56,6 @@ const UIStrings = {
   */
   general: 'General',
   /**
-  * @description Text in Request Headers View of the Network panel. This is a noun-phrase meaning the
-  * payload of a network request.
-  */
-  requestPayload: 'Request Payload',
-  /**
   *@description A context menu item in the Watch Expressions Sidebar Pane of the Sources panel and Network pane request.
   */
   copyValue: 'Copy value',
@@ -76,20 +70,8 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  unableToDecodeValue: '(unable to decode value)',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
   requestUrl: 'Request URL',
   /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  queryStringParameters: 'Query String Parameters',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  formData: 'Form Data',
-  /**
   *@description Text to show more content
   */
   showMore: 'Show more',
@@ -98,42 +80,10 @@ const UIStrings = {
   */
   viewParsed: 'View parsed',
   /**
-  *@description Text to show an item is empty
-  */
-  empty: '(empty)',
-  /**
   *@description Text for toggling the view of header data (e.g. query string parameters) from parsed to source in the headers tab
   */
   viewSource: 'View source',
   /**
-  * @description Text for toggling header data (e.g. query string parameters) from decoded to
-  * encoded in the headers tab or in the cookies preview. URL-encoded is a different data format for
-  * the same data, which the user sees when they click this command.
-  */
-  viewUrlEncoded: 'View URL-encoded',
-  /**
-  *@description Text for toggling header data (e.g. query string parameters) from encoded to decoded in the headers tab or in the cookies preview
-  */
-  viewDecoded: 'View decoded',
-  /**
-  *@description Text for toggling header data (e.g. query string parameters) from decoded to
-  * encoded in the headers tab or in the cookies preview. URL-encoded is a different data format for
-  * the same data, which the user sees when they click this command.
-  */
-  viewUrlEncodedL: 'view URL-encoded',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  viewDecodedL: 'view decoded',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  viewParsedL: 'view parsed',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  viewSourceL: 'view source',
-  /**
   *@description Text in Request Headers View of the Network panel
   */
   requestHeaders: 'Request Headers',
@@ -250,7 +200,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 export class RequestHeadersView extends UI.Widget.VBox {
   private request: SDK.NetworkRequest.NetworkRequest;
-  private decodeRequestParameters: boolean;
   private showRequestHeadersText: boolean;
   private showResponseHeadersText: boolean;
   private highlightedElement: UI.TreeOutline.TreeElement|null;
@@ -262,9 +211,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
   private readonly referrerPolicyItem: UI.TreeOutline.TreeElement;
   private readonly responseHeadersCategory: Category;
   private readonly requestHeadersCategory: Category;
-  private queryStringCategory: Category;
-  private formDataCategory: Category;
-  private requestPayloadCategory: Category;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
@@ -272,15 +218,9 @@ export class RequestHeadersView extends UI.Widget.VBox {
     this.element.classList.add('request-headers-view');
 
     this.request = request;
-    this.decodeRequestParameters = true;
     this.showRequestHeadersText = false;
     this.showResponseHeadersText = false;
 
-    const contentType = request.requestContentType();
-    if (contentType) {
-      this.decodeRequestParameters = Boolean(contentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i));
-    }
-
     this.highlightedElement = null;
 
     const root = new UI.TreeOutline.TreeOutlineInShadow();
@@ -306,9 +246,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
 
     this.responseHeadersCategory = new Category(root, 'responseHeaders', '');
     this.requestHeadersCategory = new Category(root, 'requestHeaders', '');
-    this.queryStringCategory = new Category(root, 'queryString', '');
-    this.formDataCategory = new Category(root, 'formData', '');
-    this.requestPayloadCategory = new Category(root, 'requestPayload', i18nString(UIStrings.requestPayload));
   }
 
   wasShown(): void {
@@ -320,7 +257,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
     this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refreshHTTPInformation, this);
 
     this.refreshURL();
-    this.refreshQueryString();
     this.refreshRequestHeaders();
     this.refreshResponseHeaders();
     this.refreshHTTPInformation();
@@ -426,75 +362,12 @@ export class RequestHeadersView extends UI.Widget.VBox {
     return fragment;
   }
 
-  private formatParameter(value: string, className: string, decodeParameters: boolean): Element {
-    let errorDecoding = false;
-
-    if (decodeParameters) {
-      value = value.replace(/\+/g, ' ');
-      if (value.indexOf('%') >= 0) {
-        try {
-          value = decodeURIComponent(value);
-        } catch (e) {
-          errorDecoding = true;
-        }
-      }
-    }
-    const div = document.createElement('div');
-    if (className) {
-      div.className = className;
-    }
-    if (value === '') {
-      div.classList.add('empty-value');
-    }
-    if (errorDecoding) {
-      div.createChild('span', 'header-decode-error').textContent = i18nString(UIStrings.unableToDecodeValue);
-    } else {
-      div.textContent = value;
-    }
-    return div;
-  }
-
   private refreshURL(): void {
     const requestURL = this.request.url();
     this.urlItem.title = this.formatHeader(i18nString(UIStrings.requestUrl), requestURL);
     this.addEntryContextMenuHandler(this.urlItem, requestURL);
   }
 
-  private refreshQueryString(): void {
-    const queryString = this.request.queryString();
-    const queryParameters = this.request.queryParameters;
-    this.queryStringCategory.hidden = !queryParameters;
-    if (queryParameters) {
-      this.refreshParams(
-          i18nString(UIStrings.queryStringParameters), queryParameters, queryString, this.queryStringCategory);
-    }
-  }
-
-  private async refreshFormData(): Promise<void> {
-    const formData = await this.request.requestFormData();
-    if (!formData) {
-      this.formDataCategory.hidden = true;
-      this.requestPayloadCategory.hidden = true;
-      return;
-    }
-
-    const formParameters = await this.request.formParameters();
-    if (formParameters) {
-      this.formDataCategory.hidden = false;
-      this.requestPayloadCategory.hidden = true;
-      this.refreshParams(i18nString(UIStrings.formData), formParameters, formData, this.formDataCategory);
-    } else {
-      this.requestPayloadCategory.hidden = false;
-      this.formDataCategory.hidden = true;
-      try {
-        const json = JSON.parse(formData);
-        this.refreshRequestJSONPayload(json, formData);
-      } catch (e) {
-        this.populateTreeElementWithSourceText(this.requestPayloadCategory, formData);
-      }
-    }
-  }
-
   private populateTreeElementWithSourceText(treeElement: UI.TreeOutline.TreeElement, sourceText: string|null): void {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -535,220 +408,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
     sourceTextElement.appendChild(showMoreButton);
   }
 
-  private refreshParams(
-      title: string, params: SDK.NetworkRequest.NameValue[]|null, sourceText: string|null,
-      paramsTreeElement: UI.TreeOutline.TreeElement): void {
-    paramsTreeElement.removeChildren();
-
-    paramsTreeElement.listItemElement.removeChildren();
-    paramsTreeElement.listItemElement.createChild('div', 'selection fill');
-    UI.UIUtils.createTextChild(paramsTreeElement.listItemElement, title);
-
-    const headerCount = document.createElement('span');
-    headerCount.classList.add('header-count');
-    const numberOfParams = params ? params.length : 0;
-    headerCount.textContent = `\xA0(${numberOfParams})`;
-    paramsTreeElement.listItemElement.appendChild(headerCount);
-
-    const shouldViewSource = viewSourceForItems.has(paramsTreeElement);
-    if (shouldViewSource) {
-      this.appendParamsSource(title, params, sourceText, paramsTreeElement);
-    } else {
-      this.appendParamsParsed(title, params, sourceText, paramsTreeElement);
-    }
-  }
-
-  private appendParamsSource(
-      title: string, params: SDK.NetworkRequest.NameValue[]|null, sourceText: string|null,
-      paramsTreeElement: UI.TreeOutline.TreeElement): void {
-    this.populateTreeElementWithSourceText(paramsTreeElement, sourceText);
-
-    const listItemElement = paramsTreeElement.listItemElement;
-
-    const viewParsed = function(this: RequestHeadersView, event: Event): void {
-      listItemElement.removeEventListener('contextmenu', viewParsedContextMenu);
-
-      viewSourceForItems.delete(paramsTreeElement);
-      this.refreshParams(title, params, sourceText, paramsTreeElement);
-      event.consume();
-    };
-
-    const viewParsedContextMenu = (event: Event): void => {
-      if (!paramsTreeElement.expanded) {
-        return;
-      }
-      const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      contextMenu.newSection().appendItem(i18nString(UIStrings.viewParsed), viewParsed.bind(this, event));
-      contextMenu.show();
-    };
-
-    const viewParsedButton = this.createViewSourceToggle(/* viewSource */ true, viewParsed.bind(this));
-    listItemElement.appendChild(viewParsedButton);
-
-    listItemElement.addEventListener('contextmenu', viewParsedContextMenu);
-  }
-
-  private appendParamsParsed(
-      title: string, params: SDK.NetworkRequest.NameValue[]|null, sourceText: string|null,
-      paramsTreeElement: UI.TreeOutline.TreeElement): void {
-    for (const param of params || []) {
-      const paramNameValue = document.createDocumentFragment();
-      if (param.name !== '') {
-        const name = this.formatParameter(param.name + ': ', 'header-name', this.decodeRequestParameters);
-        const value = this.formatParameter(param.value, 'header-value source-code', this.decodeRequestParameters);
-        paramNameValue.appendChild(name);
-        paramNameValue.createChild('span', 'header-separator');
-        paramNameValue.appendChild(value);
-      } else {
-        paramNameValue.appendChild(
-            this.formatParameter(i18nString(UIStrings.empty), 'empty-request-header', this.decodeRequestParameters));
-      }
-
-      const paramTreeElement = new UI.TreeOutline.TreeElement(paramNameValue);
-      this.addEntryContextMenuHandler(paramTreeElement, param.value);
-      paramsTreeElement.appendChild(paramTreeElement);
-    }
-
-    const listItemElement = paramsTreeElement.listItemElement;
-
-    const viewSource = function(this: RequestHeadersView, event: Event): void {
-      listItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
-
-      viewSourceForItems.add(paramsTreeElement);
-      this.refreshParams(title, params, sourceText, paramsTreeElement);
-      event.consume();
-    };
-
-    const toggleURLDecoding = function(this: RequestHeadersView, event: Event): void {
-      listItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
-      this.toggleURLDecoding(event);
-    };
-
-    const viewSourceContextMenu = (event: Event): void => {
-      if (!paramsTreeElement.expanded) {
-        return;
-      }
-      const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      const section = contextMenu.newSection();
-      section.appendItem(i18nString(UIStrings.viewSource), viewSource.bind(this, event));
-      const viewURLEncodedText =
-          this.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncoded) : i18nString(UIStrings.viewDecoded);
-      section.appendItem(viewURLEncodedText, toggleURLDecoding.bind(this, event));
-      contextMenu.show();
-    };
-
-    const viewSourceButton = this.createViewSourceToggle(/* viewSource */ false, viewSource.bind(this));
-    listItemElement.appendChild(viewSourceButton);
-
-    const toggleTitle =
-        this.decodeRequestParameters ? i18nString(UIStrings.viewUrlEncodedL) : i18nString(UIStrings.viewDecodedL);
-    const toggleButton = this.createToggleButton(toggleTitle);
-    toggleButton.addEventListener('click', toggleURLDecoding.bind(this), false);
-    listItemElement.appendChild(toggleButton);
-
-    listItemElement.addEventListener('contextmenu', viewSourceContextMenu);
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private refreshRequestJSONPayload(parsedObject: any, sourceText: string): void {
-    const rootListItem = this.requestPayloadCategory;
-    rootListItem.removeChildren();
-
-    const rootListItemElement = rootListItem.listItemElement;
-    rootListItemElement.removeChildren();
-    rootListItemElement.createChild('div', 'selection fill');
-    UI.UIUtils.createTextChild(rootListItemElement, this.requestPayloadCategory.title.toString());
-
-    if (viewSourceForItems.has(rootListItem)) {
-      this.appendJSONPayloadSource(rootListItem, parsedObject, sourceText);
-    } else {
-      this.appendJSONPayloadParsed(rootListItem, parsedObject, sourceText);
-    }
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private appendJSONPayloadSource(rootListItem: Category, parsedObject: any, sourceText: string): void {
-    const rootListItemElement = rootListItem.listItemElement;
-    this.populateTreeElementWithSourceText(rootListItem, sourceText);
-
-    const viewParsed = function(this: RequestHeadersView, event: Event): void {
-      rootListItemElement.removeEventListener('contextmenu', viewParsedContextMenu);
-      viewSourceForItems.delete(rootListItem);
-      this.refreshRequestJSONPayload(parsedObject, sourceText);
-      event.consume();
-    };
-
-    const viewParsedButton = this.createViewSourceToggle(/* viewSource */ true, viewParsed.bind(this));
-    rootListItemElement.appendChild(viewParsedButton);
-
-    const viewParsedContextMenu = (event: Event): void => {
-      if (!rootListItem.expanded) {
-        return;
-      }
-      const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      contextMenu.newSection().appendItem(i18nString(UIStrings.viewParsed), viewParsed.bind(this, event));
-      contextMenu.show();
-    };
-
-    rootListItemElement.addEventListener('contextmenu', viewParsedContextMenu);
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // 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);
-    section.title = (object.description as string);
-    section.expand();
-    // `editable` is not a valid property for `ObjectUI.ObjectPropertiesSection.RootElement`. Only for
-    // `ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection`. We do not know if this assignment is
-    // safe to delete.
-    // @ts-ignore
-    section.editable = false;
-    rootListItem.childrenListElement.classList.add('source-code', 'object-properties-section');
-
-    rootListItem.appendChild(section);
-    const rootListItemElement = rootListItem.listItemElement;
-
-    const viewSource = function(this: RequestHeadersView, event: Event): void {
-      rootListItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
-
-      viewSourceForItems.add(rootListItem);
-      this.refreshRequestJSONPayload(parsedObject, sourceText);
-      event.consume();
-    };
-
-    const viewSourceContextMenu = (event: Event): void => {
-      if (!rootListItem.expanded) {
-        return;
-      }
-      const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      contextMenu.newSection().appendItem(i18nString(UIStrings.viewSource), viewSource.bind(this, event));
-      contextMenu.show();
-    };
-
-    const viewSourceButton = this.createViewSourceToggle(/* viewSource */ false, viewSource.bind(this));
-    rootListItemElement.appendChild(viewSourceButton);
-
-    rootListItemElement.addEventListener('contextmenu', viewSourceContextMenu);
-  }
-
-  private createViewSourceToggle(viewSource: boolean, handler: (arg0: Event) => void): Element {
-    const viewSourceToggleTitle = viewSource ? i18nString(UIStrings.viewParsedL) : i18nString(UIStrings.viewSourceL);
-    const viewSourceToggleButton = this.createToggleButton(viewSourceToggleTitle);
-    viewSourceToggleButton.addEventListener('click', handler, false);
-    return viewSourceToggleButton;
-  }
-
-  private toggleURLDecoding(event: Event): void {
-    this.decodeRequestParameters = !this.decodeRequestParameters;
-    this.refreshQueryString();
-    this.refreshFormData();
-    event.consume();
-  }
-
   private refreshRequestHeaders(): void {
     const treeElement = this.requestHeadersCategory;
     const headers = this.request.requestHeaders().slice();
@@ -768,8 +427,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
       toggleButton.addEventListener('click', this.toggleRequestHeadersText.bind(this), false);
       treeElement.listItemElement.appendChild(toggleButton);
     }
-
-    this.refreshFormData();
   }
 
   private refreshResponseHeaders(): void {
@@ -1058,8 +715,6 @@ export class RequestHeadersView extends UI.Widget.VBox {
   }
 }
 
-const viewSourceForItems = new WeakSet<Category|UI.TreeOutline.TreeElement>();
-
 const headerNames = new WeakMap<UI.TreeOutline.TreeElement, string>();
 
 export class Category extends UI.TreeOutline.TreeElement {