mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +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>
31 lines
998 B
TypeScript
31 lines
998 B
TypeScript
// 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.
|
|
|
|
import * as TextUtils from '../../models/text_utils/text_utils.js';
|
|
import type * as Protocol from '../../generated/protocol.js';
|
|
|
|
import type {CSSModel} from './CSSModel.js';
|
|
import {CSSQuery} from './CSSQuery.js';
|
|
|
|
export class CSSLayer extends CSSQuery {
|
|
static parseLayerPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSLayer[]): CSSLayer[] {
|
|
return payload.map(supports => new CSSLayer(cssModel, supports));
|
|
}
|
|
|
|
constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSLayer) {
|
|
super(cssModel);
|
|
this.reinitialize(payload);
|
|
}
|
|
|
|
reinitialize(payload: Protocol.CSS.CSSLayer): void {
|
|
this.text = payload.text;
|
|
this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
|
|
this.styleSheetId = payload.styleSheetId;
|
|
}
|
|
|
|
active(): boolean {
|
|
return true;
|
|
}
|
|
}
|