chrome-devtools-frontend 1.0.1013367 → 1.0.1014853

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -17,14 +17,17 @@ interface CachedScopeMap {
 const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, CachedScopeMap>();
 const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string>>();
 
-export class Identifier {
+export class IdentifierPositions {
   name: string;
-  lineNumber: number;
-  columnNumber: number;
-  constructor(name: string, lineNumber: number, columnNumber: number) {
+  positions: {lineNumber: number, columnNumber: number}[];
+
+  constructor(name: string, positions: {lineNumber: number, columnNumber: number}[] = []) {
     this.name = name;
-    this.lineNumber = lineNumber;
-    this.columnNumber = columnNumber;
+    this.positions = positions;
+  }
+
+  addPosition(lineNumber: number, columnNumber: number): void {
+    this.positions.push({lineNumber, columnNumber});
   }
 }
 
@@ -66,7 +69,7 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
 
 export const scopeIdentifiers = async function(
     functionScope: SDK.DebuggerModel.ScopeChainEntry|null, scope: SDK.DebuggerModel.ScopeChainEntry): Promise<{
-  freeVariables: Identifier[], boundVariables: Identifier[],
+  freeVariables: IdentifierPositions[], boundVariables: IdentifierPositions[],
 }|null> {
   if (!functionScope) {
     return null;
@@ -132,24 +135,33 @@ export const scopeIdentifiers = async function(
       continue;
     }
 
+    const identifier = new IdentifierPositions(variable.name);
     for (const offset of variable.offsets) {
       const start = offset + slide;
       cursor.resetTo(start);
-      boundVariables.push(new Identifier(variable.name, cursor.lineNumber(), cursor.columnNumber()));
+      identifier.addPosition(cursor.lineNumber(), cursor.columnNumber());
     }
+    boundVariables.push(identifier);
   }
 
   // Compute free variables by collecting all the ancestor variables that are used in |containingScope|.
   const freeVariables = [];
   for (const ancestor of ancestorScopes) {
     for (const ancestorVariable of ancestor.variables) {
+      let identifier = null;
       for (const offset of ancestorVariable.offsets) {
         if (offset >= containingScope.start && offset < containingScope.end) {
+          if (!identifier) {
+            identifier = new IdentifierPositions(ancestorVariable.name);
+          }
           const start = offset + slide;
           cursor.resetTo(start);
-          freeVariables.push(new Identifier(ancestorVariable.name, cursor.lineNumber(), cursor.columnNumber()));
+          identifier.addPosition(cursor.lineNumber(), cursor.columnNumber());
         }
       }
+      if (identifier) {
+        freeVariables.push(identifier);
+      }
     }
   }
   return {boundVariables, freeVariables};
@@ -162,6 +174,15 @@ export const scopeIdentifiers = async function(
   }
 };
 
+const identifierAndPunctuationRegExp = /^\s*([A-Za-z_$][A-Za-z_$0-9]*)\s*([.;,]?)\s*$/;
+
+const enum Punctuation {
+  None = 0,
+  Comma = 1,
+  Dot = 2,
+  Semicolon = 3,
+}
+
 const resolveScope =
     async(scope: SDK.DebuggerModel
               .ScopeChainEntry): Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
@@ -170,8 +191,6 @@ const resolveScope =
   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
     const identifiersPromise =
@@ -187,17 +206,33 @@ const resolveScope =
           // missing identifier names from SourceMap ranges.
           const promises: Promise<void>[] = [];
 
-          const resolveEntry = (id: Identifier, handler: (sourceName: string) => void): void => {
-            const entry = sourceMap.findEntry(id.lineNumber, id.columnNumber);
-            if (entry && entry.name) {
-              handler(entry.name);
-            } else {
-              promises.push(resolveSourceName(script, sourceMap, id, textCache).then(sourceName => {
+          const resolveEntry = (id: IdentifierPositions, handler: (sourceName: string) => void): void => {
+            // First see if we have a source map entry with a name for the identifier.
+            for (const position of id.positions) {
+              const entry = sourceMap.findEntry(position.lineNumber, position.columnNumber);
+              if (entry && entry.name) {
+                handler(entry.name);
+                return;
+              }
+            }
+            // If there is no entry with the name field, try to infer the name from the source positions.
+            async function resolvePosition(): Promise<void> {
+              if (!sourceMap) {
+                return;
+              }
+              // Let us find the first non-empty mapping of |id| and return that. Ideally, we would
+              // try to compute all the mappings and only use the mapping if all the non-empty
+              // mappings agree. However, that can be expensive for identifiers with many uses,
+              // so we iterate sequentially, stopping at the first non-empty mapping.
+              for (const position of id.positions) {
+                const sourceName = await resolveSourceName(script, sourceMap, id.name, position, textCache);
                 if (sourceName) {
                   handler(sourceName);
+                  return;
                 }
-              }));
+              }
             }
+            promises.push(resolvePosition());
           };
 
           const functionScope = findFunctionScope();
@@ -229,35 +264,98 @@ const resolveScope =
   return await cachedScopeMap.mappingPromise;
 
   async function resolveSourceName(
-      script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, id: Identifier,
+      script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, name: string,
+      position: {lineNumber: number, columnNumber: number},
       textCache: Map<string, TextUtils.Text.Text>): Promise<string|null> {
-    const startEntry = sourceMap.findEntry(id.lineNumber, id.columnNumber);
-    const endEntry = sourceMap.findEntry(id.lineNumber, id.columnNumber + id.name.length);
-    if (!startEntry || !endEntry || !startEntry.sourceURL || startEntry.sourceURL !== endEntry.sourceURL ||
-        !startEntry.sourceLineNumber || !startEntry.sourceColumnNumber || !endEntry.sourceLineNumber ||
-        !endEntry.sourceColumnNumber) {
+    const ranges = sourceMap.findEntryRanges(position.lineNumber, position.columnNumber);
+    if (!ranges) {
       return null;
     }
-    const sourceTextRange = new TextUtils.TextRange.TextRange(
-        startEntry.sourceLineNumber, startEntry.sourceColumnNumber, endEntry.sourceLineNumber,
-        endEntry.sourceColumnNumber);
+    // Extract the underlying text from the compiled code's range and make sure that
+    // it starts with the identifier |name|.
     const uiSourceCode =
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiSourceCodeForSourceMapSourceURL(
-            script.debuggerModel, startEntry.sourceURL, script.isContentScript());
+            script.debuggerModel, ranges.sourceURL, script.isContentScript());
     if (!uiSourceCode) {
       return null;
     }
-    const {content} = await uiSourceCode.requestContent();
-    if (!content) {
+    const compiledText = getTextFor((await script.requestContent()).content);
+    if (!compiledText) {
+      return null;
+    }
+    const compiledToken = compiledText.extract(ranges.range);
+    const parsedCompiledToken = extractIdentifier(compiledToken);
+    if (!parsedCompiledToken) {
+      return null;
+    }
+    const {name: compiledName, punctuation: compiledPunctuation} = parsedCompiledToken;
+    if (compiledName !== name) {
+      return null;
+    }
+
+    // Extract the mapped name from the source code range and ensure that the punctuation
+    // matches the one from the compiled code.
+    const sourceText = getTextFor((await uiSourceCode.requestContent()).content);
+    if (!sourceText) {
       return null;
     }
-    let text = textCache.get(content);
-    if (!text) {
-      text = new TextUtils.Text.Text(content);
-      textCache.set(content, text);
+    const sourceToken = sourceText.extract(ranges.sourceRange);
+    const parsedSourceToken = extractIdentifier(sourceToken);
+    if (!parsedSourceToken) {
+      return null;
+    }
+    const {name: sourceName, punctuation: sourcePunctuation} = parsedSourceToken;
+    // Accept the source name if it is followed by the same punctuation.
+    if (compiledPunctuation === sourcePunctuation) {
+      return sourceName;
+    }
+    // Let us also allow semicolons into commas since that it is a common transformation.
+    if (compiledPunctuation === Punctuation.Comma && sourcePunctuation === Punctuation.Semicolon) {
+      return sourceName;
+    }
+
+    return null;
+
+    function extractIdentifier(token: string): {name: string, punctuation: Punctuation}|null {
+      const match = token.match(identifierAndPunctuationRegExp);
+      if (!match) {
+        return null;
+      }
+
+      const name = match[1];
+      let punctuation: Punctuation|null = null;
+      switch (match[2]) {
+        case '.':
+          punctuation = Punctuation.Dot;
+          break;
+        case ',':
+          punctuation = Punctuation.Comma;
+          break;
+        case ';':
+          punctuation = Punctuation.Semicolon;
+          break;
+        case '':
+          punctuation = Punctuation.None;
+          break;
+        default:
+          console.error(`Name token parsing error: unexpected token "${match[2]}"`);
+          return null;
+      }
+
+      return {name, punctuation};
+    }
+
+    function getTextFor(content: string|null): TextUtils.Text.Text|null {
+      if (!content) {
+        return null;
+      }
+      let text = textCache.get(content);
+      if (!text) {
+        text = new TextUtils.Text.Text(content);
+        textCache.set(content, text);
+      }
+      return text;
     }
-    const originalIdentifier = text.extract(sourceTextRange).trim();
-    return /[a-zA-Z0-9_$]+/.test(originalIdentifier) ? originalIdentifier : null;
   }
 
   function findFunctionScope(): SDK.DebuggerModel.ScopeChainEntry|null {

package/front_end/models/workspace/UISourceCode.ts

@@ -131,7 +131,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   // DevTools UI to be the same script. For now this is just the url but this
   // is likely to change in the future.
   canononicalScriptId(): string {
-    return this.urlInternal;
+    return `${this.contentTypeInternal.name()},${this.urlInternal}`;
   }
 
   parentURL(): Platform.DevToolsPath.UrlString {

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -256,6 +256,7 @@ export class StartView extends UI.Widget.Widget {
   }
   wasShown(): void {
     super.wasShown();
+    this.controller.recomputePageAuditability();
     this.registerCSSFiles([lighthouseStartViewStyles]);
   }
 }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -73,7 +73,8 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   private readonly files: Map<string, Workspace.UISourceCode.UISourceCode>;
   private readonly previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
   private readonly history: History;
-  private readonly uriToUISourceCode: Map<string, Workspace.UISourceCode.UISourceCode>;
+  private readonly uriToUISourceCode: Map<Platform.DevToolsPath.UrlString, Workspace.UISourceCode.UISourceCode>;
+  private readonly idToUISourceCode: Map<string, Workspace.UISourceCode.UISourceCode>;
   private currentFileInternal!: Workspace.UISourceCode.UISourceCode|null;
   private currentView!: UI.Widget.Widget|null;
   private scrollTimer?: number;
@@ -104,6 +105,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.previouslyViewedFilesSetting = setting;
     this.history = History.fromObject(this.previouslyViewedFilesSetting.get());
     this.uriToUISourceCode = new Map();
+    this.idToUISourceCode = new Map();
   }
 
   private onBindingCreated(event: Common.EventTarget.EventTargetEvent<Persistence.Persistence.PersistenceBinding>):
@@ -356,12 +358,13 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   private canonicalUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode):
       Workspace.UISourceCode.UISourceCode {
     // Check if we have already a UISourceCode for this url
-    const existingSourceCode = this.uriToUISourceCode.get(uiSourceCode.canononicalScriptId());
+    const existingSourceCode = this.idToUISourceCode.get(uiSourceCode.canononicalScriptId());
     if (existingSourceCode) {
       // Ignore incoming uiSourceCode, we already have this file.
       return existingSourceCode;
     }
-    this.uriToUISourceCode.set(uiSourceCode.canononicalScriptId(), uiSourceCode);
+    this.idToUISourceCode.set(uiSourceCode.canononicalScriptId(), uiSourceCode);
+    this.uriToUISourceCode.set(uiSourceCode.url(), uiSourceCode);
     return uiSourceCode;
   }
 
@@ -420,6 +423,9 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       if (this.uriToUISourceCode.get(uiSourceCode.url()) === uiSourceCode) {
         this.uriToUISourceCode.delete(uiSourceCode.url());
       }
+      if (this.idToUISourceCode.get(uiSourceCode.canononicalScriptId()) === uiSourceCode) {
+        this.idToUISourceCode.delete(uiSourceCode.canononicalScriptId());
+      }
     }
     this.tabbedPane.closeTabs(tabIds);
   }
@@ -591,7 +597,13 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
         this.uriToUISourceCode.delete(k);
       }
     }
-    // Ensure it is mapped under current url.
+    // Remove from map under old id if it has changed.
+    for (const [k, v] of this.idToUISourceCode) {
+      if (v === uiSourceCode && k !== v.canononicalScriptId()) {
+        this.idToUISourceCode.delete(k);
+      }
+    }
+    // Ensure it is mapped under current url and id.
     this.canonicalUISourceCode(uiSourceCode);
   }
 

package/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts

@@ -153,10 +153,10 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <span class="value-type-cell-no-mode value-type-cell">${i18n.i18n.lockedString(type)}</span>
+      <span class="value-type-cell-no-mode value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
       <div class="value-type-cell">
         <div class="value-type-value-with-link" data-value="true">
-        <span>${unsignedValue}</span>
+        <span class="selectable-text">${unsignedValue}</span>
           ${
             html`
               <button class="jump-to-button" data-jump="true" title=${buttonTitle} ?disabled=${jumpDisabled}
@@ -179,7 +179,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <span class="value-type-cell">${i18n.i18n.lockedString(type)}</span>
+      <span class="value-type-cell selectable-text">${i18n.i18n.lockedString(type)}</span>
       <div>
         <select title=${i18nString(UIStrings.changeValueTypeMode)}
           data-mode-settings="true"
@@ -206,7 +206,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
     const showSignedAndUnsigned =
         signedValue !== unsignedValue && mode !== ValueTypeMode.Hexadecimal && mode !== ValueTypeMode.Octal;
 
-    const unsignedRendered = html`<span class="value-type-cell"  title=${
+    const unsignedRendered = html`<span class="value-type-cell selectable-text"  title=${
         i18nString(UIStrings.unsignedValue)} data-value="true">${unsignedValue}</span>`;
     if (!showSignedAndUnsigned) {
       return unsignedRendered;
@@ -214,8 +214,8 @@ export class ValueInterpreterDisplay extends HTMLElement {
 
     // Some values are too long to show in one line, we're putting them into the next line.
     const showInMultipleLines = type === ValueType.Int32 || type === ValueType.Int64;
-    const signedRendered =
-        html`<span data-value="true" title=${i18nString(UIStrings.signedValue)}>${signedValue}</span>`;
+    const signedRendered = html`<span class="selectable-text" data-value="true" title=${
+        i18nString(UIStrings.signedValue)}>${signedValue}</span>`;
 
     if (showInMultipleLines) {
       return html`

package/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css

@@ -61,3 +61,11 @@
   background-color: var(--color-details-hairline);
   margin: 0 4px;
 }
+
+.selectable-text {
+  user-select: text;
+}
+
+.selectable-text::selection {
+  background-color: var(--legacy-item-selection-bg-color);
+}

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1013367"
+  "version": "1.0.1014853"
 }

package/scripts/devtools_paths.js

@@ -51,7 +51,7 @@ function isInChromiumDirectory() {
   const normalizedPath = PATH_TO_EXECUTED_FILE.split(path.sep).join('/');
   const devtoolsPath = 'src/third_party/devtools-frontend';
   const isInChromium = normalizedPath.includes(devtoolsPath);
-  const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, PATH_TO_EXECUTED_FILE.indexOf(devtoolsPath));
+  const potentialChromiumDir = PATH_TO_EXECUTED_FILE.substring(0, normalizedPath.indexOf(devtoolsPath));
   const result = {isInChromium, chromiumDirectory: potentialChromiumDir};
   _lookUpCaches.set('chromium', result);
   return result;

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -19,6 +19,7 @@ module.exports = {
       noDefineCall: 'Could not find a defineComponent() call for the component {{ tagName }}.',
       defineCallNonLiteral: 'defineComponent() first argument must be a string literal.',
       staticLiteralInvalid: 'static readonly litTagName must use a literal string, with no interpolation.',
+      duplicateStaticLitTagName: 'found a duplicated litTagName: {{ tagName }}',
       litTagNameNotLiteral:
           'litTagName must be defined as a string passed in as LitHtml.literal`component-name`, but no tagged template was found.',
       staticLiteralNotReadonly: 'static litTagName must be readonly.'
@@ -90,8 +91,9 @@ module.exports = {
       });
     }
 
-    /** @type {Set<{classNode: any, tagName: string}>} */
-    const componentClassDefinitionLitTagNamesFound = new Set();
+    // Map of litTagName to the class node.
+    /** @type {Map<string, any}>} */
+    const componentClassDefinitionLitTagNameNodes = new Map();
 
     /** @type {Set<string>} */
     const defineComponentCallsFound = new Set();
@@ -147,8 +149,15 @@ module.exports = {
           // Grab the name of the component, e.g:
           // LitHtml.literal`devtools-foo` will pull "devtools-foo" out.
           const componentTagName = componentTagNameNode.value.quasi.quasis[0].value.cooked;
-          componentClassDefinitionLitTagNamesFound.add(
-              {tagName: componentTagName, classNode: componentClassDefinition});
+
+          // Now we ensure that we haven't found this tag name before. If we
+          // have, we have two components with the same litTagName property,
+          // which is an error.
+          if (componentClassDefinitionLitTagNameNodes.has(componentTagName)) {
+            context.report({node: componentClassDefinition, messageId: 'duplicateStaticLitTagName', data: {tagName: componentTagName}});
+          }
+
+          componentClassDefinitionLitTagNameNodes.set(componentTagName, componentClassDefinition);
         }
 
         // Find all defineComponent() calls and store the arguments to them.
@@ -177,8 +186,7 @@ module.exports = {
           }
         }
 
-        for (const foundComponentClass of componentClassDefinitionLitTagNamesFound) {
-          const {tagName, classNode} = foundComponentClass;
+        for (const [tagName, classNode] of componentClassDefinitionLitTagNameNodes) {
           // Check that each tagName has a matching entry in both other places we expect it.
           if (!defineComponentCallsFound.has(tagName)) {
             context.report({node: classNode, messageId: 'noDefineCall', data: {tagName}});

package/scripts/eslint_rules/tests/check_component_naming_test.js

@@ -233,5 +233,28 @@ ruleTester.run('check_component_naming', rule, {
       filename: 'front_end/ui/components/Foo.ts',
       errors: [{messageId: 'noDefineCall', data: {tagName: 'devtools-bar'}}]
     },
+    {
+      // Multiple components in one file is valid.
+      // But here devtools-foo is fine, but devtools-bar has the wrong static tag name
+      code: `export class Foo extends HTMLElement {
+        static readonly litTagName = LitHtml.literal\`devtools-foo\`
+      }
+
+      export class Bar extends HTMLElement {
+        static readonly litTagName = LitHtml.literal\`devtools-foo\`
+      }
+
+      ComponentHelpers.CustomElements.defineComponent('devtools-foo', Foo);
+      ComponentHelpers.CustomElements.defineComponent('devtools-bar', Foo);
+
+      declare global {
+        interface HTMLElementTagNameMap {
+          'devtools-foo': Foo
+          'devtools-bar': Bar
+        }
+      }`,
+      filename: 'front_end/ui/components/Foo.ts',
+      errors: [{messageId: 'duplicateStaticLitTagName', data: {tagName: 'devtools-foo'}}]
+    },
   ]
 });