chrome-devtools-frontend 1.0.967728 → 1.0.969882

package/front_end/models/timeline_model/TimelineFrameModel.ts

@@ -138,10 +138,10 @@ export class TimelineFrameModel {
     }
     this.lastBeginFrame = startTime;
 
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, false, false);
   }
 
-  handleDroppedFrame(startTime: number, seqId: number): void {
+  handleDroppedFrame(startTime: number, seqId: number, isPartial: boolean): void {
     if (!this.lastFrame) {
       this.startFrame(startTime);
     }
@@ -149,8 +149,9 @@ export class TimelineFrameModel {
     // This line handles the case where no BeginFrame event is issued for
     // the dropped frame. In this situation, add a BeginFrame to the queue
     // as if it actually occurred.
-    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true);
+    this.beginFrameQueue.addFrameIfNotExists(seqId, startTime, true, isPartial);
     this.beginFrameQueue.setDropped(seqId, true);
+    this.beginFrameQueue.setPartial(seqId, isPartial);
   }
 
   handleDrawFrame(startTime: number, seqId: number): void {
@@ -187,6 +188,9 @@ export class TimelineFrameModel {
         if (frame.isDropped) {
           this.lastFrame.dropped = true;
         }
+        if (frame.isPartial) {
+          this.lastFrame.isPartial = true;
+        }
       }
     }
     this.mainFrameCommitted = false;
@@ -318,7 +322,7 @@ export class TimelineFrameModel {
     } else if (event.name === RecordType.NeedsBeginFrameChanged) {
       this.handleNeedFrameChanged(timestamp, event.args['data'] && event.args['data']['needsBeginFrame']);
     } else if (event.name === RecordType.DroppedFrame) {
-      this.handleDroppedFrame(timestamp, event.args['frameSeqId']);
+      this.handleDroppedFrame(timestamp, event.args['frameSeqId'], event.args['hasPartialUpdate']);
     }
   }
 
