chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/{components → utils}/EntryStyles.ts

@@ -497,6 +497,24 @@ const UIStrings = {
    *@description Text in UIDevtools Utils of the Performance panel
    */
   drawing: 'Drawing',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function has been scheduled to run at a later time using the
+   * postTask API.
+   */
+  schedulePostTaskCallback: 'Schedule postTask',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function that was scheduled to run using the postTask API was
+   * fired (invoked).
+   */
+  runPostTaskCallback: 'Fire postTask',
+  /**
+   * @description Label for an event in the Performance panel indicating that a
+   * callback function that was scheduled to run at a later time using the
+   * postTask API was cancelled, so will no longer run.
+   */
+  abortPostTaskCallback: 'Cancel postTask',
 };
 
 export enum EventCategory {
@@ -517,7 +535,7 @@ export enum EventCategory {
 
 let mainEventCategories: EventCategory[];
 
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/EntryStyles.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/utils/EntryStyles.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TimelineRecordStyle {
@@ -1033,6 +1051,15 @@ export function maybeInitSylesMap(): EventStylesMap {
 
     [Trace.Types.Events.Name.SCHEDULE_POST_MESSAGE]:
         new TimelineRecordStyle(i18nString(UIStrings.schedulePostMessage), defaultCategoryStyles.messaging),
+
+    [Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.schedulePostTaskCallback), defaultCategoryStyles.scripting),
+
+    [Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.runPostTaskCallback), defaultCategoryStyles.scripting),
+
+    [Trace.Types.Events.Name.ABORT_POST_TASK_CALLBACK]:
+        new TimelineRecordStyle(i18nString(UIStrings.abortPostTaskCallback), defaultCategoryStyles.scripting),
   };
   return eventStylesMap;
 }

package/front_end/panels/timeline/utils/Helpers.test.ts

@@ -0,0 +1,43 @@
+// Copyright 2024 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.js';
+
+describe('Helpers', () => {
+  it('createUrlLabels', function() {
+    function fn(urls: string[], expected: string[]) {
+      assert.deepEqual(Helpers.createUrlLabels(urls.map(url => new URL(url))), expected);
+    }
+
+    fn([], []);
+
+    // Initial url is elided.
+    fn(['https://www.example.com'], ['/']);
+    fn(['https://www.example.com?k=1234567890&k2=1234567890&k3=0123'], ['/?k=1234567…&k2=1234567…&k3=0123']);
+    fn(['https://www.example.com/blah?test=me'], ['/blah?test=me']);
+
+    // Subsequent urls are elided if the same protocol+domain.
+    fn(['https://www.example.com', 'https://www.example.com/blah?test=me'], ['/', '/blah?test=me']);
+
+    // Subsequent urls are not elided if the protocol or the domain changes.
+    fn(['https://www.example.com', 'https://www.google.com'], ['/', 'www.google.com']);
+    fn(['https://www.example.com', 'https://www.google.com/search'], ['/', 'www.google.com/search']);
+    fn(['https://www.example.com', 'https://www.google.com/search', 'https://www.google.com/search2'],
+       ['/', 'www.google.com/search', '/search2']);
+
+    // If only https protocol is present, elide protocol. Otherwise always show the full URL (but still elide the search params).
+    fn(['https://www.example.com', 'http://www.example.com'], ['https://www.example.com', 'http://www.example.com']);
+    fn(['http://www.example.com', 'https://www.example.com'], ['http://www.example.com', 'https://www.example.com']);
+    fn(['http://www.example.com?k=1234567890', 'https://www.example.com?k=1234567890'],
+       ['http://www.example.com/?k=1234567…', 'https://www.example.com/?k=1234567…']);
+    fn(['https://www.example.com', 'https://www.example2.com'], ['/', 'www.example2.com']);
+  });
+
+  it('shortenUrl', function() {
+    const url = new URL('https://cdn.permutive.com/models/v2/d2fb08da-1c03-4c8a-978f-ad8a96b4c31f-models.bin');
+    // Shows lastPath and then reveals more of it, per maxCharacters
+    assert.strictEqual(Helpers.shortenUrl(url, 40), 'd2fb08da-1c03-4c8a-9…96b4c31f-models.bin');
+    assert.strictEqual(Helpers.shortenUrl(url, 70), '/models/v2/d2fb08da-1c03-4c8a-978f-ad8a96b4c31f-models.bin');
+  });
+});

