Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 17:25:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1421208 - Add color-sheme background to HTTP status code in Netmonitor. r=nchevobbe

Browse Source 
MozReview-Commit-ID: Kec4qq3ZTw6

--HG--
extra : rebase_source : aa72786a100dcec3e4ef40addf2deeec8922c378
This commit is contained in:
abhinav 2017-11-29 23:03:58 +05:30
parent 6abb89f294
commit 3bdb37e019
5 changed files with 62 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
devtools/client/netmonitor/src/assets/styles/RequestList.css
View File

@ -228,7 +228,33 @@
.requests-list-status-code {
margin-inline-start: 3px;
width: 3em;
padding: 0 2px;
border-radius: 3px;
font-family: var(--monospace-font-family);
}
.status-code[data-code^="1"] {
background-color: var(--status-code-color-1xx);
}
.status-code[data-code^="2"] {
background-color: var(--status-code-color-2xx);
}
.status-code[data-code^="3"] {
background-color: var(--status-code-color-3xx);
}
.status-code[data-code^="4"] {
background-color: var(--status-code-color-4xx);
}
.status-code[data-code^="5"] {
background-color: var(--status-code-color-5xx);
}
.status-code:not([data-code^="3"]) {
color: var(--theme-body-background);
}
.requests-list-status-icon {

20
devtools/client/netmonitor/src/assets/styles/httpi.css
View File

@ -17,23 +17,3 @@
@import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
.status-code[data-code^="1"] {
background-color: var(--status-code-color-1xx);
}
.status-code[data-code^="2"] {
background-color: var(--status-code-color-2xx);
}
.status-code[data-code^="3"] {
background-color: var(--status-code-color-3xx);
}
.status-code[data-code^="4"] {
background-color: var(--status-code-color-4xx);
}
.status-code[data-code^="5"] {
background-color: var(--status-code-color-5xx);
}

18
devtools/client/netmonitor/src/components/RequestListColumnStatus.js
View File

@ -54,10 +54,20 @@ class RequestListColumnStatus extends Component {
}
},
},
div({ className: "requests-list-status-icon", "data-code": code }),
div({ className: "requests-list-status-code" }, status)
)
);
/*
`data-code` refers to the status-code
`data-status-code` can be one of "cached", "service worker"
or the status-code itself
For example - if a resource is cached, `data-code` would be 200
and the `data-status-code` would be "cached"
*/
div({
className: "requests-list-status-code status-code",
"data-status-code": code,
"data-code": status,
}, status)
));
}
}

4
devtools/client/netmonitor/test/head.js
View File

@ -488,8 +488,8 @@ function* verifyRequestItemTarget(document, requestList, requestItem, method,
latency, "The tooltip latency is correct.");
if (status !== undefined) {
let value = target.querySelector(".requests-list-status-icon")
.getAttribute("data-code");
let value = target.querySelector(".requests-list-status-code")
.getAttribute("data-status-code");
let codeValue = target.querySelector(".requests-list-status-code").textContent;
let tooltip = target.querySelector(".requests-list-status").getAttribute("title");
info("Displayed status: " + value);

19
devtools/client/themes/webconsole.css
View File

@ -1020,6 +1020,25 @@ a.learn-more-link.webconsole-learn-more-link {
color: var(--theme-body-background);
}
.status-code[data-code^="1"] {
background-color: var(--status-code-color-1xx);
}
.status-code[data-code^="2"] {
background-color: var(--status-code-color-2xx);
}
.status-code[data-code^="3"] {
background-color: var(--status-code-color-3xx);
}
.status-code[data-code^="4"] {
background-color: var(--status-code-color-4xx);
}
.status-code[data-code^="5"] {
background-color: var(--status-code-color-5xx);
}
.network.message .network-info {
display: none;