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);
18 #requests-menu-empty-notice {
24 #notice-perf-message {
28 #requests-menu-perf-notice-button {
32 list-style-image: url("images/profiler-stopwatch.svg");
35 #requests-menu-perf-notice-button .button-text {
39 #requests-menu-reload-notice-button {
44 /* Network requests table */
46 #requests-menu-toolbar {
49 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
50 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
54 .requests-menu-subitem {
58 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
59 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
62 .requests-menu-header-button,
63 #requests-menu-status-button {
64 background-color: transparent;
65 border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
68 border-inline-start-width: 1px;
74 padding-inline-start: 13px;
77 font-weight: inherit !important;
80 .requests-menu-header:first-child .requests-menu-header-button {
84 .requests-menu-header-button:hover {
85 background-color: var(--theme-hover-background);
86 color: var(--theme-hover-color);
89 .requests-menu-header-button:hover:active {
90 background-color: var(--theme-active-background);
91 color: var(--theme-active-color);
94 .requests-menu-header-button > .button-box > .button-icon,
95 #requests-menu-waterfall-image {
98 margin-inline-end: 6px;
99 -moz-box-ordinal-group: 2;
103 .requests-menu-header-button[sorted] > .button-box > .button-icon,
104 .requests-menu-header-button[sorted] #requests-menu-waterfall-image {
105 list-style-image: url('chrome://devtools/skin/images/sort-arrows.svg');
108 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
109 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
110 -moz-image-region: rect(4px, 19px, 7px, 14px);
113 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
114 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
115 -moz-image-region: rect(5px, 8px, 8px, 3px);
118 .requests-menu-header-button > .button-box > .button-text,
119 #requests-menu-waterfall-label-wrapper {
123 .requests-menu-header-button[sorted]:not(:hover) {
124 background-color: var(--theme-selection-background);
125 color: var(--theme-selection-color);
128 .requests-menu-header-button[sorted],
129 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
130 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
133 #requests-menu-status-button {
137 #requests-menu-status-button > .button-box {
141 /* Network requests table: specific column dimensions */
143 .requests-menu-status {
149 .requests-menu-method,
150 .requests-menu-method-box {
156 .requests-menu-icon-and-file {
160 .requests-menu-icon {
162 width: calc(1em + 4px);
163 height: calc(1em + 4px);
165 -moz-margin-end: 4px;
168 .requests-menu-icon {
169 outline: 1px solid var(--table-splitter-color);
172 .requests-menu-file {
176 .requests-menu-security-and-domain {
181 .requests-security-state-icon {
184 -moz-margin-end: 4px;
188 .security-state-insecure {
189 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
192 .security-state-secure {
193 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
196 .security-state-weak {
197 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
200 .security-state-broken {
201 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
204 .security-state-local {
205 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
209 .requests-menu-size {
215 .requests-menu-transferred {
221 /* Network requests table: status codes */
223 .requests-menu-status-code {
224 -moz-margin-start: 3px !important;
226 -moz-margin-end: -3em !important;
229 .requests-menu-status-icon {
230 background-color: #A09090;
233 -moz-margin-start: 5px;
234 -moz-margin-end: 5px;
236 border: 1px solid #000000;
237 transition: background-color 0.5s ease-in-out;
240 .requests-menu-status-icon:not([code]) {
241 background-color: var(--theme-content-color2);
244 .requests-menu-status-icon[code="cached"] {
245 border: 2px solid var(--theme-content-color2);
246 background-color: transparent;
249 .requests-menu-status-icon[code^="1"] {
250 background-color: var(--theme-highlight-blue);
253 .requests-menu-status-icon[code^="2"] {
254 background-color: var(--theme-highlight-green);
257 /* 3xx are triangles */
258 .requests-menu-status-icon[code^="3"] {
259 background-color: transparent;
262 border-left: 5px solid transparent;
263 border-right: 5px solid transparent;
264 border-bottom: 10px solid var(--theme-highlight-lightorange);
268 /* 4xx and 5xx are squares - error codes */
269 .requests-menu-status-icon[code^="4"] {
270 background-color: var(--theme-highlight-red);
271 border-radius: 0; /* squares */
274 .requests-menu-status-icon[code^="5"] {
275 background-color: var(--theme-highlight-pink);
277 transform: rotate(45deg);
280 /* Network requests table: waterfall header */
282 .requests-menu-waterfall {
283 padding-inline-start: 0;
286 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
287 padding-inline-start: 13px;
290 .requests-menu-timings-division {
293 padding-inline-start: 4px;
294 border-inline-start: 1px dotted #000000;
296 pointer-events: none;
297 box-sizing: border-box;
301 .requests-menu-timings-division:first-child {
302 width: 98px; /* Substract 2px for borders */
305 .requests-menu-timings-division:not(:first-child) {
306 border-inline-start: 1px dotted;
307 margin-inline-start: -100px !important; /* Don't affect layout. */
310 .requests-menu-timings-division:-moz-locale-dir(ltr) {
311 transform-origin: left center;
314 .requests-menu-timings-division:-moz-locale-dir(rtl) {
315 transform-origin: right center;
318 .requests-menu-timings-division {
319 border-inline-start-color: var(--theme-body-color) !important;
322 .requests-menu-timings-division[division-scale=second],
323 .requests-menu-timings-division[division-scale=minute] {
327 /* Network requests table: waterfall items */
329 .requests-menu-subitem.requests-menu-waterfall {
330 -moz-padding-start: 0px;
331 -moz-padding-end: 4px;
332 /* Background created on a <canvas> in js. */
333 /* @see browser/devtools/netmonitor/netmonitor-view.js */
334 background-image: -moz-element(#waterfall-background);
335 background-repeat: repeat-y;
336 background-position: -1px center;
339 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
340 background-position: right center;
343 .requests-menu-timings:-moz-locale-dir(ltr) {
344 transform-origin: left center;
347 .requests-menu-timings:-moz-locale-dir(rtl) {
348 transform-origin: right center;
351 .requests-menu-timings-total:-moz-locale-dir(ltr) {
352 transform-origin: left center;
355 .requests-menu-timings-total:-moz-locale-dir(rtl) {
356 transform-origin: right center;
359 .requests-menu-timings-total {
360 -moz-padding-start: 4px;
365 .requests-menu-timings-box {
369 .requests-menu-timings-box.blocked {
370 background-color: #FF0000; /* red */
373 .requests-menu-timings-box.dns {
374 background-color: #E7ADE7; /* pink */
377 .requests-menu-timings-box.connect {
378 background-color: #FF9F00; /* orange */
381 .requests-menu-timings-box.send {
382 background-color: #FFCF00; /* light blue */
385 .requests-menu-timings-box.wait {
386 background-color: #9C9CFF; /* blue grey */
389 .requests-menu-timings-box.receive {
390 background-color: #A09090; /* green */
395 #network-table .side-menu-widget-empty-text,
396 #network-table .side-menu-widget-container {
397 background-color: var(--theme-body-background);
400 #network-table .side-menu-widget-item {
401 border-top-color: transparent;
402 border-bottom-color: transparent;
405 .side-menu-widget-item-contents {
409 .side-menu-widget-container {
410 box-shadow: none !important;
413 .side-menu-widget-item:not(.selected)[odd] {
414 background-color: var(--table-zebra-background);
417 .side-menu-widget-item:not(.selected):hover {
418 background-color: var(--theme-selection-background-semitransparent);
421 /* Network request details */
423 #details-pane-toggle {
424 list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
427 #details-pane-toggle[pane-collapsed] {
428 list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
431 @media (min-resolution: 1.1dppx) {
432 #details-pane-toggle {
433 list-style-image: url("chrome://devtools/skin/images/debugger-collapse@2x.png");
436 #details-pane-toggle[pane-collapsed] {
437 list-style-image: url("chrome://devtools/skin/images/debugger-expand@2x.png");
441 /* Network request details tabpanels */
444 background-color: var(--theme-sidebar-background);
447 .theme-dark .tabpanel-content {
448 color: var(--theme-body-color);
452 background-color: var(--theme-toolbar-background);
455 /* Summary tabpanel */
457 .tabpanel-summary-container {
461 .tabpanel-summary-label {
462 -moz-padding-start: 4px;
463 -moz-padding-end: 3px;
467 .tabpanel-summary-value {
469 -moz-padding-start: 3px;
472 /* Headers tabpanel */
474 #headers-summary-status,
475 #headers-summary-version {
479 #headers-summary-size {
483 #headers-summary-resend {
485 /* min-height: 20px;*/
488 #toggle-raw-headers {
490 -moz-margin-end: 6px;
493 .raw-response-textarea {
497 /* Response tabpanel */
499 #response-content-info-header {
502 background-color: var(--theme-highlight-red);
503 color: var(--theme-selection-color);
506 #response-content-image-box {
508 padding-bottom: 10px;
511 #response-content-image {
513 border: 1px dashed #A09090;
517 /* Preview tabpanel */
528 /* Timings tabpanel */
530 #timings-tabpanel .tabpanel-summary-label {
534 #timings-tabpanel .requests-menu-timings-box {
535 transition: transform 0.2s ease-out;
540 #timings-tabpanel .requests-menu-timings-total {
541 transition: transform 0.2s ease-out;
544 /* Security tabpanel */
546 .security-info-section {
547 -moz-padding-start: 1em;
554 .security-warning-icon {
555 background-image: url("images/alerticon-warning.png");
556 background-size: 13px 12px;
557 -moz-margin-start: 5px;
563 @media (min-resolution: 1.1dppx) {
564 .security-warning-icon {
565 background-image: url("images/alerticon-warning@2x.png");
569 /* Custom request form */
572 padding: 0.6em 0.5em;
583 #custom-method-value {
589 #requests-menu-footer {
591 background-color: var(--theme-toolbar-background);
592 border-top: 1px solid var(--table-splitter-color);
595 .requests-menu-footer-button,
596 .requests-menu-footer-label {
599 -moz-margin-end: 3px;
602 /* color: var(--theme-body-color);*/
605 .requests-menu-footer-spacer {
609 .requests-menu-footer-spacer,
610 .requests-menu-footer-button {
613 .requests-menu-footer-button {
616 .requests-menu-footer-button:hover:active {
619 .requests-menu-footer-button:not(:active)[checked] {
622 .requests-menu-footer-label {
626 #requests-menu-filter-freetext-text {
627 transition-property: max-width, -moz-padding-end, -moz-padding-start;
628 transition-duration: 250ms;
629 transition-timing-function: ease;
632 #requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box {
636 #requests-menu-filter-freetext-text:not([focused]):not([filled]) {
637 max-width: 20px !important;
638 -moz-padding-end: 5px;
639 -moz-padding-start: 22px;
640 background-position: 8px center, top left, top left;
643 #requests-menu-filter-freetext-text[focused],
644 #requests-menu-filter-freetext-text[filled] {
645 max-width: 200px !important;
648 /* Performance analysis buttons */
650 #requests-menu-network-summary-button {
651 list-style-image: url("images/profiler-stopwatch.svg");
656 #requests-menu-network-summary-label {
657 -moz-padding-start: 0;
661 #requests-menu-network-summary-label:hover {
662 text-decoration: underline;
665 /* Performance analysis view */
667 #network-statistics-toolbar {
668 /* Make the toolbar invisible, it only hold the back button */
669 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
670 background-color: #000000;
673 #network-statistics-back-button {
678 #network-statistics-view-splitter {
680 pointer-events: none;
683 #network-statistics-charts {
685 background-color: var(--theme-sidebar-background);
688 #network-statistics-charts .pie-chart-container {
689 -moz-margin-start: 3vw;
690 -moz-margin-end: 1vw;
693 #network-statistics-charts .table-chart-container {
694 -moz-margin-start: 1vw;
695 -moz-margin-end: 3vw;
698 .chart-colored-blob[name=html] {
699 fill: var(--theme-highlight-bluegrey);
700 background: var(--theme-highlight-bluegrey);
703 .chart-colored-blob[name=css] {
704 fill: var(--theme-highlight-blue);
705 background: var(--theme-highlight-blue);
708 .chart-colored-blob[name=js] {
709 fill: var(--theme-highlight-lightorange);
710 background: var(--theme-highlight-lightorange);
713 .chart-colored-blob[name=xhr] {
714 fill: var(--theme-highlight-orange);
715 background: var(--theme-highlight-orange);
718 .chart-colored-blob[name=fonts] {
719 fill: var(--theme-highlight-darkpurple);
720 background: var(--theme-highlight-darkpurple);
723 .chart-colored-blob[name=images] {
724 fill: var(--theme-highlight-pink);
725 background: var(--theme-highlight-pink);
728 .chart-colored-blob[name=media] {
729 fill: var(--theme-highlight-green);
730 background: var(--theme-highlight-green);
733 .chart-colored-blob[name=flash] {
734 fill: var(--theme-highlight-red);
735 background: var(--theme-highlight-red);
738 .table-chart-row-label[name=cached] {
742 .table-chart-row-label[name=count] {
747 .table-chart-row-label[name=label] {
751 .table-chart-row-label[name=size] {
755 .table-chart-row-label[name=time] {
759 /* Platform overrides (copied in from the old platform specific files) */
760 :root[platform="win"] .requests-menu-header-button > .button-box {
764 :root[platform="win"] .requests-menu-timings-division {
769 :root[platform="linux"] #headers-summary-resend {
773 :root[platform="linux"] #toggle-raw-headers {
777 /* Responsive sidebar */
778 @media (max-width: 700px) {
779 #requests-menu-toolbar {
783 .requests-menu-header-button {
789 margin: 0 !important;
790 /* To prevent all the margin hacks to hide the sidebar. */
793 .requests-menu-status {
798 .requests-menu-status-code {
802 .requests-menu-method,
803 .requests-menu-method-box {
808 .requests-menu-icon-and-file {
812 .requests-menu-security-and-domain {
816 .requests-menu-type {
820 .requests-menu-transferred,
821 .requests-menu-size {
826 /* === END netmonitor.inc.css === */