devtools-tracing 1.0.0

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

@@ -0,0 +1,139 @@
+// 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 * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+import type {DOMNode} from './DOMModel.js';
+
+export class CSSContainerQuery extends CSSQuery {
+  name?: string;
+  physicalAxes?: Protocol.DOM.PhysicalAxes;
+  logicalAxes?: Protocol.DOM.LogicalAxes;
+  queriesScrollState?: boolean;
+  queriesAnchored?: boolean;
+
+  static parseContainerQueriesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery[]):
+      CSSContainerQuery[] {
+    return payload.map(cq => new CSSContainerQuery(cssModel, cq));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSContainerQuery): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+    this.name = payload.name;
+    this.physicalAxes = payload.physicalAxes;
+    this.logicalAxes = payload.logicalAxes;
+    this.queriesScrollState = payload.queriesScrollState;
+    this.queriesAnchored = payload.queriesAnchored;
+  }
+
+  active(): boolean {
+    return true;
+  }
+
+  async getContainerForNode(nodeId: Protocol.DOM.NodeId): Promise<CSSContainerQueryContainer|undefined> {
+    const containerNode = await this.cssModel.domModel().getContainerForNode(
+        nodeId, this.name, this.physicalAxes, this.logicalAxes, this.queriesScrollState, this.queriesAnchored);
+    if (!containerNode) {
+      return;
+    }
+    return new CSSContainerQueryContainer(containerNode);
+  }
+}
+
+export class CSSContainerQueryContainer {
+  readonly containerNode: DOMNode;
+
+  constructor(containerNode: DOMNode) {
+    this.containerNode = containerNode;
+  }
+
+  async getContainerSizeDetails(): Promise<ContainerQueriedSizeDetails|undefined> {
+    const styles = await this.containerNode.domModel().cssModel().getComputedStyle(this.containerNode.id);
+    if (!styles) {
+      return;
+    }
+    const containerType = styles.get('container-type');
+    const writingMode = styles.get('writing-mode');
+    if (!containerType || !writingMode) {
+      return;
+    }
+
+    const queryAxis = getQueryAxisFromContainerType(`${containerType}`);
+    const physicalAxis = getPhysicalAxisFromQueryAxis(queryAxis, writingMode);
+    let width, height;
+    if (physicalAxis === PhysicalAxis.BOTH || physicalAxis === PhysicalAxis.HORIZONTAL) {
+      width = styles.get('width');
+    }
+    if (physicalAxis === PhysicalAxis.BOTH || physicalAxis === PhysicalAxis.VERTICAL) {
+      height = styles.get('height');
+    }
+
+    return {
+      queryAxis,
+      physicalAxis,
+      width,
+      height,
+    };
+  }
+}
+
+export const getQueryAxisFromContainerType = (propertyValue: string): QueryAxis => {
+  const segments = propertyValue.split(' ');
+  let isInline = false;
+  for (const segment of segments) {
+    if (segment === 'size') {
+      return QueryAxis.BOTH;
+    }
+    isInline = isInline || segment === 'inline-size';
+  }
+  if (isInline) {
+    return QueryAxis.INLINE;
+  }
+  return QueryAxis.NONE;
+};
+
+export const getPhysicalAxisFromQueryAxis = (queryAxis: QueryAxis, writingMode: string): PhysicalAxis => {
+  const isVerticalWritingMode = writingMode.startsWith('vertical');
+  switch (queryAxis) {
+    case QueryAxis.NONE:
+      return PhysicalAxis.NONE;
+    case QueryAxis.BOTH:
+      return PhysicalAxis.BOTH;
+    case QueryAxis.INLINE:
+      return isVerticalWritingMode ? PhysicalAxis.VERTICAL : PhysicalAxis.HORIZONTAL;
+    case QueryAxis.BLOCK:
+      return isVerticalWritingMode ? PhysicalAxis.HORIZONTAL : PhysicalAxis.VERTICAL;
+  }
+};
+
+export interface ContainerQueriedSizeDetails {
+  queryAxis: QueryAxis;
+  physicalAxis: PhysicalAxis;
+  width?: string;
+  height?: string;
+}
+
+export const enum QueryAxis {
+  NONE = '',
+  INLINE = 'inline-size',
+  BLOCK = 'block-size',
+  BOTH = 'size',
+}
+
+export const enum PhysicalAxis {
+  NONE = '',
+  HORIZONTAL = 'Horizontal',
+  VERTICAL = 'Vertical',
+  BOTH = 'Both',
+}

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

@@ -0,0 +1,40 @@
+// Copyright 2020 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 Platform from '../platform/platform.js';
+
+export class CSSFontFace {
+  readonly #fontFamily: string;
+  readonly #fontVariationAxes: Protocol.CSS.FontVariationAxis[];
+  readonly #fontVariationAxesByTag = new Map<string, Protocol.CSS.FontVariationAxis>();
+  readonly #src: Platform.DevToolsPath.UrlString;
+  readonly #fontDisplay: string;
+
+  constructor(payload: Protocol.CSS.FontFace) {
+    this.#fontFamily = payload.fontFamily;
+    this.#fontVariationAxes = payload.fontVariationAxes || [];
+    this.#src = payload.src as Platform.DevToolsPath.UrlString;
+    this.#fontDisplay = payload.fontDisplay;
+    for (const axis of this.#fontVariationAxes) {
+      this.#fontVariationAxesByTag.set(axis.tag, axis);
+    }
+  }
+
+  getFontFamily(): string {
+    return this.#fontFamily;
+  }
+
+  getSrc(): Platform.DevToolsPath.UrlString {
+    return this.#src;
+  }
+
+  getFontDisplay(): string {
+    return this.#fontDisplay;
+  }
+
+  getVariationAxisByTag(tag: string): Protocol.CSS.FontVariationAxis|undefined {
+    return this.#fontVariationAxesByTag.get(tag);
+  }
+}

package/lib/front_end/core/sdk/CSSLayer.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 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;
+  }
+}