Add pencil buttons to initiate header override editing

Add a small button with a pencil icon next to each response header on
hover. Clicking this button does all of the following if necessary:
 - Prompt the user for a folder to store overrides in
 - Turn on the overrides setting
 - Create a '.headers' file to store header overrides in

The user ends up in the same panel which shows the response headers,
only that they are now editable to create header overrides.

Video: https://i.imgur.com/nSqcwLj.mp4

Bug: 1297533
Change-Id: I974b3314b504ef69d041495f291dcdee39c4db4d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4003964
Auto-Submit: Wolfgang Beyer <[email protected]>
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 8d3bf75..29ca825 100644
--- a/front_end/panels/network/NetworkLogView.ts
+++ b/front_end/panels/network/NetworkLogView.ts
@@ -1719,6 +1719,7 @@
         NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(request, {name: '', value: ''});
     const networkPersistanceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
     if (networkPersistanceManager.project()) {
+      Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled').set(true);
       await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
       await Common.Revealer.reveal(requestLocation);
     } else {  // If folder for local overrides has not been provided yet