@mcp-b/chrome-devtools-mcp 1.1.0 → 1.1.1

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/FirstContentfulPaint.js

@@ -0,0 +1,136 @@
+// Copyright 2024 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 Graph from '../graph/graph.js';
+import { Metric } from './Metric.js';
+class FirstContentfulPaint extends Metric {
+    static get coefficients() {
+        return {
+            intercept: 0,
+            optimistic: 0.5,
+            pessimistic: 0.5,
+        };
+    }
+    /**
+     * Computes the set of URLs that *appeared* to be render-blocking based on our filter,
+     * *but definitely were not* render-blocking based on the timing of their EvaluateScript task.
+     * It also computes the set of corresponding CPU node ids that were needed for the paint at the
+     * given timestamp.
+     */
+    static getRenderBlockingNodeData(graph, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }) {
+        /** A map of blocking script URLs to the earliest EvaluateScript task node that executed them. */
+        const scriptUrlToNodeMap = new Map();
+        const cpuNodes = [];
+        graph.traverse(node => {
+            if (node.type === Graph.BaseNode.types.CPU) {
+                // A task is *possibly* render blocking if it *started* before cutoffTimestamp.
+                // We use startTime here because the paint event can be *inside* the task that was render blocking.
+                if (node.startTime <= cutoffTimestamp) {
+                    cpuNodes.push(node);
+                }
+                // Build our script URL map to find the earliest EvaluateScript task node.
+                const scriptUrls = node.getEvaluateScriptURLs();
+                for (const url of scriptUrls) {
+                    // Use the earliest CPU node we find.
+                    const existing = scriptUrlToNodeMap.get(url) || node;
+                    scriptUrlToNodeMap.set(url, node.startTime < existing.startTime ? node : existing);
+                }
+            }
+        });
+        cpuNodes.sort((a, b) => a.startTime - b.startTime);
+        // A script is *possibly* render blocking if it finished loading before cutoffTimestamp.
+        const possiblyRenderBlockingScriptUrls = Metric.getScriptUrls(graph, node => {
+            // The optimistic LCP treatNodeAsRenderBlocking fn wants to exclude some images in the graph,
+            // but here it only receives scripts to evaluate. It's a no-op in this case, but it will
+            // matter below in the getFirstPaintBasedGraph clone operation.
+            return node.endTime <= cutoffTimestamp && treatNodeAsRenderBlocking(node);
+        });
+        // A script is *definitely not* render blocking if its EvaluateScript task started after cutoffTimestamp.
+        const definitelyNotRenderBlockingScriptUrls = new Set();
+        const renderBlockingCpuNodeIds = new Set();
+        for (const url of possiblyRenderBlockingScriptUrls) {
+            // Lookup the CPU node that had the earliest EvaluateScript for this URL.
+            const cpuNodeForUrl = scriptUrlToNodeMap.get(url);
+            // If we can't find it at all, we can't conclude anything, so just skip it.
+            if (!cpuNodeForUrl) {
+                continue;
+            }
+            // If we found it and it was in our `cpuNodes` set that means it finished before cutoffTimestamp, so it really is render-blocking.
+            if (cpuNodes.includes(cpuNodeForUrl)) {
+                renderBlockingCpuNodeIds.add(cpuNodeForUrl.id);
+                continue;
+            }
+            // We couldn't find the evaluate script in the set of CPU nodes that ran before our paint, so
+            // it must not have been necessary for the paint.
+            definitelyNotRenderBlockingScriptUrls.add(url);
+        }
+        // The first layout, first paint, and first ParseHTML are almost always necessary for first paint,
+        // so we always include those CPU nodes.
+        const firstLayout = cpuNodes.find(node => node.didPerformLayout());
+        if (firstLayout) {
+            renderBlockingCpuNodeIds.add(firstLayout.id);
+        }
+        const firstPaint = cpuNodes.find(node => node.childEvents.some(e => e.name === 'Paint'));
+        if (firstPaint) {
+            renderBlockingCpuNodeIds.add(firstPaint.id);
+        }
+        const firstParse = cpuNodes.find(node => node.childEvents.some(e => e.name === 'ParseHTML'));
+        if (firstParse) {
+            renderBlockingCpuNodeIds.add(firstParse.id);
+        }
+        // If a CPU filter was passed in, we also want to include those extra nodes.
+        if (additionalCpuNodesToTreatAsRenderBlocking) {
+            cpuNodes.filter(additionalCpuNodesToTreatAsRenderBlocking).forEach(node => renderBlockingCpuNodeIds.add(node.id));
+        }
+        return {
+            definitelyNotRenderBlockingScriptUrls,
+            renderBlockingCpuNodeIds,
+        };
+    }
+    /**
+     * Computes the graph required for the first paint of interest.
+     */
+    static getFirstPaintBasedGraph(dependencyGraph, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }) {
+        const rbData = this.getRenderBlockingNodeData(dependencyGraph, {
+            cutoffTimestamp,
+            treatNodeAsRenderBlocking,
+            additionalCpuNodesToTreatAsRenderBlocking,
+        });
+        const { definitelyNotRenderBlockingScriptUrls, renderBlockingCpuNodeIds } = rbData;
+        return dependencyGraph.cloneWithRelationships(node => {
+            if (node.type === Graph.BaseNode.types.NETWORK) {
+                // Exclude all nodes that ended after cutoffTimestamp (except for the main document which we always consider necessary)
+                // endTime is negative if request does not finish, make sure startTime isn't after cutoffTimestamp in this case.
+                const endedAfterPaint = node.endTime > cutoffTimestamp || node.startTime > cutoffTimestamp;
+                if (endedAfterPaint && !node.isMainDocument()) {
+                    return false;
+                }
+                const url = node.request.url;
+                // If the URL definitely wasn't render-blocking then we filter it out.
+                if (definitelyNotRenderBlockingScriptUrls.has(url)) {
+                    return false;
+                }
+                // Lastly, build up the FCP graph of all nodes we consider render blocking
+                return treatNodeAsRenderBlocking(node);
+            }
+            // If it's a CPU node, just check if it was blocking.
+            return renderBlockingCpuNodeIds.has(node.id);
+        });
+    }
+    static getOptimisticGraph(dependencyGraph, processedNavigation) {
+        return this.getFirstPaintBasedGraph(dependencyGraph, {
+            cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
+            // In the optimistic graph we exclude resources that appeared to be render blocking but were
+            // initiated by a script. While they typically have a very high importance and tend to have a
+            // significant impact on the page's content, these resources don't technically block rendering.
+            treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority() && node.initiatorType !== 'script',
+        });
+    }
+    static getPessimisticGraph(dependencyGraph, processedNavigation) {
+        return this.getFirstPaintBasedGraph(dependencyGraph, {
+            cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
+            treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority(),
+        });
+    }
+}
+export { FirstContentfulPaint };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/Interactive.js

