Bug 1745413 - [devtools] Allows user to see a list of (read only) headers in New Custom Request Panel r=bomsy

Differential Revision: https://phabricator.services.mozilla.com/D137684

devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js

@@ -41,6 +41,31 @@ const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.urlParameters");
 const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
 const CUSTOM_CLEAR = L10N.getStr("netmonitor.custom.clear");
 
+const FIREFOX_DEFAULT_HEADERS = [
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Connection",
+  "Content-Length",
+  "Cookie",
+  "Cookie2",
+  "Date",
+  "DNT",
+  "Expect",
+  "Feature-Policy",
+  "Host",
+  "Keep-Alive",
+  "Origin",
+  "Proxy-",
+  "Sec-",
+  "Referer",
+  "TE",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade",
+  "Via",
+];
 /*
  * HTTP Custom request panel component
  * A network request panel which enables creating and sending new requests
@@ -80,13 +105,26 @@ class HTTPCustomRequestPanel extends Component {
         request?.url
       ),
       headers: request
-        ? request.requestHeaders.headers.map(({ name, value }) => {
+        ? request.requestHeaders.headers
+            .map(({ name, value }) => {
               return {
                 name,
                 value,
                 checked: true,
+                disabled: !!FIREFOX_DEFAULT_HEADERS.find(i =>
+                  name.startsWith(i)
+                ),
               };
             })
+            .sort((a, b) => {
+              if (a.disabled && !b.disabled) {
+                return -1;
+              }
+              if (!a.disabled && b.disabled) {
+                return 1;
+              }
+              return 0;
+            })
         : [],
       requestPostData: request
         ? request.requestPostData?.postData.text || ""
@@ -151,7 +189,10 @@ class HTTPCustomRequestPanel extends Component {
 
   addInputMapItem(stateName, name, value) {
     this.setState({
-      [stateName]: [...this.state[stateName], { name, value, checked: true }],
+      [stateName]: [
+        ...this.state[stateName],
+        { name, value, checked: true, disabled: false },
+      ],
     });
   }
 

devtools/client/netmonitor/src/components/new-request/InputMap.js

@@ -28,8 +28,9 @@ class InputMap extends Component {
     return {
       list: PropTypes.arrayOf(
         PropTypes.shape({
-          name: PropTypes.string,
-          value: PropTypes.string,
+          name: PropTypes.string.isRequired,
+          value: PropTypes.string.isRequired,
+          disabled: PropTypes.bool,
         })
       ).isRequired,
       onUpdate: PropTypes.func,
@@ -114,6 +115,7 @@ class InputMap extends Component {
             type: "checkbox",
             onChange: () => {},
             checked: item.checked,
+            disabled: !!item.disabled,
             wrap: "off",
           }),
           textarea({
@@ -121,6 +123,7 @@ class InputMap extends Component {
             id: "http-custom-input-name",
             name: `name-${index}`,
             value: item.name,
+            disabled: !!item.disabled,
             onChange: event => {
               onUpdate(event);
               this.props.resizeable && updateTextareaRows(event.target);
@@ -132,6 +135,7 @@ class InputMap extends Component {
             id: "http-custom-input-value",
             name: `value-${index}`,
             placeholder: "value",
+            disabled: !!item.disabled,
             onChange: event => {
               onUpdate(event);
               this.props.resizeable && updateTextareaRows(event.target);
@@ -139,6 +143,7 @@ class InputMap extends Component {
             value: item.value,
             rows: 1,
           }),
+          !item.disabled &&
             onDelete &&
             button({
               className: "http-custom-delete-button",