Bug 1759458 - [devtools] Make Netmonitor Clear/Send buttons always visible. r=bomsy.

The container is turned into a footer and moved outside of
its current parent so it always stick to the bottom.
CSS was tweaked to keep it nice.

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

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

@@ -167,18 +167,13 @@
   background-color: var(--theme-selection-background);
 }
 
-.network-monitor .http-custom-request {
-  display: block;
-  padding: 0;
-}
-
-.network-monitor .http-custom-request .http-custom-request-button-container {
+.network-monitor .http-custom-request-button-container {
   display: flex;
   justify-content: end;
   flex-wrap: wrap-reverse;
   gap: 8px;
-  margin-block: 16px 12px;
-  margin-inline: 16px;
+  padding: 10px 16px;
+  border-block-start: 1px solid var(--theme-splitter-color);
 }
 
 .network-monitor .http-custom-request-panel .http-custom-request-label {
@@ -186,35 +181,30 @@
   white-space: nowrap;
 }
 
-.network-monitor .http-custom-request button {
+.network-monitor .http-custom-request-button-container button {
   height: 24px;
-  margin-bottom: 4px;
   padding-inline: 8px;
   width: auto;
 }
 
-.network-monitor .http-custom-request button:focus {
+.network-monitor .http-custom-request-button-container button:focus {
   box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
   0 0 0 4px rgba(10,132,255,0.3)
 }
 
-.network-monitor .http-custom-request #http-custom-request-send-button {
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button {
   background-color: var(--blue-60);
   color: white;
 }
 
-.network-monitor .http-custom-request #http-custom-request-send-button:active {
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:active {
   background-color: var(--blue-80);
 }
 
-.network-monitor .http-custom-request #http-custom-request-send-button:hover {
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:hover {
   background-color: var(--blue-70);
 }
 
-.network-monitor .http-custom-request #http-custom-request-clear-button {
-  margin-inline-end: 4px;
-}
-
 .network-monitor .http-custom-header {
   border-bottom-width: 1px;
   border-style: solid;

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

@@ -27,7 +27,7 @@ const {
 const InputMap = createFactory(
   require("devtools/client/netmonitor/src/components/new-request/InputMap")
 );
-const { button, div, label, textarea, select, option } = dom;
+const { button, div, footer, label, textarea, select, option } = dom;
 
 const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.newRequestHeaders");
 const CUSTOM_NEW_REQUEST_URL_LABEL = L10N.getStr(
@@ -455,49 +455,46 @@ class HTTPCustomRequestPanel extends Component {
             value: postBody,
             wrap: "off",
           })
+        )
+      ),
+      footer(
+        { className: "http-custom-request-button-container" },
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-clear-button",
+            onClick: this.handleClear,
+          },
+          CUSTOM_CLEAR
         ),
-        div(
-          { className: "tabpanel-summary-container http-custom-request" },
-          div(
-            { className: "http-custom-request-button-container" },
-            button(
-              {
-                className: "devtools-button",
-                id: "http-custom-request-clear-button",
-                onClick: this.handleClear,
-              },
-              CUSTOM_CLEAR
-            ),
-            button(
-              {
-                className: "devtools-button",
-                id: "http-custom-request-send-button",
-                disabled: !this.state.url || !this.state.method,
-                onClick: () => {
-                  const customRequestDetails = {
-                    ...this.state,
-                    cause: this.props.request?.cause,
-                    urlQueryParams: urlQueryParams.map(
-                      ({ checked, ...params }) => params
-                    ),
-                    headers: headers
-                      .filter(({ checked }) => checked)
-                      .map(({ checked, ...headersValues }) => headersValues),
-                  };
-                  if (postBody) {
-                    customRequestDetails.requestPostData = {
-                      postData: {
-                        text: postBody,
-                      },
-                    };
-                  }
-                  delete customRequestDetails.postBody;
-                  sendCustomRequest(customRequestDetails);
-                },
-              },
-              CUSTOM_SEND
-            )
-          )
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-send-button",
+            disabled: !this.state.url || !this.state.method,
+            onClick: () => {
+              const customRequestDetails = {
+                ...this.state,
+                cause: this.props.request?.cause,
+                urlQueryParams: urlQueryParams.map(
+                  ({ checked, ...params }) => params
+                ),
+                headers: headers
+                  .filter(({ checked }) => checked)
+                  .map(({ checked, ...headersValues }) => headersValues),
+              };
+              if (postBody) {
+                customRequestDetails.requestPostData = {
+                  postData: {
+                    text: postBody,
+                  },
+                };
+              }
+              delete customRequestDetails.postBody;
+              sendCustomRequest(customRequestDetails);
+            },
+          },
+          CUSTOM_SEND
         )
       )
     );