mirror of
https://github.com/roytam1/UXP.git
synced 2026-05-26 05:46:58 +00:00
Moonchild
d388e478a0
Vim control lines were re-introduced or not entirely cleaned up. This nukes them again. Removing from the rest of js, caps, chrome, config, devtools, docshell, image, intl. More to come.
1621 lines
40 KiB
CSS
1621 lines
40 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
.theme-dark {
|
|
--table-splitter-color: rgba(255,255,255,0.15);
|
|
--table-zebra-background: rgba(255,255,255,0.05);
|
|
--sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
|
|
--sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
|
|
--delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
|
|
--delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
|
|
}
|
|
|
|
.theme-light {
|
|
--table-splitter-color: rgba(0,0,0,0.15);
|
|
--table-zebra-background: rgba(0,0,0,0.05);
|
|
--sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
|
|
--sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
|
|
--delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
|
|
--delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
|
|
}
|
|
|
|
.theme-firebug {
|
|
--table-splitter-color: rgba(0,0,0,0.15);
|
|
--table-zebra-background: rgba(0,0,0,0.05);
|
|
--sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
|
|
--sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
|
|
--delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
|
|
--delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg);
|
|
}
|
|
|
|
|
|
/* Generic pane helpers */
|
|
|
|
.generic-toggled-pane {
|
|
margin-inline-start: 0 !important;
|
|
/* Unfortunately, transitions don't work properly with locale-aware properties,
|
|
so both the left and right margins are set via js, while the start margin
|
|
is always overridden here. */
|
|
}
|
|
|
|
.generic-toggled-pane[animated] {
|
|
transition: margin 0.25s ease-in-out;
|
|
}
|
|
|
|
/* Responsive container */
|
|
|
|
.devtools-responsive-container {
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
.devtools-main-content {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.devtools-main-content,
|
|
.devtools-sidebar-tabs {
|
|
/* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 701px) {
|
|
.devtools-responsive-container .generic-toggled-pane {
|
|
/* To hide generic-toggled-pane, negative margins are applied dynamically.
|
|
* In the default horizontal layout, the pane is on the side and should be
|
|
* hidden using negative margin-inline-end only.
|
|
*/
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.devtools-responsive-container {
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
.devtools-responsive-container > .devtools-side-splitter {
|
|
/* This is a normally vertical splitter, but we have turned it horizontal
|
|
due to the smaller resolution */
|
|
min-height: calc(var(--devtools-splitter-top-width) +
|
|
var(--devtools-splitter-bottom-width) + 1px);
|
|
border-top-width: var(--devtools-splitter-top-width);
|
|
border-bottom-width: var(--devtools-splitter-bottom-width);
|
|
margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
|
|
margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
|
|
|
|
/* Reset the vertical splitter styles */
|
|
min-width: 0;
|
|
border-inline-end-width: 0;
|
|
border-inline-start-width: 0;
|
|
margin-inline-end: 0;
|
|
margin-inline-start: 0;
|
|
|
|
/* In some edge case the cursor is not changed to n-resize */
|
|
cursor: n-resize;
|
|
}
|
|
|
|
.devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) {
|
|
/* When the panel is collapsed min/max height should not be applied because
|
|
collapsing relies on negative margins, which implies constant height. */
|
|
min-height: 35vh;
|
|
max-height: 75vh;
|
|
}
|
|
|
|
.devtools-responsive-container .generic-toggled-pane {
|
|
/* To hide generic-toggled-pane, negative margins are applied dynamically.
|
|
* If a vertical layout, the pane is on the bottom and should be hidden
|
|
* using negative bottom margin only.
|
|
*/
|
|
margin-inline-end: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* BreacrumbsWidget */
|
|
|
|
.breadcrumbs-widget-container {
|
|
margin-inline-end: 3px;
|
|
max-height: 24px; /* Set max-height for proper sizing on linux */
|
|
height: 24px; /* Set height to prevent starting small waiting for content */
|
|
}
|
|
|
|
.scrollbutton-up,
|
|
.scrollbutton-down {
|
|
-moz-appearance: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: none;
|
|
list-style-image: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.scrollbutton-up > .toolbarbutton-icon,
|
|
.scrollbutton-down > .toolbarbutton-icon {
|
|
-moz-appearance: none;
|
|
width: 7px;
|
|
height: 16px;
|
|
background-size: 14px 16px;
|
|
background-position: 0 center;
|
|
background-repeat: no-repeat;
|
|
background-image: url("images/breadcrumbs-scrollbutton.png");
|
|
list-style-image: none;
|
|
margin: 0 8px;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.scrollbutton-up > .toolbarbutton-icon,
|
|
.scrollbutton-down > .toolbarbutton-icon {
|
|
background-image: url("images/breadcrumbs-scrollbutton@2x.png");
|
|
}
|
|
}
|
|
|
|
.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
|
|
.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
|
|
background-position: -7px center;
|
|
}
|
|
|
|
.scrollbutton-up[disabled] > .toolbarbutton-icon,
|
|
.scrollbutton-down[disabled] > .toolbarbutton-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
|
|
.scrollbutton-up:-moz-locale-dir(ltr),
|
|
.scrollbutton-down:-moz-locale-dir(rtl) {
|
|
border-right: solid 1px rgba(255, 255, 255, .1);
|
|
border-left: solid 1px transparent;
|
|
box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
|
|
}
|
|
|
|
.scrollbutton-down:-moz-locale-dir(ltr),
|
|
.scrollbutton-up:-moz-locale-dir(rtl) {
|
|
border-right: solid 1px transparent;
|
|
border-left: solid 1px rgba(255, 255, 255, .1);
|
|
box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
|
|
}
|
|
|
|
.scrollbutton-up[disabled],
|
|
.scrollbutton-down[disabled] {
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
|
|
.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.breadcrumbs-widget-item {
|
|
background-color: transparent;
|
|
-moz-appearance: none;
|
|
min-height: 24px;
|
|
min-width: 65px;
|
|
margin: 0;
|
|
padding: 0 8px 0 20px;
|
|
border: none;
|
|
outline: none;
|
|
color: hsl(210,30%,85%);
|
|
position: relative;
|
|
}
|
|
|
|
.breadcrumbs-widget-item > .button-box {
|
|
border: none;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box {
|
|
border-width: 0;
|
|
}
|
|
|
|
.breadcrumbs-widget-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
inset-inline-start: 0;
|
|
width: 12px;
|
|
height: 22px;
|
|
background-repeat: no-repeat;
|
|
/* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of
|
|
the arrow shape, we need the arrow edges to be at this position from the start of
|
|
the gradient line. */
|
|
--position: 66.5%;
|
|
/* The color of the thin line in the arrow-shaped separator between 2 unselected
|
|
crumbs. There is no theme variable for this, this used to be an image. */
|
|
--line-color: #ACACAC;
|
|
--background-color: var(--theme-body-background);
|
|
}
|
|
|
|
#debugger-toolbar .breadcrumbs-widget-item::before {
|
|
--background-color: var(--theme-toolbar-background);
|
|
}
|
|
|
|
.theme-dark .breadcrumbs-widget-item::before {
|
|
--line-color: #6E6E6E;
|
|
}
|
|
|
|
.breadcrumbs-widget-item:first-child::before {
|
|
/* The first crumb does not need any separator before itself */
|
|
content: unset;
|
|
}
|
|
|
|
.breadcrumbs-widget-item:dir(rtl)::before {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.breadcrumbs-widget-item:not([checked])::before {
|
|
background-color: var(--background-color);
|
|
background-image:
|
|
linear-gradient(45deg,
|
|
var(--background-color) 30%,
|
|
transparent),
|
|
linear-gradient(-45deg,
|
|
transparent,
|
|
var(--background-color) 70%,
|
|
var(--background-color)),
|
|
linear-gradient(45deg,
|
|
transparent var(--position),
|
|
var(--line-color) var(--position),
|
|
var(--line-color) calc(var(--position) + 1px),
|
|
transparent 0),
|
|
linear-gradient(-45deg,
|
|
transparent calc(100% - var(--position)),
|
|
var(--line-color) calc(100% - var(--position)),
|
|
var(--line-color) calc(calc(100% - var(--position)) + 1px),
|
|
transparent 0);
|
|
background-size:
|
|
100% 50%,
|
|
100% 50%,
|
|
100%,
|
|
100%;
|
|
background-position:
|
|
left bottom,
|
|
left top,
|
|
left top,
|
|
left top;
|
|
}
|
|
|
|
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before {
|
|
background-color: var(--theme-selection-background);
|
|
background-image:
|
|
linear-gradient(45deg,
|
|
transparent var(--position),
|
|
var(--background-color) 0),
|
|
linear-gradient(-45deg,
|
|
var(--background-color) calc(100% - var(--position)),
|
|
transparent 0);
|
|
background-size: unset;
|
|
}
|
|
|
|
.breadcrumbs-widget-item[checked]::before {
|
|
background-image:
|
|
linear-gradient(45deg,
|
|
transparent var(--position),
|
|
var(--theme-selection-background) 0),
|
|
linear-gradient(-45deg,
|
|
var(--theme-selection-background) calc(100% - var(--position)),
|
|
var(--background-color) 0);
|
|
}
|
|
|
|
.breadcrumbs-widget-item[checked] {
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
.breadcrumbs-widget-item:first-child {
|
|
background-image: none;
|
|
}
|
|
|
|
/* RTL support: move the images that were on the left to the right,
|
|
* and move images that were on the right to the left.
|
|
*/
|
|
.breadcrumbs-widget-item:dir(rtl) {
|
|
padding: 0 20px 0 8px;
|
|
}
|
|
|
|
.breadcrumbs-widget-item:dir(rtl),
|
|
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) {
|
|
background-position: center right;
|
|
}
|
|
|
|
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
|
|
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
|
|
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
|
|
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-dark .breadcrumbs-widget-item {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-light .breadcrumbs-widget-item {
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.breadcrumbs-widget-item-id {
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
.breadcrumbs-widget-item-classes {
|
|
color: var(--theme-content-color1);
|
|
}
|
|
|
|
.breadcrumbs-widget-item-pseudo-classes {
|
|
color: var(--theme-highlight-lightorange);
|
|
}
|
|
|
|
.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
|
|
color: white;
|
|
}
|
|
|
|
.theme-light .breadcrumbs-widget-item:not([checked]):hover label {
|
|
color: black;
|
|
}
|
|
|
|
/* Firebug theme support for breadcrumbs widget. */
|
|
|
|
.theme-firebug .breadcrumbs-widget-item {
|
|
margin-inline-start: 10px;
|
|
margin-inline-end: 1px;
|
|
background-image: none;
|
|
border: 1px solid transparent;
|
|
color: #141414;
|
|
border-radius: 2px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 0;
|
|
font-size: var(--theme-toolbar-font-size);
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-item:hover {
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
background: transparent linear-gradient(
|
|
rgba(255, 255, 255, 0.4),
|
|
rgba(255, 255, 255, 0.2)) no-repeat;
|
|
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset,
|
|
0 0 1px rgba(255, 255, 255, 0.6) inset,
|
|
0 0 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-item > .button-box {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-item:first-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
|
|
content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
|
|
background: none;
|
|
position: relative;
|
|
left: -3px;
|
|
margin: 0 0 0 -5px;
|
|
padding: 0;
|
|
width: 5px;
|
|
}
|
|
|
|
/* Breadcrumbs Separators (reset selection styles) */
|
|
.theme-firebug .breadcrumbs-widget-item[checked],
|
|
.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
|
|
.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
|
|
.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
|
|
.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
|
|
background: none;
|
|
font-weight: bold;
|
|
color: inherit;
|
|
}
|
|
|
|
/* The first rule is there only to make sure the default rule from
|
|
widgets.css is overwritten. */
|
|
.theme-firebug .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
|
|
background: none;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-item .breadcrumbs-widget-item-tag {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Breadcrumbs Scrolling Buttons */
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-up,
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-down {
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:hover,
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:hover {
|
|
border: 1px transparent solid !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active,
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
|
|
background: none !important;
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-up > .toolbarbutton-icon {
|
|
background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-down > .toolbarbutton-icon {
|
|
background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
|
|
}
|
|
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
|
|
.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
|
|
background-position: 0 center;
|
|
}
|
|
|
|
/* SimpleListWidget */
|
|
|
|
.simple-list-widget-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
.simple-list-widget-item.selected {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-dark .simple-list-widget-item:not(.selected):hover {
|
|
background-color: rgba(255,255,255,.05);
|
|
}
|
|
|
|
.theme-light .simple-list-widget-item:not(.selected):hover {
|
|
background-color: rgba(0,0,0,.05);
|
|
}
|
|
|
|
.simple-list-widget-empty-text,
|
|
.simple-list-widget-perma-text {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.simple-list-widget-empty-text,
|
|
.simple-list-widget-perma-text {
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
/* FastListWidget */
|
|
|
|
.fast-list-widget-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
.fast-list-widget-empty-text {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.fast-list-widget-empty-text {
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
/* SideMenuWidget */
|
|
|
|
.side-menu-widget-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
/* SideMenuWidget container */
|
|
|
|
.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
|
|
/* To compensate for the arrow image's dark margin. */
|
|
margin-inline-end: -1px;
|
|
}
|
|
|
|
/* SideMenuWidget groups */
|
|
|
|
.side-menu-widget-group-title {
|
|
padding: 4px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid rgba(128,128,128,0.15);
|
|
}
|
|
|
|
.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
/* SideMenuWidget items */
|
|
|
|
.side-menu-widget-item {
|
|
border-bottom: 1px solid rgba(128,128,128,0.15);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.side-menu-widget-item.selected {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.side-menu-widget-item-arrow {
|
|
margin-inline-start: -7px;
|
|
width: 7px; /* The image's width is 7 pixels */
|
|
}
|
|
|
|
.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
|
|
background-image: var(--sidemenu-selected-arrow);
|
|
background-size: auto;
|
|
background-repeat: no-repeat;
|
|
background-position: center right;
|
|
}
|
|
|
|
.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
|
|
background-image: var(--sidemenu-selected-arrow-rtl);
|
|
background-position: center left;
|
|
}
|
|
|
|
/* SideMenuWidget items contents */
|
|
|
|
.side-menu-widget-item-contents {
|
|
padding: 4px;
|
|
/* To avoid having content overlapping the arrow image. */
|
|
padding-inline-end: 8px;
|
|
}
|
|
|
|
.side-menu-widget-item-other {
|
|
/* To avoid having content overlapping the arrow image. */
|
|
padding-inline-end: 8px;
|
|
/* To compensate for the .side-menu-widget-item-contents padding. */
|
|
margin-inline-start: -4px;
|
|
margin-inline-end: -8px;
|
|
}
|
|
|
|
.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
|
|
/* To compensate for the .side-menu-widget-item-contents padding. */
|
|
margin-inline-start: -20px;
|
|
}
|
|
|
|
.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
|
|
background-color: var(--theme-sidebar-background);
|
|
box-shadow: inset 2px 0 0 var(--theme-selection-background);
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
.side-menu-widget-item-other:first-of-type {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.side-menu-widget-item-other:last-of-type {
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
/* SideMenuWidget checkboxes */
|
|
|
|
.side-menu-widget-group-checkbox {
|
|
margin: 0;
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.side-menu-widget-item-checkbox {
|
|
margin: 0;
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
/* SideMenuWidget misc */
|
|
|
|
.side-menu-widget-empty-text {
|
|
padding: 4px 8px;
|
|
background-color: var(--theme-sidebar-background);
|
|
}
|
|
|
|
/* VariablesView */
|
|
|
|
.variables-view-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
.variables-view-empty-notice {
|
|
padding: 2px;
|
|
}
|
|
|
|
.variables-view-empty-notice {
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
.variables-view-scope:focus > .title,
|
|
.variable-or-property:focus > .title {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.variables-view-scope > .title {
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* Custom scope stylings */
|
|
|
|
.variables-view-watch-expressions .title > .name {
|
|
max-width: 14em;
|
|
}
|
|
|
|
/* Generic variables traits */
|
|
|
|
.variables-view-variable:not(:last-child) {
|
|
border-bottom: 1px solid rgba(128, 128, 128, .15);
|
|
}
|
|
|
|
.theme-firebug .variables-view-variable {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.variables-view-variable > .title > .name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Generic variables *and* properties traits */
|
|
|
|
.variable-or-property:focus > .title > label {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.variables-view-container .theme-twisty {
|
|
margin: 2px;
|
|
}
|
|
|
|
.variable-or-property > .title > .theme-twisty {
|
|
margin-inline-start: 5px;
|
|
}
|
|
|
|
.variable-or-property:not([untitled]) > .variables-view-element-details {
|
|
margin-inline-start: 7px;
|
|
}
|
|
|
|
/* Traits applied when variables or properties are changed or overridden */
|
|
|
|
.variable-or-property:not([overridden]) {
|
|
transition: background 1s ease-in-out;
|
|
}
|
|
|
|
.variable-or-property:not([overridden])[changed] {
|
|
transition-duration: .4s;
|
|
}
|
|
|
|
.variable-or-property[overridden] {
|
|
background: rgba(128,128,128,0.05);
|
|
}
|
|
|
|
.variable-or-property[overridden] .title > label {
|
|
/* Cross out the title for this variable and all child properties. */
|
|
font-style: italic;
|
|
text-decoration: line-through;
|
|
border-bottom: none !important;
|
|
color: rgba(128,128,128,0.9);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Traits applied when variables or properties are editable */
|
|
|
|
.variable-or-property[editable] > .title > .value {
|
|
cursor: text;
|
|
}
|
|
|
|
.variable-or-property[overridden] .title > .value {
|
|
/* Disallow editing this variable and all child properties. */
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom configurable/enumerable/writable or frozen/sealed/extensible
|
|
* variables and properties */
|
|
|
|
.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.variable-or-property-non-writable-icon {
|
|
background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
|
|
background-size: cover;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.variable-or-property-non-writable-icon {
|
|
background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
|
|
}
|
|
}
|
|
|
|
.variable-or-property-frozen-label,
|
|
.variable-or-property-sealed-label,
|
|
.variable-or-property-non-extensible-label {
|
|
height: 16px;
|
|
padding-inline-end: 4px;
|
|
}
|
|
|
|
.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
|
|
.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
|
|
.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
|
|
color: #666;
|
|
}
|
|
|
|
/* Aligned values */
|
|
|
|
.variables-view-container[aligned-values] .title > .separator {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
.variables-view-container[aligned-values] .title > .value {
|
|
-moz-box-flex: 0;
|
|
width: 70vw;
|
|
}
|
|
|
|
.variables-view-container[aligned-values] .title > .element-value-input {
|
|
width: calc(70vw - 10px);
|
|
}
|
|
|
|
/* Actions first */
|
|
|
|
.variables-view-open-inspector {
|
|
-moz-box-ordinal-group: 1;
|
|
}
|
|
|
|
.variables-view-edit,
|
|
.variables-view-add-property {
|
|
-moz-box-ordinal-group: 2;
|
|
}
|
|
|
|
.variable-or-property-frozen-label,
|
|
.variable-or-property-sealed-label,
|
|
.variable-or-property-non-extensible-label,
|
|
.variable-or-property-non-writable-icon {
|
|
-moz-box-ordinal-group: 3;
|
|
}
|
|
|
|
.variables-view-delete {
|
|
-moz-box-ordinal-group: 4;
|
|
}
|
|
|
|
.variables-view-container[actions-first] .variables-view-delete,
|
|
.variables-view-container[actions-first] .variables-view-add-property,
|
|
.variables-view-container[actions-first] .variables-view-open-inspector {
|
|
-moz-box-ordinal-group: 0;
|
|
}
|
|
|
|
.variables-view-container[actions-first] [invisible] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Variables and properties tooltips */
|
|
|
|
.variable-or-property > tooltip > label {
|
|
margin: 0 2px 0 2px;
|
|
}
|
|
|
|
.variable-or-property[non-enumerable] > tooltip > label.enumerable,
|
|
.variable-or-property[non-configurable] > tooltip > label.configurable,
|
|
.variable-or-property[non-writable] > tooltip > label.writable,
|
|
.variable-or-property[non-extensible] > tooltip > label.extensible {
|
|
color: #800;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.variable-or-property[overridden] > tooltip > label.overridden {
|
|
padding-inline-start: 4px;
|
|
border-inline-start: 1px dotted #000;
|
|
}
|
|
|
|
.variable-or-property[safe-getter] > tooltip > label.WebIDL {
|
|
padding-inline-start: 4px;
|
|
border-inline-start: 1px dotted #000;
|
|
color: #080;
|
|
}
|
|
|
|
/* Variables and properties editing */
|
|
.variables-view-delete,
|
|
.variables-view-edit,
|
|
.variables-view-open-inspector {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-size: cover;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.variables-view-delete:hover,
|
|
.variables-view-edit:hover,
|
|
.variables-view-open-inspector:hover {
|
|
filter: url(images/filters.svg#checked-icon-state);
|
|
}
|
|
|
|
.variables-view-delete:active,
|
|
.variables-view-edit:active,
|
|
.variables-view-open-inspector:active {
|
|
filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
|
|
}
|
|
|
|
.variable-or-property:focus > .title > .variables-view-delete,
|
|
.variable-or-property:focus > .title > .variables-view-edit,
|
|
.variable-or-property:focus > .title > .variables-view-open-inspector {
|
|
filter: none;
|
|
}
|
|
|
|
.variables-view-delete {
|
|
background-image: var(--delete-icon);
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.variables-view-delete {
|
|
background-image: var(--delete-icon-2x);
|
|
}
|
|
}
|
|
|
|
.variables-view-edit {
|
|
background-image: url("chrome://devtools/skin/images/vview-edit.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.variables-view-edit {
|
|
background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
|
|
}
|
|
}
|
|
|
|
.variables-view-open-inspector {
|
|
background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.variables-view-open-inspector {
|
|
background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
|
|
}
|
|
}
|
|
|
|
/* Variables and properties input boxes */
|
|
|
|
.variable-or-property > .title > .separator + .element-value-input {
|
|
margin-inline-start: -2px !important;
|
|
margin-inline-end: 2px !important;
|
|
}
|
|
|
|
.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
|
|
margin-inline-start: 4px !important;
|
|
margin-inline-end: 2px !important;
|
|
}
|
|
|
|
.element-name-input {
|
|
margin-inline-start: -2px !important;
|
|
margin-inline-end: 2px !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.element-value-input,
|
|
.element-name-input {
|
|
border: 1px solid rgba(128, 128, 128, .5) !important;
|
|
border-radius: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Variables and properties searching */
|
|
|
|
.variable-or-property[unmatched] {
|
|
border: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Canvas graphs */
|
|
|
|
.graph-widget-container {
|
|
position: relative;
|
|
}
|
|
|
|
.graph-widget-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.graph-widget-canvas[input=hovering-background] {
|
|
cursor: text;
|
|
}
|
|
|
|
.graph-widget-canvas[input=hovering-region] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.graph-widget-canvas[input=hovering-selection-start-boundary],
|
|
.graph-widget-canvas[input=hovering-selection-end-boundary],
|
|
.graph-widget-canvas[input=adjusting-selection-boundary] {
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.graph-widget-canvas[input=adjusting-view-area] {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.graph-widget-canvas[input=hovering-selection-contents] {
|
|
cursor: grab;
|
|
}
|
|
|
|
.graph-widget-canvas[input=dragging-selection-contents] {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Line graph widget */
|
|
|
|
.line-graph-widget-gutter {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
border-inline-end: 1px solid;
|
|
}
|
|
|
|
.theme-light .line-graph-widget-gutter {
|
|
background: rgba(255,255,255,0.75);
|
|
border-inline-end-color: rgba(255,255,255,0.25);
|
|
}
|
|
|
|
.theme-dark .line-graph-widget-gutter {
|
|
background: rgba(0,0,0,0.5);
|
|
border-inline-end-color: rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.line-graph-widget-gutter-line {
|
|
position: absolute;
|
|
width: 100%;
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
.line-graph-widget-gutter-line[type=maximum] {
|
|
border-color: #2cbb0f;
|
|
}
|
|
|
|
.line-graph-widget-gutter-line[type=minimum] {
|
|
border-color: #ed2655;
|
|
}
|
|
|
|
.line-graph-widget-gutter-line[type=average] {
|
|
border-color: #d97e00;
|
|
}
|
|
|
|
.line-graph-widget-tooltip {
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
line-height: 15px;
|
|
padding-inline-start: 6px;
|
|
padding-inline-end: 6px;
|
|
transform: translateY(-50%);
|
|
font-size: 0.8rem !important;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.theme-light .line-graph-widget-tooltip {
|
|
background: rgba(255,255,255,0.75);
|
|
}
|
|
|
|
.theme-dark .line-graph-widget-tooltip {
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[with-arrows=true]::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-top: 3px solid transparent;
|
|
border-bottom: 3px solid transparent;
|
|
top: calc(50% - 3px);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
|
|
border-inline-end: 3px solid;
|
|
left: -3px;
|
|
}
|
|
|
|
.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
|
|
border-inline-start: 3px solid;
|
|
right: -3px;
|
|
}
|
|
|
|
.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
|
|
border-inline-end-color: rgba(255,255,255,0.75);
|
|
}
|
|
|
|
.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
|
|
border-inline-end-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
|
|
border-inline-start-color: rgba(255,255,255,0.75);
|
|
}
|
|
|
|
.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
|
|
border-inline-start-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=maximum] {
|
|
left: 14px;
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=minimum] {
|
|
left: 14px;
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=average] {
|
|
right: 4px;
|
|
}
|
|
|
|
.line-graph-widget-tooltip > [text=info] {
|
|
color: var(--theme-content-color1);
|
|
}
|
|
|
|
.line-graph-widget-tooltip > [text=value] {
|
|
margin-inline-start: 3px;
|
|
}
|
|
|
|
.line-graph-widget-tooltip > [text=metric] {
|
|
margin-inline-start: 1px;
|
|
color: var(--theme-content-color3);
|
|
}
|
|
|
|
.theme-light .line-graph-widget-tooltip > [text=value],
|
|
.theme-light .line-graph-widget-tooltip > [text=metric] {
|
|
text-shadow: 1px 0px rgba(255,255,255,0.5),
|
|
-1px 0px rgba(255,255,255,0.5),
|
|
0px -1px rgba(255,255,255,0.5),
|
|
0px 1px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.theme-dark .line-graph-widget-tooltip > [text=value],
|
|
.theme-dark .line-graph-widget-tooltip > [text=metric] {
|
|
text-shadow: 1px 0px rgba(0,0,0,0.5),
|
|
-1px 0px rgba(0,0,0,0.5),
|
|
0px -1px rgba(0,0,0,0.5),
|
|
0px 1px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=maximum] > [text=value] {
|
|
color: var(--theme-highlight-green);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=minimum] > [text=value] {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
.line-graph-widget-tooltip[type=average] > [text=value] {
|
|
color: var(--theme-highlight-orange);
|
|
}
|
|
|
|
/* Bar graph widget */
|
|
|
|
.bar-graph-widget-legend {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 8px;
|
|
color: #292e33;
|
|
font-size: 80%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bar-graph-widget-legend-item {
|
|
float: left;
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
.bar-graph-widget-legend-item > [view="color"],
|
|
.bar-graph-widget-legend-item > [view="label"] {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.bar-graph-widget-legend-item > [view="color"] {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 1px solid #fff;
|
|
border-radius: 1px;
|
|
margin-inline-end: 4px;
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bar-graph-widget-legend-item > [view="label"] {
|
|
text-shadow: 1px 0px rgba(255,255,255,0.8),
|
|
-1px 0px rgba(255,255,255,0.8),
|
|
0px -1px rgba(255,255,255,0.8),
|
|
0px 1px rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* Charts */
|
|
|
|
.generic-chart-container {
|
|
/* Hack: force hardware acceleration */
|
|
transform: translateZ(1px);
|
|
}
|
|
|
|
.theme-dark .generic-chart-container {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-light .generic-chart-container {
|
|
color: var(--theme-body-color-alt);
|
|
}
|
|
|
|
.chart-colored-blob {
|
|
fill: var(--theme-content-color2);
|
|
background: var(--theme-content-color2);
|
|
}
|
|
|
|
/* Charts: Pie */
|
|
|
|
.pie-chart-slice {
|
|
stroke-width: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-dark .pie-chart-slice {
|
|
stroke: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.theme-light .pie-chart-slice {
|
|
stroke: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.theme-dark .pie-chart-slice[largest] {
|
|
stroke-width: 2px;
|
|
stroke: #fff;
|
|
}
|
|
|
|
.theme-light .pie-chart-slice[largest] {
|
|
stroke: #000;
|
|
}
|
|
|
|
.pie-chart-label {
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.theme-dark .pie-chart-label {
|
|
fill: #000;
|
|
}
|
|
|
|
.theme-light .pie-chart-label {
|
|
fill: #fff;
|
|
}
|
|
|
|
.pie-chart-container[slices="1"] > .pie-chart-slice {
|
|
stroke-width: 0px;
|
|
}
|
|
|
|
.pie-chart-slice,
|
|
.pie-chart-label {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.pie-chart-slice:not(:hover):not([focused]),
|
|
.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Charts: Table */
|
|
|
|
.table-chart-title {
|
|
padding-bottom: 10px;
|
|
font-size: 120%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-chart-row {
|
|
margin-top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-chart-grid:hover > .table-chart-row {
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
|
|
.table-chart-grid:not(:hover) > .table-chart-row {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
|
|
.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.table-chart-row-box {
|
|
width: 8px;
|
|
height: 1.5em;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.table-chart-row-label {
|
|
width: 8em;
|
|
padding-inline-end: 6px;
|
|
cursor: inherit;
|
|
}
|
|
|
|
.table-chart-totals {
|
|
margin-top: 8px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.table-chart-totals {
|
|
border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
|
|
}
|
|
|
|
.table-chart-summary-label {
|
|
font-weight: 600;
|
|
padding: 1px 0px;
|
|
}
|
|
|
|
.theme-dark .table-chart-summary-label {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.theme-light .table-chart-summary-label {
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
/* Table Widget */
|
|
|
|
/* Table body */
|
|
|
|
.table-widget-body > .devtools-side-splitter {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.table-widget-body {
|
|
overflow: auto;
|
|
}
|
|
|
|
.table-widget-body,
|
|
.table-widget-empty-text {
|
|
background-color: var(--theme-body-background);
|
|
}
|
|
|
|
/* Column Headers */
|
|
|
|
.table-widget-column-header,
|
|
.table-widget-cell {
|
|
border-inline-end: 1px solid var(--table-splitter-color) !important;
|
|
}
|
|
|
|
/* Table widget column header colors are taken from netmonitor.inc.css to match
|
|
the look of both the tables. */
|
|
|
|
.table-widget-column-header {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 5px 0 0 !important;
|
|
color: inherit;
|
|
text-align: center;
|
|
font-weight: inherit !important;
|
|
border-image: linear-gradient(transparent 15%,
|
|
var(--theme-splitter-color) 15%,
|
|
var(--theme-splitter-color) 85%,
|
|
transparent 85%,
|
|
transparent calc(100% - 1px),
|
|
var(--theme-splitter-color) calc(100% - 1px)) 1 1;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.table-widget-column-header:not([sorted]):hover {
|
|
background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
|
|
}
|
|
|
|
.table-widget-column-header[sorted] {
|
|
background-color: var(--theme-selection-background);
|
|
color: var(--theme-selection-color);
|
|
border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
|
|
box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color);
|
|
background-position: right 6px center;
|
|
}
|
|
|
|
.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
|
|
background-position: 6px center;
|
|
}
|
|
|
|
.table-widget-column-header[sorted=ascending] {
|
|
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
|
|
}
|
|
|
|
.table-widget-column-header[sorted=descending] {
|
|
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
|
|
}
|
|
|
|
.theme-dark .table-widget-column[readonly] {
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.theme-light .table-widget-column[readonly] {
|
|
background-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.table-widget-body .devtools-side-splitter:last-of-type {
|
|
display: none;
|
|
}
|
|
|
|
/* Firebug theme support for table widget */
|
|
|
|
.theme-firebug .devtools-toolbar.table-widget-column-header {
|
|
font-family: var(--proportional-font-family);
|
|
color: var(--theme-body-color);
|
|
|
|
/* Make sure to override the default Firebug devtools-toolbar height */
|
|
height: 19px !important;
|
|
|
|
/* Make sure to override the dafault .table-widget-column-header font-weight and background */
|
|
font-weight: bold !important;
|
|
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
|
|
background-color: #C8D2DC !important;
|
|
|
|
/* Vertically center header label */
|
|
padding-top: 2px !important;
|
|
}
|
|
|
|
.theme-firebug .devtools-toolbar.table-widget-column-header[sorted] {
|
|
background-color: #AAC3DC !important;
|
|
}
|
|
|
|
.theme-firebug .devtools-toolbar.table-widget-column-header:hover:active {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.1),
|
|
transparent);
|
|
}
|
|
|
|
.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=descending]:not(:active) {
|
|
background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
|
|
}
|
|
|
|
.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
|
|
background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
|
|
}
|
|
|
|
/* Cells */
|
|
|
|
.table-widget-cell {
|
|
width: 100%;
|
|
padding: 3px 4px;
|
|
min-width: 100px;
|
|
-moz-user-focus: normal;
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.table-widget-cell[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.table-widget-cell.even:not(.theme-selected) {
|
|
background-color: var(--table-zebra-background);
|
|
}
|
|
|
|
:root:not(.no-animate) .table-widget-cell.flash-out {
|
|
animation: flash-out 0.5s ease-in;
|
|
}
|
|
|
|
@keyframes flash-out {
|
|
to {
|
|
background: var(--theme-contrast-background);
|
|
}
|
|
}
|
|
|
|
/* Empty text and initial text */
|
|
|
|
.table-widget-empty-text {
|
|
display: none;
|
|
text-align: center;
|
|
font-size: large;
|
|
margin-top: -20px !important;
|
|
}
|
|
|
|
.table-widget-body:empty + .table-widget-empty-text:not([value=""]),
|
|
.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
|
|
display: block;
|
|
}
|
|
|
|
/* Tree Widget */
|
|
|
|
.tree-widget-container {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
margin-inline-end: 40px;
|
|
}
|
|
|
|
.tree-widget-container:-moz-focusring,
|
|
.tree-widget-container *:-moz-focusring {
|
|
outline-style: none;
|
|
}
|
|
|
|
.tree-widget-empty-text {
|
|
padding: 10px 20px;
|
|
font-size: medium;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Tree Item */
|
|
|
|
.tree-widget-container .tree-widget-item {
|
|
padding: 2px 0px 4px;
|
|
/* OSX has line-height 14px by default, which causes weird alignment issues
|
|
* because of 20px high icons. thus making line-height consistent with that of
|
|
* windows.
|
|
*/
|
|
line-height: 17px !important;
|
|
display: inline-block;
|
|
width: 100%;
|
|
word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
|
|
breaking in multiple lines */
|
|
}
|
|
|
|
.tree-widget-container .tree-widget-children {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tree-widget-item[level="1"] {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Twisties */
|
|
.tree-widget-item::before {
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
float: left;
|
|
margin: 3px 2px -3px;
|
|
background-repeat: no-repeat;
|
|
background-image: url("chrome://devtools/skin/images/controls.png");
|
|
background-size: 56px 28px;
|
|
cursor: pointer;
|
|
background-position: -28px -14px;
|
|
}
|
|
|
|
.tree-widget-item:-moz-locale-dir(rtl)::before {
|
|
float: right;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.theme-light .tree-widget-item:not(.theme-selected)::before {
|
|
background-position: 0 -14px;
|
|
}
|
|
|
|
.tree-widget-item[empty]::before {
|
|
background: transparent;
|
|
}
|
|
|
|
.tree-widget-item[expanded]::before {
|
|
background-position: -42px -14px;
|
|
}
|
|
|
|
.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before {
|
|
background-position: -14px -14px;
|
|
}
|
|
|
|
.tree-widget-item + ul {
|
|
overflow: hidden;
|
|
animation: collapse-tree-item 0.2s;
|
|
max-height: 0;
|
|
}
|
|
|
|
.tree-widget-item[expanded] + ul {
|
|
animation: expand-tree-item 0.3s;
|
|
max-height: unset;
|
|
}
|
|
|
|
@keyframes collapse-tree-item {
|
|
from {
|
|
max-height: 300px;
|
|
}
|
|
to {
|
|
max-height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes expand-tree-item {
|
|
from {
|
|
max-height: 0;
|
|
}
|
|
to {
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.tree-widget-item:before {
|
|
background-image: url("chrome://devtools/skin/images/controls@2x.png");
|
|
}
|
|
}
|
|
|
|
/* Indentation of child items in the tree */
|
|
|
|
/* For level > 6 */
|
|
.tree-widget-item[level] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 98px;
|
|
}
|
|
|
|
/* First level */
|
|
.tree-widget-item[level="1"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 14px;
|
|
}
|
|
|
|
/* Second level */
|
|
.tree-widget-item[level="2"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 28px;
|
|
}
|
|
|
|
/* Third level */
|
|
.tree-widget-item[level="3"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 42px;
|
|
}
|
|
|
|
/* Fourth level */
|
|
.tree-widget-item[level="4"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 56px;
|
|
}
|
|
|
|
/* Fifth level */
|
|
.tree-widget-item[level="5"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 70px;
|
|
}
|
|
|
|
/* Sixth level */
|
|
.tree-widget-item[level="6"] + ul > li > .tree-widget-item {
|
|
padding-inline-start: 84px;
|
|
}
|
|
|
|
/* Custom icons for certain tree items indicating the type of the item */
|
|
|
|
.tree-widget-item[type]::after {
|
|
content: "";
|
|
float: left;
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-inline-end: 4px;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px auto;
|
|
background-position: 0 0;
|
|
background-size: auto 20px;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.tree-widget-item.theme-selected[type]::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tree-widget-item:-moz-locale-dir(rtl)::after {
|
|
float: right;
|
|
}
|
|
|
|
.theme-light .tree-widget-item.theme-selected[type]::after,
|
|
.theme-dark .tree-widget-item[type]::after {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.tree-widget-item[type="dir"]::after {
|
|
background-image: url(chrome://devtools/skin/images/filetypes/dir-close.svg);
|
|
background-position: 2px 0;
|
|
background-size: auto 16px;
|
|
width: 20px;
|
|
}
|
|
|
|
.tree-widget-item[type="dir"][expanded]:not([empty])::after {
|
|
background-image: url(chrome://devtools/skin/images/filetypes/dir-open.svg);
|
|
}
|
|
|
|
.tree-widget-item[type="url"]::after {
|
|
background-image: url(chrome://devtools/skin/images/filetypes/globe.svg);
|
|
background-size: auto 18px;
|
|
width: 18px;
|
|
}
|