package/front_end/panels/timeline/utils/Helpers.ts

@@ -0,0 +1,93 @@
+// Copyright 2024 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';
+
+function createTrimmedUrlSearch(url: URL): string {
+  const maxSearchValueLength = 8;
+  let search = '';
+
+  for (const [key, value] of url.searchParams) {
+    if (search) {
+      search += '&';
+    }
+    if (value) {
+      search += `${key}=${Platform.StringUtilities.trimEndWithMaxLength(value, maxSearchValueLength)}`;
+    } else {
+      search += key;
+    }
+  }
+  if (search) {
+    search = '?' + search;
+  }
+
+  return search;
+}
+
+/**
+ * Shortens URLs as much as possible while keeping important context.
+ *
+ * - Elides the host if the previous url is the same host+protocol
+ * - Always elide search param values
+ * - Always includes protocol/domain if there is a mix of protocols
+ * - First URL is elided fully to show just the pathname, unless there is a mix of protocols (see above)
+ */
+export function createUrlLabels(urls: URL[]): string[] {
+  const labels: string[] = [];
+  const isAllHttps = urls.every(url => url.protocol === 'https:');
+
+  for (const [index, url] of urls.entries()) {
+    const previousUrl = urls[index - 1];
+    const sameHostAndProtocol = previousUrl && url.host === previousUrl.host && url.protocol === previousUrl.protocol;
+    let elideHost = sameHostAndProtocol;
+    let elideProtocol = isAllHttps;
+
+    // For the first URL, show just the pathname and search - this will be relative to the domain as seen in the
+    // trace dropdown selector. Exception is if there are non-https protocols, in which case we're only going to elide
+    // parts of the query string.
+    if (index === 0 && isAllHttps) {
+      elideHost = true;
+      elideProtocol = true;
+    }
+
+    const search = createTrimmedUrlSearch(url);
+    if (!elideProtocol) {
+      labels.push(`${url.protocol}//${url.host}${url.pathname}${search}`);
+    } else if (!elideHost) {
+      labels.push(`${url.host}${url.pathname}${search}`);
+    } else {
+      labels.push(`${url.pathname}${search}`);
+    }
+  }
+
+  // Lastly, remove any trailing `/`.
+  return labels.map(label => label.length > 1 && label.endsWith('/') ? label.substring(0, label.length - 1) : label);
+}
+
+/**
+ * Shortens the provided URL for use within a narrow display usecase.
+ *
+ * The resulting string will at least contain the last path component of the URL.
+ * More components are included until a limit of maxChars (default 20) is reached.
+ * No querystring is included.
+ *
+ * If the last path component is larger than maxChars characters, the middle is elided.
+ */
+export function shortenUrl(url: URL, maxChars = 20): string {
+  const parts = url.pathname.split('/');
+  let shortenedUrl = parts.at(-1) ?? '';
+
+  if (shortenedUrl.length > maxChars) {
+    return Platform.StringUtilities.trimMiddle(shortenedUrl, maxChars);
+  }
+
+  let i = parts.length - 1;
+  while (--i >= 0) {
+    if (shortenedUrl.length + parts[i].length <= maxChars) {
+      shortenedUrl = `${parts[i]}/${shortenedUrl}`;
+    }
+  }
+
+  return shortenedUrl;
+}

package/front_end/panels/timeline/utils/IgnoreList.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Trace from '../../../models/trace/trace.js';
@@ -51,4 +52,89 @@ describeWithMockConnection('isIgnoreListedEntry', () => {
     await resolver.install();
     assert.isTrue(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithMappings));
   });