@@ -426,6 +430,7 @@ export class TimelineFrame {
   cpuTime: number;
   idle: boolean;
   dropped: boolean;
+  isPartial: boolean;
   layerTree: TracingFrameLayerTree|null;
   paints: LayerPaintEvent[];
   mainFrameId: number|undefined;
@@ -439,6 +444,7 @@ export class TimelineFrame {
     this.cpuTime = 0;
     this.idle = false;
     this.dropped = false;
+    this.isPartial = false;
     this.layerTree = null;
     this.paints = [];
     this.mainFrameId = undefined;
@@ -545,10 +551,12 @@ class BeginFrameInfo {
   seqId: number;
   startTime: number;
   isDropped: boolean;
-  constructor(seqId: number, startTime: number, isDropped: boolean) {
+  isPartial: boolean;
+  constructor(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean) {
     this.seqId = seqId;
     this.startTime = startTime;
     this.isDropped = isDropped;
+    this.isPartial = isPartial;
   }
 }
 
@@ -570,9 +578,9 @@ export class TimelineFrameBeginFrameQueue {
   }
 
   // Add a BeginFrame to the queue, if it does not already exit.
-  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean): void {
+  addFrameIfNotExists(seqId: number, startTime: number, isDropped: boolean, isPartial: boolean): void {
     if (!(seqId in this.mapFrames)) {
-      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped);
+      this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
       this.queueFrames.push(seqId);
     }
   }
@@ -584,6 +592,12 @@ export class TimelineFrameBeginFrameQueue {
     }
   }
 
+  setPartial(seqId: number, isPartial: boolean): void {
+    if (seqId in this.mapFrames) {
+      this.mapFrames[seqId].isPartial = isPartial;
+    }
+  }
+
   processPendingBeginFramesOnDrawFrame(seqId: number): BeginFrameInfo[] {
     const framesToVisualize: BeginFrameInfo[] = [];
 

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -18,8 +18,10 @@ const UIStrings = {
   */
   clickToDisplayBody: 'Click on any interest group event to display the group\'s current state',
   /**
-  interestGroupStorageItems: 'InterestGroup Storage Items',
+  *@description Placeholder text telling the user no details are available for
+  *the selected interest group.
   */
+  noDataAvailable: 'No details available for the selected interest group. The browser may have left the group.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupStorageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,24 +39,33 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   private readonly interestGroupGrid = new ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid();
   private events: Protocol.Storage.InterestGroupAccessedEvent[] = [];
   private detailsGetter: InterestGroupDetailsGetter;
+  private noDataView: UI.Widget.VBox;
+  private noDisplayView: UI.Widget.VBox;
 
   constructor(detailsGetter: InterestGroupDetailsGetter) {
     super(/* isVertical */ false, /* secondIsSidebar: */ true);
     this.detailsGetter = detailsGetter;
 
     const topPanel = new UI.Widget.VBox();
-    const bottomPanel = new UI.Widget.VBox();
+    this.noDisplayView = new UI.Widget.VBox();
+    this.noDataView = new UI.Widget.VBox();
+
     topPanel.setMinimumSize(0, 80);
     this.setMainWidget(topPanel);
-    bottomPanel.setMinimumSize(0, 40);
-    this.setSidebarWidget(bottomPanel);
+    this.noDisplayView.setMinimumSize(0, 40);
+    this.setSidebarWidget(this.noDisplayView);
+    this.noDataView.setMinimumSize(0, 40);
 
     topPanel.contentElement.appendChild(this.interestGroupGrid);
     this.interestGroupGrid.addEventListener('cellfocused', this.onFocus.bind(this));
 
-    bottomPanel.contentElement.classList.add('placeholder');
-    const centered = bottomPanel.contentElement.createChild('div');
-    centered.textContent = i18nString(UIStrings.clickToDisplayBody);
+    this.noDisplayView.contentElement.classList.add('placeholder');
+    const noDisplayDiv = this.noDisplayView.contentElement.createChild('div');
+    noDisplayDiv.textContent = i18nString(UIStrings.clickToDisplayBody);
+
+    this.noDataView.contentElement.classList.add('placeholder');
+    const noDataDiv = this.noDataView.contentElement.createChild('div');
+    noDataDiv.textContent = i18nString(UIStrings.noDataAvailable);
   }
 
   wasShown(): void {
@@ -77,6 +88,7 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   clearEvents(): void {
     this.events = [];
     this.interestGroupGrid.data = this.events;
+    this.setSidebarWidget(this.noDisplayView);
   }
 
   private async onFocus(event: Event): Promise<void> {
@@ -99,6 +111,8 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
       if (jsonView) {
         this.setSidebarWidget(jsonView);
       }
+    } else {
+      this.setSidebarWidget(this.noDataView);
     }
   }
 

package/front_end/panels/application/components/ReportsGrid.ts

@@ -19,6 +19,21 @@ const UIStrings = {
   *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
   */
   noReportsToDisplay: 'No reports to display',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Status is one of 'Queued', 'Pending', 'MarkedForRemoval' or 'Success'.
+  */
+  status: 'Status',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Destination is the name of the endpoint the report is being sent to.
+  */
+  destination: 'Destination',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *The column contains the timestamp of when a report was generated.
+  */
+  generatedAt: 'Generated at',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -38,7 +53,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      ${i18n.i18n.lockedString('Status')}
+      ${i18nString(UIStrings.status)}
       <x-link href="https://web.dev/reporting-api/#report-status">
         <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
           iconName: 'help_outline',
@@ -93,7 +108,7 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'status',
-          title: i18n.i18n.lockedString('Status'),
+          title: i18nString(UIStrings.status),
           widthWeighting: 20,
           hideable: false,
           visible: true,
@@ -103,14 +118,14 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'destination',
-          title: i18n.i18n.lockedString('Destination'),
+          title: i18nString(UIStrings.destination),
           widthWeighting: 20,
           hideable: false,
           visible: true,
         },
         {
           id: 'timestamp',
-          title: i18n.i18n.lockedString('Timestamp'),
+          title: i18nString(UIStrings.generatedAt),
           widthWeighting: 20,
           hideable: false,
           visible: true,

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1470,10 +1470,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
       const formattedLine = document.createElement('span');
-      const prefix = line.substring(0, link.positionLeft);
-      const suffix = `${line.substring(link.positionRight)}${newline}`;
-
-      formattedLine.appendChild(this.linkifyStringAsFragment(prefix));
+      const suffix = `${link.suffix}${newline}`;
+      formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
@@ -1492,7 +1490,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
 
-      const prefixWithoutFunction = prefix.substring(0, prefix.lastIndexOf(' ', prefix.length - 3));
+      const prefixWithoutFunction = link.prefix.substring(0, link.prefix.lastIndexOf(' ', link.prefix.length - 3));
 
       // If we were able to parse the function name from the stack trace line, try to replace it with an expansion of
       // any inline frames.

package/front_end/panels/console/ErrorStackParser.ts

@@ -10,8 +10,10 @@ export interface ParsedErrorFrame {
   line: string;
   link?: {
     url: string,
+    prefix: string,
+    suffix: string,
     lineNumber?: number,
-    columnNumber?: number, enclosedInBraces: boolean, positionLeft: number, positionRight: number,
+    columnNumber?: number, enclosedInBraces: boolean,
     scriptId?: Protocol.Runtime.ScriptId,
   };
 }
@@ -88,9 +90,9 @@ export function parseSourcePositionsFromErrorStack(
       line,
       link: {
         url,
+        prefix: line.substring(0, left),
+        suffix: line.substring(right),
         enclosedInBraces: hasOpenBracket,
-        positionLeft: left,
-        positionRight: right,
         lineNumber: splitResult.lineNumber,
         columnNumber: splitResult.columnNumber,
       },

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -125,6 +125,14 @@ const UIStrings = {
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
   clearStorage: 'Clear storage',
+  /**
+   * @description Text of checkbox to use the legacy Lighthouse navigation mode
+   */
+  legacyNavigation: 'Legacy navigation',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
+  useLegacyNavigation: 'Audit the page using classic Lighthouse when in navigation mode.',
   /**
   * @description Tooltip text of checkbox to reset storage features prior to running audits in
   * Lighthouse. Resetting the storage clears/empties it to a neutral state.
@@ -277,7 +285,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return navigationEntry.url;
   }
 
-  getFlags(): {internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)} {
+  getFlags(): {
+    internalDisableDeviceScreenEmulation: boolean,
+    emulatedFormFactor: (string|undefined),
+    legacyNavigation: boolean,
+  } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
       internalDisableDeviceScreenEmulation: true,
@@ -288,6 +300,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return flags as {
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
+      legacyNavigation: boolean,
     };
   }
 
@@ -433,6 +446,17 @@ export const RuntimeSettings: RuntimeSetting[] = [
     options: undefined,
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.legacy_navigation', true, Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.legacyNavigation),
+    description: i18nLazyString(UIStrings.useLegacyNavigation),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.legacyNavigation = value;
+    },
+    options: undefined,
+    learnMore: undefined,
+  },
 ];
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -11,6 +11,11 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 let lastId = 1;
 
 export class ProtocolService {
+  private targetInfo?: {
+    mainSessionId: string,
+    mainTargetId: string,
+    mainFrameId: string,
+  };
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -19,26 +24,53 @@ export class ProtocolService {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
-      throw new Error('Unable to find main target required for LightHouse');
+      throw new Error('Unable to find main target required for Lighthouse');
     }
     const childTargetManager = mainTarget.model(SDK.ChildTargetManager.ChildTargetManager);
     if (!childTargetManager) {
-      throw new Error('Unable to find child target manager required for LightHouse');
+      throw new Error('Unable to find child target manager required for Lighthouse');
     }
-    this.rawConnection = await childTargetManager.createParallelConnection(message => {
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      throw new Error('Unable to find resource tree model required for Lighthouse');
+    }
+    const mainFrame = resourceTreeModel.mainFrame;
+    if (!mainFrame) {
+      throw new Error('Unable to find main frame required for Lighthouse');
+    }
+
+    const {connection, sessionId} = await childTargetManager.createParallelConnection(message => {
       if (typeof message === 'string') {
         message = JSON.parse(message);
       }
       this.dispatchProtocolMessage(message);
     });
+
+    this.rawConnection = connection;
+    this.targetInfo = {
+      mainTargetId: await childTargetManager.getParentTargetId(),
+      mainFrameId: mainFrame.id,
+      mainSessionId: sessionId,
+    };
   }
 
   getLocales(): readonly string[] {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  startLighthouse(auditURL: string, categoryIDs: string[], flags: Object): Promise<ReportRenderer.RunnerResult> {
-    return this.sendWithResponse('start', {url: auditURL, categoryIDs, flags, locales: this.getLocales()});
+  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
+      Promise<ReportRenderer.RunnerResult> {
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+    return this.sendWithResponse(mode, {
+      url: auditURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
   }
 
   async detach(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -140,9 +140,12 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
   }
 
   static handleDarkMode(el: Element): void {
-    if (ThemeSupport.ThemeSupport.instance().themeName() === 'dark') {
-      el.classList.add('lh-dark');
-    }
+    const updateDarkModeIfNecessary = (): void => {
+      el.classList.toggle('lh-dark', ThemeSupport.ThemeSupport.instance().themeName() === 'dark');
+    };
+    ThemeSupport.ThemeSupport.instance().addEventListener(
+        ThemeSupport.ThemeChangeEvent.eventName, updateDarkModeIfNecessary);
+    updateDarkModeIfNecessary();
   }
 }
 

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -113,6 +113,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -321,7 +321,7 @@ export class StatusView {
   }
 
   private getPhaseForMessage(message: string): StatusPhase|null {
-    return StatusPhases.find(phase => message.startsWith(phase.statusMessagePrefix)) || null;
+    return StatusPhases.find(phase => phase.statusMessageRegex.test(message)) || null;
   }
 
   private resetProgressBarClasses(): void {
@@ -457,7 +457,7 @@ export interface StatusPhase {
   id: string;
   progressBarClass: string;
   message: () => Common.UIString.LocalizedString;
-  statusMessagePrefix: string;
+  statusMessageRegex: RegExp;
 }
 
 export const StatusPhases: StatusPhase[] = [
@@ -465,19 +465,19 @@ export const StatusPhases: StatusPhase[] = [
     id: 'loading',
     progressBarClass: 'loading',
     message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
-    statusMessagePrefix: 'Loading page',
+    statusMessageRegex: /^(Loading page|Navigating to)/,
   },
   {
     id: 'gathering',
     progressBarClass: 'gathering',
     message: i18nLazyString(UIStrings.lighthouseIsGatheringInformation),
-    statusMessagePrefix: 'Gathering',
+    statusMessageRegex: /^(Gathering|Computing artifact)/,
   },
   {
     id: 'auditing',
     progressBarClass: 'auditing',
     message: i18nLazyString(UIStrings.almostThereLighthouseIsNow),
-    statusMessagePrefix: 'Auditing',
+    statusMessageRegex: /^Auditing/,
   },
 ];
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -238,12 +238,14 @@ function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
             changes: text === active.text ? undefined :
                                             {from: active.pos, to: active.pos + text.length, insert: active.text},
           });
+          widget.hideWidget();
           view.focus();
         }
       });
       widget.element.addEventListener('focusout', event => {
         if (event.relatedTarget && !widget.element.contains(event.relatedTarget as Node)) {
           view.dispatch({effects: setTooltip.of(null)});
+          widget.hideWidget();
         }
       }, false);
       widget.element.addEventListener('mousedown', event => event.consume());

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -607,7 +607,7 @@ export class DebuggerPlugin extends Plugin {
         return null;
       }
       while (
-          node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+          node && node.name !== 'this' && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
           node.name !== 'MemberExpression' &&
           !(node.name === 'PropertyName' && node.parent?.name === 'PatternProperty' &&
             node.nextSibling?.name !== ':') &&

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -90,6 +90,8 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private infoElement: HTMLDivElement;
+  #scopesScript: SDK.Script.Script|null = null;
+
   private constructor() {
     super(true);
 
@@ -126,6 +128,34 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     }
   }
 
+  private sourceMapAttached(
+      event: Common.EventTarget.EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>):
+      void {
+    if (event.data.client === this.#scopesScript) {
+      void this.update();
+    }
+  }
+
+  private setScopeSourceMapSubscription(callFrame: SDK.DebuggerModel.CallFrame|null): void {
+    const oldScript = this.#scopesScript;
+    this.#scopesScript = callFrame?.script ?? null;
+
+    // Shortcut for the case when we are listening to the same model.
+    if (oldScript?.debuggerModel === this.#scopesScript?.debuggerModel) {
+      return;
+    }
+
+    if (oldScript) {
+      oldScript.debuggerModel.sourceMapManager().removeEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.sourceMapAttached, this);
+    }
+
+    if (this.#scopesScript) {
+      this.#scopesScript.debuggerModel.sourceMapManager().addEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.sourceMapAttached, this);
+    }
+  }
+
   private async update(): Promise<void> {
     // The `resolveThisObject(callFrame)` and `resolveScopeChain(callFrame)` calls
     // below may take a while to complete, so indicate to the user that something
@@ -137,6 +167,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.linkifier.reset();
 
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    this.setScopeSourceMapSubscription(callFrame);
     const [thisObject, scopeChain] = await Promise.all([resolveThisObject(callFrame), resolveScopeChain(callFrame)]);
     // By now the developer might have moved on, and we don't want to show stale
     // scope information, so check again that we're still on the same CallFrame.

package/front_end/panels/sources/SourceMapNamesResolver.ts

@@ -10,9 +10,14 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as Protocol from '../../generated/protocol.js';
 
-const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, Promise<Map<string, string>>>();
+interface CachedScopeMap {
+  sourceMap: SDK.SourceMap.SourceMap|null;
+  identifiersPromise: Promise<Map<string, string>>;
+}
 
+const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, CachedScopeMap>();
 const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string>>();
+
 export class Identifier {
   name: string;
   lineNumber: number;
@@ -79,17 +84,17 @@ export const resolveScopeChain =
 };
 
 export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Promise<Map<string, string>> => {
-  let identifiersPromise = scopeToCachedIdentifiersMap.get(scope);
-  if (!identifiersPromise) {
+  let cachedScopeMap = scopeToCachedIdentifiersMap.get(scope);
+  const script = scope.callFrame().script;
+  const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
+
+  if (!cachedScopeMap || cachedScopeMap.sourceMap !== sourceMap) {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    identifiersPromise = (async(): Promise<Map<any, any>> => {
+    const identifiersPromise = (async(): Promise<Map<any, any>> => {
       const namesMapping = new Map<string, string>();
-      const script = scope.callFrame().script;
-      const sourceMap =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
       if (sourceMap) {
         const textCache = new Map<string, TextUtils.Text.Text>();
         // Extract as much as possible from SourceMap and resolve
@@ -111,9 +116,10 @@ export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Pro
       }
       return namesMapping;
     })();
-    scopeToCachedIdentifiersMap.set(scope, identifiersPromise);
+    cachedScopeMap = {sourceMap, identifiersPromise};
+    scopeToCachedIdentifiersMap.set(scope, {sourceMap, identifiersPromise});
   }
-  return await identifiersPromise;
+  return await cachedScopeMap.identifiersPromise;
 
   async function resolveSourceName(
       script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, id: Identifier,