Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 05:11:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Nicolas Chevobbe 2022-07-08 09:47:14 +00:00
parent 3ebc0a3b72
commit c8b4947fdc
2 changed files with 48 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
View File

@ -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;

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

@ -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
)
)
);