+
+  it('ignores entries with a url in the source map\'s ignoreList field when the user enables known third party ignoring',
+     async () => {
+       const {ignoreListedURL, scriptId} = await loadCodeLocationResolvingScenario();
+
+       // This matches the location mapping added to the sourcemap.
+       const LINE_NUMBER = 3;
+       const COLUMN_NUMBER = 0;
+
+       const profileCallWithMappings =
+           makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+       profileCallWithMappings.callFrame = {
+         lineNumber: LINE_NUMBER,
+         columnNumber: COLUMN_NUMBER,
+         functionName: 'ignore',
+         scriptId,
+         url: ignoreListedURL,
+       };
+
+       const workersData: Trace.Handlers.ModelHandlers.Workers.WorkersData = {
+         workerSessionIdEvents: [],
+         workerIdByThread: new Map(),
+         workerURLById: new Map(),
+       };
+       const traceWithMappings = {
+         Samples: makeMockSamplesHandlerData([profileCallWithMappings]),
+         Workers: workersData,
+       } as Trace.Handlers.Types.ParsedTrace;
+       const resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings);
+       await resolver.install();
+       assert.isTrue(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithMappings));
+       const ignoreKnownThirdPartySetting =
+           Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts');
+       const ignoreKnownThirdPartySettingValue = ignoreKnownThirdPartySetting.get();
+
+       ignoreKnownThirdPartySetting.set(true);
+       assert.isTrue(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithMappings));
+
+       ignoreKnownThirdPartySetting.set(false);
+       assert.isFalse(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithMappings));
+
+       // restore to the original value.
+       ignoreKnownThirdPartySetting.set(ignoreKnownThirdPartySettingValue);
+     });
+  it('ignores entries belonging to content script when the user enables content script ignoring', async () => {
+    const {contentScriptURL, contentScriptId: scriptId} = await loadCodeLocationResolvingScenario();
+
+    const LINE_NUMBER = 0;
+    const COLUMN_NUMBER = 0;
+
+    const profileCallWithContentScript =
+        makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+    profileCallWithContentScript.callFrame = {
+      lineNumber: LINE_NUMBER,
+      columnNumber: COLUMN_NUMBER,
+      functionName: '',
+      scriptId,
+      url: contentScriptURL,
+    };
+
+    const workersData: Trace.Handlers.ModelHandlers.Workers.WorkersData = {
+      workerSessionIdEvents: [],
+      workerIdByThread: new Map(),
+      workerURLById: new Map(),
+    };
+    const traceWithMappings = {
+      Samples: makeMockSamplesHandlerData([profileCallWithContentScript]),
+      Workers: workersData,
+    } as Trace.Handlers.Types.ParsedTrace;
+    const resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings);
+    await resolver.install();
+    assert.isTrue(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithContentScript));
+
+    const ignoreContentScriptSetting = Common.Settings.Settings.instance().moduleSetting('skip-content-scripts');
+    const ignoreContentScriptSettingValue = ignoreContentScriptSetting.get();
+
+    ignoreContentScriptSetting.set(true);
+    assert.isTrue(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithContentScript));
+
+    ignoreContentScriptSetting.set(false);
+    assert.isFalse(Utils.IgnoreList.isIgnoreListedEntry(profileCallWithContentScript));
+
+    // restore to the original value.
+    ignoreContentScriptSetting.set(ignoreContentScriptSettingValue);
+  });
 });

package/front_end/panels/timeline/utils/IgnoreList.ts

@@ -15,10 +15,17 @@ export function isIgnoreListedEntry(entry: Trace.Types.Events.Event): boolean {
   const rawUrl = entry.callFrame.url as Platform.DevToolsPath.UrlString;
 
   const sourceMappedData = SourceMapsResolver.resolvedCodeLocationForEntry(entry);
-  const resolvedUrl = sourceMappedData?.devtoolsLocation?.uiSourceCode.url();
-  return resolvedUrl ? isIgnoreListedURL(resolvedUrl) : isIgnoreListedURL(rawUrl);
+  const script = sourceMappedData?.script;
+  const uiSourceCode = sourceMappedData?.devtoolsLocation?.uiSourceCode;
+  const resolvedUrl = uiSourceCode?.url();
+  const isKnownThirdParty = uiSourceCode?.isKnownThirdParty();
+  const isContentScript = script?.isContentScript();
+  const ignoreListOptions: Bindings.IgnoreListManager.IgnoreListGeneralRules = {isContentScript, isKnownThirdParty};
+  const urlToUse = resolvedUrl || rawUrl;
+  return isIgnoreListedURL(urlToUse, ignoreListOptions);
 }
 
