chrome-devtools-frontend 1.0.950971 → 1.0.952403

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -226,16 +226,16 @@
 }
 
 .data-grid table.data tr.revealed.selected.dirty {
-  color: var(--legacy-selection-fg-color);
+  color: var(--color-selected-option);
 }
 
 .data-grid.no-selection:focus-visible {
-  border: 1px solid var(--legacy-accent-color) !important; /* stylelint-disable-line declaration-no-important */
+  border: 1px solid var(--color-primary) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .data-grid:focus table.data tr.selected {
-  background-color: var(--legacy-selection-bg-color);
-  color: var(--legacy-selection-fg-color);
+  background-color: var(--color-selected-option-background);
+  color: var(--color-selected-option);
 }
 
 .data-grid:focus tr.selected.dirty {
@@ -249,16 +249,16 @@
 }
 
 .data-grid:focus tr.selected .devtools-link {
-  color: var(--legacy-selection-fg-color);
+  color: var(--color-selected-option);
 }
 
 .data-grid:focus tr.parent.selected td.disclosure::before {
-  background-color: var(--legacy-selection-fg-color);
+  background-color: var(--color-selected-option);
   -webkit-mask-position: 0 0;
 }
 
 .data-grid:focus tr.expanded.selected td.disclosure::before {
-  background-color: var(--legacy-selection-fg-color);
+  background-color: var(--color-selected-option);
   -webkit-mask-position: -16px 0;
 }
 

package/front_end/ui/legacy/components/inline_editor/CSSShadowEditor.ts

@@ -116,7 +116,7 @@ export class CSSShadowEditor extends Common.ObjectWrapper.eventMixin<EventTypes,
     const slider = UI.UIUtils.createSlider(0, maxRange, -1);
     slider.addEventListener('input', this.onSliderInput.bind(this), false);
     field.appendChild(slider);
-    return /** @type {!HTMLInputElement} */ slider as HTMLInputElement;
+    return slider as HTMLInputElement;
   }
 
   wasShown(): void {

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -896,7 +896,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
         continue;
       }
       if (pos.x <= x && x < pos.x + pos.width) {
-        return /** @type {number} */ index as number;
+        return index as number;
       }
     }
 
@@ -2204,7 +2204,6 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;
     this.selectedEntryIndex = -1;
-    /** @type {!Map<string,!Map<string,number>>} */
     this.textWidth = new Map();
     this.chartViewport.scheduleUpdate();
   }
@@ -2272,9 +2271,6 @@ export class TimelineData {
   }
 }
 
