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 /* === BEGIN widgets.inc.css === */
10 --table-splitter-color: #A09090;
11 --table-zebra-background: rgba(255,159,0,0.1);
14 /* Generic pane helpers */
16 .generic-toggled-side-pane {
17 -moz-margin-start: 0px !important;
18 /* Unfortunately, transitions don't work properly with locale-aware properties,
19 so both the left and right margins are set via js, while the start margin
20 is always overridden here. */
23 .generic-toggled-side-pane[animated] {
24 transition: margin 0.25s ease-in-out;
27 /* Responsive container */
29 .devtools-responsive-container {
30 -moz-box-orient: horizontal;
33 .devtools-main-content {
37 .devtools-main-content,
38 .devtools-sidebar-tabs {
39 /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
43 @media (max-width: 700px) {
44 .devtools-responsive-container {
45 -moz-box-orient: vertical;
48 .devtools-responsive-container > .devtools-side-splitter {
49 /* This is a normally vertical splitter, but we have turned it horizontal
50 due to the smaller resolution */
57 /* Reset the vertical splitter styles */
61 /* In some edge case the cursor is not changed to n-resize */
65 .devtools-responsive-container > .devtools-sidebar-tabs {
71 /* BreacrumbsWidget */
73 .breadcrumbs-widget-container {
74 -moz-margin-start: 2px;
75 -moz-margin-start: 2px;
76 max-height: 24px; /* Set max-height for proper sizing on linux */
77 height: 24px; /* Set height to prevent starting small waiting for content */
82 background: transparent;
97 .scrollbutton-up > .toolbarbutton-icon,
98 .scrollbutton-down > .toolbarbutton-icon {
102 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
103 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
106 .scrollbutton-up[disabled] > .toolbarbutton-icon,
107 .scrollbutton-down[disabled] > .toolbarbutton-icon {
110 .scrollbutton-up:-moz-locale-dir(ltr) {
111 border-top-right-radius: 0;
112 border-bottom-right-radius: 0;
115 .scrollbutton-down:-moz-locale-dir(ltr) {
116 border-top-left-radius: 0;
117 border-bottom-left-radius: 0;
120 .scrollbutton-up:-moz-locale-dir(rtl) {
121 border-top-left-radius: 0;
122 border-bottom-left-radius: 0;
125 .scrollbutton-down:-moz-locale-dir(rtl) {
126 border-top-right-radius: 0;
127 border-bottom-right-radius: 0;
130 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
132 .scrollbutton-up:-moz-locale-dir(ltr),
133 .scrollbutton-down:-moz-locale-dir(rtl) {
134 border-right: solid 1px rgba(255, 255, 255, .1);
135 border-left: solid 1px transparent;
136 box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
139 .scrollbutton-down:-moz-locale-dir(ltr),
140 .scrollbutton-up:-moz-locale-dir(rtl) {
141 border-right: solid 1px transparent;
142 border-left: solid 1px rgba(255, 255, 255, .1);
143 box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
146 .scrollbutton-up[disabled],
147 .scrollbutton-down[disabled] {
149 border-color: transparent;
153 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
154 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
155 /* transform: scaleX(-1); */
158 /* The breadcrumb separator elements are used as background images with
159 * -moz-element, so we position them offscreen since we don't care about
160 * seeing the original elements.
162 .breadcrumb-separator-container {
168 #breadcrumb-separator-before,
169 #breadcrumb-separator-after,
170 #breadcrumb-separator-normal {
176 #breadcrumb-separator-before,
177 #breadcrumb-separator-after:after {
178 background: var(--theme-selection-background);
181 #breadcrumb-separator-after,
182 #breadcrumb-separator-before:after {
183 background: var(--theme-toolbar-background);
186 /* This chevron arrow cannot be replicated easily in CSS, so we are using
187 * a background image for it (still keeping it in a separate element so
188 * we can handle RTL support with a CSS transform).
190 #breadcrumb-separator-normal {
191 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
192 background-size: 12px 24px;
195 /* Fake a triangle by rotating a rectangle inside the elements */
196 #breadcrumb-separator-before:after,
197 #breadcrumb-separator-after:after {
202 transform: translateX(-18px) rotate(45deg);
203 box-sizing: border-box;
206 .breadcrumbs-widget-item {
207 background-color: var(--theme-toolbar-background);
211 padding: 0 8px 0 20px;
215 color: var(--theme-content-color1);
218 .breadcrumbs-widget-item:hover {
219 background-color: var(--theme-hover-background);
220 color: var(--theme-hover-color);
223 .breadcrumbs-widget-item[checked]:not(:hover) {
224 background-color: var(--theme-selection-background);
225 color: var(--theme-selection-color);
228 .breadcrumbs-widget-item[siblings-menu-open],
229 .breadcrumbs-widget-item:active {
230 background-color: #FF9F00;
234 .breadcrumbs-widget-item > .button-box {
240 .breadcrumbs-widget-item:not([checked]) {
241 background-image: -moz-element(#breadcrumb-separator-normal);
242 background-repeat: no-repeat;
243 background-position: center left;
246 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
247 background-image: -moz-element(#breadcrumb-separator-after);
248 background-repeat: no-repeat;
249 background-position: 0 0;
252 .breadcrumbs-widget-item[checked] {
253 background-image: -moz-element(#breadcrumb-separator-before);
254 background-repeat: no-repeat;
255 background-position: 0 0;
256 background-color: #008484; /* Select Highlight Blue */
259 .breadcrumbs-widget-item:first-child {
260 background-image: none;
263 /* RTL support: move the images that were on the left to the right,
264 * and move images that were on the right to the left.
266 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
267 padding: 0 20px 0 8px;
270 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
271 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
272 background-position: center right;
275 #breadcrumb-separator-before:-moz-locale-dir(rtl),
276 #breadcrumb-separator-after:-moz-locale-dir(rtl),
277 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
278 transform: scaleX(-1);
281 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
282 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
283 transform: translateX(-5px) rotate(45deg);
286 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
287 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
288 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
289 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
290 color: var(--theme-highlight-lightorange);
293 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
294 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
295 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
296 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
297 color: var(--theme-hover-color) !important;
300 .breadcrumbs-widget-item {
301 color: var(--theme-highlight-lightorange);
304 .breadcrumbs-widget-item-id {
305 color: var(--theme-body-color-alt);
308 .breadcrumbs-widget-item-classes {
309 color: var(--theme-content-color1);
312 .breadcrumbs-widget-item-pseudo-classes {
313 color: var(--theme-highlight-lightorange);
316 /* SimpleListWidget */
318 .simple-list-widget-container {
319 /* Hack: force hardware acceleration */
320 transform: translateZ(1px);
323 .simple-list-widget-item.selected {
324 background-color: var(--theme-selection-background);
325 color: var(--theme-selection-color);
328 .simple-list-widget-item:not(.selected):hover {
329 background-color: var(--theme-hover-background);
330 color: var(--theme-hover-color);
333 .simple-list-widget-perma-text,
334 .simple-list-widget-empty-text {
335 color: var(--theme-body-color-alt);
341 .fast-list-widget-container {
342 /* Hack: force hardware acceleration */
343 transform: translateZ(1px);
346 /* dark/light theme */
347 .fast-list-widget-empty-text {
350 color: var(--theme-body-color-alt);
355 /* SideMenuWidget container */
357 .side-menu-widget-container {
358 /* Hack: force hardware acceleration */
359 transform: translateZ(1px);
362 .side-menu-widget-container:-moz-locale-dir(ltr),
363 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
366 .side-menu-widget-container:-moz-locale-dir(rtl),
367 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
370 .side-menu-widget-group {
371 /* To allow visibility of the dark margin shadow. */
372 /* -moz-margin-end: 1px; */
375 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
376 /* To compensate for the arrow image's dark margin. */
377 /* -moz-margin-end: -1px; */
380 /* SideMenuWidget groups */
382 .side-menu-widget-group-title {
384 background-color: var(--theme-contrastsidebar-background);
385 color: var(--theme-contrastsidebar-color);
388 /* SideMenuWidget items */
390 .side-menu-widget-item {
391 border-top: 1px solid #9C9CFF;
392 /* To compensate for the top and bottom borders */
395 background-clip: padding-box;
398 .side-menu-widget-item:last-of-type {
399 border-bottom: 1px solid #9C9CFF;
402 .side-menu-widget-item.selected {
403 background-color: var(--theme-selection-background);
404 color: var(--theme-selection-color);
407 .side-menu-widget-item-arrow {
408 -moz-margin-start: -7px;
409 width: 7px; /* The image's width is 7 pixels */
410 /* Cover the border of the side-menu-widget-item */
415 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
416 background-size: auto, 1px 100%;
417 background-repeat: no-repeat;
420 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
421 background-position: center right;
424 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
425 background-position: center left;
428 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
429 background-image: url("itemArrow-ltr.svg");
432 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
433 background-image: url("itemArrow-rtl.svg");
436 /* SideMenuWidget items contents */
438 .side-menu-widget-item-contents {
440 /* To avoid having content overlapping the arrow image. */
441 -moz-padding-end: 8px;
444 .side-menu-widget-item-other {
445 /* To avoid having content overlapping the arrow image. */
446 -moz-padding-end: 8px;
447 /* To compensate for the .side-menu-widget-item-contents padding. */
448 -moz-margin-start: -4px;
449 -moz-margin-end: -8px;
450 color: var(--theme-selection-color);
453 .side-menu-widget-item-other.selected {
454 background-color: var(--theme-selection-background);
455 color: var(--theme-selection-color);
458 .side-menu-widget-item-other:first-of-type {
460 /* border-top-left-radius: 4px; */
463 .side-menu-widget-item-other:last-of-type {
467 .side-menu-widget-item-other:not(.selected) > label {
471 /* SideMenuWidget checkboxes */
473 .side-menu-widget-group-checkbox {
475 -moz-margin-end: 4px;
478 .side-menu-widget-item-checkbox {
480 -moz-margin-start: 4px;
481 -moz-margin-end: -4px;
484 /* SideMenuWidget misc */
486 .theme-dark .side-menu-widget-container,
487 .theme-dark .side-menu-widget-empty-text {
488 background-color: var(--theme-toolbar-background);
491 .side-menu-widget-empty-text {
497 .variables-view-container:not([empty]) {
498 /* Hack: force hardware acceleration */
499 transform: translateZ(1px);
502 .variables-view-empty-notice {
503 color: var(--theme-body-color-alt);
507 .variables-view-scope:focus > .title,
508 .theme-dark .variable-or-property:focus > .title {
509 background-color: var(--theme-selection-background);
510 color: var(--theme-selection-color);
513 .variables-view-scope > .title {
514 background-color: #A09090;
518 /* Generic variables traits */
520 .variables-view-variable:not(:last-child) {
521 border-bottom: 1px solid #A09090;
524 .variables-view-variable > .title > .name {
528 /* Generic variables *and* properties traits */
530 .variable-or-property:focus > .title > label {
531 color: inherit !important;
534 .variables-view-container .theme-twisty {
538 .variable-or-property > .title > .theme-twisty {
539 -moz-margin-start: 5px;
542 .variable-or-property:not([untitled]) > .variables-view-element-details {
543 -moz-margin-start: 7px;
546 /* Traits applied when variables or properties are changed or overridden */
548 .variable-or-property:not([overridden]) {
549 transition: background 1s ease-in-out, color 1s ease-in-out;
552 .variable-or-property:not([overridden])[changed] {
554 transition-duration: .4s;
557 .variable-or-property[overridden] {
558 background: rgba(160,144,144,0.5);
561 .variable-or-property[overridden] .title > label {
562 /* Cross out the title for this variable and all child properties. */
564 text-decoration: line-through;
565 border-bottom: none !important;
570 /* Traits applied when variables or properties are editable */
572 .variable-or-property[editable] > .title > .value {
576 .variable-or-property[overridden] .title > .value {
577 /* Disallow editing this variable and all child properties. */
578 pointer-events: none;
581 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
582 * variables and properties */
584 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
588 .variable-or-property-non-writable-icon {
589 background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
590 background-size: cover;
596 @media (min-resolution: 1.1dppx) {
597 .variable-or-property-non-writable-icon > .title:after {
598 background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
602 .variable-or-property-frozen-label,
603 .variable-or-property-sealed-label,
604 .variable-or-property-non-extensible-label {
606 -moz-padding-end: 4px;
609 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
610 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
611 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
617 .variables-view-container[aligned-values] .title > .separator {
621 .variables-view-container[aligned-values] .title > .value {
626 .variables-view-container[aligned-values] .title > .element-value-input {
627 width: calc(70vw - 10px);
632 .variables-view-open-inspector {
633 -moz-box-ordinal-group: 1;
636 .variables-view-edit,
637 .variables-view-add-property {
638 -moz-box-ordinal-group: 2;
641 .variable-or-property-frozen-label,
642 .variable-or-property-sealed-label,
643 .variable-or-property-non-extensible-label,
644 .variable-or-property-non-writable-icon {
645 -moz-box-ordinal-group: 3;
648 .variables-view-delete {
649 -moz-box-ordinal-group: 4;
652 .variables-view-container[actions-first] .variables-view-delete,
653 .variables-view-container[actions-first] .variables-view-add-property,
654 .variables-view-container[actions-first] .variables-view-open-inspector {
655 -moz-box-ordinal-group: 0;
658 .variables-view-container[actions-first] [invisible] {
662 /* Variables and properties tooltips */
664 .variable-or-property > tooltip > label {
668 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
669 .variable-or-property[non-configurable] > tooltip > label.configurable,
670 .variable-or-property[non-writable] > tooltip > label.writable
671 .variable-or-property[non-extensible] > tooltip > label.extensible {
673 text-decoration: line-through;
676 .variable-or-property[overridden] > tooltip > label.overridden {
677 -moz-padding-start: 4px;
678 -moz-border-start: 1px dotted #9C9CFF;
681 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
682 -moz-padding-start: 4px;
683 -moz-border-start: 1px dotted #9C9CFF;
687 /* Variables and properties editing */
688 .variables-view-delete,
689 .variables-view-edit,
690 .variables-view-open-inspector {
693 background-size: cover;
697 .variables-view-delete:hover,
698 .variables-view-edit:hover,
699 .variables-view-open-inspector:hover {
700 filter: url(images/filters.svg#checked-icon-state);
703 .variables-view-delete:active,
704 .variables-view-edit:active,
705 .variables-view-open-inspector:active {
706 filter: url(images/filters.svg#checked-icon-state);
709 .variable-or-property:focus > .title > .variables-view-delete,
710 .variable-or-property:focus > .title > .variables-view-edit,
711 .variable-or-property:focus > .title > .variables-view-open-inspector {
715 .variables-view-delete {
716 background-image: url("chrome://devtools/skin/images/vview-delete.png");
719 @media (min-resolution: 1.1dppx) {
720 .variables-view-delete {
721 background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
725 .variables-view-edit {
726 background-image: url("chrome://devtools/skin/images/vview-edit.png");
729 @media (min-resolution: 1.1dppx) {
730 .variables-view-edit {
731 background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
735 .variables-view-open-inspector {
736 background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
739 /* Variables and properties input boxes */
741 .variable-or-property > .title > .separator + .element-value-input {
742 -moz-margin-start: -2px !important;
743 -moz-margin-end: 2px !important;
746 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
747 -moz-margin-start: 4px !important;
748 -moz-margin-end: 2px !important;
751 .element-name-input {
752 -moz-margin-start: -2px !important;
753 -moz-margin-end: 2px !important;
757 .element-value-input,
758 .element-name-input {
759 border: 1px solid #008484 !important;
763 /* Variables and properties searching */
765 .variable-or-property[unmatched] {
772 .graph-widget-container {
776 .graph-widget-canvas {
781 .graph-widget-canvas[input=hovering-background] {
785 .graph-widget-canvas[input=hovering-region] {
789 .graph-widget-canvas[input=hovering-selection-start-boundary],
790 .graph-widget-canvas[input=hovering-selection-end-boundary],
791 .graph-widget-canvas[input=adjusting-selection-boundary] {
795 .graph-widget-canvas[input=adjusting-view-area] {
799 .graph-widget-canvas[input=hovering-selection-contents] {
803 .graph-widget-canvas[input=dragging-selection-contents] {
807 /* Line graph widget */
809 .line-graph-widget-gutter {
815 pointer-events: none;
818 -moz-border-end: 1px solid #9C9CFF;
821 .line-graph-widget-gutter-line {
824 border-top: 1px solid;
827 .line-graph-widget-gutter-line[type=maximum] {
828 border-color: #008484;
831 .line-graph-widget-gutter-line[type=minimum] {
832 border-color: #FF0000;
835 .line-graph-widget-gutter-line[type=average] {
836 border-color: #FF9F00;
839 .line-graph-widget-tooltip {
843 -moz-padding-start: 6px;
844 -moz-padding-end: 6px;
845 transform: translateY(-50%);
846 font-size: 0.8rem !important;
848 pointer-events: none;
853 .line-graph-widget-tooltip[with-arrows=true]::before {
856 border-top: 3px solid transparent;
857 border-bottom: 3px solid transparent;
858 top: calc(50% - 3px);
861 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
862 -moz-border-end: 3px solid #9C9CFF;
866 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
867 -moz-border-start: 3px solid #9C9CFF;
871 .line-graph-widget-tooltip[type=maximum] {
875 .line-graph-widget-tooltip[type=minimum] {
879 .line-graph-widget-tooltip[type=average] {
883 .line-graph-widget-tooltip > [text=info] {
884 color: var(--theme-content-color2);
887 .line-graph-widget-tooltip > [text=value] {
888 -moz-margin-start: 3px;
891 .line-graph-widget-tooltip > [text=metric] {
892 -moz-margin-start: 1px;
893 color: var(--theme-content-color4);
896 .line-graph-widget-tooltip > [text=value],
897 .line-graph-widget-tooltip > [text=metric] {
898 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
899 -1px 0px rgba(255,255,255,0.6),
900 0px -1px rgba(255,255,255,0.6),
901 0px 1px rgba(255,255,255,0.6);*/
904 .line-graph-widget-tooltip[type=maximum] > [text=value] {
905 color: var(--theme-highlight-green);
908 .line-graph-widget-tooltip[type=minimum] > [text=value] {
909 color: var(--theme-highlight-red);
912 .line-graph-widget-tooltip[type=average] > [text=value] {
913 color: var(--theme-highlight-orange);
916 /* Bar graph widget */
918 .bar-graph-widget-legend {
923 font-size: 0.8rem !important;
924 pointer-events: none;
927 .bar-graph-widget-legend-item {
929 -moz-margin-end: 8px;
932 .bar-graph-widget-legend-item > [view="color"],
933 .bar-graph-widget-legend-item > [view="label"] {
934 vertical-align: middle;
937 .bar-graph-widget-legend-item > [view="color"] {
938 display: inline-block;
941 border: 1px solid #9C9CFF;
943 -moz-margin-end: 4px;
944 pointer-events: none;
947 .bar-graph-widget-legend-item > [view="label"] {
948 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
949 -1px 0px rgba(255,255,255,0.8),
950 0px -1px rgba(255,255,255,0.8),
951 0px 1px rgba(255,255,255,0.8);*/
956 .generic-chart-container {
957 /* Hack: force hardware acceleration */
958 transform: translateZ(1px);
961 .generic-chart-container {
962 color: var(--theme-body-color-alt);
965 .chart-colored-blob {
966 fill: var(--theme-highlight-blue);
967 background: var(--theme-highlight-blue);
981 .pie-chart-slice[largest] {
988 dominant-baseline: middle;
989 pointer-events: none;
996 .pie-chart-container[slices="1"] > .pie-chart-slice {
1002 transition: all 0.1s ease-out;
1005 .pie-chart-slice:not(:hover):not([focused]),
1006 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1007 transform: none !important;
1012 .table-chart-title {
1013 padding-bottom: 10px;
1023 .table-chart-grid:hover > .table-chart-row {
1024 transition: opacity 0.1s ease-in-out;
1027 .table-chart-grid:not(:hover) > .table-chart-row {
1028 transition: opacity 0.2s ease-in-out;
1031 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1032 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1036 .table-chart-row-box {
1039 -moz-margin-end: 10px;
1042 .table-chart-row-label {
1044 -moz-padding-end: 6px;
1048 .table-chart-totals {
1053 .table-chart-totals {
1054 border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1057 .table-chart-summary-label {
1062 .table-chart-summary-label {
1063 color: var(--theme-content-color2);
1070 .table-widget-body > .devtools-side-splitter {
1074 .table-widget-body {
1079 .table-widget-empty-text {
1080 background-color: var(--theme-body-background);
1083 /* Column Headers */
1085 .table-widget-column-header,
1086 .table-widget-cell {
1087 -moz-border-end: 1px solid var(--table-splitter-color) !important;
1090 /* Table widget column header colors are taken from netmonitor.inc.css to match
1091 the look of both the tables. This needs to be updated along with netmonitor
1092 header colors in bug 951714 */
1094 .table-widget-column-header {
1095 background: rgba(0,0,0,0);
1099 padding: 5px 0 0 !important;
1102 font-weight: inherit !important;
1103 transition: background-color 0.1s ease-in-out;
1106 .table-widget-column-header:hover {
1107 background: var(--theme-hover-background);
1110 .table-widget-column-header:hover:active {
1111 background: var(--theme-active-background);
1114 .table-widget-column-header:not(:active)[sorted] {
1115 background: var(--theme-selection-background);
1118 .table-widget-column-header:not(:active)[sorted=ascending] {
1119 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1120 background-size: 100% 1px;
1121 background-repeat: no-repeat;
1124 .table-widget-column-header:not(:active)[sorted=descending] {
1125 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1126 background-size: 100% 1px;
1127 background-repeat: no-repeat;
1128 background-position: bottom;
1133 .table-widget-cell {
1136 background-clip: padding-box;
1138 -moz-user-focus: normal;
1140 margin-bottom: -1px !important;
1141 border-bottom: 1px solid transparent;
1142 color: var(--theme-body-color);
1145 .table-widget-cell:last-child {
1146 border-bottom: 1px solid var(--table-splitter-color);
1149 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1150 .table-widget-cell:not(.theme-selected)[odd] {
1151 background: var(--table-zebra-background);
1154 .table-widget-cell.flash-out {
1155 animation: flash-out 0.5s ease-in;
1158 @keyframes flash-out {
1160 background: var(--theme-contrast-background2);
1164 /* Empty text and initial text */
1166 .table-widget-empty-text {
1170 margin-top: -20px !important;
1173 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1174 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1180 .tree-widget-container {
1187 -moz-margin-end: 40px;
1190 .tree-widget-container:-moz-focusring,
1191 .tree-widget-container *:-moz-focusring {
1192 outline-style: none;
1195 .tree-widget-empty-text {
1198 background: transparent;
1199 pointer-events: none;
1204 .tree-widget-container .tree-widget-item {
1205 padding: 2px 0px 4px;
1206 /* OSX has line-height 14px by default, which causes weird alignment issues
1207 * because of 20px high icons. thus making line-height consistent with that of
1210 line-height: 17px !important;
1211 display: inline-block;
1213 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1214 breaking in multiple lines */
1217 .tree-widget-container .tree-widget-children {
1223 .tree-widget-item[level="1"] {
1228 .tree-widget-item::before {
1233 margin: 3px 2px -3px;
1234 background-repeat: no-repeat;
1235 background-image: url("chrome://devtools/skin/controls.png");
1236 background-size: 56px 28px;
1238 background-position: -28px -14px;
1241 .tree-widget-item:-moz-locale-dir(rtl)::before {
1243 transform: scaleX(-1);
1246 .tree-widget-item[empty]::before {
1247 background: transparent;
1250 .tree-widget-item[expanded]::before {
1251 background-position: -42px -14px;
1254 .tree-widget-item + ul {
1256 animation: collapse-tree-item 0.2s;
1260 .tree-widget-item[expanded] + ul {
1261 animation: expand-tree-item 0.3s;
1265 @keyframes collapse-tree-item {
1274 @keyframes expand-tree-item {
1283 @media (min-resolution: 1.1dppx) {
1284 .tree-widget-item:before {
1285 background-image: url("chrome://devtools/skin/controls@2x.png");
1289 /* Indentation of child items in the tree */
1292 .tree-widget-item[level] + ul > li > .tree-widget-item {
1293 -moz-padding-start: 98px;
1297 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1298 -moz-padding-start: 14px;
1302 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1303 -moz-padding-start: 28px;
1307 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1308 -moz-padding-start: 42px;
1312 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1313 -moz-padding-start: 56px;
1317 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1318 -moz-padding-start: 70px;
1322 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1323 -moz-padding-start: 84px;
1326 /* Custom icons for certain tree items indicating the type of the item */
1328 .tree-widget-item[type]::after {
1333 -moz-margin-end: 4px;
1334 background-repeat: no-repeat;
1335 background-size: 20px auto;
1336 background-position: 0 0;
1337 background-size: auto 20px;
1341 .tree-widget-item.theme-selected[type]::after {
1345 .tree-widget-item:-moz-locale-dir(rtl)::after {
1349 /*.theme-light .tree-widget-item.theme-selected[type]::after,*/
1350 .tree-widget-item[type]::after {
1354 .tree-widget-item[type="dir"]::after {
1355 background-image: url("chrome://devtools/skin/filetype-dir-close.svg");
1356 background-position: 2px 0;
1357 background-size: auto 16px;
1361 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
1362 background-image: url("chrome://devtools/skin/filetype-dir-open.svg");
1365 .tree-widget-item[type="url"]::after {
1366 background-image: url("chrome://devtools/skin/filetype-globe.svg");
1367 background-size: auto 18px;
1371 /* === BEGIN manifest-editor.inc.css === */
1373 /* Manifest Editor overrides */
1375 .variables-view-container.manifest-editor {
1376 background-color: #000000;
1380 .manifest-editor .variable-or-property:focus > .title {
1381 /* background-color: #EDEDED;
1386 .manifest-editor .variables-view-property > .title > .name {
1387 /* color: #27406A; */
1390 .manifest-editor .variable-or-property > .title > label,
1391 .manifest-editor textbox {
1392 font-family: monospace;
1395 .manifest-editor .variable-or-property > .title > .token-string {
1396 /* color: #54BC6A; */
1400 .manifest-editor .variable-or-property > .title > .token-boolean,
1401 .manifest-editor .variable-or-property > .title > .token-number {
1402 /* color: #009BD4; */
1406 .manifest-editor .variable-or-property > .title > .token-undefined {
1410 .manifest-editor .variable-or-property > .title > .token-null {
1414 .manifest-editor .variable-or-property > .title > .token-other {
1418 .manifest-editor .variables-view-variable {
1419 border-bottom: none;
1422 .manifest-editor .variables-view-delete,
1423 .manifest-editor .variables-view-delete:hover,
1424 .manifest-editor .variables-view-delete:active,
1425 .manifest-editor .variable-or-property:focus .variables-view-delete,
1426 .manifest-editor .variables-view-add-property,
1427 .manifest-editor .variables-view-add-property:hover,
1428 .manifest-editor .variables-view-add-property:active,
1429 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1430 list-style-image: none;
1431 -moz-image-region: initial;
1434 .manifest-editor .variables-view-delete::before,
1435 .manifest-editor .variables-view-add-property::before {
1439 display: inline-block;
1440 background-size: 11px auto;
1443 .manifest-editor .variables-view-delete::before {
1444 background-image: url("app-manager/remove.svg");
1445 background-size: 12px auto;
1448 .manifest-editor .variables-view-add-property::before {
1449 background-image: url("app-manager/add.svg");
1450 -moz-margin-end: 2px;
1453 /* === END manifest-editor.inc.css === */
1455 /* === END widgets.inc.css === */