-export function isIgnoreListedURL(url: Platform.DevToolsPath.UrlString): boolean {
-  return Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url);
+export function isIgnoreListedURL(
+    url: Platform.DevToolsPath.UrlString, options?: Bindings.IgnoreListManager.IgnoreListGeneralRules): boolean {
+  return Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url, options);
 }

package/front_end/panels/timeline/utils/ImageCache.test.ts

@@ -0,0 +1,106 @@
+// Copyright 2024 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 Trace from '../../../models/trace/trace.js';
+import {defaultTraceEvent} from '../../../testing/TraceHelpers.js';
+
+import * as Utils from './utils.js';
+
+const {cacheForTesting, emitter, getOrQueue, loadImageForTesting: loadImage, preload} = Utils.ImageCache;
+
+describe('ImageCache', () => {
+  // Generate at https://yulvil.github.io/gopherjs/02/ with 1,1,1,jpeg in the form fields
+  const validJpegData =
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAEElEQVR4nGISWfUPEAAA//8CmgG/YtkszwAAAABJRU5ErkJggg==';
+
+  const rawSourceEvent: Trace.Types.Events.Screenshot = {
+    ...defaultTraceEvent,
+    id: '0x1',
+    args: {snapshot: validJpegData},
+    name: Trace.Types.Events.Name.SCREENSHOT,
+    cat: 'disabled-by-default-devtools.screenshot',
+    ph: Trace.Types.Events.Phase.OBJECT_SNAPSHOT,
+  };
+
+  Trace.Handlers.ModelHandlers.Screenshots.reset();
+  Trace.Handlers.ModelHandlers.Screenshots.handleEvent(rawSourceEvent);
+  void Trace.Handlers.ModelHandlers.Screenshots.finalize();
+
+  const syntheticScreenshot1 = Trace.Handlers.ModelHandlers.Screenshots.data().all[0];
+  const syntheticScreenshot2 = structuredClone(syntheticScreenshot1);
+  syntheticScreenshot2.rawSourceEvent.id = '0x2';
+  const badDataUriScreenshot = structuredClone(syntheticScreenshot1);
+  badDataUriScreenshot.args.dataUri = 'INVALIDDATA';
+
+  beforeEach(() => {
+    const cache = cacheForTesting;
+    cache.delete(syntheticScreenshot1);
+    cache.delete(syntheticScreenshot2);
+    cache.delete(badDataUriScreenshot);
+  });
+
+  it('loadImage resolves valid images', async () => {
+    const datauri = `data:image/jpg;base64,${validJpegData}`;
+    const res = await loadImage(datauri);
+    assert.instanceOf(res, HTMLImageElement);
+  });
+  it('loadImage resolves invalid images to null', async () => {
+    const datauri = 'data:image/jpg;base64,INVALIDDATA';
+    const res = await loadImage(datauri);
+    assert.strictEqual(res, null);
+  });
+
+  it('getOrQueue should return null for a new screenshot', () => {
+    assert.strictEqual(getOrQueue(syntheticScreenshot1), null);
+  });
+
+  it('getOrQueue should return the same image for the same screenshot', async () => {
+    // Preload to ensure image is loaded for both reads.
+    await preload([syntheticScreenshot1]);
+
+    const image1 = getOrQueue(syntheticScreenshot1);
+    const image2 = getOrQueue(syntheticScreenshot1);
+    assert.strictEqual(image2, image1);
+    assert.instanceOf(image1, HTMLImageElement);
+  });
+
+  it('emitter should emit an event when a screenshot is updated', async () => {
+    const {promise, resolve} = Promise.withResolvers();
+    emitter.addEventListener('screenshot-loaded', ev => {
+      const event = ev as CustomEvent;
+      assert.strictEqual(event.detail.screenshot, syntheticScreenshot1);
+      assert.instanceOf(event.detail.image, HTMLImageElement);
+      // Cache is updated too.
+      assert.instanceOf(getOrQueue(syntheticScreenshot1), HTMLImageElement);
+      resolve(null);
+    }, {once: true});
+
+    assert.isNull(getOrQueue(syntheticScreenshot1));
+    return promise;
+  });
+
+  it('getOrQueue should return null (immediately and eventually) for an invalid image', async () => {
+    // First attempt is null because empty cache.
+    assert.isNull(getOrQueue(badDataUriScreenshot));
+
+    const {promise, resolve} = Promise.withResolvers();
+    emitter.addEventListener('screenshot-loaded', ev => {
+      const event = ev as CustomEvent;
+      assert.strictEqual(event.detail.screenshot, badDataUriScreenshot);
+      // Loaded but invalid, so null.
+      assert.isNull(event.detail.image);
+      // Null stored in the cache
+      assert.isNull(getOrQueue(badDataUriScreenshot));
+
+      resolve(null);
+    }, {once: true});
+    return promise;
+  });
+
+  it('preload should load all screenshots', async () => {
+    await preload([syntheticScreenshot1, syntheticScreenshot2]);
+    assert.instanceOf(getOrQueue(syntheticScreenshot1), HTMLImageElement);
+    assert.instanceOf(getOrQueue(syntheticScreenshot2), HTMLImageElement);
+  });
+});

