devtools-tracing 1.0.0

package/lib/front_end/core/sdk/CSSQuery.ts

@@ -0,0 +1,72 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Protocol from '../../generated/protocol.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import {CSSLocation, type CSSModel, type Edit} from './CSSModel.js';
+import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
+
+type CSSQueryPayload =
+    Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports|Protocol.CSS.CSSScope;
+
+export abstract class CSSQuery {
+  text = '';
+  range?: TextUtils.TextRange.TextRange|null;
+  styleSheetId?: Protocol.CSS.StyleSheetId;
+  protected cssModel: CSSModel;
+
+  constructor(cssModel: CSSModel) {
+    this.cssModel = cssModel;
+  }
+
+  protected abstract reinitialize(payload: CSSQueryPayload): void;
+
+  abstract active(): boolean;
+
+  rebase(edit: Edit): void {
+    if (this.styleSheetId !== edit.styleSheetId || !this.range) {
+      return;
+    }
+    if (edit.oldRange.equal(this.range)) {
+      this.reinitialize(edit.payload as CSSQueryPayload);
+    } else {
+      this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newRange);
+    }
+  }
+
+  equal(other: CSSQuery): boolean {
+    if (!this.styleSheetId || !this.range || !other.range) {
+      return false;
+    }
+    return this.styleSheetId === other.styleSheetId && this.range.equal(other.range);
+  }
+
+  lineNumberInSource(): number|undefined {
+    if (!this.range) {
+      return undefined;
+    }
+    return this.header()?.lineNumberInSource(this.range.startLine);
+  }
+
+  columnNumberInSource(): number|undefined {
+    if (!this.range) {
+      return undefined;
+    }
+    return this.header()?.columnNumberInSource(this.range.startLine, this.range.startColumn);
+  }
+
+  header(): CSSStyleSheetHeader|null {
+    return this.styleSheetId ? this.cssModel.styleSheetHeaderForId(this.styleSheetId) : null;
+  }
+
+  rawLocation(): CSSLocation|null {
+    const header = this.header();
+    if (!header || this.lineNumberInSource() === undefined) {
+      return null;
+    }
+    const lineNumber = Number(this.lineNumberInSource());
+    return new CSSLocation(header, lineNumber, this.columnNumberInSource());
+  }
+}

package/lib/front_end/core/sdk/CSSRule.ts

