mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
Peter Marshall
9a3d85fa0b
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible :focus-visible is basically the exact same functionality as the custom data-keyboard-focus attribute that devtools maintains. This CL converts all of our uses of data-keyboard-focus in CSS to use :focus-visible. This has no intended behaviour change although it's possible there are small differences in our implementation vs. the web platform one, so this might cause some regression with focus styles for keyboard interaction. I tested a few of these manually to verify they still do the same thing. The CSS linter was unhappy about the ordering of some rules due to specificity-ordering checks, so there is some re-ordering too. A follow-up CL will remove our implementation of data-keyboard-focus. Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236 Commit-Queue: Peter Marshall <petermarshall@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Jack Lynch <jalyn@microsoft.com> Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
114 lines
2.5 KiB
CSS
114 lines
2.5 KiB
CSS
/*
|
|
* Copyright 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.
|
|
*/
|
|
|
|
.object-properties-section-dimmed {
|
|
opacity: 60%;
|
|
}
|
|
|
|
.object-properties-section {
|
|
padding: 0 0 0 0;
|
|
color: rgb(33 33 33) !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.object-properties-section li {
|
|
user-select: text;
|
|
}
|
|
|
|
.object-properties-section li::before {
|
|
top: -1px;
|
|
}
|
|
|
|
.object-properties-section li.editing-sub-part {
|
|
padding: 3px 12px 8px 6px;
|
|
margin: -1px -6px -8px -6px;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
.object-properties-section li.editing {
|
|
margin-left: 10px;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
.tree-outline ol.title-less-mode {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.object-properties-section .synthetic-property {
|
|
font-style: italic;
|
|
}
|
|
|
|
.object-properties-section .private-property-hash {
|
|
color: #222;
|
|
}
|
|
|
|
.object-properties-section-root-element {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.object-properties-section .editable-div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.name-and-value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.editing-sub-part .name-and-value {
|
|
overflow: visible;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.property-prompt {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible {
|
|
background: none;
|
|
}
|
|
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible ::slotted(*),
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible .tree-element-title,
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value {
|
|
background: var(--focus-bg-color);
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 0 2px var(--focus-bg-color);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.object-properties-section-dimmed {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible {
|
|
background: Highlight;
|
|
}
|
|
|
|
.tree-outline li:hover .tree-element-title,
|
|
.tree-outline li.selected .tree-element-title {
|
|
color: ButtonText;
|
|
}
|
|
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible .tree-element-title,
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible span,
|
|
.tree-outline.hide-selection-when-blurred .selected:focus-visible .gray-info-message {
|
|
color: HighlightText;
|
|
}
|
|
|
|
.tree-outline-disclosure:hover li.parent::before {
|
|
background-color: ButtonText;
|
|
}
|
|
}
|