package/front_end/panels/timeline/utils/ImageCache.ts

@@ -0,0 +1,55 @@
+// Copyright 2024 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 type * as Trace from '../../../models/trace/trace.js';
+
+const imageCache: WeakMap<Trace.Types.Events.SyntheticScreenshot, HTMLImageElement|null> = new WeakMap();
+export const emitter = new EventTarget();
+
+/**
+ * Synchronously returns an image, or return `null` while queuing up an async load of that image.
+ * If the image load fails, we cache a null to avoid reattempts.
+ */
+export function getOrQueue(screenshot: Trace.Types.Events.SyntheticScreenshot): HTMLImageElement|null {
+  if (imageCache.has(screenshot)) {
+    return imageCache.get(screenshot) ?? null;
+  }
+
+  const data = screenshot.args.dataUri;
+
+  loadImage(data)
+      .then(imageOrNull => {
+        imageCache.set(screenshot, imageOrNull);
+        emitter.dispatchEvent(new CustomEvent('screenshot-loaded', {detail: {screenshot, image: imageOrNull}}));
+      })
+      .catch(() => {});
+  return null;
+}
+
+/** Load an image (probably data URI). If it fails, resolve with null. */
+function loadImage(url: string): Promise<HTMLImageElement|null> {
+  return new Promise(resolve => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', () => resolve(null));
+    image.src = url;
+  });
+}
+
+/** Populate the cache ahead of use, to allow for getOrQueue to synchronously return images. */
+export function preload(screenshots: Trace.Types.Events.SyntheticScreenshot[]): Promise<void[]> {
+  const promises = screenshots.map(screenshot => {
+    if (imageCache.has(screenshot)) {
+      return;
+    }
+    return loadImage(screenshot.args.dataUri).then(image => {
+      imageCache.set(screenshot, image);
+      return;
+    });
+  });
+  return Promise.all(promises);
+}
+
+export const cacheForTesting = imageCache;
+export const loadImageForTesting = loadImage;

package/front_end/panels/timeline/utils/NetworkRequest.ts

@@ -22,7 +22,7 @@ export function createTimelineNetworkRequest(syntheticNetworkRequest: Trace.Type
 }
 
 // Add a wrapper class here.
-// The reason is the `Reveal in Network panel` option is handled by the context menu provider, which will add this
+// The reason is the `Open in Network panel` option is handled by the context menu provider, which will add this
 // option for all supporting types. And there are a lot of context menu providers that support
 // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just want
 // the one to reveal in network panel, so add a new class which will only be supported by Network panel. Also we want to

