devtools-tracing 1.0.1 → 1.1.0

package/lib/front_end/third_party/source-map-scopes-codec/package/src/scopes.d.ts

@@ -0,0 +1,184 @@
+// Copyright 2025 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.
+
+/**
+ * The decoded scopes information found in a source map.
+ */
+export interface ScopeInfo {
+  /**
+   * The length of {@linkcode scopes} must match the length of "sources" in the source map JSON. Each entry describes the scope tree of the corresponding source file.
+   */
+  scopes: (OriginalScope | null)[];
+
+  /**
+   * The range tree of the generated bundle. Multiple top-level ranges are allowed but must not overlap source position wise.
+   */
+  ranges: GeneratedRange[];
+}
+
+/**
+ * A scope in the authored source.
+ */
+export interface OriginalScope {
+  /** The beginning of this scope (inclusive). */
+  start: Position;
+
+  /** The end of this scope (exclusive) */
+  end: Position;
+
+  /**
+   * The name of this scope. For function scopes this is the function name.
+   *
+   * Constructors may put the class name here.
+   */
+  name?: string;
+
+  /**
+   * JavaScript-like languages are encouraged to use 'Global', 'Class', 'Function' and 'Block'.
+   *
+   * The "kind" is only used in debuggers as a label for scope UI views, but does not have any
+   * semantic significance.
+   */
+  kind?: string;
+
+  /**
+   * Whether this scope is something that can be called and results in stack frame (e.g. functions, methods, etc.).
+   */
+  isStackFrame: boolean;
+
+  /**
+   * All variable names that this scope declares.
+   */
+  variables: string[];
+
+  /**
+   * The child scopes. When manually building scopes, {@linkcode children} must be sorted, not
+   * overlap each other and be contained within [start, end).
+   */
+  children: OriginalScope[];
+
+  /** The parent scope or `undefined` for top-level scopes. */
+  parent?: OriginalScope;
+}
+
+/**
+ * A range (can be a scope) in the generated JavaScript/WASM.
+ *
+ * The name "range" was chosen deliberately as a GeneratedRange does not necessarily
+ * correspond to a lexical JavaScript scope. E.g. inlining, or concatenating multiple
+ * bundles can result in generated ranges that are not lexical scopes.
+ */
+export interface GeneratedRange {
+  /** The beginning of this range (inclusive) */
+  start: Position;
+
+  /** The end of this range (exclusive) */
+  end: Position;
+
+  /**
+   * The corresponding scope in the authored source.
+   */
+  originalScope?: OriginalScope;
+
+  /**
+   * Whether this generated range is an actual JavaScript/WASM function in the generated code.
+   */
+  isStackFrame: boolean;
+
+  /**
+   * Whether calls to this generated range should be hidden from stack traces even if
+   * this range has an `originalScope`.
+   */
+  isHidden: boolean;
+
+  /**
+   * If this `GeneratedRange` is the result of inlining `originalScope`, then `callSite`
+   * refers to where `originalScope` was called in the original ("authored") code.
+   *
+   * If this field is present than `originalScope` is present as well and `isStackFrame` is `false`.
+   */
+  callSite?: OriginalPosition;
+
+  /**
+   * Expressions that compute the values of the variables of this OriginalScope. The length
+   * of `values` matches the length of `originalScope.variables`.
+   */
+  values: Binding[];
+
+  /**
+   * The child ranges. When manually building ranges, {@linkcode children} must be sorted,
+   * not overlap each other and be contained within [start, end).
+   */
+  children: GeneratedRange[];
+
+  /** The parent range or `undefined` for top-level ranges. */
+  parent?: GeneratedRange;
+}
+
+/**
+ * For each variable, this can either be:
+ *
+ *   1) A single expression (valid for a full `GeneratedRange`).
+ *
+ *   2) `null` if this variable is unavailable in the whole range. This can
+ *      happen e.g. when the variable was optimized out and can't be recomputed.
+ *
+ *   3) A list of `SubRangeBinding`s. Used when computing the value requires different
+ *      expressions throughout the `GeneratedRange` or if the variable is unavailable in
+ *      parts of the `GeneratedRange`.
+ *
+ *      Note: The decoder produces `SubRangeBindings` where the "from" of the first `SubRangeBinding`
+ *      and the "to" of the last `SubRangeBinding` are equal to the `GeneratedRange`s "start" and "end"
+ *      position respectively.
+ */
+export type Binding = string | null | SubRangeBinding[];
+
+export interface SubRangeBinding {
+  value?: string;
+  from: Position;
+  to: Position;
+}
+
+/**
+ * A position with 0-based line and column numbers.
+ *
+ * A {@linkcode Position} object by itself does not imply a position in original source
+ * or generated code. It is used in both and normally it is clear from context.
+ */
+export interface Position {
+  line: number;
+  column: number;
+}
+
+/**
+ * A position with 0-based line and column numbers in a specific original source file.
+ */
+export interface OriginalPosition extends Position {
+  /** The 0-based index into "sources" in the source map. Or into {@linkcode ScopeInfo.scopes}. */
+  sourceIndex: number;
+}
+
+/**
+ * A standard source map, or index source map as per https://tc39.es/ecma426.
+ */
+export type SourceMap = SourceMapJson | IndexSourceMapJson;
+
+/**
+ * A standard index source map json object as per https://tc39.es/ecma426.
+ */
+export interface IndexSourceMapJson {
+  version: 3;
+  sections: Array<{ offset: Position; map: SourceMapJson }>;
+}
+
+/**
+ * A standard source map json object as per https://tc39.es/ecma426.
+ */
+export interface SourceMapJson {
+  version: 3;
+  sources: (string | null)[];
+  mappings: string;
+  names?: string[];
+  scopes?: string;
+}

