chrome-devtools-frontend 1.0.1013875 → 1.0.1015276

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -174,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}> => {
@@ -182,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 =
@@ -260,33 +267,95 @@ const resolveScope =
       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(position.lineNumber, position.columnNumber);
-    const endEntry = sourceMap.findEntry(position.lineNumber, position.columnNumber + 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;
     }
-    let text = textCache.get(content);
-    if (!text) {
-      text = new TextUtils.Text.Text(content);
-      textCache.set(content, text);
+    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;
+    }
+    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/panels/elements/components/ElementsBreadcrumbs.ts

@@ -14,8 +14,7 @@ import {crumbsToRender} from './ElementsBreadcrumbsUtils.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type {DOMNode} from './Helper.js';
 
-import {NodeText} from './NodeText.js';
-import type {NodeTextData} from './NodeText.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 
 const UIStrings = {
   /**
@@ -300,11 +299,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
                       @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
                       @focus=${this.#onCrumbFocus(crumb.node)}
                       @blur=${this.#onCrumbBlur(crumb.node)}
-                    ><${NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                    ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
                       nodeTitle: crumb.title.main,
                       nodeId: crumb.title.extras.id,
                       nodeClasses: crumb.title.extras.classes,
-                    } as NodeTextData}></${NodeText.litTagName}></a>
+                    } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
                   </li>`;
               })}
             </ul>

package/front_end/panels/elements/components/LayoutPane.ts

@@ -10,10 +10,9 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
 import type {LayoutElement} from './LayoutPaneUtils.js';
 
-import type {NodeTextData} from './NodeText.js';
-import {NodeText} from './NodeText.js';
 import layoutPaneStyles from '../layoutPane.css.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
@@ -262,11 +261,11 @@ export class LayoutPane extends HTMLElement {
       <label data-element="true" class="checkbox-label">
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} />
         <span class="node-text-container" data-label="true" @mouseenter=${onMouseEnter} @mouseleave=${onMouseLeave}>
-          <${NodeText.litTagName} .data=${{
+          <${NodeText.NodeText.NodeText.litTagName} .data=${{
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeTextData}></${NodeText.litTagName}>
+          } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">

package/front_end/panels/elements/components/QueryContainer.ts

@@ -5,11 +5,10 @@
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type {DOMNode} from './Helper.js';
-import {NodeText} from './NodeText.js';
-import type {NodeTextData} from './NodeText.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = LitHtml;
@@ -90,13 +89,13 @@ export class QueryContainer extends HTMLElement {
         @click=${this.#onContainerLinkClick}
         @mouseenter=${this.#onContainerLinkMouseEnter}
         @mouseleave=${this.#onContainerLinkMouseLeave}
-      ><${NodeText.litTagName}
+      ><${NodeText.NodeText.NodeText.litTagName}
           data-node-title=${nodeTitle}
           .data=${{
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeTextData}></${NodeText.litTagName}></a>
+      } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,

package/front_end/panels/elements/components/components.ts

@@ -15,7 +15,6 @@ import * as ElementsPanelLink from './ElementsPanelLink.js';
 import * as Helper from './Helper.js';
 import * as LayoutPane from './LayoutPane.js';
 import * as LayoutPaneUtils from './LayoutPaneUtils.js';
-import * as NodeText from './NodeText.js';
 import * as QueryContainer from './QueryContainer.js';
 import * as StylePropertyEditor from './StylePropertyEditor.js';
 
@@ -33,7 +32,6 @@ export {
   Helper,
   LayoutPane,
   LayoutPaneUtils,
-  NodeText,
   QueryContainer,
   StylePropertyEditor,
 };

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/elements/components → ui/components/node_text}/NodeText.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
 import nodeTextStyles from './nodeText.css.js';
 
 const {render, html} = LitHtml;

package/front_end/ui/components/node_text/node_text.ts

@@ -0,0 +1,9 @@
+// Copyright 2021 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 NodeText from './NodeText.js';
+
+export {
+  NodeText,
+};

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.1013875"
+  "version": "1.0.1015276"
 }

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'}}]
+    },
   ]
 });