package/front_end/panels/timeline/utils/SourceMapsResolver.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Chrome} from '../../../../extension-api/ExtensionAPI.js';
+import type {Chrome} from '../../../../extension-api/ExtensionAPI.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -21,14 +21,21 @@ import {
   makeMockSamplesHandlerData,
   makeProfileCall,
 } from '../../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Utils from './utils.js';
 
 const MINIFIED_FUNCTION_NAME = 'minified';
 const AUTHORED_FUNCTION_NAME = 'someFunction';
 
-export async function loadCodeLocationResolvingScenario():
-    Promise<{authoredScriptURL: string, genScriptURL: string, scriptId: Protocol.Runtime.ScriptId}> {
+export async function loadCodeLocationResolvingScenario(): Promise<{
+  authoredScriptURL: string,
+  genScriptURL: string,
+  scriptId: Protocol.Runtime.ScriptId,
+  ignoreListedURL: string,
+  contentScriptURL: string,
+  contentScriptId: Protocol.Runtime.ScriptId,
+}> {
   const target = createTarget();
 
   const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -42,32 +49,59 @@ export async function loadCodeLocationResolvingScenario():
   });
 
   const backend = new MockProtocolBackend();
+
+  // The following mock data creates a source mapping from two authored
+  // scripts to a single complied script. One of the sources
+  // (ignored.ts) is marked as ignore listed in the source map.
   const sourceRoot = 'http://example.com';
   const scriptInfo = {
     url: `${sourceRoot}/test.out.js`,
-    content: 'function f(x) {\n  console.log(x);\n}\n',
+    content: 'function f(x) {\n  console.log(x);\n}\nfunction ignore(y){\n console.log(y);\n}',
   };
-  const authoredScripName = 'test.ts';
-  const authoredScriptURL = `${sourceRoot}/${authoredScripName}`;
-
+  const authoredScriptName = 'test.ts';
+  const ignoredScriptName = 'ignored.ts';
+  const authoredScriptURL = `${sourceRoot}/${authoredScriptName}`;
+  const ignoreListedScriptURL = `${sourceRoot}/${ignoredScriptName}`;
+  const sourceMap = encodeSourceMap(
+      [
+        `0:9 => ${authoredScriptName}:0:1`,
+        `1:0 => ${authoredScriptName}:4:0`,
+        `1:2 => ${authoredScriptName}:4:2`,
+        `2:0 => ${authoredScriptName}:2:0`,
+        `3:0 => ${ignoredScriptName}:3:0`,
+      ],
+      sourceRoot);
+  sourceMap.sources = [authoredScriptURL, ignoreListedScriptURL];
+  sourceMap.ignoreList = [1];
   const sourceMapInfo = {
     url: `${scriptInfo.url}.map`,
-    content: encodeSourceMap(
-        [
-          `0:9 => ${authoredScripName}:0:1`,
-          `1:0 => ${authoredScripName}:4:0`,
-          `1:2 => ${authoredScripName}:4:2`,
-          `2:0 => ${authoredScripName}:2:0`,
-        ],
-        sourceRoot),
+    content: sourceMap,
   };
-  const [, script] = await Promise.all([
-    debuggerWorkspaceBinding.waitForUISourceCodeAdded(
-        `${sourceRoot}/test.ts` as Platform.DevToolsPath.UrlString, target),
+
+  // The following mock data creates content script
+  const contentScriptInfo = {
+    url: `${sourceRoot}/content-script.js`,
+    content: 'console.log("content script loaded");',
+    isContentScript: true,
+  };
+
+  // Load mock data in devtools
+  const [, , script, , contentScript] = await Promise.all([
+    debuggerWorkspaceBinding.waitForUISourceCodeAdded(authoredScriptURL as Platform.DevToolsPath.UrlString, target),
+    debuggerWorkspaceBinding.waitForUISourceCodeAdded(ignoreListedScriptURL as Platform.DevToolsPath.UrlString, target),
     backend.addScript(target, scriptInfo, sourceMapInfo),
+    debuggerWorkspaceBinding.waitForUISourceCodeAdded(contentScriptInfo.url as Platform.DevToolsPath.UrlString, target),
+    backend.addScript(target, contentScriptInfo, null),
   ]);
 
-  return {authoredScriptURL, scriptId: script.scriptId, genScriptURL: scriptInfo.url};
+  return {
+    authoredScriptURL,
+    scriptId: script.scriptId,
+    genScriptURL: scriptInfo.url,
+    ignoreListedURL: ignoreListedScriptURL,
+    contentScriptURL: contentScriptInfo.url,
+    contentScriptId: contentScript.scriptId,
+  };
 }
 
 function parsedTraceFromProfileCalls(profileCalls: Trace.Types.Events.SyntheticProfileCall[]):
@@ -203,4 +237,15 @@ describeWithMockConnection('SourceMapsResolver', () => {
       assert.strictEqual(sourceMappedURL, genScriptURL);
     });
   });