package/lib/front_end/third_party/source-map-scopes-codec/package/src/util.js

@@ -0,0 +1,9 @@
+// Copyright 2025 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.
+/**
+ * @returns A negative number iff `a` precedes `b`, 0 iff `a` and `b` are equal and a positive number iff `b` precedes `a`.
+ */ export function comparePositions(a, b) {
+  return a.line - b.line || a.column - b.column;
+}
+//# sourceMappingURL=util.js.map

package/lib/front_end/third_party/source-map-scopes-codec/package/src/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["./util.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAI7B;;CAEC,GACD,OAAO,SAAS,iBAAiB,CAAW,EAAE,CAAW;EACvD,OAAO,EAAE,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE,MAAM,GAAG,EAAE,MAAM;AAC/C"}

package/lib/front_end/third_party/source-map-scopes-codec/package/src/util.ts

@@ -0,0 +1,12 @@
+// Copyright 2025 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 type { Position } from "./scopes.d.ts";
+
+/**
+ * @returns A negative number iff `a` precedes `b`, 0 iff `a` and `b` are equal and a positive number iff `b` precedes `a`.
+ */
+export function comparePositions(a: Position, b: Position): number {
+  return a.line - b.line || a.column - b.column;
+}

package/lib/front_end/third_party/source-map-scopes-codec/package/src/vlq.js

