From 06ee0d9cf673ffae2df2b2a33d0880a784eb65ee Mon Sep 17 00:00:00 2001
From: Jack Franklin <jacktfranklin@chromium.org>
Date: Tue, 11 May 2021 09:05:54 +0000
Subject: [PATCH] [Lit2] Lint against manual tag names

This CL adds an ESLint rule that bans the use of:

```
LitHtml.html`<devtools-foo>`
```

Because from now on we want to enforce:

```
LitHtml.html`<${Foo.litTagName}>`
```

I have disabled the rule in all locations where we do not yet do this,
and will be working to fix these problems over a series of CLs.


Bug: 1153077
Change-Id: I8d18243d0243ea1403d5d57dbeb32c8a9682d2dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2876969
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
---
 front_end/.eslintrc.js                        |  1 +
 .../application/BackForwardCacheView.ts       |  3 ++
 .../components/FrameDetailsView.ts            | 20 ++++++++
 .../application/components/StackTrace.ts      |  1 +
 .../application/components/TrustTokensView.ts |  3 ++
 .../components/ElementsBreadcrumbs.ts         |  1 +
 .../panels/elements/components/LayoutPane.ts  |  2 +
 .../components/StylePropertyEditor.ts         |  1 +
 .../panels/issues/CSPViolationsListView.ts    |  1 +
 .../components/RequestTrustTokensView.ts      |  6 +++
 .../data_grid/DataGridController.ts           |  1 +
 front_end/ui/components/docs/report/basic.ts  |  2 +
 .../ui/components/icon_button/IconButton.ts   |  1 +
 .../LinearMemoryInspector.ts                  |  1 +
 .../LinearMemoryNavigator.ts                  |  1 +
 .../LinearMemoryValueInterpreter.ts           |  3 ++
 .../ValueInterpreterDisplay.ts                |  4 +-
 .../components/markdown_view/MarkdownImage.ts |  1 +
 .../components/markdown_view/MarkdownView.ts  |  2 +
 .../ui/components/survey_link/SurveyLink.ts   |  1 +
 .../components/inline_editor/CSSAngle.ts      |  2 +
 ...an_literal_devtools_component_tag_names.js | 49 +++++++++++++++++++
 ...teral_devtools_component_tag_names_test.js | 40 +++++++++++++++
 23 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 scripts/eslint_rules/lib/ban_literal_devtools_component_tag_names.js
 create mode 100644 scripts/eslint_rules/tests/ban_literal_devtools_component_tag_names_test.js

diff --git a/front_end/.eslintrc.js b/front_end/.eslintrc.js
index 219b4501ea..7ac5b2d0fa 100644
--- a/front_end/.eslintrc.js
+++ b/front_end/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
         'rulesdir/set_data_type_reference': 2,
         'rulesdir/lit_html_data_as_type': 2,
         'rulesdir/lit_no_style_interpolation': 2,
