Bug 1586880 - fix custom request header hight and scroll bug, r=fvsch

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

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css

@@ -47,11 +47,18 @@
 }
 
 .network-monitor .custom-request-panel {
-  padding-left: 0;
-  padding-right: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.network-monitor .custom-request-panel > div:not(.custom-request) {
+.network-monitor .custom-request-panel .custom-request-panel-content{
+ flex: 1 1 auto;
+ height: auto;
+ overflow: auto;
+}
+
+.network-monitor .custom-request-panel-content > div:not(.custom-request) {
   margin-bottom: 12px;
   padding-left: 16px;
   padding-right: 16px;
@@ -65,7 +72,9 @@
 .network-monitor .custom-request .custom-request-button-container {
   display: flex;
   flex-wrap: wrap-reverse;
-  margin-left: 12px;
+  gap: 8px;
+  margin-block: 16px 12px;
+  margin-inline: 16px;
 }
 
 .network-monitor .custom-request-panel .custom-request-label {
@@ -103,13 +112,12 @@
   margin-right: 4px;
 }
 
-.network-monitor .custom-request .custom-header {
+.network-monitor .custom-header {
   border-bottom-width: 1px;
   border-style: solid;
   border-width: 0;
-  flex: 1 0 100%;
-  height: 24px;
-  margin-bottom: 16px;
+  flex: none;
+  height: calc(var(--theme-toolbar-height) + 1px);
   padding: 4px 16px;
 }
 

devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css

@@ -537,8 +537,6 @@
 
 .network-monitor .custom-request-panel {
   height: 100%;
-  overflow: auto;
-  padding: 0 4px;
   background-color: var(--theme-sidebar-background);
 }
 

devtools/client/netmonitor/src/components/CustomRequestPanel.js

@@ -203,135 +203,138 @@ class CustomRequestPanel extends Component {
     return div(
       { className: "custom-request-panel" },
       div(
-        { className: "tabpanel-summary-container custom-request" },
-        div(
-          { className: "custom-request-label custom-header" },
-          CUSTOM_NEW_REQUEST
-        ),
-        div(
-          { className: "custom-request-button-container" },
-          button(
-            {
-              className: "devtools-button",
-              id: "custom-request-close-button",
-              onClick: removeSelectedCustomRequest,
-            },
-            CUSTOM_CANCEL
-          ),
-          button(
-            {
-              className: "devtools-button",
-              id: "custom-request-send-button",
-              onClick: sendCustomRequest,
-            },
-            CUSTOM_SEND
-          )
-        )
+        { className: "custom-request-label custom-header" },
+        CUSTOM_NEW_REQUEST
       ),
       div(
-        {
-          className: "tabpanel-summary-container custom-method-and-url",
-          id: "custom-method-and-url",
-        },
-        label(
-          {
-            className: "custom-method-value-label custom-request-label",
-            htmlFor: "custom-method-value",
-          },
-          CUSTOM_NEW_REQUEST_METHOD_LABEL
-        ),
-        input({
-          className: "custom-method-value",
-          id: "custom-method-value",
-          onChange: evt =>
-            this.updateCustomRequestFields(evt, request, updateRequest),
-          onBlur: evt =>
-            this.updateCustomRequestFields(evt, request, updateRequest),
-          value: method,
-        }),
-        label(
-          {
-            className: "custom-url-value-label custom-request-label",
-            htmlFor: "custom-url-value",
-          },
-          CUSTOM_NEW_REQUEST_URL_LABEL
-        ),
-        input({
-          className: "custom-url-value",
-          id: "custom-url-value",
-          onChange: evt =>
-            this.updateCustomRequestFields(evt, request, updateRequest),
-          value: url || "http://",
-        })
-      ),
-      // Hide query field when there is no params
-      params
-        ? div(
-            {
-              className: "tabpanel-summary-container custom-section",
-              id: "custom-query",
-            },
-            label(
+        { className: "custom-request-panel-content" },
+        div(
+          { className: "tabpanel-summary-container custom-request" },
+          div(
+            { className: "custom-request-button-container" },
+            button(
               {
-                className: "custom-request-label",
-                htmlFor: "custom-query-value",
+                className: "devtools-button",
+                id: "custom-request-close-button",
+                onClick: removeSelectedCustomRequest,
               },
-              CUSTOM_QUERY
+              CUSTOM_CANCEL
             ),
-            textarea({
-              className: "tabpanel-summary-input",
-              id: "custom-query-value",
-              onChange: evt =>
-                this.updateCustomRequestFields(evt, request, updateRequest),
-              rows: 4,
-              value: params,
-              wrap: "off",
-            })
+            button(
+              {
+                className: "devtools-button",
+                id: "custom-request-send-button",
+                onClick: sendCustomRequest,
+              },
+              CUSTOM_SEND
+            )
           )
-        : null,
-      div(
-        {
-          id: "custom-headers",
-          className: "tabpanel-summary-container custom-section",
-        },
-        label(
-          {
-            className: "custom-request-label",
-            htmlFor: "custom-headers-value",
-          },
-          CUSTOM_HEADERS
         ),
-        textarea({
-          className: "tabpanel-summary-input",
-          id: "custom-headers-value",
-          onChange: evt =>
-            this.updateCustomRequestFields(evt, request, updateRequest),
-          rows: 8,
-          value: headers,
-          wrap: "off",
-        })
-      ),
-      div(
-        {
-          id: "custom-postdata",
-          className: "tabpanel-summary-container custom-section",
-        },
-        label(
+        div(
           {
-            className: "custom-request-label",
-            htmlFor: "custom-postdata-value",
+            className: "tabpanel-summary-container custom-method-and-url",
+            id: "custom-method-and-url",
           },
-          CUSTOM_POSTDATA
+          label(
+            {
+              className: "custom-method-value-label custom-request-label",
+              htmlFor: "custom-method-value",
+            },
+            CUSTOM_NEW_REQUEST_METHOD_LABEL
+          ),
+          input({
+            className: "custom-method-value",
+            id: "custom-method-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            onBlur: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            value: method,
+          }),
+          label(
+            {
+              className: "custom-url-value-label custom-request-label",
+              htmlFor: "custom-url-value",
+            },
+            CUSTOM_NEW_REQUEST_URL_LABEL
+          ),
+          input({
+            className: "custom-url-value",
+            id: "custom-url-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            value: url || "http://",
+          })
         ),
-        textarea({
-          className: "tabpanel-summary-input",
-          id: "custom-postdata-value",
-          onChange: evt =>
-            this.updateCustomRequestFields(evt, request, updateRequest),
-          rows: 6,
-          value: postData,
-          wrap: "off",
-        })
+        // Hide query field when there is no params
+        params
+          ? div(
+              {
+                className: "tabpanel-summary-container custom-section",
+                id: "custom-query",
+              },
+              label(
+                {
+                  className: "custom-request-label",
+                  htmlFor: "custom-query-value",
+                },
+                CUSTOM_QUERY
+              ),
+              textarea({
+                className: "tabpanel-summary-input",
+                id: "custom-query-value",
+                onChange: evt =>
+                  this.updateCustomRequestFields(evt, request, updateRequest),
+                rows: 4,
+                value: params,
+                wrap: "off",
+              })
+            )
+          : null,
+        div(
+          {
+            id: "custom-headers",
+            className: "tabpanel-summary-container custom-section",
+          },
+          label(
+            {
+              className: "custom-request-label",
+              htmlFor: "custom-headers-value",
+            },
+            CUSTOM_HEADERS
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "custom-headers-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            rows: 8,
+            value: headers,
+            wrap: "off",
+          })
+        ),
+        div(
+          {
+            id: "custom-postdata",
+            className: "tabpanel-summary-container custom-section",
+          },
+          label(
+            {
+              className: "custom-request-label",
+              htmlFor: "custom-postdata-value",
+            },
+            CUSTOM_POSTDATA
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "custom-postdata-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            rows: 6,
+            value: postData,
+            wrap: "off",
+          })
+        )
       )
     );
   }