зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1568794 - Consolidate bg-yellow and contrast-background devtools theme variables; r=gl
Differential Revision: https://phabricator.services.mozilla.com/D47547 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
9619ebe2c8
Коммит
c1cbbadb6f
|
@ -160,7 +160,7 @@ function assertNodeFlashing(nodeFront, inspector) {
|
|||
const container = getContainerForNodeFront(nodeFront, inspector);
|
||||
ok(container, "Markup container for node found");
|
||||
ok(
|
||||
container.tagState.classList.contains("theme-bg-yellow-contrast"),
|
||||
container.tagState.classList.contains("theme-bg-contrast"),
|
||||
"Markup container for node is flashing"
|
||||
);
|
||||
|
||||
|
@ -168,7 +168,7 @@ function assertNodeFlashing(nodeFront, inspector) {
|
|||
// flashing.
|
||||
clearTimeout(container._flashMutationTimer);
|
||||
container._flashMutationTimer = null;
|
||||
container.tagState.classList.remove("theme-bg-yellow-contrast");
|
||||
container.tagState.classList.remove("theme-bg-contrast");
|
||||
}
|
||||
|
||||
function assertAttributeFlashing(nodeFront, attribute, inspector) {
|
||||
|
@ -182,9 +182,9 @@ function assertAttributeFlashing(nodeFront, attribute, inspector) {
|
|||
const attributeElement = container.editor.getAttributeElement(attribute);
|
||||
|
||||
ok(
|
||||
attributeElement.classList.contains("theme-bg-yellow-contrast"),
|
||||
attributeElement.classList.contains("theme-bg-contrast"),
|
||||
"Element for " + attribute + " attribute is flashing"
|
||||
);
|
||||
|
||||
attributeElement.classList.remove("theme-bg-yellow-contrast");
|
||||
attributeElement.classList.remove("theme-bg-contrast");
|
||||
}
|
||||
|
|
|
@ -241,12 +241,12 @@ ElementEditor.prototype = {
|
|||
}
|
||||
|
||||
flashElementOn(this.getAttributeElement(attrName), {
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
|
||||
this.animationTimers[attrName] = setTimeout(() => {
|
||||
flashElementOff(this.getAttributeElement(attrName), {
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
}, this.markup.CONTAINER_FLASHING_DURATION);
|
||||
},
|
||||
|
|
|
@ -663,7 +663,7 @@ MarkupContainer.prototype = {
|
|||
if (!this.selected) {
|
||||
flashElementOn(this.tagState, {
|
||||
foregroundElt: this.editor.elt,
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
if (this._flashMutationTimer) {
|
||||
clearTimeout(this._flashMutationTimer);
|
||||
|
@ -672,7 +672,7 @@ MarkupContainer.prototype = {
|
|||
this._flashMutationTimer = setTimeout(() => {
|
||||
flashElementOff(this.tagState, {
|
||||
foregroundElt: this.editor.elt,
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
}, this.markup.CONTAINER_FLASHING_DURATION);
|
||||
}
|
||||
|
|
|
@ -1736,7 +1736,7 @@ CssRuleView.prototype = {
|
|||
*/
|
||||
_flashElement(element) {
|
||||
flashElementOn(element, {
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
|
||||
if (this._flashMutationTimer) {
|
||||
|
@ -1746,7 +1746,7 @@ CssRuleView.prototype = {
|
|||
|
||||
this._flashMutationTimer = setTimeout(() => {
|
||||
flashElementOff(element, {
|
||||
backgroundClass: "theme-bg-yellow-contrast",
|
||||
backgroundClass: "theme-bg-contrast",
|
||||
});
|
||||
|
||||
// Emit "scrolled-to-property" for use by tests.
|
||||
|
|
|
@ -27,15 +27,10 @@ body {
|
|||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-bg-contrast,
|
||||
.variable-or-property:not([overridden])[changed] {
|
||||
background: var(--theme-contrast-background);
|
||||
}
|
||||
|
||||
.theme-bg-yellow-contrast {
|
||||
background: var(--theme-bg-yellow);
|
||||
}
|
||||
|
||||
.theme-link,
|
||||
.cm-s-mozilla .cm-link,
|
||||
.CodeMirror-Tern-type {
|
||||
|
@ -162,8 +157,12 @@ body {
|
|||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
|
||||
color: black;
|
||||
.theme-bg-contrast {
|
||||
background: var(--theme-contrast-background);
|
||||
}
|
||||
|
||||
.theme-fg-contrast {
|
||||
color: var(--theme-contrast-color);
|
||||
}
|
||||
|
||||
.ruleview-swatch,
|
||||
|
|
|
@ -27,15 +27,10 @@ body {
|
|||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-bg-contrast,
|
||||
.variable-or-property:not([overridden])[changed] {
|
||||
background: var(--theme-contrast-background);
|
||||
}
|
||||
|
||||
.theme-bg-yellow-contrast {
|
||||
background: var(--theme-bg-yellow);
|
||||
}
|
||||
|
||||
.theme-link,
|
||||
.cm-s-mozilla .cm-link,
|
||||
.CodeMirror-Tern-type {
|
||||
|
@ -149,10 +144,6 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-toolbar,
|
||||
.devtools-toolbar,
|
||||
.devtools-sidebar-tabs tabs,
|
||||
|
@ -163,6 +154,14 @@ body {
|
|||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-bg-contrast {
|
||||
background: var(--theme-contrast-background);
|
||||
}
|
||||
|
||||
.theme-fg-contrast {
|
||||
color: var(--theme-contrast-color);
|
||||
}
|
||||
|
||||
.ruleview-swatch,
|
||||
.computed-colorswatch {
|
||||
box-shadow: 0 0 0 1px #c4c4c4;
|
||||
|
|
|
@ -9,7 +9,8 @@
|
|||
--markup-pseudoclass-disk-color: #e9c600;
|
||||
--markup-hidden-tag-color: var(--grey-50);
|
||||
--markup-outline: var(--theme-splitter-color);
|
||||
--markup-text-color-contrast: black;
|
||||
--markup-drag-line: var(--grey-40);
|
||||
--markup-drop-line: var(--blue-55);
|
||||
}
|
||||
|
||||
.theme-dark:root {
|
||||
|
@ -18,7 +19,8 @@
|
|||
--markup-hidden-punctuation-color: #787878;
|
||||
--markup-hidden-tag-color: var(--grey-45);
|
||||
--markup-outline: var(--theme-selection-background);
|
||||
--markup-text-color-contrast: var(--theme-selection-color);
|
||||
--markup-drag-line: var(--grey-55);
|
||||
--markup-drop-line: var(--blue-50);
|
||||
}
|
||||
|
||||
* {
|
||||
|
@ -135,11 +137,11 @@ body.dragging .tag-line {
|
|||
/* Offset these by 1000px to make sure they cover the full width of the view */
|
||||
width: calc(100% + 1000px);
|
||||
left: -1000px;
|
||||
background-color: var(--theme-body-color);
|
||||
background-color: var(--markup-drag-line);
|
||||
}
|
||||
|
||||
.tag-line.drop-target::before {
|
||||
background-color: var(--theme-contrast-background);
|
||||
background-color: var(--markup-drop-line);
|
||||
}
|
||||
|
||||
/* In case the indicator is put on the closing .tag-line, the indentation level
|
||||
|
@ -437,9 +439,9 @@ ul.children + .tag-line::before {
|
|||
/* Selected nodes being flashed in the tree should have dark selected text. Here we target
|
||||
nodes with theme-selected text colors and apply a dark, accessible text color for when
|
||||
the yellow flashing background is applied. */
|
||||
.theme-selected.theme-bg-yellow-contrast ~ .editor,
|
||||
.theme-selected ~ .editor [class*="theme-fg-color"].theme-fg-contrast {
|
||||
color: var(--markup-text-color-contrast);
|
||||
.theme-selected.theme-bg-contrast ~ .editor,
|
||||
.theme-selected ~ .editor .theme-fg-contrast {
|
||||
color: var(--theme-contrast-color);
|
||||
}
|
||||
|
||||
/* Applicable to the DOCTYPE */
|
||||
|
|
|
@ -103,7 +103,6 @@
|
|||
:root.theme-light {
|
||||
--theme-body-background: white;
|
||||
--theme-sidebar-background: white;
|
||||
--theme-contrast-background: #e6b064;
|
||||
|
||||
/* Toolbar */
|
||||
--theme-tab-toolbar-background: var(--grey-10);
|
||||
|
@ -197,13 +196,14 @@
|
|||
--theme-toolbarbutton-active-background: var(--grey-90-a20);
|
||||
--theme-toolbarbutton-active-color: var(--grey-90);
|
||||
|
||||
/* Element Flash background color */
|
||||
--theme-bg-yellow: #fff697;
|
||||
|
||||
/* Warning colors */
|
||||
--theme-warning-background: hsl(54, 100%, 92%);
|
||||
--theme-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
|
||||
--theme-warning-color: var(--yellow-80);
|
||||
|
||||
/* Flashing colors used to highlight updates */
|
||||
--theme-contrast-background: #fff697;
|
||||
--theme-contrast-color: black;
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -218,7 +218,6 @@
|
|||
:root.theme-dark {
|
||||
--theme-body-background: #232327;
|
||||
--theme-sidebar-background: #18181a;
|
||||
--theme-contrast-background: #ffb35b;
|
||||
|
||||
/* Toolbar */
|
||||
--theme-tab-toolbar-background: var(--grey-90);
|
||||
|
@ -312,11 +311,12 @@
|
|||
--theme-toolbarbutton-active-background: var(--grey-10-a30);
|
||||
--theme-toolbarbutton-active-color: var(--grey-30);
|
||||
|
||||
/* Element Flash background color */
|
||||
--theme-bg-yellow: #605913;
|
||||
|
||||
/* Warning colors */
|
||||
--theme-warning-background: hsl(42, 37%, 19%);
|
||||
--theme-warning-border: hsl(60, 30%, 26%);
|
||||
--theme-warning-color: hsl(43, 94%, 81%);
|
||||
|
||||
/* Flashing colors used to highlight updates */
|
||||
--theme-contrast-background: #605913; /* slightly desaturated Yellow 80 */
|
||||
--theme-contrast-color: white;
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче