chrome-devtools-frontend 1.0.956060 → 1.0.956401

package/config/gni/devtools_grd_files.gni

@@ -1553,7 +1553,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/inspectorCommon.css.js",
   "front_end/ui/legacy/inspectorCommon.css.legacy.js",
   "front_end/ui/legacy/inspectorSyntaxHighlight.css.legacy.js",
-  "front_end/ui/legacy/inspectorSyntaxHighlightDark.css.legacy.js",
   "front_end/ui/legacy/inspectorViewTabbedPane.css.legacy.js",
   "front_end/ui/legacy/listWidget.css.legacy.js",
   "front_end/ui/legacy/popover.css.legacy.js",

package/front_end/core/i18n/locales/en-US.json

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Show console drawer"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "The system-preferred color scheme has changed. To apply this change to DevTools, reload."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Undock into separate window"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -1190,9 +1190,6 @@
   "entrypoints/main/MainImpl.ts | showConsoleDrawer": {
     "message": "Ŝh́ôẃ ĉón̂śôĺê d́r̂áŵér̂"
   },
-  "entrypoints/main/MainImpl.ts | theSystempreferredColorSchemeHas": {
-    "message": "T̂h́ê śŷśt̂ém̂-ṕr̂éf̂ér̂ŕêd́ ĉól̂ór̂ śĉh́êḿê h́âś ĉh́âńĝéd̂. T́ô áp̂ṕl̂ý t̂h́îś ĉh́âńĝé t̂ó D̂év̂T́ôól̂ś, r̂él̂óâd́."
-  },
   "entrypoints/main/MainImpl.ts | undockIntoSeparateWindow": {
     "message": "Ûńd̂óĉḱ îńt̂ó ŝép̂ár̂át̂é ŵín̂d́ôẃ"
   },

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -11,3 +11,13 @@ export const enum FormatterActions {
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',
   ARGUMENTS_LIST = 'argumentsList',
 }
+
+export interface FormatMapping {
+  original: number[];
+  formatted: number[];
+}
+
+export interface FormatResult {
+  content: string;
+  mapping: FormatMapping;
+}

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -30,7 +30,6 @@
 
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
-import type * as Formatter from '../../models/formatter/formatter.js';
 import * as Acorn from '../../third_party/acorn/acorn.js';
 import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
@@ -38,6 +37,7 @@ import {AcornTokenizer, ECMA_VERSION} from './AcornTokenizer.js';
 import {CSSFormatter} from './CSSFormatter.js';
 import {ESTreeWalker} from './ESTreeWalker.js';
 import {FormattedContentBuilder} from './FormattedContentBuilder.js';
+import type {FormatResult} from './FormatterActions.js';
 import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
@@ -179,12 +179,11 @@ export function javaScriptIdentifiers(content: string): {
   return identifiers.map(id => ({name: 'name' in id && id.name || undefined, offset: id.start}));
 }
 
