From c8b4947fdca400e8978f949fba694f556ae06749 Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Fri, 8 Jul 2022 09:47:14 +0000 Subject: [PATCH] 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 --- .../assets/styles/HTTPCustomRequestPanel.css | 26 ++---- .../new-request/HTTPCustomRequestPanel.js | 83 +++++++++---------- 2 files changed, 48 insertions(+), 61 deletions(-) diff --git a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css index 2236e6b88fe1..1c201d7a8e4a 100644 --- a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css +++ b/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; diff --git a/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js b/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js index 81bab9785f34..17e21ea6e347 100644 --- a/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js +++ b/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 ) ) );