lighthouse 8.6.0-dev.20211031 → 8.6.0-dev.20211101

package/flow-report/src/app.tsx

@@ -5,25 +5,24 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useRef, useState} from 'preact/hooks';
+import {useLayoutEffect, useRef, useState} from 'preact/hooks';
 
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {classNames, FlowResultContext, useCurrentLhr, useHashParam} from './util';
+import {classNames, FlowResultContext, useHashState} from './util';
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
 
 const Content: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-  const anchor = useHashParam('anchor');
+  const hashState = useHashState();
   const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (anchor) {
-      const el = document.getElementById(anchor);
+  useLayoutEffect(() => {
+    if (hashState && hashState.anchor) {
+      const el = document.getElementById(hashState.anchor);
       if (el) {
         el.scrollIntoView({behavior: 'smooth'});
         return;
@@ -32,15 +31,15 @@ const Content: FunctionComponent = () => {
 
     // Scroll to top no anchor is found.
     if (ref.current) ref.current.scrollTop = 0;
-  }, [anchor, currentLhr]);
+  }, [hashState]);
 
   return (
     <div ref={ref} className="Content">
       {
-        currentLhr ?
+        hashState ?
           <>
-            <Header currentLhr={currentLhr}/>
-            <Report currentLhr={currentLhr}/>
+            <Header hashState={hashState}/>
+            <Report hashState={hashState}/>
           </> :
           <Summary/>
       }

package/flow-report/src/common.tsx

@@ -76,7 +76,7 @@ export const FlowStepThumbnail: FunctionComponent<{
   width?: number,
   height?: number,
 }> = ({lhr, width, height}) => {
-  const screenshot = getFullPageScreenshot(lhr);
+  const fullPageScreenshot = getFullPageScreenshot(lhr);
   const frames = getFilmstripFrames(lhr);
 
   // Resize the image to fit the viewport aspect ratio.
@@ -92,16 +92,22 @@ export const FlowStepThumbnail: FunctionComponent<{
     return <></>;
   }
 
-  if (lhr.gatherMode === 'timespan' && frames && frames.length) {
-    return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+  let thumbnail;
+  if (frames && frames.length) {
+    thumbnail = frames[frames.length - 1].data;
+    if (lhr.gatherMode === 'timespan') {
+      return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+    }
+  } else {
+    thumbnail = fullPageScreenshot?.screenshot.data;
   }
 
   return <>
     {
-      screenshot &&
+      thumbnail &&
         <img
           className="FlowStepThumbnail"
-          src={screenshot.screenshot.data}
+          src={thumbnail}
           style={{width, height}}
           alt="Screenshot of a page tested by Lighthouse"
         />

package/flow-report/src/header.tsx

@@ -29,10 +29,10 @@ const HeaderThumbnail: FunctionComponent<{
   );
 };
 
-export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Header: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
   const flowResult = useFlowResult();
-  const {index} = currentLhr;
+  const {index} = hashState;
 
   const step = flowResult.steps[index];
   const prevStep = flowResult.steps[index - 1];

package/flow-report/src/sidebar/flow.tsx

@@ -7,7 +7,7 @@
 import {FunctionComponent} from 'preact';
 
 import {FlowSegment} from '../common';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {Separator} from '../common';
 
 const SidebarFlowStep: FunctionComponent<{
@@ -41,7 +41,7 @@ const SidebarFlowSeparator: FunctionComponent = () => {
 
 export const SidebarFlow: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
 
   return (
     <div className="SidebarFlow">
@@ -61,7 +61,7 @@ export const SidebarFlow: FunctionComponent = () => {
               mode={lhr.gatherMode}
               href={url.href}
               label={name}
-              isCurrent={index === (currentLhr && currentLhr.index)}
+              isCurrent={index === (hashState && hashState.index)}
             />
           </>;
         })

package/flow-report/src/sidebar/sidebar.tsx

@@ -9,11 +9,11 @@ import {FunctionComponent} from 'preact';
 import {Separator} from '../common';
 import {useI18n, useLocalizedStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
 export const SidebarSummary: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
   const strings = useLocalizedStrings();
 
   const url = new URL(location.href);
@@ -21,7 +21,7 @@ export const SidebarSummary: FunctionComponent = () => {
   return (
     <a
       href={url.href}
-      className={classNames('SidebarSummary', {'Sidebar--current': currentLhr === null})}
+      className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >
       <div className="SidebarSummary__icon">

package/flow-report/src/summary/category.tsx

@@ -64,8 +64,8 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
     return audit.result.score !== null &&
       // Metrics should not be displayed in this group.
       audit.group !== 'metrics' &&
-      // Audits in performance without a group are hidden.
-      (audit.group !== undefined || category.id !== 'performance') &&
+      // Audits in performance group "hidden" should not be counted.
+      (audit.group !== 'hidden' || category.id !== 'performance') &&
       // We don't want unweighted audits except for opportunities with potential savings.
       (audit.weight > 0 || getOverallSavings(audit) > 0) &&
       // Passing audits should never be high impact.

package/flow-report/src/util.ts

@@ -79,27 +79,27 @@ export function useFlowResult(): LH.FlowResult {
   return flowResult;
 }
 
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
+export function useHashParams(...params: string[]) {
+  const [paramValues, setParamValues] = useState(params.map(getHashParam));
 
   // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
+  // Triggers a re-render if any param changes.
   useEffect(() => {
     function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
+      const newParamValues = params.map(getHashParam);
+      if (newParamValues.every((value, i) => value === paramValues[i])) return;
+      setParamValues(newParamValues);
     }
     window.addEventListener('hashchange', hashListener);
     return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
+  }, [paramValues]);
 
-  return paramValue;
+  return paramValues;
 }
 
-export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
+export function useHashState(): LH.FlowResult.HashState|null {
   const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
+  const [indexString, anchor] = useHashParams('index', 'anchor');
 
   // Memoize result so a new object is not created on every call.
   return useMemo(() => {
@@ -117,6 +117,6 @@ export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
       return null;
     }
 
-    return {value: step.lhr, index};
-  }, [indexString, flowResult]);
+    return {currentLhr: step.lhr, index, anchor};
+  }, [indexString, flowResult, anchor]);
 }

package/flow-report/src/wrappers/report.tsx

@@ -30,20 +30,25 @@ export function convertChildAnchors(element: HTMLElement, index: number) {
 
     const nodeId = link.hash.substr(1);
     link.hash = `#index=${index}&anchor=${nodeId}`;
+    link.onclick = e => {
+      e.preventDefault();
+      const el = document.getElementById(nodeId);
+      if (el) el.scrollIntoView();
+    };
   }
 }
 
-export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
   const {dom, reportRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     if (ref.current) {
       dom.clearComponentCache();
-      reportRenderer.renderReport(currentLhr.value, ref.current);
-      convertChildAnchors(ref.current, currentLhr.index);
-      const fullPageScreenshot = getFullPageScreenshot(currentLhr.value);
+      reportRenderer.renderReport(hashState.currentLhr, ref.current);
+      convertChildAnchors(ref.current, hashState.index);
+      const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
       if (fullPageScreenshot) {
         const container = dom.find('.lh-container', ref.current);
         ElementScreenshotRenderer.installOverlayFeature({
@@ -60,7 +65,7 @@ export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
     return () => {
       if (ref.current) ref.current.textContent = '';
     };
-  }, [reportRenderer, currentLhr]);
+  }, [reportRenderer, hashState]);
 
   return (
     <div ref={ref} className="lh-root" data-testid="Report"/>

package/flow-report/test/common-test.tsx

@@ -24,10 +24,19 @@ describe('FlowStepThumbnail', () => {
         'full-page-screenshot': {
           details: {
             type: 'full-page-screenshot',
-            screenshot: {data: 'baef01', width: 400, height: 600},
+            screenshot: {data: 'FPS', width: 400, height: 600},
             nodes: {},
           },
         },
+        'screenshot-thumbnails': {
+          details: {
+            type: 'filmstrip',
+            items: [
+              {data: 'frame1'},
+              {data: 'frame2'},
+            ],
+          },
+        },
       },
     } as any;
   });
@@ -63,17 +72,23 @@ describe('FlowStepThumbnail', () => {
     expect(thumbnail.style.height).toEqual('150px');
   });
 
+  it('uses last filmstrip thumbnail', () => {
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('frame2');
+  });
+
+  it('uses full page screenshot if filmstrip unavailable', () => {
+    delete lhr.audits['screenshot-thumbnails'];
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('FPS');
+  });
+
   it('renders animated thumbnail for timespan', async () => {
     lhr.gatherMode = 'timespan';
-    lhr.audits['screenshot-thumbnails'] = {
-      details: {
-        type: 'filmstrip',
-        items: [
-          {data: 'frame1'},
-          {data: 'frame2'},
-        ],
-      },
-    } as any;
     const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;

package/flow-report/test/header-test.tsx

@@ -25,8 +25,8 @@ beforeEach(() => {
 });
 
 it('renders all sections for a middle step', () => {
-  const currentLhr = {index: 1} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 1} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();
@@ -35,8 +35,8 @@ it('renders all sections for a middle step', () => {
 });
 
 it('renders only next section for first step', () => {
-  const currentLhr = {index: 0} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 0} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeFalsy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeFalsy();
@@ -45,8 +45,8 @@ it('renders only next section for first step', () => {
 });
 
 it('renders only previous section for last step', () => {
-  const currentLhr = {index: 3} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 3} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();

package/flow-report/test/summary/category-test.tsx

@@ -51,7 +51,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -76,7 +76,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -101,7 +101,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('100')).toBeTruthy();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -127,7 +127,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('2 passable audits')).toBeTruthy();
     expect(root.getByText('1 informative audit')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders highest impact audits', async () => {
@@ -192,7 +192,7 @@ describe('SummaryTooltip', () => {
       auditRefs: [
         /* eslint-disable max-len */
         {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'hidden'},
         {result: {score: null, scoreDisplayMode: 'informative', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
         /* eslint-enable max-len */
       ],

package/flow-report/test/util-test.tsx

@@ -9,7 +9,7 @@ import {renderHook} from '@testing-library/preact-hooks';
 import {FunctionComponent} from 'preact';
 import {act} from 'preact/test-utils';
 
-import {FlowResultContext, useCurrentLhr} from '../src/util';
+import {FlowResultContext, useHashState} from '../src/util';
 import {flowResult} from './sample-flow';
 
 let wrapper: FunctionComponent;
@@ -21,54 +21,75 @@ beforeEach(() => {
   );
 });
 
-describe('useCurrentLhr', () => {
+describe('useHashState', () => {
   it('gets current lhr index from url hash', () => {
     global.location.hash = '#index=1';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).not.toHaveBeenCalled();
     expect(result.current).toEqual({
       index: 1,
-      value: flowResult.steps[1].lhr,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: null,
+    });
+  });
+
+  it('gets anchor id from url hash', () => {
+    global.location.hash = '#index=1&anchor=seo';
+    const {result} = renderHook(() => useHashState(), {wrapper});
+    expect(console.warn).not.toHaveBeenCalled();
+    expect(result.current).toEqual({
+      index: 1,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: 'seo',
     });
   });
 
   it('changes on navigation', async () => {
     global.location.hash = '#index=1';
-    const render = renderHook(() => useCurrentLhr(), {wrapper});
+    const render = renderHook(() => useHashState(), {wrapper});
 
     expect(render.result.current).toEqual({
       index: 1,
-      value: flowResult.steps[1].lhr,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: null,
     });
 
     await act(() => {
-      global.location.hash = '#index=2';
+      global.location.hash = '#index=2&anchor=seo';
     });
     await render.waitForNextUpdate();
 
     expect(console.warn).not.toHaveBeenCalled();
     expect(render.result.current).toEqual({
       index: 2,
-      value: flowResult.steps[2].lhr,
+      currentLhr: flowResult.steps[2].lhr,
+      anchor: 'seo',
     });
   });
 
   it('return null if lhr index is unset', () => {
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).not.toHaveBeenCalled();
     expect(result.current).toBeNull();
   });
 
   it('return null if lhr index is out of bounds', () => {
     global.location.hash = '#index=5';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).toHaveBeenCalled();
     expect(result.current).toBeNull();
   });
 
   it('returns null for invalid value', () => {
     global.location.hash = '#index=OHNO';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
+    expect(console.warn).toHaveBeenCalled();
+    expect(result.current).toBeNull();
+  });
+
+  it('returns null for invalid value with valid anchor', () => {
+    global.location.hash = '#index=OHNO&anchor=seo';
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).toHaveBeenCalled();
     expect(result.current).toBeNull();
   });

package/lighthouse-cli/test/smokehouse/lighthouse-runners/bundle.js

@@ -11,9 +11,12 @@
  * Currently uses `lighthouse-dt-bundle.js`.
  */
 
+import fs from 'fs';
+
 import ChromeLauncher from 'chrome-launcher';
 
 import ChromeProtocol from '../../../../lighthouse-core/gather/connections/cri.js';
+import {LH_ROOT} from '../../../../root.js';
 
 const originalRequire = global.require;
 if (typeof globalThis === 'undefined') {
@@ -22,8 +25,7 @@ if (typeof globalThis === 'undefined') {
 }
 
 // Load bundle, which creates a `global.runBundledLighthouse`.
-// @ts-ignore - file exists if `yarn build-all` is run, but not used for types anyways.
-import '../../../../dist/lighthouse-dt-bundle.js'; // eslint-disable-line
+eval(fs.readFileSync(LH_ROOT + '/dist/lighthouse-dt-bundle.js', 'utf-8'));
 
 global.require = originalRequire;
 

package/lighthouse-cli/test/smokehouse/smokehouse.js

@@ -215,7 +215,7 @@ function logChildProcessError(localConsole, err) {
     localConsole.adoptStdStrings(err);
   }
 
-  localConsole.log(log.redify('Error: ') + err.message);
+  localConsole.log(log.redify('Error: ') + err + '\n' + err.stack);
 }
 
 /**

package/lighthouse-core/computed/metrics/lantern-total-blocking-time.js

@@ -10,6 +10,7 @@ const LanternMetric = require('./lantern-metric.js');
 const BaseNode = require('../../lib/dependency-graph/base-node.js');
 const LanternFirstContentfulPaint = require('./lantern-first-contentful-paint.js');
 const LanternInteractive = require('./lantern-interactive.js');
+const {BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /** @typedef {BaseNode.Node} Node */
 
@@ -66,9 +67,7 @@ class LanternTotalBlockingTime extends LanternMetric {
       ? extras.interactiveResult.optimisticEstimate.timeInMs
       : extras.interactiveResult.pessimisticEstimate.timeInMs;
 
-    // Require here to resolve circular dependency.
-    const TotalBlockingTime = require('./total-blocking-time.js');
-    const minDurationMs = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
+    const minDurationMs = BLOCKING_TIME_THRESHOLD;
 
     const events = LanternTotalBlockingTime.getTopLevelEvents(
       simulation.nodeTimings,
@@ -76,7 +75,7 @@ class LanternTotalBlockingTime extends LanternMetric {
     );
 
     return {
-      timeInMs: TotalBlockingTime.calculateSumOfBlockingTime(
+      timeInMs: calculateSumOfBlockingTime(
         events,
         fcpTimeInMs,
         interactiveTimeMs

package/lighthouse-core/computed/metrics/tbt-utils.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const BLOCKING_TIME_THRESHOLD = 50;
+
+/**
+ * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
+ * @param {number} startTimeMs
+ * @param {number} endTimeMs
+ * @return {number}
+ */
+function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
+  if (endTimeMs <= startTimeMs) return 0;
+
+  const threshold = BLOCKING_TIME_THRESHOLD;
+  let sumBlockingTime = 0;
+  for (const event of topLevelEvents) {
+    // Early exit for small tasks, which should far outnumber long tasks.
+    if (event.duration < threshold) continue;
+
+    // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
+    // FCP is picked as the lower bound 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.
+    if (event.end < startTimeMs) continue;
+
+    // TTI is picked as the upper bound because we want a well defined end point for page load.
+    if (event.start > endTimeMs) continue;
+
+    // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
+    // task [0, 150] and FCP happens midway 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 FCP
+    // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
+    // after FCP.
+    const clippedStart = Math.max(event.start, startTimeMs);
+    const clippedEnd = Math.min(event.end, endTimeMs);
+    const clippedDuration = clippedEnd - clippedStart;
+    if (clippedDuration < threshold) continue;
+
+    // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
+    // Example:
+    //   [              250ms Task                   ]
+    //   | First 50ms |   Blocking Region (200ms)    |
+    sumBlockingTime += clippedDuration - threshold;
+  }
+
+  return sumBlockingTime;
+}
+
+module.exports = {
+  BLOCKING_TIME_THRESHOLD,
+  calculateSumOfBlockingTime,
+};