@@ -0,0 +1,67 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import * as Graph from '../graph/graph.js';
+import { Metric, } from './Metric.js';
+// Any CPU task of 20 ms or more will end up being a critical long task on mobile
+const CRITICAL_LONG_TASK_THRESHOLD = 20;
+class Interactive extends Metric {
+    static get coefficients() {
+        return {
+            intercept: 0,
+            optimistic: 0.45,
+            pessimistic: 0.55,
+        };
+    }
+    static getOptimisticGraph(dependencyGraph) {
+        // Adjust the critical long task threshold for microseconds
+        const minimumCpuTaskDuration = CRITICAL_LONG_TASK_THRESHOLD * 1000;
+        return dependencyGraph.cloneWithRelationships(node => {
+            // Include everything that might be a long task
+            if (node.type === Graph.BaseNode.types.CPU) {
+                return node.duration > minimumCpuTaskDuration;
+            }
+            // Include all scripts and high priority requests, exclude all images
+            const isImage = node.request.resourceType === 'Image';
+            const isScript = node.request.resourceType === 'Script';
+            return (!isImage && (isScript || node.request.priority === 'High' || node.request.priority === 'VeryHigh'));
+        });
+    }
+    static getPessimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getEstimateFromSimulation(simulationResult, extras) {
+        if (!extras.lcpResult) {
+            throw new Core.LanternError('missing lcpResult');
+        }
+        const lastTaskAt = Interactive.getLastLongTaskEndTime(simulationResult.nodeTimings);
+        const minimumTime = extras.optimistic ? extras.lcpResult.optimisticEstimate.timeInMs :
+            extras.lcpResult.pessimisticEstimate.timeInMs;
+        return {
+            timeInMs: Math.max(minimumTime, lastTaskAt),
+            nodeTimings: simulationResult.nodeTimings,
+        };
+    }
+    static compute(data, extras) {
+        const lcpResult = extras?.lcpResult;
+        if (!lcpResult) {
+            throw new Core.LanternError('LCP is required to calculate the Interactive metric');
+        }
+        const metricResult = super.compute(data, extras);
+        metricResult.timing = Math.max(metricResult.timing, lcpResult.timing);
+        return metricResult;
+    }
+    static getLastLongTaskEndTime(nodeTimings, duration = 50) {
+        return Array.from(nodeTimings.entries())
+            .filter(([node, timing]) => {
+            if (node.type !== Graph.BaseNode.types.CPU) {
+                return false;
+            }
+            return timing.duration > duration;
+        })
+            .map(([_, timing]) => timing.endTime)
+            .reduce((max, x) => Math.max(max || 0, x || 0), 0);
+    }
+}
+export { Interactive };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/LargestContentfulPaint.js

