devtools-tracing 1.0.0

package/lib/front_end/models/text_utils/TextUtils.ts

@@ -0,0 +1,401 @@
+// Copyright 2013 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 Platform from '../../core/platform/platform.js';
+
+import {ContentData, type ContentDataOrError} from './ContentData.js';
+import {SearchMatch} from './ContentProvider.js';
+import type {Text} from './Text.js';
+
+const KEY_VALUE_FILTER_REGEXP = /(?:^|\s)(\-)?([\w\-]+):([^\s]+)/;
+const REGEXP_FILTER_REGEXP = /(?:^|\s)(\-)?\/([^\/\\]+(\\.[^\/]*)*)\//;
+const TEXT_FILTER_REGEXP = /(?:^|\s)(\-)?([^\s]+)/;
+const SPACE_CHAR_REGEXP = /\s/;
+
+export const Utils = {
+  isSpaceChar: function(char: string): boolean {
+    return SPACE_CHAR_REGEXP.test(char);
+  },
+
+  lineIndent: function(line: string): string {
+    let indentation = 0;
+    while (indentation < line.length && Utils.isSpaceChar(line.charAt(indentation))) {
+      ++indentation;
+    }
+    return line.substr(0, indentation);
+  },
+
+  splitStringByRegexes(text: string, regexes: RegExp[]): Array<{
+    value: string,
+    position: number,
+    regexIndex: number,
+    captureGroups: Array<string|undefined>,
+  }> {
+    const matches: Array<{
+      value: string,
+      position: number,
+      regexIndex: number,
+      captureGroups: Array<string|undefined>,
+    }> = [];
+    const globalRegexes: RegExp[] = [];
+    for (let i = 0; i < regexes.length; i++) {
+      const regex = regexes[i];
+      if (!regex.global) {
+        globalRegexes.push(new RegExp(regex.source, regex.flags ? regex.flags + 'g' : 'g'));
+      } else {
+        globalRegexes.push(regex);
+      }
+    }
+    doSplit(text, 0, 0);
+    return matches;
+
+    function doSplit(text: string, regexIndex: number, startIndex: number): void {
+      if (regexIndex >= globalRegexes.length) {
+        // Set regexIndex as -1 if text did not match with any regular expression
+        matches.push({value: text, position: startIndex, regexIndex: -1, captureGroups: []});
+        return;
+      }
+      const regex = globalRegexes[regexIndex];
+      let currentIndex = 0;
+      let result;
+      regex.lastIndex = 0;
+      while ((result = regex.exec(text)) !== null) {
+        const stringBeforeMatch = text.substring(currentIndex, result.index);
+        if (stringBeforeMatch) {
+          doSplit(stringBeforeMatch, regexIndex + 1, startIndex + currentIndex);
+        }
+        const match = result[0];
+        matches.push({
+          value: match,
+          position: startIndex + result.index,
+          regexIndex,
+          captureGroups: result.slice(1),
+        });
+        currentIndex = result.index + match.length;
+      }
+      const stringAfterMatches = text.substring(currentIndex);
+      if (stringAfterMatches) {
+        doSplit(stringAfterMatches, regexIndex + 1, startIndex + currentIndex);
+      }
+    }
+  },
+};
+
+export class FilterParser {
+  private readonly keys: string[];
+  constructor(keys: string[]) {
+    this.keys = keys;
+  }
+
+  static cloneFilter(filter: ParsedFilter): ParsedFilter {
+    return {key: filter.key, text: filter.text, regex: filter.regex, negative: filter.negative};
+  }
+
+  parse(query: string): ParsedFilter[] {
+    const splitFilters =
+        Utils.splitStringByRegexes(query, [KEY_VALUE_FILTER_REGEXP, REGEXP_FILTER_REGEXP, TEXT_FILTER_REGEXP]);
+    const parsedFilters: ParsedFilter[] = [];
+    for (const {regexIndex, captureGroups} of splitFilters) {
+      if (regexIndex === -1) {
+        continue;
+      }
+      if (regexIndex === 0) {
+        const startsWithMinus = captureGroups[0];
+        const parsedKey = captureGroups[1];
+        const parsedValue = captureGroups[2];
+        if (this.keys.indexOf((parsedKey as string)) !== -1) {
+          parsedFilters.push({
+            key: parsedKey,
+            regex: undefined,
+            text: parsedValue,
+            negative: Boolean(startsWithMinus),
+          });
+        } else {
+          parsedFilters.push({
+            key: undefined,
+            regex: undefined,
+            text: `${parsedKey}:${parsedValue}`,
+            negative: Boolean(startsWithMinus),
+          });
+        }
+      } else if (regexIndex === 1) {
+        const startsWithMinus = captureGroups[0];
+        const parsedRegex = captureGroups[1];
+        try {
+          parsedFilters.push({
+            key: undefined,
+            regex: new RegExp((parsedRegex as string), 'im'),
+            text: undefined,
+            negative: Boolean(startsWithMinus),
+          });
+        } catch {
+          parsedFilters.push({
+            key: undefined,
+            regex: undefined,
+            text: `/${parsedRegex}/`,
+            negative: Boolean(startsWithMinus),
+          });
+        }
+      } else if (regexIndex === 2) {
+        const startsWithMinus = captureGroups[0];
+        const parsedText = captureGroups[1];
+        parsedFilters.push({
+          key: undefined,
+          regex: undefined,
+          text: parsedText,
+          negative: Boolean(startsWithMinus),
+        });
+      }
+    }
+    return parsedFilters;
+  }
+}
+
+export class BalancedJSONTokenizer {
+  private readonly callback: (arg0: string) => void;
+  private index: number;
+  private balance: number;
+  private buffer: string;
+  private findMultiple: boolean;
+  private closingDoubleQuoteRegex: RegExp;
+  private lastBalancedIndex?: number;
+  constructor(callback: (arg0: string) => void, findMultiple?: boolean) {
+    this.callback = callback;
+    this.index = 0;
+    this.balance = 0;
+    this.buffer = '';
+    this.findMultiple = findMultiple || false;
+    this.closingDoubleQuoteRegex = /[^\\](?:\\\\)*"/g;
+  }
+
+  write(chunk: string): boolean {
+    this.buffer += chunk;
+    const lastIndex = this.buffer.length;
+    const buffer = this.buffer;
+    let index;
+    for (index = this.index; index < lastIndex; ++index) {
+      const character = buffer[index];
+      if (character === '"') {
+        this.closingDoubleQuoteRegex.lastIndex = index;
+        if (!this.closingDoubleQuoteRegex.test(buffer)) {
+          break;
+        }
+        index = this.closingDoubleQuoteRegex.lastIndex - 1;
+      } else if (character === '{') {
+        ++this.balance;
+      } else if (character === '}') {
+        --this.balance;
+        if (this.balance < 0) {
+          this.reportBalanced();
+          return false;
+        }
+        if (!this.balance) {
+          this.lastBalancedIndex = index + 1;
+          if (!this.findMultiple) {
+            break;
+          }
+        }
+      } else if (character === ']' && !this.balance) {
+        this.reportBalanced();
+        return false;
+      }
+    }
+    this.index = index;
+    this.reportBalanced();
+    return true;
+  }
+
+  private reportBalanced(): void {
+    if (!this.lastBalancedIndex) {
+      return;
+    }
+    this.callback(this.buffer.slice(0, this.lastBalancedIndex));
+    this.buffer = this.buffer.slice(this.lastBalancedIndex);
+    this.index -= this.lastBalancedIndex;
+    this.lastBalancedIndex = 0;
+  }
+
+  remainder(): string {
+    return this.buffer;
+  }
+}
+
+/**
+ * Detects the indentation used by a given text document, based on the _Comparing
+ * lines_ approach suggested by Heather Arthur (and also found in Firefox DevTools).
+ *
+ * This implementation differs from the original proposal in that tab indentation
+ * isn't detected by checking if at least 50% of the lines start with a tab, but
+ * instead by comparing the number of lines that start with a tab to the frequency
+ * of the other indentation patterns. This way we also detect small snippets with
+ * long leading comments correctly, when tab indentation is used for the snippets
+ * of code.
+ *
+ * @param lines The input document lines.
+ * @returns The indentation detected for the lines as string or `null` if it's inconclusive.
+ * @see https://heathermoor.medium.com/detecting-code-indentation-eff3ed0fb56b
+ */
+export const detectIndentation = function(lines: Iterable<string>): string|null {
+  const frequencies: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  let tabs = 0, previous = 0;
+
+  for (const line of lines) {
+    let current = 0;
+    if (line.length !== 0) {
+      let char = line.charAt(0);
+      if (char === '\t') {
+        tabs++;
+        continue;
+      }
+      while (char === ' ') {
+        char = line.charAt(++current);
+      }
+    }
+
+    if (current === line.length) {
+      // Don't consider empty lines.
+      previous = 0;
+      continue;
+    }
+
+    const delta = Math.abs(current - previous);
+    if (delta < frequencies.length) {
+      // Don't consider deltas above 8 characters.
+      frequencies[delta] = frequencies[delta] + 1;
+    }
+    previous = current;
+  }
+
+  // Find most frequent non-zero width difference between adjacent lines.
+  let mostFrequentDelta = 0, highestFrequency = 0;
+  for (let delta = 1; delta < frequencies.length; ++delta) {
+    const frequency = frequencies[delta];
+    if (frequency > highestFrequency) {
+      highestFrequency = frequency;
+      mostFrequentDelta = delta;
+    }
+  }
+
+  if (tabs > mostFrequentDelta) {
+    // If more lines start with tabs than any other indentation,
+    // we assume that the document was written with tab indentation
+    // in mind. This differs from the original algorithm.
+    return '\t';
+  }
+
+  if (!mostFrequentDelta) {
+    return null;
+  }
+
+  return ' '.repeat(mostFrequentDelta);
+};
+
+/**
+ * Heuristic to check whether a given text was likely minified. Intended to
+ * be used for HTML, CSS, and JavaScript inputs.
+ *
+ * A text is considered to be the result of minification if the average
+ * line length for the whole text is 80 characters or more.
+ *
+ * @param text The input text to check.
+ * @returns `true` if the heuristic considers `text` to be minified.
+ */
+export const isMinified = function(text: string): boolean {
+  let lineCount = 0;
+  for (let lastIndex = 0; lastIndex < text.length; ++lineCount) {
+    let eolIndex = text.indexOf('\n', lastIndex);
+    if (eolIndex < 0) {
+      eolIndex = text.length;
+    }
+    lastIndex = eolIndex + 1;
+  }
+  return (text.length - lineCount) / lineCount >= 80;
+};
+
+/**
+ * Small wrapper around {@link performSearchInContent} to reduce boilerplate when searching
+ * in {@link ContentDataOrError}.
+ *
+ * @returns empty search matches if `contentData` is an error or not text content.
+ */
+export const performSearchInContentData = function(
+    contentData: ContentDataOrError, query: string, caseSensitive: boolean, isRegex: boolean): SearchMatch[] {
+  if (ContentData.isError(contentData) || !contentData.isTextContent) {
+    return [];
+  }
+  return performSearchInContent(contentData.textObj, query, caseSensitive, isRegex);
+};
+
+/**
+ * @returns One {@link SearchMatch} per match. Multiple matches on the same line each
+ * result in their own `SearchMatchExact` instance.
+ */
+export const performSearchInContent = function(
+    text: Text, query: string, caseSensitive: boolean, isRegex: boolean): SearchMatch[] {
+  const regex = Platform.StringUtilities.createSearchRegex(query, caseSensitive, isRegex);
+
+  const result = [];
+  for (let i = 0; i < text.lineCount(); ++i) {
+    const lineContent = text.lineAt(i);
+    const matches = lineContent.matchAll(regex);
+    for (const match of matches) {
+      result.push(new SearchMatch(i, lineContent, match.index, match[0].length));
+    }
+  }
+  return result;
+};
+
+/**
+ * Similar to {@link performSearchInContent} but doesn't search in a whole text but rather
+ * finds the exact matches on a prelminiary search result (i.e. lines with known matches).
+ * @param matches is deliberatedly typed as an object literal so we can pass the
+ *                CDP search result type.
+ */
+export const performSearchInSearchMatches = function(
+    matches: Array<{lineNumber: number, lineContent: string}>, query: string, caseSensitive: boolean,
+    isRegex: boolean): SearchMatch[] {
+  const regex = Platform.StringUtilities.createSearchRegex(query, caseSensitive, isRegex);
+  const result = [];
+
+  for (const {lineNumber, lineContent} of matches) {
+    const matches = lineContent.matchAll(regex);
+    for (const match of matches) {
+      result.push(new SearchMatch(lineNumber, lineContent, match.index, match[0].length));
+    }
+  }
+  return result;
+};
+
+/**
+ * Finds the longest overlapping string segment between the end of the first
+ * string and the beginning of the second string.
+ *
+ * @param s1 The first string (whose suffix will be checked).
+ * @param s2 The second string (whose prefix will be checked).
+ * @returns The overlapping string segment, or an empty string ("")
+ * if no overlap is found.
+ */
+export const getOverlap = function(s1: string, s2: string): string|null {
+  const minLen = Math.min(s1.length, s2.length);
+  // Check from longest possible overlap down to 1
+  for (let n = minLen; n > 0; n--) {
+    // slice(-n) gets the last 'n' chars
+    const suffix = s1.slice(-n);
+    // substring(0, n) gets the first 'n' chars
+    const prefix = s2.substring(0, n);
+
+    if (suffix === prefix) {
+      return suffix;
+    }
+  }
+
+  return null;
+};
+
+export interface ParsedFilter {
+  key?: string;
+  text?: string|null;
+  regex?: RegExp;
+  negative: boolean;
+}

