@paulirish/trace_engine 0.0.5 → 0.0.6

package/PAUL.readme.md

@@ -0,0 +1,5 @@
+# see readme for cmds
+
+# some types thing that might work
+
+node out/Typed/../../third_party/typescript/../../node_modules/typescript/bin/tsc -p out/Typed/gen/front_end/models/trace/trace-tsconfig.json  # this then has js/map/d.ts.  should be able to use for typs

package/README.md

@@ -18,19 +18,39 @@ console.log(processor.data)
 
 See the included `analyze-trace.mjs` a runnable invocation.
 
-## Building standalone
+## Maintainer cheatsheet
 
-```sh
-# parent doc: go/btlax
+See also http://go/btlax
 
-# these in no particular order..
+#### Build, run, extract
 
+```sh
+# build bundle with esbuild
 front_end/models/trace/build-trace-engine-lib.sh
 
+# run
+node scripts/analyze-trace.mjs test/unittests/fixtures/traces/web-dev.json.gz
+
+# test
+node scripts/test/test-trace-engine.mjs
+
+# copy built files to $HOME/code/trace_engine
 front_end/models/trace/copy-build-trace-engine-for-publish.sh
+```
+
+#### Test and publish
+
+```sh
+# switch to standalone
+cd $HOME/code/trace_engine
 
-node out/Typed/../../third_party/typescript/../../node_modules/typescript/bin/tsc -p out/Typed/gen/front_end/models/trace/trace-tsconfig.json  # this then has js/map/d.ts.  should be able to use for typs
+# test
+node test/test-trace-engine.mjs
 
