Bug 968315 - [markup view] Current / hovered node highlighting colors need to be higher contrast;r=jwalker

This commit is contained in:
Brian Grinstead 2014-03-04 15:25:51 -06:00
parent 0cae44adbe
commit ca8c6db2d2
9 changed files with 121 additions and 70 deletions

View File

@ -160,7 +160,8 @@ browser.jar:
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/filters.svg (../shared/devtools/filters.svg)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png)
skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png)

View File

@ -273,7 +273,8 @@ browser.jar:
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/filters.svg (../shared/devtools/filters.svg)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png)
skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 668 B

View File

@ -21,40 +21,9 @@
color: #f5f7fa;
}
.theme-twisty {
cursor: pointer;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: -28px -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty[open] {
background-position: -42px -14px;
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: -28px 0;
}
.theme-checkbox[checked] {
background-position: -42px 0;
}
.theme-selected {
background: #26394D;
background-color: #1d4f73;
color: #f5f7fa; /* Light foreground text */
}
.theme-bg-darker {
@ -254,6 +223,46 @@ div.CodeMirror span.eval-text {
min-height: 1.4em;
}
/* Twisty and checkbox controls */
.theme-twisty, .theme-checkbox {
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-size: 56px 28px;
}
.theme-twisty {
cursor: pointer;
background-position: -28px -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty[open] {
background-position: -42px -14px;
}
.theme-checkbox {
display: inline-block;
border: 0;
padding: 0;
outline: none;
background-position: -28px 0;
}
.theme-checkbox[checked] {
background-position: -42px 0;
}
@media (min-resolution: 2dppx) {
.theme-twisty, .theme-checkbox {
background-image: url("chrome://browser/skin/devtools/controls@2x.png");
}
}
/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
.theme-tooltip-panel .panel-arrowcontent {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -21,40 +21,9 @@
color: #f5f7fa;
}
.theme-twisty {
cursor: pointer;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: 0 -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty[open] {
background-position: -14px -14px;
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: 0 0;
}
.theme-checkbox[checked] {
background-position: -14px 0;
}
.theme-selected {
background-color: #CCC;
background-color: #4c9ed9;
color: #f5f7fa; /* Light foreground text */
}
.theme-bg-darker {
@ -253,6 +222,56 @@ div.CodeMirror span.eval-text {
min-height: 1.4em;
}
/* Twisty and checkbox controls */
.theme-twisty, .theme-checkbox {
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-size: 56px 28px;
}
.theme-twisty {
cursor: pointer;
background-position: 0 -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty[open] {
background-position: -14px -14px;
}
/* Use white twisty when next to a selected item in markup view */
.theme-selected ~ .theme-twisty {
background-position: -28px -14px;
}
.theme-selected ~ .theme-twisty[open] {
background-position: -42px -14px;
}
.theme-checkbox {
display: inline-block;
border: 0;
padding: 0;
outline: none;
background-position: 0 0;
}
.theme-checkbox[checked] {
background-position: -14px 0;
}
@media (min-resolution: 2dppx) {
.theme-twisty, .theme-checkbox {
background-image: url("chrome://browser/skin/devtools/controls@2x.png");
}
}
/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
.theme-tooltip-panel .panel-arrowcontent {

View File

@ -14,3 +14,22 @@
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}
/* Selected nodes in the tree should have light selected text.
theme-selected doesn't work in this case since the text is a
sibling of the class, not a child. */
.theme-selected ~ .editor,
.theme-selected ~ .editor .theme-fg-color1,
.theme-selected ~ .editor .theme-fg-color2,
.theme-selected ~ .editor .theme-fg-color3,
.theme-selected ~ .editor .theme-fg-color4,
.theme-selected ~ .editor .theme-fg-color5,
.theme-selected ~ .editor .theme-fg-color6,
.theme-selected ~ .editor .theme-fg-color7 {
color: #f5f7fa; /* Light foreground text */
}
.tag-line {
padding-left: 2px;
}

View File

@ -189,7 +189,8 @@ browser.jar:
* skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/filters.svg (../shared/devtools/filters.svg)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png)
skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png)
* skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
@ -510,7 +511,8 @@ browser.jar:
* skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
* skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/aero/browser/devtools/filters.svg (../shared/devtools/filters.svg)
skin/classic/aero/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/aero/browser/devtools/controls.png (../shared/devtools/images/controls.png)
skin/classic/aero/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png)
* skin/classic/aero/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/aero/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/aero/browser/devtools/command-paintflashing.png (../shared/devtools/images/command-paintflashing.png)