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 .side-menu-widget-item.selected .requests-security-state-icon {
352 /* filter: brightness(1.3);*/
355 .security-state-insecure {
356 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
359 .security-state-secure {
360 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
363 .security-state-weak {
364 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
367 .security-state-broken {
368 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
371 .security-state-local {
372 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
376 .requests-menu-size {
380 justify-content: center;
383 .requests-menu-transferred {
386 justify-content: center;
389 .request-list-item.selected .requests-menu-transferred.theme-comment {
390 color: var(--theme-selection-color);
393 .requests-menu-cause {
398 .requests-menu-cause-stack {
399 background-color: var(--theme-body-color-alt);
400 color: var(--theme-body-background);
407 margin-inline-end: 3px;
408 -moz-user-select: none;
411 .requests-menu-transferred {
417 .side-menu-widget-item.selected .requests-menu-transferred.theme-comment {
418 color: var(--theme-selection-color);
421 /* Network requests table: status codes */
423 .requests-menu-status-code {
424 margin-inline-start: 3px !important;
426 margin-inline-end: -3em !important;
429 .requests-menu-status-icon {
430 background-color: #A09090;
433 margin-inline-start: 5px;
434 margin-inline-end: 5px;
436 border: 1px solid #000000;
437 transition: background-color 0.5s ease-in-out;
440 .side-menu-widget-item.selected .requests-menu-status-icon,
441 .request-list-item.selected .requests-menu-status-icon {
442 /* filter: brightness(1.3);*/
445 .requests-menu-status-icon:not([code]),
446 .requests-menu-status-icon:not([data-code]) {
447 background-color: var(--theme-content-color2);
450 .requests-menu-status-icon[code="cached"],
451 .requests-menu-status-icon[data-code="cached"] {
452 border: 2px solid var(--theme-content-color2);
453 background-color: transparent;
456 .requests-menu-status-icon[code^="1"],
457 .requests-menu-status-icon[data-code^="1"] {
458 background-color: var(--theme-highlight-blue);
461 .requests-menu-status-icon[code^="2"],
462 .requests-menu-status-icon[data-code^="2"] {
463 background-color: var(--theme-highlight-green);
466 /* 3xx are triangles */
467 .requests-menu-status-icon[code^="3"],
468 .requests-menu-status-icon[data-code^="3"] {
469 background-color: transparent;
472 border-left: 5px solid transparent;
473 border-right: 5px solid transparent;
474 border-bottom: 10px solid var(--theme-highlight-lightorange);
478 /* 4xx and 5xx are squares - error codes */
479 .requests-menu-status-icon[code^="4"],
480 .requests-menu-status-icon[data-code^="4"] {
481 background-color: var(--theme-highlight-red);
482 border-radius: 0; /* squares */
485 .requests-menu-status-icon[code^="5"],
486 .requests-menu-status-icon[data-code^="5"] {
487 background-color: var(--theme-highlight-pink);
489 transform: rotate(45deg);
492 /* Network requests table: waterfall header */
494 .requests-menu-waterfall {
496 padding-inline-start: 0;
499 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
500 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
501 padding-inline-start: 16px;
504 .requests-menu-timings-division {
507 padding-inline-start: 4px;
509 pointer-events: none;
510 box-sizing: border-box;
512 /* Allow the timing label to shrink if the container gets too narrow.
513 * The container width then is not limited by the content. */
517 .requests-menu-timings-division:first-child {
518 width: 98px; /* Substract 2px for borders */
521 .requests-menu-timings-division:not(:first-child) {
522 border-inline-start: 1px dashed;
523 /* margin-inline-start: -100px !important; / Don't affect layout. */
526 .requests-menu-timings-division:-moz-locale-dir(ltr) {
527 transform-origin: left center;
530 .requests-menu-timings-division:-moz-locale-dir(rtl) {
531 transform-origin: right center;
534 .requests-menu-timings-division {
535 border-inline-start-color: var(--theme-body-color) !important;
538 .requests-menu-timings-division[division-scale=second],
539 .requests-menu-timings-division[division-scale=minute],
540 .requests-menu-timings-division[data-division-scale=second],
541 .requests-menu-timings-division[data-division-scale=minute] {
545 /* Network requests table: waterfall items */
547 .requests-menu-subitem.requests-menu-waterfall {
548 padding-inline-start: 0;
549 padding-inline-end: 4px;
550 /* Background created on a <canvas> in js. */
551 /* @see devtools/client/netmonitor/netmonitor-view.js */
552 background-image: -moz-element(#waterfall-background);
553 background-repeat: repeat-y;
554 background-position: left center;
557 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
558 background-position: right center;
561 .requests-menu-timings {
565 transform: scaleX(var(--timings-scale));
568 .requests-menu-timings:-moz-locale-dir(ltr) {
569 transform-origin: left center;
572 .requests-menu-timings:-moz-locale-dir(rtl) {
573 transform-origin: right center;
576 .requests-menu-timings-total:-moz-locale-dir(ltr) {
577 transform-origin: left center;
580 .requests-menu-timings-total:-moz-locale-dir(rtl) {
581 transform-origin: right center;
584 .requests-menu-timings-total {
585 display: inline-block;
586 padding-inline-start: 4px;
590 /* This node should not be scaled - apply a reversed transformation */
591 transform: scaleX(var(--timings-rev-scale));
594 .requests-menu-timings-box {
595 display: inline-block;
599 .requests-menu-timings-box.blocked {
600 background-color: var(--timing-blocked-color);
603 .requests-menu-timings-box.dns {
604 background-color: var(--timing-dns-color);
607 .requests-menu-timings-box.connect {
608 background-color: var(--timing-connect-color);
611 .requests-menu-timings-box.send {
612 background-color: var(--timing-send-color);
615 .requests-menu-timings-box.wait {
616 background-color: var(--timing-wait-color);
619 .requests-menu-timings-box.receive {
620 background-color: var(--timing-receive-color);
625 #network-table .side-menu-widget-empty-text,
626 #network-table .side-menu-widget-container,
627 #network-table .request-list-empty-notice,
628 #network-table .request-list-container {
629 background-color: var(--theme-body-background);
632 #network-table .side-menu-widget-item,
635 border-top-color: transparent;
636 border-bottom-color: transparent;
640 .request-list-item.selected {
641 background-color: var(--theme-selection-background);
642 color: var(--theme-selection-color);
645 .side-menu-widget-item-contents {
649 .side-menu-widget-container {
650 box-shadow: none !important;
653 .side-menu-widget-item:not(.selected)[odd],
654 .request-list-item:not(.selected).odd {
655 background-color: var(--table-zebra-background);
658 .side-menu-widget-item:not(.selected):hover,
659 .request-list-item:not(.selected):hover {
660 background-color: var(--theme-selection-background-semitransparent);
665 .side-menu-widget-item.selected .requests-menu-method,
666 .request-list-item.selected .requests-menu-method {
667 color: var(--theme-selection-color);
670 /* Network request details */
672 #details-pane-toggle:-moz-locale-dir(ltr),
673 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
674 list-style-image: var(--theme-pane-collapse-image);
677 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
678 #details-pane-toggle:-moz-locale-dir(rtl) {
679 list-style-image: var(--theme-pane-expand-image);
682 #details-pane-toggle:-moz-locale-dir(ltr)::before,
683 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
684 background-image: var(--theme-pane-collapse-image);
687 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
688 #details-pane-toggle:-moz-locale-dir(rtl)::before {
689 background-image: var(--theme-pane-expand-image);
692 /* Network request details tabpanels */
695 background-color: var(--theme-sidebar-background);
697 color: var(--theme-body-color);
701 background-color: var(--theme-toolbar-background);
704 /* Summary tabpanel */
706 .tabpanel-summary-container {
710 .tabpanel-summary-label {
711 display: inline-block;
712 padding-inline-start: 4px;
713 padding-inline-end: 3px;
717 .tabpanel-summary-value {
719 padding-inline-start: 3px;
722 /* Headers tabpanel */
724 #headers-summary-status,
725 #headers-summary-version {
729 #headers-summary-size {
733 #headers-summary-resend {
735 margin-inline-end: 6px;
738 #toggle-raw-headers {
740 margin-inline-end: 6px;
743 .raw-response-textarea {
747 /* Response tabpanel */
749 #response-content-info-header {
752 background-color: var(--theme-highlight-red);
753 color: var(--theme-selection-color);
756 #response-content-image-box {
758 padding-bottom: 10px;
761 #response-content-image {
763 border: 1px dashed #A09090;
767 /* Preview tabpanel */
778 /* Timings tabpanel */
780 #timings-tabpanel .tabpanel-summary-container {
784 #timings-tabpanel .tabpanel-summary-label {
788 #timings-tabpanel .requests-menu-timings-container {
794 #timings-tabpanel .requests-menu-timings-offset {
795 transition: width 0.2s ease-out;
798 #timings-tabpanel .requests-menu-timings-box {
801 transition: width 0.2s ease-out;
804 #timings-tabpanel .requests-menu-timings-total {
805 transition: transform 0.2s ease-out;
808 /* Security tabpanel */
810 .security-info-section {
811 padding-inline-start: 1em;
816 -moz-user-select: text;
819 .security-warning-icon {
820 background-image: url("images/alerticon-warning.png");
821 background-size: 13px 12px;
822 margin-inline-start: 5px;
828 @media (min-resolution: 1.1dppx) {
829 .security-warning-icon {
830 background-image: url("images/alerticon-warning@2x.png");
834 /* Custom request form */
837 padding: 0.6em 0.5em;
848 #custom-method-value {
853 .requests-menu-filter-button {
854 /* -moz-appearance: none;
855 background: rgba(128,128,128,0.1);
861 color: var(--theme-body-color);*/
866 .requests-menu-filter-button:hover {
867 /* background: rgba(128,128,128,0.2);*/
870 .requests-menu-filter-button:hover:active {
871 /* background-color: var(--theme-selection-background-semitransparent);*/
874 /* Performance analysis buttons */
876 #requests-menu-network-summary-button {
882 border-color: transparent;
883 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
888 #requests-menu-network-summary-button > .summary-info-icon {
889 background-image: url(images/profiler-stopwatch.svg);
890 filter: var(--icon-filter);
895 #requests-menu-network-summary-button > .summary-info-text {
896 margin-inline-start: 0.5em;
899 #requests-menu-network-summary-button:hover > .summary-info-icon,
900 #requests-menu-network-summary-button:hover > .summary-info-text {
903 /* Performance analysis view */
905 #network-statistics-toolbar {
906 /* Make the toolbar invisible, it only hold the back button */
907 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
908 background-color: #000000;
914 #network-statistics-back-button {
922 border-inline-start: none;
925 #network-statistics-view-splitter {
926 /* border-color: rgba(0,0,0,0.2);*/
928 pointer-events: none;
931 #network-statistics-charts {
935 #network-statistics-charts {
936 background-color: var(--theme-sidebar-background);
939 #network-statistics-charts .pie-chart-container {
940 margin-inline-start: 3vw;
941 margin-inline-end: 1vw;
944 #network-statistics-charts .table-chart-container {
945 margin-inline-start: 1vw;
946 margin-inline-end: 3vw;
949 .chart-colored-blob[name=html] {
950 fill: var(--theme-highlight-bluegrey);
951 background: var(--theme-highlight-bluegrey);
954 .chart-colored-blob[name=css] {
955 fill: var(--theme-highlight-blue);
956 background: var(--theme-highlight-blue);
959 .chart-colored-blob[name=js] {
960 fill: var(--theme-highlight-lightorange);
961 background: var(--theme-highlight-lightorange);
964 .chart-colored-blob[name=xhr] {
965 fill: var(--theme-highlight-orange);
966 background: var(--theme-highlight-orange);
969 .chart-colored-blob[name=fonts] {
970 fill: var(--theme-highlight-darkpurple);
971 background: var(--theme-highlight-darkpurple);
974 .chart-colored-blob[name=images] {
975 fill: var(--theme-highlight-pink);
976 background: var(--theme-highlight-pink);
979 .chart-colored-blob[name=media] {
980 fill: var(--theme-highlight-green);
981 background: var(--theme-highlight-green);
984 .chart-colored-blob[name=flash] {
985 fill: var(--theme-highlight-red);
986 background: var(--theme-highlight-red);
989 .table-chart-row-label[name=cached] {
993 .table-chart-row-label[name=count] {
998 .table-chart-row-label[name=label] {
1002 .table-chart-row-label[name=size] {
1006 .table-chart-row-label[name=time] {
1010 /* Responsive sidebar */
1011 @media (max-width: 700px) {
1012 #requests-menu-toolbar {
1016 .requests-menu-header-button {
1022 margin: 0 !important;
1023 /* To prevent all the margin hacks to hide the sidebar. */
1026 .requests-menu-status {
1031 .requests-menu-status-code {
1035 .requests-menu-method,
1036 .requests-menu-method-box {
1041 .requests-menu-icon-and-file {
1045 .requests-menu-security-and-domain {
1049 .requests-menu-cause,
1050 .requests-menu-type,
1051 .requests-menu-transferred,
1052 .requests-menu-size {
1057 .requests-menu-waterfall {
1062 /* Platform overrides (copied in from the old platform specific files) */
1063 :root[platform="win"] .requests-menu-header-button > .button-box {
1067 :root[platform="win"] .requests-menu-timings-division {
1072 :root[platform="linux"] #headers-summary-resend {
1076 :root[platform="linux"] #toggle-raw-headers {
1080 /* Responsive sidebar */
1081 @media (max-width: 700px) {
1082 :root[platform="linux"] .requests-menu-header-button {
1087 /* Overwrite tree-view cell colon and use l10n string instead */
1088 .treeTable .treeLabelCell::after {
1092 /* Layout additional warning icon in tree value cell */
1093 .security-info-value {
1097 .security-info-value .textbox-input {
1098 text-overflow: ellipsis;
1103 margin-inline-end: 2px;
1106 .security-info-value .textbox-input:focus {
1108 box-shadow: var(--theme-focus-box-shadow-textbox);
1111 .treeTable .treeLabel {
1115 /* Customize default tree table style to align with devtools theme */
1116 .theme-light .treeTable .treeLabel,
1117 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1118 color: var(--theme-highlight-red);
1121 .theme-dark .treeTable .treeLabel,
1122 .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1123 color: var(--theme-highlight-purple);
1126 .theme-firebug .treeTable .treeLabel {
1127 color: var(--theme-body-color);
1130 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1132 text-decoration: none;
1136 * FIXME: normal html block element cannot fill outer XUL element
1137 * This workaround should be removed after sidebar is migrated to react
1139 #react-security-tabpanel-hook,
1140 #react-timings-tabpanel-hook {
1142 -moz-box-orient: vertical;