+        'rulesdir/ban_literal_devtools_component_tag_names': 2,
         '@typescript-eslint/naming-convention': [
           'error', {
             'selector': ['property', 'parameterProperty'],
diff --git a/front_end/panels/application/BackForwardCacheView.ts b/front_end/panels/application/BackForwardCacheView.ts
index f512b11c60..29c7de83a9 100644
--- a/front_end/panels/application/BackForwardCacheView.ts
+++ b/front_end/panels/application/BackForwardCacheView.ts
@@ -69,6 +69,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   async doUpdate(): Promise<void> {
     const data = {reportTitle: i18nString(UIStrings.backForwardCacheTitle)};
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     const html = LitHtml.html`
       <devtools-report .data=${data as ReportView.ReportView.ReportData}>
       ${this.renderMainFrameInformation(this.getMainFrame())}
@@ -88,11 +89,13 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
     if (!mainFrame) {
+      // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`<devtools-report-key>${i18nString(UIStrings.mainFrame)}</devtools-report-key>
       <devtools-report-value>
       ${i18nString(UIStrings.unavailable)}
       </devtools-report-value>`;
     }
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.lastMainFrameNavigation)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
diff --git a/front_end/panels/application/components/FrameDetailsView.ts b/front_end/panels/application/components/FrameDetailsView.ts
index 4b6282cdea..a3f044482a 100644
--- a/front_end/panels/application/components/FrameDetailsView.ts
+++ b/front_end/panels/application/components/FrameDetailsView.ts
@@ -289,6 +289,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     LitHtml.render(LitHtml.html`
       <style>
         .text-ellipsis {
@@ -381,6 +382,7 @@ export class FrameDetailsReportView extends HTMLElement {
       if (!allowed.length) {
         return LitHtml.nothing;
       }
+      // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`
         <devtools-report-key>${i18nString(UIStrings.allowedFeatures)}</devtools-report-key>
         <devtools-report-value>
@@ -395,6 +397,7 @@ export class FrameDetailsReportView extends HTMLElement {
         return LitHtml.nothing;
       }
       if (!this.showPermissionsDisallowedDetails) {
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
           <devtools-report-value>
@@ -434,6 +437,7 @@ export class FrameDetailsReportView extends HTMLElement {
           await Network.NetworkPanel.RequestLocationRevealer.instance().reveal(requestLocation);
         };
 
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <div class="permissions-row">
             <div>
@@ -465,6 +469,7 @@ export class FrameDetailsReportView extends HTMLElement {
         `;
       }));
 
+      // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`
         <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
         <devtools-report-value class="policies-list">
@@ -500,6 +505,7 @@ export class FrameDetailsReportView extends HTMLElement {
       `;
     };
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18n.i18n.lockedString('Permissions Policy')}</devtools-report-section-header>
       ${renderAllowed()}
@@ -513,6 +519,7 @@ export class FrameDetailsReportView extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.document)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
@@ -565,6 +572,7 @@ export class FrameDetailsReportView extends HTMLElement {
       clickHandler: (() => void)|(() => Promise<void>)): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <button class="link" role="link" tabindex=0 @click=${clickHandler} title=${title}>
         <devtools-icon .data=${{
@@ -596,6 +604,7 @@ export class FrameDetailsReportView extends HTMLElement {
     if (!this.frame || !this.frame.unreachableUrl()) {
       return LitHtml.nothing;
     }
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-key>${i18nString(UIStrings.unreachableUrl)}</devtools-report-key>
       <devtools-report-value>
@@ -637,6 +646,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
+      // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`
         <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
         <devtools-report-value>
@@ -653,6 +663,7 @@ export class FrameDetailsReportView extends HTMLElement {
       if (linkTargetDOMNode) {
         // Disabled until https://crbug.com/1079231 is fixed.
         // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <style>
             .button-icon-with-text {
@@ -691,6 +702,7 @@ export class FrameDetailsReportView extends HTMLElement {
     if (creationStackTraceData && creationStackTraceData.creationStackTrace) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
@@ -710,6 +722,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderAdStatus(): LitHtml.TemplateResult|{} {
     if (this.frame) {
       if (this.frame.adFrameType() === Protocol.Page.AdFrameType.Root) {
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <devtools-report-key>${i18nString(UIStrings.adStatus)}</devtools-report-key>
           <devtools-report-value title=${i18nString(UIStrings.thisFrameHasBeenIdentifiedAsThe)}>${
@@ -717,6 +730,7 @@ export class FrameDetailsReportView extends HTMLElement {
         `;
       }
       if (this.frame.adFrameType() === Protocol.Page.AdFrameType.Child) {
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <devtools-report-key>${i18nString(UIStrings.adStatus)}</devtools-report-key>
           <devtools-report-value title=${i18nString(UIStrings.thisFrameHasBeenIdentifiedAsTheA)}>${
@@ -731,6 +745,7 @@ export class FrameDetailsReportView extends HTMLElement {
     if (!this.frame) {
       return LitHtml.nothing;
     }
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.securityIsolation)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.secureContext)}</devtools-report-key>
@@ -802,6 +817,7 @@ export class FrameDetailsReportView extends HTMLElement {
     const isEnabled = info.value !== noneValue;
     const isReportOnly = (!isEnabled && info.reportOnlyValue !== noneValue);
     const endpoint = isEnabled ? info.reportingEndpoint : info.reportOnlyReportingEndpoint;
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-key>${policyName}</devtools-report-key>
       <devtools-report-value>
@@ -819,6 +835,7 @@ export class FrameDetailsReportView extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.apiAvailability)}</devtools-report-section-header>
       <div class="span-cols">
@@ -869,6 +886,7 @@ export class FrameDetailsReportView extends HTMLElement {
         }
 
         // SharedArrayBuffer is an API name, so we don't translate it.
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         return LitHtml.html`
           <devtools-report-key>SharedArrayBuffers</devtools-report-key>
           <devtools-report-value title=${tooltipText}>
@@ -888,6 +906,7 @@ export class FrameDetailsReportView extends HTMLElement {
           measureMemoryAvailable ? i18nString(UIStrings.available) : i18nString(UIStrings.unavailable);
       const tooltipText = measureMemoryAvailable ? i18nString(UIStrings.thePerformanceAPI) :
                                                    i18nString(UIStrings.thePerformancemeasureuseragentspecificmemory);
+      // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       return LitHtml.html`
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
@@ -905,6 +924,7 @@ export class FrameDetailsReportView extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header
         title=${i18nString(UIStrings.thisAdditionalDebugging)}
diff --git a/front_end/panels/application/components/StackTrace.ts b/front_end/panels/application/components/StackTrace.ts
index b5cc490543..972d1add20 100644
--- a/front_end/panels/application/components/StackTrace.ts
+++ b/front_end/panels/application/components/StackTrace.ts
@@ -155,6 +155,7 @@ export class StackTrace extends HTMLElement {
     }
     const expandableRows = this.createRowTemplates();
     LitHtml.render(
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       LitHtml.html`
         <devtools-expandable-list .data=${{
           rows: expandableRows,
diff --git a/front_end/panels/application/components/TrustTokensView.ts b/front_end/panels/application/components/TrustTokensView.ts
index 62e6711b93..fa44054d62 100644
--- a/front_end/panels/application/components/TrustTokensView.ts
+++ b/front_end/panels/application/components/TrustTokensView.ts
@@ -61,6 +61,7 @@ export class TrustTokensView extends HTMLElement {
 
   private render(): void {
     LitHtml.render(
+        // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
         LitHtml.html`
       <style>
         :host {
@@ -137,6 +138,7 @@ export class TrustTokensView extends HTMLElement {
       },
     };
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-data-grid-controller .data=${
         gridData as DataGrid.DataGridController.DataGridControllerData}></devtools-data-grid-controller>
@@ -160,6 +162,7 @@ export class TrustTokensView extends HTMLElement {
 
   private deleteButtonRenderer(issuer: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <style>
         .delete-button {
diff --git a/front_end/panels/elements/components/ElementsBreadcrumbs.ts b/front_end/panels/elements/components/ElementsBreadcrumbs.ts
index 99d4495d95..6b96081239 100644
--- a/front_end/panels/elements/components/ElementsBreadcrumbs.ts
+++ b/front_end/panels/elements/components/ElementsBreadcrumbs.ts
@@ -356,6 +356,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   crumb: true,
                   selected: crumb.selected,
                 };
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
                 return LitHtml.html`
                   <li class=${LitHtml.Directives.classMap(crumbClasses)}
                     data-node-id=${crumb.node.id}
diff --git a/front_end/panels/elements/components/LayoutPane.ts b/front_end/panels/elements/components/LayoutPane.ts
index c7d0f8cd69..1d5698cfd0 100644
--- a/front_end/panels/elements/components/LayoutPane.ts
+++ b/front_end/panels/elements/components/LayoutPane.ts
@@ -130,6 +130,7 @@ export class LayoutPane extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     render(html`
       <details open>
         <summary class="header" @keydown=${this.onSummaryKeyDown}>
@@ -260,6 +261,7 @@ export class LayoutPane extends HTMLElement {
     };
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return html`<div class="element">
       <label data-element="true" class="checkbox-label" title=${element.name}>
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} />
diff --git a/front_end/panels/elements/components/StylePropertyEditor.ts b/front_end/panels/elements/components/StylePropertyEditor.ts
index 93ba227f9c..97691615e3 100644
--- a/front_end/panels/elements/components/StylePropertyEditor.ts
+++ b/front_end/panels/elements/components/StylePropertyEditor.ts
@@ -206,6 +206,7 @@ export class StylePropertyEditor extends HTMLElement {
     });
     const title =
         i18nString(selected ? UIStrings.deselectButton : UIStrings.selectButton, {propertyName, propertyValue});
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return html`<button title=${title} class=${classes} @click=${
         (): void => this.onButtonClick(propertyName, propertyValue, selected)}>
        <devtools-icon style=${transform} .data=${
diff --git a/front_end/panels/issues/CSPViolationsListView.ts b/front_end/panels/issues/CSPViolationsListView.ts
index 9fbdd6f25b..e6affa490a 100644
--- a/front_end/panels/issues/CSPViolationsListView.ts
+++ b/front_end/panels/issues/CSPViolationsListView.ts
@@ -80,6 +80,7 @@ export class CSPViolationsListView extends UI.Widget.VBox {
           columnId: 'sourceCode',
           value: location.url,
           renderer(): LitHtml.TemplateResult {
+            // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
             return LitHtml.html`<devtools-linkifier .data=${
                 location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>`;
           },
diff --git a/front_end/panels/network/components/RequestTrustTokensView.ts b/front_end/panels/network/components/RequestTrustTokensView.ts
index d16d2c57c0..ea122a941e 100644
--- a/front_end/panels/network/components/RequestTrustTokensView.ts
+++ b/front_end/panels/network/components/RequestTrustTokensView.ts
@@ -137,6 +137,7 @@ export class RequestTrustTokensReport extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     LitHtml.render(LitHtml.html`
       <style>
         .code {
@@ -170,6 +171,7 @@ export class RequestTrustTokensReport extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.parameters)}</devtools-report-section-header>
       ${renderRowWithCodeValue(i18nString(UIStrings.type), this.trustTokenData.params.type.toString())}
@@ -192,6 +194,7 @@ export class RequestTrustTokensReport extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-key>${i18nString(UIStrings.issuers)}</devtools-report-key>
       <devtools-report-value>
@@ -219,6 +222,7 @@ export class RequestTrustTokensReport extends HTMLElement {
     if (!this.trustTokenData || !this.trustTokenData.result) {
       return LitHtml.nothing;
     }
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
       <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
@@ -298,6 +302,7 @@ function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitH
     return LitHtml.nothing;
   }
 
+  // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
   return LitHtml.html`
     <devtools-report-key>${key}</devtools-report-key>
     <devtools-report-value>${value}</devtools-report-value>
@@ -305,6 +310,7 @@ function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitH
 }
 
 function renderRowWithCodeValue(key: string, value: string): LitHtml.TemplateResult {
+  // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
   return LitHtml.html`
     <devtools-report-key>${key}</devtools-report-key>
     <devtools-report-value class="code">${value}</devtools-report-value>
diff --git a/front_end/ui/components/data_grid/DataGridController.ts b/front_end/ui/components/data_grid/DataGridController.ts
index 6e65a16d97..8643613d6a 100644
--- a/front_end/ui/components/data_grid/DataGridController.ts
+++ b/front_end/ui/components/data_grid/DataGridController.ts
@@ -196,6 +196,7 @@ export class DataGridController extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     LitHtml.render(LitHtml.html`
       <style>
         :host {
diff --git a/front_end/ui/components/docs/report/basic.ts b/front_end/ui/components/docs/report/basic.ts
index 3107ebf173..87e6d65fd8 100644
--- a/front_end/ui/components/docs/report/basic.ts
+++ b/front_end/ui/components/docs/report/basic.ts
@@ -11,6 +11,7 @@ import type * as ReportView from '../../report_view/report_view.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
 
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
 const exampleRenderHelper = (key: string, value: string): LitHtml.TemplateResult => LitHtml.html`
           <devtools-report-key>${key}</devtools-report-key>
           <devtools-report-value>${value}</devtools-report-value>
@@ -22,6 +23,7 @@ if (!container) {
 }
 
 LitHtml.render(
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     LitHtml.html`
         <style>
           .source-code {
diff --git a/front_end/ui/components/icon_button/IconButton.ts b/front_end/ui/components/icon_button/IconButton.ts
index f2f3c63b35..e0e51bcfb1 100644
--- a/front_end/ui/components/icon_button/IconButton.ts
+++ b/front_end/ui/components/icon_button/IconButton.ts
@@ -121,6 +121,7 @@ export class IconButton extends HTMLElement {
       <button class="${buttonClasses}" @click=${this.onClickHandler}>
       ${this.leadingText ? LitHtml.html`<span class="icon-button-title">${this.leadingText}</span>` : LitHtml.nothing}
       ${this.groups.filter(counter => counter.text !== undefined).map(counter =>
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
       LitHtml.html`
       <devtools-icon class="status-icon"
       .data=${{iconName: counter.iconName, color: counter.iconColor || '', width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
diff --git a/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts b/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts
index 137a1171c2..2cb9233d7f 100644
--- a/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts
+++ b/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts
@@ -153,6 +153,7 @@ export class LinearMemoryInspector extends HTMLElement {
     const canGoForwardInHistory = this.history.canRollover();
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     render(html`
       <style>
         :host {
diff --git a/front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.ts b/front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.ts
index e85f935c9f..16e4020cce 100644
--- a/front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.ts
+++ b/front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.ts
@@ -222,6 +222,7 @@ export class LinearMemoryNavigator extends HTMLElement {
 
   private createButton(data: {icon: string, title: string, event: Event, enabled: boolean}): LitHtml.TemplateResult {
     const iconColor = data.enabled ? 'var(--color-text-secondary)' : 'var(--color-background-highlight)';
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return html`
       <button class="navigator-button" ?disabled=${!data.enabled}
         data-button=${data.event.type} title=${data.title}
diff --git a/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts b/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts
index f056f60c1a..7cae3710c5 100644
--- a/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts
+++ b/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts
@@ -86,6 +86,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     render(html`
       <style>
         :host {
@@ -154,11 +155,13 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
         <span class="divider"></span>
         <div>
           ${this.showSettings ?
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
             html`
               <devtools-linear-memory-inspector-interpreter-settings
                 .data=${{ valueTypes: this.valueTypes } as ValueInterpreterSettingsData}
                 @type-toggle=${this.onTypeToggle}>
               </devtools-linear-memory-inspector-interpreter-settings>` :
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
             html`
               <devtools-linear-memory-inspector-interpreter-display
                 .data=${{
diff --git a/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts b/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts
index b2cd378fda..7ea69eebf0 100644
--- a/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts
+++ b/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts
@@ -200,7 +200,9 @@ export class ValueInterpreterDisplay extends HTMLElement {
       <div class="value-type-cell">
         <div class="value-type-value-with-link" data-value="true">
         <span>${unsignedValue}</span>
-          ${html`
+          ${
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
+            html`
               <button class="jump-to-button" data-jump="true" title=${buttonTitle} ?disabled=${jumpDisabled}
                 @click=${this.onJumpToAddressClicked.bind(this, Number(address))}>
                 <devtools-icon .data=${
diff --git a/front_end/ui/components/markdown_view/MarkdownImage.ts b/front_end/ui/components/markdown_view/MarkdownImage.ts
index 1c1a24a972..77bb2dc182 100644
--- a/front_end/ui/components/markdown_view/MarkdownImage.ts
+++ b/front_end/ui/components/markdown_view/MarkdownImage.ts
@@ -42,6 +42,7 @@ export class MarkdownImage extends HTMLElement {
       return LitHtml.html``;
     }
     const {src, color, width = '100%', height = '100%'} = this.imageData;
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return LitHtml.html`
       <devtools-icon .data=${{iconPath: src, color, width, height} as IconButton.Icon.IconData}></devtools-icon>
     `;
diff --git a/front_end/ui/components/markdown_view/MarkdownView.ts b/front_end/ui/components/markdown_view/MarkdownView.ts
index c07f1d98c7..5c6a4e05ba 100644
--- a/front_end/ui/components/markdown_view/MarkdownView.ts
+++ b/front_end/ui/components/markdown_view/MarkdownView.ts
@@ -138,11 +138,13 @@ const tokenRenderers = new Map<string, (token: any) => LitHtml.TemplateResult>([
   ['space', (): LitHtml.TemplateResult => html``],
   [
     'link',
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     (token): LitHtml.TemplateResult => html`<devtools-markdown-link .data=${
         {key: token.href, title: token.text} as MarkdownLinkData}></devtools-markdown-link>`,
   ],
   [
     'image',
+    // eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     (token): LitHtml.TemplateResult => html`<devtools-markdown-image .data=${
         {key: token.href, title: token.text} as MarkdownImageData}></devtools-markdown-image>`,
   ],
diff --git a/front_end/ui/components/survey_link/SurveyLink.ts b/front_end/ui/components/survey_link/SurveyLink.ts
index e93e61d822..86b1479b59 100644
--- a/front_end/ui/components/survey_link/SurveyLink.ts
+++ b/front_end/ui/components/survey_link/SurveyLink.ts
@@ -116,6 +116,7 @@ export class SurveyLink extends HTMLElement {
     const ariaDisabled = this.state !== State.ShowLink;
 
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     const output = LitHtml.html`
       <style>
         .link-icon {
diff --git a/front_end/ui/legacy/components/inline_editor/CSSAngle.ts b/front_end/ui/legacy/components/inline_editor/CSSAngle.ts
index 181d919c8c..ea8d71b6de 100644
--- a/front_end/ui/legacy/components/inline_editor/CSSAngle.ts
+++ b/front_end/ui/legacy/components/inline_editor/CSSAngle.ts
@@ -212,6 +212,7 @@ export class CSSAngle extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     render(html`
       <style>
         .css-angle {
@@ -264,6 +265,7 @@ export class CSSAngle extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
+// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
     return html`
     <devtools-css-angle-editor
       class="popover popover-css-angle"
diff --git a/scripts/eslint_rules/lib/ban_literal_devtools_component_tag_names.js b/scripts/eslint_rules/lib/ban_literal_devtools_component_tag_names.js
new file mode 100644
index 0000000000..82c19608e6
--- /dev/null
+++ b/scripts/eslint_rules/lib/ban_literal_devtools_component_tag_names.js
@@ -0,0 +1,49 @@
+// 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';
+
+function isLitHtmlTemplateCall(taggedTemplateExpression) {
+  if (taggedTemplateExpression.name) {
+    // Call to html`` and we assume that html = LitHtml's html function.
+    return taggedTemplateExpression.name === 'html';
+  }
+
+  // Match calls to LitHtml.html``
+  return taggedTemplateExpression.object && taggedTemplateExpression.object.name === 'LitHtml' &&
+      taggedTemplateExpression.property.name === 'html';
+}
+
+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.tag);
+        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}>).',
+            });
+          }
+        }
+      },
+    };
+  }
+};
diff --git a/scripts/eslint_rules/tests/ban_literal_devtools_component_tag_names_test.js b/scripts/eslint_rules/tests/ban_literal_devtools_component_tag_names_test.js
new file mode 100644
index 0000000000..243f3e599a
--- /dev/null
+++ b/scripts/eslint_rules/tests/ban_literal_devtools_component_tag_names_test.js
@@ -0,0 +1,40 @@
+// 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}],
+      output: `// eslint-disable-next-line rulesdir/ban_literal_devtools_component_tag_names
+LitHtml.html\`<devtools-foo></devtools-foo>\``
+    },
+    // {
+    //   code: 'LitHtml.html`<p>${foo}</p><devtools-foo></devtools-foo>`',
+    //   filename: 'front_end/components/test.ts',
+    //   errors: [{message: EXPECTED_ERROR_MESSAGE}]
+    // },
+  ]
+});