@@ -0,0 +1,68 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import { FirstContentfulPaint } from './FirstContentfulPaint.js';
+import { Metric, } from './Metric.js';
+class LargestContentfulPaint extends Metric {
+    static get coefficients() {
+        return {
+            intercept: 0,
+            optimistic: 0.5,
+            pessimistic: 0.5,
+        };
+    }
+    /**
+     * Low priority image nodes are usually offscreen and very unlikely to be the
+     * resource that is required for LCP. Our LCP graphs include everything except for these images.
+     */
+    static isNotLowPriorityImageNode(node) {
+        if (node.type !== 'network') {
+            return true;
+        }
+        const isImage = node.request.resourceType === 'Image';
+        const isLowPriority = node.request.priority === 'Low' || node.request.priority === 'VeryLow';
+        return !isImage || !isLowPriority;
+    }
+    static getOptimisticGraph(dependencyGraph, processedNavigation) {
+        const lcp = processedNavigation.timestamps.largestContentfulPaint;
+        if (!lcp) {
+            throw new Core.LanternError('NO_LCP');
+        }
+        return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+            cutoffTimestamp: lcp,
+            treatNodeAsRenderBlocking: LargestContentfulPaint.isNotLowPriorityImageNode,
+        });
+    }
+    static getPessimisticGraph(dependencyGraph, processedNavigation) {
+        const lcp = processedNavigation.timestamps.largestContentfulPaint;
+        if (!lcp) {
+            throw new Core.LanternError('NO_LCP');
+        }
+        return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+            cutoffTimestamp: lcp,
+            treatNodeAsRenderBlocking: _ => true,
+            // For pessimistic LCP we'll include *all* layout nodes
+            additionalCpuNodesToTreatAsRenderBlocking: node => node.didPerformLayout(),
+        });
+    }
+    static getEstimateFromSimulation(simulationResult) {
+        const nodeTimesNotOffscreenImages = Array.from(simulationResult.nodeTimings.entries())
+            .filter(entry => LargestContentfulPaint.isNotLowPriorityImageNode(entry[0]))
+            .map(entry => entry[1].endTime);
+        return {
+            timeInMs: Math.max(...nodeTimesNotOffscreenImages),
+            nodeTimings: simulationResult.nodeTimings,
+        };
+    }
+    static compute(data, extras) {
+        const fcpResult = extras?.fcpResult;
+        if (!fcpResult) {
+            throw new Core.LanternError('FCP is required to calculate the LCP metric');
+        }
+        const metricResult = super.compute(data, extras);
+        metricResult.timing = Math.max(metricResult.timing, fcpResult.timing);
+        return metricResult;
+    }
+}
+export { LargestContentfulPaint };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/MaxPotentialFID.js

