Bug 1391003 - Use the new photon line selection and hover background colors in devtool. r=bgrins

This commit is contained in:
Gabriel Luong 2017-09-01 10:47:11 -04:00
Родитель af782a1283
Коммит 4220adbc69
15 изменённых файлов: 26 добавлений и 31 удалений

Просмотреть файл

@ -829,7 +829,7 @@ html .arrow.expanded svg {
}
.theme-dark .managed-tree .tree .node.focused {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
padding-bottom: 2px;
}
@ -2199,7 +2199,7 @@ html[dir="rtl"] .editor-mount {
}
.editor-wrapper .highlight-lines {
background: var(--theme-selection-background-semitransparent);
background: var(--theme-selection-background-hover);
}
.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,

Просмотреть файл

@ -624,17 +624,15 @@ MarkupContainer.prototype = {
this._hovered = value;
if (value) {
if (!this.selected) {
this.tagState.classList.add("theme-bg-darker");
this.tagState.classList.add("tag-hover");
}
if (this.closeTagLine) {
this.closeTagLine.querySelector(".tag-state").classList.add(
"theme-bg-darker");
this.closeTagLine.querySelector(".tag-state").classList.add("tag-hover");
}
} else {
this.tagState.classList.remove("theme-bg-darker");
this.tagState.classList.remove("tag-hover");
if (this.closeTagLine) {
this.closeTagLine.querySelector(".tag-state").classList.remove(
"theme-bg-darker");
this.closeTagLine.querySelector(".tag-state").classList.remove("tag-hover");
}
}
},

Просмотреть файл

@ -38,6 +38,6 @@
}
.toolbar .btn:not([disabled]):hover:active {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
}

Просмотреть файл

@ -742,7 +742,7 @@ body,
}
.request-list-item:not(.selected):hover {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
}
.request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) {

Просмотреть файл

@ -182,7 +182,7 @@
.theme-light .treeTable .treeRow:hover,
.theme-dark .treeTable .treeRow:hover {
background-color: var(--theme-selection-background-semitransparent) !important;
background-color: var(--theme-selection-background-hover) !important;
}
.theme-firebug .treeTable .treeRow:hover {

Просмотреть файл

@ -92,7 +92,7 @@ function testColorExistence() {
const vars = [
"body-background", "sidebar-background", "contrast-background",
"tab-toolbar-background", "toolbar-background", "selection-background",
"selection-color", "selection-background-semitransparent", "splitter-color",
"selection-color", "selection-background-hover", "splitter-color",
"comment", "body-color", "body-color-alt", "content-color1", "content-color2",
"content-color3", "highlight-green", "highlight-blue", "highlight-bluegrey",
"highlight-purple", "highlight-lightorange", "highlight-orange", "highlight-red",

Просмотреть файл

@ -212,6 +212,6 @@
.cubic-bezier-container .active-preset canvas,
.cubic-bezier-container .active-preset:hover canvas {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
border-color: var(--theme-selection-background);
}

Просмотреть файл

@ -337,6 +337,7 @@ body {
.animation-timeline .time-body {
top: var(--toolbar-height);
z-index: 3;
}
.progress-tick-container .progress-tick,
@ -377,7 +378,7 @@ body {
}
.animation-timeline .animation.selected {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
}
.animation-timeline .animation:last-child {

Просмотреть файл

@ -342,7 +342,7 @@ checkbox:-moz-focusring {
.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
}
.devtools-toolbarbutton:not([disabled])[label][checked=true],

Просмотреть файл

@ -27,10 +27,6 @@ body {
color: var(--theme-selection-color);
}
.theme-bg-darker {
background-color: var(--theme-selection-background-semitransparent);
}
.theme-selected,
.CodeMirror-hint-active {
background-color: var(--theme-selection-background);
@ -58,7 +54,6 @@ body {
color: var(--theme-highlight-blue);
}
.theme-comment,
.cm-s-mozilla .cm-meta,
.cm-s-mozilla .cm-hr,

Просмотреть файл

@ -27,10 +27,6 @@ body {
color: var(--theme-selection-color);
}
.theme-bg-darker {
background: var(--theme-selection-background-semitransparent);
}
.theme-selected,
.CodeMirror-hint-active {
background-color: var(--theme-selection-background);

Просмотреть файл

@ -175,6 +175,11 @@ ul.children + .tag-line::before {
z-index: 0;
}
.tag-line .tag-hover:not(.theme-selected) {
background: var(--theme-selection-background-hover);
z-index: -1;
}
.expander {
display: inline-block;
margin-left: -14px;

Просмотреть файл

@ -396,7 +396,7 @@
}
.stack-frame-call:hover {
background-color: var(--theme-selection-background-semitransparent);
background-color: var(--theme-selection-background-hover);
}
.stack-frame-async {

Просмотреть файл

@ -25,8 +25,8 @@
--theme-toolbar-background-alt: #f5f5f5;
--theme-toolbar-hover: rgba(170, 170, 170, .2);
--theme-toolbar-hover-active: rgba(170, 170, 170, .4);
--theme-selection-background: #4c9ed9;
--theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
--theme-selection-background: var(--blue-55);
--theme-selection-background-hover: #F0F9FE;
--theme-selection-color: #f5f7fa;
--theme-splitter-color: #dde1e4;
--theme-comment: #696969;
@ -93,8 +93,8 @@
--theme-toolbar-background-alt: #2F343E;
--theme-toolbar-hover: rgba(110, 120, 130, 0.1);
--theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
--theme-selection-background: #5675B9;
--theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
--theme-selection-background: #204E8A;
--theme-selection-background-hover: #353B48;
--theme-selection-color: #f5f7fa;
--theme-splitter-color: #454d5d;
--theme-comment: #757873;
@ -159,7 +159,7 @@
--theme-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
--theme-toolbar-tab-selected-background: rgb(253, 253, 253);
--theme-selection-background: #3399ff;
--theme-selection-background-semitransparent: rgba(128,128,128,0.2);
--theme-selection-background-hover: rgba(128,128,128,0.2);
--theme-selection-color: white;
--theme-splitter-color: #bfbfbf;
--theme-comment: darkgreen;

Просмотреть файл

@ -630,7 +630,7 @@ a.learn-more-link.webconsole-learn-more-link {
padding: 0 1px;
-moz-box-align: stretch;
--toolbarbutton-checked-color: var(--theme-body-color);
--toolbarbutton-checked-background: var(--theme-selection-background-semitransparent);
--toolbarbutton-checked-background: var(--theme-selection-background-hover);
}
.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {