devtools-tracing 1.0.0

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

@@ -0,0 +1,313 @@
+// 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 type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import {cssMetadata} from './CSSMetadata.js';
+import type {CSSModel, Edit} from './CSSModel.js';
+import {CSSProperty} from './CSSProperty.js';
+import type {CSSRule} from './CSSRule.js';
+import type {Target} from './Target.js';
+
+export class CSSStyleDeclaration {
+  readonly #cssModel: CSSModel;
+  parentRule: CSSRule|null;
+  #allProperties!: CSSProperty[];
+  styleSheetId?: Protocol.CSS.StyleSheetId;
+  range!: TextUtils.TextRange.TextRange|null;
+  cssText?: string;
+  #shorthandValues = new Map<string, string>();
+  #shorthandIsImportant = new Set<string>();
+  #activePropertyMap = new Map<string, CSSProperty>();
+  #leadingProperties!: CSSProperty[]|null;
+  type: Type;
+  // For CSSStyles coming from animations,
+  // This holds the name of the animation.
+  #animationName?: string;
+  constructor(
+      cssModel: CSSModel, parentRule: CSSRule|null, payload: Protocol.CSS.CSSStyle, type: Type,
+      animationName?: string) {
+    this.#cssModel = cssModel;
+    this.parentRule = parentRule;
+    this.#reinitialize(payload);
+    this.type = type;
+    this.#animationName = animationName;
+  }
+
+  rebase(edit: Edit): void {
+    if (this.styleSheetId !== edit.styleSheetId || !this.range) {
+      return;
+    }
+    if (edit.oldRange.equal(this.range)) {
+      this.#reinitialize((edit.payload as Protocol.CSS.CSSStyle));
+    } else {
+      this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newRange);
+      for (let i = 0; i < this.#allProperties.length; ++i) {
+        this.#allProperties[i].rebase(edit);
+      }
+    }
+  }
+
+  animationName(): string|undefined {
+    return this.#animationName;
+  }
+
+  #reinitialize(payload: Protocol.CSS.CSSStyle): void {
+    this.styleSheetId = payload.styleSheetId;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+
+    const shorthandEntries = payload.shorthandEntries;
+    this.#shorthandValues = new Map();
+    this.#shorthandIsImportant = new Set();
+    for (let i = 0; i < shorthandEntries.length; ++i) {
+      this.#shorthandValues.set(shorthandEntries[i].name, shorthandEntries[i].value);
+      if (shorthandEntries[i].important) {
+        this.#shorthandIsImportant.add(shorthandEntries[i].name);
+      }
+    }
+
+    this.#allProperties = [];
+
+    if (payload.cssText && this.range) {
+      const longhands = [];
+      for (const cssProperty of payload.cssProperties) {
+        const range = cssProperty.range;
+        if (!range) {
+          continue;
+        }
+        const parsedProperty = CSSProperty.parsePayload(this, this.#allProperties.length, cssProperty);
+        this.#allProperties.push(parsedProperty);
+        for (const longhand of parsedProperty.getLonghandProperties()) {
+          longhands.push(longhand);
+        }
+      }
+      for (const longhand of longhands) {
+        longhand.index = this.#allProperties.length;
+        this.#allProperties.push(longhand);
+      }
+    } else {
+      for (const cssProperty of payload.cssProperties) {
+        this.#allProperties.push(CSSProperty.parsePayload(this, this.#allProperties.length, cssProperty));
+      }
+    }
+
+    this.#generateSyntheticPropertiesIfNeeded();
+    this.#computeInactiveProperties();
+
+    // TODO(changhaohan): verify if this #activePropertyMap is still necessary, or if it is
+    // providing different information against the activeness in allPropertiesInternal.
+    this.#activePropertyMap = new Map();
+    for (const property of this.#allProperties) {
+      if (!property.activeInStyle()) {
+        continue;
+      }
+      this.#activePropertyMap.set(property.name, property);
+    }
+
+    this.cssText = payload.cssText;
+    this.#leadingProperties = null;
+  }
+
+  #generateSyntheticPropertiesIfNeeded(): void {
+    if (this.range) {
+      return;
+    }
+
+    if (!this.#shorthandValues.size) {
+      return;
+    }
+
+    const propertiesSet = new Set<string>();
+    for (const property of this.#allProperties) {
+      propertiesSet.add(property.name);
+    }
+
+    const generatedProperties = [];
+    // For style-based properties, generate #shorthands with values when possible.
+    for (const property of this.#allProperties) {
+      // For style-based properties, try generating #shorthands.
+      const shorthands = cssMetadata().getShorthands(property.name) || [];
+      for (const shorthand of shorthands) {
+        if (propertiesSet.has(shorthand)) {
+          continue;
+        }  // There already is a shorthand this #longhand falls under.
+        const shorthandValue = this.#shorthandValues.get(shorthand);
+        if (!shorthandValue) {
+          continue;
+        }  // Never generate synthetic #shorthands when no value is available.
+
+        // Generate synthetic shorthand we have a value for.
+        const shorthandImportance = Boolean(this.#shorthandIsImportant.has(shorthand));
+        const shorthandProperty = new CSSProperty(
+            this, this.allProperties().length, shorthand, shorthandValue, shorthandImportance, false, true, false);
+        generatedProperties.push(shorthandProperty);
+        propertiesSet.add(shorthand);
+      }
+    }
+    this.#allProperties = this.#allProperties.concat(generatedProperties);
+  }
+
+  #computeLeadingProperties(): CSSProperty[] {
+    function propertyHasRange(property: CSSProperty): boolean {
+      return Boolean(property.range);
+    }
+
+    if (this.range) {
+      return this.#allProperties.filter(propertyHasRange);
+    }
+
+    const leadingProperties = [];
+    for (const property of this.#allProperties) {
+      const shorthands = cssMetadata().getShorthands(property.name) || [];
+      let belongToAnyShorthand = false;
+      for (const shorthand of shorthands) {
+        if (this.#shorthandValues.get(shorthand)) {
+          belongToAnyShorthand = true;
+          break;
+        }
+      }
+      if (!belongToAnyShorthand) {
+        leadingProperties.push(property);
+      }
+    }
+
+    return leadingProperties;
+  }
+
+  leadingProperties(): CSSProperty[] {
+    if (!this.#leadingProperties) {
+      this.#leadingProperties = this.#computeLeadingProperties();
+    }
+    return this.#leadingProperties;
+  }
+
+  target(): Target {
+    return this.#cssModel.target();
+  }
+
+  cssModel(): CSSModel {
+    return this.#cssModel;
+  }
+
+  #computeInactiveProperties(): void {
+    const activeProperties = new Map<string, CSSProperty>();
+    // The order of the properties are:
+    // 1. regular property, including shorthands
+    // 2. longhand components from shorthands, in the order of their shorthands.
+    const processedLonghands = new Set();
+    for (const property of this.#allProperties) {
+      const metadata = cssMetadata();
+      const canonicalName = metadata.canonicalPropertyName(property.name);
+      if (property.disabled || !property.parsedOk) {
+        if (!property.disabled && metadata.isCustomProperty(property.name)) {
+          // Variable declarations that aren't parsedOk still "overload" other previous active declarations.
+          activeProperties.get(canonicalName)?.setActive(false);
+          activeProperties.delete(canonicalName);
+        }
+        property.setActive(false);
+        continue;
+      }
+      if (processedLonghands.has(property)) {
+        continue;
+      }
+      for (const longhand of property.getLonghandProperties()) {
+        const activeLonghand = activeProperties.get(longhand.name);
+        if (!activeLonghand) {
+          activeProperties.set(longhand.name, longhand);
+        } else if (!activeLonghand.important || longhand.important) {
+          activeLonghand.setActive(false);
+          activeProperties.set(longhand.name, longhand);
+        } else {
+          longhand.setActive(false);
+        }
+        processedLonghands.add(longhand);
+      }
+
+      const activeProperty = activeProperties.get(canonicalName);
+      if (!activeProperty) {
+        activeProperties.set(canonicalName, property);
+      } else if (!activeProperty.important || property.important) {
+        activeProperty.setActive(false);
+        activeProperties.set(canonicalName, property);
+      } else {
+        property.setActive(false);
+      }
+    }
+  }
+
+  allProperties(): CSSProperty[] {
+    return this.#allProperties;
+  }
+
+  hasActiveProperty(name: string): boolean {
+    return this.#activePropertyMap.has(name);
+  }
+
+  getPropertyValue(name: string): string {
+    const property = this.#activePropertyMap.get(name);
+    return property ? property.value : '';
+  }
+
+  isPropertyImplicit(name: string): boolean {
+    const property = this.#activePropertyMap.get(name);
+    return property ? property.implicit : false;
+  }
+
+  propertyAt(index: number): CSSProperty|null {
+    return (index < this.allProperties().length) ? this.allProperties()[index] : null;
+  }
+
+  pastLastSourcePropertyIndex(): number {
+    for (let i = this.allProperties().length - 1; i >= 0; --i) {
+      if (this.allProperties()[i].range) {
+        return i + 1;
+      }
+    }
+    return 0;
+  }
+
+  #insertionRange(index: number): TextUtils.TextRange.TextRange {
+    const property = this.propertyAt(index);
+    if (property?.range) {
+      return property.range.collapseToStart();
+    }
+    if (!this.range) {
+      throw new Error('CSSStyleDeclaration.range is null');
+    }
+    return this.range.collapseToEnd();
+  }
+
+  newBlankProperty(index?: number): CSSProperty {
+    index = (typeof index === 'undefined') ? this.pastLastSourcePropertyIndex() : index;
+    const property = new CSSProperty(this, index, '', '', false, false, true, false, '', this.#insertionRange(index));
+    return property;
+  }
+
+  setText(text: string, majorChange: boolean): Promise<boolean> {
+    if (!this.range || !this.styleSheetId) {
+      return Promise.resolve(false);
+    }
+    return this.#cssModel.setStyleText(this.styleSheetId, this.range, text, majorChange);
+  }
+
+  insertPropertyAt(index: number, name: string, value: string, userCallback?: ((arg0: boolean) => void)): void {
+    void this.newBlankProperty(index).setText(name + ': ' + value + ';', false, true).then(userCallback);
+  }
+
+  appendProperty(name: string, value: string, userCallback?: ((arg0: boolean) => void)): void {
+    this.insertPropertyAt(this.allProperties().length, name, value, userCallback);
+  }
+}
+
+export enum Type {
+  /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
+  Regular = 'Regular',
+  Inline = 'Inline',
+  Attributes = 'Attributes',
+  Pseudo = 'Pseudo',  // This type is for style declarations generated by devtools
+  Transition = 'Transition',
+  Animation = 'Animation',
+  /* eslint-enable @typescript-eslint/naming-convention */
+}

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