@@ -0,0 +1,48 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import * as Graph from '../graph/graph.js';
+import { Metric, } from './Metric.js';
+class MaxPotentialFID extends Metric {
+    static get coefficients() {
+        return {
+            intercept: 0,
+            optimistic: 0.5,
+            pessimistic: 0.5,
+        };
+    }
+    static getOptimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getPessimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getEstimateFromSimulation(simulation, extras) {
+        if (!extras.fcpResult) {
+            throw new Core.LanternError('missing fcpResult');
+        }
+        // Intentionally use the opposite FCP estimate, a more pessimistic FCP means that more tasks
+        // are excluded from the FID computation, so a higher FCP means lower FID for same work.
+        const fcpTimeInMs = extras.optimistic ? extras.fcpResult.pessimisticEstimate.timeInMs :
+            extras.fcpResult.optimisticEstimate.timeInMs;
+        const timings = MaxPotentialFID.getTimingsAfterFCP(simulation.nodeTimings, fcpTimeInMs);
+        return {
+            timeInMs: Math.max(...timings.map(timing => timing.duration), 16),
+            nodeTimings: simulation.nodeTimings,
+        };
+    }
+    static compute(data, extras) {
+        const fcpResult = extras?.fcpResult;
+        if (!fcpResult) {
+            throw new Core.LanternError('FCP is required to calculate the Max Potential FID metric');
+        }
+        return super.compute(data, extras);
+    }
+    static getTimingsAfterFCP(nodeTimings, fcpTimeInMs) {
+        return Array.from(nodeTimings.entries())
+            .filter(([node, timing]) => node.type === Graph.BaseNode.types.CPU && timing.endTime > fcpTimeInMs)
+            .map(([_, timing]) => timing);
+    }
+}
+export { MaxPotentialFID };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/Metric.js

@@ -0,0 +1,68 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import * as Graph from '../graph/graph.js';
+class Metric {
+    static getScriptUrls(dependencyGraph, treatNodeAsRenderBlocking) {
+        const scriptUrls = new Set();
+        dependencyGraph.traverse(node => {
+            if (node.type !== Graph.BaseNode.types.NETWORK) {
+                return;
+            }
+            if (node.request.resourceType !== 'Script') {
+                return;
+            }
+            if (treatNodeAsRenderBlocking?.(node)) {
+                scriptUrls.add(node.request.url);
+            }
+        });
+        return scriptUrls;
+    }
+    static get coefficients() {
+        throw new Core.LanternError('coefficients unimplemented!');
+    }
+    /**
+     * Returns the coefficients, scaled by the throttling settings if needed by the metric.
+     * Some lantern metrics (speed-index) use components in their estimate that are not
+     * from the simulator. In this case, we need to adjust the coefficients as the target throttling
+     * settings change.
+     */
+    static getScaledCoefficients(_rttMs) {
+        return this.coefficients;
+    }
+    static getOptimisticGraph(_dependencyGraph, _processedNavigation) {
+        throw new Core.LanternError('Optimistic graph unimplemented!');
+    }
+    static getPessimisticGraph(_dependencyGraph, _processedNavigation) {
+        throw new Core.LanternError('Pessmistic graph unimplemented!');
+    }
+    static getEstimateFromSimulation(simulationResult, _extras) {
+        return simulationResult;
+    }
+    static compute(data, extras) {
+        const { simulator, graph, processedNavigation } = data;
+        const metricName = this.name.replace('Lantern', '');
+        const optimisticGraph = this.getOptimisticGraph(graph, processedNavigation);
+        const pessimisticGraph = this.getPessimisticGraph(graph, processedNavigation);
+        let simulateOptions = { label: `optimistic${metricName}` };
+        const optimisticSimulation = simulator.simulate(optimisticGraph, simulateOptions);
+        simulateOptions = { label: `pessimistic${metricName}` };
+        const pessimisticSimulation = simulator.simulate(pessimisticGraph, simulateOptions);
+        const optimisticEstimate = this.getEstimateFromSimulation(optimisticSimulation, { ...extras, optimistic: true });
+        const pessimisticEstimate = this.getEstimateFromSimulation(pessimisticSimulation, { ...extras, optimistic: false });
+        const coefficients = this.getScaledCoefficients(simulator.rtt);
+        // Estimates under 1s don't really follow the normal curve fit, minimize the impact of the intercept
+        const interceptMultiplier = coefficients.intercept > 0 ? Math.min(1, optimisticEstimate.timeInMs / 1000) : 1;
+        const timing = coefficients.intercept * interceptMultiplier +
+            coefficients.optimistic * optimisticEstimate.timeInMs + coefficients.pessimistic * pessimisticEstimate.timeInMs;
+        return {
+            timing,
+            optimisticEstimate,
+            pessimisticEstimate,
+            optimisticGraph,
+            pessimisticGraph,
+        };
+    }
+}
+export { Metric };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/SpeedIndex.js