@@ -0,0 +1,82 @@
+// Copyright 2025 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.
+/**
+ * @fileoverview
+ *
+ * VLQ implementation taken mostly verbatim from Chrome DevTools itself.
+ */ const BASE64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+const BASE64_CODES = new Uint8Array(123);
+for(let index = 0; index < BASE64_CHARS.length; ++index){
+  BASE64_CODES[BASE64_CHARS.charCodeAt(index)] = index;
+}
+const VLQ_BASE_SHIFT = 5;
+const VLQ_BASE_MASK = (1 << 5) - 1;
+const VLQ_CONTINUATION_MASK = 1 << 5;
+export function encodeSigned(n) {
+  // Set the sign bit as the least significant bit.
+  n = n >= 0 ? 2 * n : 1 - 2 * n;
+  return encodeUnsigned(n);
+}
+export function encodeUnsigned(n) {
+  // Encode into a base64 run.
+  let result = "";
+  while(true){
+    // Extract the lowest 5 bits and remove them from the number.
+    const digit = n & 0x1f;
+    n >>>= 5;
+    // Is there anything more left to encode?
+    if (n === 0) {
+      // We are done encoding, finish the run.
+      result += BASE64_CHARS[digit];
+      break;
+    } else {
+      // There is still more encode, so add the digit and the continuation bit.
+      result += BASE64_CHARS[0x20 + digit];
+    }
+  }
+  return result;
+}
+export class TokenIterator {
+  #string;
+  #position;
+  constructor(string){
+    this.#string = string;
+    this.#position = 0;
+  }
+  nextChar() {
+    return this.#string.charAt(this.#position++);
+  }
+  /** Returns the unicode value of the next character and advances the iterator  */ nextCharCode() {
+    return this.#string.charCodeAt(this.#position++);
+  }
+  peek() {
+    return this.#string.charAt(this.#position);
+  }
+  hasNext() {
+    return this.#position < this.#string.length;
+  }
+  nextSignedVLQ() {
+    let result = this.nextUnsignedVLQ();
+    // Fix the sign.
+    const negative = result & 1;
+    result >>>= 1;
+    return negative ? -result : result;
+  }
+  nextUnsignedVLQ() {
+    let result = 0;
+    let shift = 0;
+    let digit = 0;
+    do {
+      const charCode = this.nextCharCode();
+      digit = BASE64_CODES[charCode];
+      result += (digit & VLQ_BASE_MASK) << shift;
+      shift += VLQ_BASE_SHIFT;
+    }while (digit & VLQ_CONTINUATION_MASK)
+    return result;
+  }
+  currentChar() {
+    return this.#string.charAt(this.#position - 1);
+  }
+}
+//# sourceMappingURL=vlq.js.map

package/lib/front_end/third_party/source-map-scopes-codec/package/src/vlq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vlq.js","sources":["./vlq.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAE7B;;;;CAIC,GAED,MAAM,eACJ;AACF,MAAM,eAAe,IAAI,WAAW;AACpC,IAAK,IAAI,QAAQ,GAAG,QAAQ,aAAa,MAAM,EAAE,EAAE,MAAO;EACxD,YAAY,CAAC,aAAa,UAAU,CAAC,OAAO,GAAG;AACjD;AAEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB,CAAC,KAAK,CAAC,IAAI;AACjC,MAAM,wBAAwB,KAAK;AAEnC,OAAO,SAAS,aAAa,CAAS;EACpC,iDAAiD;EACjD,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI;EAC7B,OAAO,eAAe;AACxB;AAEA,OAAO,SAAS,eAAe,CAAS;EACtC,4BAA4B;EAC5B,IAAI,SAAS;EACb,MAAO,KAAM;IACX,6DAA6D;IAC7D,MAAM,QAAQ,IAAI;IAClB,OAAO;IACP,yCAAyC;IACzC,IAAI,MAAM,GAAG;MACX,wCAAwC;MACxC,UAAU,YAAY,CAAC,MAAM;MAC7B;IACF,OAAO;MACL,yEAAyE;MACzE,UAAU,YAAY,CAAC,OAAO,MAAM;IACtC;EACF;EACA,OAAO;AACT;AAEA,OAAO,MAAM;EACF,CAAA,MAAO,CAAS;EACzB,CAAA,QAAS,CAAS;EAElB,YAAY,MAAc,CAAE;IAC1B,IAAI,CAAC,CAAA,MAAO,GAAG;IACf,IAAI,CAAC,CAAA,QAAS,GAAG;EACnB;EAEA,WAAmB;IACjB,OAAO,IAAI,CAAC,CAAA,MAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,QAAS;EAC3C;EAEA,+EAA+E,GAC/E,eAAuB;IACrB,OAAO,IAAI,CAAC,CAAA,MAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA,QAAS;EAC/C;EAEA,OAAe;IACb,OAAO,IAAI,CAAC,CAAA,MAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,QAAS;EAC3C;EAEA,UAAmB;IACjB,OAAO,IAAI,CAAC,CAAA,QAAS,GAAG,IAAI,CAAC,CAAA,MAAO,CAAC,MAAM;EAC7C;EAEA,gBAAwB;IACtB,IAAI,SAAS,IAAI,CAAC,eAAe;IAEjC,gBAAgB;IAChB,MAAM,WAAW,SAAS;IAC1B,YAAY;IACZ,OAAO,WAAW,CAAC,SAAS;EAC9B;EAEA,kBAA0B;IACxB,IAAI,SAAS;IACb,IAAI,QAAQ;IACZ,IAAI,QAAQ;IACZ,GAAG;MACD,MAAM,WAAW,IAAI,CAAC,YAAY;MAClC,QAAQ,YAAY,CAAC,SAAS;MAC9B,UAAU,CAAC,QAAQ,aAAa,KAAK;MACrC,SAAS;IACX,QAAS,QAAQ,sBAAuB;IACxC,OAAO;EACT;EAEA,cAAsB;IACpB,OAAO,IAAI,CAAC,CAAA,MAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,QAAS,GAAG;EAC9C;AACF"}

