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.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://browser/skin/devtools/vview-lock.png") no-repeat;
590 background-size: cover;
596 @media (min-resolution: 1.25dppx) {
597 .variable-or-property-non-writable-icon > .title:after {
598 background-image: url("chrome://browser/skin/devtools/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 */
689 .variables-view-delete {
690 background: url("chrome://browser/skin/devtools/vview-delete.png");
691 background-size: cover;
696 @media (min-resolution: 1.25dppx) {
697 .variables-view-delete {
698 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
702 .variables-view-delete:hover {
703 background-position: 32px;
706 .variables-view-delete:active {
707 background-position: 16px;
710 .variable-or-property:focus > .title > .variables-view-delete {
711 /* background-position: 0px; */
714 .variables-view-edit {
715 background: url("chrome://browser/skin/devtools/vview-edit.png");
716 background-size: cover;
722 @media (min-resolution: 1.25dppx) {
723 .variables-view-edit {
724 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
728 .variables-view-edit:hover {
729 background-position: 32px;
732 .variables-view-edit:active {
733 background-position: 16px;
736 .variable-or-property:focus > .title > .variables-view-edit {
737 /* background-position: 0px; */
740 .variables-view-open-inspector {
741 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
742 background-size: cover;
748 .variables-view-open-inspector:hover {
749 background-position: 32px;
752 .variables-view-open-inspector:active {
753 background-position: 16px;
756 .variable-or-property:focus > .title > .variables-view-open-inspector {
757 /* background-position: 0px; */
760 /* Variables and properties input boxes */
762 .variable-or-property > .title > .separator + .element-value-input {
763 -moz-margin-start: -2px !important;
764 -moz-margin-end: 2px !important;
767 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
768 -moz-margin-start: 4px !important;
769 -moz-margin-end: 2px !important;
772 .element-name-input {
773 -moz-margin-start: -2px !important;
774 -moz-margin-end: 2px !important;
778 .element-value-input,
779 .element-name-input {
780 border: 1px solid #008484 !important;
784 /* Variables and properties searching */
786 .variable-or-property[unmatched] {
793 .graph-widget-container {
797 .graph-widget-canvas {
802 .graph-widget-canvas[input=hovering-background] {
806 .graph-widget-canvas[input=hovering-region] {
810 .graph-widget-canvas[input=hovering-selection-start-boundary],
811 .graph-widget-canvas[input=hovering-selection-end-boundary],
812 .graph-widget-canvas[input=adjusting-selection-boundary] {
816 .graph-widget-canvas[input=adjusting-view-area] {
820 .graph-widget-canvas[input=hovering-selection-contents] {
824 .graph-widget-canvas[input=dragging-selection-contents] {
828 /* Line graph widget */
830 .line-graph-widget-gutter {
836 pointer-events: none;
839 -moz-border-end: 1px solid #9C9CFF;
842 .line-graph-widget-gutter-line {
845 border-top: 1px solid;
848 .line-graph-widget-gutter-line[type=maximum] {
849 border-color: #008484;
852 .line-graph-widget-gutter-line[type=minimum] {
853 border-color: #FF0000;
856 .line-graph-widget-gutter-line[type=average] {
857 border-color: #FF9F00;
860 .line-graph-widget-tooltip {
864 -moz-padding-start: 6px;
865 -moz-padding-end: 6px;
866 transform: translateY(-50%);
867 font-size: 0.8rem !important;
869 pointer-events: none;
874 .line-graph-widget-tooltip[with-arrows=true]::before {
877 border-top: 3px solid transparent;
878 border-bottom: 3px solid transparent;
879 top: calc(50% - 3px);
882 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
883 -moz-border-end: 3px solid #9C9CFF;
887 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
888 -moz-border-start: 3px solid #9C9CFF;
892 .line-graph-widget-tooltip[type=maximum] {
896 .line-graph-widget-tooltip[type=minimum] {
900 .line-graph-widget-tooltip[type=average] {
904 .line-graph-widget-tooltip > [text=info] {
905 color: var(--theme-content-color2);
908 .line-graph-widget-tooltip > [text=value] {
909 -moz-margin-start: 3px;
912 .line-graph-widget-tooltip > [text=metric] {
913 -moz-margin-start: 1px;
914 color: var(--theme-content-color4);
917 .line-graph-widget-tooltip > [text=value],
918 .line-graph-widget-tooltip > [text=metric] {
919 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
920 -1px 0px rgba(255,255,255,0.6),
921 0px -1px rgba(255,255,255,0.6),
922 0px 1px rgba(255,255,255,0.6);*/
925 .line-graph-widget-tooltip[type=maximum] > [text=value] {
926 color: var(--theme-highlight-green);
929 .line-graph-widget-tooltip[type=minimum] > [text=value] {
930 color: var(--theme-highlight-red);
933 .line-graph-widget-tooltip[type=average] > [text=value] {
934 color: var(--theme-highlight-orange);
937 /* Bar graph widget */
939 .bar-graph-widget-legend {
944 font-size: 0.8rem !important;
945 pointer-events: none;
948 .bar-graph-widget-legend-item {
950 -moz-margin-end: 8px;
953 .bar-graph-widget-legend-item > [view="color"],
954 .bar-graph-widget-legend-item > [view="label"] {
955 vertical-align: middle;
958 .bar-graph-widget-legend-item > [view="color"] {
959 display: inline-block;
962 border: 1px solid #9C9CFF;
964 -moz-margin-end: 4px;
965 pointer-events: none;
968 .bar-graph-widget-legend-item > [view="label"] {
969 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
970 -1px 0px rgba(255,255,255,0.8),
971 0px -1px rgba(255,255,255,0.8),
972 0px 1px rgba(255,255,255,0.8);*/
977 .generic-chart-container {
978 /* Hack: force hardware acceleration */
979 transform: translateZ(1px);
982 .generic-chart-container {
983 color: var(--theme-body-color-alt);
986 .chart-colored-blob {
987 fill: var(--theme-highlight-blue);
988 background: var(--theme-highlight-blue);
1002 .pie-chart-slice[largest] {
1008 text-anchor: middle;
1009 dominant-baseline: middle;
1010 pointer-events: none;
1017 .pie-chart-container[slices="1"] > .pie-chart-slice {
1023 transition: all 0.1s ease-out;
1026 .pie-chart-slice:not(:hover):not([focused]),
1027 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1028 transform: none !important;
1033 .table-chart-title {
1034 padding-bottom: 10px;
1044 .table-chart-grid:hover > .table-chart-row {
1045 transition: opacity 0.1s ease-in-out;
1048 .table-chart-grid:not(:hover) > .table-chart-row {
1049 transition: opacity 0.2s ease-in-out;
1052 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1053 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1057 .table-chart-row-box {
1060 -moz-margin-end: 10px;
1063 .table-chart-row-label {
1065 -moz-padding-end: 6px;
1069 .table-chart-totals {
1074 .table-chart-totals {
1075 border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1078 .table-chart-summary-label {
1083 .table-chart-summary-label {
1084 color: var(--theme-content-color2);
1091 .table-widget-body > .devtools-side-splitter {
1095 .table-widget-body {
1100 .table-widget-empty-text {
1101 background-color: var(--theme-body-background);
1104 /* Column Headers */
1106 .table-widget-column-header,
1107 .table-widget-cell {
1108 -moz-border-end: 1px solid var(--table-splitter-color) !important;
1111 /* Table widget column header colors are taken from netmonitor.inc.css to match
1112 the look of both the tables. This needs to be updated along with netmonitor
1113 header colors in bug 951714 */
1115 .table-widget-column-header {
1116 background: rgba(0,0,0,0);
1120 padding: 5px 0 0 !important;
1123 font-weight: inherit !important;
1124 transition: background-color 0.1s ease-in-out;
1127 .table-widget-column-header:hover {
1128 background: var(--theme-hover-background);
1131 .table-widget-column-header:hover:active {
1132 background: var(--theme-active-background);
1135 .table-widget-column-header:not(:active)[sorted] {
1136 background: var(--theme-selection-background);
1139 .table-widget-column-header:not(:active)[sorted=ascending] {
1140 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1141 background-size: 100% 1px;
1142 background-repeat: no-repeat;
1145 .table-widget-column-header:not(:active)[sorted=descending] {
1146 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1147 background-size: 100% 1px;
1148 background-repeat: no-repeat;
1149 background-position: bottom;
1154 .table-widget-cell {
1157 background-clip: padding-box;
1159 -moz-user-focus: normal;
1161 margin-bottom: -1px !important;
1162 border-bottom: 1px solid transparent;
1163 color: var(--theme-body-color);
1166 .table-widget-cell:last-child {
1167 border-bottom: 1px solid var(--table-splitter-color);
1170 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1171 .table-widget-cell:not(.theme-selected)[odd] {
1172 background: var(--table-zebra-background);
1175 .table-widget-cell.flash-out {
1176 animation: flash-out 0.5s ease-in;
1179 @keyframes flash-out {
1181 background: var(--theme-contrast-background2);
1185 /* Empty text and initial text */
1187 .table-widget-empty-text {
1191 margin-top: -20px !important;
1194 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1195 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1201 .tree-widget-container {
1208 -moz-margin-end: 40px;
1211 .tree-widget-container:-moz-focusring,
1212 .tree-widget-container *:-moz-focusring {
1213 outline-style: none;
1216 .tree-widget-empty-text {
1219 background: transparent;
1220 pointer-events: none;
1225 .tree-widget-container .tree-widget-item {
1226 padding: 2px 0px 4px;
1227 /* OSX has line-height 14px by default, which causes weird alignment issues
1228 * because of 20px high icons. thus making line-height consistent with that of
1231 line-height: 17px !important;
1232 display: inline-block;
1234 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1235 breaking in multiple lines */
1238 .tree-widget-container .tree-widget-children {
1244 .tree-widget-item[level="1"] {
1249 .tree-widget-item::before {
1254 margin: 3px 2px -3px;
1255 background-repeat: no-repeat;
1256 background-image: url("chrome://browser/skin/devtools/controls.png");
1257 background-size: 56px 28px;
1259 background-position: -28px -14px;
1262 .tree-widget-item:-moz-locale-dir(rtl)::before {
1264 transform: scaleX(-1);
1267 .tree-widget-item[empty]::before {
1268 background: transparent;
1271 .tree-widget-item[expanded]::before {
1272 background-position: -42px -14px;
1275 .tree-widget-item + ul {
1277 animation: collapse-tree-item 0.2s;
1281 .tree-widget-item[expanded] + ul {
1282 animation: expand-tree-item 0.3s;
1286 @keyframes collapse-tree-item {
1295 @keyframes expand-tree-item {
1304 @media (min-resolution: 1.25dppx) {
1305 .tree-widget-item:before {
1306 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1310 /* Indentation of child items in the tree */
1313 .tree-widget-item[level] + ul > li > .tree-widget-item {
1314 -moz-padding-start: 98px;
1318 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1319 -moz-padding-start: 14px;
1323 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1324 -moz-padding-start: 28px;
1328 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1329 -moz-padding-start: 42px;
1333 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1334 -moz-padding-start: 56px;
1338 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1339 -moz-padding-start: 70px;
1343 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1344 -moz-padding-start: 84px;
1347 /* Custom icons for certain tree items indicating the type of the item */
1349 .tree-widget-item[type]::after {
1354 -moz-margin-end: 4px;
1355 background-repeat: no-repeat;
1356 background-size: 20px auto;
1357 background-position: 0 0;
1358 background-size: auto 20px;
1362 .tree-widget-item.theme-selected[type]::after {
1366 .tree-widget-item:-moz-locale-dir(rtl)::after {
1370 /*.theme-light .tree-widget-item.theme-selected[type]::after,*/
1371 .tree-widget-item[type]::after {
1375 .tree-widget-item[type="dir"]::after {
1376 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1377 background-position: 2px 0;
1378 background-size: auto 16px;
1382 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
1383 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1386 .tree-widget-item[type="url"]::after {
1387 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1388 background-size: auto 18px;
1392 /* === BEGIN manifest-editor.inc.css === */
1394 /* Manifest Editor overrides */
1396 .variables-view-container.manifest-editor {
1397 background-color: #000000;
1401 .manifest-editor .variable-or-property:focus > .title {
1402 /* background-color: #EDEDED;
1407 .manifest-editor .variables-view-property > .title > .name {
1408 /* color: #27406A; */
1411 .manifest-editor .variable-or-property > .title > label,
1412 .manifest-editor textbox {
1413 font-family: monospace;
1416 .manifest-editor .variable-or-property > .title > .token-string {
1417 /* color: #54BC6A; */
1421 .manifest-editor .variable-or-property > .title > .token-boolean,
1422 .manifest-editor .variable-or-property > .title > .token-number {
1423 /* color: #009BD4; */
1427 .manifest-editor .variable-or-property > .title > .token-undefined {
1431 .manifest-editor .variable-or-property > .title > .token-null {
1435 .manifest-editor .variable-or-property > .title > .token-other {
1439 .manifest-editor .variables-view-variable {
1440 border-bottom: none;
1443 .manifest-editor .variables-view-delete,
1444 .manifest-editor .variables-view-delete:hover,
1445 .manifest-editor .variables-view-delete:active,
1446 .manifest-editor .variable-or-property:focus .variables-view-delete,
1447 .manifest-editor .variables-view-add-property,
1448 .manifest-editor .variables-view-add-property:hover,
1449 .manifest-editor .variables-view-add-property:active,
1450 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1451 list-style-image: none;
1452 -moz-image-region: initial;
1455 .manifest-editor .variables-view-delete::before,
1456 .manifest-editor .variables-view-add-property::before {
1460 display: inline-block;
1461 background-size: 11px auto;
1464 .manifest-editor .variables-view-delete::before {
1465 background-image: url("app-manager/remove.svg");
1466 background-size: 12px auto;
1469 .manifest-editor .variables-view-add-property::before {
1470 background-image: url("app-manager/add.svg");
1471 -moz-margin-end: 2px;
1474 /* === END manifest-editor.inc.css === */
1476 /* === END widgets.inc.css === */