/packages/chrome-devtools-patches/patches/0006-All-about-the-network-tab.patch

From 1729d533ea8866ee71a5e2170253f7cd6f850e0c Mon Sep 17 00:00:00 2001
From: Workers DevProd <workers-devprod@cloudflare.com>
Date: Fri, 25 Oct 2024 16:05:12 +0100
Subject: [PATCH 6/8] All about the network tab!

* Display the _content_ of responses (using cfResponse.body, a Cloudflare-specific extension)

* Enable the network tab for the js_app type

* Hide unsupported UI (cache disabling & network throttling)
---
 front_end/core/sdk/NetworkManager.ts     |  8 ++++++-
 front_end/entrypoints/js_app/js_app.ts   |  1 +
 front_end/panels/network/NetworkPanel.ts | 27 ------------------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/front_end/core/sdk/NetworkManager.ts b/front_end/core/sdk/NetworkManager.ts
index 1e50c6329f..756679235b 100644
--- a/front_end/core/sdk/NetworkManager.ts
+++ b/front_end/core/sdk/NetworkManager.ts
@@ -34,6 +34,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
+import { ContentData } from '../../models/text_utils/ContentData.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import type {Serializer} from '../common/Settings.js';
@@ -846,7 +847,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     this.updateNetworkRequest(networkRequest);
   }
 
-  loadingFinished({requestId, timestamp: finishTime, encodedDataLength}: Protocol.Network.LoadingFinishedEvent): void {
+  loadingFinished({requestId, timestamp: finishTime, encodedDataLength, cfResponse}: Protocol.Network.LoadingFinishedEvent & { cfResponse?: Omit<Protocol.Network.GetResponseBodyResponse, 'getError'> }): void {
     let networkRequest: NetworkRequest|null|undefined = this.#requestsById.get(requestId);
     if (!networkRequest) {
       networkRequest = this.maybeAdoptMainResourceRequest(requestId);
@@ -855,6 +856,11 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       return;
     }
     this.getExtraInfoBuilder(requestId).finished();
+    if (cfResponse !== undefined) {
+      networkRequest.setContentDataProvider(async () => {
+        return new ContentData(cfResponse.body, cfResponse.base64Encoded, networkRequest.mimeType);
+      });
+    }
     this.finishNetworkRequest(networkRequest, finishTime, encodedDataLength);
     this.#manager.dispatchEventToListeners(Events.LoadingFinished, networkRequest);
   }
diff --git a/front_end/entrypoints/js_app/js_app.ts b/front_end/entrypoints/js_app/js_app.ts
index 893ac3533f..937e646ab5 100644
--- a/front_end/entrypoints/js_app/js_app.ts
+++ b/front_end/entrypoints/js_app/js_app.ts
@@ -4,6 +4,7 @@
 
 import '../shell/shell.js';
 import '../../panels/js_timeline/js_timeline-meta.js';
+import '../../panels/network/network-meta.js';
 import '../../panels/mobile_throttling/mobile_throttling-meta.js';
 import '../../panels/network/network-meta.js';
 
diff --git a/front_end/panels/network/NetworkPanel.ts b/front_end/panels/network/NetworkPanel.ts
index f70065800e..ac1316662b 100644
--- a/front_end/panels/network/NetworkPanel.ts
+++ b/front_end/panels/network/NetworkPanel.ts
@@ -76,14 +76,6 @@ const UIStrings = {
    *@description Text to preserve the log after refreshing
    */
   preserveLog: 'Preserve log',
-  /**
-   *@description Text to disable cache while DevTools is open
-   */
-  disableCacheWhileDevtoolsIsOpen: 'Disable cache while DevTools is open',
-  /**
-   *@description Text in Network Config View of the Network panel
-   */
-  disableCache: 'Disable cache',
   /**
    *@description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in network panel of the network panel
    */
@@ -181,10 +173,6 @@ const UIStrings = {
    *@description Text in Network Panel that is displayed when frames are being fetched.
    */
   fetchingFrames: 'Fetching frames…',
-  /**
-   * @description Text of a button in the Network panel's toolbar that open Network Conditions panel in the drawer.
-   */
-  moreNetworkConditions: 'More network conditions…',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -456,21 +444,6 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
         this.preserveLogSetting, i18nString(UIStrings.doNotClearLogOnPageReload), i18nString(UIStrings.preserveLog)));
 
-    this.panelToolbar.appendSeparator();
-    const disableCacheCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
-        i18nString(UIStrings.disableCacheWhileDevtoolsIsOpen), i18nString(UIStrings.disableCache));
-    this.panelToolbar.appendToolbarItem(disableCacheCheckbox);
-
-    this.panelToolbar.appendToolbarItem(this.throttlingSelect);
-
-    const networkConditionsButton = new UI.Toolbar.ToolbarButton(
-        i18nString(UIStrings.moreNetworkConditions), 'network-settings', undefined, 'network-conditions');
-    networkConditionsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-      void UI.ViewManager.ViewManager.instance().showView('network.config');
-    }, this);
-    this.panelToolbar.appendToolbarItem(networkConditionsButton);
-
     this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.progressBarContainer));
     this.rightToolbar.appendSeparator();
     this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingToggle(
-- 
2.39.5 (Apple Git-154)