chrome-devtools-frontend 1.0.955092 → 1.0.956812

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

@@ -34,46 +34,20 @@
  */
 
 import * as Common from '../../../core/common/common.js';
-import * as Platform from '../../../core/platform/platform.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 themableProperties: Set<string>;
-  private readonly cachedThemePatches: Map<string, string>;
-  private readonly setting: Common.Settings.Setting<string>;
-  private readonly customSheets: Set<string>;
-  private readonly computedRoot: () => symbol | CSSStyleDeclaration;
-  private injectingStyleSheet?: boolean;
+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.themableProperties = new Set([
-      'color',
-      'box-shadow',
-      'text-shadow',
-      'outline-color',
-      'background-image',
-      'background-color',
-      'border-left-color',
-      'border-right-color',
-      'border-top-color',
-      'border-bottom-color',
-      '-webkit-border-image',
-      'fill',
-      'stroke',
-    ]);
-    this.cachedThemePatches = new Map();
-    this.setting = setting;
-    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 {
@@ -139,19 +113,10 @@ export class ThemeSupport {
   }
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
-    this.injectingStyleSheet = true;
     this.appendStyle(element, inspectorSyntaxHighlightStyles);
-    if (this.themeNameInternal === 'dark') {
-      this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
-    }
-    this.injectingStyleSheet = false;
   }
 
-  /**
-   * Note: this is a duplicate of the function in ui/utils. It exists here
-   * so there is no circular dependency between ui/utils and theme_support.
-   */
-  private appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
+  appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
     const styleElement = document.createElement('style');
     styleElement.textContent = cssContent;
     node.appendChild(styleElement);
@@ -165,212 +130,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()) {
+    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
+    if (isForcedColorsMode) {
       return;
     }
 
-    if (this.themeNameInternal === 'dark') {
-      document.documentElement.classList.add('-theme-with-dark-background');
-    }
-
-    const styleSheets = document.styleSheets;
-    const result = [];
-    for (let i = 0; i < styleSheets.length; ++i) {
-      const href = styleSheets[i].href;
-      if (!href) {
-        continue;
-      }
-      result.push(this.patchForTheme(href, (styleSheets[i] as CSSStyleSheet)));
-    }
-    result.push('/*# sourceURL=inspector.css.theme */');
-
-    const styleElement = document.createElement('style');
-    styleElement.textContent = result.join('\n');
-    document.head.appendChild(styleElement);
-  }
-
-  themeStyleSheet(id: string, text: string): string {
-    if (!this.hasTheme() || this.injectingStyleSheet || this.isForcedColorsMode()) {
-      return '';
-    }
-
-    let patch = this.cachedThemePatches.get(id);
-    if (!patch) {
-      const styleElement = document.createElement('style');
-      styleElement.textContent = text;
-      document.body.appendChild(styleElement);
-
-      const {sheet} = styleElement;
-      if (!sheet) {
-        throw new Error('No sheet in stylesheet object');
-      }
-      patch = this.patchForTheme(id, sheet);
-      document.body.removeChild(styleElement);
-    }
-    return patch;
-  }
-
-  private patchForTheme(id: string, styleSheet: CSSStyleSheet): string {
-    const cached = this.cachedThemePatches.get(id);
-    if (cached) {
-      return cached;
-    }
-
-    try {
-      const rules = styleSheet.cssRules;
-      const result = [];
-      for (let j = 0; j < rules.length; ++j) {
-        const rule = rules[j];
-        if (rule instanceof CSSImportRule) {
-          result.push(this.patchForTheme(rule.styleSheet.href || '', rule.styleSheet));
-          continue;
-        }
-
-        if (!(rule instanceof CSSStyleRule)) {
-          continue;
-        }
-
-        const output: string[] = [];
-        const style = rule.style;
-        const selectorText = rule.selectorText;
-        for (let i = 0; style && i < style.length; ++i) {
-          this.patchProperty(selectorText, style, style[i], output);
-        }
-        if (output.length) {
-          result.push(rule.selectorText + '{' + output.join('') + '}');
-        }
-      }
-
-      const fullText = result.join('\n');
-      this.cachedThemePatches.set(id, fullText);
-      return fullText;
-    } catch (e) {
-      this.setting.set('default');
-      return '';
-    }
-  }
-
-  /**
-   * Theming API is primarily targeted at making dark theme look good.
-   * - If rule has ".-theme-preserve" in selector, it won't be affected.
-   * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
-   */
-  private patchProperty(selectorText: string, style: CSSStyleDeclaration, name: string, output: string[]): void {
-    if (!this.themableProperties.has(name)) {
-      return;
-    }
-
-    const value = style.getPropertyValue(name);
-    if (!value || value === 'none' || value === 'inherit' || value === 'initial' || value === 'transparent') {
-      return;
-    }
-    if (name === 'background-image' && value.indexOf('gradient') === -1) {
-      return;
-    }
+    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
+    this.themeNameInternal = this.setting.get() === 'systemPreferred' ? systemPreferredTheme : this.setting.get();
 
-    if (selectorText.indexOf('-theme-') !== -1) {
-      return;
-    }
+    const wasDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
+    document.documentElement.classList.toggle('-theme-with-dark-background', this.themeNameInternal === 'dark');
 
-    let colorUsage = ThemeSupport.ColorUsage.Unknown;
-    if (name.indexOf('background') === 0 || name.indexOf('border') === 0) {
-      colorUsage |= ThemeSupport.ColorUsage.Background;
-    }
-    if (name.indexOf('background') === -1) {
-      colorUsage |= ThemeSupport.ColorUsage.Foreground;
-    }
+    const isDarkThemed = document.documentElement.classList.contains('-theme-with-dark-background');
 
-    output.push(name);
-    output.push(':');
-    if (/^var\(.*\)$/.test(value)) {
-      // Don't translate CSS variables.
-      output.push(value);
-    } else {
-      const items = value.replace(Common.Color.Regex, '\0$1\0').split('\0');
-      for (const item of items) {
-        output.push(this.patchColorText(item, (colorUsage as number)));
-      }
+    // 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());
     }
-    if (style.getPropertyPriority(name)) {
-      output.push(' !important');
-    }
-    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) {
-      return text;
-    }
-    const outColor = this.patchColor(color, colorUsage);
-    let outText = outColor.asString(null);
-    if (!outText) {
-      outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
-    }
-    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);
-
-    const rgba: number[] = [];
-    Common.Color.Color.hsl2rgb(hsla, rgba);
-    return new Common.Color.Color(rgba, color.format());
   }
