chrome-devtools-frontend 1.0.1013367 → 1.0.1013875

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/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.1013875"
 }

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

package/scripts/webidl-properties/get-props.js

@@ -0,0 +1,139 @@
+// 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.
+
+import {GLOBAL_ATTRIBUTES, SPECS, VALID_MEMBERS} from './config.js';
+import {merge} from './util.js';
+
+/**
+ * All the members relevant for generating the DOM pinned properties dataset
+ * from WebIDL interfaces, mixins and dictionaries.
+ */
+const ACCEPTED_MEMBER_TYPES = new Set(['attribute', 'field']);
+
+/**
+ * Generates the DOM pinned properties dataset.
+ *
+ * @param {array} specs A list of specs. Each spec specifies its name and
+ * all the idl definitions it contains.
+ * @returns {object} output An object with WebIDL type names as keys and their
+ * WebIDL properties and inheritance/include chains as values.
+ */
+export function getIDLProps(specs, output = {}) {
+  for (const spec of specs) {
+    transform(spec, output);
+  }
+  return output;
+}
+
+function transform({name, idls}, output = {}) {
+  const makeEntry = () => ({
+    inheritance: null,
+    includes: [],
+    props: {},
+  });
+
+  for (const idl of idls) {
+    switch (idl.type) {
+      case 'interface':
+      case 'interface mixin':
+      case 'dictionary': {
+        output[idl.name] = output[idl.name] ?? makeEntry();
+        let props = idl.members?.filter(member => ACCEPTED_MEMBER_TYPES.has(member.type));
+        props = props?.map(member => [member.name, {global: GLOBAL_ATTRIBUTES.has(member.name), specs: [name]}, ]);
+        merge(output[idl.name], {
+          inheritance: idl.inheritance,
+          props: Object.fromEntries(props),
+        });
+        break;
+      }
+      case 'includes': {
+        output[idl.target] = output[idl.target] ?? makeEntry();
+        merge(output[idl.target], {
+          includes: [idl.includes],
+        });
+        break;
+      }
+      case 'callback':
+      case 'callback interface':
+      case 'enum':
+      case 'typedef':
+      case 'namespace': {
+        break;
+      }
+      default: {
+        console.warn('Skipping unknown WebIDL type', idl.type);
+      }
+    }
+  }
+}
+
+/**
+ * Adds additional metadata to the DOM pinned properties dataset.
+ *
+ * Currently only adds information about which properties are valid based on
+ * some state, such as for the HTMLInputElement. See `VALID_MEMBERS`.
+ *
+ * @param {*} output
+ */
+export function addMetadata(output) {
+  for (const [key, value] of Object.entries(output)) {
+    const rule = VALID_MEMBERS[key];
+    if (!rule) {
+      continue;
+    }
+    const states = Object.entries(rule).map(([selector, allowlist]) => {
+      const valid = Object.entries(value.props).filter(([prop]) => allowlist.has(prop.toLowerCase()));
+      return [selector, Object.fromEntries(valid)];
+    });
+    value.states = Object.fromEntries(states);
+  }
+  return output;
+}
+
+/**
+ * Minimizes the DOM pinned properties dataset to remove the bits of data that
+ * don't contain information. For example, empty inheritance/includes chains.
+ *
+ * This should be done right at the end, before writing into the output file, to
+ * allow for certain diagnostics (such as finding "missing types").
+ *
+ * @param {*} output
+ * @returns {object}
+ */
+export function minimize(output) {
+  for (const [key, value] of Object.entries(output)) {
+    if (!value.inheritance) {
+      // Remove empty inheritance chains.
+      delete value.inheritance;
+    }
+    if (!value.includes.length) {
+      // Remove empty include chains.
+      delete value.includes;
+    }
+    const props = Object.entries(value.props);
+    if (!props.length) {
+      // Remove empty 'prop' lists.
+      delete value.props;
+    } else {
+      for (const [, value] of props) {
+        if (!value.global) {
+          // Remove the 'global' flag if it's false.
+          delete value.global;
+        }
+        if (value.specs.length === 1 && value.specs[0] === 'html') {
+          // Remove the 'specs' list if it's just "html".
+          delete value.specs;
+        } else {
+          // Combine multiple spec names into a single value.
+          value.specs = value.specs.reduce((acc, name) => acc | SPECS[name], 0);
+        }
+      }
+    }
+    // Remove the entire entry if there's nothing left after the cleanup above.
+    if (!Object.entries(value).length) {
+      delete output[key];
+    }
+  }
+  return output;
+}