Allow modifying headers in the Network Panel

This CL allows the user to edit existing headers in the network
panel's headers view. The edits will be added to the header overrides,
such that upon refreshing the page, the response headers contain the
edited values.

Screencast: https://i.imgur.com/zlvzRyE.mp4

The edits are stored to disk and sent to the backend when the editable
element loses focus.

If there are multiple headers with the same name e.g. 'foo', these are
treated as a single unit. This means that when overriding them, all
'foo' headers are removed and replaced with the override(s) for 'foo'.

Bug: 1363132
Change-Id: Ib2ee738bfbe0974d12f0f854210afaa16f0a7259
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3879629
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>
diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts
index 89ac524..f45a812 100644
--- a/front_end/panels/network/NetworkLogView.ts
+++ b/front_end/panels/network/NetworkLogView.ts
@@ -1713,26 +1713,17 @@
   }
 
   async #handleCreateResponseHeaderOverrideClick(request: SDK.NetworkRequest.NetworkRequest): Promise<void> {
-    if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project()) {
-      await this.#revealHeaderOverrideEditor(request);
+    const networkPersistanceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
+    if (networkPersistanceManager.project()) {
+      await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
     } else {  // If folder for local overrides has not been provided yet
       UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(async(): Promise<void> => {
         await Sources.SourcesNavigator.OverridesNavigatorView.instance().setupNewWorkspace();
-        await this.#revealHeaderOverrideEditor(request);
+        await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
       });
     }
   }
 
-  async #revealHeaderOverrideEditor(request: SDK.NetworkRequest.NetworkRequest): Promise<void> {
-    const networkPersistanceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
-    const uiSourceCode = await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
-    if (uiSourceCode) {
-      const sourcesPanel = Sources.SourcesPanel.SourcesPanel.instance();
-      sourcesPanel.showUISourceCode(uiSourceCode);
-      sourcesPanel.revealInNavigator(uiSourceCode);
-    }
-  }
-
   private clearBrowserCache(): void {
     if (confirm(i18nString(UIStrings.areYouSureYouWantToClearBrowser))) {
       SDK.NetworkManager.MultitargetNetworkManager.instance().clearBrowserCache();