chrome-devtools-frontend 1.0.950850 → 1.0.952284

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/SourceFrame.ts

@@ -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 => {

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<string, string>();
+
 export class ThemeSupport {
   private readonly themeNameInternal: string;
   private themableProperties: Set<string>;
@@ -101,7 +103,16 @@ export class ThemeSupport {
       throw new Error(`Computed value for property (${variableName}) could not be found on :root.`);
     }
 
-    return computedRoot.getPropertyValue(variableName);
+    // 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 = themeValuesCache.get(variableName);
+    if (!cachedValue) {
+      cachedValue = computedRoot.getPropertyValue(variableName);
+      themeValuesCache.set(variableName, cachedValue);
+    }
+
+    return cachedValue;
   }
 
   hasTheme(): boolean {
@@ -280,6 +291,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 +310,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/inspector_overlay/main.ts

@@ -80,10 +80,17 @@ type MessageLookup = {
   drawingFinished: '',
 };
 
+let queue: unknown[][] = [];
+let prevQueue: string = '';
+
 const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLookup[K]]) => {
   const functionName = message[0];
   if (functionName === 'setOverlay') {
     const overlayName = message[1] as keyof Overlays;
+    // No need to swap overlays if it's the same overlay.
+    if (overlays[overlayName] === currentOverlay) {
+      return;
+    }
     if (currentOverlay) {
       currentOverlay.uninstall();
     }
@@ -97,9 +104,16 @@ const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLooku
   } else if (functionName === 'setPlatform') {
     platformName = message[1];
   } else if (functionName === 'drawingFinished') {
-    // TODO The logic needs to be added here once the backend starts sending this event.
+    const currentQueue = JSON.stringify(queue);
+    if (currentQueue !== prevQueue) {
+      for (const message of queue) {
+        currentOverlay.dispatch(message);
+      }
+    }
+    prevQueue = currentQueue;
+    queue = [];
   } else {
-    currentOverlay.dispatch(message);
+    queue.push(message);
   }
 };
 

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.950850"
+  "version": "1.0.952284"
 }

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"
   }
 }