chrome-devtools-frontend 1.0.978673 → 1.0.979150

package/front_end/.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
       'files': ['*.ts'],
       'rules': {
         '@typescript-eslint/explicit-function-return-type': 2,
+        'rulesdir/no_importing_images_from_src': 2,
         'rulesdir/enforce_custom_event_names': 2,
         'rulesdir/set_data_type_reference': 2,
         'rulesdir/lit_html_data_as_type': 2,

package/front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -6,6 +6,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {CSSModel} from './CSSModel.js';
@@ -104,27 +105,38 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
   }
 
   resourceURL(): Platform.DevToolsPath.UrlString {
-    return (this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL);
+    const url = this.isViaInspector() ? this.viaInspectorResourceURL() : this.sourceURL;
+    if (!url && Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return this.dynamicStyleURL();
+    }
+    return url;
   }
 
-  private viaInspectorResourceURL(): Platform.DevToolsPath.UrlString {
+  private getFrameURLPath(): string {
     const model = this.#cssModelInternal.target().model(ResourceTreeModel);
     console.assert(Boolean(model));
     if (!model) {
-      return '' as Platform.DevToolsPath.UrlString;
+      return '';
     }
     const frame = model.frameForId(this.frameId);
     if (!frame) {
-      return '' as Platform.DevToolsPath.UrlString;
+      return '';
     }
     console.assert(Boolean(frame));
     const parsedURL = new Common.ParsedURL.ParsedURL(frame.url);
-    let fakeURL = 'inspector://' + parsedURL.host + parsedURL.folderPathComponents;
-    if (!fakeURL.endsWith('/')) {
-      fakeURL += '/';
+    let urlPath = parsedURL.host + parsedURL.folderPathComponents;
+    if (!urlPath.endsWith('/')) {
+      urlPath += '/';
     }
-    fakeURL += 'inspector-stylesheet';
-    return fakeURL as Platform.DevToolsPath.UrlString;
+    return urlPath;
+  }
+
+  private viaInspectorResourceURL(): Platform.DevToolsPath.UrlString {
+    return `inspector://${this.getFrameURLPath()}inspector-stylesheet` as Platform.DevToolsPath.UrlString;
+  }
+
+  private dynamicStyleURL(): Platform.DevToolsPath.UrlString {
+    return `stylesheet://${this.getFrameURLPath()}style#${this.id}` as Platform.DevToolsPath.UrlString;
   }
 
   lineNumberInSource(lineNumberInStyleSheet: number): number {

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -8,6 +8,7 @@ export const enum FormatterActions {
   HTML_OUTLINE = 'htmlOutline',
   JAVASCRIPT_OUTLINE = 'javaScriptOutline',
   JAVASCRIPT_IDENTIFIERS = 'javaScriptIdentifiers',
+  JAVASCRIPT_SUBSTITUTE = 'javaScriptSubstitute',
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',
   ARGUMENTS_LIST = 'argumentsList',
 }

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -42,7 +42,7 @@ import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
 import {JSONFormatter} from './JSONFormatter.js';
-import {computeSubstitution, applySubstitution} from './Substitute.js';
+import {substituteExpression} from './Substitute.js';
 
 export interface Chunk {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -306,4 +306,4 @@ export function argumentsList(content: string): string[] {
   }
 })();
 
-export {applySubstitution, computeSubstitution};
+export {substituteExpression};

package/front_end/entrypoints/formatter_worker/Substitute.ts

@@ -6,7 +6,12 @@ import * as Acorn from '../../third_party/acorn/acorn.js';
 
 import {ECMA_VERSION} from './AcornTokenizer.js';
 
-export interface Replacement {
+export function substituteExpression(expression: string, nameMap: Map<string, string>): string {
+  const replacements = computeSubstitution(expression, nameMap);
+  return applySubstitution(expression, replacements);
+}
+
+interface Replacement {
   from: string;
   to: string;
   offset: number;
@@ -17,7 +22,7 @@ export interface Replacement {
 // function returns a list of replacements sorted by the offset. The function throws if
 // it cannot parse the expression or the substitution is impossible to perform (for example
 // if the substitution target is 'this' within a function, it would become bound there).
-export function computeSubstitution(expression: string, nameMap: Map<string, string>): Replacement[] {
+function computeSubstitution(expression: string, nameMap: Map<string, string>): Replacement[] {
   // Parse the expression and find variables and scopes.
   const root = Acorn.parse(expression, {ecmaVersion: ECMA_VERSION, allowAwaitOutsideFunction: true, ranges: false}) as
       Acorn.ESTree.Node;
@@ -80,7 +85,7 @@ export function computeSubstitution(expression: string, nameMap: Map<string, str
   return result;
 }
 
-export function applySubstitution(expression: string, replacements: Replacement[]): string {
+function applySubstitution(expression: string, replacements: Replacement[]): string {
   const accumulator = [];
   let last = 0;
   for (const r of replacements) {

package/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.ts

@@ -10,7 +10,8 @@ import {FormatterActions} from './FormatterActions.js';
 
 self.onmessage = function(event: MessageEvent): void {
   const method: FormatterActions = event.data.method;
-  const params: {indentString: string, content: string, mimeType: string} = event.data.params;
+  const params: {indentString: string, content: string, mimeType: string, mapping: [string, string][]} =
+      event.data.params;
   if (!method) {
     return;
   }
@@ -31,6 +32,11 @@ self.onmessage = function(event: MessageEvent): void {
     case FormatterActions.JAVASCRIPT_IDENTIFIERS:
       self.postMessage(FormatterWorker.FormatterWorker.javaScriptIdentifiers(params.content));
       break;
+    case FormatterActions.JAVASCRIPT_SUBSTITUTE: {
+      const mapping = new Map<string, string>(params.mapping);
+      self.postMessage(FormatterWorker.Substitute.substituteExpression(params.content, mapping));
+      break;
+    }
     case FormatterActions.EVALUATE_JAVASCRIPT_SUBSTRING:
       self.postMessage(FormatterWorker.FormatterWorker.evaluatableJavaScriptSubstring(params.content));
       break;

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -108,7 +108,7 @@ export class FormatterWorkerPool {
   }
 
   private runTask(methodName: FormatterActions.FormatterActions, params: {
-    [x: string]: string,
+    [x: string]: string|string[][],
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }): Promise<any> {
@@ -132,6 +132,14 @@ export class FormatterWorkerPool {
         .then(ids => ids || []);
   }
 
+  javaScriptSubstitute(expression: string, mapping: Map<string, string>): Promise<string> {
+    return this
+        .runTask(
+            FormatterActions.FormatterActions.JAVASCRIPT_SUBSTITUTE,
+            {content: expression, mapping: Array.from(mapping.entries())})
+        .then(result => result || '');
+  }
+
   evaluatableJavaScriptSubstring(content: string): Promise<string> {
     return this.runTask(FormatterActions.FormatterActions.EVALUATE_JAVASCRIPT_SUBSTRING, {content: content})
         .then(text => text || '');
@@ -179,13 +187,13 @@ export class FormatterWorkerPool {
 class Task {
   method: string;
   params: {
-    [x: string]: string,
+    [x: string]: string|string[][],
   };
   callback: (arg0: MessageEvent|null) => void;
   isChunked: boolean|undefined;
   constructor(
       method: string, params: {
-        [x: string]: string,
+        [x: string]: string|string[][],
       },
       callback: (arg0: MessageEvent|null) => void, isChunked?: boolean) {
     this.method = method;

package/front_end/panels/console/ConsolePrompt.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
@@ -309,7 +310,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const callFrame = executionContext.debuggerModel.selectedCallFrame();
       if (callFrame) {
         const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
-        expression = this.substituteNames(expression, nameMap);
+        expression = await this.substituteNames(expression, nameMap);
       }
     }
 
@@ -317,11 +318,12 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         executionContext, message, expression, useCommandLineAPI);
   }
 
-  private substituteNames(expression: string, mapping: Map<string, string>): string {
-    // TODO(jarin) Build a more reliable replacer, based on the parsed AST.
-    // Here, we just replace exact occurrences.
-    const replacement = mapping.get(expression);
-    return replacement ?? expression;
+  private async substituteNames(expression: string, mapping: Map<string, string>): Promise<string> {
+    try {
+      return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
+    } catch {
+      return expression;
+    }
   }
 
   private editorUpdate(update: CodeMirror.ViewUpdate): void {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -219,9 +219,7 @@ const HIGHLIGHTABLE_PROPERTIES = [
   {mode: 'flexibility', properties: ['flex', 'flex-basis', 'flex-grow', 'flex-shrink']},
 ];
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-let _stylesSidebarPaneInstance: StylesSidebarPane;
+let stylesSidebarPaneInstance: StylesSidebarPane;
 
 // TODO(crbug.com/1172300) This workaround is needed to keep the linter happy.
 // Otherwise it complains about: Unknown word CssSyntaxError
@@ -258,10 +256,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #urlToChangeTracker: Map<string, ChangeTracker> = new Map();
 
   static instance(): StylesSidebarPane {
-    if (!_stylesSidebarPaneInstance) {
-      _stylesSidebarPaneInstance = new StylesSidebarPane();
+    if (!stylesSidebarPaneInstance) {
+      stylesSidebarPaneInstance = new StylesSidebarPane();
     }
-    return _stylesSidebarPaneInstance;
+    return stylesSidebarPaneInstance;
   }
 
   private constructor() {
@@ -292,7 +290,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.swatchPopoverHelperInternal = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
     this.swatchPopoverHelperInternal.addEventListener(
         InlineEditor.SwatchPopoverHelper.Events.WillShowPopover, this.hideAllPopovers, this);
-    this.linkifier = new Components.Linkifier.Linkifier(_maxLinkLength, /* useLinkDecorator */ true);
+    this.linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
     this.decorator = new StylePropertyHighlighter(this);
     this.lastRevealedProperty = null;
     this.userOperation = false;
@@ -307,7 +305,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.sectionBlocks = [];
     this.idleCallbackManager = null;
     this.needsForceUpdate = false;
-    _stylesSidebarPaneInstance = this;
+    stylesSidebarPaneInstance = this;
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
     this.resizeThrottler = new Common.Throttler.Throttler(100);
@@ -1392,9 +1390,7 @@ async function buildPropertyRuleMaps(content: string):
   return {propertyToSelector, ruleToSelector};
 }
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const _maxLinkLength = 23;
+const MAX_LINK_LENGTH = 23;
 
 export class SectionBlock {
   private readonly titleElementInternal: Element|null;

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -44,6 +44,7 @@ slot[name="property-value"] {
 
 .goto {
   display: none;
+  cursor: pointer;
   position: absolute;
   width: var(--goto-size);
   height: var(--goto-size);

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -24,6 +24,7 @@
   --size: 16px;
 
   display: none;
+  cursor: pointer;
   position: absolute;
   width: var(--size);
   height: var(--size);

package/front_end/panels/webauthn/webauthnPane.css

@@ -75,14 +75,18 @@
   margin: auto;
 }
 
+.authenticator-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
 .authenticator-section-title {
   line-height: 24px;
-  width: 260px;
   display: inline-block;
 }
 
 .authenticator-section-title .authenticator-name-field {
-  width: 220px;
   display: inline-block;
   font-weight: bold;
   border: none;

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.978673"
+  "version": "1.0.979150"
 }

package/scripts/eslint_rules/lib/no_importing_images_from_src.js

@@ -0,0 +1,61 @@
+// 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.
+'use strict';
+
+/**
+ * @fileoverview Prevent importing SVG urls from the `src` directory, and
+ * ensure they are read from `Images/foo.svg`.
+ * Images in the `src/` directory are minified and put into `Images/` as part
+ * of the build process, so we should never import from 'src'.
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SRC_DIRECTORY_PATH_TO_MATCH = 'Images/src/';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'ensure image imports do not include the src/ directory',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      imageImportUsingSrc:
+          'Found an image import containing the `src/` directory. You should always import `Images/foo.svg`.',
+    },
+  },
+  create: function(context) {
+    return {
+      // Matches new URL(...)
+      'NewExpression[callee.name=\'URL\']'(node) {
+        if (!node.arguments || node.arguments.length < 1) {
+          // Invalid code: user is probably mid-way through typing! Just leave
+          // it; TypeScript will error if it ends up being invalid.
+          return;
+        }
+        /** @type {String} */
+        const filePath = node.arguments[0].value;
+        if (!filePath) {
+          return;
+        }
+        if (filePath.includes(SRC_DIRECTORY_PATH_TO_MATCH)) {
+          context.report({
+            node: node.arguments[0],
+            messageId: 'imageImportUsingSrc',
+            fix(fixer) {
+              return fixer.replaceText(
+                  node.arguments[0], `'${filePath.replace(SRC_DIRECTORY_PATH_TO_MATCH, 'Images/')}'`);
+            }
+          });
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/no_importing_images_from_src_test.js

@@ -0,0 +1,40 @@
+// 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.
+'use strict';
+
+const rule = require('../lib/no_importing_images_from_src.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+});
+
+ruleTester.run('no_importing_images_from_src', rule, {
+  valid: [
+    {
+      code: 'const someIcon = new URL(\'../../../Images/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+    },
+  ],
+
+  invalid: [
+    {
+      code: 'const someIcon = new URL(\'../../../Images/src/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+      output: 'const someIcon = new URL(\'../../../Images/test_icon.svg\', import.meta.url).toString()',
+      errors: [{
+        messageId: 'imageImportUsingSrc',
+      }],
+    },
+    {
+      code:
+          'const someIcon = new URL(\'../../../devtools-frontend/front_end/Images/src/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+      output:
+          'const someIcon = new URL(\'../../../devtools-frontend/front_end/Images/test_icon.svg\', import.meta.url).toString()',
+      errors: [{
+        messageId: 'imageImportUsingSrc',
+      }],
+    },
+  ],
+});