@@ -0,0 +1,196 @@
+// 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 type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Common from '../common/common.js';
+import * as i18n from '../i18n/i18n.js';
+import * as Platform from '../platform/platform.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {DeferredDOMNode} from './DOMModel.js';
+import type {FrameAssociated} from './FrameAssociated.js';
+import type {PageResourceLoadInitiator} from './PageResourceLoader.js';
+import {ResourceTreeModel} from './ResourceTreeModel.js';
+import type {DebugId} from './SourceMap.js';
+
+const UIStrings = {
+  /**
+   * @description Error message for when a CSS file can't be loaded
+   */
+  couldNotFindTheOriginalStyle: 'Could not find the original style sheet.',
+  /**
+   * @description Error message to display when a source CSS file could not be retrieved.
+   */
+  thereWasAnErrorRetrievingThe: 'There was an error retrieving the source styles.',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('core/sdk/CSSStyleSheetHeader.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentProvider, FrameAssociated {
+  #cssModel: CSSModel;
+  id: Protocol.CSS.StyleSheetId;
+  frameId: Protocol.Page.FrameId;
+  sourceURL: Platform.DevToolsPath.UrlString;
+  hasSourceURL: boolean;
+  origin: Protocol.CSS.StyleSheetOrigin;
+  title: string;
+  disabled: boolean;
+  isInline: boolean;
+  isMutable: boolean;
+  isConstructed: boolean;
+  startLine: number;
+  startColumn: number;
+  endLine: number;
+  endColumn: number;
+  contentLength: number;
+  ownerNode: DeferredDOMNode|undefined;
+  sourceMapURL: Platform.DevToolsPath.UrlString|undefined;
+  readonly loadingFailed: boolean;
+  #originalContentProvider: TextUtils.StaticContentProvider.StaticContentProvider|null;
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSStyleSheetHeader) {
+    this.#cssModel = cssModel;
+    this.id = payload.styleSheetId;
+    this.frameId = payload.frameId;
+    this.sourceURL = payload.sourceURL as Platform.DevToolsPath.UrlString;
+    this.hasSourceURL = Boolean(payload.hasSourceURL);
+    this.origin = payload.origin;
+    this.title = payload.title;
+    this.disabled = payload.disabled;
+    this.isInline = payload.isInline;
+    this.isMutable = payload.isMutable;
+    this.isConstructed = payload.isConstructed;
+    this.startLine = payload.startLine;
+    this.startColumn = payload.startColumn;
+    this.endLine = payload.endLine;
+    this.endColumn = payload.endColumn;
+    this.contentLength = payload.length;
+    if (payload.ownerNode) {
+      this.ownerNode = new DeferredDOMNode(cssModel.target(), payload.ownerNode);
+    }
+    this.sourceMapURL = payload.sourceMapURL as Platform.DevToolsPath.UrlString;
+    this.loadingFailed = payload.loadingFailed ?? false;
+    this.#originalContentProvider = null;
+  }
+
+  originalContentProvider(): TextUtils.ContentProvider.ContentProvider {
+    if (!this.#originalContentProvider) {
+      const lazyContent = (async(): Promise<TextUtils.ContentData.ContentDataOrError> => {
+        const originalText = await this.#cssModel.originalStyleSheetText(this);
+        if (originalText === null) {
+          return {error: i18nString(UIStrings.couldNotFindTheOriginalStyle)};
+        }
+        return new TextUtils.ContentData.ContentData(originalText, /* isBase64=*/ false, 'text/css');
+      });
+      this.#originalContentProvider =
+          new TextUtils.StaticContentProvider.StaticContentProvider(this.contentURL(), this.contentType(), lazyContent);
+    }
+    return this.#originalContentProvider;
+  }
+
+  setSourceMapURL(sourceMapURL?: Platform.DevToolsPath.UrlString): void {
+    this.sourceMapURL = sourceMapURL;
+  }
+
+  cssModel(): CSSModel {
+    return this.#cssModel;
+  }
+
+  isAnonymousInlineStyleSheet(): boolean {
+    return !this.resourceURL() && !this.#cssModel.sourceMapManager().sourceMapForClient(this);
+  }
+
+  isConstructedByNew(): boolean {
+    return this.isConstructed && this.sourceURL.length === 0;
+  }
+
+  resourceURL(): Platform.DevToolsPath.UrlString {
+    return this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL;
+  }
+
+  private getFrameURLPath(): string {
+    const model = this.#cssModel.target().model(ResourceTreeModel);
+    console.assert(Boolean(model));
+    if (!model) {
+      return '';
+    }
+    const frame = model.frameForId(this.frameId);
+    if (!frame) {
+      return '';
+    }
+    console.assert(Boolean(frame));
+    const parsedURL = new Common.ParsedURL.ParsedURL(frame.url);
+    let urlPath = parsedURL.host;
+    if (parsedURL.port) {
+      urlPath += ':' + parsedURL.port;
+    }
+    urlPath += parsedURL.folderPathComponents;
+    if (!urlPath.endsWith('/')) {
+      urlPath += '/';
+    }
+    return urlPath;
+  }
+
+  private viaInspectorResourceURL(): Platform.DevToolsPath.UrlString {
+    return `inspector://${this.getFrameURLPath()}inspector-stylesheet#${this.id}` as Platform.DevToolsPath.UrlString;
+  }
+
+  lineNumberInSource(lineNumberInStyleSheet: number): number {
+    return this.startLine + lineNumberInStyleSheet;
+  }
+
+  columnNumberInSource(lineNumberInStyleSheet: number, columnNumberInStyleSheet: number): number|undefined {
+    return (lineNumberInStyleSheet ? 0 : this.startColumn) + columnNumberInStyleSheet;
+  }
+
+  /**
+   * Checks whether the position is in this style sheet. Assumes that the
+   * position's columnNumber is consistent with line endings.
+   */
+  containsLocation(lineNumber: number, columnNumber: number): boolean {
+    const afterStart =
+        (lineNumber === this.startLine && columnNumber >= this.startColumn) || lineNumber > this.startLine;
+    const beforeEnd = lineNumber < this.endLine || (lineNumber === this.endLine && columnNumber <= this.endColumn);
+    return afterStart && beforeEnd;
+  }
+
+  contentURL(): Platform.DevToolsPath.UrlString {
+    return this.resourceURL();
+  }
+
+  contentType(): Common.ResourceType.ResourceType {
+    return Common.ResourceType.resourceTypes.Stylesheet;
+  }
+
+  async requestContentData(): Promise<TextUtils.ContentData.ContentDataOrError> {
+    const cssText = await this.#cssModel.getStyleSheetText(this.id);
+    if (cssText === null) {
+      return {error: i18nString(UIStrings.thereWasAnErrorRetrievingThe)};
+    }
+    return new TextUtils.ContentData.ContentData(cssText, /* isBase64=*/ false, 'text/css');
+  }
+
+  async searchInContent(query: string, caseSensitive: boolean, isRegex: boolean):
+      Promise<TextUtils.ContentProvider.SearchMatch[]> {
+    const contentData = await this.requestContentData();
+    return TextUtils.TextUtils.performSearchInContentData(contentData, query, caseSensitive, isRegex);
+  }
+
+  isViaInspector(): boolean {
+    return this.origin === 'inspector';
+  }
+
+  createPageResourceLoadInitiator(): PageResourceLoadInitiator {
+    return {
+      target: this.#cssModel.target(),
+      frameId: this.frameId,
+      initiatorUrl: this.hasSourceURL ? Platform.DevToolsPath.EmptyUrlString : this.sourceURL,
+    };
+  }
+
+  debugId(): DebugId|null {
+    return null;
+  }
+}

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

