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/. */
8 --table-splitter-color: #A09090;
9 --table-zebra-background: rgba(255,159,0,0.1);
10 --sidemenu-separator-color: rgba(160,144,144,0.15);
11 --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg);
12 --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg);
13 --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
14 --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
17 /* Generic pane helpers */
19 .generic-toggled-pane {
20 margin-inline-start: 0 !important;
21 /* Unfortunately, transitions don't work properly with locale-aware properties,
22 so both the left and right margins are set via js, while the start margin
23 is always overridden here. */
26 .generic-toggled-pane[animated] {
27 transition: margin 0.25s ease-in-out;
30 /* Responsive container */
32 .devtools-responsive-container {
33 -moz-box-orient: horizontal;
36 .devtools-main-content {
40 .devtools-main-content,
41 .devtools-sidebar-tabs {
42 /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
46 @media (min-width: 701px) {
47 .devtools-responsive-container .generic-toggled-pane {
48 /* To hide generic-toggled-pane, negative margins are applied dynamically.
49 * In the default horizontal layout, the pane is on the side and should be
50 * hidden using negative margin-inline-end only.
52 margin-top: 0 !important;
53 margin-bottom: 0 !important;
56 @media (max-width: 700px) {
57 .devtools-responsive-container {
58 -moz-box-orient: vertical;
61 .devtools-responsive-container > .devtools-side-splitter {
62 /* This is a normally vertical splitter, but we have turned it horizontal
63 due to the smaller resolution */
64 min-height: calc(var(--devtools-splitter-top-width) +
65 var(--devtools-splitter-bottom-width) + 1px);
66 border-top-width: var(--devtools-splitter-top-width);
67 border-bottom-width: var(--devtools-splitter-bottom-width);
68 margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
69 margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
71 /* Reset the vertical splitter styles */
74 border-inline-end-width: 0;
75 border-inline-start-width: 0;
77 margin-inline-start: 0;
79 /* In some edge case the cursor is not changed to n-resize */
83 .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) {
84 /* When the panel is collapsed min/max height should not be applied because
85 collapsing relies on negative margins, which implies constant height. */
90 .devtools-responsive-container .generic-toggled-pane {
91 /* To hide generic-toggled-pane, negative margins are applied dynamically.
92 * If a vertical layout, the pane is on the bottom and should be hidden
93 * using negative bottom margin only.
95 margin-inline-end: 0 !important;
99 /* BreacrumbsWidget */
101 .breadcrumbs-widget-container {
102 margin-inline-start: 2px;
103 max-height: 24px; /* Set max-height for proper sizing on linux */
104 height: 24px; /* Set height to prevent starting small waiting for content */
109 background: transparent;
117 margin-inline-end: 1px;
121 margin-inline-end: 0;
124 .scrollbutton-up > .toolbarbutton-icon,
125 .scrollbutton-down > .toolbarbutton-icon {
129 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
130 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
133 .scrollbutton-up[disabled] > .toolbarbutton-icon,
134 .scrollbutton-down[disabled] > .toolbarbutton-icon {
137 .scrollbutton-up:-moz-locale-dir(ltr) {
138 border-top-right-radius: 0;
139 border-bottom-right-radius: 0;
142 .scrollbutton-down:-moz-locale-dir(ltr) {
143 border-top-left-radius: 0;
144 border-bottom-left-radius: 0;
147 .scrollbutton-up:-moz-locale-dir(rtl) {
148 border-top-left-radius: 0;
149 border-bottom-left-radius: 0;
152 .scrollbutton-down:-moz-locale-dir(rtl) {
153 border-top-right-radius: 0;
154 border-bottom-right-radius: 0;
157 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
159 .scrollbutton-up:-moz-locale-dir(ltr),
160 .scrollbutton-down:-moz-locale-dir(rtl) {
161 border-right: solid 1px rgba(255, 255, 255, .1);
162 border-left: solid 1px transparent;
163 box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
166 .scrollbutton-down:-moz-locale-dir(ltr),
167 .scrollbutton-up:-moz-locale-dir(rtl) {
168 border-right: solid 1px transparent;
169 border-left: solid 1px rgba(255, 255, 255, .1);
170 box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
173 .scrollbutton-up[disabled],
174 .scrollbutton-down[disabled] {
176 border-color: transparent;
180 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
181 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
182 /* transform: scaleX(-1); */
185 /* The breadcrumb separator elements are used as background images with
186 * -moz-element, so we position them offscreen since we don't care about
187 * seeing the original elements.
189 .breadcrumb-separator-container {
195 #breadcrumb-separator-before,
196 #breadcrumb-separator-after,
197 #breadcrumb-separator-normal {
203 #breadcrumb-separator-before,
204 #breadcrumb-separator-after:after {
205 background: var(--theme-selection-background);
208 #breadcrumb-separator-after,
209 #breadcrumb-separator-before:after {
210 background: var(--theme-toolbar-background);
213 /* This chevron arrow cannot be replicated easily in CSS, so we are using
214 * a background image for it (still keeping it in a separate element so
215 * we can handle RTL support with a CSS transform).
217 #breadcrumb-separator-normal {
218 background: url("images/breadcrumbs-divider@2x.png") no-repeat center right;
219 background-size: 12px 24px;
222 /* Fake a triangle by rotating a rectangle inside the elements */
223 #breadcrumb-separator-before:after,
224 #breadcrumb-separator-after:after {
229 transform: translateX(-18px) rotate(45deg);
230 box-sizing: border-box;
233 .breadcrumbs-widget-item {
234 background-color: var(--theme-toolbar-background);
238 padding: 0 8px 0 20px;
242 color: var(--theme-content-color1);
245 .breadcrumbs-widget-item:hover {
246 background-color: var(--theme-hover-background);
247 color: var(--theme-hover-color);
250 .breadcrumbs-widget-item[checked]:not(:hover) {
251 background-color: var(--theme-selection-background);
252 color: var(--theme-selection-color);
255 .breadcrumbs-widget-item[siblings-menu-open],
256 .breadcrumbs-widget-item:active {
257 background-color: #FF9F00;
261 .breadcrumbs-widget-item:-moz-focusring {
265 .breadcrumbs-widget-item[checked]:-moz-focusring > .button-box {
266 outline: var(--theme-focus-outline);
267 outline-offset: -1px;
270 .breadcrumbs-widget-item > .button-box {
276 :root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box {
280 .breadcrumbs-widget-item:not([checked]) {
281 background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
284 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
285 background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
288 .breadcrumbs-widget-item[checked] {
289 background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
290 background-color: #008484; /* Select Highlight Blue */
293 .breadcrumbs-widget-item:first-child {
294 background-image: none;
297 /* RTL support: move the images that were on the left to the right,
298 * and move images that were on the right to the left.
300 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
301 padding: 0 20px 0 8px;
304 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
305 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
306 background-position: center right;
309 #breadcrumb-separator-before:-moz-locale-dir(rtl),
310 #breadcrumb-separator-after:-moz-locale-dir(rtl),
311 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
312 transform: scaleX(-1);
315 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
316 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
317 transform: translateX(-5px) rotate(45deg);
320 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
321 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
322 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
323 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
324 color: var(--theme-highlight-lightorange);
327 .breadcrumbs-widget-item {
328 color: var(--theme-highlight-lightorange);
331 .breadcrumbs-widget-item:not([checked]):hover label {
332 color: var(--theme-hover-color) !important;
335 .breadcrumbs-widget-item-id {
336 color: var(--theme-body-color-alt);
339 .breadcrumbs-widget-item-classes {
340 color: var(--theme-content-color1);
343 .breadcrumbs-widget-item-pseudo-classes {
344 color: var(--theme-highlight-lightorange);
347 /* SimpleListWidget */
349 .simple-list-widget-container {
350 /* Hack: force hardware acceleration */
351 transform: translateZ(1px);
354 .simple-list-widget-item.selected {
355 background-color: var(--theme-selection-background);
356 color: var(--theme-selection-color);
359 .simple-list-widget-item:not(.selected):hover {
360 background-color: var(--theme-hover-background);
361 color: var(--theme-hover-color);
364 .simple-list-widget-perma-text,
365 .simple-list-widget-empty-text {
369 .simple-list-widget-perma-text,
370 .simple-list-widget-empty-text {
371 color: var(--theme-body-color-alt);
376 .fast-list-widget-container {
377 /* Hack: force hardware acceleration */
378 transform: translateZ(1px);
381 .fast-list-widget-empty-text {
385 .fast-list-widget-empty-text {
386 color: var(--theme-body-color-alt);
391 .side-menu-widget-container {
392 /* Hack: force hardware acceleration */
393 transform: translateZ(1px);
396 /* SideMenuWidget container */
398 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
399 /* To compensate for the arrow image's dark margin. */
400 /* margin-inline-end: -1px;*/
403 /* SideMenuWidget groups */
405 .side-menu-widget-group-title {
408 border-bottom: 1px solid var(--sidemenu-separator-color);
411 .side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
412 padding-inline-start: 20px;
415 /* SideMenuWidget items */
417 .side-menu-widget-item {
418 border-bottom: 1px solid var(--sidemenu-separator-color);
419 background-clip: padding-box;
422 .side-menu-widget-item.selected {
423 background-color: var(--theme-selection-background);
424 color: var(--theme-selection-color);
427 .side-menu-widget-item-arrow {
428 margin-inline-start: -7px;
429 width: 7px; /* The image's width is 7 pixels */
432 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
433 background-image: var(--sidemenu-selected-arrow);
434 background-size: auto;
435 background-repeat: no-repeat;
436 background-position: center right;
439 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
440 background-image: var(--sidemenu-selected-arrow-rtl);
441 background-position: center left;
444 /* SideMenuWidget items contents */
446 .side-menu-widget-item-contents {
448 /* To avoid having content overlapping the arrow image. */
449 padding-inline-end: 8px;
452 .side-menu-widget-item-other {
453 /* To avoid having content overlapping the arrow image. */
454 padding-inline-end: 8px;
455 /* To compensate for the .side-menu-widget-item-contents padding. */
456 margin-inline-start: -4px;
457 margin-inline-end: -8px;
458 color: var(--theme-selection-color);
461 .side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
462 /* To compensate for the .side-menu-widget-item-contents padding. */
463 margin-inline-start: -20px;
466 .side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
467 background-color: var(--theme-sidebar-background);
468 box-shadow: inset 2px 0 0 var(--theme-selection-background);
469 color: var(--theme-body-color);
472 .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
473 background-color: var(--theme-selection-background);
474 color: var(--theme-selection-color);
477 .side-menu-widget-item-other:first-of-type {
479 /* border-top-left-radius: 4px; */
482 .side-menu-widget-item-other:last-of-type {
486 .side-menu-widget-item-other:not(.selected) > label {
490 /* SideMenuWidget checkboxes */
492 .side-menu-widget-group-checkbox {
494 margin-inline-end: 4px;
497 .side-menu-widget-item-checkbox {
499 margin-inline-start: 4px;
500 margin-inline-end: -4px;
503 /* SideMenuWidget misc */
505 .side-menu-widget-empty-text {
507 background-color: var(--theme-sidebar-background);
512 .variables-view-container {
513 /* Hack: force hardware acceleration */
514 transform: translateZ(1px);
517 .variables-view-empty-notice {
521 .variables-view-empty-notice {
522 color: var(--theme-body-color-alt);
525 .variables-view-scope:focus > .title,
526 .theme-dark .variable-or-property:focus > .title {
527 background-color: var(--theme-selection-background);
528 color: var(--theme-selection-color);
531 .variables-view-scope > .title {
532 background-color: #A09090;
536 /* Custom scope stylings */
538 .variables-view-watch-expressions .title > .name {
542 /* Generic variables traits */
544 .variables-view-variable:not(:last-child) {
545 border-bottom: 1px solid #A09090;
548 .variables-view-variable > .title > .name {
552 /* Generic variables *and* properties traits */
554 .variable-or-property:focus > .title > label {
555 color: inherit !important;
558 .variables-view-container .theme-twisty {
562 .variable-or-property > .title > .theme-twisty {
563 margin-inline-start: 5px;
566 .variable-or-property:not([untitled]) > .variables-view-element-details {
567 margin-inline-start: 7px;
570 /* Traits applied when variables or properties are changed or overridden */
572 .variable-or-property:not([overridden]) {
573 transition: background 1s ease-in-out, color 1s ease-in-out;
576 .variable-or-property:not([overridden])[changed] {
578 transition-duration: .4s;
581 .variable-or-property[overridden] {
582 background: rgba(160,144,144,0.5);
585 .variable-or-property[overridden] .title > label {
586 /* Cross out the title for this variable and all child properties. */
588 text-decoration: line-through;
589 border-bottom: none !important;
594 /* Traits applied when variables or properties are editable */
596 .variable-or-property[editable] > .title > .value {
600 .variable-or-property[overridden] .title > .value {
601 /* Disallow editing this variable and all child properties. */
602 pointer-events: none;
605 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
606 * variables and properties */
608 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
612 .variable-or-property-non-writable-icon {
613 background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
614 background-size: cover;
619 @media (min-resolution: 1.1dppx) {
620 .variable-or-property-non-writable-icon {
621 background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
625 .variable-or-property-frozen-label,
626 .variable-or-property-sealed-label,
627 .variable-or-property-non-extensible-label {
629 padding-inline-end: 4px;
632 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
633 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
634 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
640 .variables-view-container[aligned-values] .title > .separator {
644 .variables-view-container[aligned-values] .title > .value {
649 .variables-view-container[aligned-values] .title > .element-value-input {
650 width: calc(70vw - 10px);
655 .variables-view-open-inspector {
656 -moz-box-ordinal-group: 1;
659 .variables-view-edit,
660 .variables-view-add-property {
661 -moz-box-ordinal-group: 2;
664 .variable-or-property-frozen-label,
665 .variable-or-property-sealed-label,
666 .variable-or-property-non-extensible-label,
667 .variable-or-property-non-writable-icon {
668 -moz-box-ordinal-group: 3;
671 .variables-view-delete {
672 -moz-box-ordinal-group: 4;
675 .variables-view-container[actions-first] .variables-view-delete,
676 .variables-view-container[actions-first] .variables-view-add-property,
677 .variables-view-container[actions-first] .variables-view-open-inspector {
678 -moz-box-ordinal-group: 0;
681 .variables-view-container[actions-first] [invisible] {
685 /* Variables and properties tooltips */
687 .variable-or-property > tooltip > label {
691 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
692 .variable-or-property[non-configurable] > tooltip > label.configurable,
693 .variable-or-property[non-writable] > tooltip > label.writable,
694 .variable-or-property[non-extensible] > tooltip > label.extensible {
696 text-decoration: line-through;
699 .variable-or-property[overridden] > tooltip > label.overridden {
700 padding-inline-start: 4px;
701 border-inline-start: 1px dotted #9C9CFF;
704 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
705 padding-inline-start: 4px;
706 border-inline-start: 1px dotted #9C9CFF;
710 /* Variables and properties editing */
711 .variables-view-delete,
712 .variables-view-edit,
713 .variables-view-open-inspector {
716 background-size: cover;
720 .variables-view-delete:hover,
721 .variables-view-edit:hover,
722 .variables-view-open-inspector:hover {
723 filter: url(images/filters.svg#checked-icon-state);
726 .variables-view-delete:active,
727 .variables-view-edit:active,
728 .variables-view-open-inspector:active {
729 filter: url(images/filters.svg#checked-icon-state);
732 .variable-or-property:focus > .title > .variables-view-delete,
733 .variable-or-property:focus > .title > .variables-view-edit,
734 .variable-or-property:focus > .title > .variables-view-open-inspector {
738 .variables-view-delete {
739 background-image: var(--delete-icon);
742 @media (min-resolution: 1.1dppx) {
743 .variables-view-delete {
744 background-image: var(--delete-icon-2x);
748 .variables-view-edit {
749 background-image: url("chrome://devtools/skin/images/vview-edit.png");
752 @media (min-resolution: 1.1dppx) {
753 .variables-view-edit {
754 background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
758 .variables-view-open-inspector {
759 background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
762 @media (min-resolution: 1.1dppx) {
763 .variables-view-open-inspector {
764 background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
768 /* Variables and properties input boxes */
770 .variable-or-property > .title > .separator + .element-value-input {
771 margin-inline-start: -2px !important;
772 margin-inline-end: 2px !important;
775 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
776 margin-inline-start: 4px !important;
777 margin-inline-end: 2px !important;
780 .element-name-input {
781 margin-inline-start: -2px !important;
782 margin-inline-end: 2px !important;
786 .element-value-input,
787 .element-name-input {
788 border: 1px solid #008484 !important;
792 /* Variables and properties searching */
794 .variable-or-property[unmatched] {
801 .graph-widget-container {
805 .graph-widget-canvas {
810 .graph-widget-canvas[input=hovering-background] {
814 .graph-widget-canvas[input=hovering-region] {
818 .graph-widget-canvas[input=hovering-selection-start-boundary],
819 .graph-widget-canvas[input=hovering-selection-end-boundary],
820 .graph-widget-canvas[input=adjusting-selection-boundary] {
824 .graph-widget-canvas[input=adjusting-view-area] {
828 .graph-widget-canvas[input=hovering-selection-contents] {
832 .graph-widget-canvas[input=dragging-selection-contents] {
836 /* Line graph widget */
838 .line-graph-widget-gutter {
844 pointer-events: none;
847 border-inline-end: 1px solid #9C9CFF;
850 .line-graph-widget-gutter-line {
853 border-top: 1px solid;
856 .line-graph-widget-gutter-line[type=maximum] {
857 border-color: #008484;
860 .line-graph-widget-gutter-line[type=minimum] {
861 border-color: #FF0000;
864 .line-graph-widget-gutter-line[type=average] {
865 border-color: #FF9F00;
868 .line-graph-widget-tooltip {
872 padding-inline-start: 6px;
873 padding-inline-end: 6px;
874 transform: translateY(-50%);
875 font-size: 0.8rem !important;
877 pointer-events: none;
882 .line-graph-widget-tooltip[with-arrows=true]::before {
885 border-top: 3px solid transparent;
886 border-bottom: 3px solid transparent;
887 top: calc(50% - 3px);
890 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
891 border-inline-end: 3px solid #9C9CFF;
895 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
896 border-inline-start: 3px solid #9C9CFF;
900 .line-graph-widget-tooltip[type=maximum] {
904 .line-graph-widget-tooltip[type=minimum] {
908 .line-graph-widget-tooltip[type=average] {
912 .line-graph-widget-tooltip > [text=info] {
913 color: var(--theme-content-color2);
916 .line-graph-widget-tooltip > [text=value] {
917 margin-inline-start: 3px;
920 .line-graph-widget-tooltip > [text=metric] {
921 margin-inline-start: 1px;
922 color: var(--theme-content-color4);
925 .line-graph-widget-tooltip > [text=value],
926 .line-graph-widget-tooltip > [text=metric] {
927 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
928 -1px 0px rgba(255,255,255,0.6),
929 0px -1px rgba(255,255,255,0.6),
930 0px 1px rgba(255,255,255,0.6);*/
933 .line-graph-widget-tooltip[type=maximum] > [text=value] {
934 color: var(--theme-highlight-green);
937 .line-graph-widget-tooltip[type=minimum] > [text=value] {
938 color: var(--theme-highlight-red);
941 .line-graph-widget-tooltip[type=average] > [text=value] {
942 color: var(--theme-highlight-orange);
945 /* Bar graph widget */
947 .bar-graph-widget-legend {
952 font-size: 0.8rem !important;
953 pointer-events: none;
956 .bar-graph-widget-legend-item {
958 margin-inline-end: 8px;
961 .bar-graph-widget-legend-item > [view="color"],
962 .bar-graph-widget-legend-item > [view="label"] {
963 vertical-align: middle;
966 .bar-graph-widget-legend-item > [view="color"] {
967 display: inline-block;
970 border: 1px solid #9C9CFF;
972 margin-inline-end: 4px;
977 .bar-graph-widget-legend-item > [view="label"] {
978 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
979 -1px 0px rgba(255,255,255,0.8),
980 0px -1px rgba(255,255,255,0.8),
981 0px 1px rgba(255,255,255,0.8);*/
986 .generic-chart-container {
987 /* Hack: force hardware acceleration */
988 transform: translateZ(1px);
991 .generic-chart-container {
992 color: var(--theme-body-color-alt);
995 .chart-colored-blob {
996 fill: var(--theme-highlight-blue);
997 background: var(--theme-highlight-blue);
1011 .pie-chart-slice[largest] {
1017 text-anchor: middle;
1018 dominant-baseline: middle;
1019 pointer-events: none;
1026 .pie-chart-container[slices="1"] > .pie-chart-slice {
1032 transition: all 0.1s ease-out;
1035 .pie-chart-slice:not(:hover):not([focused]),
1036 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1037 transform: none !important;
1042 .table-chart-title {
1043 padding-bottom: 10px;
1053 .table-chart-grid:hover > .table-chart-row {
1054 transition: opacity 0.1s ease-in-out;
1057 .table-chart-grid:not(:hover) > .table-chart-row {
1058 transition: opacity 0.2s ease-in-out;
1061 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1062 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1066 .table-chart-row-box {
1069 margin-inline-end: 10px;
1072 .table-chart-row-label {
1074 padding-inline-end: 6px;
1078 .table-chart-totals {
1083 .table-chart-totals {
1084 border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1087 .table-chart-summary-label {
1092 .table-chart-summary-label {
1093 color: var(--theme-content-color2);
1100 .table-widget-body > .devtools-side-splitter {
1104 .table-widget-body {
1109 .table-widget-empty-text {
1110 background-color: var(--theme-body-background);
1113 /* Column Headers */
1115 .table-widget-column-header,
1116 .table-widget-cell {
1117 border-inline-end: 1px solid var(--table-splitter-color) !important;
1120 /* Table widget column header colors are taken from netmonitor.inc.css to match
1121 the look of both the tables. */
1123 .table-widget-column-header {
1128 padding: 5px 0 0 !important;
1131 font-weight: inherit !important;
1132 border-image: linear-gradient(transparent 15%,
1133 var(--theme-splitter-color) 15%,
1134 var(--theme-splitter-color) 85%,
1136 transparent calc(100% - 1px),
1137 var(--theme-splitter-color) calc(100% - 1px)) 1 1;
1138 background-repeat: no-repeat;
1141 .table-widget-column-header:not([sorted]):hover {
1142 /* background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));*/
1145 .table-widget-column-header[sorted] {
1146 background-color: var(--theme-selection-background);
1147 color: var(--theme-selection-color);
1148 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
1149 /* box-shadow: -0.5px 0 0 0.5px var(--theme-splitter-color);*/
1150 background-position: right 6px center;
1153 .table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
1154 background-position: 6px center;
1157 .table-widget-column-header[sorted=ascending] {
1158 background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
1161 .table-widget-column-header[sorted=descending] {
1162 background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
1165 .table-widget-column[readonly] {
1166 background-color: #402800;
1169 .table-widget-body .devtools-side-splitter:last-of-type {
1175 .table-widget-cell {
1179 -moz-user-focus: normal;
1180 color: var(--theme-body-color);
1183 .table-widget-cell[hidden] {
1187 .table-widget-column-header + .table-widget-cell {
1188 border-top: 1px solid var(--theme-splitter-color);
1191 .table-widget-cell:last-child {
1192 border-bottom: 1px solid var(--table-splitter-color);
1195 .table-widget-cell.even:not(.theme-selected) {
1196 background-color: var(--table-zebra-background);
1199 :root:not(.no-animate) .table-widget-cell.flash-out {
1200 animation: flash-out 0.5s ease-in;
1203 @keyframes flash-out {
1205 background: var(--theme-contrast-background2);
1209 /* Empty text and initial text */
1211 .table-widget-empty-text {
1215 margin-top: -20px !important;
1218 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1219 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1225 .tree-widget-container {
1232 margin-inline-end: 40px;
1235 .tree-widget-container:-moz-focusring,
1236 .tree-widget-container *:-moz-focusring {
1237 outline-style: none;
1240 .tree-widget-empty-text {
1243 background: transparent;
1244 pointer-events: none;
1249 .tree-widget-container .tree-widget-item {
1250 padding: 2px 0px 4px;
1251 /* OSX has line-height 14px by default, which causes weird alignment issues
1252 * because of 20px high icons. thus making line-height consistent with that of
1255 line-height: 17px !important;
1256 display: inline-block;
1258 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1259 breaking in multiple lines */
1262 .tree-widget-container .tree-widget-children {
1268 .tree-widget-item[level="1"] {
1273 .tree-widget-item::before {
1278 margin: 3px 2px -3px;
1279 background-repeat: no-repeat;
1280 background-image: url("chrome://devtools/skin/images/controls.png");
1281 background-size: 56px 28px;
1283 background-position: -28px -14px;
1286 .tree-widget-item:-moz-locale-dir(rtl)::before {
1288 transform: scaleX(-1);
1291 .tree-widget-item[empty]::before {
1292 background: transparent;
1295 .tree-widget-item[expanded]::before {
1296 background-position: -42px -14px;
1299 .tree-widget-item + ul {
1301 animation: collapse-tree-item 0.2s;
1305 .tree-widget-item[expanded] + ul {
1306 animation: expand-tree-item 0.3s;
1310 @keyframes collapse-tree-item {
1319 @keyframes expand-tree-item {
1328 @media (min-resolution: 1.1dppx) {
1329 .tree-widget-item:before {
1330 background-image: url("chrome://devtools/skin/images/controls@2x.png");
1334 /* Indentation of child items in the tree */
1337 .tree-widget-item[level] + ul > li > .tree-widget-item {
1338 padding-inline-start: 98px;
1342 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1343 padding-inline-start: 14px;
1347 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1348 padding-inline-start: 28px;
1352 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1353 padding-inline-start: 42px;
1357 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1358 padding-inline-start: 56px;
1362 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1363 padding-inline-start: 70px;
1367 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1368 padding-inline-start: 84px;
1371 /* Custom icons for certain tree items indicating the type of the item */
1373 .tree-widget-item[type]::after {
1378 margin-inline-end: 4px;
1379 background-repeat: no-repeat;
1380 background-size: 20px auto;
1381 background-position: 0 0;
1382 background-size: auto 20px;
1386 .tree-widget-item.theme-selected[type]::after {
1390 .tree-widget-item:-moz-locale-dir(rtl)::after {
1394 /*.theme-light .tree-widget-item.theme-selected[type]::after,*/
1395 .tree-widget-item[type]::after {
1399 .tree-widget-item[type="dir"]::after {
1400 background-image: url("chrome://devtools/skin/images/filetypes/dir-close.svg");
1401 background-position: 2px 0;
1402 background-size: auto 16px;
1406 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
1407 background-image: url("chrome://devtools/skin/images/filetypes/dir-open.svg");
1410 .tree-widget-item[type="url"]::after {
1411 background-image: url("chrome://devtools/skin/images/filetypes/globe.svg");
1412 background-size: auto 18px;