-/**
- * @interface
- */
 export interface FlameChartDataProvider {
   minimumBoundary(): number;
 

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -231,7 +231,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     let newIndex: number = this.currentSearchFocusIndex;
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.searchCanceled();
-    this.searchRegex = searchConfig.toSearchRegex(true);
+    this.searchRegex = searchConfig.toSearchRegex(true).regex;
 
     let element: UI.TreeOutline.TreeElement|null;
     for (element = this.treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -120,7 +120,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   private delayedFindSearchMatches: (() => void)|null;
   private currentSearchResultIndex: number;
   private searchResults: SearchMatch[];
-  private searchRegex: RegExp|null;
+  private searchRegex: UI.SearchableView.SearchRegexResult|null;
   private loadError: boolean;
   private muteChangeEventsForSetContent: boolean;
   private readonly sourcePosition: UI.Toolbar.ToolbarText;
@@ -461,7 +461,6 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
           }[],
         }>((resolve, reject) => {
           worker.onmessage =
-              /** @type {{event:string, params:{percentage:number}}} */
               // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               ({data}: MessageEvent<any>): void => {
@@ -831,7 +830,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   jumpToSearchResult(index: number): void {
-    if (!this.loaded || !this.searchResults.length) {
+    if (!this.loaded || !this.searchResults.length || !this.searchRegex) {
       return;
     }
     this.currentSearchResultIndex = (index + this.searchResults.length) % this.searchResults.length;
@@ -841,7 +840,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     const editor = this.textEditor;
     const range = this.searchResults[this.currentSearchResultIndex];
     editor.dispatch({
-      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex as RegExp, range)),
+      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex, range)),
       selection: {anchor: range.from, head: range.to},
       scrollIntoView: true,
       userEvent: 'select.search',
@@ -854,7 +853,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const insert = (this.searchRegex as RegExp).__fromRegExpQuery ? range.insertPlaceholders(replacement) : replacement;
+    const insert = this.searchRegex?.fromQuery ? range.insertPlaceholders(replacement) : replacement;
     const editor = this.textEditor;
     const changes = editor.state.changes({from: range.from, to: range.to, insert});
     editor.dispatch(
@@ -870,7 +869,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const isRegExp = regex.__fromRegExpQuery;
+    const isRegExp = regex.fromQuery;
     const changes = ranges.map(
         match =>
             ({from: match.from, to: match.to, insert: isRegExp ? match.insertPlaceholders(replacement) : replacement}));
@@ -878,13 +877,13 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditor.dispatch({changes, scrollIntoView: true, userEvent: 'input.replace.all'});
   }
 
-  private collectRegexMatches(regexObject: RegExp): SearchMatch[] {
+  private collectRegexMatches({regex}: UI.SearchableView.SearchRegexResult): SearchMatch[] {
     const ranges = [];
     let pos = 0;
     for (const line of this.textEditor.state.doc.iterLines()) {
-      regexObject.lastIndex = 0;
+      regex.lastIndex = 0;
       for (;;) {
-        const match = regexObject.exec(line);
+        const match = regex.exec(line);
         if (!match) {
           break;
         }
@@ -1023,7 +1022,8 @@ const config = {
 };
 
 class ActiveSearch {
-  constructor(readonly regexp: RegExp, readonly currentRange: {from: number, to: number}|null) {
+  constructor(
+      readonly regexp: UI.SearchableView.SearchRegexResult, readonly currentRange: {from: number, to: number}|null) {
   }
 
   map(change: CodeMirror.ChangeDesc): ActiveSearch {
@@ -1037,7 +1037,7 @@ class ActiveSearch {
     return Boolean(
         a === b ||
         a && b && a.currentRange?.from === b.currentRange?.from && a.currentRange?.to === b.currentRange?.to &&
-            a.regexp.source === b.regexp.source && a.regexp.flags === b.regexp.flags);
+            a.regexp.regex.source === b.regexp.regex.source && a.regexp.regex.flags === b.regexp.regex.flags);
   }
 }
 
@@ -1085,9 +1085,9 @@ const searchHighlighter = CodeMirror.ViewPlugin.fromClass(class {
       let pos = from;
       for (const part of doc.iterRange(from, to)) {
         if (part !== '\n') {
-          active.regexp.lastIndex = 0;
+          active.regexp.regex.lastIndex = 0;
           for (;;) {
-            const match = active.regexp.exec(part);
+            const match = active.regexp.regex.exec(part);
             if (!match) {
               break;
             }

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -78,7 +78,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     if (!this.searchConfig) {
       return;
     }
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
     const previousFocusElement = this.currentSearchTreeElements[this.currentSearchFocusIndex];
     if (previousFocusElement) {
       previousFocusElement.setSearchRegex(regex);
@@ -119,7 +119,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.innerSearchCanceled();
     this.currentSearchTreeElements = [];
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
 
     for (let element: (UI.TreeOutline.TreeElement|null) =
              (this.treeOutline.rootElement() as UI.TreeOutline.TreeElement | null);

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -678,7 +678,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
   }
 
   static linkInfo(link: Element|null): _LinkInfo|null {
-    return /** @type {?_LinkInfo} */ link ? infoByAnchor.get(link) || null : null as _LinkInfo | null;
+    return link ? infoByAnchor.get(link) || null : null as _LinkInfo | null;
   }
 
   private static handleClick(event: Event): boolean {
@@ -801,7 +801,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     }
 
     if (uiLocation && uiLocation.uiSourceCode) {
-      const contentProvider = /** @type {!Workspace.UISourceCode.UISourceCode} */ uiLocation.uiSourceCode;
+      const contentProvider = uiLocation.uiSourceCode;
       result.push({
         section: 'clipboard',
         title: UI.UIUtils.copyFileNameLabel(),

package/front_end/ui/legacy/themeColors.css

@@ -15,6 +15,7 @@
   --color-primary-variant: rgb(66 133 244);
   --color-background: rgb(255 255 255);
   --color-background-inverted: rgb(0 0 0);
+  --color-background-inverted-opacity-2: rgb(0 0 0 / 2%);
   --color-background-inverted-opacity-30: rgb(0 0 0 / 30%);
   --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
   --color-background-opacity-50: rgb(255 255 255 / 50%);
@@ -192,6 +193,7 @@
   --color-primary-variant: rgb(102 157 246);
   --color-background: rgb(32 33 36);
   --color-background-inverted: rgb(255 255 255);
+  --color-background-inverted-opacity-2: rgb(255 255 255 / 2%);
   --color-background-inverted-opacity-30: rgb(255 255 255 / 30%);
   --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
   --color-background-opacity-50: rgb(32 33 36 / 50%);

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -41,6 +41,8 @@ import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.
 
 let themeSupportInstance: ThemeSupport;
 
+const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
+
 export class ThemeSupport {
   private readonly themeNameInternal: string;
   private themableProperties: Set<string>;
@@ -94,14 +96,38 @@ export class ThemeSupport {
     return themeSupportInstance;
   }
 
-  getComputedValue(variableName: string): string {
-    const computedRoot = this.computedRoot();
-
+  getComputedValue(variableName: string, target: Element|null = null): string {
+    const computedRoot = target ? window.getComputedStyle(target) : this.computedRoot();
     if (typeof computedRoot === 'symbol') {
       throw new Error(`Computed value for property (${variableName}) could not be found on :root.`);
     }
 
-    return computedRoot.getPropertyValue(variableName);
+    // Since we might query the same variable name from various targets we need to support
+    // per-target caching of computed values. Here we attempt to locate the particular computed
+    // value cache for the target. If no target was specified we use the default computed root,
+    // which belongs to the document element.
+    let computedRootCache = themeValuesCache.get(computedRoot);
+    if (!computedRootCache) {
+      computedRootCache = new Map<string, string>();
+      themeValuesCache.set(computedRoot, computedRootCache);
+    }
+
+    // Since theme changes trigger a reload, we can avoid repeatedly looking up color values
+    // dynamically. Instead we can look up the first time and cache them for future use,
+    // knowing that the cache will be invalidated by virtue of a reload when the theme changes.
+    let cachedValue = computedRootCache.get(variableName);
+    if (!cachedValue) {
+      cachedValue = computedRoot.getPropertyValue(variableName).trim();
+
+      // If we receive back an empty value (nothing has been set) we don't store it for the future.
+      // This means that subsequent requests will continue to query the styles in case the value
+      // has been set.
+      if (cachedValue) {
+        computedRootCache.set(variableName, cachedValue);
+      }
+    }
+
+    return cachedValue;
   }
 
   hasTheme(): boolean {
@@ -280,6 +306,12 @@ export class ThemeSupport {
     output.push(';');
   }
 
+  /**
+   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
+   * the values declared in global stylesheets.
+   *
+   * @deprecated
+   */
   patchColorText(text: string, colorUsage: number): string {
     const color = Common.Color.Color.parse(text);
     if (!color) {
@@ -293,6 +325,12 @@ export class ThemeSupport {
     return outText || text;
   }
 
+  /**
+   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
+   * the values declared in global stylesheets.
+   *
+   * @deprecated
+   */
   patchColor(color: Common.Color.Color, colorUsage: number): Common.Color.Color {
     const hsla = color.hsla();
     this.patchHSLA(hsla, colorUsage);

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.950971"
+  "version": "1.0.952403"
 }

package/scripts/eslint_rules/lib/use_private_class_members.js

@@ -0,0 +1,41 @@
+// 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.
+
+/**
+ * @fileoverview Rule to ban private keyword in components
+ * @author Tim van der Lippe
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Usage of private keyword',
+      category: 'Possible Errors',
+    },
+
+    fixable: 'code',
+    schema: [],  // no options
+    messages:
+        {do_not_use_private: 'Use private class notation (start the name with a `#`) rather than the private keyword'},
+  },
+  create: function(context) {
+    return {
+      ['MethodDefinition, PropertyDefinition'](node) {
+        if (node.accessibility === 'private' && node.kind !== 'constructor') {
+          context.report({
+            node: node.key,
+            messageId: 'do_not_use_private',
+          });
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/use_private_class_members_test.js

@@ -0,0 +1,62 @@
+// Copyright 2020 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/use_private_class_members.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+});
+
+ruleTester.run('use_private_class_members', rule, {
+  valid: [
+    {
+      code: `class Foo {
+        #method() {}
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+    {
+      code: `class Foo {
+        public method() {}
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+    {
+      code: `class Foo {
+        public field: string;
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+    {
+      code: `class Foo {
+        private constructor() {}
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+  ],
+
+  invalid: [
+    {
+      code: `class Foo {
+        private method() {}
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{messageId: 'do_not_use_private'}],
+    },
+    {
+      code: `class Foo {
+        private field: string;
+      }
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{messageId: 'do_not_use_private'}],
+    },
+  ]
+});

package/scripts/migration/class-fields/migrate.js

@@ -33,7 +33,7 @@ for (const file of files) {
   }
   const classNodes = file.getClasses();
   for (const classNode of classNodes) {
-    for (const property of classNode.getInstanceProperties()) {
+    for (const property of classNode.getInstanceMembers()) {
       const name = property.getStructure().name;
       console.log(name);
       if (name.startsWith('#') || !property.hasModifier(SyntaxKind.PrivateKeyword)) {
@@ -44,8 +44,7 @@ for (const file of files) {
         continue;
       }
 
-      // https://github.com/dsherret/ts-morph/issues/1198
-      const newName = `SOME_STUPID_PREFIX_${name}`;
+      const newName = `#${name}`;
 
       property.toggleModifier('private', false);
       property.rename(newName);

package/scripts/migration/class-fields/migrate.sh

@@ -3,8 +3,6 @@
 # scripts/migration/class-fields/migrate.sh panels/console
 #
 $PWD/third_party/node/node.py --output scripts/migration/class-fields/migrate.js $1/
-find $PWD/front_end/$1/ -type f -exec sed -i -e 's/SOME_STUPID_PREFIX_/#/g' {} \;
 git cl format --js
 NINJA_SUMMARIZE_BUILD=1 autoninja -C out/Default front_end/$1:bundle
-git add .
-git commit -m "Migrate to private class fields in $1" -m "" -m "R=szuend@chromium.org" -m "" -m "Bug: 1222126"
+echo 'git commit -m "Migrate to private class fields in $1" -m "" -m "R=szuend@chromium.org" -m "" -m "Bug: 1222126"'

package/scripts/migration/class-fields/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "ts-morph": "^12.0.0"
+    "ts-morph": "^13.0.1"
   }
 }