mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-30 01:43:36 +08:00
Johan Bay
52f5be82ff
This CL provides support for @layer rules by providing two features: 1. we now separate the matched styles in the styles pane by their layer to make it easier to see which layer each rule belongs. 2. we provide a layer overview widget that shows the layer tree for the tree scope of the currently inspected element. Screenshot: https://imgur.com/a/CxFrKyc Doc: https://docs.google.com/document/d/1J7mvg-5eFsLhKLRkd7-mwdIxxDgt2fq1lhOTw47Df6E/edit?usp=sharing Change-Id: I6fbffc7e272303e942af733029059a0a98771283 Bug: 1240596 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3484212 Reviewed-by: Changhao Han <changhaohan@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Commit-Queue: Johan Bay <jobay@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
29 lines
580 B
CSS
29 lines
580 B
CSS
/**
|
|
* Copyright 2022 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.
|
|
*/
|
|
|
|
.styles-layers-pane {
|
|
overflow: hidden;
|
|
padding-left: 2px;
|
|
background-color: var(--color-background-elevation-1);
|
|
border-bottom: 1px solid var(--color-details-hairline);
|
|
margin-top: 0;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.styles-layers-pane > div {
|
|
font-weight: bold;
|
|
margin: 8px 4px 6px;
|
|
}
|
|
|
|
.styles-layers-pane > table {
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.styles-layers-pane td {
|
|
padding: 0;
|
|
}
|