1 /* vim:set ts=2 sw=2 sts=2 et: */
2 /* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
10 /* === BEGIN netmonitor.inc.css === */
14 --table-splitter-color: #A09090;
15 --table-zebra-background: rgba(255,159,0,0.1);
17 --timing-blocked-color: #FF0000;
18 --timing-dns-color: #E7ADE7; /* pink */
19 --timing-connect-color: #FF9F00; /* orange */
20 --timing-send-color: #FFCF00; /* light blue */
21 --timig-wait-color: #9C9CFF; /* blue grey */
22 --timing-receive-color: #A09090; /* green */
24 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
25 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
28 #requests-menu-empty-notice {
34 #notice-perf-message {
38 #requests-menu-perf-notice-button {
42 list-style-image: url("images/profiler-stopwatch.svg");
45 #requests-menu-perf-notice-button .button-text {
49 #requests-menu-reload-notice-button {
52 background-color: var(--theme-toolbar-background);
55 /* Network requests table */
57 #requests-menu-toolbar {
60 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
61 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
65 .requests-menu-subitem {
69 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
70 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
73 #requests-menu-status-button,
74 .requests-menu-header-button {
75 background-color: transparent;
76 border-image: linear-gradient(transparent 15%,
77 var(--theme-splitter-color) 15%,
78 var(--theme-splitter-color) 85%,
82 border-inline-start-width: 1px;
88 padding-inline-start: 13px;
92 font-weight: inherit !important;
95 .requests-menu-header:first-child .requests-menu-header-button {
99 .requests-menu-header-button:hover {
100 background-color: var(--theme-hover-background);
101 color: var(--theme-hover-color);
104 .requests-menu-header-button:hover:active {
105 background-color: var(--theme-active-background);
106 color: var(--theme-active-color);
109 .requests-menu-header-button > .button-box > .button-icon,
110 #requests-menu-waterfall-image {
113 margin-inline-end: 6px;
114 -moz-box-ordinal-group: 2;
118 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
119 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
120 list-style-image: var(--sort-ascending-image);
123 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
124 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
125 list-style-image: var(--sort-descending-image);
128 .requests-menu-header-button > .button-box > .button-text,
129 #requests-menu-waterfall-label-wrapper {
133 .requests-menu-header-button[sorted],
134 .requests-menu-header-button[sorted]:hover {
135 background-color: var(--theme-selection-background);
136 color: var(--theme-selection-color);
139 .requests-menu-header-button[sorted],
140 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
141 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
144 #requests-menu-status-button {
148 #requests-menu-status-button > .button-box {
152 /* Network requests table: specific column dimensions */
154 .requests-menu-status {
160 .requests-menu-method,
161 .requests-menu-method-box {
167 .requests-menu-icon-and-file {
171 .requests-menu-icon {
173 width: calc(1em + 4px);
174 height: calc(1em + 4px);
176 -moz-margin-end: 4px;
179 .requests-menu-icon {
180 outline: 1px solid var(--table-splitter-color);
183 .requests-menu-security-and-domain {
187 .requests-security-state-icon {
190 -moz-margin-end: 4px;
194 .security-state-insecure {
195 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
198 .security-state-secure {
199 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
202 .security-state-weak {
203 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
206 .security-state-broken {
207 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
210 .security-state-local {
211 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
215 .requests-menu-size {
221 .requests-menu-transferred {
227 /* Network requests table: status codes */
229 .requests-menu-status-code {
230 -moz-margin-start: 3px !important;
232 -moz-margin-end: -3em !important;
235 .requests-menu-status-icon {
236 background-color: #A09090;
239 -moz-margin-start: 5px;
240 -moz-margin-end: 5px;
242 border: 1px solid #000000;
243 transition: background-color 0.5s ease-in-out;
246 .requests-menu-status-icon:not([code]) {
247 background-color: var(--theme-content-color2);
250 .requests-menu-status-icon[code="cached"] {
251 border: 2px solid var(--theme-content-color2);
252 background-color: transparent;
255 .requests-menu-status-icon[code^="1"] {
256 background-color: var(--theme-highlight-blue);
259 .requests-menu-status-icon[code^="2"] {
260 background-color: var(--theme-highlight-green);
263 /* 3xx are triangles */
264 .requests-menu-status-icon[code^="3"] {
265 background-color: transparent;
268 border-left: 5px solid transparent;
269 border-right: 5px solid transparent;
270 border-bottom: 10px solid var(--theme-highlight-lightorange);
274 /* 4xx and 5xx are squares - error codes */
275 .requests-menu-status-icon[code^="4"] {
276 background-color: var(--theme-highlight-red);
277 border-radius: 0; /* squares */
280 .requests-menu-status-icon[code^="5"] {
281 background-color: var(--theme-highlight-pink);
283 transform: rotate(45deg);
286 /* Network requests table: waterfall header */
288 .requests-menu-waterfall {
289 padding-inline-start: 0;
292 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
293 padding-inline-start: 13px;
296 .requests-menu-timings-division {
299 padding-inline-start: 4px;
301 pointer-events: none;
302 box-sizing: border-box;
306 .requests-menu-timings-division:first-child {
307 width: 98px; /* Substract 2px for borders */
310 .requests-menu-timings-division:not(:first-child) {
311 border-inline-start: 1px dashed;
312 margin-inline-start: -100px !important; /* Don't affect layout. */
315 .requests-menu-timings-division:-moz-locale-dir(ltr) {
316 transform-origin: left center;
319 .requests-menu-timings-division:-moz-locale-dir(rtl) {
320 transform-origin: right center;
323 .requests-menu-timings-division {
324 border-inline-start-color: var(--theme-body-color) !important;
327 .requests-menu-timings-division[division-scale=second],
328 .requests-menu-timings-division[division-scale=minute] {
332 /* Network requests table: waterfall items */
334 .requests-menu-subitem.requests-menu-waterfall {
335 -moz-padding-start: 0px;
336 -moz-padding-end: 4px;
337 /* Background created on a <canvas> in js. */
338 /* @see devtools/client/netmonitor/netmonitor-view.js */
339 background-image: -moz-element(#waterfall-background);
340 background-repeat: repeat-y;
341 background-position: -1px center;
344 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
345 background-position: right center;
348 .requests-menu-timings:-moz-locale-dir(ltr) {
349 transform-origin: left center;
352 .requests-menu-timings:-moz-locale-dir(rtl) {
353 transform-origin: right center;
356 .requests-menu-timings-total:-moz-locale-dir(ltr) {
357 transform-origin: left center;
360 .requests-menu-timings-total:-moz-locale-dir(rtl) {
361 transform-origin: right center;
364 .requests-menu-timings-total {
365 -moz-padding-start: 4px;
370 .requests-menu-timings-box {
374 .requests-menu-timings-box.blocked {
375 background-color: var(--timing-blocked-color);
378 .requests-menu-timings-box.dns {
379 background-color: var(--timing-dns-color);
382 .requests-menu-timings-box.connect {
383 background-color: var(--timing-connect-color);
386 .requests-menu-timings-box.send {
387 background-color: var(--timing-send-color);
390 .requests-menu-timings-box.wait {
391 background-color: var(--timing-wait-color);
394 .requests-menu-timings-box.receive {
395 background-color: var(--timing-receive-color);
400 #network-table .side-menu-widget-empty-text,
401 #network-table .side-menu-widget-container {
402 background-color: var(--theme-body-background);
405 #network-table .side-menu-widget-item {
406 border-top-color: transparent;
407 border-bottom-color: transparent;
410 .side-menu-widget-item-contents {
414 .side-menu-widget-container {
415 box-shadow: none !important;
418 .side-menu-widget-item:not(.selected)[odd] {
419 background-color: var(--table-zebra-background);
422 .side-menu-widget-item:not(.selected):hover {
423 background-color: var(--theme-selection-background-semitransparent);
426 /* Network request details */
428 #details-pane-toggle {
429 list-style-image: var(--theme-pane-collapse-image);
432 #details-pane-toggle[pane-collapsed] {
433 list-style-image: var(--theme-pane-expand-image);
436 /* Network request details tabpanels */
439 background-color: var(--theme-sidebar-background);
442 .theme-dark .tabpanel-content {
443 color: var(--theme-body-color);
447 background-color: var(--theme-toolbar-background);
450 /* Summary tabpanel */
452 .tabpanel-summary-container {
456 .tabpanel-summary-label {
457 -moz-padding-start: 4px;
458 -moz-padding-end: 3px;
462 .tabpanel-summary-value {
464 -moz-padding-start: 3px;
467 /* Headers tabpanel */
469 #headers-summary-status,
470 #headers-summary-version {
474 #headers-summary-size {
478 #headers-summary-resend {
480 -moz-margin-end: 6px;
483 #toggle-raw-headers {
485 -moz-margin-end: 6px;
488 .raw-response-textarea {
492 /* Response tabpanel */
494 #response-content-info-header {
497 background-color: var(--theme-highlight-red);
498 color: var(--theme-selection-color);
501 #response-content-image-box {
503 padding-bottom: 10px;
506 #response-content-image {
508 border: 1px dashed #A09090;
512 /* Preview tabpanel */
523 /* Timings tabpanel */
525 #timings-tabpanel .tabpanel-summary-label {
529 #timings-tabpanel .requests-menu-timings-box {
530 transition: transform 0.2s ease-out;
535 #timings-tabpanel .requests-menu-timings-total {
536 transition: transform 0.2s ease-out;
539 /* Security tabpanel */
541 .security-info-section {
542 -moz-padding-start: 1em;
549 .security-warning-icon {
550 background-image: url("images/alerticon-warning.png");
551 background-size: 13px 12px;
552 -moz-margin-start: 5px;
558 @media (min-resolution: 1.1dppx) {
559 .security-warning-icon {
560 background-image: url("images/alerticon-warning@2x.png");
564 /* Custom request form */
567 padding: 0.6em 0.5em;
578 #custom-method-value {
583 .requests-menu-filter-button {
584 /* -moz-appearance: none;
585 background: rgba(128,128,128,0.1);
591 color: var(--theme-body-color);*/
594 .requests-menu-filter-button:hover {
595 /* background: rgba(128,128,128,0.2);*/
598 .requests-menu-filter-button:hover:active {
599 /* background-color: var(--theme-selection-background-semitransparent);*/
602 /* Performance analysis buttons */
604 #requests-menu-network-summary-button {
607 border-color: transparent;
608 list-style-image: url("images/profiler-stopwatch.svg");
611 margin-inline-end: 1em;
615 /* Performance analysis view */
617 #network-statistics-toolbar {
618 /* Make the toolbar invisible, it only hold the back button */
619 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
620 background-color: #000000;
626 #network-statistics-back-button {
634 -moz-border-start: none;
637 #network-statistics-view-splitter {
638 /* border-color: rgba(0,0,0,0.2);*/
640 pointer-events: none;
643 #network-statistics-charts {
647 #network-statistics-charts {
648 background-color: var(--theme-sidebar-background);
651 #network-statistics-charts .pie-chart-container {
652 -moz-margin-start: 3vw;
653 -moz-margin-end: 1vw;
656 #network-statistics-charts .table-chart-container {
657 -moz-margin-start: 1vw;
658 -moz-margin-end: 3vw;
661 .chart-colored-blob[name=html] {
662 fill: var(--theme-highlight-bluegrey);
663 background: var(--theme-highlight-bluegrey);
666 .chart-colored-blob[name=css] {
667 fill: var(--theme-highlight-blue);
668 background: var(--theme-highlight-blue);
671 .chart-colored-blob[name=js] {
672 fill: var(--theme-highlight-lightorange);
673 background: var(--theme-highlight-lightorange);
676 .chart-colored-blob[name=xhr] {
677 fill: var(--theme-highlight-orange);
678 background: var(--theme-highlight-orange);
681 .chart-colored-blob[name=fonts] {
682 fill: var(--theme-highlight-darkpurple);
683 background: var(--theme-highlight-darkpurple);
686 .chart-colored-blob[name=images] {
687 fill: var(--theme-highlight-pink);
688 background: var(--theme-highlight-pink);
691 .chart-colored-blob[name=media] {
692 fill: var(--theme-highlight-green);
693 background: var(--theme-highlight-green);
696 .chart-colored-blob[name=flash] {
697 fill: var(--theme-highlight-red);
698 background: var(--theme-highlight-red);
701 .table-chart-row-label[name=cached] {
705 .table-chart-row-label[name=count] {
710 .table-chart-row-label[name=label] {
714 .table-chart-row-label[name=size] {
718 .table-chart-row-label[name=time] {
722 /* Responsive sidebar */
723 @media (max-width: 700px) {
724 #requests-menu-toolbar {
728 .requests-menu-header-button {
734 margin: 0 !important;
735 /* To prevent all the margin hacks to hide the sidebar. */
738 .requests-menu-status {
743 .requests-menu-status-code {
747 .requests-menu-method,
748 .requests-menu-method-box {
753 .requests-menu-icon-and-file {
757 .requests-menu-security-and-domain {
761 .requests-menu-type {
765 .requests-menu-transferred,
766 .requests-menu-size {
771 /* Platform overrides (copied in from the old platform specific files) */
772 :root[platform="win"] .requests-menu-header-button > .button-box {
776 :root[platform="win"] .requests-menu-timings-division {
781 :root[platform="linux"] #headers-summary-resend {
785 :root[platform="linux"] #toggle-raw-headers {
789 /* Responsive sidebar */
790 @media (max-width: 700px) {
791 :root[platform="linux"] .requests-menu-header-button {