Hubert B Manilla
3eae7ada2b
Add basic support for toggling stylesheets Posible followups improvements - Adding icons to the source tree to show the visiblity state. - We could also gray out the content in the editor when disabled. Differential Revision: https://phabricator.services.mozilla.com/D298486
224 lines
6.2 KiB
CSS
224 lines
6.2 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/>. */
|
|
|
|
.dbg-img {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
/* use background-color for the icon color, and mask-image for its shape */
|
|
background-color: var(--theme-icon-color);
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
/* multicolor icons use background-image */
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
/* do not let images shrink when used as flex children */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Expand arrow icon */
|
|
.dbg-img.dbg-img-arrow {
|
|
width: 10px;
|
|
height: 10px;
|
|
mask-image: url(chrome://devtools/content/shared/components/images/arrow.svg);
|
|
/* we may override the width/height in specific contexts to make the
|
|
clickable area bigger, but we should always keep the mask size 10x10 */
|
|
mask-size: 10px 10px;
|
|
background-color: var(--theme-icon-dimmed-color);
|
|
transform: rotate(-90deg);
|
|
transition: transform 180ms var(--animation-curve);
|
|
}
|
|
|
|
.dbg-img.dbg-img-arrow:dir(rtl) {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-arrow.expanded {
|
|
/* icon should always point to the bottom (default) when expanded,
|
|
regardless of the text direction */
|
|
transform: none !important;
|
|
}
|
|
|
|
.dbg-img.dbg-img-arrow-down {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/arrow-down.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-arrow-up {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/arrow-up.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-blackBox {
|
|
mask-image: url(chrome://devtools/content/debugger/images/blackBox.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-close {
|
|
mask-image: url(chrome://devtools/skin/images/close.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-disable-pausing {
|
|
mask-image: url(chrome://devtools/content/debugger/images/disable-pausing.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-enable-pausing {
|
|
mask-image: url(chrome://devtools/content/debugger/images/enable-pausing.svg);
|
|
background-color: var(--theme-icon-checked-color);
|
|
}
|
|
|
|
.dbg-img.dbg-img-globe {
|
|
mask-image: url(chrome://devtools/content/debugger/images/globe.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-globe-small {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/globe-small.svg);
|
|
mask-size: 12px 12px;
|
|
}
|
|
|
|
.dbg-img.dbg-img-window {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/window.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-file {
|
|
background-image: url(chrome://devtools/content/debugger/images/file-small.svg);
|
|
background-size: 12px 12px;
|
|
background-color: transparent !important;
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-color);
|
|
}
|
|
|
|
.dbg-img.dbg-img-folder {
|
|
mask-image: url(chrome://devtools/content/debugger/images/folder.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-back {
|
|
background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-color);
|
|
background-color: unset;
|
|
}
|
|
|
|
.dbg-img.dbg-img-info {
|
|
mask-image: url(chrome://devtools/skin/images/info.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-loader {
|
|
background-image: url(chrome://devtools/content/shared/components/images/loader.svg);
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-color);
|
|
background-color: unset;
|
|
}
|
|
|
|
.dbg-img-loader.spin {
|
|
animation: spin 0.5s linear infinite;
|
|
}
|
|
|
|
.dbg-img.dbg-img-more-tabs {
|
|
mask-image: url(chrome://devtools/content/debugger/images/command-chevron.svg);
|
|
}
|
|
|
|
html[dir="rtl"] .dbg-img.dbg-img-more-tabs {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.dbg-img.dbg-img-sourcemap {
|
|
background-image: url(chrome://devtools/content/shared/components/images/sourcemap.svg);
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-warning-color);
|
|
background-color: unset;
|
|
}
|
|
|
|
.dbg-img.dbg-img-next {
|
|
mask-image: url(chrome://devtools/content/debugger/images/next.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-next-circle {
|
|
mask-image: url(chrome://devtools/content/debugger/images/next-circle.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-pane-collapse {
|
|
mask-image: url(chrome://devtools/content/debugger/images/pane-collapse.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-pane-expand {
|
|
mask-image: url(chrome://devtools/content/debugger/images/pane-expand.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-pause {
|
|
mask-image: url(chrome://devtools/content/debugger/images/pause.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-plus {
|
|
mask-image: url(chrome://devtools/skin/images/add.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-prettyPrint {
|
|
background-image: url(chrome://devtools/content/shared/components/images/prettyPrint.svg);
|
|
background-size: 14px 14px;
|
|
background-color: transparent !important;
|
|
fill: var(--theme-icon-color);
|
|
-moz-context-properties: fill, stroke;
|
|
}
|
|
|
|
.dbg-img.dbg-img-eye-opened {
|
|
background-image: url(chrome://devtools/skin/images/eye-opened.svg);
|
|
background-size: 14px 14px;
|
|
background-color: transparent !important;
|
|
fill: var(--theme-icon-color);
|
|
-moz-context-properties: fill, stroke;
|
|
}
|
|
|
|
.dbg-img.dbg-img-eye-closed {
|
|
background-image: url(chrome://devtools/skin/images/eye-closed.svg);
|
|
background-size: 14px 14px;
|
|
background-color: transparent !important;
|
|
fill: var(--theme-icon-color);
|
|
-moz-context-properties: fill, stroke;
|
|
}
|
|
|
|
.dbg-img.dbg-img-removeAll {
|
|
mask-image: url(chrome://devtools/skin/images/clear.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-refresh {
|
|
mask-image: url(chrome://devtools/skin/images/reload.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-resume {
|
|
mask-image: url(resource://devtools-shared-images/resume.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-search {
|
|
mask-image: url(chrome://devtools/content/debugger/images/search.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-shortcuts {
|
|
mask-image: url(chrome://devtools/content/debugger/images/help.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-stepIn {
|
|
mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-stepOut {
|
|
mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-stepOver {
|
|
mask-image: url(resource://devtools-shared-images/stepOver.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-tab {
|
|
mask-image: url(chrome://devtools/content/debugger/images/tab.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-worker {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/worker.svg);
|
|
}
|
|
|
|
.dbg-img.dbg-img-extension {
|
|
mask-image: url(chrome://devtools/content/shared/components/images/extension.svg);
|
|
}
|