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/. */
6 @import url("resource://devtools/client/shared/components/tree/tree-view.css");
7 @import url(variables.css); /* No idea why this is needed but we get error messages without it */
19 .devtools-toolbar-container {
21 justify-content: space-between;
24 .devtools-toolbar-group {
32 * Collapsed details pane needs to be truly hidden to prevent both accessibility
33 * tools and keyboard from accessing its contents.
35 #details-pane.pane-collapsed {
39 #details-pane-toggle[disabled] {
47 #response-content-image-box {
51 #network-statistics-charts {
55 .cropped-textbox .textbox-input {
56 /* workaround for textbox not supporting the @crop attribute */
57 text-overflow: ellipsis;
60 /* Responsive sidebar */
61 @media (max-width: 700px) {
64 #details-pane.pane-collapsed,
65 .requests-menu-waterfall,
66 #requests-menu-network-summary-button > .summary-info-text {
73 --table-splitter-color: #A09090;
74 --table-zebra-background: rgba(255,159,0,0.1);
76 --timing-blocked-color: #FF0000;
77 --timing-dns-color: #E7ADE7; /* pink */
78 --timing-connect-color: #FF9F00; /* orange */
79 --timing-send-color: #FFCF00; /* light blue */
80 --timing-wait-color: #9C9CFF; /* blue grey */
81 --timing-receive-color: #A09090; /* green */
83 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
84 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
89 -moz-box-orient: vertical;
94 .request-list-container {
96 -moz-box-orient: vertical;
100 #requests-menu-empty-notice,
101 .request-list-empty-notice {
107 #notice-perf-message {
111 #requests-menu-perf-notice-button {
114 list-style-image: url("images/profiler-stopwatch.svg");
116 vertical-align: middle;
119 #requests-menu-perf-notice-button::before {
120 background-image: url("images/profiler-stopwatch.svg");
123 /* Make sure the icon is visible on Linux (to overwrite a rule
124 in xul.css that hides the icon if there is no label.
125 See also bug 1278050. */
126 #requests-menu-perf-notice-button .button-icon {
130 #requests-menu-perf-notice-button .button-text {
134 #requests-menu-reload-notice-button {
142 /* Network requests table */
144 #requests-menu-toolbar {
145 background: var(--theme-capped-toolbar-background);
148 #requests-menu-toolbar::before, #requests-menu-toolbar::after {
149 display: none; /* Remove caps from this toolbar (and above background rule make the background fill it completely) */
152 #requests-menu-filter-buttons {
157 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
158 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
162 .requests-menu-contents {
164 -moz-box-orient: vertical;
170 --timings-rev-scale: 1;
173 .requests-menu-subitem {
176 box-sizing: border-box;
184 text-overflow: ellipsis;
187 .requests-menu-header {
192 #requests-menu-status-button,
193 .requests-menu-header-button {
197 -moz-appearance: none;
198 background-color: transparent;
199 border-image: linear-gradient(transparent 15%,
200 var(--theme-toolbar-background) 15%,
201 var(--theme-toolbar-background) 85%,
202 transparent 85%) 1 1;
205 border-inline-start-width: 1px;
212 padding-inline-start: 16px;
213 padding-inline-end: 0;
216 font-weight: inherit !important;
219 .requests-menu-header-button::-moz-focus-inner {
224 .requests-menu-header:first-child .requests-menu-header-button {
228 .requests-menu-header-button:hover {
229 background-color: var(--theme-hover-background);
230 color: var(--theme-hover-color);
233 .requests-menu-header-button:hover:active {
234 background-color: var(--theme-active-background);
235 color: var(--theme-active-color);
238 .requests-menu-header-button > .button-text {
242 text-overflow: ellipsis;
245 .requests-menu-header-button > .button-box > .button-icon,
246 #requests-menu-waterfall-image {
248 -moz-box-ordinal-group: 2;
250 .requests-menu-header-button > .button-box > .button-icon,
251 #requests-menu-waterfall-image,
252 .requests-menu-header-button > .button-icon {
255 margin-inline-start: 3px;
256 margin-inline-end: 6px;
260 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
261 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
262 list-style-image: var(--sort-ascending-image);
265 .requests-menu-header-button[data-sorted=ascending] > .button-icon {
266 background-image: var(--sort-ascending-image);
269 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
270 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
271 list-style-image: var(--sort-descending-image);
274 .requests-menu-header-button[data-sorted=descending] > .button-icon {
275 background-image: var(--sort-descending-image);
278 .requests-menu-header-button > .button-box > .button-text,
279 #requests-menu-waterfall-label-wrapper {
283 .requests-menu-waterfall-label-wrapper {
287 .requests-menu-header-button[sorted],
288 .requests-menu-header-button[sorted]:hover,
289 .requests-menu-header-button[data-sorted],
290 .requests-menu-header-button[data-sorted]:hover {
291 background-color: var(--theme-selection-background);
292 color: var(--theme-selection-color);
295 .requests-menu-header-button[sorted],
296 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button,
297 .requests-menu-header-button[data-sorted],
298 .requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
299 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
302 #requests-menu-status-button {
306 #requests-menu-status-button > .button-box {
310 /* Network requests table: specific column dimensions */
312 .requests-menu-status {
318 .requests-menu-method,
319 .requests-menu-method-box {
325 .requests-menu-icon-and-file {
329 .requests-menu-icon {
330 background: transparent;
333 margin-inline-end: 4px;
336 .requests-menu-icon {
337 outline: 1px solid var(--table-splitter-color);
340 .requests-menu-security-and-domain {
344 .requests-security-state-icon {
348 margin-inline-end: 4px;
351 .security-state-insecure {
352 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
355 .security-state-secure {
356 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
359 .security-state-weak {
360 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
363 .security-state-broken {
364 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
367 .security-state-local {
368 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
372 .requests-menu-size {
376 justify-content: center;
379 .requests-menu-transferred {
382 justify-content: center;
385 .request-list-item.selected .requests-menu-transferred.theme-comment {
386 color: var(--theme-selection-color);
389 .requests-menu-cause {
394 .requests-menu-cause-stack {
395 background-color: var(--theme-body-color-alt);
396 color: var(--theme-body-background);
403 margin-inline-end: 3px;
404 -moz-user-select: none;
407 .requests-menu-transferred {
413 /* Network requests table: status codes */
415 .requests-menu-status-code {
416 margin-inline-start: 3px !important;
418 margin-inline-end: -3em !important;
421 .requests-menu-status-icon {
422 background-color: #A09090;
425 margin-inline-start: 5px;
426 margin-inline-end: 5px;
428 border: 1px solid #000000;
429 transition: background-color 0.5s ease-in-out;
432 .request-list-item.selected .requests-menu-status-icon {
435 .requests-menu-status-icon:not([code]),
436 .requests-menu-status-icon:not([data-code]) {
437 background-color: var(--theme-content-color2);
440 .requests-menu-status-icon[code="cached"],
441 .requests-menu-status-icon[data-code="cached"] {
442 border: 2px solid var(--theme-content-color2);
443 background-color: transparent;
446 .requests-menu-status-icon[code^="1"],
447 .requests-menu-status-icon[data-code^="1"] {
448 background-color: var(--theme-highlight-blue);
451 .requests-menu-status-icon[code^="2"],
452 .requests-menu-status-icon[data-code^="2"] {
453 background-color: var(--theme-highlight-green);
456 /* 3xx are triangles */
457 .requests-menu-status-icon[code^="3"],
458 .requests-menu-status-icon[data-code^="3"] {
459 background-color: transparent;
462 border-left: 5px solid transparent;
463 border-right: 5px solid transparent;
464 border-bottom: 10px solid var(--theme-highlight-lightorange);
468 /* 4xx and 5xx are squares - error codes */
469 .requests-menu-status-icon[code^="4"],
470 .requests-menu-status-icon[data-code^="4"] {
471 background-color: var(--theme-highlight-red);
472 border-radius: 0; /* squares */
475 .requests-menu-status-icon[code^="5"],
476 .requests-menu-status-icon[data-code^="5"] {
477 background-color: var(--theme-highlight-pink);
479 transform: rotate(45deg);
482 /* Network requests table: waterfall header */
484 .requests-menu-waterfall {
486 padding-inline-start: 0;
489 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
490 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
491 padding-inline-start: 16px;
494 .requests-menu-timings-division {
497 padding-inline-start: 4px;
499 pointer-events: none;
500 box-sizing: border-box;
502 /* Allow the timing label to shrink if the container gets too narrow.
503 * The container width then is not limited by the content. */
507 .requests-menu-timings-division:first-child {
508 width: 98px; /* Substract 2px for borders */
511 .requests-menu-timings-division:not(:first-child) {
512 border-inline-start: 1px dashed;
513 /* margin-inline-start: -100px !important; / Don't affect layout. */
516 .requests-menu-timings-division:-moz-locale-dir(ltr) {
517 transform-origin: left center;
520 .requests-menu-timings-division:-moz-locale-dir(rtl) {
521 transform-origin: right center;
524 .requests-menu-timings-division {
525 border-inline-start-color: var(--theme-body-color) !important;
528 .requests-menu-timings-division[division-scale=second],
529 .requests-menu-timings-division[division-scale=minute],
530 .requests-menu-timings-division[data-division-scale=second],
531 .requests-menu-timings-division[data-division-scale=minute] {
535 /* Network requests table: waterfall items */
537 .requests-menu-subitem.requests-menu-waterfall {
538 padding-inline-start: 0;
539 padding-inline-end: 4px;
540 /* Background created on a <canvas> in js. */
541 /* @see devtools/client/netmonitor/netmonitor-view.js */
542 background-image: -moz-element(#waterfall-background);
543 background-repeat: repeat-y;
544 background-position: left center;
547 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
548 background-position: right center;
551 .requests-menu-timings {
555 transform: scaleX(var(--timings-scale));
558 .requests-menu-timings:-moz-locale-dir(ltr) {
559 transform-origin: left center;
562 .requests-menu-timings:-moz-locale-dir(rtl) {
563 transform-origin: right center;
566 .requests-menu-timings-total:-moz-locale-dir(ltr) {
567 transform-origin: left center;
570 .requests-menu-timings-total:-moz-locale-dir(rtl) {
571 transform-origin: right center;
574 .requests-menu-timings-total {
575 display: inline-block;
576 padding-inline-start: 4px;
580 /* This node should not be scaled - apply a reversed transformation */
581 transform: scaleX(var(--timings-rev-scale));
584 .requests-menu-timings-box {
585 display: inline-block;
589 .requests-menu-timings-box.blocked {
590 background-color: var(--timing-blocked-color);
593 .requests-menu-timings-box.dns {
594 background-color: var(--timing-dns-color);
597 .requests-menu-timings-box.connect {
598 background-color: var(--timing-connect-color);
601 .requests-menu-timings-box.send {
602 background-color: var(--timing-send-color);
605 .requests-menu-timings-box.wait {
606 background-color: var(--timing-wait-color);
609 .requests-menu-timings-box.receive {
610 background-color: var(--timing-receive-color);
615 #network-table .side-menu-widget-empty-text,
616 #network-table .side-menu-widget-container,
617 #network-table .request-list-empty-notice,
618 #network-table .request-list-container {
619 background-color: var(--theme-body-background);
622 #network-table .side-menu-widget-item,
625 border-top-color: transparent;
626 border-bottom-color: transparent;
630 .request-list-item.selected {
631 background-color: var(--theme-selection-background);
632 color: var(--theme-selection-color);
635 .side-menu-widget-item-contents {
639 .side-menu-widget-container {
640 box-shadow: none !important;
643 .side-menu-widget-item:not(.selected)[odd],
644 .request-list-item:not(.selected).odd {
645 background-color: var(--table-zebra-background);
648 .side-menu-widget-item:not(.selected):hover,
649 .request-list-item:not(.selected):hover {
650 background-color: var(--theme-selection-background-semitransparent);
655 .request-list-item.selected .requests-menu-method {
656 color: var(--theme-selection-color);
659 /* Network request details */
661 #details-pane-toggle {
662 list-style-image: var(--theme-pane-collapse-image);
665 #details-pane-toggle.pane-collapsed {
666 list-style-image: var(--theme-pane-expand-image);
669 #details-pane-toggle:-moz-locale-dir(ltr)::before,
670 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
671 background-image: var(--theme-pane-collapse-image);
674 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
675 #details-pane-toggle:-moz-locale-dir(rtl)::before {
676 background-image: var(--theme-pane-expand-image);
679 /* Network request details tabpanels */
682 background-color: var(--theme-sidebar-background);
684 color: var(--theme-body-color);
688 background-color: var(--theme-toolbar-background);
691 /* Summary tabpanel */
693 .tabpanel-summary-container {
697 .tabpanel-summary-label {
698 display: inline-block;
699 padding-inline-start: 4px;
700 padding-inline-end: 3px;
704 .tabpanel-summary-value {
706 padding-inline-start: 3px;
709 /* Headers tabpanel */
711 #headers-summary-status,
712 #headers-summary-version {
716 #headers-summary-size {
720 #headers-summary-resend {
722 margin-inline-end: 6px;
725 #toggle-raw-headers {
727 margin-inline-end: 6px;
730 .raw-response-textarea {
734 /* Response tabpanel */
736 #response-content-info-header {
739 background-color: var(--theme-highlight-red);
740 color: var(--theme-selection-color);
743 #response-content-image-box {
745 padding-bottom: 10px;
748 #response-content-image {
750 border: 1px dashed #A09090;
754 /* Preview tabpanel */
765 /* Timings tabpanel */
767 #timings-tabpanel .tabpanel-summary-container {
771 #timings-tabpanel .tabpanel-summary-label {
775 #timings-tabpanel .requests-menu-timings-container {
781 #timings-tabpanel .requests-menu-timings-offset {
782 transition: width 0.2s ease-out;
785 #timings-tabpanel .requests-menu-timings-box {
788 transition: width 0.2s ease-out;
791 #timings-tabpanel .requests-menu-timings-total {
792 transition: transform 0.2s ease-out;
795 /* Security tabpanel */
797 .security-info-section {
798 padding-inline-start: 1em;
803 -moz-user-select: text;
806 .security-warning-icon {
807 background-image: url("images/alerticon-warning.png");
808 background-size: 13px 12px;
809 margin-inline-start: 5px;
815 @media (min-resolution: 1.1dppx) {
816 .security-warning-icon {
817 background-image: url("images/alerticon-warning@2x.png");
821 /* Custom request form */
824 padding: 0.6em 0.5em;
835 #custom-method-value {
840 .requests-menu-filter-button {
841 /* -moz-appearance: none;
842 background: rgba(128,128,128,0.1);
848 color: var(--theme-body-color);*/
853 .requests-menu-filter-button:hover {
854 /* background: rgba(128,128,128,0.2);*/
857 .requests-menu-filter-button:hover:active {
858 /* background-color: var(--theme-selection-background-semitransparent);*/
861 /* Performance analysis buttons */
863 #requests-menu-network-summary-button {
869 border-color: transparent;
870 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
875 #requests-menu-network-summary-button > .summary-info-icon {
876 background-image: url(images/profiler-stopwatch.svg);
877 filter: var(--icon-filter);
882 #requests-menu-network-summary-button > .summary-info-text {
883 margin-inline-start: 0.5em;
886 #requests-menu-network-summary-button:hover > .summary-info-icon,
887 #requests-menu-network-summary-button:hover > .summary-info-text {
890 /* Performance analysis view */
892 #network-statistics-toolbar {
893 /* Make the toolbar invisible, it only hold the back button */
894 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
895 background-color: #000000;
901 #network-statistics-back-button {
909 border-inline-start: none;
912 #network-statistics-view-splitter {
913 /* border-color: rgba(0,0,0,0.2);*/
915 pointer-events: none;
918 #network-statistics-charts {
922 #network-statistics-charts {
923 background-color: var(--theme-sidebar-background);
926 #network-statistics-charts .pie-chart-container {
927 margin-inline-start: 3vw;
928 margin-inline-end: 1vw;
931 #network-statistics-charts .table-chart-container {
932 margin-inline-start: 1vw;
933 margin-inline-end: 3vw;
936 .chart-colored-blob[name=html] {
937 fill: var(--theme-highlight-bluegrey);
938 background: var(--theme-highlight-bluegrey);
941 .chart-colored-blob[name=css] {
942 fill: var(--theme-highlight-blue);
943 background: var(--theme-highlight-blue);
946 .chart-colored-blob[name=js] {
947 fill: var(--theme-highlight-lightorange);
948 background: var(--theme-highlight-lightorange);
951 .chart-colored-blob[name=xhr] {
952 fill: var(--theme-highlight-orange);
953 background: var(--theme-highlight-orange);
956 .chart-colored-blob[name=fonts] {
957 fill: var(--theme-highlight-darkpurple);
958 background: var(--theme-highlight-darkpurple);
961 .chart-colored-blob[name=images] {
962 fill: var(--theme-highlight-pink);
963 background: var(--theme-highlight-pink);
966 .chart-colored-blob[name=media] {
967 fill: var(--theme-highlight-green);
968 background: var(--theme-highlight-green);
971 .chart-colored-blob[name=flash] {
972 fill: var(--theme-highlight-red);
973 background: var(--theme-highlight-red);
976 .table-chart-row-label[name=cached] {
980 .table-chart-row-label[name=count] {
985 .table-chart-row-label[name=label] {
989 .table-chart-row-label[name=size] {
993 .table-chart-row-label[name=time] {
997 /* Responsive sidebar */
998 @media (max-width: 700px) {
999 #requests-menu-toolbar {
1003 .requests-menu-header-button {
1009 margin: 0 !important;
1010 /* To prevent all the margin hacks to hide the sidebar. */
1013 .requests-menu-status {
1018 .requests-menu-status-code {
1022 .requests-menu-method,
1023 .requests-menu-method-box {
1028 .requests-menu-icon-and-file {
1032 .requests-menu-security-and-domain {
1036 .requests-menu-cause,
1037 .requests-menu-type,
1038 .requests-menu-transferred,
1039 .requests-menu-size {
1044 .requests-menu-waterfall {
1049 /* Platform overrides (copied in from the old platform specific files) */
1050 :root[platform="win"] .requests-menu-header-button > .button-box {
1054 :root[platform="win"] .requests-menu-timings-division {
1059 :root[platform="linux"] #headers-summary-resend {
1063 :root[platform="linux"] #toggle-raw-headers {
1067 /* Responsive sidebar */
1068 @media (max-width: 700px) {
1069 :root[platform="linux"] .requests-menu-header-button {
1074 /* Overwrite tree-view cell colon and use l10n string instead */
1075 .treeTable .treeLabelCell::after {
1079 /* Layout additional warning icon in tree value cell */
1080 .security-info-value {
1084 .security-info-value .textbox-input {
1085 text-overflow: ellipsis;
1090 margin-inline-end: 2px;
1093 .security-info-value .textbox-input:focus {
1095 box-shadow: var(--theme-focus-box-shadow-textbox);
1098 .treeTable .treeLabel {
1102 /* Customize default tree table style to align with devtools theme */
1103 .theme-light .treeTable .treeLabel,
1104 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1105 color: var(--theme-highlight-red);
1108 .theme-dark .treeTable .treeLabel,
1109 .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1110 color: var(--theme-highlight-purple);
1113 .theme-firebug .treeTable .treeLabel {
1114 color: var(--theme-body-color);
1117 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1119 text-decoration: none;
1123 * FIXME: normal html block element cannot fill outer XUL element
1124 * This workaround should be removed after sidebar is migrated to react
1126 #react-security-tabpanel-hook,
1127 #react-timings-tabpanel-hook {
1129 -moz-box-orient: vertical;