chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/scripts/freestyler/eval/index.js

@@ -176,6 +176,7 @@ const API = {
 const viewState = {
   dataIds: [],
   dataId: null,
+  compareWithDataId: null,
   selectedExampleIndex: 0
 };
 
@@ -196,7 +197,7 @@ function createPointRadios({onChange, id, points, titleText, noBorder}) {
     padding-bottom: 4px;
   `);
   title.textContent = titleText;
-  container.appendChild(title);
+  container.append(title);
   for (const point of points) {
     const radioContainer = document.createElement('div');
     radioContainer.setAttribute('style', 'display: inline-flex; gap: 8px;');
@@ -213,9 +214,9 @@ function createPointRadios({onChange, id, points, titleText, noBorder}) {
     const label = document.createElement('label');
     label.setAttribute('for', `${point}-${id}`);
     label.textContent = point;
-    radioContainer.appendChild(radio);
-    radioContainer.appendChild(label);
-    container.appendChild(radioContainer);
+    radioContainer.append(radio);
+    radioContainer.append(label);
+    container.append(radioContainer);
   }
   return container;
 }
@@ -240,7 +241,7 @@ function createChatBubble({text, evaluationId, onEvaluationChange}) {
 
   const pointsContainer = document.createElement('div');
   pointsContainer.setAttribute('style', 'margin-top: 12px;');
-  pointsContainer.appendChild(createPointRadios({
+  pointsContainer.append(createPointRadios({
     points,
     titleText: 'Evaluation',
     id: evaluationId,
@@ -248,14 +249,14 @@ function createChatBubble({text, evaluationId, onEvaluationChange}) {
       onEvaluationChange(point);
     }
   }));
-  el.appendChild(pointsContainer);
+  el.append(pointsContainer);
   return el;
 }
 
-function renderExample(container, {onEvaluationChange}) {
+function renderExample(container, sourceMap, {onEvaluationChange}) {
   const exampleIds = Object.keys(viewState.examplesMap);
   const exampleId = exampleIds[viewState.selectedExampleIndex];
-  const requestResponses = viewState.examplesMap[exampleId];
+  const requestResponses = sourceMap[exampleId];
   container.innerHTML = '';
 
   let i = 0;
@@ -266,7 +267,7 @@ function renderExample(container, {onEvaluationChange}) {
       exampleId,
       requestResponseIndex: i,
     });
-    container.appendChild(createChatBubble({
+    container.append(createChatBubble({
       text,
       evaluationId,
       onEvaluationChange: point => {
@@ -285,7 +286,7 @@ function renderExample(container, {onEvaluationChange}) {
     border-radius: 12px;
   `);
   const finalEvaluationId = JSON.stringify({datasetTitle: viewState.dataId, exampleId});
-  finalResponseRatingContainer.appendChild(createPointRadios({
+  finalResponseRatingContainer.append(createPointRadios({
     points: ['Correct', 'Wrong'],
     titleText: 'The final answer is:',
     noBorder: true,
@@ -296,7 +297,7 @@ function renderExample(container, {onEvaluationChange}) {
       onEvaluationChange();
     }
   }));
-  container.appendChild(finalResponseRatingContainer);
+  container.append(finalResponseRatingContainer);
 }
 
 function renderExampleSelector(container, {onChange}) {
@@ -310,15 +311,38 @@ function renderExampleSelector(container, {onChange}) {
     option.selected = exampleId === exampleIds[viewState.selectedExampleIndex];
     option.textContent = exampleId;
     option.name = exampleId;
-    select.appendChild(option);
+    select.append(option);
   }
 
   select.selectedIndex = viewState.selectedExampleIndex;
   select.addEventListener('change', ev => {
     onChange(ev.target.selectedIndex);
   });
-  container.appendChild(label);
-  container.appendChild(select);
+  container.append(label);
+  container.append(select);
+}
+
+function createDataSetSelector(label, selectedId, onChange) {
+  const dataSelectorContainer = document.createElement('div');
+  const dataSelect = document.createElement('select');
+  viewState.dataIds.forEach(dataId => {
+    const option = document.createElement('option');
+    option.name = dataId;
+    option.textContent = dataId;
+    dataSelect.append(option);
+  });
+  dataSelect.selectedIndex = viewState.dataIds.findIndex(dataId => selectedId === dataId);
+  dataSelect.addEventListener('change', ev => {
+    onChange(ev);
+    document.startViewTransition(() => {
+      renderMainPage();
+    });
+  });
+  const dataSelectSpan = document.createElement('span');
+  dataSelectSpan.textContent = label;
+  dataSelectorContainer.append(dataSelectSpan);
+  dataSelectorContainer.append(dataSelect);
+  return dataSelectorContainer;
 }
 
 async function renderMainPage() {
@@ -327,6 +351,10 @@ async function renderMainPage() {
   container.setAttribute('style', 'padding-bottom: 24px;');
   const {examplesMap, metadata} = await API.getExamplesMap({title: viewState.dataId});
   viewState.examplesMap = examplesMap;
+  if (viewState.compareWithDataId) {
+    const {examplesMap} = await API.getExamplesMap({title: viewState.compareWithDataId});
+    viewState.compareWithExamplesMap = examplesMap;
+  }
   viewState.metadata = metadata;
   viewState.selectedExampleIndex = 0;
 
@@ -340,26 +368,13 @@ async function renderMainPage() {
   const heading = document.createElement('h1');
   heading.textContent = 'Freestyler Eval Tool';
 
-  const dataSelectorContainer = document.createElement('div');
-  const dataSelect = document.createElement('select');
-  viewState.dataIds.forEach(dataId => {
-    const option = document.createElement('option');
-    option.name = dataId;
-    option.textContent = dataId;
-    dataSelect.appendChild(option);
-  });
-  dataSelect.selectedIndex = viewState.dataIds.findIndex(dataId => viewState.dataId === dataId);
-  dataSelect.addEventListener('change', ev => {
+  const dataSelectorContainer = createDataSetSelector('Dataset: ', viewState.dataId, ev => {
     viewState.dataId = viewState.dataIds[ev.target.selectedIndex];
     viewState.selectedExampleIndex = 0;
-    document.startViewTransition(() => {
-      renderMainPage();
-    });
   });
-  const dataSelectSpan = document.createElement('span');
-  dataSelectSpan.textContent = 'Dataset: ';
-  dataSelectorContainer.appendChild(dataSelectSpan);
-  dataSelectorContainer.appendChild(dataSelect);
+  const compareWithDataSelectorContainer = createDataSetSelector('Compare with: ', viewState.compareWithDataId, ev => {
+    viewState.compareWithDataId = viewState.dataIds[ev.target.selectedIndex];
+  });
   const exampleSelectorContainer = document.createElement('div');
 
   const exportContainer = document.createElement('div');
@@ -371,7 +386,7 @@ async function renderMainPage() {
     const datasetId = viewState.dataId;
     exportContainer.innerHTML = '';
     const dialogContainer = document.createElement('div');
-    exportContainer.appendChild(dialogContainer);
+    exportContainer.append(dialogContainer);
 
     const evaluationIds = (Object.keys(evaluationState)).map(key => JSON.parse(key));
     const evaluationIdsForDataset = evaluationIds.filter(evaluationIdObj => evaluationIdObj.datasetTitle === datasetId);
@@ -416,10 +431,10 @@ async function renderMainPage() {
       await navigator.clipboard.writeText(csvText);
     });
 
-    resultsContainer.appendChild(resultsSummary);
-    resultsContainer.appendChild(resultsText);
-    exportContainer.appendChild(resultsContainer);
-    exportContainer.appendChild(exportButton);
+    resultsContainer.append(resultsSummary);
+    resultsContainer.append(resultsText);
+    exportContainer.append(resultsContainer);
+    exportContainer.append(exportButton);
   }
 
   const exampleDescriptionContainer = document.createElement('div');
@@ -430,26 +445,42 @@ async function renderMainPage() {
     exampleDescriptionContainer.innerHTML = '';
     const exampleHeading = document.createElement('h2');
     exampleHeading.textContent = exampleId;
-    exampleDescriptionContainer.appendChild(exampleHeading);
+    exampleDescriptionContainer.append(exampleHeading);
     const explanationContainer = document.createElement('div');
     const explanation = metadata.find(data => data.exampleId === exampleId)?.explanation;
     explanationContainer.innerHTML = explanation ? `Evaluation tip: <strong>${explanation}</strong>` : '';
-    exampleDescriptionContainer.appendChild(explanationContainer);
+    exampleDescriptionContainer.append(explanationContainer);
   }
 
-  header.appendChild(heading);
-  header.appendChild(dataSelectorContainer);
-  header.appendChild(exampleSelectorContainer);
-  header.appendChild(exportContainer);
-  header.appendChild(exampleDescriptionContainer);
-  container.appendChild(header);
+  header.append(heading);
+  header.append(dataSelectorContainer);
+  header.append(compareWithDataSelectorContainer);
+  header.append(exampleSelectorContainer);
+  header.append(exportContainer);
+  header.append(exampleDescriptionContainer);
+  container.append(header);
+
+  const gridContainer = document.createElement('div');
+  gridContainer.style = `
+    display: flex;
+    flex-direction: row;
+  `;
+  container.append(gridContainer);
 
   const exampleContainer = document.createElement('div');
-  container.appendChild(exampleContainer);
+  gridContainer.append(exampleContainer);
+
+  const compareWithExampleContainer = document.createElement('div');
+  gridContainer.append(compareWithExampleContainer);
 
   viewState.handleExampleChange = () => {
     document.startViewTransition(() => {
-      renderExample(exampleContainer, {onEvaluationChange: () => renderResultsTable()});
+      renderExample(exampleContainer, viewState.examplesMap, {onEvaluationChange: () => renderResultsTable()});
+      if (viewState.compareWithDataId) {
+        renderExample(
+            compareWithExampleContainer, viewState.compareWithExamplesMap,
+            {onEvaluationChange: () => renderResultsTable()});
+      }
       renderExampleDescription();
       renderExampleSelector(exampleSelectorContainer, {
         onChange: selectedExampleIndex => {
@@ -461,7 +492,12 @@ async function renderMainPage() {
   };
 
   renderResultsTable();
-  renderExample(exampleContainer, {onEvaluationChange: () => renderResultsTable()});
+  renderExample(exampleContainer, viewState.examplesMap, {onEvaluationChange: () => renderResultsTable()});
+  if (viewState.compareWithDataId) {
+    renderExample(
+        compareWithExampleContainer, viewState.compareWithExamplesMap,
+        {onEvaluationChange: () => renderResultsTable()});
+  }
   renderExampleDescription();
   renderExampleSelector(exampleSelectorContainer, {
     onChange: selectedExampleIndex => {

package/scripts/protocol_typescript/protocol_dts_generator.ts

@@ -9,7 +9,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-import {type Protocol} from './protocol_schema.js';
+import type {Protocol} from './protocol_schema.js';
 
 const PROTOCOL_JSON_PATH = path.resolve(
     __dirname, path.join('..', '..', 'third_party', 'blink', 'public', 'devtools_protocol', 'browser_protocol.json'));

package/scripts/stylelint_rules/lib/use_theme_colors.js

@@ -221,8 +221,9 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         /**
          * If we're checking a border-{top/bottom/left/right}, we need to regex
          * out just the color part of the declaration to check.
+         * We also apply the same check for outline.
          */
-        if (borderCombinedDeclarations.has(declaration.prop)) {
+        if (borderCombinedDeclarations.has(declaration.prop) || declaration.prop === 'outline') {
           // This is a pretty basic regex but it should split border-bottom:
           // var(--foo) solid var(--bar) into the three parts we need.
           // If this rule picks up false positives, we can improve this regex.

package/scripts/stylelint_rules/tests/use_theme_colors_test.js

@@ -307,6 +307,22 @@ describe('use_theme_colors', () => {
     assert.lengthOf(warnings, 0);
   });
 
+  it('does not error when there is a var for the outline width', async () => {
+    const warnings = await lint(
+        'p { outline: var(--button-border-size) solid var(--color-primary); }',
+    );
+
+    assert.lengthOf(warnings, 0);
+  });
+
+  it('does not error when the outline is set to none', async () => {
+    const warnings = await lint(
+        'p { outline: none; }',
+    );
+
+    assert.lengthOf(warnings, 0);
+  });
+
   it('does not error when using --sys-elevation for box-shadow', async () => {
     const warnings = await lint(
         'p { box-shadow: var(--sys-elevation-level1); }',

package/front_end/Images/src/spark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path d="M10.0013 18.3307C10.0013 17.178 9.78255 16.0946 9.34505 15.0807C8.90755 14.0668 8.3138 13.1849 7.5638 12.4349C6.8138 11.6849 5.93186 11.0911 4.91797 10.6536C3.90408 10.2161 2.82075 9.9974 1.66797 9.9974C2.82075 9.9974 3.90408 9.77865 4.91797 9.34115C5.93186 8.90365 6.8138 8.3099 7.5638 7.5599C8.3138 6.8099 8.90755 5.92795 9.34505 4.91406C9.78255 3.90017 10.0013 2.81684 10.0013 1.66406C10.0013 2.81684 10.2201 3.90017 10.6576 4.91406C11.0951 5.92795 11.6888 6.8099 12.4388 7.5599C13.1888 8.3099 14.0707 8.90365 15.0846 9.34115C16.0985 9.77865 17.1819 9.9974 18.3346 9.9974C17.1819 9.9974 16.0985 10.2161 15.0846 10.6536C14.0707 11.0911 13.1888 11.6849 12.4388 12.4349C11.6888 13.1849 11.0951 14.0668 10.6576 15.0807C10.2201 16.0946 10.0013 17.178 10.0013 18.3307Z" fill="#1B6EF3"/>
-</svg>

package/front_end/panels/timeline/components/insights/lcpDiscovery.css

@@ -1,13 +0,0 @@
-/*
- * Copyright 2024 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.
- */
-
-.discovery-delay {
-  margin-top: 0;
-}
-
-.discovery-time-ms {
-  color: var(--sys-color-error-bright);
-}

package/scripts/eslint_rules/lib/ban_literal_devtools_component_tag_names.js

@@ -1,40 +0,0 @@
-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-'use strict';
-
-const {isLitHtmlTemplateCall} = require('./utils.js');
-
-module.exports = {
-  meta: {
-    type: 'problem',
-
-    docs: {
-      description: 'Check for <devtools-* in Lit templates instead of tag names.',
-      category: 'Possible Errors',
-    },
-    fixable: 'code',
-    schema: []  // no options
-  },
-  create: function(context) {
-    return {
-      TaggedTemplateExpression(node) {
-        const isLitHtmlCall = isLitHtmlTemplateCall(node);
-        if (!isLitHtmlCall) {
-          return;
-        }
-
-        // node.quasi.quasis are all the static parts of the template literal.
-        for (const templatePart of node.quasi.quasis) {
-          if (templatePart.value.raw.includes('<devtools-')) {
-            context.report({
-              node,
-              message:
-                  'Rendering other DevTools components should be done using LitHtml static expressions (<${Component.litTagName}>).',
-            });
-          }
-        }
-      },
-    };
-  }
-};

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -1,214 +0,0 @@
-// 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: 'check license headers',
-      category: 'Possible Errors',
-    },
-    fixable: 'code',
-    schema: [],
-    messages: {
-      noStaticTagName: 'Found a component class that does not define a static litTagName property.',
-      noTSInterface: 'Could not find the TS interface declaration for the component {{ tagName }}.',
-      noDefineCall: 'Could not find a customElements.define() call for the component {{ tagName }}.',
-      defineCallNonLiteral: 'customElements.define() first argument must be a string literal.',
-      staticLiteralInvalid: 'static readonly litTagName must use a literal string, with no interpolation.',
-      duplicateStaticLitTagName: 'found a duplicated litTagName: {{ tagName }}',
-      litTagNameNotLiteral:
-          'litTagName must be defined as a string passed in as LitHtml.literal`component-name`, but no tagged template was found.',
-      staticLiteralNotReadonly: 'static litTagName must be readonly.'
-    }
-  },
-  create: function(context) {
-    const baseClassExtendingHTMLElement = [
-      'ResponseHeaderSectionBase'
-    ];
-
-    function nodeExtendsHTMLElement(node) {
-      return node.superClass && (node.superClass.name === 'HTMLElement' || baseClassExtendingHTMLElement.includes(node.superClass.name));
-    }
-
-    function nodeIsFilteredHTMLElementBaseClass(node) {
-      return node.id && baseClassExtendingHTMLElement.includes(node.id.name);
-    }
-
-    function nodeIsHTMLElementClassDeclaration(node) {
-      return node.type === 'ClassDeclaration' && nodeExtendsHTMLElement(node) && !nodeIsFilteredHTMLElementBaseClass(node);
-    }
-
-    function findAllComponentClassDefinitions(programNode) {
-      const nodesWithClassDeclaration = programNode.body.filter(node => {
-        if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-          return nodeIsHTMLElementClassDeclaration(node.declaration);
-        }
-        return nodeIsHTMLElementClassDeclaration(node);
-      });
-
-      return nodesWithClassDeclaration.map(node => {
-        return node.type === 'ExportNamedDeclaration' ? node.declaration : node;
-      });
-    }
-
-    function findComponentTagNameFromStaticProperty(classBodyNode) {
-      return classBodyNode.body.find(node => {
-        return node.type === 'PropertyDefinition' && node.key.name === 'litTagName';
-      });
-    }
-
-    function findCustomElementsDefineCalls(programNode) {
-      return programNode.body.filter(node => {
-        if (node.type !== 'ExpressionStatement') {
-          return false;
-        }
-
-        if (!node.expression.callee) {
-          return false;
-        }
-
-        if (node.expression.callee.type !== 'MemberExpression') {
-          return false;
-        }
-
-        return node.expression.callee.object.name === 'customElements' &&
-            node.expression.callee.property.name === 'define';
-      });
-    }
-
-    function findTypeScriptDeclareGlobalHTMLInterfaceCalls(programNode) {
-      const matchingNode = programNode.body.find(node => {
-        // matches `declare global {}`
-        const isGlobalCall = node.type === 'TSModuleDeclaration' && node.id.name === 'global';
-        if (!isGlobalCall) {
-          return false;
-        }
-
-        return node.body.body.find(node => {
-          return node.type === 'TSInterfaceDeclaration' && node.id.name === 'HTMLElementTagNameMap';
-        });
-      });
-
-      if (!matchingNode) {
-        return [];
-      }
-
-      return matchingNode.body.body.filter(node => {
-        return node.type === 'TSInterfaceDeclaration' && node.id.name === 'HTMLElementTagNameMap';
-      });
-    }
-
-    // Map of litTagName to the class node.
-    /** @type {Map<string, any}>} */
-    const componentClassDefinitionLitTagNameNodes = new Map();
-
-    /** @type {Set<string>} */
-    const customElementsDefineCallsFound = new Set();
-
-    /** @type {Set<string>} */
-    const tsInterfaceExtendedEntriesFound = new Set();
-
-    return {
-      Program(node) {
-        /* We allow there to be multiple components defined in one file.
-         * Therefore, this rule gathers all nodes relating to the component
-         * definition and then checks that for each class found that extends
-         * HTMLElement, we have:
-         * 1) the class with a static readonly litTagName
-         * 2) The call to customElements.define()
-         * 3) The global interface extension
-         * And that for each of those, the component name string (e.g. 'devtools-foo') is the same.
-         */
-
-        const componentClassDefinitions = findAllComponentClassDefinitions(node);
-        if (componentClassDefinitions.length === 0) {
-          // No components found, our work is done!
-          return;
-        }
-
-        // Do some checks on the component classes and store the component names that we've found.
-        for (const componentClassDefinition of componentClassDefinitions) {
-          const componentTagNameNode = findComponentTagNameFromStaticProperty(componentClassDefinition.body);
-          if (!componentTagNameNode) {
-            context.report({node: componentClassDefinition, messageId: 'noStaticTagName'});
-            return;
-          }
-          if (componentTagNameNode.value.type !== 'TaggedTemplateExpression') {
-            // This means that the value is not LitHtml.literal``. Most likely
-            // the user forgot to add LitHtml.literal and has defined the value
-            // as a regular string.
-            context.report({node: componentTagNameNode, messageId: 'litTagNameNotLiteral'});
-            return;
-          }
-          if (componentTagNameNode.value.quasi.quasis.length > 1) {
-            // This means that there's >1 template parts, which means they are
-            // being split by an interpolated value, which is not allowed.
-            context.report({node: componentTagNameNode, messageId: 'staticLiteralInvalid'});
-            return;
-          }
-
-          // Enforce that the property is declared as readonly (static readonly litTagName = ...)
-          if (!componentTagNameNode.readonly) {
-            context.report({node: componentTagNameNode, messageId: 'staticLiteralNotReadonly'});
-            return;
-          }
-
-          // Grab the name of the component, e.g:
-          // LitHtml.literal`devtools-foo` will pull "devtools-foo" out.
-          const componentTagName = componentTagNameNode.value.quasi.quasis[0].value.cooked;
-
-          // Now we ensure that we haven't found this tag name before. If we
-          // have, we have two components with the same litTagName property,
-          // which is an error.
-          if (componentClassDefinitionLitTagNameNodes.has(componentTagName)) {
-            context.report({node: componentClassDefinition, messageId: 'duplicateStaticLitTagName', data: {tagName: componentTagName}});
-          }
-
-          componentClassDefinitionLitTagNameNodes.set(componentTagName, componentClassDefinition);
-        }
-
-        // Find all customElements.define() calls and store the arguments to them.
-
-        // Now find the customElements.define() line
-        const customElementsDefineCalls = findCustomElementsDefineCalls(node);
-        for (const customElementsDefineCall of customElementsDefineCalls) {
-          const firstArgumentToDefineCall = customElementsDefineCall.expression.arguments[0];
-          if (!firstArgumentToDefineCall || firstArgumentToDefineCall.type !== 'Literal') {
-            context.report({
-              node: customElementsDefineCall,
-              messageId: 'defineCallNonLiteral',
-            });
-            return;
-          }
-          const tagNamePassedToDefineCall = firstArgumentToDefineCall.value;
-          customElementsDefineCallsFound.add(tagNamePassedToDefineCall);
-        }
-        const allTSDeclareGlobalInterfaceCalls = findTypeScriptDeclareGlobalHTMLInterfaceCalls(node);
-
-        for (const interfaceDeclaration of allTSDeclareGlobalInterfaceCalls) {
-          for (const node of interfaceDeclaration.body.body) {
-            if (node.type === 'TSPropertySignature') {
-              tsInterfaceExtendedEntriesFound.add(node.key.value);
-            }
-          }
-        }
-
-        for (const [tagName, classNode] of componentClassDefinitionLitTagNameNodes) {
-          // Check that each tagName has a matching entry in both other places we expect it.
-          if (!customElementsDefineCallsFound.has(tagName)) {
-            context.report({node: classNode, messageId: 'noDefineCall', data: {tagName}});
-          }
-          if (!tsInterfaceExtendedEntriesFound.has(tagName)) {
-            context.report({node: classNode, messageId: 'noTSInterface', data: {tagName}});
-          }
-        }
-
-        // if we got here, everything is valid and the name is correct in all three locations
-      }
-    };
-  }
-};

package/scripts/eslint_rules/tests/ban_literal_devtools_component_tag_names_test.js

@@ -1,38 +0,0 @@
-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-'use strict';
-
-const rule = require('../lib/ban_literal_devtools_component_tag_names.js');
-const ruleTester = new (require('eslint').RuleTester)({
-  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
-  parser: require.resolve('@typescript-eslint/parser'),
-});
-
-const EXPECTED_ERROR_MESSAGE =
-    'Rendering other DevTools components should be done using LitHtml static expressions (<${Component.litTagName}>).';
-
-ruleTester.run('ban_literal_devtools_component_tag_names', rule, {
-  valid: [
-    {
-      code: 'LitHtml.html`<p></p>`',
-      filename: 'front_end/components/test.ts',
-    },
-    {
-      code: 'LitHtml.html`<${DataGrid.litTagName}></${DataGrid.litTagName}>`',
-      filename: 'front_end/components/test.ts',
-    },
-  ],
-  invalid: [
-    {
-      code: 'LitHtml.html`<devtools-foo></devtools-foo>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{message: EXPECTED_ERROR_MESSAGE}],
-    },
-    {
-      code: 'LitHtml.html`<p>${foo}</p><devtools-foo></devtools-foo>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{message: EXPECTED_ERROR_MESSAGE}]
-    },
-  ]
-});