mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Kham Udom
047cb6914a
Update the DOM tree panel by fixing missing expanded glyph, removed the borders, set by the system. The borders should only be visible, when elements are hovered or selected. Made sure all the panels, Style, Computed, Event Listeners, DOM Breakpoints, Properties, and Accessibility, have a hover state, if there is one, in Default mode. Otherwise, all panels should be navigable, with keyboard. Before: https://imgur.com/a/XaXWvFW After: https://imgur.com/a/1lBV1Br Update:1 Addressed comments to move styles to a central location, removed unnecessary use of forced-colors and !important and unused rule sets. Update:2 Address change to use border color, more refactoring work to remove unnecessary !important, more work on centralizing styles Bug: 1048378 Change-Id: I6942eb46d6c741fdea3f062ac61ead7c6e9d1bbc Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2007930 Commit-Queue: Kham Udom <khamu@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
45 lines
960 B
CSS
45 lines
960 B
CSS
/*
|
|
* Copyright (c) 2015 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.
|
|
*/
|
|
|
|
.computed-properties {
|
|
user-select: text;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.styles-sidebar-pane-toolbar {
|
|
border-bottom: 1px solid #eee;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.styles-sidebar-pane-filter-box {
|
|
flex: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.styles-sidebar-pane-filter-box > input {
|
|
outline: none !important;
|
|
border: none;
|
|
width: 100%;
|
|
background: white;
|
|
padding-left: 4px;
|
|
margin: 3px;
|
|
}
|
|
|
|
.styles-sidebar-pane-filter-box > input:focus,
|
|
.styles-sidebar-pane-filter-box > input:not(:placeholder-shown) {
|
|
box-shadow: var(--focus-ring-active-shadow);
|
|
}
|
|
|
|
.styles-sidebar-pane-filter-box > input::placeholder {
|
|
color: rgba(0, 0, 0, 0.54);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.styles-sidebar-pane-filter-box > input {
|
|
border: 1px solid ButtonText;
|
|
}
|
|
}
|