devtools-tracing 1.0.0

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

@@ -0,0 +1,257 @@
+// 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 Common from '../common/common.js';
+
+import type {HeapProfilerModel} from './HeapProfilerModel.js';
+import {RuntimeModel} from './RuntimeModel.js';
+import {type SDKModelObserver, TargetManager} from './TargetManager.js';
+
+let isolateManagerInstance: IsolateManager;
+
+export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
+    SDKModelObserver<RuntimeModel> {
+  readonly #isolates = new Map<string, Isolate>();
+  /**
+   * Contains null while the isolateId is being retrieved.
+   */
+  #isolateIdByModel = new Map<RuntimeModel, string|null>();
+  #observers = new Set<Observer>();
+  #pollId = 0;
+
+  constructor() {
+    super();
+
+    TargetManager.instance().observeModels(RuntimeModel, this);
+  }
+
+  static instance({forceNew}: {
+    forceNew: boolean,
+  } = {forceNew: false}): IsolateManager {
+    if (!isolateManagerInstance || forceNew) {
+      isolateManagerInstance = new IsolateManager();
+    }
+
+    return isolateManagerInstance;
+  }
+
+  observeIsolates(observer: Observer): void {
+    if (this.#observers.has(observer)) {
+      throw new Error('Observer can only be registered once');
+    }
+    if (!this.#observers.size) {
+      void this.poll();
+    }
+    this.#observers.add(observer);
+    for (const isolate of this.#isolates.values()) {
+      observer.isolateAdded(isolate);
+    }
+  }
+
+  modelAdded(model: RuntimeModel): void {
+    void this.#modelAdded(model);
+  }
+
+  async #modelAdded(model: RuntimeModel): Promise<void> {
+    this.#isolateIdByModel.set(model, null);
+    const isolateId = await model.isolateId();
+    if (!this.#isolateIdByModel.has(model)) {
+      // The model has been removed during await.
+      return;
+    }
+    if (!isolateId) {
+      this.#isolateIdByModel.delete(model);
+      return;
+    }
+    this.#isolateIdByModel.set(model, isolateId);
+    let isolate = this.#isolates.get(isolateId);
+    if (!isolate) {
+      isolate = new Isolate(isolateId);
+      this.#isolates.set(isolateId, isolate);
+    }
+    isolate.models().add(model);
+    if (isolate.models().size === 1) {
+      for (const observer of this.#observers) {
+        observer.isolateAdded(isolate);
+      }
+    } else {
+      for (const observer of this.#observers) {
+        observer.isolateChanged(isolate);
+      }
+    }
+  }
+
+  modelRemoved(model: RuntimeModel): void {
+    const isolateId = this.#isolateIdByModel.get(model);
+    this.#isolateIdByModel.delete(model);
+    if (!isolateId) {
+      return;
+    }
+    const isolate = this.#isolates.get(isolateId);
+    if (!isolate) {
+      return;
+    }
+    isolate.models().delete(model);
+    if (isolate.models().size) {
+      for (const observer of this.#observers) {
+        observer.isolateChanged(isolate);
+      }
+      return;
+    }
+    for (const observer of this.#observers) {
+      observer.isolateRemoved(isolate);
+    }
+    this.#isolates.delete(isolateId);
+  }
+
+  isolateByModel(model: RuntimeModel): Isolate|null {
+    return this.#isolates.get(this.#isolateIdByModel.get(model) || '') || null;
+  }
+
+  isolates(): Iterable<Isolate> {
+    return this.#isolates.values();
+  }
+
+  private async poll(): Promise<void> {
+    const pollId = this.#pollId;
+    while (pollId === this.#pollId) {
+      await Promise.all(Array.from(this.isolates(), isolate => isolate.update()));
+      await new Promise(r => window.setTimeout(r, PollIntervalMs));
+    }
+  }
+}
+
+export interface Observer {
+  isolateAdded(isolate: Isolate): void;
+
+  isolateRemoved(isolate: Isolate): void;
+  isolateChanged(isolate: Isolate): void;
+}
+
+export const enum Events {
+  MEMORY_CHANGED = 'MemoryChanged',
+}
+
+export interface EventTypes {
+  [Events.MEMORY_CHANGED]: Isolate;
+}
+
+export const MemoryTrendWindowMs = 120e3;
+const PollIntervalMs = 2e3;
+
+export class Isolate {
+  readonly #id: string;
+  readonly #models: Set<RuntimeModel>;
+  #usedHeapSize: number;
+  readonly #memoryTrend: MemoryTrend;
+
+  constructor(id: string) {
+    this.#id = id;
+    this.#models = new Set();
+    this.#usedHeapSize = 0;
+    const count = MemoryTrendWindowMs / PollIntervalMs;
+    this.#memoryTrend = new MemoryTrend(count);
+  }
+
+  id(): string {
+    return this.#id;
+  }
+
+  models(): Set<RuntimeModel> {
+    return this.#models;
+  }
+
+  runtimeModel(): RuntimeModel|null {
+    return this.#models.values().next().value || null;
+  }
+
+  heapProfilerModel(): HeapProfilerModel|null {
+    const runtimeModel = this.runtimeModel();
+    return runtimeModel?.heapProfilerModel() ?? null;
+  }
+
+  async update(): Promise<void> {
+    const model = this.runtimeModel();
+    const usage = model && await model.heapUsage();
+    if (!usage) {
+      return;
+    }
+    this.#usedHeapSize = usage.usedSize + (usage.embedderHeapUsedSize ?? 0) + (usage.backingStorageSize ?? 0);
+    this.#memoryTrend.add(this.#usedHeapSize);
+    IsolateManager.instance().dispatchEventToListeners(Events.MEMORY_CHANGED, this);
+  }
+
+  samplesCount(): number {
+    return this.#memoryTrend.count();
+  }
+
+  usedHeapSize(): number {
+    return this.#usedHeapSize;
+  }
+
+  /**
+   * bytes per millisecond
+   */
+  usedHeapSizeGrowRate(): number {
+    return this.#memoryTrend.fitSlope();
+  }
+}
+
+export class MemoryTrend {
+  #maxCount: number;
+  #base!: number;
+  #index!: number;
+  #x!: number[];
+  #y!: number[];
+  #sx!: number;
+  #sy!: number;
+  #sxx!: number;
+  #sxy!: number;
+  constructor(maxCount: number) {
+    this.#maxCount = maxCount | 0;
+    this.reset();
+  }
+
+  reset(): void {
+    this.#base = Date.now();
+    this.#index = 0;
+    this.#x = [];
+    this.#y = [];
+    this.#sx = 0;
+    this.#sy = 0;
+    this.#sxx = 0;
+    this.#sxy = 0;
+  }
+
+  count(): number {
+    return this.#x.length;
+  }
+
+  add(heapSize: number, timestamp?: number): void {
+    const x = typeof timestamp === 'number' ? timestamp : Date.now() - this.#base;
+    const y = heapSize;
+    if (this.#x.length === this.#maxCount) {
+      // Turns into a cyclic buffer once it reaches the |#maxCount|.
+      const x0 = this.#x[this.#index];
+      const y0 = this.#y[this.#index];
+      this.#sx -= x0;
+      this.#sy -= y0;
+      this.#sxx -= x0 * x0;
+      this.#sxy -= x0 * y0;
+    }
+    this.#sx += x;
+    this.#sy += y;
+    this.#sxx += x * x;
+    this.#sxy += x * y;
+    this.#x[this.#index] = x;
+    this.#y[this.#index] = y;
+    this.#index = (this.#index + 1) % this.#maxCount;
+  }
+
+  fitSlope(): number {
+    // We use the linear regression model to find the slope.
+    const n = this.count();
+    return n < 2 ? 0 : (this.#sxy - this.#sx * this.#sy / n) / (this.#sxx - this.#sx * this.#sx / n);
+  }
+}

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

@@ -0,0 +1,70 @@
+// 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 type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import {SDKModel} from './SDKModel.js';
+import {
+  Capability,
+  type Target,
+} from './Target.js';
+
+/**
+ * The `IssuesModel` is a thin dispatch that does not store issues, but only creates the representation
+ * class (usually derived from `Issue`) and passes the instances on via a dispatched event.
+ * We chose this approach here because the lifetime of the Model is tied to the target, but DevTools
+ * wants to preserve issues for targets (e.g. iframes) that are already gone as well.
+ */
+export class IssuesModel extends SDKModel<EventTypes> implements ProtocolProxyApi.AuditsDispatcher {
+  #disposed = false;
+  #enabled = false;
+
+  constructor(target: Target) {
+    super(target);
+    void this.ensureEnabled();
+  }
+
+  private async ensureEnabled(): Promise<void> {
+    if (this.#enabled) {
+      return;
+    }
+
+    this.#enabled = true;
+    this.target().registerAuditsDispatcher(this);
+    const auditsAgent = this.target().auditsAgent();
+    await auditsAgent.invoke_enable();
+  }
+
+  issueAdded(issueAddedEvent: Protocol.Audits.IssueAddedEvent): void {
+    this.dispatchEventToListeners(Events.ISSUE_ADDED, {issuesModel: this, inspectorIssue: issueAddedEvent.issue});
+  }
+
+  override dispose(): void {
+    super.dispose();
+    this.#disposed = true;
+  }
+
+  getTargetIfNotDisposed(): Target|null {
+    if (!this.#disposed) {
+      return this.target();
+    }
+    return null;
+  }
+}
+
+export const enum Events {
+  ISSUE_ADDED = 'IssueAdded',
+}
+
+export interface IssueAddedEvent {
+  issuesModel: IssuesModel;
+  inspectorIssue: Protocol.Audits.InspectorIssue;
+}
+
+export interface EventTypes {
+  [Events.ISSUE_ADDED]: IssueAddedEvent;
+}
+
+SDKModel.register(IssuesModel, {capabilities: Capability.AUDITS, autostart: true});

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

@@ -0,0 +1,169 @@
+// 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 {DOMModel, type DOMNode} from './DOMModel.js';
+import type {SnapshotWithRect} from './PaintProfiler.js';
+import type {Target} from './Target.js';
+
+export interface Layer {
+  id(): string;
+  parentId(): string|null;
+  parent(): Layer|null;
+  isRoot(): boolean;
+  children(): Layer[];
+  addChild(child: Layer): void;
+  node(): DOMNode|null;
+  nodeForSelfOrAncestor(): DOMNode|null;
+  offsetX(): number;
+  offsetY(): number;
+  width(): number;
+  height(): number;
+  transform(): number[]|null;
+  quad(): number[];
+  anchorPoint(): number[];
+  invisible(): boolean;
+  paintCount(): number;
+  lastPaintRect(): Protocol.DOM.Rect|null;
+  scrollRects(): Protocol.LayerTree.ScrollRect[];
+  stickyPositionConstraint(): StickyPositionConstraint|null;
+  gpuMemoryUsage(): number;
+  requestCompositingReasons(): Promise<string[]>;
+  requestCompositingReasonIds(): Promise<string[]>;
+  drawsContent(): boolean;
+  snapshots(): Array<Promise<SnapshotWithRect|null>>;
+}
+
+export namespace Layer {
+  export const enum ScrollRectType {
+    NON_FAST_SCROLLABLE = 'NonFastScrollable',
+    TOUCH_EVENT_HANDLER = 'TouchEventHandler',
+    WHEEL_EVENT_HANDLER = 'WheelEventHandler',
+    REPAINTS_ON_SCROLL = 'RepaintsOnScroll',
+    MAIN_THREAD_SCROLL_REASON = 'MainThreadScrollingReason',
+  }
+}
+
+export class StickyPositionConstraint {
+  readonly #stickyBoxRect: Protocol.DOM.Rect;
+  readonly #containingBlockRect: Protocol.DOM.Rect;
+  readonly #nearestLayerShiftingStickyBox: Layer|null;
+  readonly #nearestLayerShiftingContainingBlock: Layer|null;
+
+  constructor(layerTree: LayerTreeBase|null, constraint: Protocol.LayerTree.StickyPositionConstraint) {
+    this.#stickyBoxRect = constraint.stickyBoxRect;
+    this.#containingBlockRect = constraint.containingBlockRect;
+    this.#nearestLayerShiftingStickyBox = null;
+    if (layerTree && constraint.nearestLayerShiftingStickyBox) {
+      this.#nearestLayerShiftingStickyBox = layerTree.layerById(constraint.nearestLayerShiftingStickyBox);
+    }
+
+    this.#nearestLayerShiftingContainingBlock = null;
+    if (layerTree && constraint.nearestLayerShiftingContainingBlock) {
+      this.#nearestLayerShiftingContainingBlock = layerTree.layerById(constraint.nearestLayerShiftingContainingBlock);
+    }
+  }
+
+  stickyBoxRect(): Protocol.DOM.Rect {
+    return this.#stickyBoxRect;
+  }
+
+  containingBlockRect(): Protocol.DOM.Rect {
+    return this.#containingBlockRect;
+  }
+
+  nearestLayerShiftingStickyBox(): Layer|null {
+    return this.#nearestLayerShiftingStickyBox;
+  }
+
+  nearestLayerShiftingContainingBlock(): Layer|null {
+    return this.#nearestLayerShiftingContainingBlock;
+  }
+}
+
+export class LayerTreeBase {
+  readonly #target: Target|null;
+  #domModel: DOMModel|null;
+  layersById = new Map<string|number, Layer>();
+  #root: Layer|null = null;
+  #contentRoot: Layer|null = null;
+  readonly #backendNodeIdToNode = new Map<Protocol.DOM.BackendNodeId, DOMNode|null>();
+  #viewportSize?: {
+    width: number,
+    height: number,
+  };
+
+  constructor(target: Target|null) {
+    this.#target = target;
+    this.#domModel = target ? target.model(DOMModel) : null;
+  }
+
+  target(): Target|null {
+    return this.#target;
+  }
+
+  root(): Layer|null {
+    return this.#root;
+  }
+
+  setRoot(root: Layer|null): void {
+    this.#root = root;
+  }
+
+  contentRoot(): Layer|null {
+    return this.#contentRoot;
+  }
+
+  setContentRoot(contentRoot: Layer|null): void {
+    this.#contentRoot = contentRoot;
+  }
+
+  forEachLayer<T>(callback: (arg0: Layer) => T, root?: Layer|null): T|boolean {
+    if (!root) {
+      root = this.root();
+      if (!root) {
+        return false;
+      }
+    }
+    return callback(root) || root.children().some(this.forEachLayer.bind(this, callback));
+  }
+
+  layerById(id: string): Layer|null {
+    return this.layersById.get(id) || null;
+  }
+
+  async resolveBackendNodeIds(requestedNodeIds: Set<Protocol.DOM.BackendNodeId>): Promise<void> {
+    if (!requestedNodeIds.size || !this.#domModel) {
+      return;
+    }
+
+    const nodesMap = await this.#domModel.pushNodesByBackendIdsToFrontend(requestedNodeIds);
+
+    if (!nodesMap) {
+      return;
+    }
+    for (const nodeId of nodesMap.keys()) {
+      this.#backendNodeIdToNode.set(nodeId, nodesMap.get(nodeId) || null);
+    }
+  }
+
+  backendNodeIdToNode(): Map<Protocol.DOM.BackendNodeId, DOMNode|null> {
+    return this.#backendNodeIdToNode;
+  }
+
+  setViewportSize(viewportSize: {
+    width: number,
+    height: number,
+  }): void {
+    this.#viewportSize = viewportSize;
+  }
+
+  viewportSize(): {
+    width: number,
+    height: number,
+  }|undefined {
+    return this.#viewportSize;
+  }
+}

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

