chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/testing/TraceLoader.ts

@@ -1,344 +0,0 @@
-// Copyright 2023 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 * as Common from '../core/common/common.js';
-import * as SDK from '../core/sdk/sdk.js';
-import type * as Protocol from '../generated/protocol.js';
-import * as Trace from '../models/trace/trace.js';
-import * as Timeline from '../panels/timeline/timeline.js';
-import * as TraceBounds from '../services/trace_bounds/trace_bounds.js';
-
-// We maintain two caches:
-// 1. The file contents JSON.parsed for a given trace file.
-// 2. The trace engine models for a given file (used by the traceEngine function)
-// Both the file contents and the model data are not expected to change during
-// the lifetime of an instance of DevTools, so they are safe to cache and
-// re-use across tests to avoid extra time spent loading and parsing the same
-// inputs.
-// In the future once the data layer migration is complete, we can hopefully
-// simplify this into one method that loads the new engine and none of the old
-// ones.
-const fileContentsCache = new Map<string, Trace.Types.File.Contents>();
-
-// The new engine cache is a map of maps of:
-// trace file name => trace engine configuration => trace data
-//
-// The first map is a Map of string (which is the name of the trace file) to a
-// new map, where the key is the trace engine configuration stringified.
-// This ensures that we cache as much as we can, but if you load the same trace
-// file with different trace engine configurations, we will not use the cache
-// and will reparse. This is required as some of the settings and experiments
-// change if events are kept and dropped.
-const traceEngineCache = new Map<string, Map<string, {
-                                   parsedTrace: Trace.Handlers.Types.ParsedTrace,
-                                   insights: Trace.Insights.Types.TraceInsightSets | null,
-                                   metadata: Trace.Types.File.MetaData,
-                                   model: Trace.TraceModel.Model,
-                                 }>>();
-
-export interface TraceEngineLoaderOptions {
-  initTraceBounds: boolean;
-}
-
-/**
- * Loads trace files defined as fixtures in front_end/panels/timeline/fixtures/traces.
- *
- * Will automatically cache the results to save time processing the same trace
- * multiple times in a run of the test suite.
- **/
-export class TraceLoader {
-  /**
-   * Parsing some trace files easily takes up more than our default Mocha timeout
-   * which is 2seconds. So for most tests that include parsing a trace, we have to
-   * increase the timeout. We use this function to ensure we set a consistent
-   * timeout across all trace model tests.
-   **/
-  static setTestTimeout(context: Mocha.Context|Mocha.Suite): void {
-    // Some traces take a long time to process, especially on our CQ machines.
-    // The trace that takes the longest on my Mac M1 Pro is ~3s (yahoo-news.json.gz).
-    // In CQ, that same trace takes ~10s (linux), ~7.5s (mac), ~11.5s (windows).
-    if (context.timeout() > 0) {
-      context.timeout(Math.max(context.timeout(), 30000));
-    }
-  }
-
-  /**
-   * Loads a trace file into memory and returns its contents after
-   * JSON.parse-ing them
-   *
-   **/
-  static async fixtureContents(context: Mocha.Context|Mocha.Suite|null, name: string):
-      Promise<Trace.Types.File.Contents> {
-    if (context) {
-      TraceLoader.setTestTimeout(context);
-    }
-    const cached = fileContentsCache.get(name);
-    if (cached) {
-      return cached;
-    }
-    const urlForTest = new URL(`../panels/timeline/fixtures/traces/${name}`, import.meta.url);
-
-    const contents = await TraceLoader.loadTraceFileFromURL(urlForTest);
-    fileContentsCache.set(name, contents);
-    return contents;
-  }
-
-  static async traceFile(context: Mocha.Context|Mocha.Suite|null, name: string): Promise<Trace.Types.File.TraceFile> {
-    const contents = await TraceLoader.fixtureContents(context, name);
-    const traceEvents = 'traceEvents' in contents ? contents.traceEvents : contents;
-    const metadata = 'metadata' in contents ? contents.metadata : {};
-    return {traceEvents, metadata} as Trace.Types.File.TraceFile;
-  }
-
-  /**
-   * Load an array of raw events from the trace file.
-   **/
-  static async rawEvents(context: Mocha.Context|Mocha.Suite|null, name: string):
-      Promise<readonly Trace.Types.Events.Event[]> {
-    const contents = await TraceLoader.fixtureContents(context, name);
-
-    const events = 'traceEvents' in contents ? contents.traceEvents : contents;
-    return events;
-  }
-
-  /**
-   * Load the metadata from a trace file (throws if not present).
-   **/
-  static async metadata(context: Mocha.Context|Mocha.Suite|null, name: string): Promise<Trace.Types.File.MetaData> {
-    const contents = await TraceLoader.fixtureContents(context, name);
-
-    const metadata = 'metadata' in contents ? contents.metadata : null;
-    if (!metadata) {
-      throw new Error('expected metadata but found none');
-    }
-
-    return metadata;
-  }
-
-  /**
-   * Load an array of raw events from the trace file.
-   * Will default to typing those events using the types from Trace Engine, but
-   * can be overriden by passing the legacy EventPayload type as the generic.
-   **/
-  static async rawCPUProfile(context: Mocha.Context|Mocha.Suite|null, name: string):
-      Promise<Protocol.Profiler.Profile> {
-    const contents = await TraceLoader.fixtureContents(context, name) as unknown as Protocol.Profiler.Profile;
-    return contents;
-  }
-
-  /**
-   * Executes only the new trace engine on the fixture and returns the resulting parsed data.
-   *
-   * @param context The Mocha test context. Processing a trace can easily
-   * takes up longer than the default Mocha timeout, which is 2s. So we have to
-   * increase this test's timeout. It might be null when we only render a
-   * component example. See TraceLoader.setTestTimeout.
-   * @param file The name of the trace file to be loaded.
-   * The trace file should be in ../panels/timeline/fixtures/traces folder.
-   * @param options Additional trace options.
-   * @param options.initTraceBounds (defaults to `true`) after the trace is
-   * loaded, the TraceBounds manager will automatically be initialised using
-   * the bounds from the trace.
-   * @param config The config the new trace engine should run with. Optional,
-   * will fall back to the Default config if not provided.
-   */
-  static async traceEngine(
-      context: Mocha.Context|Mocha.Suite|null, name: string,
-      config: Trace.Types.Configuration.Configuration = Trace.Types.Configuration.defaults()): Promise<{
-    parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    insights: Trace.Insights.Types.TraceInsightSets|null,
-    metadata: Trace.Types.File.MetaData,
-  }> {
-    if (context) {
-      TraceLoader.setTestTimeout(context);
-    }
-    // Force the TraceBounds to be reset to empty. This ensures that in
-    // tests where we are using the new engine data we don't accidentally
-    // rely on the fact that a previous test has set the BoundsManager.
-    TraceBounds.TraceBounds.BoundsManager.instance({forceNew: true});
-
-    const configCacheKey = Trace.Types.Configuration.configToCacheKey(config);
-
-    const fromCache = traceEngineCache.get(name)?.get(configCacheKey);
-
-    // If we have results from the cache, we use those to ensure we keep the
-    // tests speedy and don't re-parse trace files over and over again.
-    if (fromCache) {
-      await wrapInTimeout(context, () => {
-        const syntheticEventsManager = fromCache.model.syntheticTraceEventsManager(0);
-        if (!syntheticEventsManager) {
-          throw new Error('Cached trace engine result did not have a synthetic events manager instance');
-        }
-        Trace.Helpers.SyntheticEvents.SyntheticEventsManager.activate(syntheticEventsManager);
-        TraceLoader.initTraceBoundsManager(fromCache.parsedTrace);
-        Timeline.ModificationsManager.ModificationsManager.reset();
-        Timeline.ModificationsManager.ModificationsManager.initAndActivateModificationsManager(fromCache.model, 0);
-      }, 4_000, 'Initializing state for cached trace');
-      return {parsedTrace: fromCache.parsedTrace, insights: fromCache.insights, metadata: fromCache.metadata};
-    }
-
-    const fileContents = await wrapInTimeout(context, async () => {
-      return await TraceLoader.fixtureContents(context, name);
-    }, 15_000, `Loading fixtureContents for ${name}`);
-
-    const parsedTraceData = await wrapInTimeout(context, async () => {
-      return await TraceLoader.executeTraceEngineOnFileContents(
-          fileContents, /* emulate fresh recording */ false, config);
-    }, 15_000, `Executing traceEngine for ${name}`);
-
-    const cacheByName = traceEngineCache.get(name) ?? new Map<string, {
-                          parsedTrace: Trace.Handlers.Types.ParsedTrace,
-                          insights: Trace.Insights.Types.TraceInsightSets | null,
-                          metadata: Trace.Types.File.MetaData,
-                          model: Trace.TraceModel.Model,
-                        }>();
-    cacheByName.set(configCacheKey, parsedTraceData);
-    traceEngineCache.set(name, cacheByName);
-
-    TraceLoader.initTraceBoundsManager(parsedTraceData.parsedTrace);
-    await wrapInTimeout(context, () => {
-      Timeline.ModificationsManager.ModificationsManager.reset();
-      Timeline.ModificationsManager.ModificationsManager.initAndActivateModificationsManager(parsedTraceData.model, 0);
-    }, 5_000, `Creating modification manager for ${name}`);
-    return {
-      parsedTrace: parsedTraceData.parsedTrace,
-      insights: parsedTraceData.insights,
-      metadata: parsedTraceData.metadata,
-    };
-  }
-
-  /**
-   * Initialise the BoundsManager with the bounds from a trace.
-   * This isn't always required, but some of our code - particularly at the UI
-   * level - rely on this being set. This is always set in the actual panel, but
-   * parsing a trace in a test does not automatically set it.
-   **/
-  static initTraceBoundsManager(data: Trace.Handlers.Types.ParsedTrace): void {
-    TraceBounds.TraceBounds.BoundsManager
-        .instance({
-          forceNew: true,
-        })
-        .resetWithNewBounds(data.Meta.traceBounds);
-  }
-
-  static async executeTraceEngineOnFileContents(
-      contents: Trace.Types.File.Contents, emulateFreshRecording = false,
-      traceEngineConfig?: Trace.Types.Configuration.Configuration): Promise<{
-    model: Trace.TraceModel.Model,
-    metadata: Trace.Types.File.MetaData,
-    parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    insights: Trace.Insights.Types.TraceInsightSets|null,
-  }> {
-    const events = 'traceEvents' in contents ? contents.traceEvents : contents;
-    const metadata = 'metadata' in contents ? contents.metadata : {};
-    return await new Promise((resolve, reject) => {
-      const model = Trace.TraceModel.Model.createWithAllHandlers(traceEngineConfig);
-      model.addEventListener(Trace.TraceModel.ModelUpdateEvent.eventName, (event: Event) => {
-        const {data} = event as Trace.TraceModel.ModelUpdateEvent;
-
-        // When we receive the final update from the model, update the recording
-        // state back to waiting.
-        if (Trace.TraceModel.isModelUpdateDataComplete(data)) {
-          const metadata = model.metadata(0);
-          const parsedTrace = model.parsedTrace(0);
-          const insights = model.traceInsights(0);
-          if (metadata && parsedTrace) {
-            resolve({
-              model,
-              metadata,
-              parsedTrace,
-              insights,
-            });
-          } else {
-            reject(new Error('Unable to load trace'));
-          }
-        }
-      });
-
-      void model
-          .parse(events, {
-            metadata,
-            isFreshRecording: emulateFreshRecording,
-            async resolveSourceMap(params) {
-              const {sourceUrl, sourceMapUrl, cachedRawSourceMap} = params;
-
-              if (cachedRawSourceMap) {
-                return new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, cachedRawSourceMap);
-              }
-
-              if (sourceMapUrl.startsWith('data:')) {
-                const rawSourceMap = await (await fetch(sourceMapUrl)).json();
-                return new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, rawSourceMap);
-              }
-
-              return null;
-            },
-          })
-          .catch(e => console.error(e));
-    });
-  }
-
-  static async loadTraceFileFromURL(url: URL): Promise<Trace.Types.File.TraceFile> {
-    const contents = await fetchFileAsText(url);
-    const traceContents = JSON.parse(contents) as Trace.Types.File.TraceFile;
-    return traceContents;
-  }
-}
-
-export async function fetchFileAsText(url: URL): Promise<string> {
-  const response = await fetch(url);
-  if (response.status !== 200) {
-    throw new Error(`Unable to load ${url}`);
-  }
-
-  const buffer = await response.arrayBuffer();
-  const contents = await Common.Gzip.arrayBufferToString(buffer);
-  return contents;
-}
-
-// Below this point are private methods used in the TraceLoader class. These
-// are purposefully not exported, you should use one of the static methods
-// defined above.
-
-/**
- * Wraps an async Promise with a timeout. We use this to break down and
- * instrument `TraceLoader` to understand on CQ where timeouts occur.
- *
- * @param asyncPromise The Promise representing the async operation to be timed.
- * @param timeoutMs The timeout in milliseconds.
- * @param stepName An identifier for the step (for logging).
- * @returns A promise that resolves with the operation's result, or rejects if it times out.
- */
-async function wrapInTimeout<T>(
-    mochaContext: Mocha.Context|Mocha.Suite|null, callback: () => Promise<T>| T, timeoutMs: number,
-    stepName: string): Promise<T> {
-  const timeout = Promise.withResolvers<void>();
-  const timeoutId = setTimeout(() => {
-    let testTitle = '(unknown test)';
-    if (mochaContext) {
-      if (isMochaContext(mochaContext)) {
-        testTitle = mochaContext.currentTest?.fullTitle() ?? testTitle;
-      } else {
-        testTitle = mochaContext.fullTitle();
-      }
-    }
-    console.error(`TraceLoader: [${stepName}]: took longer than ${timeoutMs}ms in test "${testTitle}"`);
-    timeout.reject(new Error(`Timeout for TraceLoader: '${stepName}' after ${timeoutMs}ms.`));
-  }, timeoutMs);
-
-  // Race the original promise against the timeout promise
-  try {
-    const cbResult = await Promise.race([callback(), timeout.promise]);
-    timeout.resolve();
-    return cbResult as T;
-  } finally {
-    // Clear the timeout if the original promise resolves/rejects,
-    // or if the timeout promise wins the race.
-    clearTimeout(timeoutId);
-  }
-}
-
-function isMochaContext(arg: unknown): arg is Mocha.Context {
-  return typeof arg === 'object' && arg !== null && 'currentTest' in arg;
-}

