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 */
8 @import "resource://devtools/client/shared/components/tabs/tabs.css";
9 @import "resource://devtools/client/shared/components/tabs/tabbar.css";
21 .devtools-toolbar-container {
23 justify-content: space-between;
26 .devtools-toolbar-group {
34 * Collapsed details pane needs to be truly hidden to prevent both accessibility
35 * tools and keyboard from accessing its contents.
37 #details-pane.pane-collapsed {
41 #details-pane-toggle[disabled] {
49 #response-content-image-box {
53 #network-statistics-charts {
57 .cropped-textbox .textbox-input {
58 /* workaround for textbox not supporting the @crop attribute */
59 text-overflow: ellipsis;
62 /* Responsive sidebar */
63 @media (max-width: 700px) {
66 #details-pane.pane-collapsed,
67 .requests-menu-waterfall,
68 #requests-menu-network-summary-button > .summary-info-text {
75 --table-splitter-color: #A09090;
76 --table-zebra-background: rgba(255,159,0,0.1);
78 --timing-blocked-color: #FF0000;
79 --timing-dns-color: #E7ADE7; /* pink */
80 --timing-connect-color: #FF9F00; /* orange */
81 --timing-send-color: #FFCF00; /* light blue */
82 --timing-wait-color: #9C9CFF; /* blue grey */
83 --timing-receive-color: #A09090; /* green */
85 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
86 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
91 -moz-box-orient: vertical;
96 .request-list-container {
98 -moz-box-orient: vertical;
102 #requests-menu-empty-notice,
103 .request-list-empty-notice {
109 #notice-perf-message {
113 #requests-menu-perf-notice-button {
116 list-style-image: url("images/profiler-stopwatch.svg");
118 vertical-align: middle;
121 #requests-menu-perf-notice-button::before {
122 background-image: url("images/profiler-stopwatch.svg");
125 /* Make sure the icon is visible on Linux (to overwrite a rule
126 in xul.css that hides the icon if there is no label.
127 See also bug 1278050. */
128 #requests-menu-perf-notice-button .button-icon {
132 #requests-menu-perf-notice-button .button-text {
136 #requests-menu-reload-notice-button {
144 /* Network requests table */
146 #requests-menu-toolbar {
147 background: var(--theme-capped-toolbar-background);
150 #requests-menu-toolbar::before, #requests-menu-toolbar::after {
151 display: none; /* Remove caps from this toolbar (and above background rule make the background fill it completely) */
154 #requests-menu-filter-buttons {
159 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
160 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
164 .requests-menu-contents {
166 -moz-box-orient: vertical;
172 --timings-rev-scale: 1;
175 .requests-menu-subitem {
178 box-sizing: border-box;
186 text-overflow: ellipsis;
189 .requests-menu-header {
194 #requests-menu-status-button,
195 .requests-menu-header-button {
199 -moz-appearance: none;
200 background-color: transparent;
201 border-image: linear-gradient(transparent 15%,
202 var(--theme-toolbar-background) 15%,
203 var(--theme-toolbar-background) 85%,
204 transparent 85%) 1 1;
207 border-inline-start-width: 1px;
214 padding-inline-start: 16px;
215 padding-inline-end: 0;
218 font-weight: inherit !important;
221 .requests-menu-header-button::-moz-focus-inner {
226 .requests-menu-header:first-child .requests-menu-header-button {
230 .requests-menu-header-button:hover {
231 background-color: var(--theme-hover-background);
232 color: var(--theme-hover-color);
235 .requests-menu-header-button:hover:active {
236 background-color: var(--theme-active-background);
237 color: var(--theme-active-color);
240 .requests-menu-header-button > .button-text {
244 text-overflow: ellipsis;
247 .requests-menu-header-button > .button-box > .button-icon,
248 #requests-menu-waterfall-image {
250 -moz-box-ordinal-group: 2;
252 .requests-menu-header-button > .button-box > .button-icon,
253 #requests-menu-waterfall-image,
254 .requests-menu-header-button > .button-icon {
257 margin-inline-start: 3px;
258 margin-inline-end: 6px;
262 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
263 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
264 list-style-image: var(--sort-ascending-image);
267 .requests-menu-header-button[data-sorted=ascending] > .button-icon {
268 background-image: var(--sort-ascending-image);
271 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
272 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
273 list-style-image: var(--sort-descending-image);
276 .requests-menu-header-button[data-sorted=descending] > .button-icon {
277 background-image: var(--sort-descending-image);
280 .requests-menu-header-button > .button-box > .button-text,
281 #requests-menu-waterfall-label-wrapper {
285 .requests-menu-waterfall-label-wrapper {
289 .requests-menu-header-button[sorted],
290 .requests-menu-header-button[sorted]:hover,
291 .requests-menu-header-button[data-sorted],
292 .requests-menu-header-button[data-sorted]:hover {
293 background-color: var(--theme-selection-background);
294 color: var(--theme-selection-color);
297 .requests-menu-header-button[sorted],
298 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button,
299 .requests-menu-header-button[data-sorted],
300 .requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
301 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
304 #requests-menu-status-button {
308 #requests-menu-status-button > .button-box {
312 /* Network requests table: specific column dimensions */
314 .requests-menu-status {
320 .requests-menu-method,
321 .requests-menu-method-box {
327 .requests-menu-icon-and-file {
331 .requests-menu-icon {
332 background: transparent;
335 margin-inline-end: 4px;
338 .requests-menu-icon {
339 outline: 1px solid var(--table-splitter-color);
342 .requests-menu-security-and-domain {
346 .requests-security-state-icon {
350 margin-inline-end: 4px;
353 .side-menu-widget-item.selected .requests-security-state-icon,
354 .request-list-item.selected .requests-security-state-icon {
355 /* filter: brightness(1.3);*/
358 .security-state-insecure {
359 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
362 .security-state-secure {
363 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
366 .security-state-weak {
367 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
370 .security-state-broken {
371 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
374 .security-state-local {
375 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
379 .requests-menu-size {
383 justify-content: center;
386 .requests-menu-transferred {
389 justify-content: center;
392 .requests-menu-cause {
397 .requests-menu-cause-stack {
398 background-color: var(--theme-body-color-alt);
399 color: var(--theme-body-background);
406 margin-inline-end: 3px;
407 -moz-user-select: none;
410 .requests-menu-transferred {
416 .side-menu-widget-item.selected .requests-menu-transferred.theme-comment,
417 .request-list-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;
438 box-sizing: border-box;
441 .side-menu-widget-item.selected .requests-menu-status-icon,
442 .request-list-item.selected .requests-menu-status-icon {
443 /* filter: brightness(1.3);*/
446 .requests-menu-status-icon:not([code]),
447 .requests-menu-status-icon:not([data-code]) {
448 background-color: var(--theme-content-color2);
451 .requests-menu-status-icon[code="cached"],
452 .requests-menu-status-icon[data-code="cached"] {
453 border: 2px solid var(--theme-content-color2);
454 background-color: transparent;
457 .requests-menu-status-icon[code^="1"],
458 .requests-menu-status-icon[data-code^="1"] {
459 background-color: var(--theme-highlight-blue);
462 .requests-menu-status-icon[code^="2"],
463 .requests-menu-status-icon[data-code^="2"] {
464 background-color: var(--theme-highlight-green);
467 /* 3xx are triangles */
468 .requests-menu-status-icon[code^="3"],
469 .requests-menu-status-icon[data-code^="3"] {
470 background-color: transparent;
473 border-left: 5px solid transparent;
474 border-right: 5px solid transparent;
475 border-bottom: 10px solid var(--theme-highlight-lightorange);
479 /* 4xx and 5xx are squares - error codes */
480 .requests-menu-status-icon[code^="4"],
481 .requests-menu-status-icon[data-code^="4"] {
482 background-color: var(--theme-highlight-red);
483 border-radius: 0; /* squares */
486 .requests-menu-status-icon[code^="5"],
487 .requests-menu-status-icon[data-code^="5"] {
488 background-color: var(--theme-highlight-pink);
490 transform: rotate(45deg);
493 /* Network requests table: waterfall header */
495 .requests-menu-waterfall {
497 padding-inline-start: 0;
500 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
501 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
502 padding-inline-start: 16px;
505 .requests-menu-timings-division {
508 padding-inline-start: 4px;
510 pointer-events: none;
511 box-sizing: border-box;
513 /* Allow the timing label to shrink if the container gets too narrow.
514 * The container width then is not limited by the content. */
518 .requests-menu-timings-division:first-child {
519 width: 98px; /* Substract 2px for borders */
522 .requests-menu-timings-division:not(:first-child) {
523 border-inline-start: 1px dashed;
524 /* margin-inline-start: -100px !important; / Don't affect layout. */
527 .requests-menu-timings-division:-moz-locale-dir(ltr) {
528 transform-origin: left center;
531 .requests-menu-timings-division:-moz-locale-dir(rtl) {
532 transform-origin: right center;
535 .requests-menu-timings-division {
536 border-inline-start-color: var(--theme-body-color) !important;
539 .requests-menu-timings-division[division-scale=second],
540 .requests-menu-timings-division[division-scale=minute],
541 .requests-menu-timings-division[data-division-scale=second],
542 .requests-menu-timings-division[data-division-scale=minute] {
546 /* Network requests table: waterfall items */
548 .requests-menu-subitem.requests-menu-waterfall {
549 padding-inline-start: 0;
550 padding-inline-end: 4px;
551 /* Background created on a <canvas> in js. */
552 /* @see devtools/client/netmonitor/netmonitor-view.js */
553 background-image: -moz-element(#waterfall-background);
554 background-repeat: repeat-y;
555 background-position: left center;
558 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
559 background-position: right center;
562 .requests-menu-timings {
566 transform: scaleX(var(--timings-scale));
569 .requests-menu-timings:-moz-locale-dir(ltr) {
570 transform-origin: left center;
573 .requests-menu-timings:-moz-locale-dir(rtl) {
574 transform-origin: right center;
577 .requests-menu-timings-total:-moz-locale-dir(ltr) {
578 transform-origin: left center;
581 .requests-menu-timings-total:-moz-locale-dir(rtl) {
582 transform-origin: right center;
585 .requests-menu-timings-total {
586 display: inline-block;
587 padding-inline-start: 4px;
591 /* This node should not be scaled - apply a reversed transformation */
592 transform: scaleX(var(--timings-rev-scale));
595 .requests-menu-timings-box {
596 display: inline-block;
600 .requests-menu-timings-box.blocked {
601 background-color: var(--timing-blocked-color);
604 .requests-menu-timings-box.dns {
605 background-color: var(--timing-dns-color);
608 .requests-menu-timings-box.connect {
609 background-color: var(--timing-connect-color);
612 .requests-menu-timings-box.send {
613 background-color: var(--timing-send-color);
616 .requests-menu-timings-box.wait {
617 background-color: var(--timing-wait-color);
620 .requests-menu-timings-box.receive {
621 background-color: var(--timing-receive-color);
626 #network-table .side-menu-widget-empty-text,
627 #network-table .side-menu-widget-container,
628 #network-table .request-list-empty-notice,
629 #network-table .request-list-container {
630 background-color: var(--theme-body-background);
633 #network-table .side-menu-widget-item,
636 border-top-color: transparent;
637 border-bottom-color: transparent;
641 .request-list-item.selected {
642 background-color: var(--theme-selection-background);
643 color: var(--theme-selection-color);
646 .side-menu-widget-item-contents {
650 .side-menu-widget-container {
651 box-shadow: none !important;
654 .side-menu-widget-item:not(.selected)[odd],
655 .request-list-item:not(.selected).odd {
656 background-color: var(--table-zebra-background);
659 .side-menu-widget-item:not(.selected):hover,
660 .request-list-item:not(.selected):hover {
661 background-color: var(--theme-selection-background-semitransparent);
666 .side-menu-widget-item.selected .requests-menu-method,
667 .request-list-item.selected .requests-menu-method {
668 color: var(--theme-selection-color);
671 /* Network request details */
673 #details-pane-toggle:-moz-locale-dir(ltr),
674 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
675 list-style-image: var(--theme-pane-collapse-image);
678 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
679 #details-pane-toggle:-moz-locale-dir(rtl) {
680 list-style-image: var(--theme-pane-expand-image);
683 #details-pane-toggle:-moz-locale-dir(ltr)::before,
684 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
685 background-image: var(--theme-pane-collapse-image);
688 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
689 #details-pane-toggle:-moz-locale-dir(rtl)::before {
690 background-image: var(--theme-pane-expand-image);
693 /* Network request details tabpanels */
696 background-color: var(--theme-sidebar-background);
698 color: var(--theme-body-color);
702 background-color: var(--theme-toolbar-background);
705 /* Summary tabpanel */
707 .tabpanel-summary-container {
711 .tabpanel-summary-label {
712 display: inline-block;
713 padding-inline-start: 4px;
714 padding-inline-end: 3px;
718 .tabpanel-summary-value {
720 padding-inline-start: 3px;
723 /* Headers tabpanel */
725 #headers-summary-status,
726 #headers-summary-version {
730 #headers-summary-size {
734 #headers-summary-resend {
736 margin-inline-end: 6px;
739 #toggle-raw-headers {
741 margin-inline-end: 6px;
744 .raw-response-textarea {
748 /* Response tabpanel */
750 #response-content-info-header,
751 .response-error-header {
754 background-color: var(--theme-highlight-red);
755 color: var(--theme-selection-color);
758 #response-content-image-box {
760 padding-bottom: 10px;
763 #response-content-image {
765 border: 1px dashed #A09090;
769 .response-image-box {
771 flex-direction: column;
772 justify-content: center;
780 border: 1px dashed #A09090;
786 /* Preview tabpanel */
797 /* Timings tabpanel */
799 #timings-tabpanel .tabpanel-summary-container,
804 #timings-tabpanel .tabpanel-summary-label,
809 #timings-tabpanel .requests-menu-timings-container,
810 .requests-menu-timings-container {
816 #timings-tabpanel .requests-menu-timings-offset,
817 .requests-menu-timings-offset {
818 transition: width 0.2s ease-out;
821 #timings-tabpanel .requests-menu-timings-box,
822 .requests-menu-timings-box {
825 transition: width 0.2s ease-out;
828 #timings-tabpanel .requests-menu-timings-total {
829 transition: transform 0.2s ease-out;
832 /* Security tabpanel */
834 /* Overwrite tree-view cell colon `:` for security panel and tree section */
835 .security-panel .treeTable .treeLabelCell::after,
836 .treeTable .tree-section .treeLabelCell::after {
840 /* Layout additional warning icon in tree value cell */
841 .security-info-value {
845 .security-info-section {
846 padding-inline-start: 1em;
851 -moz-user-select: text;
854 .security-warning-icon {
855 background-image: url("images/alerticon-warning.png");
856 background-size: 13px 12px;
857 margin-inline-start: 5px;
863 @media (min-resolution: 1.1dppx) {
864 .security-warning-icon {
865 background-image: url("images/alerticon-warning@2x.png");
869 /* Custom request form */
872 padding: 0.6em 0.5em;
883 #custom-method-value {
888 .requests-menu-filter-button {
889 /* -moz-appearance: none;
890 background: rgba(128,128,128,0.1);
896 color: var(--theme-body-color);*/
901 .requests-menu-filter-button:hover {
902 /* background: rgba(128,128,128,0.2);*/
905 .requests-menu-filter-button:hover:active {
906 /* background-color: var(--theme-selection-background-semitransparent);*/
909 /* Performance analysis buttons */
911 #requests-menu-network-summary-button {
917 border-color: transparent;
918 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
923 #requests-menu-network-summary-button > .summary-info-icon {
924 background-image: url(images/profiler-stopwatch.svg);
925 filter: var(--icon-filter);
930 #requests-menu-network-summary-button > .summary-info-text {
931 margin-inline-start: 0.5em;
934 #requests-menu-network-summary-button:hover > .summary-info-icon,
935 #requests-menu-network-summary-button:hover > .summary-info-text {
938 /* Performance analysis view */
940 #network-statistics-view {
944 #network-statistics-toolbar {
945 /* Make the toolbar invisible, it only hold the back button */
946 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
947 background-color: #000000;
953 #network-statistics-back-button {
961 border-inline-start: none;
964 #network-statistics-view-splitter {
965 /* border-color: rgba(0,0,0,0.2);*/
967 pointer-events: none;
970 #network-statistics-charts {
974 #network-statistics-charts {
975 background-color: var(--theme-sidebar-background);
978 #network-statistics-charts .pie-chart-container {
979 margin-inline-start: 3vw;
980 margin-inline-end: 1vw;
983 #network-statistics-charts .table-chart-container {
984 margin-inline-start: 1vw;
985 margin-inline-end: 3vw;
988 .chart-colored-blob[name=html] {
989 fill: var(--theme-highlight-bluegrey);
990 background: var(--theme-highlight-bluegrey);
993 .chart-colored-blob[name=css] {
994 fill: var(--theme-highlight-blue);
995 background: var(--theme-highlight-blue);
998 .chart-colored-blob[name=js] {
999 fill: var(--theme-highlight-lightorange);
1000 background: var(--theme-highlight-lightorange);
1003 .chart-colored-blob[name=xhr] {
1004 fill: var(--theme-highlight-orange);
1005 background: var(--theme-highlight-orange);
1008 .chart-colored-blob[name=fonts] {
1009 fill: var(--theme-highlight-darkpurple);
1010 background: var(--theme-highlight-darkpurple);
1013 .chart-colored-blob[name=images] {
1014 fill: var(--theme-highlight-pink);
1015 background: var(--theme-highlight-pink);
1018 .chart-colored-blob[name=media] {
1019 fill: var(--theme-highlight-green);
1020 background: var(--theme-highlight-green);
1023 .chart-colored-blob[name=flash] {
1024 fill: var(--theme-highlight-red);
1025 background: var(--theme-highlight-red);
1028 .table-chart-row-label[name=cached] {
1032 .table-chart-row-label[name=count] {
1037 .table-chart-row-label[name=label] {
1041 .table-chart-row-label[name=size] {
1045 .table-chart-row-label[name=time] {
1049 /* Responsive sidebar */
1050 @media (max-width: 700px) {
1052 #details-pane-toggle,
1053 #details-pane.pane-collapsed,
1054 #requests-menu-network-summary-button > .summary-info-text {
1058 #requests-menu-toolbar {
1062 .requests-menu-header-button {
1068 margin: 0 !important;
1069 /* To prevent all the margin hacks to hide the sidebar. */
1072 .requests-menu-status {
1077 .requests-menu-status-code {
1081 .requests-menu-method,
1082 .requests-menu-method-box {
1087 .requests-menu-icon-and-file {
1091 .requests-menu-security-and-domain {
1095 .requests-menu-cause,
1096 .requests-menu-type,
1097 .requests-menu-transferred,
1098 .requests-menu-size {
1103 .requests-menu-waterfall {
1108 /* Platform overrides (copied in from the old platform specific files) */
1109 :root[platform="win"] .requests-menu-header-button > .button-box {
1113 :root[platform="win"] .requests-menu-timings-division {
1118 :root[platform="linux"] #headers-summary-resend {
1122 :root[platform="linux"] #toggle-raw-headers {
1126 /* Responsive sidebar */
1127 @media (max-width: 700px) {
1128 :root[platform="linux"] .requests-menu-header-button {
1134 text-overflow: ellipsis;
1141 /* Overwrite tree-view cell colon and use l10n string instead */
1142 .treeTable .treeLabelCell::after {
1146 .treeTable .textbox-input:focus {
1148 box-shadow: var(--theme-focus-box-shadow-textbox);*/
1154 flex-direction: column;
1159 /* Layout additional warning icon in tree value cell */
1160 .security-info-value {
1164 .security-info-value .textbox-input {
1165 text-overflow: ellipsis;
1170 margin-inline-end: 2px;
1173 .security-info-value .textbox-input:focus {
1175 box-shadow: var(--theme-focus-box-shadow-textbox);
1178 .properties-view .searchbox-section {
1182 .properties-view .devtools-searchbox {
1186 .properties-view .devtools-searchbox input {
1195 /* Make treeTable fill parent element and scrollable */
1196 .tree-container .treeTable {
1206 /* Apply flex to table tbody in order to fill available vertical space */
1207 .tree-container .treeTable tbody {
1209 flex-direction: column;
1210 /* Apply flex to table will create an anonymous table element outside of tbody
1211 * See also http://stackoverflow.com/a/30851678
1212 * Therefore, we set height with this magic number in order to remove the
1213 * redundant scrollbar when source editor appears.
1215 height: calc(100% - 4px);
1218 .tree-container .treeTable tr {
1221 /* Make right td fill available horizontal space */
1222 .tree-container .treeTable td:last-child {
1226 /* If there is a source editor shows up in the last row of TreeView,
1227 * it should occupy the available vertical space.
1229 .tree-container .treeTable .editor-row-container,
1230 .tree-container .treeTable tr:last-child td[colspan="2"] {
1235 .properties-view .devtools-searchbox,
1236 .tree-container .treeTable .tree-section {
1238 background-color: var(--theme-toolbar-background);
1241 .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
1242 border-top: 1px solid var(--theme-splitter-color);
1245 .properties-view .devtools-searchbox,
1246 .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
1247 border-bottom: 1px solid var(--theme-splitter-color);
1250 .tree-container .treeTable .tree-section > * {
1251 vertical-align: middle;
1254 .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
1255 .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover {
1256 color: var(--theme-body-color-alt);
1259 .tree-container .treeTable .treeValueCell {
1260 /* FIXME: Make value cell can be reduced to shorter width */
1262 padding-inline-end: 5px;
1265 .headers-summary input:not([type="button"]) {
1270 margin-inline-end: 2px;
1273 .headers-summary input:not([type="button"]):focus {
1275 box-shadow: var(--theme-focus-box-shadow-textbox);*/
1276 transition: all 0.2s ease-in-out;
1279 .headers-summary-label,
1280 .tree-container .objectBox {
1281 white-space: nowrap;
1287 align-items: center;
1290 .headers-summary .tool-button {
1291 /* border: 1px solid transparent;
1292 color: var(--theme-body-color);
1293 transition: background 0.05s ease-in-out;*/
1294 margin-inline-end: 6px;
1298 .headers-summary .requests-menu-status-icon {
1302 .headers-summary .raw-headers-container {
1307 .headers-summary .raw-headers {
1312 .headers-summary .raw-headers textarea {
1317 box-sizing: border-box;
1320 .headers-summary .raw-headers .tabpanel-summary-label {
1325 color: var(--theme-body-color-alt);
1335 .panel-container iframe {
1341 .treeTable .treeLabel {
1345 /* Customize default tree table style to align with devtools theme */
1346 .treeTable .treeLabel,
1347 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1348 color: var(--theme-highlight-purple);
1351 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1353 text-decoration: none;
1357 * FIXME: normal html block element cannot fill outer XUL element
1358 * This workaround should be removed after sidebar is migrated to react
1360 #react-security-tabpanel-hook,
1361 #react-timings-tabpanel-hook {
1363 -moz-box-orient: vertical;
1368 * FIXME: normal html block element cannot fill outer XUL element
1369 * This workaround should be removed after netmonitor is migrated to react
1371 #react-details-panel-hook {
1373 flex-direction: column;
1376 #network-statistics-charts,
1377 #primed-cache-chart,
1378 #empty-cache-chart {