@@ -0,0 +1,101 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import * as Graph from '../graph/graph.js';
+import { Metric, } from './Metric.js';
+const mobileSlow4GRtt = 150;
+class SpeedIndex extends Metric {
+    static get coefficients() {
+        return {
+            // Note that the optimistic estimate is based on the real observed speed index rather than a
+            // real lantern graph (and the final estimate will be Math.max(FCP, Speed Index)).
+            intercept: 0,
+            optimistic: 1.4,
+            pessimistic: 0.4,
+        };
+    }
+    static getScaledCoefficients(rttMs) {
+        // We want to scale our default coefficients based on the speed of the connection.
+        // We will linearly interpolate coefficients for the passed-in rttMs based on two pre-determined points:
+        //   1. Baseline point of 30 ms RTT where Speed Index should be a ~50/50 blend of optimistic/pessimistic.
+        //      30 ms was based on a typical home WiFi connection's actual RTT.
+        //      Coefficients here follow from the fact that the optimistic estimate should be very close
+        //      to reality at this connection speed and the pessimistic estimate compensates for minor
+        //      connection speed differences.
+        //   2. Default throttled point of 150 ms RTT where the default coefficients have been determined to be most accurate.
+        //      Coefficients here were determined through thorough analysis and linear regression on the
+        //      lantern test data set. See core/scripts/test-lantern.sh for more detail.
+        // While the coefficients haven't been analyzed at the interpolated points, it's our current best effort.
+        const defaultCoefficients = this.coefficients;
+        const defaultRttExcess = mobileSlow4GRtt - 30;
+        const multiplier = Math.max((rttMs - 30) / defaultRttExcess, 0);
+        return {
+            intercept: defaultCoefficients.intercept * multiplier,
+            optimistic: 0.5 + (defaultCoefficients.optimistic - 0.5) * multiplier,
+            pessimistic: 0.5 + (defaultCoefficients.pessimistic - 0.5) * multiplier,
+        };
+    }
+    static getOptimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getPessimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getEstimateFromSimulation(simulationResult, extras) {
+        if (!extras.fcpResult) {
+            throw new Core.LanternError('missing fcpResult');
+        }
+        if (extras.observedSpeedIndex === undefined) {
+            throw new Core.LanternError('missing observedSpeedIndex');
+        }
+        const fcpTimeInMs = extras.fcpResult.pessimisticEstimate.timeInMs;
+        const estimate = extras.optimistic ?
+            extras.observedSpeedIndex :
+            SpeedIndex.computeLayoutBasedSpeedIndex(simulationResult.nodeTimings, fcpTimeInMs);
+        return {
+            timeInMs: estimate,
+            nodeTimings: simulationResult.nodeTimings,
+        };
+    }
+    static compute(data, extras) {
+        const fcpResult = extras?.fcpResult;
+        if (!fcpResult) {
+            throw new Core.LanternError('FCP is required to calculate the SpeedIndex metric');
+        }
+        const metricResult = super.compute(data, extras);
+        metricResult.timing = Math.max(metricResult.timing, fcpResult.timing);
+        return metricResult;
+    }
+    /**
+     * Approximate speed index using layout events from the simulated node timings.
+     * The layout-based speed index is the weighted average of the endTime of CPU nodes that contained
+     * a 'Layout' task. log(duration) is used as the weight to stand for "significance" to the page.
+     *
+     * If no layout events can be found or the endTime of a CPU task is too early, FCP is used instead.
+     *
+     * This approach was determined after evaluating the accuracy/complexity tradeoff of many
+     * different methods. Read more in the evaluation doc.
+     *
+     * @see https://docs.google.com/document/d/1qJWXwxoyVLVadezIp_Tgdk867G3tDNkkVRvUJSH3K1E/edit#
+     */
+    static computeLayoutBasedSpeedIndex(nodeTimings, fcpTimeInMs) {
+        const layoutWeights = [];
+        for (const [node, timing] of nodeTimings.entries()) {
+            if (node.type !== Graph.BaseNode.types.CPU) {
+                continue;
+            }
+            if (node.childEvents.some(x => x.name === 'Layout')) {
+                const timingWeight = Math.max(Math.log2(timing.endTime - timing.startTime), 0);
+                layoutWeights.push({ time: timing.endTime, weight: timingWeight });
+            }
+        }
+        const totalWeightedTime = layoutWeights.map(evt => evt.weight * Math.max(evt.time, fcpTimeInMs)).reduce((a, b) => a + b, 0);
+        const totalWeight = layoutWeights.map(evt => evt.weight).reduce((a, b) => a + b, 0);
+        if (!totalWeight) {
+            return fcpTimeInMs;
+        }
+        return totalWeightedTime / totalWeight;
+    }
+}
+export { SpeedIndex };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/TBTUtils.js