@@ -0,0 +1,465 @@
+// Copyright 2016 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Platform from '../platform/platform.js';
+
+import {CSSContainerQuery} from './CSSContainerQuery.js';
+import {CSSLayer} from './CSSLayer.js';
+import {CSSMedia} from './CSSMedia.js';
+import type {CSSModel, Edit} from './CSSModel.js';
+import {CSSScope} from './CSSScope.js';
+import {CSSStartingStyle} from './CSSStartingStyle.js';
+import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
+import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
+import {CSSSupports} from './CSSSupports.js';
+
+function styleSheetHeaderForRule(
+    cssModel: CSSModel, {styleSheetId}: {styleSheetId?: Protocol.CSS.StyleSheetId}): CSSStyleSheetHeader|null {
+  return styleSheetId && cssModel.styleSheetHeaderForId(styleSheetId) || null;
+}
+
+export class CSSRule {
+  readonly cssModelInternal: CSSModel;
+  readonly origin: Protocol.CSS.StyleSheetOrigin;
+  readonly style: CSSStyleDeclaration;
+  readonly header: CSSStyleSheetHeader|null;
+  readonly treeScope: Protocol.DOM.BackendNodeId|undefined;
+
+  constructor(cssModel: CSSModel, payload: {
+    style: Protocol.CSS.CSSStyle,
+    origin: Protocol.CSS.StyleSheetOrigin,
+    originTreeScopeNodeId: Protocol.DOM.BackendNodeId|undefined,
+    header: CSSStyleSheetHeader|null,
+  }) {
+    this.header = payload.header;
+    this.cssModelInternal = cssModel;
+    this.origin = payload.origin;
+    this.treeScope = payload.originTreeScopeNodeId;
+    this.style = new CSSStyleDeclaration(this.cssModelInternal, this, payload.style, Type.Regular);
+  }
+
+  get sourceURL(): string|undefined {
+    return this.header?.sourceURL;
+  }
+
+  rebase(edit: Edit): void {
+    if (this.header?.id !== edit.styleSheetId) {
+      return;
+    }
+    this.style.rebase(edit);
+  }
+
+  resourceURL(): Platform.DevToolsPath.UrlString {
+    return this.header?.resourceURL() ?? Platform.DevToolsPath.EmptyUrlString;
+  }
+
+  isUserAgent(): boolean {
+    return this.origin === Protocol.CSS.StyleSheetOrigin.UserAgent;
+  }
+
+  isInjected(): boolean {
+    return this.origin === Protocol.CSS.StyleSheetOrigin.Injected;
+  }
+
+  isViaInspector(): boolean {
+    return this.origin === Protocol.CSS.StyleSheetOrigin.Inspector;
+  }
+
+  isRegular(): boolean {
+    return this.origin === Protocol.CSS.StyleSheetOrigin.Regular;
+  }
+
+  isKeyframeRule(): boolean {
+    return false;
+  }
+
+  cssModel(): CSSModel {
+    return this.cssModelInternal;
+  }
+}
+
+class CSSValue {
+  text: string;
+  range?: TextUtils.TextRange.TextRange;
+  specificity?: Protocol.CSS.Specificity;
+  constructor(payload: Protocol.CSS.Value) {
+    this.text = payload.text;
+    if (payload.range) {
+      this.range = TextUtils.TextRange.TextRange.fromObject(payload.range);
+    }
+    if (payload.specificity) {
+      this.specificity = payload.specificity;
+    }
+  }
+
+  rebase(edit: Edit): void {
+    if (!this.range) {
+      return;
+    }
+    this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newRange);
+  }
+}
+
+export class CSSStyleRule extends CSSRule {
+  selectors!: CSSValue[];
+  nestingSelectors?: string[];
+  media: CSSMedia[];
+  containerQueries: CSSContainerQuery[];
+  supports: CSSSupports[];
+  scopes: CSSScope[];
+  layers: CSSLayer[];
+  ruleTypes: Protocol.CSS.CSSRuleType[];
+  startingStyles: CSSStartingStyle[];
+  wasUsed: boolean;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: payload.originTreeScopeNodeId
+    });
+    this.reinitializeSelectors(payload.selectorList);
+    this.nestingSelectors = payload.nestingSelectors;
+    this.media = payload.media ? CSSMedia.parseMediaArrayPayload(cssModel, payload.media) : [];
+    this.containerQueries = payload.containerQueries ?
+        CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
+        [];
+    this.scopes = payload.scopes ? CSSScope.parseScopesPayload(cssModel, payload.scopes) : [];
+    this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
+    this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
+    this.startingStyles =
+        payload.startingStyles ? CSSStartingStyle.parseStartingStylePayload(cssModel, payload.startingStyles) : [];
+    this.ruleTypes = payload.ruleTypes || [];
+    this.wasUsed = wasUsed || false;
+  }
+
+  static createDummyRule(cssModel: CSSModel, selectorText: string): CSSStyleRule {
+    const dummyPayload = {
+      selectorList: {
+        text: '',
+        selectors: [{text: selectorText, value: undefined}],
+      },
+      style: {
+        styleSheetId: '0' as Protocol.CSS.StyleSheetId,
+        range: new TextUtils.TextRange.TextRange(0, 0, 0, 0),
+        shorthandEntries: [],
+        cssProperties: [],
+      },
+      origin: Protocol.CSS.StyleSheetOrigin.Inspector,
+    };
+    return new CSSStyleRule(cssModel, (dummyPayload as Protocol.CSS.CSSRule));
+  }
+
+  private reinitializeSelectors(selectorList: Protocol.CSS.SelectorList): void {
+    this.selectors = [];
+    for (let i = 0; i < selectorList.selectors.length; ++i) {
+      this.selectors.push(new CSSValue(selectorList.selectors[i]));
+    }
+  }
+
+  setSelectorText(newSelector: string): Promise<boolean> {
+    const styleSheetId = this.header?.id;
+    if (!styleSheetId) {
+      throw new Error('No rule stylesheet id');
+    }
+    const range = this.selectorRange();
+    if (!range) {
+      throw new Error('Rule selector is not editable');
+    }
+    return this.cssModelInternal.setSelectorText(styleSheetId, range, newSelector);
+  }
+
+  selectorText(): string {
+    return this.selectors.map(selector => selector.text).join(', ');
+  }
+
+  selectorRange(): TextUtils.TextRange.TextRange|null {
+    // Nested group rules might not contain a selector.
+    // https://www.w3.org/TR/css-nesting-1/#conditionals
+    if (this.selectors.length === 0) {
+      return null;
+    }
+
+    const firstRange = this.selectors[0].range;
+    const lastRange = this.selectors[this.selectors.length - 1].range;
+    if (!firstRange || !lastRange) {
+      return null;
+    }
+    return new TextUtils.TextRange.TextRange(
+        firstRange.startLine, firstRange.startColumn, lastRange.endLine, lastRange.endColumn);
+  }
+
+  lineNumberInSource(selectorIndex: number): number {
+    const selector = this.selectors[selectorIndex];
+    if (!selector?.range || !this.header) {
+      return 0;
+    }
+    return this.header.lineNumberInSource(selector.range.startLine);
+  }
+
+  columnNumberInSource(selectorIndex: number): number|undefined {
+    const selector = this.selectors[selectorIndex];
+    if (!selector?.range || !this.header) {
+      return undefined;
+    }
+    return this.header.columnNumberInSource(selector.range.startLine, selector.range.startColumn);
+  }
+
+  override rebase(edit: Edit): void {
+    if (this.header?.id !== edit.styleSheetId) {
+      return;
+    }
+    const range = this.selectorRange();
+    if (range?.equal(edit.oldRange)) {
+      this.reinitializeSelectors((edit.payload as Protocol.CSS.SelectorList));
+    } else {
+      for (let i = 0; i < this.selectors.length; ++i) {
+        this.selectors[i].rebase(edit);
+      }
+    }
+    this.media.forEach(media => media.rebase(edit));
+    this.containerQueries.forEach(cq => cq.rebase(edit));
+    this.scopes.forEach(scope => scope.rebase(edit));
+    this.supports.forEach(supports => supports.rebase(edit));
+
+    super.rebase(edit);
+  }
+}
+
+export class CSSPropertyRule extends CSSRule {
+  #name: CSSValue;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPropertyRule) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined,
+    });
+    this.#name = new CSSValue(payload.propertyName);
+  }
+
+  propertyName(): CSSValue {
+    return this.#name;
+  }
+
+  initialValue(): string|null {
+    return this.style.hasActiveProperty('initial-value') ? this.style.getPropertyValue('initial-value') : null;
+  }
+
+  syntax(): string {
+    return this.style.getPropertyValue('syntax');
+  }
+  inherits(): boolean {
+    return this.style.getPropertyValue('inherits') === 'true';
+  }
+  setPropertyName(newPropertyName: string): Promise<boolean> {
+    const styleSheetId = this.header?.id;
+    if (!styleSheetId) {
+      throw new Error('No rule stylesheet id');
+    }
+    const range = this.#name.range;
+    if (!range) {
+      throw new Error('Property name is not editable');
+    }
+    return this.cssModelInternal.setPropertyRulePropertyName(styleSheetId, range, newPropertyName);
+  }
+}
+
+export class CSSFontPaletteValuesRule extends CSSRule {
+  readonly #paletteName: CSSValue;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFontPaletteValuesRule) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
+    this.#paletteName = new CSSValue(payload.fontPaletteName);
+  }
+
+  name(): CSSValue {
+    return this.#paletteName;
+  }
+}
+
+export class CSSKeyframesRule {
+  readonly #animationName: CSSValue;
+  readonly #keyframes: CSSKeyframeRule[];
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframesRule) {
+    this.#animationName = new CSSValue(payload.animationName);
+    this.#keyframes =
+        payload.keyframes.map(keyframeRule => new CSSKeyframeRule(cssModel, keyframeRule, this.#animationName.text));
+  }
+
+  name(): CSSValue {
+    return this.#animationName;
+  }
+
+  keyframes(): CSSKeyframeRule[] {
+    return this.#keyframes;
+  }
+}
+
+export class CSSKeyframeRule extends CSSRule {
+  #keyText!: CSSValue;
+  #parentRuleName: string;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframeRule, parentRuleName: string) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
+    this.reinitializeKey(payload.keyText);
+    this.#parentRuleName = parentRuleName;
+  }
+
+  parentRuleName(): string {
+    return this.#parentRuleName;
+  }
+
+  key(): CSSValue {
+    return this.#keyText;
+  }
+
+  private reinitializeKey(payload: Protocol.CSS.Value): void {
+    this.#keyText = new CSSValue(payload);
+  }
+
+  override rebase(edit: Edit): void {
+    if (this.header?.id !== edit.styleSheetId || !this.#keyText.range) {
+      return;
+    }
+    if (edit.oldRange.equal(this.#keyText.range)) {
+      this.reinitializeKey((edit.payload as Protocol.CSS.Value));
+    } else {
+      this.#keyText.rebase(edit);
+    }
+
+    super.rebase(edit);
+  }
+
+  override isKeyframeRule(): boolean {
+    return true;
+  }
+
+  setKeyText(newKeyText: string): Promise<boolean> {
+    const styleSheetId = this.header?.id;
+    if (!styleSheetId) {
+      throw new Error('No rule stylesheet id');
+    }
+    const range = this.#keyText.range;
+    if (!range) {
+      throw new Error('Keyframe key is not editable');
+    }
+    return this.cssModelInternal.setKeyframeKey(styleSheetId, range, newKeyText);
+  }
+}
+
+export class CSSPositionTryRule extends CSSRule {
+  readonly #name: CSSValue;
+  readonly #active: boolean;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPositionTryRule) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: payload.style,
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
+    this.#name = new CSSValue(payload.name);
+    this.#active = payload.active;
+  }
+
+  name(): CSSValue {
+    return this.#name;
+  }
+
+  active(): boolean {
+    return this.#active;
+  }
+}
+
+export interface CSSNestedStyleLeaf {
+  style: CSSStyleDeclaration;
+}
+
+export type CSSNestedStyleCondition = {
+  children: CSSNestedStyle[],
+}&({media: CSSMedia}|{container: CSSContainerQuery}|{supports: CSSSupports});
+
+export type CSSNestedStyle = CSSNestedStyleLeaf|CSSNestedStyleCondition;
+
+export class CSSFunctionRule extends CSSRule {
+  readonly #name: CSSValue;
+  readonly #parameters: string[];
+  readonly #children: CSSNestedStyle[];
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFunctionRule) {
+    super(cssModel, {
+      origin: payload.origin,
+      style: {cssProperties: [], shorthandEntries: []},
+      header: styleSheetHeaderForRule(cssModel, payload),
+      originTreeScopeNodeId: undefined
+    });
+    this.#name = new CSSValue(payload.name);
+    this.#parameters = payload.parameters.map(({name}) => name);
+    this.#children = this.protocolNodesToNestedStyles(payload.children);
+  }
+
+  functionName(): CSSValue {
+    return this.#name;
+  }
+
+  parameters(): string[] {
+    return this.#parameters;
+  }
+
+  children(): CSSNestedStyle[] {
+    return this.#children;
+  }
+
+  nameWithParameters(): string {
+    return `${this.functionName().text}(${this.parameters().join(', ')})`;
+  }
+
+  protocolNodesToNestedStyles(nodes: Protocol.CSS.CSSFunctionNode[]): CSSNestedStyle[] {
+    const result = [];
+    for (const node of nodes) {
+      const nestedStyle = this.protocolNodeToNestedStyle(node);
+      if (nestedStyle) {
+        result.push(nestedStyle);
+      }
+    }
+    return result;
+  }
+
+  protocolNodeToNestedStyle(node: Protocol.CSS.CSSFunctionNode): CSSNestedStyle|undefined {
+    if (node.style) {
+      return {style: new CSSStyleDeclaration(this.cssModelInternal, this, node.style, Type.Regular)};
+    }
+    if (node.condition) {
+      const children = this.protocolNodesToNestedStyles(node.condition.children);
+      if (node.condition.media) {
+        return {children, media: new CSSMedia(this.cssModelInternal, node.condition.media)};
+      }
+      if (node.condition.containerQueries) {
+        return {
+          children,
+          container: new CSSContainerQuery(this.cssModelInternal, node.condition.containerQueries),
+        };
+      }
+      if (node.condition.supports) {
+        return {
+          children,
+          supports: new CSSSupports(this.cssModelInternal, node.condition.supports),
+        };
+      }
+      console.error('A function rule condition must have a media, container, or supports');
+      return;
+    }
+    console.error('A function rule node must have a style or condition');
+    return;
+  }
+}

package/lib/front_end/core/sdk/CSSScope.ts

@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSScope extends CSSQuery {
+  static parseScopesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSScope[]): CSSScope[] {
+    return payload.map(scope => new CSSScope(cssModel, scope));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSScope) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSScope): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

package/lib/front_end/core/sdk/CSSStartingStyle.ts

@@ -0,0 +1,29 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSStartingStyle extends CSSQuery {
+  static parseStartingStylePayload(cssModel: CSSModel, payload: Protocol.CSS.CSSStartingStyle[]): CSSStartingStyle[] {
+    return payload.map(p => new CSSStartingStyle(cssModel, p));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSStartingStyle) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSStartingStyle): void {
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}