+  describe('unnecessary work detection', () => {
+    it('does not dispatch a SourceMappingsUpdated event if relevant mappings were not updated', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
+      const listener = sinon.spy();
+
+      const sourceMapsResolver = new Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace);
+      sourceMapsResolver.addEventListener(Utils.SourceMapsResolver.SourceMappingsUpdated.eventName, listener);
+      await sourceMapsResolver.install();
+      assert.isTrue(listener.notCalled);
+    });
+  });
 });

package/front_end/panels/timeline/utils/SourceMapsResolver.ts

@@ -13,6 +13,7 @@ import * as Workspace from '../../../models/workspace/workspace.js';
 type ResolvedCodeLocationData = {
   name: string|null,
   devtoolsLocation: Workspace.UISourceCode.UILocation|null,
+  script: SDK.Script.Script|null,
 };
 export class SourceMappingsUpdated extends Event {
   static readonly eventName = 'sourcemappingsupdated';
@@ -137,7 +138,7 @@ export class SourceMapsResolver extends EventTarget {
 
     for (const debuggerModel of this.#debuggerModelsToListen) {
       debuggerModel.sourceMapManager().addEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, () => this.#onAttachedSourceMap(), this);
+          SDK.SourceMapManager.Events.SourceMapAttached, this.#onAttachedSourceMap, this);
     }
 
     // Although we have added listeners for SourceMapAttached events, we also
@@ -154,12 +155,16 @@ export class SourceMapsResolver extends EventTarget {
   uninstall(): void {
     for (const debuggerModel of this.#debuggerModelsToListen) {
       debuggerModel.sourceMapManager().removeEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, () => this.#onAttachedSourceMap(), this);
+          SDK.SourceMapManager.Events.SourceMapAttached, this.#onAttachedSourceMap, this);
     }
     this.#debuggerModelsToListen.clear();
   }
 
   async #resolveMappingsForProfileNodes(): Promise<void> {
+    // Used to track if source mappings were updated when a source map
+    // is attach. If not, we do not notify the flamechart that mappings
+    // were updated, since that would trigger a rerender.
+    let updatedMappings = false;
     for (const [pid, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
       for (const [tid, threadProfile] of threadsInProcess) {
         const nodes = threadProfile.parsedProfile.nodes() ?? [];
@@ -170,21 +175,27 @@ export class SourceMapsResolver extends EventTarget {
         for (const node of nodes) {
           const resolvedFunctionName =
               await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, target);
+          updatedMappings ||= Boolean(resolvedFunctionName);
           node.setFunctionName(resolvedFunctionName);
 
           const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+          const script = debuggerModel?.scriptForId(node.scriptId) || null;
           const location = debuggerModel &&
               new SDK.DebuggerModel.Location(
                   debuggerModel, node.callFrame.scriptId, node.callFrame.lineNumber, node.callFrame.columnNumber);
           const uiLocation = location &&
               await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
                   location);
+          updatedMappings ||= Boolean(uiLocation);
 
           SourceMapsResolver.storeResolvedNodeDataForEntry(
-              pid, tid, node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation});
+              pid, tid, node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation, script});
         }
       }
     }
+    if (!updatedMappings) {
+      return;
+    }
     this.dispatchEvent(new SourceMappingsUpdated());
   }