package/lib/front_end/models/text_utils/WasmDisassembly.ts

@@ -0,0 +1,87 @@
+// Copyright 2024 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 Platform from '../../core/platform/platform.js';
+
+import {ContentData} from './ContentData.js';
+import type {DeferredContent} from './ContentProvider.js';
+
+interface FunctionBodyOffset {
+  start: number;
+  end: number;
+}
+
+/**
+ * Metadata to map between bytecode #offsets and line numbers in the
+ * disassembly for WebAssembly modules.
+ */
+export class WasmDisassembly extends ContentData {
+  readonly lines: string[];
+  readonly #offsets: number[];
+  #functionBodyOffsets: FunctionBodyOffset[];
+
+  // Wasm can be potentially very large, so we calculate `text' lazily.
+  #cachedText?: string;
+
+  constructor(lines: string[], offsets: number[], functionBodyOffsets: FunctionBodyOffset[]) {
+    super('', /* isBase64 */ false, 'text/x-wast', 'utf-8');
+    if (lines.length !== offsets.length) {
+      throw new Error('Lines and offsets don\'t match');
+    }
+    this.lines = lines;
+    this.#offsets = offsets;
+    this.#functionBodyOffsets = functionBodyOffsets;
+  }
+
+  override get text(): string {
+    if (typeof this.#cachedText === 'undefined') {
+      this.#cachedText = this.lines.join('\n');
+    }
+    return this.#cachedText;
+  }
+
+  override get isEmpty(): boolean {
+    // Don't trigger unnecessary concatenating. Only check whether we have no lines, or a single empty line.
+    return this.lines.length === 0 || (this.lines.length === 1 && this.lines[0].length === 0);
+  }
+
+  get lineNumbers(): number {
+    return this.#offsets.length;
+  }
+
+  bytecodeOffsetToLineNumber(bytecodeOffset: number): number {
+    return Platform.ArrayUtilities.upperBound(
+               this.#offsets, bytecodeOffset, Platform.ArrayUtilities.DEFAULT_COMPARATOR) -
+        1;
+  }
+
+  lineNumberToBytecodeOffset(lineNumber: number): number {
+    return this.#offsets[lineNumber];
+  }
+
+  /**
+   * returns an iterable enumerating all the non-breakable line numbers in the disassembly
+   */
+  * nonBreakableLineNumbers(): Iterable<number> {
+    let lineNumber = 0;
+    let functionIndex = 0;
+    while (lineNumber < this.lineNumbers) {
+      if (functionIndex < this.#functionBodyOffsets.length) {
+        const offset = this.lineNumberToBytecodeOffset(lineNumber);
+        if (offset >= this.#functionBodyOffsets[functionIndex].start) {
+          lineNumber = this.bytecodeOffsetToLineNumber(this.#functionBodyOffsets[functionIndex++].end) + 1;
+          continue;
+        }
+      }
+      yield lineNumber++;
+    }
+  }
+
+  /**
+   * @deprecated Used during migration from `DeferredContent` to `ContentData`.
+   */
+  override asDeferedContent(): DeferredContent {
+    return {content: '', isEncoded: false, wasmDisassemblyInfo: this};
+  }
+}

package/lib/front_end/models/text_utils/text_utils.ts

@@ -0,0 +1,27 @@
+// Copyright 2019 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 CodeMirrorUtils from './CodeMirrorUtils.js';
+import * as ContentData from './ContentData.js';
+import * as ContentProvider from './ContentProvider.js';
+import * as StaticContentProvider from './StaticContentProvider.js';
+import * as StreamingContentData from './StreamingContentData.js';
+import * as Text from './Text.js';
+import * as TextCursor from './TextCursor.js';
+import * as TextRange from './TextRange.js';
+import * as TextUtils from './TextUtils.js';
+import * as WasmDisassembly from './WasmDisassembly.js';
+
+export {
+  CodeMirrorUtils,
+  ContentData,
+  ContentProvider,
+  StaticContentProvider,
+  StreamingContentData,
+  Text,
+  TextCursor,
+  TextRange,
+  TextUtils,
+  WasmDisassembly,
+};

package/lib/front_end/models/trace/EntityMapper.ts

@@ -0,0 +1,141 @@
+// Copyright 2024 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 Platform from '../../core/platform/platform.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import * as Handlers from './handlers/handlers.js';
+import * as Helpers from './helpers/helpers.js';
+import type {ParsedTrace} from './ModelImpl.js';
+import type * as Types from './types/types.js';
+
+export class EntityMapper {
+  #parsedTrace: ParsedTrace;
+  #entityMappings: Handlers.Helpers.EntityMappings;
+  #firstPartyEntity: Handlers.Helpers.Entity|null;
+  #thirdPartyEvents: Types.Events.Event[] = [];
+  /**
+   * When resolving urls and updating our entity mapping in the
+   * SourceMapsResolver, a single call frame can appear multiple times
+   * as different cpu profile nodes. To avoid duplicate work on the
+   * same CallFrame, we can keep track of them.
+   */
+  #resolvedCallFrames = new Set<Protocol.Runtime.CallFrame>();
+
+  constructor(parsedTrace: ParsedTrace) {
+    this.#parsedTrace = parsedTrace;
+    this.#entityMappings = this.#parsedTrace.data.Renderer.entityMappings;
+    this.#firstPartyEntity = this.#findFirstPartyEntity();
+    this.#thirdPartyEvents = this.#getThirdPartyEvents();
+  }
+
+  #findFirstPartyEntity(): Handlers.Helpers.Entity|null {
+    // As a starting point, we consider the first navigation as the 1P.
+    const nav =
+        Array.from(this.#parsedTrace.data.Meta.navigationsByNavigationId.values()).sort((a, b) => a.ts - b.ts)[0];
+    const firstPartyUrl = nav?.args.data?.documentLoaderURL ?? this.#parsedTrace.data.Meta.mainFrameURL;
+    if (!firstPartyUrl) {
+      return null;
+    }
+    return Handlers.Helpers.getEntityForUrl(firstPartyUrl, this.#entityMappings) ?? null;
+  }
+
+  #getThirdPartyEvents(): Types.Events.Event[] {
+    const entries = Array.from(this.#entityMappings.eventsByEntity.entries());
+    const thirdPartyEvents = entries.flatMap(([entity, events]) => {
+      return entity !== this.#firstPartyEntity ? events : [];
+    });
+    return thirdPartyEvents;
+  }
+
+  /**
+   * Returns an entity for a given event if any.
+   */
+  entityForEvent(event: Types.Events.Event): Handlers.Helpers.Entity|null {
+    return this.#entityMappings.entityByEvent.get(event) ?? null;
+  }
+
+  /**
+   * Returns trace events that correspond with a given entity if any.
+   */
+  eventsForEntity(entity: Handlers.Helpers.Entity): Types.Events.Event[] {
+    return this.#entityMappings.eventsByEntity.get(entity) ?? [];
+  }
+
+  firstPartyEntity(): Handlers.Helpers.Entity|null {
+    return this.#firstPartyEntity;
+  }
+
+  thirdPartyEvents(): Types.Events.Event[] {
+    return this.#thirdPartyEvents;
+  }
+
+  mappings(): Handlers.Helpers.EntityMappings {
+    return this.#entityMappings;
+  }
+
+  /**
+   * This updates entity mapping given a callFrame and sourceURL (newly resolved),
+   * updating both eventsByEntity and entityByEvent. The call frame provides us the
+   * URL and sourcemap source location that events map to. This describes the exact events we
+   * want to update. We then update the events with the new sourceURL.
+   *
+   * compiledURLs -> the actual file's url (e.g. my-big-bundle.min.js)
+   * sourceURLs -> the resolved urls (e.g. react.development.js, my-app.ts)
+   * @param callFrame
+   * @param sourceURL
+   */
+  updateSourceMapEntities(callFrame: Protocol.Runtime.CallFrame, sourceURL: string): void {
+    // Avoid the extra work, if we have already resolved this callFrame.
+    if (this.#resolvedCallFrames.has(callFrame)) {
+      return;
+    }
+
+    const compiledURL = callFrame.url;
+    const currentEntity = Handlers.Helpers.getEntityForUrl(compiledURL, this.#entityMappings);
+    const resolvedEntity = Handlers.Helpers.getEntityForUrl(sourceURL, this.#entityMappings);
+    // If the entity changed, then we should update our caches. If we don't have a currentEntity,
+    // we can't do much with that. Additionally without our current entity, we don't have a reference to the related
+    // events so there are no relationships to be made.
+    if ((resolvedEntity === currentEntity) || (!currentEntity || !resolvedEntity)) {
+      return;
+    }
+    const currentEntityEvents = (currentEntity && this.#entityMappings.eventsByEntity.get(currentEntity)) ?? [];
+    // The events of the entity that match said source location.
+    const sourceLocationEvents: Types.Events.Event[] = [];
+    // The events that don't match the source location, but that we should keep mapped to its current entity.
+    const unrelatedEvents: Types.Events.Event[] = [];
+    currentEntityEvents?.forEach(e => {
+      const cf = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(e);
+
+      const matchesCallFrame = cf && Helpers.Trace.isMatchingCallFrame(cf, callFrame);
+      if (matchesCallFrame) {
+        sourceLocationEvents.push(e);
+      } else {
+        unrelatedEvents.push(e);
+      }
+    });
+    // Update current entity.
+    this.#entityMappings.eventsByEntity.set(currentEntity, unrelatedEvents);
+    // Map the source location events to the new entity.
+    this.#entityMappings.eventsByEntity.set(resolvedEntity, sourceLocationEvents);
+    sourceLocationEvents.forEach(e => {
+      this.#entityMappings.entityByEvent.set(e, resolvedEntity);
+    });
+    // Update our CallFrame cache when we've got a resolved entity.
+    this.#resolvedCallFrames.add(callFrame);
+  }
+
+  // Update entities with proper Chrome Extension names.
+  updateExtensionEntitiesWithName(executionContextNamesByOrigin: Map<Platform.DevToolsPath.UrlString, string>): void {
+    const entities = Array.from(this.#entityMappings.eventsByEntity.keys());
+    for (const [origin, name] of executionContextNamesByOrigin) {
+      // In makeUpChromeExtensionEntity, the extension origin is set as the only domain for the entity.
+      const entity = entities.find(e => e.domains[0] === origin);
+      if (entity) {
+        entity.name = entity.company = name;
+      }
+    }
+  }
+}