+}
 
-  private patchHSLA(hsla: number[], colorUsage: number): void {
-    const hue = hsla[0];
-    const sat = hsla[1];
-    let lit: number = hsla[2];
-    const alpha = hsla[3];
+export class ThemeChangeEvent extends Event {
+  static readonly eventName = 'themechange';
 
-    switch (this.themeNameInternal) {
-      case 'dark': {
-        const minCap = colorUsage & ThemeSupport.ColorUsage.Background ? 0.14 : 0;
-        const maxCap = colorUsage & ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
-        lit = 1 - lit;
-        if (lit < minCap * 2) {
-          lit = minCap + lit / 2;
-        } else if (lit > 2 * maxCap - 1) {
-          lit = maxCap - 1 / 2 + lit / 2;
-        }
-        break;
-      }
-    }
-    hsla[0] = Platform.NumberUtilities.clamp(hue, 0, 1);
-    hsla[1] = Platform.NumberUtilities.clamp(sat, 0, 1);
-    hsla[2] = Platform.NumberUtilities.clamp(lit, 0, 1);
-    hsla[3] = Platform.NumberUtilities.clamp(alpha, 0, 1);
-  }
-}
-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,
+  constructor() {
+    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
   }
 }

package/front_end/ui/legacy/toolbar.css

@@ -294,6 +294,7 @@ select.toolbar-item:disabled {
   opacity: 50%;
 }
 
+button.toolbar-item:focus-visible,
 select.toolbar-item:focus-visible {
   background: var(--color-background-elevation-2);
   border-radius: 2px;

package/front_end/ui/legacy/treeoutline.css

@@ -93,10 +93,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
   color: inherit;
 }
 
