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 === */
8 /* Generic pane helpers */
10 .generic-toggled-side-pane {
11 -moz-margin-start: 0px !important;
12 /* Unfortunately, transitions don't work properly with locale-aware properties,
13 so both the left and right margins are set via js, while the start margin
14 is always overridden here. */
17 .generic-toggled-side-pane[animated] {
18 transition: margin 0.25s ease-in-out;
21 /* Responsive container */
23 .devtools-responsive-container {
24 -moz-box-orient: horizontal;
27 .devtools-main-content {
31 .devtools-main-content,
32 .devtools-sidebar-tabs {
33 /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
37 @media (max-width: 700px) {
38 .devtools-responsive-container {
39 -moz-box-orient: vertical;
42 .devtools-responsive-container > .devtools-side-splitter {
43 /* This is a normally vertical splitter, but we have turned it horizontal
44 due to the smaller resolution */
51 /* Reset the vertical splitter styles */
55 /* In some edge case the cursor is not changed to n-resize */
59 .devtools-responsive-container > .devtools-sidebar-tabs {
65 /* BreacrumbsWidget */
67 .breadcrumbs-widget-container {
68 -moz-margin-start: 2px;
69 -moz-margin-start: 2px;
70 max-height: 24px; /* Set max-height for proper sizing on linux */
71 height: 24px; /* Set height to prevent starting small waiting for content */
76 background: transparent;
91 .scrollbutton-up > .toolbarbutton-icon,
92 .scrollbutton-down > .toolbarbutton-icon {
96 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
97 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
100 .scrollbutton-up[disabled] > .toolbarbutton-icon,
101 .scrollbutton-down[disabled] > .toolbarbutton-icon {
104 .scrollbutton-up:-moz-locale-dir(ltr) {
105 border-top-right-radius: 0;
106 border-bottom-right-radius: 0;
109 .scrollbutton-down:-moz-locale-dir(ltr) {
110 border-top-left-radius: 0;
111 border-bottom-left-radius: 0;
114 .scrollbutton-up:-moz-locale-dir(rtl) {
115 border-top-left-radius: 0;
116 border-bottom-left-radius: 0;
119 .scrollbutton-down:-moz-locale-dir(rtl) {
120 border-top-right-radius: 0;
121 border-bottom-right-radius: 0;
124 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
126 .scrollbutton-up:-moz-locale-dir(ltr),
127 .scrollbutton-down:-moz-locale-dir(rtl) {
128 border-right: solid 1px rgba(255, 255, 255, .1);
129 border-left: solid 1px transparent;
130 box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
133 .scrollbutton-down:-moz-locale-dir(ltr),
134 .scrollbutton-up:-moz-locale-dir(rtl) {
135 border-right: solid 1px transparent;
136 border-left: solid 1px rgba(255, 255, 255, .1);
137 box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
140 .scrollbutton-up[disabled],
141 .scrollbutton-down[disabled] {
143 border-color: transparent;
147 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
148 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
149 /* transform: scaleX(-1); */
152 /* The breadcrumb separator elements are used as background images with
153 * -moz-element, so we position them offscreen since we don't care about
154 * seeing the original elements.
156 .breadcrumb-separator-container {
162 #breadcrumb-separator-before,
163 #breadcrumb-separator-after,
164 #breadcrumb-separator-normal {
170 #breadcrumb-separator-before,
171 #breadcrumb-separator-after:after {
172 background: var(--theme-selection-background);
175 #breadcrumb-separator-after,
176 #breadcrumb-separator-before:after {
177 background: var(--theme-toolbar-background);
180 /* This chevron arrow cannot be replicated easily in CSS, so we are using
181 * a background image for it (still keeping it in a separate element so
182 * we can handle RTL support with a CSS transform).
184 #breadcrumb-separator-normal {
185 background: url("breadcrumbs-divider@2x.png") no-repeat center right;
186 background-size: 12px 24px;
189 /* Fake a triangle by rotating a rectangle inside the elements */
190 #breadcrumb-separator-before:after,
191 #breadcrumb-separator-after:after {
196 transform: translateX(-18px) rotate(45deg);
197 box-sizing: border-box;
200 .breadcrumbs-widget-item {
201 background-color: var(--theme-toolbar-background);
205 padding: 0 8px 0 20px;
209 color: var(--theme-content-color1);
212 .breadcrumbs-widget-item:hover {
213 background-color: var(--theme-hover-background);
214 color: var(--theme-hover-color);
217 .breadcrumbs-widget-item[checked]:not(:hover) {
218 background-color: var(--theme-selection-background);
219 color: var(--theme-selection-color);
222 .breadcrumbs-widget-item[siblings-menu-open],
223 .breadcrumbs-widget-item:active {
224 background-color: #FF9F00;
228 .breadcrumbs-widget-item > .button-box {
234 .breadcrumbs-widget-item:not([checked]) {
235 background-image: -moz-element(#breadcrumb-separator-normal);
236 background-repeat: no-repeat;
237 background-position: center left;
240 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
241 background-image: -moz-element(#breadcrumb-separator-after);
242 background-repeat: no-repeat;
243 background-position: 0 0;
246 .breadcrumbs-widget-item[checked] {
247 background-image: -moz-element(#breadcrumb-separator-before);
248 background-repeat: no-repeat;
249 background-position: 0 0;
250 background-color: #008484; /* Select Highlight Blue */
253 .breadcrumbs-widget-item:first-child {
254 background-image: none;
257 /* RTL support: move the images that were on the left to the right,
258 * and move images that were on the right to the left.
260 .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
261 padding: 0 20px 0 8px;
264 .breadcrumbs-widget-item:-moz-locale-dir(rtl),
265 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
266 background-position: center right;
269 #breadcrumb-separator-before:-moz-locale-dir(rtl),
270 #breadcrumb-separator-after:-moz-locale-dir(rtl),
271 #breadcrumb-separator-normal:-moz-locale-dir(rtl) {
272 transform: scaleX(-1);
275 #breadcrumb-separator-before:-moz-locale-dir(rtl):after,
276 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
277 transform: translateX(-5px) rotate(45deg);
280 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
281 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
282 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
283 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
284 color: var(--theme-highlight-lightorange);
287 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
288 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
289 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
290 .breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
291 color: var(--theme-hover-color) !important;
294 .breadcrumbs-widget-item {
295 color: var(--theme-highlight-lightorange);
298 .breadcrumbs-widget-item-id {
299 color: var(--theme-body-color-alt);
302 .breadcrumbs-widget-item-classes {
303 color: var(--theme-content-color1);
306 .breadcrumbs-widget-item-pseudo-classes {
307 color: var(--theme-highlight-lightorange);
310 /* SimpleListWidget */
312 .simple-list-widget-container {
313 /* Hack: force hardware acceleration */
314 transform: translateZ(1px);
317 .simple-list-widget-item.selected {
318 background-color: var(--theme-selection-background);
319 color: var(--theme-selection-color);
322 .simple-list-widget-item:not(.selected):hover {
323 background-color: var(--theme-hover-background);
324 color: var(--theme-hover-color);
327 .simple-list-widget-perma-text,
328 .simple-list-widget-empty-text {
329 color: var(--theme-body-color-alt);
335 .fast-list-widget-container {
336 /* Hack: force hardware acceleration */
337 transform: translateZ(1px);
340 /* dark/light theme */
341 .fast-list-widget-empty-text {
344 color: var(--theme-body-color-alt);
349 /* SideMenuWidget container */
351 .side-menu-widget-container {
352 /* Hack: force hardware acceleration */
353 transform: translateZ(1px);
356 .side-menu-widget-container:-moz-locale-dir(ltr),
357 .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
360 .side-menu-widget-container:-moz-locale-dir(rtl),
361 .side-menu-widget-empty-text:-moz-locale-dir(rtl)[with-arrows=true]:-moz-locale-dir(rtl) {
364 .side-menu-widget-group {
365 /* To allow visibility of the dark margin shadow. */
366 /* -moz-margin-end: 1px; */
369 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
370 /* To compensate for the arrow image's dark margin. */
371 /* -moz-margin-end: -1px; */
374 /* SideMenuWidget groups */
376 .side-menu-widget-group-title {
378 background-color: var(--theme-contrastsidebar-background);
379 color: var(--theme-contrastsidebar-color);
382 /* SideMenuWidget items */
384 .side-menu-widget-item {
385 border-top: 1px solid #9C9CFF;
386 /* To compensate for the top and bottom borders */
389 background-clip: padding-box;
392 .side-menu-widget-item:last-of-type {
393 border-bottom: 1px solid #9C9CFF;
396 .side-menu-widget-item.selected {
397 background-color: var(--theme-selection-background);
398 color: var(--theme-selection-color);
401 .side-menu-widget-item-arrow {
402 -moz-margin-start: -7px;
403 width: 7px; /* The image's width is 7 pixels */
404 /* Cover the border of the side-menu-widget-item */
409 .side-menu-widget-item.selected > .side-menu-widget-item-arrow {
410 background-size: auto, 1px 100%;
411 background-repeat: no-repeat;
414 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
415 background-position: center right;
418 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
419 background-position: center left;
422 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
423 background-image: url("itemArrow-ltr.svg");
426 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
427 background-image: url("itemArrow-rtl.svg");
430 /* SideMenuWidget items contents */
432 .side-menu-widget-item-contents {
434 /* To avoid having content overlapping the arrow image. */
435 -moz-padding-end: 8px;
438 .side-menu-widget-item-other {
439 /* To avoid having content overlapping the arrow image. */
440 -moz-padding-end: 8px;
441 /* To compensate for the .side-menu-widget-item-contents padding. */
442 -moz-margin-start: -4px;
443 -moz-margin-end: -8px;
444 color: var(--theme-selection-color);
447 .side-menu-widget-item-other.selected {
448 background-color: var(--theme-selection-background);
449 color: var(--theme-selection-color);
452 .side-menu-widget-item-other:first-of-type {
454 /* border-top-left-radius: 4px; */
457 .side-menu-widget-item-other:last-of-type {
461 .side-menu-widget-item-other:not(.selected) > label {
465 /* SideMenuWidget checkboxes */
467 .side-menu-widget-group-checkbox {
469 -moz-margin-end: 4px;
472 .side-menu-widget-item-checkbox {
474 -moz-margin-start: 4px;
475 -moz-margin-end: -4px;
478 /* SideMenuWidget misc */
480 .theme-dark .side-menu-widget-container,
481 .theme-dark .side-menu-widget-empty-text {
482 background-color: var(--theme-toolbar-background);
485 .side-menu-widget-empty-text {
491 .variables-view-container:not([empty]) {
492 /* Hack: force hardware acceleration */
493 transform: translateZ(1px);
496 .variables-view-empty-notice {
497 color: var(--theme-body-color-alt);
501 .variables-view-scope:focus > .title,
502 .theme-dark .variable-or-property:focus > .title {
503 background-color: var(--theme-selection-background);
504 color: var(--theme-selection-color);
507 .variables-view-scope > .title {
508 background-color: #A09090;
512 /* Generic variables traits */
514 .variables-view-variable:not(:last-child) {
515 border-bottom: 1px solid #A09090;
518 .variables-view-variable > .title > .name {
522 /* Generic variables *and* properties traits */
524 .variable-or-property:focus > .title > label {
525 color: inherit !important;
528 .variables-view-container .theme-twisty {
532 .variable-or-property > .title > .theme-twisty {
533 -moz-margin-start: 5px;
536 .variable-or-property:not([untitled]) > .variables-view-element-details {
537 -moz-margin-start: 7px;
540 /* Traits applied when variables or properties are changed or overridden */
542 .variable-or-property:not([overridden]) {
543 transition: background 1s ease-in-out, color 1s ease-in-out;
546 .variable-or-property:not([overridden])[changed] {
548 transition-duration: .4s;
551 .variable-or-property[overridden] {
552 background: rgba(160,144,144,0.0.5);
555 .variable-or-property[overridden] .title > label {
556 /* Cross out the title for this variable and all child properties. */
558 text-decoration: line-through;
559 border-bottom: none !important;
564 /* Traits applied when variables or properties are editable */
566 .variable-or-property[editable] > .title > .value {
570 .variable-or-property[overridden] .title > .value {
571 /* Disallow editing this variable and all child properties. */
572 pointer-events: none;
575 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
576 * variables and properties */
578 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
582 .variable-or-property-non-writable-icon {
583 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
584 background-size: cover;
590 @media (min-resolution: 1.25dppx) {
591 .variable-or-property-non-writable-icon > .title:after {
592 background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
596 .variable-or-property-frozen-label,
597 .variable-or-property-sealed-label,
598 .variable-or-property-non-extensible-label {
600 -moz-padding-end: 4px;
603 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
604 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
605 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
611 .variables-view-container[aligned-values] .title > .separator {
615 .variables-view-container[aligned-values] .title > .value {
620 .variables-view-container[aligned-values] .title > .element-value-input {
621 width: calc(70vw - 10px);
626 .variables-view-open-inspector {
627 -moz-box-ordinal-group: 1;
630 .variables-view-edit,
631 .variables-view-add-property {
632 -moz-box-ordinal-group: 2;
635 .variable-or-property-frozen-label,
636 .variable-or-property-sealed-label,
637 .variable-or-property-non-extensible-label,
638 .variable-or-property-non-writable-icon {
639 -moz-box-ordinal-group: 3;
642 .variables-view-delete {
643 -moz-box-ordinal-group: 4;
646 .variables-view-container[actions-first] .variables-view-delete,
647 .variables-view-container[actions-first] .variables-view-add-property,
648 .variables-view-container[actions-first] .variables-view-open-inspector {
649 -moz-box-ordinal-group: 0;
652 .variables-view-container[actions-first] [invisible] {
656 /* Variables and properties tooltips */
658 .variable-or-property > tooltip > label {
662 .variable-or-property[non-enumerable] > tooltip > label.enumerable,
663 .variable-or-property[non-configurable] > tooltip > label.configurable,
664 .variable-or-property[non-writable] > tooltip > label.writable
665 .variable-or-property[non-extensible] > tooltip > label.extensible {
667 text-decoration: line-through;
670 .variable-or-property[overridden] > tooltip > label.overridden {
671 -moz-padding-start: 4px;
672 -moz-border-start: 1px dotted #9C9CFF;
675 .variable-or-property[safe-getter] > tooltip > label.WebIDL {
676 -moz-padding-start: 4px;
677 -moz-border-start: 1px dotted #9C9CFF;
681 /* Variables and properties editing */
683 .variables-view-delete {
684 background: url("chrome://browser/skin/devtools/vview-delete.png");
685 background-size: cover;
690 @media (min-resolution: 1.25dppx) {
691 .variables-view-delete {
692 background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
696 .variables-view-delete:hover {
697 background-position: 32px;
700 .variables-view-delete:active {
701 background-position: 16px;
704 .variable-or-property:focus > .title > .variables-view-delete {
705 /* background-position: 0px; */
708 .variables-view-edit {
709 background: url("chrome://browser/skin/devtools/vview-edit.png");
710 background-size: cover;
716 @media (min-resolution: 1.25dppx) {
717 .variables-view-edit {
718 background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
722 .variables-view-edit:hover {
723 background-position: 32px;
726 .variables-view-edit:active {
727 background-position: 16px;
730 .variable-or-property:focus > .title > .variables-view-edit {
731 /* background-position: 0px; */
734 .variables-view-open-inspector {
735 background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
736 background-size: cover;
742 .variables-view-open-inspector:hover {
743 background-position: 32px;
746 .variables-view-open-inspector:active {
747 background-position: 16px;
750 .variable-or-property:focus > .title > .variables-view-open-inspector {
751 /* background-position: 0px; */
754 /* Variables and properties input boxes */
756 .variable-or-property > .title > .separator + .element-value-input {
757 -moz-margin-start: -2px !important;
758 -moz-margin-end: 2px !important;
761 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {
762 -moz-margin-start: 4px !important;
763 -moz-margin-end: 2px !important;
766 .element-name-input {
767 -moz-margin-start: -2px !important;
768 -moz-margin-end: 2px !important;
772 .element-value-input,
773 .element-name-input {
774 border: 1px solid #008484 !important;
778 /* Variables and properties searching */
780 .variable-or-property[unmatched] {
787 .graph-widget-container {
791 .graph-widget-canvas {
796 .graph-widget-canvas[input=hovering-background] {
800 .graph-widget-canvas[input=hovering-region] {
804 .graph-widget-canvas[input=hovering-selection-start-boundary],
805 .graph-widget-canvas[input=hovering-selection-end-boundary],
806 .graph-widget-canvas[input=adjusting-selection-boundary] {
810 .graph-widget-canvas[input=adjusting-view-area] {
814 .graph-widget-canvas[input=hovering-selection-contents] {
818 .graph-widget-canvas[input=dragging-selection-contents] {
822 /* Line graph widget */
824 .line-graph-widget-gutter {
830 pointer-events: none;
833 -moz-border-end: 1px solid #9C9CFF;
836 .line-graph-widget-gutter-line {
839 border-top: 1px solid;
842 .line-graph-widget-gutter-line[type=maximum] {
843 border-color: #008484;
846 .line-graph-widget-gutter-line[type=minimum] {
847 border-color: #FF0000;
850 .line-graph-widget-gutter-line[type=average] {
851 border-color: #FF9F00;
854 .line-graph-widget-tooltip {
858 -moz-padding-start: 6px;
859 -moz-padding-end: 6px;
860 transform: translateY(-50%);
861 font-size: 0.8rem !important;
863 pointer-events: none;
868 .line-graph-widget-tooltip[with-arrows=true]::before {
871 border-top: 3px solid transparent;
872 border-bottom: 3px solid transparent;
873 top: calc(50% - 3px);
876 .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
877 -moz-border-end: 3px solid #9C9CFF;
881 .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
882 -moz-border-start: 3px solid #9C9CFF;
886 .line-graph-widget-tooltip[type=maximum] {
890 .line-graph-widget-tooltip[type=minimum] {
894 .line-graph-widget-tooltip[type=average] {
898 .line-graph-widget-tooltip > [text=info] {
899 color: var(--theme-content-color2);
902 .line-graph-widget-tooltip > [text=value] {
903 -moz-margin-start: 3px;
906 .line-graph-widget-tooltip > [text=metric] {
907 -moz-margin-start: 1px;
908 color: var(--theme-content-color4);
911 .line-graph-widget-tooltip > [text=value],
912 .line-graph-widget-tooltip > [text=metric] {
913 /* text-shadow: 1px 0px rgba(255,255,255,0.6),
914 -1px 0px rgba(255,255,255,0.6),
915 0px -1px rgba(255,255,255,0.6),
916 0px 1px rgba(255,255,255,0.6);*/
919 .line-graph-widget-tooltip[type=maximum] > [text=value] {
920 color: var(--theme-highlight-green);
923 .line-graph-widget-tooltip[type=minimum] > [text=value] {
924 color: var(--theme-highlight-red);
927 .line-graph-widget-tooltip[type=average] > [text=value] {
928 color: var(--theme-highlight-orange);
931 /* Bar graph widget */
933 .bar-graph-widget-legend {
938 font-size: 0.8rem !important;
939 pointer-events: none;
942 .bar-graph-widget-legend-item {
944 -moz-margin-end: 8px;
947 .bar-graph-widget-legend-item > [view="color"],
948 .bar-graph-widget-legend-item > [view="label"] {
949 vertical-align: middle;
952 .bar-graph-widget-legend-item > [view="color"] {
953 display: inline-block;
956 border: 1px solid #9C9CFF;
958 -moz-margin-end: 4px;
959 pointer-events: none;
962 .bar-graph-widget-legend-item > [view="label"] {
963 /* text-shadow: 1px 0px rgba(255,255,255,0.8),
964 -1px 0px rgba(255,255,255,0.8),
965 0px -1px rgba(255,255,255,0.8),
966 0px 1px rgba(255,255,255,0.8);*/
971 .generic-chart-container {
972 /* Hack: force hardware acceleration */
973 transform: translateZ(1px);
976 .generic-chart-container {
977 color: var(--theme-body-color-alt);
980 .chart-colored-blob {
981 fill: var(--theme-highlight-blue);
982 background: var(--theme-highlight-blue);
996 .pie-chart-slice[largest] {
1002 text-anchor: middle;
1003 dominant-baseline: middle;
1004 pointer-events: none;
1011 .pie-chart-container[slices="1"] > .pie-chart-slice {
1017 transition: all 0.1s ease-out;
1020 .pie-chart-slice:not(:hover):not([focused]),
1021 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
1022 transform: none !important;
1027 .table-chart-title {
1028 padding-bottom: 10px;
1038 .table-chart-grid:hover > .table-chart-row {
1039 transition: opacity 0.1s ease-in-out;
1042 .table-chart-grid:not(:hover) > .table-chart-row {
1043 transition: opacity 0.2s ease-in-out;
1046 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
1047 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
1051 .table-chart-row-box {
1054 -moz-margin-end: 10px;
1057 .table-chart-row-label {
1059 -moz-padding-end: 6px;
1063 .table-chart-totals {
1068 .table-chart-totals {
1069 border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
1072 .table-chart-summary-label {
1077 .table-chart-summary-label {
1078 color: var(--theme-content-color2);
1085 .table-widget-body > .devtools-side-splitter {
1089 .table-widget-body {
1092 background: var(--theme-sidebar-background);
1095 .table-widget-body:-moz-locale-dir(ltr) {
1096 /* box-shadow: inset -1px 0 0 @smw_marginDark@;*/
1099 .table-widget-body:-moz-locale-dir(rtl) {
1100 /* box-shadow: inset 1px 0 0 @smw_marginDark@;*/
1103 .table-widget-body:-moz-locale-dir(ltr) {
1104 /* box-shadow: inset -1px 0 0 @smw_marginLight@;*/
1107 .table-widget-body:-moz-locale-dir(rtl) {
1108 /* box-shadow: inset 1px 0 0 @smw_marginLight@;*/
1111 /* Column Headers */
1113 .table-widget-column-header,
1114 .table-widget-cell {
1115 -moz-border-end: 1px solid #A09090;
1118 /* Table widget column header colors are taken from netmonitor.inc.css to match
1119 the look of both the tables. This needs to be updated along with netmonitor
1120 header colors in bug 951714 */
1122 .table-widget-column-header {
1123 background: rgba(0,0,0,0);
1129 padding: 8px 0 0 !important;
1132 font-weight: inherit !important;
1133 transition: background-color 0.1s ease-in-out;
1136 .table-widget-column-header:hover {
1137 background: #FFCF00;
1140 .table-widget-column-header:hover:active {
1141 background: #FF9F00;
1144 .table-widget-column-header:not(:active)[sorted] {
1145 background: #008484;
1148 .table-widget-column-header:not(:active)[sorted=ascending] {
1149 background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1150 background-size: 100% 1px;
1151 background-repeat: no-repeat;
1154 .table-widget-column-header:not(:active)[sorted=descending] {
1155 background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3));
1156 background-size: 100% 1px;
1157 background-repeat: no-repeat;
1158 background-position: bottom;
1163 .table-widget-cell {
1165 margin: -1px 0 !important;
1167 background-clip: padding-box;
1169 -moz-user-focus: normal;
1172 .table-widget-cell {
1173 border-top: 1px solid #A09090;
1174 border-bottom: 1px solid #A09090;
1175 color: var(--theme-body-color);
1178 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1179 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
1180 .table-widget-cell:not(.theme-selected)[odd] {
1181 background: #404000;
1184 .table-widget-cell:last-of-type {
1185 /* box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;*/
1188 .table-widget-cell.flash-out {
1189 animation: flash-out 0.5s ease-in;
1192 @keyframes flash-out {
1194 background: var(--theme-contrast-background2);
1198 /* Empty text and initial text */
1200 .table-widget-empty-text {
1204 margin-top: -20px !important;
1207 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
1208 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
1214 .tree-widget-container {
1221 -moz-margin-end: 40px;
1224 .tree-widget-container:-moz-focusring,
1225 .tree-widget-container *:-moz-focusring {
1226 outline-style: none;
1229 .tree-widget-empty-text {
1232 background: transparent;
1233 pointer-events: none;
1238 .tree-widget-container .tree-widget-item {
1239 padding: 2px 0px 4px;
1240 /* OSX has line-height 14px by default, which causes weird alignment issues
1241 * because of 20px high icons. thus making line-height consistent with that of
1244 line-height: 17px !important;
1245 display: inline-block;
1247 word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
1248 breaking in multiple lines */
1251 .tree-widget-container .tree-widget-children {
1257 .tree-widget-item[level="1"] {
1262 .tree-widget-item:before {
1267 margin: 3px 2px -3px;
1268 background-repeat: no-repeat;
1269 background-image: url("chrome://browser/skin/devtools/controls.png");
1270 background-size: 56px 28px;
1272 background-position: -28px -14px;
1275 .tree-widget-item:-moz-locale-dir(rtl):before {
1277 transform: scaleX(-1);
1280 .theme-light .tree-widget-item:before {
1281 background-position: 0 -14px;
1284 .tree-widget-item[empty]:before {
1285 background: transparent;
1288 .tree-widget-item[expanded]:before {
1289 background-position: -42px -14px;
1292 .theme-light .tree-widget-item[expanded]:before {
1293 background-position: -14px -14px;
1296 .tree-widget-item + ul {
1298 animation: collapse-tree-item 0.2s;
1302 .tree-widget-item[expanded] + ul {
1303 animation: expand-tree-item 0.3s;
1307 @keyframes collapse-tree-item {
1316 @keyframes expand-tree-item {
1325 @media (min-resolution: 1.25dppx) {
1326 .tree-widget-item:before {
1327 background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1331 /* Indentation of child items in the tree */
1334 .tree-widget-item[level] + ul > li > .tree-widget-item {
1335 -moz-padding-start: 98px;
1339 .tree-widget-item[level="1"] + ul > li > .tree-widget-item {
1340 -moz-padding-start: 14px;
1344 .tree-widget-item[level="2"] + ul > li > .tree-widget-item {
1345 -moz-padding-start: 28px;
1349 .tree-widget-item[level="3"] + ul > li > .tree-widget-item {
1350 -moz-padding-start: 42px;
1354 .tree-widget-item[level="4"] + ul > li > .tree-widget-item {
1355 -moz-padding-start: 56px;
1359 .tree-widget-item[level="5"] + ul > li > .tree-widget-item {
1360 -moz-padding-start: 70px;
1364 .tree-widget-item[level="6"] + ul > li > .tree-widget-item {
1365 -moz-padding-start: 84px;
1368 /* Custom icons for certain tree items indicating the type of the item */
1370 .tree-widget-item[type]:after {
1375 -moz-margin-end: 4px;
1376 background-repeat: no-repeat;
1377 background-size: 20px auto;
1378 filter: url('filters.svg#invert');
1379 background-position: 0 0;
1380 background-size: auto 20px;
1383 .tree-widget-item:-moz-locale-dir(rtl):after {
1387 .theme-dark .tree-widget-item[type]:after {
1388 filter: url('filters.svg#invert-white');
1391 .tree-widget-item[type="dir"]:after {
1392 background-image: url("chrome://browser/skin/devtools/filetype-dir-close.svg");
1393 background-position: 2px 0;
1394 background-size: auto 16px;
1398 .tree-widget-item[type="dir"][expanded]:not([empty]):after {
1399 background-image: url("chrome://browser/skin/devtools/filetype-dir-open.svg");
1402 .tree-widget-item[type="url"]:after {
1403 background-image: url("chrome://browser/skin/devtools/filetype-globe.svg");
1404 background-size: auto 18px;
1408 /* === BEGIN manifest-editor.inc.css === */
1410 /* Manifest Editor overrides */
1412 .variables-view-container.manifest-editor {
1413 background-color: #000000;
1417 .manifest-editor .variable-or-property:focus > .title {
1418 /* background-color: #EDEDED;
1423 .manifest-editor .variables-view-property > .title > .name {
1424 /* color: #27406A; */
1427 .manifest-editor .variable-or-property > .title > label,
1428 .manifest-editor textbox {
1429 font-family: monospace;
1432 .manifest-editor .variable-or-property > .title > .token-string {
1433 /* color: #54BC6A; */
1437 .manifest-editor .variable-or-property > .title > .token-boolean,
1438 .manifest-editor .variable-or-property > .title > .token-number {
1439 /* color: #009BD4; */
1443 .manifest-editor .variable-or-property > .title > .token-undefined {
1447 .manifest-editor .variable-or-property > .title > .token-null {
1451 .manifest-editor .variable-or-property > .title > .token-other {
1455 .manifest-editor .variables-view-variable {
1456 border-bottom: none;
1459 .manifest-editor .variables-view-delete,
1460 .manifest-editor .variables-view-delete:hover,
1461 .manifest-editor .variables-view-delete:active,
1462 .manifest-editor .variable-or-property:focus .variables-view-delete,
1463 .manifest-editor .variables-view-add-property,
1464 .manifest-editor .variables-view-add-property:hover,
1465 .manifest-editor .variables-view-add-property:active,
1466 .manifest-editor .variable-or-property:focus .variables-view-add-property {
1467 list-style-image: none;
1468 -moz-image-region: initial;
1471 .manifest-editor .variables-view-delete::before,
1472 .manifest-editor .variables-view-add-property::before {
1476 display: inline-block;
1477 background-size: 11px auto;
1480 .manifest-editor .variables-view-delete::before {
1481 background-image: url("app-manager/remove.svg");
1482 background-size: 12px auto;
1485 .manifest-editor .variables-view-add-property::before {
1486 background-image: url("app-manager/add.svg");
1487 -moz-margin-end: 2px;
1490 /* === END manifest-editor.inc.css === */
1492 /* === END widgets.inc.css === */