@@ -0,0 +1,33 @@
+// 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 CSSSupports extends CSSQuery {
+  static parseSupportsPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports[]): CSSSupports[] {
+    return payload.map(supports => new CSSSupports(cssModel, supports));
+  }
+
+  #active = true;
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSSupports): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+    this.#active = payload.active;
+  }
+
+  active(): boolean {
+    return this.#active;
+  }
+}

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

@@ -0,0 +1,64 @@
+// 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.
+
+export const enum Category {
+  ANIMATION = 'animation',
+  AUCTION_WORKLET = 'auction-worklet',
+  CANVAS = 'canvas',
+  CLIPBOARD = 'clipboard',
+  CONTROL = 'control',
+  DEVICE = 'device',
+  DOM_MUTATION = 'dom-mutation',
+  DRAG_DROP = 'drag-drop',
+  GEOLOCATION = 'geolocation',
+  KEYBOARD = 'keyboard',
+  LOAD = 'load',
+  MEDIA = 'media',
+  MOUSE = 'mouse',
+  NOTIFICATION = 'notification',
+  PARSE = 'parse',
+  PICTURE_IN_PICTURE = 'picture-in-picture',
+  POINTER = 'pointer',
+  SCRIPT = 'script',
+  SHARED_STORAGE_WORKLET = 'shared-storage-worklet',
+  TIMER = 'timer',
+  TOUCH = 'touch',
+  TRUSTED_TYPE_VIOLATION = 'trusted-type-violation',
+  WEB_AUDIO = 'web-audio',
+  WINDOW = 'window',
+  WORKER = 'worker',
+  XHR = 'xhr',
+}
+
+export class CategorizedBreakpoint {
+  /**
+   * The name of this breakpoint as passed to 'setInstrumentationBreakpoint',
+   * 'setEventListenerBreakpoint' and 'setBreakOnCSPViolation'.
+   *
+   * Note that the backend adds a 'listener:' and 'instrumentation:' prefix
+   * to this name in the 'Debugger.paused' CDP event.
+   */
+  readonly name: string;
+
+  readonly #category: Category;
+  #enabled: boolean;
+
+  constructor(category: Category, name: string) {
+    this.#category = category;
+    this.name = name;
+    this.#enabled = false;
+  }
+
+  category(): Category {
+    return this.#category;
+  }
+
+  enabled(): boolean {
+    return this.#enabled;
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.#enabled = enabled;
+  }
+}