Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* Request list empty panel */
.request-list-empty-notice {
margin: 0;
flex: 1;
overflow-x: hidden;
}
.empty-notice-element {
padding-top: 12px;
padding-inline: 12px;
font-size: 1.2rem;
}
.notice-perf-message {
margin-top: 2px;
align-items: center;
}
.requests-list-perf-notice-button {
min-width: 30px;
min-height: 26px;
margin: 0 5px;
vertical-align: middle;
}
.requests-list-perf-notice-button::before {
background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg);
}
.requests-list-slow-button {
width: 22px;
position: absolute;
right: 0;
inset-block: 0;
cursor: pointer;
/* The slow icon is absolutely positioned and can can overlap the column text.
This background gradient is added on its left side so the icon
has a solid background and the text slowly fades before the icon. */
background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%);
padding-inline: 5px 30px;
&::before {
content: "";
width: 12px;
height: 100%;
display: inline-block;
background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg);
background-repeat: no-repeat;
background-position: right center;
padding-inline-end: 14px;
fill: var(--theme-icon-dimmed-color);
-moz-context-properties: fill;
}
:root[forced-colors-active] & {
/* In High Contrast Mode, the background gradient is removed, so the icon would
overlap the text underneath, making it unreadable.
To fix this, we set a plain solid color on the icon in HCM, which also needed
some dimensions tweaks to make it look nice. */
background-color: Canvas;
padding-inline: 5px;
&::before {
color: CanvasText;
padding: 0;
}
}
}
.request-list-item:not(.selected).odd .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%);
}
.request-list-item:not(.selected):hover .requests-list-slow-button,
.request-list-item:not(.selected).odd:hover .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%);
}
.request-list-item.selected .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%);
:root[forced-colors-active] & {
background-color: var(--theme-selection-background);
&::before {
color: var(--theme-selection-color);
}
}
}
.request-list-item.selected .requests-list-slow-button::before {
fill: currentColor;
}
.requests-list-reload-notice-button {
font-size: inherit;
min-height: 26px;
margin: 0 5px;
}
/* Requests list table */
.request-list-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--theme-body-color);
}
.requests-list-scroll {
overflow-x: hidden;
overflow-y: auto;
width: 100% !important;
}
.requests-list-scroll table {
/* Disable overflow-anchor for only child in the scrollable element */
overflow-anchor: none;
}
.requests-list-anchor {
overflow-anchor: auto;
opacity: 0;
height: 1px;
}
.requests-list-table,
.message-list-table {
/* Reset default browser style of <table> */
border-spacing: 0;
width: 100%;
/* The layout must be fixed for resizing of columns to work.
The layout is based on the first row.
Set the width of those cells, and the rest of the table follows. */
table-layout: fixed;
}
.requests-list-table {
/* Clip column resizers when they are higher than the table. */
overflow: hidden;
}
.requests-list-column,
.message-list-column {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
/* Reset default browser style of <td> */
padding: 0;
/* Prevent text selection because it's often invisible (blue on blue),
* it conflicts easily with existing click and double-click actions,
* and we already have several Copy and Export options. */
user-select: none;
}
.requests-list-column {
position: relative;
}
.requests-list-column > * {
display: inline-block;
}
/* Requests list headers */
.requests-list-headers-group,
.message-list-headers-group {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.requests-list-headers,
.message-list-headers {
padding: 0;
color: var(--theme-body-color);
background-color: var(--theme-toolbar-background);
}
.requests-list-headers th,
.message-list-headers th {
height: calc(var(--theme-toolbar-height) + 1px);
border-bottom: 1px solid var(--theme-splitter-color);
}
.requests-list-headers th {
/* Allow column-resizers to be visible beyond the headers. */
overflow: visible;
}
.requests-list-headers th:not(:first-child),
.message-list-headers th:not(:first-child) {
border-inline-start: 1px solid var(--theme-splitter-color);
}
.requests-list-header-button,
.message-list-header-button {
width: 100%;
min-height: var(--theme-toolbar-height);
border-width: 0;
padding-block: 1px;
padding-inline-start: 5px;
padding-inline-end: 4px;
text-align: start;
color: inherit;
background-color: transparent;
}
.requests-list-header-button::-moz-focus-inner,
.message-list-header-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.requests-list-header-button:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.requests-list-header-button > .button-text,
.message-list-header-button > .button-text {
display: inline-block;
vertical-align: middle;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.requests-list-header-button > .button-icon,
.message-list-header-button > .button-icon {
/* display icon only when column sorted otherwise display:none */
display: none;
width: 7px;
height: 4px;
margin-inline: 3px 6px;
vertical-align: middle;
}
.requests-list-header-button[data-sorted] > .button-icon {
/* display icon only when column sorted */
display: inline-block;
}
.requests-list-header-button[data-sorted] > .button-text {
/* when sorted - adjust width to fit the icon inside the button */
width: calc(100% - 11px);
}
.requests-list-header-button[data-sorted=ascending] > .button-icon {
background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
}
.requests-list-header-button[data-sorted=descending] > .button-icon {
background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
}
.requests-list-header-button[data-sorted],
.requests-list-header-button[data-sorted]:hover {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.requests-list-header-button[data-sorted],
.requests-list-column[data-active] + .requests-list-column .requests-list-header-button {
border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
}
/* Requests list headers column-resizer */
.requests-list-headers .column-resizer {
z-index: 1000;
cursor: ew-resize;
margin-inline-start: -3px;
width: 7px;
min-height: 23px;
position: absolute;
background-color: transparent;
/* Extend column-resizers beyond table header to allow resizing on
* column borders as well.*/
height: 100vh;
}
/**
* Make sure headers are not processing any mouse
* events. This is good for performance during dragging.
*/
.requests-list-headers.dragging {
pointer-events: none;
}
/* Requests list column */
/* Status column */
.requests-list-status {
/* Don't ellipsize status codes */
text-overflow: initial;
}
.requests-list-status-code.status-code-blocked {
/* Improve the icon's vertical alignment by matching the row height. */
display: inline-flex;
vertical-align: top;
align-items: center;
justify-content: center;
height: 24px;
}
.requests-security-icon-group {
display: inline-flex;
vertical-align: top;
align-items: center;
height: 24px;
/* Icons are drawn as backgrounds on a 16x16 element but are often smaller
* (e.g. 12x12). Shift them a few pixels to align with the header text. */
margin-inline-start: -3px;
margin-inline-end: 2px;
}
.requests-security-state-icon {
display: inline-block;
height: 16px;
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: fill, stroke;
fill: var(--theme-icon-dimmed-color);
stroke: var(--theme-icon-color);
}
.security-state-secure {
background-image: url(chrome://devtools/skin/images/security-state-secure.svg);
width: 16px;
}
.security-state-weak {
/* Shift icon to the right (in both LTR and RTL directions) to align the
* padlock shape with other padlock icons. */
position: relative;
width: 16px;
left: 2px;
background-image: url(chrome://devtools/skin/images/security-state-weak.svg);
stroke: var(--theme-icon-warning-color);
}
.security-state-insecure {
background-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
width: 16px;
stroke: var(--theme-icon-error-color);
}
.security-state-broken {
width: 16px;
fill: var(--theme-icon-error-color);
}
.tracking-resource {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: var(--theme-icon-dimmed-color);
}
.request-list-item.selected .status-code:not(.status-code-blocked) {
outline: 1px solid currentColor;
}
.request-list-item.selected .status-code-blocked,
.request-list-item.selected .requests-security-state-icon,
.request-list-item.selected .tracking-resource {
fill: currentColor;
stroke: currentColor;
color: var(--theme-selection-color);
}
.theme-dark .request-list-item.selected .status-code-blocked,
.theme-dark .request-list-item.selected .requests-security-state-icon,
.theme-dark .request-list-item.selected .tracking-resource {
color: rgba(255, 255, 255, 0.75);
}
.request-list-item .requests-list-column,
.message-list-item .message-list-column {
padding-inline-start: 5px;
/* Column text should not touch the next column's border.
We could use a 5px space to be symmetrical, but we're using
text-overflow:ellipsis which makes that padding look wider in most cases,
and a smaller padding saves space for content. */
padding-inline-end: 4px;
}
.request-list-item .requests-list-column:not(:first-child),
.message-list-item .message-list-column:not(:first-child) {
border-inline-start: 1px solid var(--table-splitter-color);
}
.request-list-item:hover .requests-list-column,
.request-list-item.selected .requests-list-column,
.message-list-item:hover .message-list-column,
.message-list-item.selected .message-list-column {
border-inline-start-color: transparent;
}
.request-list-item .requests-list-waterfall {
padding-inline-start: 0;
}
.requests-list-cause-stack {
display: inline-block;
background-color: var(--theme-text-color-alt);
color: var(--theme-body-background);
font-size: 8px;
font-weight: bold;
line-height: 10px;
border-radius: 3px;
padding: 0 2px;
margin: 0;
margin-inline-end: 3px;
}
/* Waterfall column */
.requests-list-waterfall {
background-repeat: repeat-y;
background-position: left center;
overflow: visible;
/* Background created on a <canvas> in js. */
/* @see devtools/client/netmonitor/src/widgets/WaterfallBackground.js */
background-image: -moz-element(#waterfall-background);
:root[forced-colors-active] & {
/* Make sure that the background is visible in High Contrast Mode */
forced-color-adjust: none;
& > * {
/* and reset forced-color-adjust on children so we respect HCM */
forced-color-adjust: auto;
}
}
}
.requests-list-waterfall:dir(rtl) {
background-position: right center;
}
.requests-list-waterfall > .requests-list-header-button {
padding: 0;
}
.requests-list-waterfall > .requests-list-header-button > .button-text {
width: auto;
}
.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) {
padding-inline-start: 16px;
}
.requests-list-timings-division {
display: inline-block;
padding-inline-start: 4px;
font-size: 75%;
pointer-events: none;
text-align: start;
}
:root[platform="win"] .requests-list-timings-division {
padding-top: 1px;
font-size: 90%;
}
.requests-list-timings-division:not(:first-child) {
border-inline-start: 1px dashed;
}
.requests-list-timings-division:dir(ltr) {
transform-origin: left center;
}
.requests-list-timings-division:dir(rtl) {
transform-origin: right center;
}
.theme-dark .requests-list-timings-division {
border-inline-start-color: #5a6169 !important;
}
.theme-light .requests-list-timings-division {
border-inline-start-color: #585959 !important;
}
.requests-list-timings-division[data-division-scale=second],
.requests-list-timings-division[data-division-scale=minute] {
font-weight: 600;
}
.requests-list-timings {
display: flex;
align-items: center;
}
.requests-list-timings:dir(ltr) {
transform-origin: left center;
}
.requests-list-timings:dir(rtl) {
transform-origin: right center;
}
.requests-list-timings-box {
display: inline-block;
height: 12px;
}
.requests-list-timings-box.filler {
background-color: var(--theme-splitter-color);
}
.requests-list-timings-box.blocked {
background-color: var(--timing-blocked-color);
}
.requests-list-timings-box.dns {
background-color: var(--timing-dns-color);
}
.requests-list-timings-box.connect {
background-color: var(--timing-connect-color);
}
.requests-list-timings-box.ssl {
background-color: var(--timing-ssl-color);
}
.requests-list-timings-box.send {
background-color: var(--timing-send-color);
}
.requests-list-timings-box.wait {
background-color: var(--timing-wait-color);
}
.requests-list-timings-box.receive {
background-color: var(--timing-receive-color);
}
.requests-list-timings-total {
display: inline-block;
padding-inline-start: 4px;
font-size: 80%;
font-weight: 600;
white-space: nowrap;
text-align: left;
}
.requests-list-timings-total:dir(ltr) {
transform-origin: left center;
}
.requests-list-timings-total:dir(rtl) {
transform-origin: right center;
}
/* Request list item */
.request-list-item,
.message-list-item {
height: 24px;
line-height: 24px;
}
.request-list-item:not(.selected).odd,
.message-list-item:not(.selected).odd {
background-color: var(--table-zebra-background);
}
.request-list-item:not(.selected):hover,
.message-list-item:not(.selected):hover {
background-color: var(--table-selection-background-hover);
}
/*
* Dim requests served from cache when High Contrast Mode is not enabled
*/
:root:not([forced-colors-active]) .request-list-item:not(.selected, :hover).fromCache {
--table-icon-opacity: 0.7;
color: var(--theme-text-color-alt);
}
/*
* Apply partial opacity to specific icons and icon-like elements
* (e.g. for cached requests)
*/
.requests-security-icon-group,
.requests-list-status-code:not([data-code^="3"]) {
opacity: var(--table-icon-opacity, 1);
}
/*
* Showing blocked requests in red should always have priority
* except when the request is selected.
*/
.request-list-item:not(.selected).blocked {
color: var(--timing-blocked-color) !important;
}
/*
* Put after .request-list-item.blocked to avoid specificity conflict.
*/
.request-list-item.selected,
.message-list-item.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
/* Rows have tabindex=0 and get a default outline when clicked, but we already
* have a visible selection style so hiding the outline should be okay. */
outline: none;
}
.theme-light {
--network-initiator-line-color: var(--theme-highlight-blue);
--network-initiator-color: var(--theme-highlight-purple);
}
.theme-dark {
--network-initiator-line-color: hsl(210, 40%, 60%);
--network-initiator-color: var(--blue-40);
}
.requests-list-initiator .requests-list-initiator-lastframe {
text-decoration: underline;
text-decoration-skip-ink: none;
}
.requests-list-initiator-lastframe {
display: unset;
}
.request-list-item .requests-list-initiator-filename,
.request-list-item .requests-list-initiator-line {
cursor: pointer;
text-decoration: inherit;
}
.request-list-item:not(.selected) .requests-list-initiator-filename {
color: var(--network-initiator-color);
}
.request-list-item:not(selected) .requests-list-initiator-line {
color: var(--network-initiator-line-color);
}
.request-list-item.selected .requests-list-initiator-filename,
.request-list-item.selected .requests-list-initiator-line {
color: inherit;
}
.request-list-item .requests-list-initiator-cause {
display: unset;
white-space: pre;
}
/* Responsive web design support */
@media (max-width: 700px) {
.requests-list-status-code {
width: auto;
}
.requests-list-size {
/* Given a fix max-width to display all columns in RWD mode */
max-width: 7%;
}
.requests-list-waterfall {
display: none;
}
}