@@ -0,0 +1,64 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+const BLOCKING_TIME_THRESHOLD = 50;
+/**
+ * For TBT, We only want to consider tasks that fall in our time range
+ * - FCP and TTI for navigation mode
+ * - Trace start and trace end for timespan mode
+ *
+ * FCP is picked as `startTimeMs` because there is little risk of user input happening
+ * before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
+ * optimizing to reach FCP as fast as possible without having to worry about task lengths.
+ *
+ * TTI is picked as `endTimeMs` because we want a well defined end point for page load.
+ *
+ * @param startTimeMs Should be FCP in navigation mode and the trace start time in timespan mode
+ * @param endTimeMs Should be TTI in navigation mode and the trace end time in timespan mode
+ * @param topLevelEvent Leave unset if `event` is top level. Has no effect if `event` has the same duration as `topLevelEvent`.
+ */
+function calculateTbtImpactForEvent(event, startTimeMs, endTimeMs, topLevelEvent) {
+    let threshold = BLOCKING_TIME_THRESHOLD;
+    // If a task is not top level, it doesn't make sense to subtract the entire 50ms
+    // blocking threshold from the event.
+    //
+    // e.g. A 80ms top level task with two 40ms children should attribute some blocking
+    // time to the 40ms tasks even though they do not meet the 50ms threshold.
+    //
+    // The solution is to scale the threshold for child events to be considered blocking.
+    if (topLevelEvent) {
+        threshold *= (event.duration / topLevelEvent.duration);
+    }
+    if (event.duration < threshold) {
+        return 0;
+    }
+    if (event.end < startTimeMs) {
+        return 0;
+    }
+    if (event.start > endTimeMs) {
+        return 0;
+    }
+    // Perform the clipping and then calculate Blocking Region. So if we have a 150ms task
+    // [0, 150] and `startTimeMs` is at 50ms, we first clip the task to [50, 150], and then
+    // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before
+    // the start time are unimportant, so we care whether the main thread is busy more than
+    // 50ms at a time only after the start time.
+    const clippedStart = Math.max(event.start, startTimeMs);
+    const clippedEnd = Math.min(event.end, endTimeMs);
+    const clippedDuration = clippedEnd - clippedStart;
+    if (clippedDuration < threshold) {
+        return 0;
+    }
+    return clippedDuration - threshold;
+}
+function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
+    if (endTimeMs <= startTimeMs) {
+        return 0;
+    }
+    let sumBlockingTime = 0;
+    for (const event of topLevelEvents) {
+        sumBlockingTime += calculateTbtImpactForEvent(event, startTimeMs, endTimeMs);
+    }
+    return sumBlockingTime;
+}
+export { BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime, calculateTbtImpactForEvent, };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/TotalBlockingTime.js

