mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-05 19:41:12 +08:00
Ergun Erdogmus
b2ed439f03
Previously, there were 3 `computeX` methods in CSSMatchedStyles: * `computeCSSVariable` * `computeValue` * `computeSingleVariableValue` with slightly different semantics, see the details here[1]. This CL, consolidates them into only one: * `computeCSSVariable` which takes a dashed identifier as a variable name and returns the computed value & the declaration of the identifier. We still needed to have a way to compute arbitrary expressions, for that, I have created `#computeCSSExpression` method inside StylePropertyTreeElement. For achieving these, I have: * Moved `BottomUpTreeMatching` and the common VariableMatcher and TextMatcher out of elements panel into SDK. * Renamed `PropertyParser` in Elements panel to be `PropertyMatchers` * Used BottomUpTreeMatching while resolving variables. As a drive-by: * Updated CSSAngleSwatch's `valuechanged` event to use BottomUpTreeMatching for more efficient operation (instead of re-computing computed text, it updated `computedText` on the match. As a TODO: * Previously we weren't handling cyclic references inside CSSMatchedStyles as explained in the spec. This CL didn't change that (even though broken behavior might be broken in some other way) and we'll tackle this next [1]: https://docs.google.com/document/d/1kLXkWG-01JYfYGsLB0-8o88DNQYRRVbnDUOxTuyfG8E/edit?usp=sharing&resourcekey=0-dt1y6JZuhqTnp-ASAluACQ Fixed: 329626445 Change-Id: I208754d5de8addcaa016b4050c819346a2f45a71 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5553776 Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org> Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
// Copyright 2024 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 SDK from '../core/sdk/sdk.js';
|
|
import * as CodeMirror from '../third_party/codemirror.next/codemirror.next.js';
|
|
|
|
export class Printer extends SDK.CSSPropertyParser.TreeWalker {
|
|
#printedText: string[] = [];
|
|
#indent = 0;
|
|
|
|
protected override enter({node}: SDK.CSSPropertyParser.SyntaxNodeRef): boolean {
|
|
const text = this.ast.text(node);
|
|
this.#printedText.push(`${'|'.repeat(this.#indent)} ${node.name}${text !== node.name ? `: ${text}` : ''}`);
|
|
this.#indent++;
|
|
return true;
|
|
}
|
|
protected override leave(): void {
|
|
this.#indent--;
|
|
}
|
|
|
|
get(): string {
|
|
return this.#printedText.join('\n');
|
|
}
|
|
|
|
static log(ast: SDK.CSSPropertyParser.SyntaxTree): void {
|
|
/* eslint-disable-next-line no-console */
|
|
console.log(Printer.walk(ast).get());
|
|
}
|
|
|
|
static rule(rule: string): string {
|
|
const ast = new SDK.CSSPropertyParser.SyntaxTree('', rule, CodeMirror.css.cssLanguage.parser.parse(rule).topNode);
|
|
return Printer.walk(ast).get();
|
|
}
|
|
}
|