chrome-devtools-frontend 1.0.954845 → 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/check_license_header_test.js

@@ -9,6 +9,8 @@ const ruleTester = new (require('eslint').RuleTester)({
   parser: require.resolve('@typescript-eslint/parser'),
 });
 
+const CURRENT_YEAR = new Date().getFullYear();
+
 ruleTester.run('check_license_header', rule, {
   valid: [
     {
@@ -116,7 +118,7 @@ main()
       code: 'import * as Action from \'./Action.js\';',
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Missing license header'}],
-      output: `// Copyright 2021 The Chromium Authors. All rights reserved.
+      output: `// Copyright ${CURRENT_YEAR} 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.
 
@@ -131,7 +133,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect line license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 
@@ -147,7 +149,7 @@ import * as Action from './Action.js';
 (async function() {})();`,
       filename: 'test/webtests/http/tests/devtools/a11y-axe-core/sources/call-stack-a11y-test.js',
       errors: [{message: 'Incorrect line license header'}],
-      output: `// Copyright 2021 The Chromium Authors. All rights reserved.
+      output: `// Copyright ${CURRENT_YEAR} 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.
 
@@ -168,7 +170,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect line license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 
@@ -191,7 +193,7 @@ import * as Action from './Action.js';
       filename: 'front_end/ui/ui.js',
       errors: [{message: 'Incorrect block license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 
@@ -225,7 +227,7 @@ interface String {
       filename: 'front_end/legacy/legacy-defs.d.ts',
       errors: [{message: 'Missing license header'}],
       output: `
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 
@@ -258,7 +260,7 @@ main()
       errors: [{message: 'Missing license header'}],
       output: `#!/usr/bin/env node
 
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 
@@ -279,7 +281,7 @@ main()
       errors: [{message: 'Incorrect line license header'}],
       output: `#!/usr/bin/env node
 
-// Copyright 2021 The Chromium Authors. All rights reserved.
+// Copyright ${CURRENT_YEAR} 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.
 

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/global_typings/intl_display_names.d.ts

@@ -1,111 +0,0 @@
-declare namespace Intl {
-  /**
-   * An object with properties reflecting the locale
-   * and styles options computed during initialization
-   * of the `Intl.DisplayNames` object
-   *
-   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions#Description).
-   *
-   * [Specification](https://tc39.es/ecma402/#sec-intl-displaynames-constructor)
-   */
-  interface DisplayNamesOptions {
-    localeMatcher: RelativeTimeFormatLocaleMatcher;
-    style: RelativeTimeFormatStyle;
-    type: 'language'|'region'|'script'|'currency';
-    fallback: 'code'|'none';
-  }
-
-  interface DisplayNames {
-    /**
-       * Receives a code and returns a string based on the locale and options provided when instantiating
-       * [`Intl.DisplayNames()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-       *
-       * @param code The `code` to provide depends on the `type`:
-       *  - If the type is "region", code should be either an [ISO-3166 two letters region code](https://www.iso.org/iso-3166-country-codes.html),
-       *    or a [three digits UN M49 Geographic Regions](https://unstats.un.org/unsd/methodology/m49/).
-       *  - If the type is "script", code should be an [ISO-15924 four letters script code](https://unicode.org/iso15924/iso15924-codes.html).
-       *  - If the type is "language", code should be a `languageCode` ["-" `scriptCode`] ["-" `regionCode` ] *("-" `variant` )
-       *    subsequence of the unicode_language_id grammar in [UTS 35's Unicode Language and Locale Identifiers grammar](https://unicode.org/reports/tr35/#Unicode_language_identifier).
-       *    `languageCode` is either a two letters ISO 639-1 language code or a three letters ISO 639-2 language code.
-       *  - If the type is "currency", code should be a [3-letter ISO 4217 currency code](https://www.iso.org/iso-4217-currency-codes.html).
-       *
-       * @returns A language-specific formatted string.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.of).
-       */
-    of(code: string): string;
-    /**
-       * Returns a new object with properties reflecting the locale and style formatting options computed during the construction of the current
-       * [`Intl/DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * @returns An object with properties reflecting the locale and formatting options computed during the construction of the
-       *  given [`Intl/DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.resolvedOptions)
-       */
-    resolvedOptions(): DisplayNamesOptions;
-  }
-
-  /**
-   * The [`Intl.DisplayNames()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-   * object enables the consistent translation of language, region and script display names.
-   *
-   * Part of [Intl object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
-   * namespace and the [ECMAScript Internationalization API](https://www.ecma-international.org/publications/standards/Ecma-402.htm).
-   *
-   * [Compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames#browser_compatibility).
-   */
-  const DisplayNames: {
-    prototype: DisplayNames;
-
-    /**
-       * Constructor creates [`Intl.DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
-       * objects that enable the consistent translation of language, region and script display names.
-       *
-       * @param locales A string with a BCP 47 language tag, or an array of such strings.
-       *   For the general form and interpretation of the `locales` argument, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)
-       *   page. The following Unicode extension key is allowed:
-       *   - `nu` The numbering system to be used. Possible values include: `"arab"`, `"arabext"`, `"bali"`, `"beng"`, `"deva"`, `"fullwide"`, `"gujr"`, `"guru"`, `"hanidec"`, `"khmr"`, `"knda"`, `"laoo"`, `"latn"`, `"limb"`, `"mlym"`, `"mong"`, `"mymr"`, `"orya"`, `"tamldec"`, `"telu"`, `"thai"`, `"tibt"`.
-       *
-       * @param options An object with some or all of the following properties:
-       *   - `localeMatcher` The locale matching algorithm to use. Possible values are `"lookup"` and `"best fit"`; the default is `"best fit"`.
-       *     For information about this option, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation) page.
-       *   - `style` The formatting style to use, the default is `"long"`. `"narrow"` `"short"` `"long"`
-       *   - `type` The type to use. `"language"` `"region"` `"script"` `"currency"`
-       *   - `fallback` The fallback to use, the default is `"code"`. `"code"` `"none"`
-       *
-       * @returns [Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) object.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-intl-displaynames-constructor).
-       */
-    new (locales?: UnicodeBCP47LocaleIdentifier|UnicodeBCP47LocaleIdentifier[], options?: Partial<DisplayNamesOptions>):
-        DisplayNames;
-
-    /**
-       * Returns an array containing those of the provided locales that are supported in display names without having to fall back to the runtime's default locale.
-       *
-       * @param locales A string with a BCP 47 language tag, or an array of such strings.
-       *   For the general form and interpretation of the `locales` argument, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)
-       *   page.
-       *
-       * @param options An object that may have the following property:
-       *   - `localeMatcher` The locale matching algorithm to use. Possible values are `"lookup"` and `"best fit"`; the default is `"best fit"`.
-       *     For information about this option, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation) page.
-       *
-       * @returns An array of strings representing a subset of the given locale tags that are supported in display names without having to fall back to the runtime's default locale.
-       *
-       * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf).
-       *
-       * [Specification](https://tc39.es/ecma402/#sec-Intl.DisplayNames.supportedLocalesOf).
-       */
-    supportedLocalesOf(
-        locales: UnicodeBCP47LocaleIdentifier|UnicodeBCP47LocaleIdentifier[],
-        options: {localeMatcher: RelativeTimeFormatLocaleMatcher}): UnicodeBCP47LocaleIdentifier[];
-  };
-}

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