package/front_end/testing/TrackAsyncOperations.ts

@@ -1,276 +0,0 @@
-// Copyright 2022 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.
-
-interface AsyncActivity {
-  type: 'promise'|'requestAnimationFrame'|'setTimeout'|'setInterval'|'requestIdleCallback';
-  pending: boolean;
-  cancelDelayed?: () => void;
-  id?: string;
-  runImmediate?: () => void;
-  stack?: string;
-  promise?: Promise<unknown>;
-}
-
-const asyncActivity: AsyncActivity[] = [];
-
-export function startTrackingAsyncActivity() {
-  // We are tracking all asynchronous activity but let it run normally during
-  // the test.
-  stub('requestAnimationFrame', trackingRequestAnimationFrame);
-  stub('setTimeout', trackingSetTimeout as unknown as typeof setTimeout);
-  stub('setInterval', trackingSetInterval as unknown as typeof setInterval);
-  stub('requestIdleCallback', trackingRequestIdleCallback);
-  stub('cancelAnimationFrame', id => cancelTrackingActivity('a' + id));
-  stub('clearTimeout', id => cancelTrackingActivity('t' + id));
-  stub('clearInterval', id => cancelTrackingActivity('i' + id));
-  stub('cancelIdleCallback', id => cancelTrackingActivity('d' + id));
-  stub('Promise', TrackingPromise);
-}
-
-export async function checkForPendingActivity() {
-  let stillPending: AsyncActivity[] = [];
-  const wait = 5;
-  let retries = 20;
-  // We will perform multiple iteration of waiting and forced completions to see
-  // if all promises are eventually resolved.
-  while (retries > 0) {
-    const pendingCount = asyncActivity.filter(a => a.pending).length;
-    const totalCount = asyncActivity.length;
-    try {
-      // First we wait for the pending async activity to finish normally
-      await original(Promise).all(asyncActivity.filter(a => a.pending).map(a => original(Promise).race([
-        a.promise,
-        new (original(Promise))(
-            (_, reject) => original(setTimeout)(
-                () => {
-                  if (!a.pending) {
-                    return;
-                  }
-                  // If something is still pending after some time, we try to
-                  // force the completion by running timeout and animation frame
-                  // handlers
-                  if (a.cancelDelayed && a.runImmediate) {
-                    a.cancelDelayed();
-                    a.runImmediate();
-                  } else {
-                    reject();
-                  }
-                },
-                wait)),
-      ])));
-
-      // If the above didn't throw, all the original pending activity has
-      // completed, but it could have triggered more
-      stillPending = asyncActivity.filter(a => a.pending);
-      if (!stillPending.length) {
-        break;
-      }
-      --retries;
-    } catch {
-      stillPending = asyncActivity.filter(a => a.pending);
-      const newTotalCount = asyncActivity.length;
-      // Something is still pending. It might get resolved by force completion
-      // of new activity added during the iteration, so let's retry a couple of
-      // times.
-      if (newTotalCount === totalCount && stillPending.length === pendingCount) {
-        --retries;
-      }
-    }
-  }
-  if (stillPending.length) {
-    throw new Error(
-        'The test has completed, but there are still pending async operations\n' +
-        stillPending.map(a => `Pending '${a.type}' created at: \n${a.stack}`).join('\n\n'));
-  }
-}
-
-export function stopTrackingAsyncActivity() {
-  asyncActivity.length = 0;
-  restoreAll();
-}
-
-function trackingRequestAnimationFrame(fn: FrameRequestCallback) {
-  const activity: AsyncActivity = {type: 'requestAnimationFrame', pending: true, stack: getStack(new Error())};
-  let id = 0;
-  activity.promise = new (original(Promise<void>))(resolve => {
-    activity.runImmediate = () => {
-      fn(performance.now());
-      activity.pending = false;
-      resolve();
-    };
-    id = original(requestAnimationFrame)(activity.runImmediate);
-    activity.id = 'a' + id;
-    activity.cancelDelayed = () => {
-      original(cancelAnimationFrame)(id);
-      activity.pending = false;
-      resolve();
-    };
-  });
-  asyncActivity.push(activity);
-  return id;
-}
-
-function trackingRequestIdleCallback(fn: IdleRequestCallback, opts?: IdleRequestOptions): number {
-  const activity: AsyncActivity = {type: 'requestIdleCallback', pending: true, stack: getStack(new Error())};
-  let id = 0;
-  activity.promise = new (original(Promise<void>))(resolve => {
-    activity.runImmediate = (idleDeadline?: IdleDeadline) => {
-      fn(idleDeadline ?? {didTimeout: true, timeRemaining: () => 0} as IdleDeadline);
-      activity.pending = false;
-      resolve();
-    };
-    id = original(requestIdleCallback)(activity.runImmediate, opts);
-    activity.id = 'd' + id;
-    activity.cancelDelayed = () => {
-      original(cancelIdleCallback)(id);
-      activity.pending = false;
-      resolve();
-    };
-  });
-  asyncActivity.push(activity);
-  return id;
-}
-
-function trackingSetTimeout(arg: TimerHandler, time?: number, ...params: unknown[]) {
-  const activity: AsyncActivity = {type: 'setTimeout', pending: true, stack: getStack(new Error())};
-  let id: ReturnType<typeof setTimeout>|undefined;
-  activity.promise = new (original(Promise<void>))(resolve => {
-    activity.runImmediate = () => {
-      if (typeof (arg) === 'function') {
-        arg(...params);
-      } else {
-        eval(arg);
-      }
-      activity.pending = false;
-      resolve();
-    };
-    id = original(setTimeout)(activity.runImmediate, time);
-    activity.id = 't' + id;
-    activity.cancelDelayed = () => {
-      original(clearTimeout)(id);
-      activity.pending = false;
-      resolve();
-    };
-  });
-  asyncActivity.push(activity);
-  return id;
-}
-
-function trackingSetInterval(arg: TimerHandler, time?: number, ...params: unknown[]) {
-  const activity: AsyncActivity = {
-    type: 'setInterval',
-    pending: true,
-    stack: getStack(new Error()),
-  };
-  let id = 0;
-  activity.promise = new (original(Promise<void>))(resolve => {
-    id = original(setInterval)(arg, time, ...params);
-    activity.id = 'i' + id;
-    activity.cancelDelayed = () => {
-      original(clearInterval)(id);
-      activity.pending = false;
-      resolve();
-    };
-  });
-  asyncActivity.push(activity);
-  return id;
-}
-
-function cancelTrackingActivity(id: string) {
-  const activity = asyncActivity.find(a => a.id === id);
-  if (activity?.cancelDelayed) {
-    activity.cancelDelayed();
-  }
-}
-
-type UntrackedPromiseMethod = 'prototype'|typeof Symbol.species;
-
-/**
- * Extracted into separate object which will make TypeScript
- * check fail if new properties are added.
- */
-const BasePromise: Omit<PromiseConstructor, UntrackedPromiseMethod> = {
-  all: Promise.all,
-  allSettled: Promise.allSettled,
-  any: Promise.any,
-  race: Promise.race,
-  reject: Promise.reject,
-  resolve: Promise.resolve,
-  withResolvers: Promise.withResolvers,
-  try: Promise.try,
-};
-
-// We can't subclass native Promise here as this will cause all derived promises
-// (e.g. those returned by `then`) to also be subclass instances. This results
-// in a new asyncActivity entry on each iteration of checkForPendingActivity
-// which never settles.
-const TrackingPromise: PromiseConstructor = Object.assign(
-    function<T>(arg: (resolve: (value: T|PromiseLike<T>) => void, reject: (reason?: unknown) => void) => void) {
-      const originalPromiseType = original(Promise);
-      const promise = new (originalPromiseType)(arg);
-      const activity: AsyncActivity = {
-        type: 'promise',
-        promise,
-        stack: getStack(new Error()),
-        pending: false,
-      };
-      promise.then = function<TResult1 = T, TResult2 = never>(
-          onFullfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>)|undefined|null,
-          onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>)|undefined|
-          null): Promise<TResult1|TResult2> {
-        activity.pending = true;
-        return originalPromiseType.prototype.then.apply(this, [
-          result => {
-            if (!onFullfilled) {
-              return this;
-            }
-            activity.pending = false;
-            return onFullfilled(result);
-          },
-          result => {
-            if (!onRejected) {
-              return this;
-            }
-            activity.pending = false;
-            return onRejected(result);
-          },
-        ]) as Promise<TResult1|TResult2>;
-      };
-
-      asyncActivity.push(activity);
-      return promise;
-    },
-    BasePromise as PromiseConstructor,
-);
-
-function getStack(error: Error): string {
-  return (error.stack ?? 'No stack').split('\n').slice(2).join('\n');
-}
-
-// We can't use Sinon for stubbing as 1) we need to double wrap sometimes and 2)
-// we need to access original values.
-interface Stub<TKey extends keyof typeof window> {
-  name: TKey;
-  original: (typeof window)[TKey];
-  stubWith: (typeof window)[TKey];
-}
-
-const stubs: Array<Stub<keyof typeof window>> = [];
-
-function stub<T extends keyof typeof window>(name: T, stubWith: (typeof window)[T]) {
-  const original = window[name];
-  window[name] = stubWith;
-  stubs.push({name, original, stubWith});
-}
-
-function original<T>(stubWith: T): T {
-  return stubs.find(s => s.stubWith === stubWith)?.original;
-}
-
-function restoreAll() {
-  for (const {name, original} of stubs) {
-    (window[name] as typeof original) = original;
-  }
-  stubs.length = 0;
-}