Files
react-native-devtools-frontend/front_end/changes/changesSidebar.css
T
Junyi Xiao 0ccf6db244 Devtools: a11y fixes for Memory heap profiler
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
2019-08-26 20:26:47 +00:00

33 lines
885 B
CSS

li .icon {
margin: -3px -5px -3px -5px;
background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
}
.tree-outline li {
min-height: 20px;
}
.tree-outline li:hover:not(.selected) .selection {
display: block;
background-color: var(--item-hover-color);
}
.navigator-fs-tree-item .icon{
background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
}
.navigator-sm-script-tree-item .icon,
.navigator-script-tree-item .icon,
.navigator-snippet-tree-item .icon {
background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
}
.navigator-sm-stylesheet-tree-item .icon,
.navigator-stylesheet-tree-item .icon {
background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
}
.navigator-image-tree-item .icon,
.navigator-font-tree-item .icon {
background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
}