package/lib/front_end/third_party/source-map-scopes-codec/package/src/vlq.ts

@@ -0,0 +1,99 @@
+// Copyright 2025 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.
+
+/**
+ * @fileoverview
+ *
+ * VLQ implementation taken mostly verbatim from Chrome DevTools itself.
+ */
+
+const BASE64_CHARS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+const BASE64_CODES = new Uint8Array(123);
+for (let index = 0; index < BASE64_CHARS.length; ++index) {
+  BASE64_CODES[BASE64_CHARS.charCodeAt(index)] = index;
+}
+
+const VLQ_BASE_SHIFT = 5;
+const VLQ_BASE_MASK = (1 << 5) - 1;
+const VLQ_CONTINUATION_MASK = 1 << 5;
+
+export function encodeSigned(n: number): string {
+  // Set the sign bit as the least significant bit.
+  n = n >= 0 ? 2 * n : 1 - 2 * n;
+  return encodeUnsigned(n);
+}
+
+export function encodeUnsigned(n: number): string {
+  // Encode into a base64 run.
+  let result = "";
+  while (true) {
+    // Extract the lowest 5 bits and remove them from the number.
+    const digit = n & 0x1f;
+    n >>>= 5;
+    // Is there anything more left to encode?
+    if (n === 0) {
+      // We are done encoding, finish the run.
+      result += BASE64_CHARS[digit];
+      break;
+    } else {
+      // There is still more encode, so add the digit and the continuation bit.
+      result += BASE64_CHARS[0x20 + digit];
+    }
+  }
+  return result;
+}
+
+export class TokenIterator {
+  readonly #string: string;
+  #position: number;
+
+  constructor(string: string) {
+    this.#string = string;
+    this.#position = 0;
+  }
+
+  nextChar(): string {
+    return this.#string.charAt(this.#position++);
+  }
+
+  /** Returns the unicode value of the next character and advances the iterator  */
+  nextCharCode(): number {
+    return this.#string.charCodeAt(this.#position++);
+  }
+
+  peek(): string {
+    return this.#string.charAt(this.#position);
+  }
+
+  hasNext(): boolean {
+    return this.#position < this.#string.length;
+  }
+
+  nextSignedVLQ(): number {
+    let result = this.nextUnsignedVLQ();
+
+    // Fix the sign.
+    const negative = result & 1;
+    result >>>= 1;
+    return negative ? -result : result;
+  }
+
+  nextUnsignedVLQ(): number {
+    let result = 0;
+    let shift = 0;
+    let digit = 0;
+    do {
+      const charCode = this.nextCharCode();
+      digit = BASE64_CODES[charCode];
+      result += (digit & VLQ_BASE_MASK) << shift;
+      shift += VLQ_BASE_SHIFT;
+    } while (digit & VLQ_CONTINUATION_MASK);
+    return result;
+  }
+
+  currentChar(): string {
+    return this.#string.charAt(this.#position - 1);
+  }
+}

package/lib/front_end/third_party/source-map-scopes-codec/source-map-scopes-codec.ts

@@ -0,0 +1,5 @@
+// Copyright 2025 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.
+
+export * from './package/src/mod.js';

package/lib/front_end/ui/legacy/theme_support/ThemeSupport.ts

