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 {
+.network-monitor .http-custom-request-button-container {
-  display: block;
-  padding: 0;
-}
-
-.network-monitor .http-custom-request .http-custom-request-button-container {
   display: flex;
   justify-content: end;
   flex-wrap: wrap-reverse;
   gap: 8px;
-  margin-block: 16px 12px;
+  padding: 10px 16px;
-  margin-inline: 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,10 +455,9 @@ class HTTPCustomRequestPanel extends Component {
             value: postBody,
             wrap: "off",
           })
+        )
       ),
-        div(
+      footer(
-          { className: "tabpanel-summary-container http-custom-request" },
-          div(
         { className: "http-custom-request-button-container" },
         button(
           {
@@ -498,8 +497,6 @@ class HTTPCustomRequestPanel extends Component {
           CUSTOM_SEND
         )
       )
-        )
-      )
     );
   }
 }