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;
263 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
264 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
265 list-style-image: var(--sort-ascending-image);
268 .requests-menu-header-button[data-sorted=ascending] > .button-icon {
269 background-image: var(--sort-ascending-image);
272 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
273 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
274 list-style-image: var(--sort-descending-image);
277 .requests-menu-header-button[data-sorted=descending] > .button-icon {
278 background-image: var(--sort-descending-image);
281 .requests-menu-header-button > .button-box > .button-text,
282 #requests-menu-waterfall-label-wrapper {
286 .requests-menu-waterfall-label-wrapper {
290 .requests-menu-header-button[sorted],
291 .requests-menu-header-button[sorted]:hover,
292 .requests-menu-header-button[data-sorted],
293 .requests-menu-header-button[data-sorted]:hover {
294 background-color: var(--theme-selection-background);
295 color: var(--theme-selection-color);
298 .requests-menu-header-button[sorted],
299 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button,
300 .requests-menu-header-button[data-sorted],
301 .requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
302 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
305 #requests-menu-status-button {
309 #requests-menu-status-button > .button-box {
313 /* Network requests table: specific column dimensions */
315 .requests-menu-status {
321 .requests-menu-method,
322 .requests-menu-method-box {
328 .requests-menu-icon-and-file {
332 .requests-menu-icon {
333 background: transparent;
336 margin-inline-end: 4px;
339 .requests-menu-icon {
340 outline: 1px solid var(--table-splitter-color);
343 .requests-menu-security-and-domain {
347 .requests-security-state-icon {
351 margin-inline-end: 4px;
354 .side-menu-widget-item.selected .requests-security-state-icon,
355 .request-list-item.selected .requests-security-state-icon {
356 /* filter: brightness(1.3);*/
359 .security-state-insecure {
360 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
363 .security-state-secure {
364 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
367 .security-state-weak {
368 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
371 .security-state-broken {
372 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
375 .security-state-local {
376 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
380 .requests-menu-size {
384 justify-content: center;
387 .requests-menu-transferred {
390 justify-content: center;
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 .request-list-item.selected .requests-menu-transferred.theme-comment {
419 color: var(--theme-selection-color);
422 /* Network requests table: status codes */
424 .requests-menu-status-code {
425 margin-inline-start: 3px !important;
427 margin-inline-end: -3em !important;
430 .requests-menu-status-icon {
431 background-color: #A09090;
434 margin-inline-start: 5px;
435 margin-inline-end: 5px;
437 border: 1px solid #000000;
438 transition: background-color 0.5s ease-in-out;
439 box-sizing: border-box;
442 .side-menu-widget-item.selected .requests-menu-status-icon,
443 .request-list-item.selected .requests-menu-status-icon {
444 /* filter: brightness(1.3);*/
447 .requests-menu-status-icon:not([code]),
448 .requests-menu-status-icon:not([data-code]) {
449 background-color: var(--theme-content-color2);
452 .requests-menu-status-icon[code="cached"],
453 .requests-menu-status-icon[data-code="cached"] {
454 border: 2px solid var(--theme-content-color2);
455 background-color: transparent;
458 .requests-menu-status-icon[code^="1"],
459 .requests-menu-status-icon[data-code^="1"] {
460 background-color: var(--theme-highlight-blue);
463 .requests-menu-status-icon[code^="2"],
464 .requests-menu-status-icon[data-code^="2"] {
465 background-color: var(--theme-highlight-green);
468 /* 3xx are triangles */
469 .requests-menu-status-icon[code^="3"],
470 .requests-menu-status-icon[data-code^="3"] {
471 background-color: transparent;
474 border-left: 5px solid transparent;
475 border-right: 5px solid transparent;
476 border-bottom: 10px solid var(--theme-highlight-lightorange);
480 /* 4xx and 5xx are squares - error codes */
481 .requests-menu-status-icon[code^="4"],
482 .requests-menu-status-icon[data-code^="4"] {
483 background-color: var(--theme-highlight-red);
484 border-radius: 0; /* squares */
487 .requests-menu-status-icon[code^="5"],
488 .requests-menu-status-icon[data-code^="5"] {
489 background-color: var(--theme-highlight-pink);
491 transform: rotate(45deg);
494 /* Network requests table: waterfall header */
496 .requests-menu-waterfall {
498 padding-inline-start: 0;
501 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
502 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
503 padding-inline-start: 16px;
506 .requests-menu-timings-division {
509 padding-inline-start: 4px;
511 pointer-events: none;
512 box-sizing: border-box;
514 /* Allow the timing label to shrink if the container gets too narrow.
515 * The container width then is not limited by the content. */
519 .requests-menu-timings-division:first-child {
520 width: 98px; /* Substract 2px for borders */
523 .requests-menu-timings-division:not(:first-child) {
524 border-inline-start: 1px dashed;
525 /* margin-inline-start: -100px !important; / Don't affect layout. */
528 .requests-menu-timings-division:-moz-locale-dir(ltr) {
529 transform-origin: left center;
532 .requests-menu-timings-division:-moz-locale-dir(rtl) {
533 transform-origin: right center;
536 .requests-menu-timings-division {
537 border-inline-start-color: var(--theme-body-color) !important;
540 .requests-menu-timings-division[division-scale=second],
541 .requests-menu-timings-division[division-scale=minute],
542 .requests-menu-timings-division[data-division-scale=second],
543 .requests-menu-timings-division[data-division-scale=minute] {
547 /* Network requests table: waterfall items */
549 .requests-menu-subitem.requests-menu-waterfall {
550 padding-inline-start: 0;
551 padding-inline-end: 4px;
552 /* Background created on a <canvas> in js. */
553 /* @see devtools/client/netmonitor/netmonitor-view.js */
554 background-image: -moz-element(#waterfall-background);
555 background-repeat: repeat-y;
556 background-position: left center;
559 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
560 background-position: right center;
563 .requests-menu-timings {
567 transform: scaleX(var(--timings-scale));
570 .requests-menu-timings:-moz-locale-dir(ltr) {
571 transform-origin: left center;
574 .requests-menu-timings:-moz-locale-dir(rtl) {
575 transform-origin: right center;
578 .requests-menu-timings-total:-moz-locale-dir(ltr) {
579 transform-origin: left center;
582 .requests-menu-timings-total:-moz-locale-dir(rtl) {
583 transform-origin: right center;
586 .requests-menu-timings-total {
587 display: inline-block;
588 padding-inline-start: 4px;
592 /* This node should not be scaled - apply a reversed transformation */
593 transform: scaleX(var(--timings-rev-scale));
596 .requests-menu-timings-box {
597 display: inline-block;
601 .requests-menu-timings-box.blocked {
602 background-color: var(--timing-blocked-color);
605 .requests-menu-timings-box.dns {
606 background-color: var(--timing-dns-color);
609 .requests-menu-timings-box.connect {
610 background-color: var(--timing-connect-color);
613 .requests-menu-timings-box.send {
614 background-color: var(--timing-send-color);
617 .requests-menu-timings-box.wait {
618 background-color: var(--timing-wait-color);
621 .requests-menu-timings-box.receive {
622 background-color: var(--timing-receive-color);
627 #network-table .side-menu-widget-empty-text,
628 #network-table .side-menu-widget-container,
629 #network-table .request-list-empty-notice,
630 #network-table .request-list-container {
631 background-color: var(--theme-body-background);
634 #network-table .side-menu-widget-item,
637 border-top-color: transparent;
638 border-bottom-color: transparent;
642 .request-list-item.selected {
643 background-color: var(--theme-selection-background);
644 color: var(--theme-selection-color);
647 .side-menu-widget-item-contents {
651 .side-menu-widget-container {
652 box-shadow: none !important;
655 .side-menu-widget-item:not(.selected)[odd],
656 .request-list-item:not(.selected).odd {
657 background-color: var(--table-zebra-background);
660 .side-menu-widget-item:not(.selected):hover,
661 .request-list-item:not(.selected):hover {
662 background-color: var(--theme-selection-background-semitransparent);
667 .side-menu-widget-item.selected .requests-menu-method,
668 .request-list-item.selected .requests-menu-method {
669 color: var(--theme-selection-color);
672 /* Network request details */
674 #details-pane-toggle:-moz-locale-dir(ltr),
675 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
676 list-style-image: var(--theme-pane-collapse-image);
679 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
680 #details-pane-toggle:-moz-locale-dir(rtl) {
681 list-style-image: var(--theme-pane-expand-image);
684 #details-pane-toggle:-moz-locale-dir(ltr)::before,
685 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
686 background-image: var(--theme-pane-collapse-image);
689 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
690 #details-pane-toggle:-moz-locale-dir(rtl)::before {
691 background-image: var(--theme-pane-expand-image);
694 /* Network request details tabpanels */
697 background-color: var(--theme-sidebar-background);
699 color: var(--theme-body-color);
703 background-color: var(--theme-toolbar-background);
706 /* Summary tabpanel */
708 .tabpanel-summary-container {
712 .tabpanel-summary-label {
713 display: inline-block;
714 padding-inline-start: 4px;
715 padding-inline-end: 3px;
719 .tabpanel-summary-value {
721 padding-inline-start: 3px;
724 /* Headers tabpanel */
726 #headers-summary-status,
727 #headers-summary-version {
731 #headers-summary-size {
735 #headers-summary-resend {
737 margin-inline-end: 6px;
740 #toggle-raw-headers {
742 margin-inline-end: 6px;
745 .raw-response-textarea {
749 /* Response tabpanel */
751 #response-content-info-header,
752 .response-error-header {
755 background-color: var(--theme-highlight-red);
756 color: var(--theme-selection-color);
759 #response-content-image-box {
761 padding-bottom: 10px;
764 #response-content-image {
766 border: 1px dashed #A09090;
770 .response-image-box {
772 flex-direction: column;
773 justify-content: center;
781 border: 1px dashed #A09090;
787 /* Preview tabpanel */
798 /* Timings tabpanel */
800 #timings-tabpanel .tabpanel-summary-container,
805 #timings-tabpanel .tabpanel-summary-label,
810 #timings-tabpanel .requests-menu-timings-container,
811 .requests-menu-timings-container {
817 #timings-tabpanel .requests-menu-timings-offset,
818 .requests-menu-timings-offset {
819 transition: width 0.2s ease-out;
822 #timings-tabpanel .requests-menu-timings-box,
823 .requests-menu-timings-box {
826 transition: width 0.2s ease-out;
829 #timings-tabpanel .requests-menu-timings-total {
830 transition: transform 0.2s ease-out;
833 /* Security tabpanel */
835 /* Overwrite tree-view cell colon `:` for security panel and tree section */
836 .security-panel .treeTable .treeLabelCell::after,
837 .treeTable .tree-section .treeLabelCell::after {
841 /* Layout additional warning icon in tree value cell */
842 .security-info-value {
846 .security-info-section {
847 padding-inline-start: 1em;
852 -moz-user-select: text;
855 .security-warning-icon {
856 background-image: url("images/alerticon-warning.png");
857 background-size: 13px 12px;
858 margin-inline-start: 5px;
864 @media (min-resolution: 1.1dppx) {
865 .security-warning-icon {
866 background-image: url("images/alerticon-warning@2x.png");
870 /* Custom request form */
873 padding: 0.6em 0.5em;
884 #custom-method-value {
889 .requests-menu-filter-button {
890 /* -moz-appearance: none;
891 background: rgba(128,128,128,0.1);
897 color: var(--theme-body-color);*/
902 .requests-menu-filter-button:hover {
903 /* background: rgba(128,128,128,0.2);*/
906 .requests-menu-filter-button:hover:active {
907 /* background-color: var(--theme-selection-background-semitransparent);*/
910 /* Performance analysis buttons */
912 #requests-menu-network-summary-button {
918 border-color: transparent;
919 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
924 #requests-menu-network-summary-button > .summary-info-icon {
925 background-image: url(images/profiler-stopwatch.svg);
926 filter: var(--icon-filter);
931 #requests-menu-network-summary-button > .summary-info-text {
932 margin-inline-start: 0.5em;
935 #requests-menu-network-summary-button:hover > .summary-info-icon,
936 #requests-menu-network-summary-button:hover > .summary-info-text {
939 /* Performance analysis view */
941 #network-statistics-view {
945 #network-statistics-toolbar {
946 /* Make the toolbar invisible, it only hold the back button */
947 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
948 background-color: #000000;
954 #network-statistics-back-button {
962 border-inline-start: none;
965 #network-statistics-view-splitter {
966 /* border-color: rgba(0,0,0,0.2);*/
968 pointer-events: none;
971 #network-statistics-charts {
975 #network-statistics-charts {
976 background-color: var(--theme-sidebar-background);
979 #network-statistics-charts .pie-chart-container {
980 margin-inline-start: 3vw;
981 margin-inline-end: 1vw;
984 #network-statistics-charts .table-chart-container {
985 margin-inline-start: 1vw;
986 margin-inline-end: 3vw;
989 .chart-colored-blob[name=html] {
990 fill: var(--theme-highlight-bluegrey);
991 background: var(--theme-highlight-bluegrey);
994 .chart-colored-blob[name=css] {
995 fill: var(--theme-highlight-blue);
996 background: var(--theme-highlight-blue);
999 .chart-colored-blob[name=js] {
1000 fill: var(--theme-highlight-lightorange);
1001 background: var(--theme-highlight-lightorange);
1004 .chart-colored-blob[name=xhr] {
1005 fill: var(--theme-highlight-orange);
1006 background: var(--theme-highlight-orange);
1009 .chart-colored-blob[name=fonts] {
1010 fill: var(--theme-highlight-darkpurple);
1011 background: var(--theme-highlight-darkpurple);
1014 .chart-colored-blob[name=images] {
1015 fill: var(--theme-highlight-pink);
1016 background: var(--theme-highlight-pink);
1019 .chart-colored-blob[name=media] {
1020 fill: var(--theme-highlight-green);
1021 background: var(--theme-highlight-green);
1024 .chart-colored-blob[name=flash] {
1025 fill: var(--theme-highlight-red);
1026 background: var(--theme-highlight-red);
1029 .table-chart-row-label[name=cached] {
1033 .table-chart-row-label[name=count] {
1038 .table-chart-row-label[name=label] {
1042 .table-chart-row-label[name=size] {
1046 .table-chart-row-label[name=time] {
1050 /* Responsive sidebar */
1051 @media (max-width: 700px) {
1053 #details-pane-toggle,
1054 #details-pane.pane-collapsed,
1055 #requests-menu-network-summary-button > .summary-info-text {
1059 #requests-menu-toolbar {
1063 .requests-menu-header-button {
1069 margin: 0 !important;
1070 /* To prevent all the margin hacks to hide the sidebar. */
1073 .requests-menu-status {
1078 .requests-menu-status-code {
1082 .requests-menu-method,
1083 .requests-menu-method-box {
1088 .requests-menu-icon-and-file {
1092 .requests-menu-security-and-domain {
1096 .requests-menu-cause,
1097 .requests-menu-type,
1098 .requests-menu-transferred,
1099 .requests-menu-size {
1104 .requests-menu-waterfall {
1109 /* Platform overrides (copied in from the old platform specific files) */
1110 :root[platform="win"] .requests-menu-header-button > .button-box {
1114 :root[platform="win"] .requests-menu-timings-division {
1119 :root[platform="linux"] #headers-summary-resend {
1123 :root[platform="linux"] #toggle-raw-headers {
1127 /* Responsive sidebar */
1128 @media (max-width: 700px) {
1129 :root[platform="linux"] .requests-menu-header-button {
1135 text-overflow: ellipsis;
1142 /* Overwrite tree-view cell colon and use l10n string instead */
1143 .treeTable .treeLabelCell::after {
1147 .treeTable .textbox-input:focus {
1149 box-shadow: var(--theme-focus-box-shadow-textbox);*/
1155 flex-direction: column;
1160 /* Layout additional warning icon in tree value cell */
1161 .security-info-value {
1165 .security-info-value .textbox-input {
1166 text-overflow: ellipsis;
1171 margin-inline-end: 2px;
1174 .security-info-value .textbox-input:focus {
1176 box-shadow: var(--theme-focus-box-shadow-textbox);
1179 .properties-view .searchbox-section {
1183 .properties-view .devtools-searchbox {
1187 .properties-view .devtools-searchbox input {
1196 /* Make treeTable fill parent element and scrollable */
1197 .tree-container .treeTable {
1207 /* Apply flex to table tbody in order to fill available vertical space */
1208 .tree-container .treeTable tbody {
1210 flex-direction: column;
1211 /* Apply flex to table will create an anonymous table element outside of tbody
1212 * See also http://stackoverflow.com/a/30851678
1213 * Therefore, we set height with this magic number in order to remove the
1214 * redundant scrollbar when source editor appears.
1216 height: calc(100% - 4px);
1219 .tree-container .treeTable tr {
1222 /* Make right td fill available horizontal space */
1223 .tree-container .treeTable td:last-child {
1227 /* If there is a source editor shows up in the last row of TreeView,
1228 * it should occupy the available vertical space.
1230 .tree-container .treeTable .editor-row-container,
1231 .tree-container .treeTable tr:last-child td[colspan="2"] {
1236 .properties-view .devtools-searchbox,
1237 .tree-container .treeTable .tree-section {
1239 background-color: var(--theme-toolbar-background);
1242 .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
1243 border-top: 1px solid var(--theme-splitter-color);
1246 .properties-view .devtools-searchbox,
1247 .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
1248 border-bottom: 1px solid var(--theme-splitter-color);
1251 .tree-container .treeTable .tree-section > * {
1252 vertical-align: middle;
1255 .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
1256 .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover {
1257 color: var(--theme-body-color-alt);
1260 .tree-container .treeTable .treeValueCell {
1261 /* FIXME: Make value cell can be reduced to shorter width */
1263 padding-inline-end: 5px;
1266 .headers-summary input:not([type="button"]) {
1271 margin-inline-end: 2px;
1274 .headers-summary input:not([type="button"]):focus {
1276 box-shadow: var(--theme-focus-box-shadow-textbox);*/
1277 transition: all 0.2s ease-in-out;
1280 .headers-summary-label,
1281 .tree-container .objectBox {
1282 white-space: nowrap;
1288 align-items: center;
1291 .headers-summary .tool-button {
1292 /* border: 1px solid transparent;
1293 color: var(--theme-body-color);
1294 transition: background 0.05s ease-in-out;*/
1295 margin-inline-end: 6px;
1299 .headers-summary .requests-menu-status-icon {
1303 .headers-summary .raw-headers-container {
1308 .headers-summary .raw-headers {
1313 .headers-summary .raw-headers textarea {
1318 box-sizing: border-box;
1321 .headers-summary .raw-headers .tabpanel-summary-label {
1326 color: var(--theme-body-color-alt);
1336 .panel-container iframe {
1342 .treeTable .treeLabel {
1346 /* Customize default tree table style to align with devtools theme */
1347 .treeTable .treeLabel,
1348 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1349 color: var(--theme-highlight-purple);
1352 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1354 text-decoration: none;
1358 * FIXME: normal html block element cannot fill outer XUL element
1359 * This workaround should be removed after sidebar is migrated to react
1361 #react-security-tabpanel-hook,
1362 #react-timings-tabpanel-hook {
1364 -moz-box-orient: vertical;
1369 * FIXME: normal html block element cannot fill outer XUL element
1370 * This workaround should be removed after netmonitor is migrated to react
1372 #react-details-panel-hook {
1374 flex-direction: column;
1377 #network-statistics-charts,
1378 #primed-cache-chart,
1379 #empty-cache-chart {