@@ -0,0 +1,222 @@
+// 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.
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import * as Common from '../../../core/common/common.js';
+import * as Host from '../../../core/host/host.js';
+import * as Root from '../../../core/root/root.js';
+
+let themeSupportInstance: ThemeSupport;
+
+const themeValueByTargetByName = new Map<Element|null, Map<string, string>>();
+
+export class ThemeSupport extends EventTarget {
+  #themeName = 'default';
+  private computedStyleOfHTML = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
+
+  readonly #documentsToTheme = new Set<Document>([document]);
+
+  readonly #darkThemeMediaQuery: MediaQueryList;
+  readonly #highContrastMediaQuery: MediaQueryList;
+  readonly #onThemeChangeListener = (): void => this.#applyTheme();
+  readonly #onHostThemeChangeListener = (): void => this.fetchColorsAndApplyHostTheme();
+
+  private constructor(private setting: Common.Settings.Setting<string>) {
+    super();
+
+    // When the theme changes we instantiate a new theme support and reapply.
+    // Equally if the user has set to match the system and the OS preference changes
+    // we perform the same change.
+    this.#darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.#highContrastMediaQuery = window.matchMedia('(forced-colors: active)');
+    this.#darkThemeMediaQuery.addEventListener('change', this.#onThemeChangeListener);
+    this.#highContrastMediaQuery.addEventListener('change', this.#onThemeChangeListener);
+    setting.addChangeListener(this.#onThemeChangeListener);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+        Host.InspectorFrontendHostAPI.Events.ColorThemeChanged, this.#onHostThemeChangeListener);
+  }
+
+  #dispose(): void {
+    this.#darkThemeMediaQuery.removeEventListener('change', this.#onThemeChangeListener);
+    this.#highContrastMediaQuery.removeEventListener('change', this.#onThemeChangeListener);
+    this.setting.removeChangeListener(this.#onThemeChangeListener);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+        Host.InspectorFrontendHostAPI.Events.ColorThemeChanged, this.#onHostThemeChangeListener);
+  }
+
+  static hasInstance(): boolean {
+    return typeof themeSupportInstance !== 'undefined';
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+    setting: Common.Settings.Setting<string>|null,
+  } = {forceNew: null, setting: null}): ThemeSupport {
+    const {forceNew, setting} = opts;
+    if (!themeSupportInstance || forceNew) {
+      if (!setting) {
+        throw new Error(`Unable to create theme support: setting must be provided: ${new Error().stack}`);
+      }
+
+      if (themeSupportInstance) {
+        themeSupportInstance.#dispose();
+      }
+      themeSupportInstance = new ThemeSupport(setting);
+    }
+
+    return themeSupportInstance;
+  }
+
+  /**
+   * Adds additional `Document` instances that should be themed besides the default
+   * `window.document` in which this ThemeSupport instance was created.
+   */
+  addDocumentToTheme(document: Document): void {
+    this.#documentsToTheme.add(document);
+    this.#fetchColorsAndApplyHostTheme(document);
+  }
+
+  getComputedValue(propertyName: string, target: Element|null = null): string {
+    // Since we might query the same property name from various targets we need to support
+    // per-target caching of computed values. Here we attempt to locate the particular computed
+    // value cache for the target element. If no target was specified we use the default computed root,
+    // which belongs to the documentElement.
+    let themeValueByName = themeValueByTargetByName.get(target);
+    if (!themeValueByName) {
+      themeValueByName = new Map<string, string>();
+      themeValueByTargetByName.set(target, themeValueByName);
+    }
+
+    // Since theme changes trigger a reload, we can avoid repeatedly looking up color values
+    // dynamically. Instead we can look up the first time and cache them for future use,
+    // knowing that the cache will be invalidated by virtue of a reload when the theme changes.
+    let themeValue = themeValueByName.get(propertyName);
+    if (!themeValue) {
+      const styleDeclaration = target ? window.getComputedStyle(target) : this.computedStyleOfHTML();
+      if (typeof styleDeclaration === 'symbol') {
+        throw new Error(`Computed value for property (${propertyName}) could not be found on documentElement.`);
+      }
+      themeValue = styleDeclaration.getPropertyValue(propertyName).trim();
+
+      // If we receive back an empty value (nothing has been set) we don't store it for the future.
+      // This means that subsequent requests will continue to query the styles in case the value
+      // has been set.
+      if (themeValue) {
+        themeValueByName.set(propertyName, themeValue);
+      }
+    }
+
+    return themeValue;
+  }
+
+  themeName(): string {
+    return this.#themeName;
+  }
+
+  #applyTheme(): void {
+    for (const document of this.#documentsToTheme) {
+      this.#applyThemeToDocument(document);
+    }
+  }
+
+  #applyThemeToDocument(document: Document): void {
+    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
+    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+
+    const useSystemPreferred = this.setting.get() === 'systemPreferred' || isForcedColorsMode;
+    this.#themeName = useSystemPreferred ? systemPreferredTheme : this.setting.get();
+    document.documentElement.classList.toggle('theme-with-dark-background', this.#themeName === 'dark');
+
+    const useChromeTheme = Common.Settings.moduleSetting('chrome-theme-colors').get();
+    const isIncognito = Root.Runtime.hostConfig.isOffTheRecord === true;
+    // Baseline is the name of Chrome's default color theme and there are two of these: default and grayscale.
+    // The collective name for the rest of the color themes is dynamic.
+    // In the baseline themes Chrome uses custom values for surface colors, whereas for dynamic themes these are color-mixed.
+    // To match Chrome we need to know if any of the baseline themes is currently active and assign specific values to surface colors.
+    if (isIncognito) {
+      document.documentElement.classList.toggle('baseline-grayscale', true);
+    } else if (useChromeTheme) {
+      const selectedTheme = getComputedStyle(document.body).getPropertyValue('--user-color-source');
+      document.documentElement.classList.toggle('baseline-default', selectedTheme === 'baseline-default');
+      document.documentElement.classList.toggle('baseline-grayscale', selectedTheme === 'baseline-grayscale');
+    } else {
+      document.documentElement.classList.toggle('baseline-grayscale', true);
+    }
+
+    // In the event the theme changes we need to clear caches and notify subscribers.
+    themeValueByTargetByName.clear();
+    this.dispatchEvent(new ThemeChangeEvent());
+  }
+
+  static clearThemeCache(): void {
+    themeValueByTargetByName.clear();
+  }
+
+  fetchColorsAndApplyHostTheme(): void {
+    for (const document of this.#documentsToTheme) {
+      this.#fetchColorsAndApplyHostTheme(document);
+    }
+  }
+
+  #fetchColorsAndApplyHostTheme(document: Document): void {
+    const useChromeTheme = Common.Settings.moduleSetting('chrome-theme-colors').get();
+    if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode() || !useChromeTheme) {
+      this.#applyThemeToDocument(document);
+      return;
+    }
+
+    const oldColorsCssLink = document.querySelector('link[href*=\'//theme/colors.css\']');
+    const newColorsCssLink = document.createElement('link');
+    newColorsCssLink.setAttribute(
+        'href', `devtools://theme/colors.css?sets=ui,chrome&version=${(new Date()).getTime().toString()}`);
+    newColorsCssLink.setAttribute('rel', 'stylesheet');
+    newColorsCssLink.setAttribute('type', 'text/css');
+    newColorsCssLink.onload = () => {
+      if (oldColorsCssLink) {
+        oldColorsCssLink.remove();
+      }
+      this.#applyThemeToDocument(document);
+    };
+    document.body.appendChild(newColorsCssLink);
+  }
+}
+
+export class ThemeChangeEvent extends Event {
+  static readonly eventName = 'themechange';
+
+  constructor() {
+    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
+  }
+}

package/lib/front_end/ui/legacy/theme_support/theme_support.ts

@@ -0,0 +1,5 @@
+// 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.
+
+export * from './ThemeSupport.js';

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "devtools-tracing",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Utilities for working with trace files",
   "main": "index.js",
   "scripts": {
     "start": "tsx index.ts",
     "postinstall": "patch-package",
     "generate": "tsx generate.ts",
-    "example:inp": "tsx examples/inp.ts"
+    "example:inp": "tsx examples/inp.ts",
+    "example:stats": "tsx examples/stats.ts"
   },
   "author": "Samuel Maddock <sam@samuelmaddock.com>",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/samuelmaddock/devtools-tracing.git"
   },
-  "license": "ISC",
+  "license": "BSD-3-Clause",
   "devDependencies": {
     "@typescript-eslint/typescript-estree": "^8.46.2",
     "chrome-devtools-frontend": "^1.0.1533544",