mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
Mathias Bynens
42f585a5ad
Previously, many CSS rules were written as:
-theme-preserve {
foo: bar;
}
Note that the selector is `-theme-preserve`, which in theory matches
any <-theme-preserve> elements — but we don’t use any such elements,
and it’s an invalid custom element name [1] anyway.
The only reason these selectors are used is to mark a CSS rule as
unaffected by DevTools theming; `_patchProperty` in `UIUtils.js` checks
if the selector contains `'-theme-'`.
stylelint-config-standard complains about this selector for good
reason, so we should use something else. A simple fix is to use a class
selector instead:
.-theme-preserve {
foo: bar;
}
There is one gotcha: `-theme-preserve` gets applied as an actual class
name to some <input> elements in the memory timeline under the
Performance panel. To prevent those elements from getting all the
`-theme-preserve` styles, this patch changes the class name for that
specific case to `-theme-preserve-input`.
This works great: stylelint is now happy, and `_patchProperty` in
`UIUtils.js` still works correctly, since it only checks if the
selector contains `-theme-` anywhere.
[1]: https://mothereff.in/custom-element-name#-theme-preserve
Bug: chromium:1083142
Change-Id: I923f12de6d581e9fef71a9a58bda184e40dee796
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2252017
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
82 lines
1.6 KiB
CSS
82 lines
1.6 KiB
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.
|
|
*/
|
|
|
|
[slot=insertion-point-main] {
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
[slot=insertion-point-sidebar] {
|
|
overflow: auto;
|
|
}
|
|
|
|
.editor-container {
|
|
flex: 1;
|
|
}
|
|
|
|
:focus.selected {
|
|
background-color: var(--selection-bg-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.CodeMirror-lines:not(:active) {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.CodeMirror-line:hover {
|
|
cursor: default !important;
|
|
background-color: rgb(0 0 255 / 5%);
|
|
}
|
|
|
|
.CodeMirror .CodeMirror-linebackground.spacer {
|
|
text-align: center;
|
|
color: rgb(0 0 0 / 50%);
|
|
background-color: rgb(0 0 255 / 10%);
|
|
}
|
|
|
|
.CodeMirror .equal > span > span {
|
|
opacity: 50%;
|
|
}
|
|
|
|
.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.CodeMirror .CodeMirror-linebackground.addition,
|
|
.-theme-preserve,
|
|
.changes-diff-gutter-marker.addition {
|
|
background-color: hsl(144deg 55% 49% / 20%);
|
|
}
|
|
|
|
.CodeMirror .CodeMirror-linebackground.deletion,
|
|
.-theme-preserve,
|
|
.changes-diff-gutter-marker.deletion {
|
|
background-color: rgb(255 0 0 / 20%);
|
|
}
|
|
|
|
.CodeMirror .addition .cm-inner-diff:not(.CodeMirror-selectedtext),
|
|
.-theme-preserve {
|
|
background-color: hsl(144deg 55% 49% / 30%);
|
|
}
|
|
|
|
.CodeMirror .deletion .cm-inner-diff:not(.CodeMirror-selectedtext),
|
|
.-theme-preserve {
|
|
background-color: rgb(255 0 0 / 30%);
|
|
}
|
|
|
|
.changes-toolbar {
|
|
background-color: var(--toolbar-bg-color);
|
|
border-top: var(--divider-border);
|
|
}
|
|
|
|
.changes-diff-gutter {
|
|
width: 20px;
|
|
}
|
|
|
|
.changes-diff-gutter-marker {
|
|
text-align: center;
|
|
}
|