@@ -0,0 +1,78 @@
+// Copyright 2024 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 Core from '../core/core.js';
+import * as Graph from '../graph/graph.js';
+import { Metric, } from './Metric.js';
+import { BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime } from './TBTUtils.js';
+class TotalBlockingTime extends Metric {
+    static get coefficients() {
+        return {
+            intercept: 0,
+            optimistic: 0.5,
+            pessimistic: 0.5,
+        };
+    }
+    static getOptimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getPessimisticGraph(dependencyGraph) {
+        return dependencyGraph;
+    }
+    static getEstimateFromSimulation(simulation, extras) {
+        if (!extras.fcpResult) {
+            throw new Core.LanternError('missing fcpResult');
+        }
+        if (!extras.interactiveResult) {
+            throw new Core.LanternError('missing interactiveResult');
+        }
+        // Intentionally use the opposite FCP estimate. A pessimistic FCP is higher than equal to an
+        // optimistic FCP, which means potentially more tasks are excluded from the Total Blocking Time
+        // computation. So a more pessimistic FCP gives a more optimistic Total Blocking Time for the
+        // same work.
+        const fcpTimeInMs = extras.optimistic ? extras.fcpResult.pessimisticEstimate.timeInMs :
+            extras.fcpResult.optimisticEstimate.timeInMs;
+        // Similarly, we always have pessimistic TTI >= optimistic TTI. Therefore, picking optimistic
+        // TTI means our window of interest is smaller and thus potentially more tasks are excluded from
+        // Total Blocking Time computation, yielding a lower (more optimistic) Total Blocking Time value
+        // for the same work.
+        const interactiveTimeMs = extras.optimistic ? extras.interactiveResult.optimisticEstimate.timeInMs :
+            extras.interactiveResult.pessimisticEstimate.timeInMs;
+        const minDurationMs = BLOCKING_TIME_THRESHOLD;
+        const events = TotalBlockingTime.getTopLevelEvents(simulation.nodeTimings, minDurationMs);
+        return {
+            timeInMs: calculateSumOfBlockingTime(events, fcpTimeInMs, interactiveTimeMs),
+            nodeTimings: simulation.nodeTimings,
+        };
+    }
+    static compute(data, extras) {
+        const fcpResult = extras?.fcpResult;
+        if (!fcpResult) {
+            throw new Core.LanternError('FCP is required to calculate the TBT metric');
+        }
+        const interactiveResult = extras?.fcpResult;
+        if (!interactiveResult) {
+            throw new Core.LanternError('Interactive is required to calculate the TBT metric');
+        }
+        return super.compute(data, extras);
+    }
+    static getTopLevelEvents(nodeTimings, minDurationMs) {
+        const events = [];
+        for (const [node, timing] of nodeTimings.entries()) {
+            if (node.type !== Graph.BaseNode.types.CPU) {
+                continue;
+            }
+            // Filtering out events below minimum duration.
+            if (timing.duration < minDurationMs) {
+                continue;
+            }
+            events.push({
+                start: timing.startTime,
+                end: timing.endTime,
+                duration: timing.duration,
+            });
+        }
+        return events;
+    }
+}
+export { TotalBlockingTime };

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/lantern/metrics/metrics.js

@@ -0,0 +1,11 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+export * from './FirstContentfulPaint.js';
+export * from './Interactive.js';
+export * from './LargestContentfulPaint.js';
+export * from './MaxPotentialFID.js';
+export * from './Metric.js';
+export * from './SpeedIndex.js';
+export * from './TotalBlockingTime.js';
+export * as TBTUtils from './TBTUtils.js';