-export function format(
-    mimeType: string, text: string, indentString?: string): Formatter.FormatterWorkerPool.FormatResult {
+export function format(mimeType: string, text: string, indentString?: string): FormatResult {
   // Default to a 4-space indent.
   indentString = indentString || '    ';
 
-  let result: Formatter.FormatterWorkerPool.FormatResult;
+  let result: FormatResult;
   const builder = new FormattedContentBuilder(indentString);
   const lineEndings = Platform.StringUtilities.findLineEndingIndexes(text);
   try {

package/front_end/entrypoints/main/MainImpl.ts

@@ -51,16 +51,12 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {ExecutionContextSelector} from './ExecutionContextSelector.js';
 
 const UIStrings = {
   /**
-  *@description A message to display prompting the user to reload DevTools if the OS color scheme changes.
-  */
-  theSystempreferredColorSchemeHas:
-      'The system-preferred color scheme has changed. To apply this change to DevTools, reload.',
-  /**
   *@description Title of item in main
   */
   customizeAndControlDevtools: 'Customize and control DevTools',
@@ -408,14 +404,26 @@ export class MainImpl {
 
     const defaultThemeSetting = 'systemPreferred';
     const themeSetting = Common.Settings.Settings.instance().createSetting('uiTheme', defaultThemeSetting);
-    UI.UIUtils.initializeUIUtils(document, themeSetting);
-    if (themeSetting.get() === defaultThemeSetting) {
-      const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      darkThemeMediaQuery.addEventListener('change', () => {
-        UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-            i18nString(UIStrings.theSystempreferredColorSchemeHas));
-      });
+    UI.UIUtils.initializeUIUtils(document);
+
+    // Initialize theme support and apply it.
+    if (!ThemeSupport.ThemeSupport.hasInstance()) {
+      ThemeSupport.ThemeSupport.instance({forceNew: true, setting: themeSetting});
     }
+
+    ThemeSupport.ThemeSupport.instance().applyTheme(document);
+
+    const onThemeChange = (): void => {
+      ThemeSupport.ThemeSupport.instance().applyTheme(document);
+    };
+
+    // When the theme changes we instantiate a new theme support and reapply.
+    // Equally if the user has set to match the system and the OS preference changes
+    // we perform the same change.
+    const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkThemeMediaQuery.addEventListener('change', onThemeChange);
+    themeSetting.addChangeListener(onThemeChange);
+
     UI.UIUtils.installComponentRootStyles((document.body as Element));
 
     this.#addMainEventListeners(document);

package/front_end/entrypoints/main/main-meta.ts

@@ -588,7 +588,7 @@ Common.Settings.registerSettingExtension({
   settingName: 'uiTheme',
   settingType: Common.Settings.SettingType.ENUM,
   defaultValue: 'systemPreferred',
-  reloadRequired: true,
+  reloadRequired: false,
   options: [
     {
       title: i18nLazyString(UIStrings.switchToSystemPreferredColor),

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -119,9 +119,9 @@ export class FormatterWorkerPool {
     });
   }
 
-  format(mimeType: string, content: string, indentString: string): Promise<FormatResult> {
+  format(mimeType: string, content: string, indentString: string): Promise<FormatterActions.FormatResult> {
     const parameters = {mimeType: mimeType, content: content, indentString: indentString};
-    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatResult>;
+    return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatterActions.FormatResult>;
   }
 
   javaScriptIdentifiers(content: string): Promise<{
@@ -195,11 +195,6 @@ class Task {
   }
 }
 
-export interface FormatResult {
-  content: string;
-  mapping: FormatMapping;
-}
-
 interface CSSProperty {
   name: string;
   nameRange: TextRange;
@@ -220,11 +215,6 @@ export interface OutlineItem {
   subtitle?: string;
 }
 
-export interface FormatMapping {
-  original: number[];
-  formatted: number[];
-}
-
 export interface CSSStyleRule {
   selectorText: string;
   styleRange: TextRange;

package/front_end/models/formatter/ScriptFormatter.ts

@@ -30,8 +30,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js'; // eslint-disable-line rulesdir/es_modules_import
 
-import type {FormatMapping} from './FormatterWorkerPool.js';
 import {formatterWorkerPool} from './FormatterWorkerPool.js';
 
 function locationToPosition(lineEndings: number[], lineNumber: number, columnNumber: number): number {
@@ -102,9 +102,9 @@ class IdentityFormatterSourceMapping implements FormatterSourceMapping {
 class FormatterSourceMappingImpl implements FormatterSourceMapping {
   private readonly originalLineEndings: number[];
   private readonly formattedLineEndings: number[];
-  private readonly mapping: FormatMapping;
+  private readonly mapping: FormatterActions.FormatMapping;
 
-  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatMapping) {
+  constructor(originalLineEndings: number[], formattedLineEndings: number[], mapping: FormatterActions.FormatMapping) {
     this.originalLineEndings = originalLineEndings;
     this.formattedLineEndings = formattedLineEndings;
     this.mapping = mapping;

package/front_end/panels/emulation/AdvancedApp.ts

@@ -77,8 +77,8 @@ export class AdvancedApp implements Common.App.App {
   }
 
   deviceModeEmulationFrameLoaded(toolboxDocument: Document): void {
-    UI.UIUtils.initializeUIUtils(
-        toolboxDocument, Common.Settings.Settings.instance().createSetting('uiTheme', 'default'));
+    Common.Settings.Settings.instance().createSetting('uiTheme', 'default');
+    UI.UIUtils.initializeUIUtils(toolboxDocument);
     UI.UIUtils.installComponentRootStyles((toolboxDocument.body as Element));
     UI.ContextMenu.ContextMenu.installHandler(toolboxDocument);
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -243,6 +243,25 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.interactionsHeaderLevel2 = this.buildGroupStyle({padding: 2, nestingLevel: 1});
     this.experienceHeader = this.buildGroupStyle({collapsible: false});
 
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const headers = [
+        this.headerLevel1,
+        this.headerLevel2,
+        this.staticHeader,
+        this.framesHeader,
+        this.collapsibleTimingsHeader,
+        this.timingsHeader,
+        this.screenshotsHeader,
+        this.interactionsHeaderLevel1,
+        this.interactionsHeaderLevel2,
+        this.experienceHeader,
+      ];
+      for (const header of headers) {
+        header.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+        header.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
+      }
+    });
+
     this.flowEventIndexById = new Map();
   }
 

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -79,6 +79,12 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     this.timeSpan = 0;
     this.requests = [];
     this.maxLevel = 0;
+
+    // In the event of a theme change, these colors must be recalculated.
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.style.color = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+      this.style.backgroundColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');
+    });
   }
 
   setModel(performanceModel: PerformanceModel|null): void {
@@ -194,7 +200,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     const end = Math.max(timeToPixel(endTime), finish);
 
     // Draw waiting time.
-    context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background-opacity-80');
+    context.fillStyle = 'hsla(0, 100%, 100%, 0.8)';
     context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2);
     // Clear portions of initial rect to prepare for the ticks.
     context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background');

package/front_end/ui/legacy/UIUtils.ts

@@ -33,7 +33,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.js';
 import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -46,7 +45,6 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {Icon} from './Icon.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
-import * as ThemeSupport from './theme_support/theme_support.js';
 import * as Utils from './utils/utils.js';
 
 import type {ToolbarButton} from './Toolbar.js';
@@ -1043,7 +1041,7 @@ export class LongClickController {
   static readonly TIME_MS = 200;
 }
 
-export function initializeUIUtils(document: Document, themeSetting: Common.Settings.Setting<string>): void {
+export function initializeUIUtils(document: Document): void {
   document.body.classList.toggle('inactive', !document.hasFocus());
   if (document.defaultView) {
     document.defaultView.addEventListener('focus', windowFocused.bind(undefined, document), false);
@@ -1051,11 +1049,6 @@ export function initializeUIUtils(document: Document, themeSetting: Common.Setti
   }
   document.addEventListener('focus', Utils.focusChanged.bind(undefined), true);
 
-  if (!ThemeSupport.ThemeSupport.hasInstance()) {
-    ThemeSupport.ThemeSupport.instance({forceNew: true, setting: themeSetting});
-  }
-  ThemeSupport.ThemeSupport.instance().applyTheme(document);
-
   const body = (document.body as Element);
   GlassPane.setContainer(body);
 }

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

@@ -227,6 +227,10 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     // Keyboard focused group is used to navigate groups irrespective of whether they are selectable or not
     this.keyboardFocusedGroup = -1;
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      this.scheduleUpdate();
+    });
   }
 
   willHide(): void {
@@ -1134,7 +1138,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
         if (this.isGroupFocused(index)) {
           context.fillStyle =
-              ThemeSupport.ThemeSupport.instance().getComputedValue('--custom-val-test', this.contentElement);
+              ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
           context.fillRect(0, offset, width, groupHeight - group.style.padding);
         }
       });

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -27,18 +27,16 @@
  */
 
 .webkit-css-property {
-  color: var(--webkit-css-property-color, rgb(200 0 0)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, var(--color-syntax-1)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .webkit-html-comment {
   /* Keep this in sync with view-source.css (.webkit-html-comment) */
-  color: rgb(35 110 37); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-comment);
 }
 
 .webkit-html-tag {
-  color: rgb(168 148 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-tag);
 }
 
 .webkit-html-tag-name,
@@ -49,16 +47,17 @@
 
 .webkit-html-pseudo-element {
   /* This one is non-standard. */
-  color: rgb(17 85 204); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-pseudo-element);
 }
 
 .webkit-html-js-node,
 .webkit-html-css-node {
+  color: var(--color-text-primary);
   white-space: pre-wrap;
 }
 
 .webkit-html-text-node {
+  color: var(--color-text-primary);
   unicode-bidi: -webkit-isolate;
 }
 
@@ -77,15 +76,13 @@
 
 .webkit-html-attribute-name {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
-  color: var(--color-token-attribute); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute);
   unicode-bidi: -webkit-isolate;
 }
 
 .webkit-html-attribute-value {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
-  color: rgb(26 26 166); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--color-token-attribute-value);
   unicode-bidi: -webkit-isolate;
   word-break: break-all;
 }

package/front_end/ui/legacy/themeColors.css

@@ -155,6 +155,7 @@
   --color-token-meta: rgb(85 85 85);
   --color-token-deleted: rgb(221 68 68);
   --color-token-inserted: rgb(34 153 34);
+  --color-token-pseudo-element: rgb(17 85 204);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: #c0c0c0;
@@ -295,8 +296,9 @@
   --color-token-comment: rgb(137 137 137);
   --color-token-tag: rgb(93 176 215);
   --color-token-attribute: rgb(155 187 220);
-  --color-token-attribute-value: rgb(1 200 1);
+  --color-token-attribute-value: rgb(242 151 102);
   --color-token-meta: rgb(221 251 85);
+  --color-token-pseudo-element: rgb(237 119 229);
 
   /* Colors used by the code editor */
   --color-secondary-cursor: rgb(63 63 63);

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

@@ -36,23 +36,18 @@
 import * as Common from '../../../core/common/common.js';
 
 import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
-import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.css.legacy.js';
 
 let themeSupportInstance: ThemeSupport;
 
 const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
-export class ThemeSupport {
-  private readonly themeNameInternal: string;
-  private readonly customSheets: Set<string>;
-  private readonly computedRoot: () => symbol | CSSStyleDeclaration;
+export class ThemeSupport extends EventTarget {
+  private themeNameInternal = 'systemPreferred';
+  private customSheets: Set<string> = new Set();
+  private computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
 
-  private constructor(setting: Common.Settings.Setting<string>) {
-    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
-    this.themeNameInternal = setting.get() === 'systemPreferred' ? systemPreferredTheme : setting.get();
-
-    this.customSheets = new Set();
-    this.computedRoot = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
+  private constructor(private setting: Common.Settings.Setting<string>) {
+    super();
   }
 
   static hasInstance(): boolean {
@@ -119,9 +114,6 @@ export class ThemeSupport {
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
-    if (this.themeNameInternal === 'dark') {
-      this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
-    }
   }
 
   /**
@@ -142,28 +134,37 @@ export class ThemeSupport {
     }
   }
 
-  isForcedColorsMode(): boolean {
-    return window.matchMedia('(forced-colors: active)').matches;
-  }
-
   addCustomStylesheet(sheetText: string): void {
     this.customSheets.add(sheetText);
   }
 
   applyTheme(document: Document): void {
-    if (!this.hasTheme() || this.isForcedColorsMode() || this.themeNameInternal !== 'dark') {
+    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
+    if (isForcedColorsMode) {
       return;
     }
 
-    document.documentElement.classList.add('-theme-with-dark-background');
+    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+    this.themeNameInternal = this.setting.get() === 'systemPreferred' ? systemPreferredTheme : this.setting.get();
+
+    const wasDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+    document.documentElement.classList.toggle('-theme-with-dark-background', this.themeNameInternal === 'dark');
+
+    const isDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+
+    // In the event the theme changes we need to clear caches and notify subscribers.
+    if (wasDarkThemed !== isDarkThemed) {
+      themeValuesCache.clear();
+      this.customSheets.clear();
+      this.dispatchEvent(new ThemeChangeEvent());
+    }
   }
 }
-export namespace ThemeSupport {
-  // TODO(crbug.com/1167717): Make this a const enum again
-  // eslint-disable-next-line rulesdir/const_enum
-  export enum ColorUsage {
-    Unknown = 0,
-    Foreground = 1,
-    Background = 2,
+
+export class ThemeChangeEvent extends Event {
+  static readonly eventName = 'themechange';
+
+  constructor() {
+    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
   }
 }

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.956060"
+  "version": "1.0.956401"
 }

package/scripts/eslint_rules/lib/no_bound_component_methods.js

@@ -0,0 +1,116 @@
+// 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.
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce that no methods that are used as LitHtml events are bound.',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: [],  // no options
+    messages: {
+      nonRenderBindFound:
+          'Found bound method name {{ methodName }} on {{ componentName }} that was not `render`. Lit-Html binds all event handlers for you automatically so this is not required.',
+    },
+  },
+  create: function(context) {
+    function nodeIsHTMLElementClassDeclaration(node) {
+      return node.type === 'ClassDeclaration' && node.superClass && node.superClass.name === 'HTMLElement';
+    }
+
+    const classesToCheck = new Set();
+
+    // Store any method names that were passed to addEventListener.
+    // With the following code:
+    // window.addEventListener('click', this.boundOnClick)
+    // we would add `boundOnClick` to this set.
+    const addEventListenerCallPropertyNames = new Set();
+
+    function checkPropertyDeclarationForBinding(className, node) {
+      if (!node.value || node.value.type !== 'CallExpression') {
+        return;
+      }
+      if (node.value.callee.type !== 'MemberExpression') {
+        return;
+      }
+      if (node.value.callee.property.name !== 'bind') {
+        return;
+      }
+      // At this point we know it's a property of the form:
+      //  someBoundThing = this.thing.bind(X)
+      // and now we want to check that the argument passed to bind is `this`.
+      // If the argument to bind is not `this`, we leave it be and move on.
+      if (node.value.arguments[0]?.type !== 'ThisExpression') {
+        return;
+      }
+
+      // At this point it's definitely of the form:
+      //  someBoundThing = this.thing.bind(this)
+      // But we know that `render` may be bound for the scheduler, so if it's render we can move on
+      if (node.value.callee.object.property.name === 'render') {
+        return;
+      }
+
+      // Now it's an error UNLESS we found a call to
+      //  addEventListener(x, this.#boundFoo),
+      // in which case it's allowed.
+
+      // Get the property name for the bound method
+      // #boundFoo = this.foo.bind(this);
+      // node.key.name === 'boundFoo';
+      const boundPropertyName = node.key.name;
+      if (addEventListenerCallPropertyNames.has(boundPropertyName)) {
+        return;
+      }
+
+      context.report({
+        node: node,
+        messageId: 'nonRenderBindFound',
+        data: {componentName: className, methodName: node.value.callee.object.property.name}
+      });
+    }
+
+    function checkClassForBoundMethods(classDeclarationNode) {
+      const classPropertyDeclarations = classDeclarationNode.body.body.filter(node => {
+        return node.type === 'PropertyDefinition';
+      });
+      for (const decl of classPropertyDeclarations) {
+        checkPropertyDeclarationForBinding(classDeclarationNode.id.name, decl);
+      }
+    }
+
+    return {
+      ClassDeclaration(classDeclarationNode) {
+        if (!nodeIsHTMLElementClassDeclaration(classDeclarationNode)) {
+          return;
+        }
+
+        classesToCheck.add(classDeclarationNode);
+      },
+      'CallExpression[callee.type=\'MemberExpression\'][callee.property.name=\'addEventListener\']'(
+          callExpressionNode) {
+        const methodArg = callExpressionNode.arguments[1];
+        // Confirm that the argument is this.X, otherwise skip it
+        if (methodArg.type !== 'MemberExpression') {
+          return;
+        }
+
+        // Get the property from the addEventListener call
+        // window.addEventListener('click', this.#boundFoo)
+        // This will be the node representing `#boundFoo`
+        // and its `.name` property will be `boundFoo`
+        const propertyArg = methodArg.property;
+        addEventListenerCallPropertyNames.add(propertyArg.name);
+      },
+      'Program:exit'() {
+        for (const classNode of classesToCheck) {
+          checkClassForBoundMethods(classNode);
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/no_bound_component_methods_test.js

@@ -0,0 +1,85 @@
+// 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.
+'use strict';
+
+const rule = require('../lib/no_bound_component_methods.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+ruleTester.run('no_bound_component_methods', rule, {
+  valid: [
+    {
+      code: `export class FeedbackButton extends SomeOtherNonElementThing {
+  readonly #boundClick = this.onClick.bind(this);
+}`,
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  readonly #boundRender = this.render.bind(this);
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
+}`,
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  readonly #boundRender = this.render.bind(this);
+  #globalBoundThing = this.someEvent.bind(this);
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  constructor() {
+    window.addEventListener('click', this.#globalBoundThing);
+  }
+}`,
+      filename: 'front_end/components/test.ts',
+    },
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  readonly #boundRender = this.render.bind(this);
+  private globalBoundThing = this.someEvent.bind(this);
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  constructor() {
+    window.addEventListener('click', this.globalBoundThing);
+  }
+}`,
+      filename: 'front_end/components/test.ts',
+    },
+  ],
+  invalid: [
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal\`devtools-feedback-button\`;
+  readonly #boundRender = this.render.bind(this);
+  readonly #boundClick = this.onClick.bind(this);
+}`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'nonRenderBindFound', data: {componentName: 'FeedbackButton', methodName: 'onClick'}}]
+    },
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal\`devtools-feedback-button\`;
+  private readonly boundClick = this.onClick.bind(this);
+}`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'nonRenderBindFound', data: {componentName: 'FeedbackButton', methodName: 'onClick'}}]
+    },
+    {
+      code: `export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal\`devtools-feedback-button\`;
+  private readonly boundClick = this.onClick.bind(this);
+  private readonly boundFocus = this.onFocus.bind(this);
+
+  constructor() {
+    this.addEventListener('click', this.boundClick);
+  }
+}`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'nonRenderBindFound', data: {componentName: 'FeedbackButton', methodName: 'onFocus'}}]
+    },
+  ]
+});

package/front_end/ui/legacy/inspectorSyntaxHighlightDark.css

@@ -1,270 +0,0 @@
-/*
- * Copyright 2015 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.
- */
-
-.cm-js-atom {
-  color: rgb(161 247 181); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-attribute {
-  color: rgb(97 148 198); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-builtin {
-  color: rgb(159 180 214); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-comment {
-  color: rgb(116 116 116); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-def {
-  color: var(--color-token-tag);
-}
-
-.cm-js-keyword {
-  color: rgb(154 127 213); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-link {
-  color: rgb(159 180 214); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-meta {
-  color: rgb(221 251 85); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-number {
-  color: rgb(161 247 181); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-operator {
-  color: rgb(210 192 87); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-property {
-  color: rgb(210 192 87); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-string {
-  color: rgb(242 139 84); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-string-2 {
-  color: rgb(242 139 84); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-tag {
-  color: var(--color-token-tag);
-}
-
-.cm-js-variable {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-js-variable-2 {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-atom {
-  color: rgb(161 247 181); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-comment {
-  color: rgb(116 116 116); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-variable {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-keyword {
-  color: rgb(154 127 213); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-number {
-  color: rgb(161 247 181); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-operator {
-  color: rgb(210 192 87); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-atom {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-builtin {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-def {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-comment {
-  color: rgb(116 116 116); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-meta {
-  color: rgb(132 240 255); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-number {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-operator {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-property {
-  color: rgb(132 240 255); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-qualifier {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-string {
-  color: rgb(231 194 111); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-string-2 {
-  color: rgb(217 217 217); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-tag {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-variable {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-css-variable-2 {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-xml-comment {
-  color: rgb(137 137 137); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-xml-error {
-  color: rgb(198 95 95); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-xml-string {
-  color: rgb(242 151 102); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-xml-tag {
-  color: var(--color-token-tag);
-}
-
-.cm-xml-attribute {
-  color: var(--color-token-attribute);
-}
-
-.cm-xml-link {
-  color: rgb(231 194 111); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-attribute-name {
-  color: var(--color-token-attribute);
-}
-
-.webkit-html-attribute-value {
-  color: rgb(242 151 102); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-comment {
-  color: rgb(137 137 137); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-tag {
-  color: var(--color-token-tag);
-}
-
-.webkit-html-tag-name {
-  color: var(--color-token-tag);
-}
-
-.webkit-html-close-tag-name {
-  color: var(--color-token-tag);
-}
-
-.webkit-html-text-node {
-  color: rgb(207 208 208); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-css-node {
-  color: rgb(207 208 208); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-js-node {
-  color: rgb(207 208 208); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-html-pseudo-element {
-  color: rgb(237 119 229); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.webkit-css-property {
-  color: var(--webkit-css-property-color, rgb(53 212 199)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-def {
-  color: var(--color-token-tag);
-}
-
-.cm-header {
-  color: var(--color-token-tag);
-}
-
-.cm-variable-2 {
-  color: #05a; /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-variable-3,
-.cm-type {
-  color: rgb(93 176 215); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-string {
-  color: rgb(242 139 84); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-meta {
-  color: rgb(221 251 85); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-qualifier {
-  color: rgb(255 163 79); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-builtin {
-  color: rgb(159 180 214); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-bracket {
-  color: #997; /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-tag {
-  color: var(--color-token-tag);
-}
-
-.cm-attribute {
-  color: rgb(97 148 198); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-hr {
-  color: #999; /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.cm-link {
-  color: rgb(159 180 214); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
-}