mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 20:39:31 +08:00
Junyi Xiao
0ccf6db244
Accessibility testing revealed the following issues within the tool: 1. no focus indicator on javascript VM instances list This change: changes current selected/hover and adds selected but inactive color to match treeoutline in Element Bug: 963183 Workflow gif: https://imgur.com/a/lHNTOP7 Change-Id: Iaed79d7166bf70011711be548ba66c65a57922da Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1678946 Commit-Queue: Junyi Xiao <juxiao@microsoft.com> Reviewed-by: Alexei Filippov <alph@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#690483} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 522709bc5b3158fdaef516f391d382d7321e505f
55 lines
1004 B
CSS
55 lines
1004 B
CSS
/*
|
|
* Copyright (c) 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 {
|
|
overflow: auto;
|
|
background-color: var(--toolbar-bg-color);
|
|
}
|
|
|
|
.tree-outline-disclosure {
|
|
max-width: 100%;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.count {
|
|
flex: none;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
[is=ui-icon] {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
[is=ui-icon].icon-mask {
|
|
background-color: #555;
|
|
}
|
|
|
|
li {
|
|
height: 24px;
|
|
}
|
|
|
|
li .largeicon-navigator-file {
|
|
background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
|
|
margin: 0;
|
|
}
|
|
|
|
li .largeicon-navigator-folder {
|
|
background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
|
|
margin: -3px -3px 0 -5px;
|
|
}
|
|
|
|
.tree-element-title {
|
|
flex-shrink: 100;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-outline li:hover:not(.selected) .selection {
|
|
display: block;
|
|
background-color: var(--item-hover-color);
|
|
}
|