@@ -0,0 +1,56 @@
+// Copyright 2017 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 ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as Host from '../host/host.js';
+
+import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
+
+export class LogModel extends SDKModel<EventTypes> implements ProtocolProxyApi.LogDispatcher {
+  readonly #logAgent: ProtocolProxyApi.LogApi;
+  constructor(target: Target) {
+    super(target);
+    target.registerLogDispatcher(this);
+    this.#logAgent = target.logAgent();
+    void this.#logAgent.invoke_enable();
+    if (!Host.InspectorFrontendHost.isUnderTest()) {
+      void this.#logAgent.invoke_startViolationsReport({
+        config: [
+          {name: Protocol.Log.ViolationSettingName.LongTask, threshold: 200},
+          {name: Protocol.Log.ViolationSettingName.LongLayout, threshold: 30},
+          {name: Protocol.Log.ViolationSettingName.BlockedEvent, threshold: 100},
+          {name: Protocol.Log.ViolationSettingName.BlockedParser, threshold: -1},
+          {name: Protocol.Log.ViolationSettingName.Handler, threshold: 150},
+          {name: Protocol.Log.ViolationSettingName.RecurringHandler, threshold: 50},
+          {name: Protocol.Log.ViolationSettingName.DiscouragedAPIUse, threshold: -1},
+        ],
+      });
+    }
+  }
+
+  entryAdded({entry}: Protocol.Log.EntryAddedEvent): void {
+    this.dispatchEventToListeners(Events.ENTRY_ADDED, {logModel: this, entry});
+  }
+
+  requestClear(): void {
+    void this.#logAgent.invoke_clear();
+  }
+}
+
+export const enum Events {
+  ENTRY_ADDED = 'EntryAdded',
+}
+
+export interface EntryAddedEvent {
+  logModel: LogModel;
+  entry: Protocol.Log.LogEntry;
+}
+
+export interface EventTypes {
+  [Events.ENTRY_ADDED]: EntryAddedEvent;
+}
+
+SDKModel.register(LogModel, {capabilities: Capability.LOG, autostart: true});