-.tree-outline .tree-element-content {
-  display: flex;
-}
-
 .tree-outline li .icons-container {
   align-self: center;
   display: flex;

package/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {appendStyle} from './append-style.js';
+import * as ThemeSupport from '../theme_support/theme_support.js';
+
 import {focusChanged} from './focus-changed.js';
 import {injectCoreStyles} from './inject-core-styles.js';
 
@@ -24,7 +25,7 @@ export function createShadowRootWithCoreStyles(element: Element, options: Option
   injectCoreStyles(shadowRoot);
   if (cssFile) {
     if ('cssContent' in cssFile) {
-      appendStyle(shadowRoot, cssFile);
+      ThemeSupport.ThemeSupport.instance().appendStyle(shadowRoot, cssFile);
     } else {
       shadowRoot.adoptedStyleSheets = cssFile;
     }

package/front_end/ui/legacy/utils/inject-core-styles.ts

@@ -7,39 +7,11 @@ import textButtonStyles from '../textButton.css.legacy.js';
 import * as ThemeSupport from '../theme_support/theme_support.js';
 import themeColorsStyles from '../themeColors.css.legacy.js';
 
-import {appendStyle} from './append-style.js';
-
 export function injectCoreStyles(root: Element|ShadowRoot): void {
-  appendStyle(root, inspectorCommonStyles);
-  appendStyle(root, textButtonStyles);
-  appendStyle(root, themeColorsStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
 
   ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
   ThemeSupport.ThemeSupport.instance().injectCustomStyleSheets(root);
 }
-
-let bodyComputedStylesCached: CSSStyleDeclaration|null = null;
-export function getThemeColorValue(variableName: string): string {
-  if (!bodyComputedStylesCached) {
-    /**
-     * We are safe to cache this value as we're only using this code to look up
-     * theme variables, and they do not change during runtime. And if the user
-     * swaps from light => dark theme, or vice-versa, DevTools is entirely
-     * reloaded, removing this cache.
-     */
-    bodyComputedStylesCached = window.getComputedStyle(document.body);
-  }
-
-  const colorValue = bodyComputedStylesCached.getPropertyValue(variableName);
-  if (!colorValue) {
-    throw new Error(`Could not find theme color for variable ${variableName}.`);
-  }
-  return colorValue;
-}
-
-export function getCurrentTheme(): 'light'|'dark' {
-  if (document.documentElement.classList.contains('-theme-with-dark-background')) {
-    return 'dark';
-  }
-  return 'light';
-}

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

@@ -4,19 +4,15 @@
 
 /* eslint-disable rulesdir/es_modules_import */
 
-import {appendStyle} from './append-style.js';
 import {createShadowRootWithCoreStyles} from './create-shadow-root-with-core-styles.js';
 import {focusChanged} from './focus-changed.js';
-import {getCurrentTheme, getThemeColorValue, injectCoreStyles} from './inject-core-styles.js';
+import {injectCoreStyles} from './inject-core-styles.js';
 import {measuredScrollbarWidth, resetMeasuredScrollbarWidthForTest} from './measured-scrollbar-width.js';
 import {registerCustomElement} from './register-custom-element.js';
 
 export {
-  appendStyle,
   createShadowRootWithCoreStyles,
   focusChanged,
-  getCurrentTheme,
-  getThemeColorValue,
   injectCoreStyles,
   measuredScrollbarWidth,
   registerCustomElement,

package/front_end/ui/lit-html/lit-html.ts

@@ -4,7 +4,7 @@
 
 import * as LitHtml from '../../third_party/lit-html/lit-html.js';
 import * as Static from './static.js';
-export {Directive, TemplateResult} from '../../third_party/lit-html/lit-html.js';
+export {Directive, type TemplateResult} from '../../third_party/lit-html/lit-html.js';
 
 const {render, svg, Directives, nothing, noChange} = LitHtml;
 const {html, literal, flattenTemplate} = Static;

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.955092"
+  "version": "1.0.956812"
 }

package/scripts/build/generate_css_js_files.js

@@ -4,7 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const CleanCSS = require('clean-css');
-const [, , isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
+const [, , buildTimestamp, isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
 
 const filenames = files.split(',');
 const configFiles = [];
@@ -37,7 +37,7 @@ export default styles;`;
 
   fs.writeFileSync(
       path.join(targetGenDir, generatedFileName),
-      `// Copyright ${new Date().getFullYear()} The Chromium Authors. All rights reserved.
+      `// Copyright ${new Date(Number(buildTimestamp) * 1000).getFullYear()} 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.
 // IMPORTANT: this file is auto generated. Please do not edit this file.

package/scripts/build/ninja/generate_css.gni

@@ -2,8 +2,10 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//build/timestamp.gni")
 import("./node.gni")
 import("./vars.gni")
+
 template("generate_css") {
   node_action(target_name) {
     forward_variables_from(invoker, [ "sources" ])
@@ -17,6 +19,7 @@ template("generate_css") {
         [ devtools_location_prepend + "node_modules/clean-css/package.json" ]
 
     args = [
+      build_timestamp,
       "$is_debug",
       "${invoker.legacy}",
       target_name,

package/scripts/component_server/server.js

@@ -150,8 +150,8 @@ function createServerIndexFile(componentNames) {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width" />
       <title>DevTools components</title>
-      <link rel="stylesheet" href="/front_end/ui/legacy/themeColors.css" />
-      <link rel="stylesheet" href="/front_end/ui/components/docs/component_docs_styles.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/legacy/themeColors.css" />
+      <link rel="stylesheet" href="${sharedResourcesBase}front_end/ui/components/docs/component_docs_styles.css" />
     </head>
     <body id="index-page">
       <h1>DevTools components</h1>

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