зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1211190 - Convert hardcoded colors to CSS variables in devtools. r=bgrins, jsantell
This commit is contained in:
Tim Nguyen
Родитель
58be207ba8
Коммит
b3e946522d
|
|
@ -224,14 +224,14 @@ devtools.jar:
|
|||
skin/themes/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
|
||||
skin/themes/animationinspector.css (themes/animationinspector.css)
|
||||
skin/themes/eyedropper.css (themes/eyedropper.css)
|
||||
* skin/themes/canvasdebugger.css (themes/canvasdebugger.css)
|
||||
skin/themes/canvasdebugger.css (themes/canvasdebugger.css)
|
||||
skin/themes/debugger.css (themes/debugger.css)
|
||||
* skin/themes/netmonitor.css (themes/netmonitor.css)
|
||||
skin/themes/performance.css (themes/performance.css)
|
||||
skin/themes/memory.css (themes/memory.css)
|
||||
skin/themes/promisedebugger.css (themes/promisedebugger.css)
|
||||
skin/themes/images/timeline-filter.svg (themes/images/timeline-filter.svg)
|
||||
* skin/themes/scratchpad.css (themes/scratchpad.css)
|
||||
skin/themes/scratchpad.css (themes/scratchpad.css)
|
||||
skin/themes/shadereditor.css (themes/shadereditor.css)
|
||||
skin/themes/storage.css (themes/storage.css)
|
||||
* skin/themes/splitview.css (themes/splitview.css)
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@
|
|||
* 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/. */
|
||||
|
||||
%filter substitution
|
||||
%define darkCheckerboardBackground #000
|
||||
%define lightCheckerboardBackground #fff
|
||||
%define checkerboardCell rgba(128,128,128,0.2)
|
||||
%define checkerboardPattern linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@), linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@)
|
||||
%define gutterWidth 3em
|
||||
%define gutterPaddingStart 22px
|
||||
|
||||
:root {
|
||||
--gutter-width: 3em;
|
||||
--gutter-padding-start: 22px;
|
||||
--checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)),
|
||||
linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2));
|
||||
}
|
||||
/* Reload and waiting notices */
|
||||
|
||||
.notice-container {
|
||||
|
|
@ -35,22 +33,9 @@
|
|||
|
||||
/* Snapshots pane */
|
||||
|
||||
#snapshots-pane > tabs {
|
||||
-moz-border-end: 1px solid;
|
||||
}
|
||||
|
||||
#snapshots-pane > tabs,
|
||||
#snapshots-pane .devtools-toolbar {
|
||||
-moz-border-end: 1px solid;
|
||||
}
|
||||
|
||||
.theme-dark #snapshots-pane > tabs,
|
||||
.theme-dark #snapshots-pane .devtools-toolbar {
|
||||
-moz-border-end-color: black; /* Match the splitter color. */
|
||||
}
|
||||
|
||||
.theme-light #snapshots-pane > tabs,
|
||||
.theme-light #snapshots-pane .devtools-toolbar {
|
||||
-moz-border-end-color: #aaa; /* Match the splitter color. */
|
||||
-moz-border-end: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
#record-snapshot {
|
||||
|
|
@ -65,7 +50,7 @@
|
|||
|
||||
.snapshot-item-thumbnail {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
background-image: @checkerboardPattern@;
|
||||
background-image: var(--checkerboard-pattern);
|
||||
background-size: 12px 12px, 12px 12px;
|
||||
background-position: 0px 0px, 6px 6px;
|
||||
background-repeat: repeat, repeat;
|
||||
|
|
@ -75,12 +60,8 @@
|
|||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.theme-dark .snapshot-item-thumbnail {
|
||||
background-color: @darkCheckerboardBackground@;
|
||||
}
|
||||
|
||||
.theme-light .snapshot-item-thumbnail {
|
||||
background-color: @lightCheckerboardBackground@;
|
||||
.snapshot-item-thumbnail {
|
||||
background-color: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.snapshot-item-details {
|
||||
|
|
@ -234,9 +215,9 @@
|
|||
}
|
||||
|
||||
.call-item-gutter {
|
||||
width: calc(@gutterWidth@ + @gutterPaddingStart@);
|
||||
-moz-padding-start: @gutterPaddingStart@;
|
||||
-moz-padding-end: 4px;
|
||||
width: calc(var(--gutter-width) + var(--gutter-padding-start));
|
||||
padding-inline-start: var(--gutter-padding-start);
|
||||
padding-inline-end: 4px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
-moz-border-end: 1px solid;
|
||||
|
|
@ -300,7 +281,7 @@
|
|||
}
|
||||
|
||||
.call-item-stack {
|
||||
-moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
|
||||
-moz-padding-start: calc(var(--gutter-width) + var(--gutter-padding-start));
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -345,20 +326,13 @@
|
|||
/* Rendering preview */
|
||||
|
||||
#screenshot-container {
|
||||
background-image: @checkerboardPattern@;
|
||||
background-color: var(--theme-body-background);
|
||||
background-image: var(--checkerboard-pattern);
|
||||
background-size: 30px 30px, 30px 30px;
|
||||
background-position: 0px 0px, 15px 15px;
|
||||
background-repeat: repeat, repeat;
|
||||
}
|
||||
|
||||
.theme-dark #screenshot-container {
|
||||
background-color: @darkCheckerboardBackground@;
|
||||
}
|
||||
|
||||
.theme-light #screenshot-container {
|
||||
background-color: @lightCheckerboardBackground@;
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
#screenshot-container {
|
||||
width: 30vw;
|
||||
|
|
@ -403,22 +377,22 @@
|
|||
/* Snapshot filmstrip */
|
||||
|
||||
#snapshot-filmstrip {
|
||||
border-top: 1px solid var(--theme-splitter-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-dark #snapshot-filmstrip {
|
||||
border-top: 1px solid #000;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light #snapshot-filmstrip {
|
||||
border-top: 1px solid #aaa;
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.filmstrip-thumbnail {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
background-image: @checkerboardPattern@;
|
||||
background-color: var(--theme-body-background);
|
||||
background-image: var(--checkerboard-pattern);
|
||||
background-size: 12px 12px, 12px 12px;
|
||||
background-position: 0px -1px, 6px 5px;
|
||||
background-repeat: repeat, repeat;
|
||||
|
|
@ -426,6 +400,7 @@
|
|||
cursor: pointer;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
border-inline-end: 1px solid var(--theme-splitter-color);
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -433,18 +408,6 @@
|
|||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.theme-dark .filmstrip-thumbnail {
|
||||
background-color: @darkCheckerboardBackground@;
|
||||
}
|
||||
|
||||
.theme-light .filmstrip-thumbnail {
|
||||
background-color: @lightCheckerboardBackground@;
|
||||
}
|
||||
|
||||
.filmstrip-thumbnail {
|
||||
-moz-border-end: 1px solid var(--theme-splitter-color)
|
||||
}
|
||||
|
||||
#snapshot-filmstrip > .filmstrip-thumbnail:hover,
|
||||
#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
|
||||
border: 1px solid var(--theme-highlight-blue);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
%if 0
|
||||
/* 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/. */
|
||||
%endif
|
||||
|
||||
#scratchpad-sidebar > tabs {
|
||||
height: 0;
|
||||
|
|
|
|||
|
|
@ -67,14 +67,7 @@
|
|||
.stylesheet-sidebar {
|
||||
max-width: 400px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.theme-light .stylesheet-sidebar {
|
||||
border-color: #aaa; /* Splitters */
|
||||
}
|
||||
|
||||
.theme-dark .stylesheet-sidebar {
|
||||
border-color: #000; /* Splitters */
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-light .media-rule-label {
|
||||
|
|
|
|||
|
|
@ -563,47 +563,21 @@
|
|||
}
|
||||
|
||||
.devtools-sidebar-tabs tabs > tab:first-child {
|
||||
-moz-border-start-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
|
||||
background: hsla(206,37%,4%,.2);
|
||||
.devtools-sidebar-tabs tabs > tab:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
|
||||
background: hsla(206,37%,4%,.4);
|
||||
.devtools-sidebar-tabs tabs > tab:hover:active {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
|
||||
background: hsla(206,37%,4%,.2);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
|
||||
background: hsla(206,37%,4%,.4);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
|
||||
.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
|
||||
.devtools-sidebar-tabs tabs > tab[selected],
|
||||
.devtools-sidebar-tabs tabs > tab[selected]:hover:active {
|
||||
color: var(--theme-selection-color);
|
||||
background: #1d4f73;
|
||||
}
|
||||
|
||||
.theme-light .devtools-sidebar-tabs tabs > tab:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.theme-light .devtools-sidebar-tabs tabs > tab[selected],
|
||||
.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
|
||||
color: var(--theme-selection-color);
|
||||
background: #4c9ed9;
|
||||
background: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
/* Toolbox - moved from toolbox.css.
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@ svg {
|
|||
}
|
||||
|
||||
.theme-dark .edgePath path {
|
||||
stroke: #b6babf; /* Grey foreground text */
|
||||
stroke: var(--theme-body-color-alt);
|
||||
}
|
||||
.theme-light .edgePath path {
|
||||
stroke: #aaaaaa; /* Splitters */
|
||||
stroke: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
/* AudioParam connection edges */
|
||||
|
|
@ -42,27 +42,21 @@ g.edgePath.param-connection {
|
|||
}
|
||||
|
||||
.theme-dark .edgePath.param-connection path {
|
||||
stroke: #b6babf; /* Grey foreground text */
|
||||
stroke: var(--theme-body-color-alt);
|
||||
}
|
||||
.theme-light .edgePath.param-connection path {
|
||||
stroke: #aaaaaa; /* Splitters */
|
||||
stroke: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
/* Labels in AudioParam connection should have background that match
|
||||
* the main background so there's whitespace around the label, on top of the
|
||||
* dotted lines. */
|
||||
.theme-dark g.edgeLabel rect {
|
||||
fill: #14171a;
|
||||
g.edgeLabel rect {
|
||||
fill: var(--theme-body-background);
|
||||
}
|
||||
.theme-light g.edgeLabel rect {
|
||||
fill: #fcfcfc; /* Background - Editor */
|
||||
}
|
||||
.theme-dark g.edgeLabel tspan {
|
||||
g.edgeLabel tspan {
|
||||
fill: var(--theme-body-color-alt);
|
||||
}
|
||||
.theme-light g.edgeLabel tspan {
|
||||
fill: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
/* Audio Nodes */
|
||||
.nodes rect {
|
||||
|
|
@ -219,11 +213,8 @@ text {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.theme-dark #audio-node-toolbar toolbarbutton[checked] {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
}
|
||||
.theme-light #audio-node-toolbar toolbarbutton[checked] {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
#audio-node-toolbar toolbarbutton[checked] {
|
||||
background-color: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
/* don't invert checked buttons so we can have white icons on light theme */
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ a {
|
|||
.message > .prefix,
|
||||
.message > .timestamp {
|
||||
flex: none;
|
||||
color: GrayText;
|
||||
color: var(--theme-comment);
|
||||
margin: 3px 6px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -131,11 +131,6 @@ a {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.jsterm-input-container {
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
#output-wrapper {
|
||||
direction: ltr;
|
||||
overflow: auto;
|
||||
|
|
@ -253,11 +248,11 @@ a {
|
|||
}
|
||||
|
||||
.message[category=network].mixed-content .url {
|
||||
color: #FF0000;
|
||||
color: var(--theme-highlight-red);
|
||||
}
|
||||
|
||||
.message .learn-more-link {
|
||||
color: -moz-nativehyperlinktext;
|
||||
color: var(--theme-highlight-blue);
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
|
|
@ -360,6 +355,18 @@ a {
|
|||
}
|
||||
|
||||
/* JSTerm Styles */
|
||||
.jsterm-input-container {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
border-top: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-light .jsterm-input-container {
|
||||
/* For light theme use a white background for the input - it looks better
|
||||
than off-white */
|
||||
background-color: #fff;
|
||||
border-top-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.jsterm-input-node,
|
||||
.jsterm-complete-node {
|
||||
border: none;
|
||||
|
|
@ -368,10 +375,15 @@ a {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.jsterm-complete-node {
|
||||
color: var(--theme-comment);
|
||||
}
|
||||
|
||||
.jsterm-input-node {
|
||||
background-image: -moz-image-rect(url("chrome://devtools/skin/themes/images/commandline-icon.png"), 0, 32, 16, 16);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 16px;
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
|
|
@ -398,7 +410,7 @@ a {
|
|||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
-moz-margin-end: 15px;
|
||||
border: 1px solid rgba(128, 128, 128, .5);
|
||||
border: 1px solid var(--theme-splitter-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -442,6 +454,11 @@ a {
|
|||
.navigation-marker .url {
|
||||
-moz-padding-end: 9px;
|
||||
text-decoration: none;
|
||||
background: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.theme-light .navigation-marker .url {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.stacktrace {
|
||||
|
|
@ -451,7 +468,7 @@ a {
|
|||
margin: 5px 0 0 0;
|
||||
max-height: 10em;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgb(200,200,200);
|
||||
border: 1px solid var(--theme-splitter-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -514,49 +531,6 @@ a {
|
|||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.jsterm-input-container {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
border-color: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.jsterm-input-node {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.jsterm-complete-node {
|
||||
color: var(--theme-comment);
|
||||
}
|
||||
|
||||
.navigation-marker .url {
|
||||
background: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.theme-dark .inlined-variables-view iframe {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.theme-dark .stacktrace {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.theme-light .jsterm-input-container {
|
||||
/* For light theme use a white background for the input - it looks better
|
||||
than off-white */
|
||||
background-color: #fff;
|
||||
border-color: ThreeDShadow;
|
||||
}
|
||||
.theme-light .navigation-marker .url {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.theme-light .inlined-variables-view iframe {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.theme-light .stacktrace {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.message > .timestamp {
|
||||
display: none;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче