@paulirish/trace_engine 0.0.10 → 0.0.11

package/models/trace/extras/FetchNodes.d.ts

@@ -0,0 +1,46 @@
+import type * as Protocol from '../../../generated/protocol.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+export declare function _TEST_clearCache(): void;
+/**
+ * Looks up the DOM Node on the page for the given BackendNodeId. Uses the
+ * provided TraceParseData as the cache and will cache the result after the
+ * first lookup.
+ */
+export declare function domNodeForBackendNodeID(modelData: Handlers.Types.TraceParseData, nodeId: Protocol.DOM.BackendNodeId): Promise<SDK.DOMModel.DOMNode | null>;
+/**
+ * Takes a set of Protocol.DOM.BackendNodeId ids and will return a map of NodeId=>DOMNode.
+ * Results are cached based on 1) the provided TraceParseData and 2) the provided set of IDs.
+ */
+export declare function domNodesForMultipleBackendNodeIds(modelData: Handlers.Types.TraceParseData, nodeIds: Set<Protocol.DOM.BackendNodeId>): Promise<Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode | null>>;
+export interface LayoutShiftSource {
+    previousRect: DOMRect;
+    currentRect: DOMRect;
+    node: SDK.DOMModel.DOMNode;
+}
+/**
+ * Calculates and returns a list of sources for a LayoutShift.
+ * Here, a source is considered as a node that moved and contributed to the
+ * given LayoutShift existing and the score it was given. Each source returned
+ * contains a reference to the DOM Node, and its dimensions (as a DOMRect), both
+ * before and now, so we can see how this node changed and how that impacted the
+ * layout shift.
+ *
+ * This data is cached based on the provided model data and the given layout
+ * shift, so it is is safe to call multiple times with the same input.
+ */
+export declare function sourcesForLayoutShift(modelData: Handlers.Types.TraceParseData, event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly LayoutShiftSource[]>;
+/**
+ * Takes a LayoutShift and normalizes its node dimensions based on the device
+ * pixel ratio (DPR) of the user's display.
+ * This is required because the Layout Instability API is not based on CSS
+ * pixels, but physical pixels. Therefore we need to map these to normalized CSS
+ * pixels if we can. For example, if the user is on a device with a DPR of 2,
+ * the values of the node dimensions reported by the Instability API need to be
+ * divided by 2 to be accurate.
+ * This function is safe to call multiple times as results are cached based on
+ * the provided model data.
+ * See https://crbug.com/1300309 for details.
+ */
+export declare function normalizedImpactedNodesForLayoutShift(modelData: Handlers.Types.TraceParseData, event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly Types.TraceEvents.TraceImpactedNode[]>;

package/models/trace/extras/FetchNodes.js

@@ -1,104 +1,145 @@
-import * as SDK from "../../../core/sdk/sdk.js";
-const domLookUpSingleNodeCache = /* @__PURE__ */ new Map();
-const domLookUpBatchNodesCache = /* @__PURE__ */ new Map();
+// 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 SDK from '../../../core/sdk/sdk.js';
+const domLookUpSingleNodeCache = new Map();
+const domLookUpBatchNodesCache = new Map();
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export function _TEST_clearCache() {
-  domLookUpSingleNodeCache.clear();
-  domLookUpBatchNodesCache.clear();
-  layoutShiftSourcesCache.clear();
-  normalizedLayoutShiftNodesCache.clear();
+    domLookUpSingleNodeCache.clear();
+    domLookUpBatchNodesCache.clear();
+    layoutShiftSourcesCache.clear();
+    normalizedLayoutShiftNodesCache.clear();
 }
+/**
+ * Looks up the DOM Node on the page for the given BackendNodeId. Uses the
+ * provided TraceParseData as the cache and will cache the result after the
+ * first lookup.
+ */
 export async function domNodeForBackendNodeID(modelData, nodeId) {
-  const fromCache = domLookUpSingleNodeCache.get(modelData)?.get(nodeId);
-  if (fromCache !== void 0) {
-    return fromCache;
-  }
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  const domModel = target?.model(SDK.DOMModel.DOMModel);
-  if (!domModel) {
-    return null;
-  }
-  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(/* @__PURE__ */ new Set([nodeId]));
-  const result = domNodesMap?.get(nodeId) || null;
-  const cacheForModel = domLookUpSingleNodeCache.get(modelData) || /* @__PURE__ */ new Map();
-  cacheForModel.set(nodeId, result);
-  domLookUpSingleNodeCache.set(modelData, cacheForModel);
-  return result;
+    const fromCache = domLookUpSingleNodeCache.get(modelData)?.get(nodeId);
+    if (fromCache !== undefined) {
+        return fromCache;
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+        return null;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([nodeId]));
+    const result = domNodesMap?.get(nodeId) || null;
+    const cacheForModel = domLookUpSingleNodeCache.get(modelData) || new Map();
+    cacheForModel.set(nodeId, result);
+    domLookUpSingleNodeCache.set(modelData, cacheForModel);
+    return result;
 }
+/**
+ * Takes a set of Protocol.DOM.BackendNodeId ids and will return a map of NodeId=>DOMNode.
+ * Results are cached based on 1) the provided TraceParseData and 2) the provided set of IDs.
+ */
 export async function domNodesForMultipleBackendNodeIds(modelData, nodeIds) {
-  const fromCache = domLookUpBatchNodesCache.get(modelData)?.get(nodeIds);
-  if (fromCache) {
-    return fromCache;
-  }
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  const domModel = target?.model(SDK.DOMModel.DOMModel);
-  if (!domModel) {
-    return /* @__PURE__ */ new Map();
-  }
-  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(nodeIds) || /* @__PURE__ */ new Map();
-  const cacheForModel = domLookUpBatchNodesCache.get(modelData) || /* @__PURE__ */ new Map();
-  cacheForModel.set(nodeIds, domNodesMap);
-  domLookUpBatchNodesCache.set(modelData, cacheForModel);
-  return domNodesMap;
+    const fromCache = domLookUpBatchNodesCache.get(modelData)?.get(nodeIds);
+    if (fromCache) {
+        return fromCache;
+    }
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+        return new Map();
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(nodeIds) || new Map();
+    const cacheForModel = domLookUpBatchNodesCache.get(modelData) ||
+        new Map();
+    cacheForModel.set(nodeIds, domNodesMap);
+    domLookUpBatchNodesCache.set(modelData, cacheForModel);
+    return domNodesMap;
 }
-const layoutShiftSourcesCache = /* @__PURE__ */ new Map();
-const normalizedLayoutShiftNodesCache = /* @__PURE__ */ new Map();
+const layoutShiftSourcesCache = new Map();
+const normalizedLayoutShiftNodesCache = new Map();
+/**
+ * Calculates and returns a list of sources for a LayoutShift.
+ * Here, a source is considered as a node that moved and contributed to the
+ * given LayoutShift existing and the score it was given. Each source returned
+ * contains a reference to the DOM Node, and its dimensions (as a DOMRect), both
+ * before and now, so we can see how this node changed and how that impacted the
+ * layout shift.
+ *
+ * This data is cached based on the provided model data and the given layout
+ * shift, so it is is safe to call multiple times with the same input.
+ */
 export async function sourcesForLayoutShift(modelData, event) {
-  const fromCache = layoutShiftSourcesCache.get(modelData)?.get(event);
-  if (fromCache) {
-    return fromCache;
-  }
-  const impactedNodes = event.args.data?.impacted_nodes;
-  if (!impactedNodes) {
-    return [];
-  }
-  const sources = [];
-  await Promise.all(impactedNodes.map(async (node) => {
-    const domNode = await domNodeForBackendNodeID(modelData, node.node_id);
-    if (domNode) {
-      sources.push({
-        previousRect: new DOMRect(node.old_rect[0], node.old_rect[1], node.old_rect[2], node.old_rect[3]),
-        currentRect: new DOMRect(node.new_rect[0], node.new_rect[1], node.new_rect[2], node.new_rect[3]),
-        node: domNode
-      });
+    const fromCache = layoutShiftSourcesCache.get(modelData)?.get(event);
+    if (fromCache) {
+        return fromCache;
     }
-  }));
-  const cacheForModel = layoutShiftSourcesCache.get(modelData) || /* @__PURE__ */ new Map();
-  cacheForModel.set(event, sources);
-  layoutShiftSourcesCache.set(modelData, cacheForModel);
-  return sources;
+    const impactedNodes = event.args.data?.impacted_nodes;
+    if (!impactedNodes) {
+        return [];
+    }
+    const sources = [];
+    await Promise.all(impactedNodes.map(async (node) => {
+        const domNode = await domNodeForBackendNodeID(modelData, node.node_id);
+        if (domNode) {
+            sources.push({
+                previousRect: new DOMRect(node.old_rect[0], node.old_rect[1], node.old_rect[2], node.old_rect[3]),
+                currentRect: new DOMRect(node.new_rect[0], node.new_rect[1], node.new_rect[2], node.new_rect[3]),
+                node: domNode,
+            });
+        }
+    }));
+    const cacheForModel = layoutShiftSourcesCache.get(modelData) || new Map();
+    cacheForModel.set(event, sources);
+    layoutShiftSourcesCache.set(modelData, cacheForModel);
+    return sources;
 }
+/**
+ * Takes a LayoutShift and normalizes its node dimensions based on the device
+ * pixel ratio (DPR) of the user's display.
+ * This is required because the Layout Instability API is not based on CSS
+ * pixels, but physical pixels. Therefore we need to map these to normalized CSS
+ * pixels if we can. For example, if the user is on a device with a DPR of 2,
+ * the values of the node dimensions reported by the Instability API need to be
+ * divided by 2 to be accurate.
+ * This function is safe to call multiple times as results are cached based on
+ * the provided model data.
+ * See https://crbug.com/1300309 for details.
+ */
 export async function normalizedImpactedNodesForLayoutShift(modelData, event) {
-  const fromCache = normalizedLayoutShiftNodesCache.get(modelData)?.get(event);
-  if (fromCache) {
-    return fromCache;
-  }
-  const impactedNodes = event.args?.data?.impacted_nodes;
-  if (!impactedNodes) {
-    return [];
-  }
-  let viewportScale = null;
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  const evaluateResult = await target?.runtimeAgent().invoke_evaluate({ expression: "window.devicePixelRatio" });
-  if (evaluateResult?.result.type === "number") {
-    viewportScale = evaluateResult?.result.value ?? null;
-  }
-  if (!viewportScale) {
-    return impactedNodes;
-  }
-  const normalizedNodes = [];
-  for (const impactedNode of impactedNodes) {
-    const newNode = { ...impactedNode };
-    for (let i = 0; i < impactedNode.old_rect.length; i++) {
-      newNode.old_rect[i] /= viewportScale;
+    const fromCache = normalizedLayoutShiftNodesCache.get(modelData)?.get(event);
+    if (fromCache) {
+        return fromCache;
+    }
+    const impactedNodes = event.args?.data?.impacted_nodes;
+    if (!impactedNodes) {
+        return [];
+    }
+    let viewportScale = null;
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    // Get the CSS-to-physical pixel ratio of the device the inspected
+    // target is running at.
+    const evaluateResult = await target?.runtimeAgent().invoke_evaluate({ expression: 'window.devicePixelRatio' });
+    if (evaluateResult?.result.type === 'number') {
+        viewportScale = evaluateResult?.result.value ?? null;
+    }
+    if (!viewportScale) {
+        // Bail and return the nodes as is.
+        return impactedNodes;
     }
-    for (let i = 0; i < impactedNode.new_rect.length; i++) {
-      newNode.new_rect[i] /= viewportScale;
+    const normalizedNodes = [];
+    for (const impactedNode of impactedNodes) {
+        const newNode = { ...impactedNode };
+        for (let i = 0; i < impactedNode.old_rect.length; i++) {
+            newNode.old_rect[i] /= viewportScale;
+        }
+        for (let i = 0; i < impactedNode.new_rect.length; i++) {
+            newNode.new_rect[i] /= viewportScale;
+        }
+        normalizedNodes.push(newNode);
     }
-    normalizedNodes.push(newNode);
-  }
-  const cacheForModel = normalizedLayoutShiftNodesCache.get(modelData) || /* @__PURE__ */ new Map();
-  cacheForModel.set(event, normalizedNodes);
-  normalizedLayoutShiftNodesCache.set(modelData, cacheForModel);
-  return normalizedNodes;
+    const cacheForModel = normalizedLayoutShiftNodesCache.get(modelData) ||
+        new Map();
+    cacheForModel.set(event, normalizedNodes);
+    normalizedLayoutShiftNodesCache.set(modelData, cacheForModel);
+    return normalizedNodes;
 }
-//# sourceMappingURL=FetchNodes.js.map
+//# sourceMappingURL=FetchNodes.js.map

package/models/trace/extras/FetchNodes.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../front_end/models/trace/extras/FetchNodes.ts"],
-  "sourcesContent": ["// Copyright 2023 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as SDK from '../../../core/sdk/sdk.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Types from '../types/types.js';\n\nconst domLookUpSingleNodeCache =\n    new Map<Handlers.Types.TraceParseData, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>();\nconst domLookUpBatchNodesCache = new Map<\n    Handlers.Types.TraceParseData,\n    Map<Set<Protocol.DOM.BackendNodeId>, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>>();\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function _TEST_clearCache(): void {\n  domLookUpSingleNodeCache.clear();\n  domLookUpBatchNodesCache.clear();\n  layoutShiftSourcesCache.clear();\n  normalizedLayoutShiftNodesCache.clear();\n}\n\n/**\n * Looks up the DOM Node on the page for the given BackendNodeId. Uses the\n * provided TraceParseData as the cache and will cache the result after the\n * first lookup.\n */\nexport async function domNodeForBackendNodeID(\n    modelData: Handlers.Types.TraceParseData, nodeId: Protocol.DOM.BackendNodeId): Promise<SDK.DOMModel.DOMNode|null> {\n  const fromCache = domLookUpSingleNodeCache.get(modelData)?.get(nodeId);\n  if (fromCache !== undefined) {\n    return fromCache;\n  }\n\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  const domModel = target?.model(SDK.DOMModel.DOMModel);\n  if (!domModel) {\n    return null;\n  }\n\n  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([nodeId]));\n  const result = domNodesMap?.get(nodeId) || null;\n\n  const cacheForModel =\n      domLookUpSingleNodeCache.get(modelData) || new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>();\n  cacheForModel.set(nodeId, result);\n  domLookUpSingleNodeCache.set(modelData, cacheForModel);\n\n  return result;\n}\n\n/**\n * Takes a set of Protocol.DOM.BackendNodeId ids and will return a map of NodeId=>DOMNode.\n * Results are cached based on 1) the provided TraceParseData and 2) the provided set of IDs.\n */\nexport async function domNodesForMultipleBackendNodeIds(\n    modelData: Handlers.Types.TraceParseData,\n    nodeIds: Set<Protocol.DOM.BackendNodeId>): Promise<Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>> {\n  const fromCache = domLookUpBatchNodesCache.get(modelData)?.get(nodeIds);\n  if (fromCache) {\n    return fromCache;\n  }\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  const domModel = target?.model(SDK.DOMModel.DOMModel);\n  if (!domModel) {\n    return new Map();\n  }\n\n  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(nodeIds) || new Map();\n\n  const cacheForModel = domLookUpBatchNodesCache.get(modelData) ||\n      new Map<Set<Protocol.DOM.BackendNodeId>, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>();\n  cacheForModel.set(nodeIds, domNodesMap);\n  domLookUpBatchNodesCache.set(modelData, cacheForModel);\n\n  return domNodesMap;\n}\n\nconst layoutShiftSourcesCache = new Map<\n    Handlers.Types.TraceParseData, Map<Types.TraceEvents.TraceEventLayoutShift, readonly LayoutShiftSource[]>>();\n\nconst normalizedLayoutShiftNodesCache = new Map<\n    Handlers.Types.TraceParseData,\n    Map<Types.TraceEvents.TraceEventLayoutShift, readonly Types.TraceEvents.TraceImpactedNode[]>>();\n\nexport interface LayoutShiftSource {\n  previousRect: DOMRect;\n  currentRect: DOMRect;\n  node: SDK.DOMModel.DOMNode;\n}\n\n/**\n * Calculates and returns a list of sources for a LayoutShift.\n * Here, a source is considered as a node that moved and contributed to the\n * given LayoutShift existing and the score it was given. Each source returned\n * contains a reference to the DOM Node, and its dimensions (as a DOMRect), both\n * before and now, so we can see how this node changed and how that impacted the\n * layout shift.\n *\n * This data is cached based on the provided model data and the given layout\n * shift, so it is is safe to call multiple times with the same input.\n */\nexport async function sourcesForLayoutShift(\n    modelData: Handlers.Types.TraceParseData,\n    event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly LayoutShiftSource[]> {\n  const fromCache = layoutShiftSourcesCache.get(modelData)?.get(event);\n  if (fromCache) {\n    return fromCache;\n  }\n  const impactedNodes = event.args.data?.impacted_nodes;\n  if (!impactedNodes) {\n    return [];\n  }\n  const sources: LayoutShiftSource[] = [];\n  await Promise.all(impactedNodes.map(async node => {\n    const domNode = await domNodeForBackendNodeID(modelData, node.node_id);\n    if (domNode) {\n      sources.push({\n        previousRect: new DOMRect(node.old_rect[0], node.old_rect[1], node.old_rect[2], node.old_rect[3]),\n        currentRect: new DOMRect(node.new_rect[0], node.new_rect[1], node.new_rect[2], node.new_rect[3]),\n        node: domNode,\n      });\n    }\n  }));\n  const cacheForModel =\n      layoutShiftSourcesCache.get(modelData) || new Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftSource[]>();\n  cacheForModel.set(event, sources);\n  layoutShiftSourcesCache.set(modelData, cacheForModel);\n  return sources;\n}\n\n/**\n * Takes a LayoutShift and normalizes its node dimensions based on the device\n * pixel ratio (DPR) of the user's display.\n * This is required because the Layout Instability API is not based on CSS\n * pixels, but physical pixels. Therefore we need to map these to normalized CSS\n * pixels if we can. For example, if the user is on a device with a DPR of 2,\n * the values of the node dimensions reported by the Instability API need to be\n * divided by 2 to be accurate.\n * This function is safe to call multiple times as results are cached based on\n * the provided model data.\n * See https://crbug.com/1300309 for details.\n */\nexport async function normalizedImpactedNodesForLayoutShift(\n    modelData: Handlers.Types.TraceParseData,\n    event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly Types.TraceEvents.TraceImpactedNode[]> {\n  const fromCache = normalizedLayoutShiftNodesCache.get(modelData)?.get(event);\n  if (fromCache) {\n    return fromCache;\n  }\n  const impactedNodes = event.args?.data?.impacted_nodes;\n  if (!impactedNodes) {\n    return [];\n  }\n\n  let viewportScale: number|null = null;\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  // Get the CSS-to-physical pixel ratio of the device the inspected\n  // target is running at.\n  const evaluateResult = await target?.runtimeAgent().invoke_evaluate({expression: 'window.devicePixelRatio'});\n  if (evaluateResult?.result.type === 'number') {\n    viewportScale = evaluateResult?.result.value as number ?? null;\n  }\n\n  if (!viewportScale) {\n    // Bail and return the nodes as is.\n    return impactedNodes;\n  }\n\n  const normalizedNodes: Types.TraceEvents.TraceImpactedNode[] = [];\n  for (const impactedNode of impactedNodes) {\n    const newNode = {...impactedNode};\n    for (let i = 0; i < impactedNode.old_rect.length; i++) {\n      newNode.old_rect[i] /= viewportScale;\n    }\n    for (let i = 0; i < impactedNode.new_rect.length; i++) {\n      newNode.new_rect[i] /= viewportScale;\n    }\n    normalizedNodes.push(newNode);\n  }\n\n  const cacheForModel = normalizedLayoutShiftNodesCache.get(modelData) ||\n      new Map<Types.TraceEvents.TraceEventLayoutShift, readonly Types.TraceEvents.TraceImpactedNode[]>();\n  cacheForModel.set(event, normalizedNodes);\n  normalizedLayoutShiftNodesCache.set(modelData, cacheForModel);\n\n  return normalizedNodes;\n}\n"],
-  "mappings": "AAKA;AAIA,MAAM,2BACF,oBAAI;AACR,MAAM,2BAA2B,oBAAI;AAK9B,mCAAkC;AACvC,2BAAyB;AACzB,2BAAyB;AACzB,0BAAwB;AACxB,kCAAgC;AAAA;AAQlC,8CACI,WAA0C,QAAwE;AACpH,QAAM,YAAY,yBAAyB,IAAI,YAAY,IAAI;AAC/D,MAAI,cAAc,QAAW;AAC3B,WAAO;AAAA;AAGT,QAAM,SAAS,IAAI,cAAc,cAAc,WAAW;AAC1D,QAAM,WAAW,QAAQ,MAAM,IAAI,SAAS;AAC5C,MAAI,CAAC,UAAU;AACb,WAAO;AAAA;AAGT,QAAM,cAAc,MAAM,SAAS,gCAAgC,oBAAI,IAAI,CAAC;AAC5E,QAAM,SAAS,aAAa,IAAI,WAAW;AAE3C,QAAM,gBACF,yBAAyB,IAAI,cAAc,oBAAI;AACnD,gBAAc,IAAI,QAAQ;AAC1B,2BAAyB,IAAI,WAAW;AAExC,SAAO;AAAA;AAOT,wDACI,WACA,SAA+G;AACjH,QAAM,YAAY,yBAAyB,IAAI,YAAY,IAAI;AAC/D,MAAI,WAAW;AACb,WAAO;AAAA;AAET,QAAM,SAAS,IAAI,cAAc,cAAc,WAAW;AAC1D,QAAM,WAAW,QAAQ,MAAM,IAAI,SAAS;AAC5C,MAAI,CAAC,UAAU;AACb,WAAO,oBAAI;AAAA;AAGb,QAAM,cAAc,MAAM,SAAS,gCAAgC,YAAY,oBAAI;AAEnF,QAAM,gBAAgB,yBAAyB,IAAI,cAC/C,oBAAI;AACR,gBAAc,IAAI,SAAS;AAC3B,2BAAyB,IAAI,WAAW;AAExC,SAAO;AAAA;AAGT,MAAM,0BAA0B,oBAAI;AAGpC,MAAM,kCAAkC,oBAAI;AAqB5C,4CACI,WACA,OAAuF;AACzF,QAAM,YAAY,wBAAwB,IAAI,YAAY,IAAI;AAC9D,MAAI,WAAW;AACb,WAAO;AAAA;AAET,QAAM,gBAAgB,MAAM,KAAK,MAAM;AACvC,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA;AAET,QAAM,UAA+B;AACrC,QAAM,QAAQ,IAAI,cAAc,IAAI,OAAM,SAAQ;AAChD,UAAM,UAAU,MAAM,wBAAwB,WAAW,KAAK;AAC9D,QAAI,SAAS;AACX,cAAQ,KAAK;AAAA,QACX,cAAc,IAAI,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI,KAAK,SAAS;AAAA,QAC9F,aAAa,IAAI,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI,KAAK,SAAS;AAAA,QAC7F,MAAM;AAAA;AAAA;AAAA;AAIZ,QAAM,gBACF,wBAAwB,IAAI,cAAc,oBAAI;AAClD,gBAAc,IAAI,OAAO;AACzB,0BAAwB,IAAI,WAAW;AACvC,SAAO;AAAA;AAeT,4DACI,WACA,OAAyG;AAC3G,QAAM,YAAY,gCAAgC,IAAI,YAAY,IAAI;AACtE,MAAI,WAAW;AACb,WAAO;AAAA;AAET,QAAM,gBAAgB,MAAM,MAAM,MAAM;AACxC,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA;AAGT,MAAI,gBAA6B;AACjC,QAAM,SAAS,IAAI,cAAc,cAAc,WAAW;AAG1D,QAAM,iBAAiB,MAAM,QAAQ,eAAe,gBAAgB,EAAC,YAAY;AACjF,MAAI,gBAAgB,OAAO,SAAS,UAAU;AAC5C,oBAAgB,gBAAgB,OAAO,SAAmB;AAAA;AAG5D,MAAI,CAAC,eAAe;AAElB,WAAO;AAAA;AAGT,QAAM,kBAAyD;AAC/D,aAAW,gBAAgB,eAAe;AACxC,UAAM,UAAU,KAAI;AACpB,aAAS,IAAI,GAAG,IAAI,aAAa,SAAS,QAAQ,KAAK;AACrD,cAAQ,SAAS,MAAM;AAAA;AAEzB,aAAS,IAAI,GAAG,IAAI,aAAa,SAAS,QAAQ,KAAK;AACrD,cAAQ,SAAS,MAAM;AAAA;AAEzB,oBAAgB,KAAK;AAAA;AAGvB,QAAM,gBAAgB,gCAAgC,IAAI,cACtD,oBAAI;AACR,gBAAc,IAAI,OAAO;AACzB,kCAAgC,IAAI,WAAW;AAE/C,SAAO;AAAA;",
-  "names": []
-}
+{"version":3,"file":"FetchNodes.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/extras/FetchNodes.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2023 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as SDK from '../../../core/sdk/sdk.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Types from '../types/types.js';\n\nconst domLookUpSingleNodeCache =\n    new Map<Handlers.Types.TraceParseData, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>();\nconst domLookUpBatchNodesCache = new Map<\n    Handlers.Types.TraceParseData,\n    Map<Set<Protocol.DOM.BackendNodeId>, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>>();\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function _TEST_clearCache(): void {\n  domLookUpSingleNodeCache.clear();\n  domLookUpBatchNodesCache.clear();\n  layoutShiftSourcesCache.clear();\n  normalizedLayoutShiftNodesCache.clear();\n}\n\n/**\n * Looks up the DOM Node on the page for the given BackendNodeId. Uses the\n * provided TraceParseData as the cache and will cache the result after the\n * first lookup.\n */\nexport async function domNodeForBackendNodeID(\n    modelData: Handlers.Types.TraceParseData, nodeId: Protocol.DOM.BackendNodeId): Promise<SDK.DOMModel.DOMNode|null> {\n  const fromCache = domLookUpSingleNodeCache.get(modelData)?.get(nodeId);\n  if (fromCache !== undefined) {\n    return fromCache;\n  }\n\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  const domModel = target?.model(SDK.DOMModel.DOMModel);\n  if (!domModel) {\n    return null;\n  }\n\n  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([nodeId]));\n  const result = domNodesMap?.get(nodeId) || null;\n\n  const cacheForModel =\n      domLookUpSingleNodeCache.get(modelData) || new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>();\n  cacheForModel.set(nodeId, result);\n  domLookUpSingleNodeCache.set(modelData, cacheForModel);\n\n  return result;\n}\n\n/**\n * Takes a set of Protocol.DOM.BackendNodeId ids and will return a map of NodeId=>DOMNode.\n * Results are cached based on 1) the provided TraceParseData and 2) the provided set of IDs.\n */\nexport async function domNodesForMultipleBackendNodeIds(\n    modelData: Handlers.Types.TraceParseData,\n    nodeIds: Set<Protocol.DOM.BackendNodeId>): Promise<Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>> {\n  const fromCache = domLookUpBatchNodesCache.get(modelData)?.get(nodeIds);\n  if (fromCache) {\n    return fromCache;\n  }\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  const domModel = target?.model(SDK.DOMModel.DOMModel);\n  if (!domModel) {\n    return new Map();\n  }\n\n  const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(nodeIds) || new Map();\n\n  const cacheForModel = domLookUpBatchNodesCache.get(modelData) ||\n      new Map<Set<Protocol.DOM.BackendNodeId>, Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode|null>>();\n  cacheForModel.set(nodeIds, domNodesMap);\n  domLookUpBatchNodesCache.set(modelData, cacheForModel);\n\n  return domNodesMap;\n}\n\nconst layoutShiftSourcesCache = new Map<\n    Handlers.Types.TraceParseData, Map<Types.TraceEvents.TraceEventLayoutShift, readonly LayoutShiftSource[]>>();\n\nconst normalizedLayoutShiftNodesCache = new Map<\n    Handlers.Types.TraceParseData,\n    Map<Types.TraceEvents.TraceEventLayoutShift, readonly Types.TraceEvents.TraceImpactedNode[]>>();\n\nexport interface LayoutShiftSource {\n  previousRect: DOMRect;\n  currentRect: DOMRect;\n  node: SDK.DOMModel.DOMNode;\n}\n\n/**\n * Calculates and returns a list of sources for a LayoutShift.\n * Here, a source is considered as a node that moved and contributed to the\n * given LayoutShift existing and the score it was given. Each source returned\n * contains a reference to the DOM Node, and its dimensions (as a DOMRect), both\n * before and now, so we can see how this node changed and how that impacted the\n * layout shift.\n *\n * This data is cached based on the provided model data and the given layout\n * shift, so it is is safe to call multiple times with the same input.\n */\nexport async function sourcesForLayoutShift(\n    modelData: Handlers.Types.TraceParseData,\n    event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly LayoutShiftSource[]> {\n  const fromCache = layoutShiftSourcesCache.get(modelData)?.get(event);\n  if (fromCache) {\n    return fromCache;\n  }\n  const impactedNodes = event.args.data?.impacted_nodes;\n  if (!impactedNodes) {\n    return [];\n  }\n  const sources: LayoutShiftSource[] = [];\n  await Promise.all(impactedNodes.map(async node => {\n    const domNode = await domNodeForBackendNodeID(modelData, node.node_id);\n    if (domNode) {\n      sources.push({\n        previousRect: new DOMRect(node.old_rect[0], node.old_rect[1], node.old_rect[2], node.old_rect[3]),\n        currentRect: new DOMRect(node.new_rect[0], node.new_rect[1], node.new_rect[2], node.new_rect[3]),\n        node: domNode,\n      });\n    }\n  }));\n  const cacheForModel =\n      layoutShiftSourcesCache.get(modelData) || new Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftSource[]>();\n  cacheForModel.set(event, sources);\n  layoutShiftSourcesCache.set(modelData, cacheForModel);\n  return sources;\n}\n\n/**\n * Takes a LayoutShift and normalizes its node dimensions based on the device\n * pixel ratio (DPR) of the user's display.\n * This is required because the Layout Instability API is not based on CSS\n * pixels, but physical pixels. Therefore we need to map these to normalized CSS\n * pixels if we can. For example, if the user is on a device with a DPR of 2,\n * the values of the node dimensions reported by the Instability API need to be\n * divided by 2 to be accurate.\n * This function is safe to call multiple times as results are cached based on\n * the provided model data.\n * See https://crbug.com/1300309 for details.\n */\nexport async function normalizedImpactedNodesForLayoutShift(\n    modelData: Handlers.Types.TraceParseData,\n    event: Types.TraceEvents.TraceEventLayoutShift): Promise<readonly Types.TraceEvents.TraceImpactedNode[]> {\n  const fromCache = normalizedLayoutShiftNodesCache.get(modelData)?.get(event);\n  if (fromCache) {\n    return fromCache;\n  }\n  const impactedNodes = event.args?.data?.impacted_nodes;\n  if (!impactedNodes) {\n    return [];\n  }\n\n  let viewportScale: number|null = null;\n  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();\n  // Get the CSS-to-physical pixel ratio of the device the inspected\n  // target is running at.\n  const evaluateResult = await target?.runtimeAgent().invoke_evaluate({expression: 'window.devicePixelRatio'});\n  if (evaluateResult?.result.type === 'number') {\n    viewportScale = evaluateResult?.result.value as number ?? null;\n  }\n\n  if (!viewportScale) {\n    // Bail and return the nodes as is.\n    return impactedNodes;\n  }\n\n  const normalizedNodes: Types.TraceEvents.TraceImpactedNode[] = [];\n  for (const impactedNode of impactedNodes) {\n    const newNode = {...impactedNode};\n    for (let i = 0; i < impactedNode.old_rect.length; i++) {\n      newNode.old_rect[i] /= viewportScale;\n    }\n    for (let i = 0; i < impactedNode.new_rect.length; i++) {\n      newNode.new_rect[i] /= viewportScale;\n    }\n    normalizedNodes.push(newNode);\n  }\n\n  const cacheForModel = normalizedLayoutShiftNodesCache.get(modelData) ||\n      new Map<Types.TraceEvents.TraceEventLayoutShift, readonly Types.TraceEvents.TraceImpactedNode[]>();\n  cacheForModel.set(event, normalizedNodes);\n  normalizedLayoutShiftNodesCache.set(modelData, cacheForModel);\n\n  return normalizedNodes;\n}\n"]}

package/models/trace/extras/FilmStrip.d.ts

@@ -0,0 +1,19 @@
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+export interface Data {
+    zeroTime: Types.Timing.MicroSeconds;
+    spanTime: Types.Timing.MicroSeconds;
+    frames: readonly Frame[];
+}
+export interface Frame {
+    screenshotEvent: Types.TraceEvents.SyntheticScreenshot;
+    index: number;
+}
+export type HandlersWithFilmStrip = Handlers.Types.HandlersWithMeta<{
+    Screenshots: typeof Handlers.ModelHandlers.Screenshots;
+}>;
+export type HandlerDataWithScreenshots = Handlers.Types.EnabledHandlerDataWithMeta<{
+    Screenshots: typeof Handlers.ModelHandlers.Screenshots;
+}>;
+export declare function fromTraceData(traceData: HandlerDataWithScreenshots, customZeroTime?: Types.Timing.MicroSeconds): Data;
+export declare function frameClosestToTimestamp(filmStrip: Data, searchTimestamp: Types.Timing.MicroSeconds): Frame | null;

package/models/trace/extras/FilmStrip.js

@@ -1,37 +1,44 @@
-import * as Platform from "../../../core/platform/platform.js";
-const filmStripCache = /* @__PURE__ */ new Map();
+// 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 Platform from '../../../core/platform/platform.js';
+// Cache film strips based on:
+// 1. The trace parsed data object
+// 2. The start time.
+const filmStripCache = new Map();
 export function fromTraceData(traceData, customZeroTime) {
-  const frames = [];
-  const zeroTime = typeof customZeroTime !== "undefined" ? customZeroTime : traceData.Meta.traceBounds.min;
-  const spanTime = traceData.Meta.traceBounds.range;
-  const fromCache = filmStripCache.get(traceData)?.get(zeroTime);
-  if (fromCache) {
-    return fromCache;
-  }
-  for (const screenshotEvent of traceData.Screenshots) {
-    if (screenshotEvent.ts < zeroTime) {
-      continue;
+    const frames = [];
+    const zeroTime = typeof customZeroTime !== 'undefined' ? customZeroTime : traceData.Meta.traceBounds.min;
+    const spanTime = traceData.Meta.traceBounds.range;
+    const fromCache = filmStripCache.get(traceData)?.get(zeroTime);
+    if (fromCache) {
+        return fromCache;
     }
-    const frame = {
-      index: frames.length,
-      screenshotEvent
+    for (const screenshotEvent of traceData.Screenshots) {
+        if (screenshotEvent.ts < zeroTime) {
+            continue;
+        }
+        const frame = {
+            index: frames.length,
+            screenshotEvent: screenshotEvent,
+        };
+        frames.push(frame);
+    }
+    const result = {
+        zeroTime,
+        spanTime,
+        frames: Array.from(frames),
     };
-    frames.push(frame);
-  }
-  const result = {
-    zeroTime,
-    spanTime,
-    frames: Array.from(frames)
-  };
-  const cachedForData = Platform.MapUtilities.getWithDefault(filmStripCache, traceData, () => /* @__PURE__ */ new Map());
-  cachedForData.set(zeroTime, result);
-  return result;
+    const cachedForData = Platform.MapUtilities.getWithDefault(filmStripCache, traceData, () => new Map());
+    cachedForData.set(zeroTime, result);
+    return result;
 }
 export function frameClosestToTimestamp(filmStrip, searchTimestamp) {
-  const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(filmStrip.frames, (frame) => frame.screenshotEvent.ts < searchTimestamp);
-  if (closestFrameIndexBeforeTimestamp === null) {
-    return null;
-  }
-  return filmStrip.frames[closestFrameIndexBeforeTimestamp];
+    const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(filmStrip.frames, frame => frame.screenshotEvent.ts < searchTimestamp);
+    if (closestFrameIndexBeforeTimestamp === null) {
+        return null;
+    }
+    return filmStrip.frames[closestFrameIndexBeforeTimestamp];
 }
-//# sourceMappingURL=FilmStrip.js.map
+//# sourceMappingURL=FilmStrip.js.map

package/models/trace/extras/FilmStrip.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../front_end/models/trace/extras/FilmStrip.ts"],
-  "sourcesContent": ["// Copyright 2023 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n//\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Types from '../types/types.js';\n\nexport interface Data {\n  zeroTime: Types.Timing.MicroSeconds;\n  spanTime: Types.Timing.MicroSeconds;\n  frames: readonly Frame[];\n}\n\nexport interface Frame {\n  screenshotEvent: Types.TraceEvents.SyntheticScreenshot;\n  index: number;\n}\n\nexport type HandlersWithFilmStrip = Handlers.Types.HandlersWithMeta<{\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Screenshots: typeof Handlers.ModelHandlers.Screenshots,\n}>;\n\nexport type HandlerDataWithScreenshots = Handlers.Types.EnabledHandlerDataWithMeta<{\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Screenshots: typeof Handlers.ModelHandlers.Screenshots,\n}>;\n\n// Cache film strips based on:\n// 1. The trace parsed data object\n// 2. The start time.\nconst filmStripCache = new Map<HandlerDataWithScreenshots, Map<Types.Timing.MicroSeconds, Data>>();\n\nexport function fromTraceData(traceData: HandlerDataWithScreenshots, customZeroTime?: Types.Timing.MicroSeconds): Data {\n  const frames: Frame[] = [];\n\n  const zeroTime = typeof customZeroTime !== 'undefined' ? customZeroTime : traceData.Meta.traceBounds.min;\n  const spanTime = traceData.Meta.traceBounds.range;\n  const fromCache = filmStripCache.get(traceData)?.get(zeroTime);\n  if (fromCache) {\n    return fromCache;\n  }\n\n  for (const screenshotEvent of traceData.Screenshots) {\n    if (screenshotEvent.ts < zeroTime) {\n      continue;\n    }\n    const frame: Frame = {\n      index: frames.length,\n      screenshotEvent: screenshotEvent,\n    };\n    frames.push(frame);\n  }\n\n  const result: Data = {\n    zeroTime,\n    spanTime,\n    frames: Array.from(frames),\n  };\n\n  const cachedForData =\n      Platform.MapUtilities.getWithDefault(filmStripCache, traceData, () => new Map<Types.Timing.MicroSeconds, Data>());\n  cachedForData.set(zeroTime, result);\n\n  return result;\n}\n\nexport function frameClosestToTimestamp(filmStrip: Data, searchTimestamp: Types.Timing.MicroSeconds): Frame|null {\n  const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(\n      filmStrip.frames, frame => frame.screenshotEvent.ts < searchTimestamp);\n  if (closestFrameIndexBeforeTimestamp === null) {\n    return null;\n  }\n  return filmStrip.frames[closestFrameIndexBeforeTimestamp];\n}\n"],
-  "mappings": "AAIA;AA4BA,MAAM,iBAAiB,oBAAI;AAEpB,8BAAuB,WAAuC,gBAAkD;AACrH,QAAM,SAAkB;AAExB,QAAM,WAAW,OAAO,mBAAmB,cAAc,iBAAiB,UAAU,KAAK,YAAY;AACrG,QAAM,WAAW,UAAU,KAAK,YAAY;AAC5C,QAAM,YAAY,eAAe,IAAI,YAAY,IAAI;AACrD,MAAI,WAAW;AACb,WAAO;AAAA;AAGT,aAAW,mBAAmB,UAAU,aAAa;AACnD,QAAI,gBAAgB,KAAK,UAAU;AACjC;AAAA;AAEF,UAAM,QAAe;AAAA,MACnB,OAAO,OAAO;AAAA,MACd;AAAA;AAEF,WAAO,KAAK;AAAA;AAGd,QAAM,SAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,KAAK;AAAA;AAGrB,QAAM,gBACF,SAAS,aAAa,eAAe,gBAAgB,WAAW,MAAM,oBAAI;AAC9E,gBAAc,IAAI,UAAU;AAE5B,SAAO;AAAA;AAGF,wCAAiC,WAAiB,iBAAwD;AAC/G,QAAM,mCAAmC,SAAS,eAAe,oBAC7D,UAAU,QAAQ,WAAS,MAAM,gBAAgB,KAAK;AAC1D,MAAI,qCAAqC,MAAM;AAC7C,WAAO;AAAA;AAET,SAAO,UAAU,OAAO;AAAA;",
-  "names": []
-}
+{"version":3,"file":"FilmStrip.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/extras/FilmStrip.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yEAAyE;AACzE,6BAA6B;AAC7B,EAAE;AACF,OAAO,KAAK,QAAQ,MAAM,oCAAoC,CAAC;AAyB/D,8BAA8B;AAC9B,kCAAkC;AAClC,qBAAqB;AACrB,MAAM,cAAc,GAAG,IAAI,GAAG,EAAoE,CAAC;AAEnG,MAAM,UAAU,aAAa,CAAC,SAAqC,EAAE,cAA0C;IAC7G,MAAM,MAAM,GAAY,EAAE,CAAC;IAE3B,MAAM,QAAQ,GAAG,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;IACzG,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAClD,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC/D,IAAI,SAAS,EAAE;QACb,OAAO,SAAS,CAAC;KAClB;IAED,KAAK,MAAM,eAAe,IAAI,SAAS,CAAC,WAAW,EAAE;QACnD,IAAI,eAAe,CAAC,EAAE,GAAG,QAAQ,EAAE;YACjC,SAAS;SACV;QACD,MAAM,KAAK,GAAU;YACnB,KAAK,EAAE,MAAM,CAAC,MAAM;YACpB,eAAe,EAAE,eAAe;SACjC,CAAC;QACF,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,MAAM,MAAM,GAAS;QACnB,QAAQ;QACR,QAAQ;QACR,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;KAC3B,CAAC;IAEF,MAAM,aAAa,GACf,QAAQ,CAAC,YAAY,CAAC,cAAc,CAAC,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GAAG,EAAmC,CAAC,CAAC;IACtH,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAEpC,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,SAAe,EAAE,eAA0C;IACjG,MAAM,gCAAgC,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAChF,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,CAAC,CAAC;IAC3E,IAAI,gCAAgC,KAAK,IAAI,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IACD,OAAO,SAAS,CAAC,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright 2023 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n//\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport type * as Types from '../types/types.js';\n\nexport interface Data {\n  zeroTime: Types.Timing.MicroSeconds;\n  spanTime: Types.Timing.MicroSeconds;\n  frames: readonly Frame[];\n}\n\nexport interface Frame {\n  screenshotEvent: Types.TraceEvents.SyntheticScreenshot;\n  index: number;\n}\n\nexport type HandlersWithFilmStrip = Handlers.Types.HandlersWithMeta<{\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Screenshots: typeof Handlers.ModelHandlers.Screenshots,\n}>;\n\nexport type HandlerDataWithScreenshots = Handlers.Types.EnabledHandlerDataWithMeta<{\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Screenshots: typeof Handlers.ModelHandlers.Screenshots,\n}>;\n\n// Cache film strips based on:\n// 1. The trace parsed data object\n// 2. The start time.\nconst filmStripCache = new Map<HandlerDataWithScreenshots, Map<Types.Timing.MicroSeconds, Data>>();\n\nexport function fromTraceData(traceData: HandlerDataWithScreenshots, customZeroTime?: Types.Timing.MicroSeconds): Data {\n  const frames: Frame[] = [];\n\n  const zeroTime = typeof customZeroTime !== 'undefined' ? customZeroTime : traceData.Meta.traceBounds.min;\n  const spanTime = traceData.Meta.traceBounds.range;\n  const fromCache = filmStripCache.get(traceData)?.get(zeroTime);\n  if (fromCache) {\n    return fromCache;\n  }\n\n  for (const screenshotEvent of traceData.Screenshots) {\n    if (screenshotEvent.ts < zeroTime) {\n      continue;\n    }\n    const frame: Frame = {\n      index: frames.length,\n      screenshotEvent: screenshotEvent,\n    };\n    frames.push(frame);\n  }\n\n  const result: Data = {\n    zeroTime,\n    spanTime,\n    frames: Array.from(frames),\n  };\n\n  const cachedForData =\n      Platform.MapUtilities.getWithDefault(filmStripCache, traceData, () => new Map<Types.Timing.MicroSeconds, Data>());\n  cachedForData.set(zeroTime, result);\n\n  return result;\n}\n\nexport function frameClosestToTimestamp(filmStrip: Data, searchTimestamp: Types.Timing.MicroSeconds): Frame|null {\n  const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(\n      filmStrip.frames, frame => frame.screenshotEvent.ts < searchTimestamp);\n  if (closestFrameIndexBeforeTimestamp === null) {\n    return null;\n  }\n  return filmStrip.frames[closestFrameIndexBeforeTimestamp];\n}\n"]}

package/models/trace/extras/MainThreadActivity.d.ts

@@ -0,0 +1,2 @@
+import * as Types from '../types/types.js';
+export declare function calculateWindow(traceBounds: Types.Timing.TraceWindowMicroSeconds, mainThreadEntries: readonly Types.TraceEvents.SyntheticTraceEntry[]): Types.Timing.TraceWindowMicroSeconds;

package/models/trace/extras/MainThreadActivity.js

@@ -1,61 +1,77 @@
-import * as Helpers from "../helpers/helpers.js";
-import * as Types from "../types/types.js";
-const IDLE_FUNCTION_CALL_NAMES = /* @__PURE__ */ new Set([
-  "(program)",
-  "(idle)",
-  "(root)"
+// 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 Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+const IDLE_FUNCTION_CALL_NAMES = new Set([
+    '(program)',
+    '(idle)',
+    '(root)',
 ]);
 export function calculateWindow(traceBounds, mainThreadEntries) {
-  if (!mainThreadEntries.length) {
-    return traceBounds;
-  }
-  const entriesWithIdleRemoved = mainThreadEntries.filter((entry) => {
-    if (Types.TraceEvents.isProfileCall(entry) && (IDLE_FUNCTION_CALL_NAMES.has(entry.callFrame.functionName) || !entry.callFrame.functionName)) {
-      return false;
+    if (!mainThreadEntries.length) {
+        return traceBounds;
     }
-    return true;
-  });
-  if (entriesWithIdleRemoved.length === 0) {
-    return traceBounds;
-  }
-  function findLowUtilizationRegion(startIndex, stopIndex) {
-    const threshold = 0.1;
-    let cutIndex = startIndex;
-    const entryAtCut = entriesWithIdleRemoved[cutIndex];
-    const timings = Helpers.Timing.eventTimingsMicroSeconds(entryAtCut);
-    let cutTime = (timings.startTime + timings.endTime) / 2;
-    let usedTime = 0;
-    const step = Math.sign(stopIndex - startIndex);
-    for (let i = startIndex; i !== stopIndex; i += step) {
-      const task = entriesWithIdleRemoved[i];
-      const taskTimings = Helpers.Timing.eventTimingsMicroSeconds(task);
-      const taskTime = (taskTimings.startTime + taskTimings.endTime) / 2;
-      const interval = Math.abs(cutTime - taskTime);
-      if (usedTime < threshold * interval) {
-        cutIndex = i;
-        cutTime = taskTime;
-        usedTime = 0;
-      }
-      usedTime += taskTimings.duration;
+    const entriesWithIdleRemoved = mainThreadEntries.filter(entry => {
+        if (Types.TraceEvents.isProfileCall(entry) &&
+            (IDLE_FUNCTION_CALL_NAMES.has(entry.callFrame.functionName) || !entry.callFrame.functionName)) {
+            return false;
+        }
+        return true;
+    });
+    if (entriesWithIdleRemoved.length === 0) {
+        return traceBounds;
     }
-    return cutIndex;
-  }
-  const rightIndex = findLowUtilizationRegion(entriesWithIdleRemoved.length - 1, 0);
-  const leftIndex = findLowUtilizationRegion(0, rightIndex);
-  const leftTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[leftIndex]);
-  const rightTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[rightIndex]);
-  let leftTime = leftTimings.startTime;
-  let rightTime = rightTimings.endTime;
-  const zoomedInSpan = rightTime - leftTime;
-  if (zoomedInSpan < traceBounds.range * 0.1) {
-    return traceBounds;
-  }
-  leftTime = Types.Timing.MicroSeconds(Math.max(leftTime - 0.05 * zoomedInSpan, traceBounds.min));
-  rightTime = Types.Timing.MicroSeconds(Math.min(rightTime + 0.05 * zoomedInSpan, traceBounds.max));
-  return {
-    min: leftTime,
-    max: rightTime,
-    range: Types.Timing.MicroSeconds(rightTime - leftTime)
-  };
+    /**
+     * Calculates regions of low utilization and returns the index of the event
+     * that is the first event that should be included.
+     **/
+    function findLowUtilizationRegion(startIndex, stopIndex) {
+        const threshold = 0.1;
+        let cutIndex = startIndex;
+        const entryAtCut = entriesWithIdleRemoved[cutIndex];
+        const timings = Helpers.Timing.eventTimingsMicroSeconds(entryAtCut);
+        let cutTime = (timings.startTime + timings.endTime) / 2;
+        let usedTime = 0;
+        const step = Math.sign(stopIndex - startIndex);
+        for (let i = startIndex; i !== stopIndex; i += step) {
+            const task = entriesWithIdleRemoved[i];
+            const taskTimings = Helpers.Timing.eventTimingsMicroSeconds(task);
+            const taskTime = (taskTimings.startTime + taskTimings.endTime) / 2;
+            const interval = Math.abs(cutTime - taskTime);
+            if (usedTime < threshold * interval) {
+                cutIndex = i;
+                cutTime = taskTime;
+                usedTime = 0;
+            }
+            usedTime += taskTimings.duration;
+        }
+        return cutIndex;
+    }
+    const rightIndex = findLowUtilizationRegion(entriesWithIdleRemoved.length - 1, 0);
+    const leftIndex = findLowUtilizationRegion(0, rightIndex);
+    const leftTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[leftIndex]);
+    const rightTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[rightIndex]);
+    let leftTime = leftTimings.startTime;
+    let rightTime = rightTimings.endTime;
+    const zoomedInSpan = rightTime - leftTime;
+    if (zoomedInSpan < traceBounds.range * 0.1) {
+        // If the area we have chosen to zoom into is less than 10% of the entire
+        // span, we bail and show the entire trace. It would not be so useful to
+        // the user to zoom in on such a small area; we assume they have
+        // purposefully recorded a trace that contains empty periods of time.
+        return traceBounds;
+    }
+    // Adjust the left time down by 5%, and the right time up by 5%, so that
+    // we give the range we want to zoom a bit of breathing space. At the
+    // same time, ensure that we do not stray beyond the bounds of the
+    // min/max time of the entire trace.
+    leftTime = Types.Timing.MicroSeconds(Math.max(leftTime - 0.05 * zoomedInSpan, traceBounds.min));
+    rightTime = Types.Timing.MicroSeconds(Math.min(rightTime + 0.05 * zoomedInSpan, traceBounds.max));
+    return {
+        min: leftTime,
+        max: rightTime,
+        range: Types.Timing.MicroSeconds(rightTime - leftTime),
+    };
 }
-//# sourceMappingURL=MainThreadActivity.js.map
+//# sourceMappingURL=MainThreadActivity.js.map