mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-03 02:21:05 +08:00
Jack Lynch
8a344769f6
Currently, there is no intuitive way to navigate the DOM breakpoints pane by keyboard. This change refactors the DOM breakpoints pane to use UI.ListControl to manage keyboard navigation, in response to feedback here [3] about code duplication. Using ListControl also makes it easier to manage an accessible description on breakpoint elements so that screen reader users are informed about the checked state of breakpoints and whether the page is currently paused on them. Focusing the list items, before/after: https://gyazo.com/5edc75de0c0e9d7f968f49e114cec324 https://gyazo.com/c3efc3322783f3505bc4dde3edabbf13 This CL breaks a web test, so [1] must be merged first to disable it. [2] Fixes and reenables it. [1] https://chromium-review.googlesource.com/c/chromium/src/+/1893960 [2] https://chromium-review.googlesource.com/c/chromium/src/+/1644461 [3] https://chromium-review.googlesource.com/c/chromium/src/+/1644461/14/third_party/blink/renderer/devtools/front_end/browser_debugger/DOMBreakpointsSidebarPane.js#141 Bug: 963183 Change-Id: I41e2e8b73baa7ae3e6169163785e245493ab4ba7 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1889352 Commit-Queue: Jack Lynch <jalyn@microsoft.com> Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
41 lines
854 B
CSS
41 lines
854 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.
|
|
*/
|
|
|
|
.breakpoint-list {
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.breakpoint-list .dom-breakpoint > div {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.breakpoint-entry {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.breakpoint-entry[data-keyboard-focus="true"] {
|
|
background-color: var(--focus-bg-color);
|
|
}
|
|
|
|
.breakpoint-list .breakpoint-entry:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.breakpoint-hit {
|
|
background-color: rgb(255, 255, 194);
|
|
border-right: 3px solid rgb(107, 97, 48);
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .breakpoint-hit {
|
|
background-color: hsl(46, 98%, 22%);
|
|
color: #ccc;
|
|
}
|