chrome-devtools-frontend 1.0.956060 → 1.0.956975

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. */
-}

package/front_end/ui/legacy/utils/append-style.ts

@@ -1,9 +0,0 @@
-// Copyright 2019 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.
-
-export function appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
-  const styleElement = document.createElement('style');
-  styleElement.textContent = cssContent;
-  node.appendChild(styleElement);
-}