chrome-devtools-frontend 1.0.1013298 → 1.0.1014346

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};
@@ -187,17 +199,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,10 +257,11 @@ 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);
+    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) {

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.1013298"
+  "version": "1.0.1014346"
 }

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

package/scripts/webidl-properties/config.js

@@ -0,0 +1,279 @@
+// Copyright 2022 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.
+
+/**
+ * All the specs relevant for generating the DOM pinned properties dataset.
+ * These strings represent file names. A list of all file names can be found at
+ * https://github.com/w3c/webref/tree/main/tr/idl or via the @webref/idl API.
+ *
+ * These spec names are included in the generated dataset. To keep it small,
+ * the values are bitwise or'd.
+ */
+export const SPECS = {
+  'html': 1,
+  'dom': 2,
+  'uievents': 4,
+  'pointerevents': 8,
+  'cssom': 16,
+  'wai-aria': 32
+};
+
+/**
+ * All the "global" attributes as defined in the DOM specification.
+ * Used to annotate the extracted properties from the WebIDL types.
+ */
+export const GLOBAL_ATTRIBUTES = new Set([
+  // https://html.spec.whatwg.org/multipage/dom.html#global-attributes
+  'accesskey', 'autocapitalize', 'autofocus', 'contenteditable', 'dir',      'draggable', 'enterkeyhint',
+  'hidden',    'inputmode',      'is',        'itemid',          'itemprop', 'itemref',   'itemscope',
+  'itemtype',  'lang',           'nonce',     'spellcheck',      'style',    'tabindex',  'title',
+  'translate',
+]);
+
+/**
+ * The "applicable" members for certain "states" that WebIDL types can be in.
+ * In other words, some members are "valid" only valid in certain situations:
+ * for example, with the HTML input element, the set of valid members are
+ * determined by the "type" attribute.
+ */
+export const VALID_MEMBERS = {
+  // https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary
+  HTMLInputElement: {
+    '[type=hidden]': new Set([
+      'autocomplete',
+      'value',
+    ]),
+    '[type=text]': new Set([
+      'autocomplete',
+      'dirname',
+      'list',
+      'maxlength',
+      'minlength',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'list',
+      'selectionstart',
+      'selectionend',
+      'selectiondirection',
+    ]),
+    '[type=search]': new Set([
+      'autocomplete',
+      'dirname',
+      'list',
+      'maxlength',
+      'minlength',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'list',
+      'selectionstart',
+      'selectionend',
+      'selectiondirection',
+    ]),
+    '[type=url]': new Set([
+      'autocomplete',
+      'list',
+      'maxlength',
+      'minlength',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'list',
+      'selectionstart',
+      'selectionend',
+      'selectiondirection',
+    ]),
+    '[type=tel]': new Set([
+      'autocomplete',
+      'list',
+      'maxlength',
+      'minlength',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'list',
+      'selectionstart',
+      'selectionend',
+      'selectiondirection',
+    ]),
+    '[type=email]': new Set([
+      'autocomplete',
+      'list',
+      'maxlength',
+      'minlength',
+      'multiple',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'list',
+    ]),
+    '[type=password]': new Set([
+      'autocomplete',
+      'maxlength',
+      'minlength',
+      'pattern',
+      'placeholder',
+      'readonly',
+      'required',
+      'size',
+      'value',
+      'selectionstart',
+      'selectionend',
+      'selectiondirection',
+    ]),
+    '[type=date]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasdate',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=month]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasdate',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=week]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasdate',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=time]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasdate',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=datetime-local]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=number]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'placeholder',
+      'readonly',
+      'required',
+      'step',
+      'value',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=range]': new Set([
+      'autocomplete',
+      'list',
+      'max',
+      'min',
+      'step',
+      'value',
+      'valueasnumber',
+      'list',
+    ]),
+    '[type=color]': new Set([
+      'autocomplete',
+      'list',
+      'value',
+    ]),
+    '[type=checkbox]': new Set([
+      'checked',
+      'required',
+      'checked',
+      'value',
+    ]),
+    '[type=radio]': new Set([
+      'checked',
+      'required',
+      'checked',
+      'value',
+    ]),
+    '[type=file]': new Set([
+      'accept',
+      'multiple',
+      'required',
+      'files',
+      'value',
+    ]),
+    '[type=submit]': new Set([
+      'formaction',
+      'formenctype',
+      'formmethod',
+      'formnovalidate',
+      'formtarget',
+      'value',
+    ]),
+    '[type=image]': new Set([
+      'alt',
+      'formaction',
+      'formenctype',
+      'formmethod',
+      'formnovalidate',
+      'formtarget',
+      'height',
+      'src',
+      'width',
+      'value',
+    ]),
+    '[type=reset]': new Set([
+      'value',
+    ]),
+    '[type=button]': new Set([
+      'value',
+    ]),
+  },
+};