+# bump and publish
+npm version v0.0.XXX   # Manually determine next version
+npm publish --access public --dry-run
+npm publish --access public
 ```
 
 ## High level architecture

package/analyze-trace.mjs

@@ -5,26 +5,35 @@
 // Run this first:
 //    front_end/models/trace/build-trace-engine-lib.sh
 
-import fs from 'fs';
-import zlib from 'zlib';
+import fs from 'node:fs';
+import zlib from 'node:zlib';
 // eslint-disable-next-line rulesdir/es_modules_import
 import * as TraceModel from './trace.mjs';
 
 polyfillDOMRect();
 
-// If run as CLI, parse the argv trace (or a fallback)
-if (import.meta.url.endsWith(process.argv[1])) {
-  const filename = process.argv.at(2) ?? './test/invalid-animation-events.json.gz';
+
+export async function analyzeTrace(filename) {
   const traceEvents = loadTraceEventsFromFile(filename);
 
   // Primary usage:
   const processor = TraceModel.Processor.TraceProcessor.createWithAllHandlers(); // aka `fullTraceEngine`
   await processor.parse(traceEvents);
+  return processor.data;
+}
 
-  console.log(processor.data);
-  console.assert(processor.data.Renderer.allRendererEvents.length);
+// If run as CLI, parse the argv trace (or a fallback)
+if (import.meta.url.endsWith(process?.argv[1])) {
+  cli();
 }
 
+async function cli() {
+  const filename = process.argv.at(2);
+  const traceModel = await analyzeTrace(filename);
+  console.log(traceModel);
+}
+
+
 /**
  * @param {string=} filename
  * @returns TraceEvent[]

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@paulirish/trace_engine",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
   "main": "trace.mjs",
   "scripts": {
-    "test": "node analyze-trace.mjs"
+    "test": "node test/test-trace-engine.mjs",
+    "prepublishOnly": "npm test"
   },
   "type": "module",
   "keywords": [],

package/test/test-trace-engine.mjs

@@ -0,0 +1,52 @@
+// 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 test from 'node:test';
+import {strict as assert} from 'assert';
+
+import {analyzeTrace} from '../analyze-trace.mjs';
+
+const filename = './test/invalid-animation-events.json.gz';
+const data = await analyzeTrace(filename);
+
+test('key values are populated', t => {
+  assert.equal(data.Renderer.allRendererEvents.length > 90_000, true);
+  assert.equal(data.Screenshots.length > 2, true);
+  assert.equal(data.Meta.threadsInProcess.size > 2, true);
+  assert.equal(data.Meta.mainFrameNavigations.length > 0, true);
+});
+
+test('numeric values are set and look legit', t => {
+  const shouldBeNumbers = [
+    data.Meta.traceBounds.min,
+    data.Meta.traceBounds.max,
+    data.Meta.traceBounds.range,
+    data.Meta.browserProcessId,
+    data.Meta.browserThreadId,
+    data.Meta.gpuProcessId,
+    data.Meta.gpuThreadId,
+    Array.from(data.Meta.topLevelRendererIds.values()).at(0),
+    Array.from(data.Meta.frameByProcessId.keys()).at(0),
+  ];
+  for (const datum of shouldBeNumbers) {
+    assert.equal(isNaN(datum), false);
+    assert.equal(typeof datum, 'number');
+    assert.equal(datum > 10, true);
+  }
+});
+
+test('string values are set and look legit', t => {
+  const shouldBeStrings = [
+    data.Meta.mainFrameId,
+    data.Meta.mainFrameURL,
+    Array.from(data.Meta.navigationsByFrameId.keys()).at(0),
+    Array.from(data.Meta.navigationsByNavigationId.keys()).at(0),
+    data.Meta.mainFrameId,
+  ];
+
+  for (const datum of shouldBeStrings) {
+    assert.equal(typeof datum, 'string');
+    assert.equal(datum.length > 10, true);
+  }
+});

package/trace.mjs

@@ -2040,18 +2040,34 @@ function walkTreeFromEntry(entryToNode3, rootEntry, onEntryStart, onEntryEnd) {
   }
   walkTreeByNode(entryToNode3, startNode, onEntryStart, onEntryEnd);
 }
-function walkEntireTree(entryToNode3, tree, onEntryStart, onEntryEnd) {
+function walkEntireTree(entryToNode3, tree, onEntryStart, onEntryEnd, traceWindowToInclude) {
   for (const rootNode of tree.roots) {
-    walkTreeByNode(entryToNode3, rootNode, onEntryStart, onEntryEnd);
+    walkTreeByNode(entryToNode3, rootNode, onEntryStart, onEntryEnd, traceWindowToInclude);
   }
 }
-function walkTreeByNode(entryToNode3, rootNode, onEntryStart, onEntryEnd) {
+function walkTreeByNode(entryToNode3, rootNode, onEntryStart, onEntryEnd, traceWindowToInclude) {
+  if (traceWindowToInclude && !treeNodeIsInWindow(rootNode, traceWindowToInclude)) {
+    return;
+  }
   onEntryStart(rootNode.entry);
   for (const child of rootNode.children) {
-    walkTreeByNode(entryToNode3, child, onEntryStart, onEntryEnd);
+    walkTreeByNode(entryToNode3, child, onEntryStart, onEntryEnd, traceWindowToInclude);
   }
   onEntryEnd(rootNode.entry);
 }
+function treeNodeIsInWindow(node, traceWindow) {
+  const { startTime, endTime } = eventTimingsMicroSeconds(node.entry);
+  if (startTime >= traceWindow.min && startTime < traceWindow.max) {
+    return true;
+  }
+  if (endTime > traceWindow.min && endTime <= traceWindow.max) {
+    return true;
+  }
+  if (startTime <= traceWindow.min && endTime >= traceWindow.max) {
+    return true;
+  }
+  return false;
+}
 
 // front_end/models/trace/handlers/GPUHandler.ts
 var handlerState3 = 1 /* UNINITIALIZED */;
@@ -3303,6 +3319,8 @@ __export(WarningsHandler_exports, {
   FORCED_LAYOUT_AND_STYLES_THRESHOLD: () => FORCED_LAYOUT_AND_STYLES_THRESHOLD,
   LONG_MAIN_THREAD_TASK_THRESHOLD: () => LONG_MAIN_THREAD_TASK_THRESHOLD,
   data: () => data12,
+  deps: () => deps6,
+  finalize: () => finalize11,
   handleEvent: () => handleEvent12,
   reset: () => reset12
 });
@@ -3350,6 +3368,15 @@ function handleEvent12(event) {
     return;
   }
 }
+function deps6() {
+  return ["UserInteractions"];
+}
+async function finalize11() {
+  const longInteractions = data10().interactionsOverThreshold;
+  for (const interaction of longInteractions) {
+    storeWarning(interaction, "LONG_INTERACTION");
+  }
+}
 function data12() {
   return {
     perEvent: new Map(warningsPerEvent),
@@ -3361,7 +3388,7 @@ function data12() {
 var WorkersHandler_exports = {};
 __export(WorkersHandler_exports, {
   data: () => data13,
-  finalize: () => finalize11,
+  finalize: () => finalize12,
   handleEvent: () => handleEvent13,
   initialize: () => initialize5,
   reset: () => reset13
@@ -3389,7 +3416,7 @@ function handleEvent13(event) {
     sessionIdEvents.push(event);
   }
 }
-async function finalize11() {
+async function finalize12() {
   if (handlerState8 !== 2 /* INITIALIZED */) {
     throw new Error("Handler is not initialized");
   }
@@ -3508,8 +3535,8 @@ __export(RendererHandler_exports, {
   assignThreadName: () => assignThreadName,
   buildHierarchy: () => buildHierarchy,
   data: () => data17,
-  deps: () => deps6,
-  finalize: () => finalize13,
+  deps: () => deps7,
+  finalize: () => finalize14,
   handleEvent: () => handleEvent17,
   handleUserConfig: () => handleUserConfig,
   initialize: () => initialize7,
@@ -3523,7 +3550,7 @@ __export(RendererHandler_exports, {
 var SamplesHandler_exports = {};
 __export(SamplesHandler_exports, {
   data: () => data16,
-  finalize: () => finalize12,
+  finalize: () => finalize13,
   getProfileCallFunctionName: () => getProfileCallFunctionName,
   handleEvent: () => handleEvent16,
   initialize: () => initialize6,
@@ -3682,7 +3709,7 @@ var CPUProfileDataModel = class extends ProfileTreeModel {
     this.profileHead = this.translateProfileTree(profile.nodes);
     this.initialize(this.profileHead);
     this.extractMetaNodes();
-    if (this.samples) {
+    if (this.samples?.length) {
       this.sortSamples();
       this.normalizeTimestamps();
       this.fixMissingSamples();
@@ -4138,7 +4165,7 @@ function handleEvent16(event) {
     return;
   }
 }
-async function finalize12() {
+async function finalize13() {
   if (handlerState9 !== 2 /* INITIALIZED */) {
     throw new Error("Samples Handler is not initialized");
   }
@@ -4245,7 +4272,7 @@ function handleEvent17(event) {
     allRendererEvents.push(event);
   }
 }
-async function finalize13() {
+async function finalize14() {
   if (handlerState10 !== 2 /* INITIALIZED */) {
     throw new Error("Renderer Handler is not initialized");
   }
@@ -4389,7 +4416,7 @@ function makeCompleteEvent(event) {
   completeEventStack.push(syntheticComplete);
   return syntheticComplete;
 }
-function deps6() {
+function deps7() {
   return ["Meta", "Samples", "AuctionWorklets"];
 }
 
@@ -5281,9 +5308,9 @@ function sortHandlers(traceHandlers) {
     if (!handler) {
       return;
     }
-    const deps7 = handler.deps?.();
-    if (deps7) {
-      deps7.forEach(visitHandler);
+    const deps8 = handler.deps?.();
+    if (deps8) {
+      deps8.forEach(visitHandler);
     }
     sortedMap.set(handlerName, handler);
   };