mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
John Emau
7776e78f01
The console context selector subtitle displays useful product information to help differentiate between contexts. This feature was added in response to https://crbug.com/719058. In the original implementation a text foreground color value of #999 was used (light theme) which does not meet WCAG 1.4.3 compliance: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum Changing the CSS color value to use `--selection-inactive-fg-color` sets the color value to #5a5a5a in light theme and #cdcdcd in dark theme, which meets contrast minimum. Before (Light Theme) Colors: https://webaim.org/resources/contrastchecker/?fcolor=999999&bcolor=FFFFFF Before (Dark Theme) Colors: https://webaim.org/resources/contrastchecker/?fcolor=666666&bcolor=242424 After (Light Theme) Colors: https://webaim.org/resources/contrastchecker/?fcolor=5A5A5A&bcolor=FFFFFF After (Dark Theme) Colors: https://webaim.org/resources/contrastchecker/?fcolor=CDCDCD&bcolor=242424 Additionally using the CSS variable makes the tool more theme-able, `--selection-inactive-fg-color` was chosen because the item colored is an inactive selection and aligns with usage in the tree outline control [1]. It took me a minute to get used to but I now prefer the new colors because of how easy it is to see all the information, especially in dark theme. [1]: https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/ui/treeoutline.css?originalUrl=https:%2F%2Fcs.chromium.org%2F Screenshot: https://imgur.com/sZ4iAvX Change-Id: Ic97fdef1ad2ed6989dcc9e6d7263b28babc077a9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2202665 Commit-Queue: John Emau <John.Emau@microsoft.com> Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Tony Ross <tross@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
41 lines
710 B
CSS
41 lines
710 B
CSS
/*
|
|
* Copyright 2017 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
padding: 2px 1px 2px 2px;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 36px;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.badge {
|
|
pointer-events: none;
|
|
margin-right: 4px;
|
|
display: inline-block;
|
|
height: 15px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--selection-inactive-fg-color);
|
|
margin-right: 3px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
:host(.highlighted) .subtitle {
|
|
color: inherit;
|
|
}
|