Files
react-native-devtools-frontend/front_end/coverage/coverageListView.css
T
Benedikt Meurer a62d7f895a [devtools] Improve code coverage color selection.
The color selection for code coverage (red+green) is not ideal for
developers that are impacted by color blindness. This changes the
colors to a brighter red and some blueish green that, a combination
that is known to work well enough for people impacted by different
kinds of color blindness.

https://pbs.twimg.com/media/EEU9fCzUUAItz4n?format=jpg shows an
example of how these two colors look like now.

Bug: chromium:1003671
Change-Id: I9c3e08fb350a6086624d63f44e069813c618588e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1801762
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Yang Guo <yangguo@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#696727}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 71d06de626d5e15fae7534df8fe0bb1613838aa7
2019-09-16 08:00:24 +00:00

62 lines
963 B
CSS

.data-grid {
border: none;
}
.data-grid td .url-outer {
width: 100%;
display: inline-flex;
justify-content: flex-start;
}
.data-grid td .url-outer .filter-highlight {
font-weight: bold;
}
.data-grid td .url-prefix {
overflow-x: hidden;
text-overflow: ellipsis;
}
.data-grid td .url-suffix {
flex: none;
}
.data-grid td .bar {
display: inline-block;
height: 8px;
}
.data-grid .selected td .bar {
border-top: 1px white solid;
border-bottom: 1px white solid;
}
.data-grid .selected td .bar:last-child {
border-right: 1px white solid;
}
.data-grid .selected td .bar:first-child {
border-left: 1px white solid;
}
.data-grid td .bar-container {
}
.data-grid td .bar-unused-size {
background-color: #EE442F;
}
.data-grid td .bar-used-size {
background-color: #63ACBE;
}
.data-grid td .percent-value {
color: #888;
width: 45px;
display: inline-block;
}
.data-grid:focus tr.selected span.percent-value {
color: #eee;
}