chrome-devtools-frontend 1.0.968254 → 1.0.968818

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -273,7 +273,7 @@ export class CSSMatchedStyles {
   async recomputeMatchingSelectors(rule: CSSStyleRule): Promise<void> {
     const node = this.nodeForStyle(rule.style);
     if (!node) {
-      return Promise.resolve();
+      return;
     }
     const promises = [];
     for (const selector of rule.selectors) {

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,

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.968254"
+  "version": "1.0.968818"
 }

package/scripts/build/devtools_plugin.js

@@ -111,4 +111,35 @@ function devtoolsPlugin(source, importer) {
   };
 }
 
-module.exports = {devtoolsPlugin};
+function esbuildPlugin(outdir) {
+  return args => {
+    // args.importer is absolute path in esbuild.
+    const res = devtoolsPlugin(args.path, args.importer);
+    if (!res) {
+      return null;
+    }
+
+    if (res.external) {
+      // res.id can be both of absolutized local JavaScript path or node's
+      // builtin module (e.g. 'fs', 'path'), and only relativize the path in
+      // former case.
+      if (path.isAbsolute(res.id)) {
+        res.id = './' + path.relative(outdir, res.id);
+      }
+
+      return {
+        external: res.external,
+        path: res.id,
+      };
+    }
+
+    return {
+      path: res.id,
+    };
+  };
+}
+
+module.exports = {
+  devtoolsPlugin,
+  esbuildPlugin
+};

package/scripts/build/esbuild.js

@@ -21,30 +21,7 @@ const plugin = {
   name: 'devtools-plugin',
   setup(build) {
     // https://esbuild.github.io/plugins/#on-resolve
-    build.onResolve({filter: /.*/}, args => {
-      const res = devtools_plugin.devtoolsPlugin(args.path, args.importer);
-      if (!res) {
-        return null;
-      }
-
-      if (res.external) {
-        // res.id can be both of absolutized local JavaScript path or node's
-        // builtin module (e.g. 'fs', 'path'), and only relativize the path in
-        // former case.
-        if (path.isAbsolute(res.id)) {
-          res.id = './' + path.relative(outdir, res.id);
-        }
-
-        return {
-          external: res.external,
-          path: res.id,
-        };
-      }
-
-      return {
-        path: res.id,
-      };
-    });
+    build.onResolve({filter: /.*/}, devtools_plugin.esbuildPlugin(outdir));
   },
 };
 

package/scripts/build/tests/plugins_test.js

@@ -5,7 +5,7 @@
 const {assert} = require('chai');
 const path = require('path');
 
-const {devtoolsPlugin} = require('../devtools_plugin.js');
+const {devtoolsPlugin, esbuildPlugin} = require('../devtools_plugin.js');
 
 describe('devtools_plugin can compute paths with', () => {
   it('same directory import', () => {
@@ -27,4 +27,63 @@ describe('devtools_plugin can compute paths with', () => {
   it('importing generated files', () => {
     assert.strictEqual(devtoolsPlugin('../../generated/Protocol.js', 'front_end/core/sdk/FirstFile.js'), null);
   });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        devtoolsPlugin('./front_end/third_party/lighthouse/lighthouse-dt-bundle.js', 'front_end/core/sdk/FirstFile.js'),
+        {
+          id: path.join(
+              'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
+});
+
+describe('esbuild_plugin can compute paths with', () => {
+  const srcdir = __dirname;
+  const outdir = path.join(srcdir, 'out');
+  const plugin = esbuildPlugin(outdir);
+  it('same directory import', () => {
+    assert.deepEqual(
+        plugin({path: './AnotherFile.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: path.join(srcdir, 'front_end', 'core', 'sdk', 'AnotherFile.js')});
+  });
+
+  it('different directory import', () => {
+    assert.deepEqual(
+        plugin({path: '../common/common.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: './' + path.join('..', 'front_end', 'core', 'common', 'common.js'), external: true});
+  });
+
+  it('node built-in modules', () => {
+    assert.deepEqual(
+        plugin({path: 'fs', importer: path.join(srcdir, 'scripts/some-script.js')}), {path: 'fs', external: true});
+  });
+
+  it('codemirror modules', () => {
+    assert.deepEqual(
+        plugin({path: '../../lib/codemirror', importer: path.join(srcdir, 'scripts/some-script.js')}),
+        {path: '../../lib/codemirror', external: true});
+  });
+
+  it('importing generated files', () => {
+    assert.strictEqual(
+        plugin({path: '../../generated/Protocol.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        null);
+  });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        plugin({
+          path: './front_end/third_party/lighthouse/lighthouse-dt-bundle.js',
+          importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')
+        }),
+        {
+          path: './' +
+              path.join(
+                  '..', 'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse',
+                  'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
 });