[eslint] Forbid use of host option to render() inside views.

bmeurer · Devtools-frontend LUCI CQ · commit 9f8e3b028025 · 2025-08-03T22:56:36.000-07:00
Fixed: 435607109 Change-Id: Ia6715fb4a6a5cf8e73d15e6ac5a8774669de0fb3 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6813789 Auto-Submit: Benedikt Meurer <bmeurer@chromium.org> Commit-Queue: Danil Somsikov <dsv@chromium.org> Reviewed-by: Danil Somsikov <dsv@chromium.org>
diff --git a/front_end/models/extensions/ExtensionView.ts b/front_end/models/extensions/ExtensionView.ts
@@ -51,7 +51,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
     ${ref(element => {output.iframe = element as HTMLIFrameElement; })}
     src=${input.src}
     class=${input.className}
-    @load=${input.onLoad}></iframe>`, target, {host: input});
+    @load=${input.onLoad}></iframe>`, target);
   // clang-format on
 };
 
diff --git a/front_end/models/persistence/EditFileSystemView.ts b/front_end/models/persistence/EditFileSystemView.ts
@@ -126,7 +126,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </devtools-data-grid>
         ${input.excludedFolderPaths.filter(({status}) => status !== ExcludedFolderStatus.VALID).map(({status}) =>
           html`<span class="excluded-folder-error">${statusString(status)}</span>`)}
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/models/persistence/WorkspaceSettingsTab.ts b/front_end/models/persistence/WorkspaceSettingsTab.ts
@@ -92,7 +92,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             @click=${input.onAddClicked}>${i18nString(UIStrings.addFolder)}</devtools-button>
         </div>
       </div>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/accessibility/SourceOrderView.ts b/front_end/panels/accessibility/SourceOrderView.ts
@@ -80,7 +80,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
         `
       }
     </div>
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/ai_assistance/AiAssistancePanel.ts b/front_end/panels/ai_assistance/AiAssistancePanel.ts
@@ -399,7 +399,6 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
       </div>
     `,
     target,
-    { host: input },
   );
   // clang-format on
 }
diff --git a/front_end/panels/animation/AnimationGroupPreviewUI.ts b/front_end/panels/animation/AnimationGroupPreviewUI.ts
@@ -138,7 +138,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             <devtools-icon name="cross"></devtools-icon>
         </button>
     </div>
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/application/KeyValueStorageItemsView.ts b/front_end/panels/application/KeyValueStorageItemsView.ts
@@ -163,7 +163,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
               </devtools-widget>
             </devtools-split-view>`,
             // clang-format on
-            target, {host: input});
+            target);
       };
     }
     super();
diff --git a/front_end/panels/application/StorageItemsToolbar.ts b/front_end/panels/application/StorageItemsToolbar.ts
@@ -90,7 +90,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
       </devtools-toolbar>
       ${input.metadataView}`,
       // clang-format on
-      target, {host: input});
+      target);
 };
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
diff --git a/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts b/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts
@@ -149,7 +149,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): v
         ></devtools-toolbar-input>
     </devtools-toolbar>`,
       // clang-format on
-      target, {host: input});
+      target);
 };
 
 export class FilterToolbar extends Common.ObjectWrapper.eventMixin<FilterToolbar.EventTypes, typeof UI.Widget.VBox>(
diff --git a/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts b/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts
@@ -120,8 +120,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 ${viewSourcesTooltip}
             </div>
         </div>
-        `, target, {host: input});
-  // clang-format on
+        `, target);
+    // clang-format on
 };
 
 export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
diff --git a/front_end/panels/common/AiCodeCompletionTeaser.ts b/front_end/panels/common/AiCodeCompletionTeaser.ts
@@ -85,7 +85,7 @@ export type View = (input: ViewInput, output: object, target: HTMLElement) => vo
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-    render(nothing, target, {host: input});
+    render(nothing, target);
     return;
   }
   const cmdOrCtrl =
@@ -106,7 +106,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 ${lockedString(UIStringsNotTranslate.dontShowAgain)}
             </span>
           </div>
-        `, target, {host: input}
+        `, target
       );
   // clang-format on
 };
diff --git a/front_end/panels/console_counters/WarningErrorCounter.ts b/front_end/panels/console_counters/WarningErrorCounter.ts
@@ -114,7 +114,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
         click: true
       })}
          ></devtools-issue-counter></div>`,
-      target, {host: input});
+      target);
 };
 
 export class WarningErrorCounterWidget extends UI.Widget.Widget {
diff --git a/front_end/panels/css_overview/CSSOverviewCompletedView.ts b/front_end/panels/css_overview/CSSOverviewCompletedView.ts
@@ -346,7 +346,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </devtools-widget>
         </devtools-split-view>
       </devtools-split-view>`,
-      target, {host: input});
+      target);
   // clang-format on
 };
 
@@ -922,7 +922,7 @@ export const ELEMENT_DETAILS_DEFAULT_VIEW: ElementDetailsViewFunction = (input,
         </table>
       </devtools-data-grid>
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/css_overview/CSSOverviewPanel.ts b/front_end/panels/css_overview/CSSOverviewPanel.ts
@@ -39,7 +39,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       overviewData: input.overviewData,
       target: input.target,
     })}></devtools-widget>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/css_overview/CSSOverviewProcessingView.ts b/front_end/panels/css_overview/CSSOverviewProcessingView.ts
@@ -39,7 +39,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </div>
       </div>
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts b/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts
@@ -83,7 +83,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </div>`;
         })}
       </div>`,
-      target, {host: input});
+      target);
   // clang-format on
 };
 
diff --git a/front_end/panels/css_overview/CSSOverviewStartView.ts b/front_end/panels/css_overview/CSSOverviewStartView.ts
@@ -85,7 +85,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         }}>
       </devtools-feedback-button>
     </div>`,
-    target, { host: input });
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/developer_resources/DeveloperResourcesListView.ts b/front_end/panels/developer_resources/DeveloperResourcesListView.ts
@@ -162,7 +162,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           })}
           </table>
         </devtools-data-grid>`,
-        target, {host: input});
+        target);
   // clang-format on
 };
 
diff --git a/front_end/panels/developer_resources/DeveloperResourcesView.ts b/front_end/panels/developer_resources/DeveloperResourcesView.ts
@@ -113,7 +113,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               i18nString(UIStrings.resources, {n: input.numResources})}
          </div>
       </div>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/elements/CSSValueTraceView.ts b/front_end/panels/elements/CSSValueTraceView.ts
@@ -1,7 +1,6 @@
 // Copyright 2025 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.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Lit from '../../third_party/lit/lit.js';
diff --git a/front_end/panels/elements/DOMLinkifier.ts b/front_end/panels/elements/DOMLinkifier.ts
@@ -71,7 +71,7 @@ const DEFAULT_VIEW: View = (input, _output, target: HTMLElement) => {
           input.pseudo ? html`<span class="extra node-label-pseudo">${input.pseudo}</span>` : nothing,
         ]
       }</button>
-    </span>` : i18nString(UIStrings.node)}`, target, {host: input});
+    </span>` : i18nString(UIStrings.node)}`, target);
   // clang-format on
 };
 
@@ -200,7 +200,7 @@ const DEFERRED_DEFAULT_VIEW: DeferredView = (input, _output, target: HTMLElement
           @click=${input.onClick}
           @mousedown=${(e: Event) => e.consume()}>
         <slot></slot>
-      </button>`, target, {host: input});
+      </button>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/elements/ElementStatePaneWidget.ts b/front_end/panels/elements/ElementStatePaneWidget.ts
@@ -132,7 +132,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               .map(state => createElementStateCheckbox(state))}
         </div>
       </details>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/elements/LayoutPane.ts b/front_end/panels/elements/LayoutPane.ts
@@ -359,7 +359,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         : ''}
       </div>`,
       // clang-format on
-      target, {host: input});
+      target);
 };
 
 type View = (input: ViewInput, output: object, element: HTMLElement) => void;
diff --git a/front_end/panels/elements/NodeStackTraceWidget.ts b/front_end/panels/elements/NodeStackTraceWidget.ts
@@ -38,7 +38,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {target: sdkTarget, linkifier, options})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/elements/PlatformFontsWidget.ts b/front_end/panels/elements/PlatformFontsWidget.ts
@@ -99,7 +99,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </div>
       `}
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/elements/PropertiesWidget.ts b/front_end/panels/elements/PropertiesWidget.ts
@@ -96,7 +96,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
       ${input.treeOutlineElement}
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/issues/HiddenIssuesRow.ts b/front_end/panels/issues/HiddenIssuesRow.ts
@@ -59,7 +59,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                      @click=${input.onUnhideAllIssues}
                      @keydown=${stopPropagationForEnter}
                      .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.unhideAll)}</devtools-button>
-  </div>`, target, {host: input});
+  </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/network/RequestHTMLView.ts b/front_end/panels/network/RequestHTMLView.ts
@@ -52,7 +52,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           csp="default-src 'none';img-src data:;style-src 'unsafe-inline'" src=${input.dataURL}
           tabindex="-1" role="presentation"></iframe>` : nothing}
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/network/RequestResponseView.ts b/front_end/panels/network/RequestResponseView.ts
@@ -105,7 +105,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target:
     // clang-format on
   }
 
-  render(widget, target, {host: input});
+  render(widget, target);
 };
 
 export class RequestResponseView extends UI.Widget.VBox {
diff --git a/front_end/panels/protocol_monitor/JSONEditor.ts b/front_end/panels/protocol_monitor/JSONEditor.ts
@@ -1270,6 +1270,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                         .variant=${Buttons.Button.Variant.PRIMARY_TOOLBAR}
                         @click=${input.onCommandSend}></devtools-button>
       </devtools-toolbar>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
diff --git a/front_end/panels/protocol_monitor/ProtocolMonitor.ts b/front_end/panels/protocol_monitor/ProtocolMonitor.ts
@@ -354,8 +354,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               ${widgetRef(JSONEditor, e => {output.editorWidget = e;})}>
           </devtools-widget>
         </devtools-split-view>`,
-        target,
-        {host: input}
+        target
     );
   // clang-format on
 };
diff --git a/front_end/panels/recorder/components/RecordingView.ts b/front_end/panels/recorder/components/RecordingView.ts
@@ -862,7 +862,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     </div>
   `,
     target,
-    { host: input },
   );
   // clang-format on
 };
diff --git a/front_end/panels/recorder/components/StepView.ts b/front_end/panels/recorder/components/StepView.ts
@@ -1,7 +1,6 @@
 // Copyright 2023 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.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 /* Some view input callbacks might be handled outside of Lit and we
    bind all of them upfront. We disable the lit_html_host_this since we
diff --git a/front_end/panels/sources/AddSourceMapURLDialog.ts b/front_end/panels/sources/AddSourceMapURLDialog.ts
@@ -51,7 +51,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         @keydown=${input.onKeyDown} ${ref(e => { output.input = e as HTMLInputElement; })}>
     <devtools-button @click=${input.apply} .jslogContext=${'add'}
         .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.add)}</devtools-button>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/sources/BreakpointsView.ts b/front_end/panels/sources/BreakpointsView.ts
@@ -664,7 +664,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 </div>`)}
             </details>`)}
       </div>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };
 
diff --git a/front_end/panels/timeline/TimelineDetailsView.ts b/front_end/panels/timeline/TimelineDetailsView.ts
@@ -678,7 +678,7 @@ const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
             eventToInsightsMap: input.eventToRelatedInsightsMap,
           })}></devtools-widget>
       `,
-      target, {host: input});
+      target);
   // clang-format on
 };
 
diff --git a/front_end/panels/timeline/components/LayoutShiftDetails.ts b/front_end/panels/timeline/components/LayoutShiftDetails.ts
@@ -167,7 +167,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
 export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
     (input, _output, target) => {
       if (!input.event || !input.parsedTrace) {
-        render(html``, target, {host: input});
+        render(html``, target);
         return;
       }
 
@@ -195,7 +195,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
          )}
         </div>
       </div>
-      `, target, {host: input});
+      `, target);
       // clang-format on
     };
 
diff --git a/front_end/panels/timeline/components/RelatedInsightChips.ts b/front_end/panels/timeline/components/RelatedInsightChips.ts
@@ -86,7 +86,7 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       const {activeEvent, eventToInsightsMap} = input;
       const relatedInsights = activeEvent ? eventToInsightsMap.get(activeEvent) ?? [] : [];
       if (!activeEvent || eventToInsightsMap.size === 0 || relatedInsights.length === 0) {
-        render(html``, target, {host: input});
+        render(html``, target);
         return;
       }
 
@@ -131,6 +131,6 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       render(html`<style>${relatedInsightsStyles}</style>
         <ul>${insightMessages}</ul>
         <ul>${insightChips}</ul>`,
-      target, {host: input});
+      target);
       // clang-format on
     };
diff --git a/front_end/panels/webauthn/WebauthnPane.ts b/front_end/panels/webauthn/WebauthnPane.ts
@@ -522,7 +522,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
       ${renderNewAuthenticatorSection(
           input.newAuthenticatorOptions, input.internalTransportAvailable,  input.updateNewAuthenticatorOptions, input.addAuthenticator)}
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
diff --git a/front_end/panels/whats_new/ReleaseNoteView.ts b/front_end/panels/whats_new/ReleaseNoteView.ts
diff --git a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
diff --git a/front_end/ui/legacy/TargetCrashedScreen.ts b/front_end/ui/legacy/TargetCrashedScreen.ts
diff --git a/scripts/eslint_rules/lib/no-lit-render-outside-of-view.ts b/scripts/eslint_rules/lib/no-lit-render-outside-of-view.ts
diff --git a/scripts/eslint_rules/tests/no-lit-render-outside-of-view.test.ts b/scripts/eslint_rules/tests/no-lit-render-outside-of-view.test.ts

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {`
`80`	`80`	`
`81`	`81`	`}`
`82`	`82`	`</div>`
`83`		- `, target, {host: input});
	`83`	+ `, target);
`84`	`84`	`// clang-format on`
`85`	`85`	`};`
`86`	`86`
Original file line number	Diff line number	Diff line change
`@@ -399,7 +399,6 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem`
`399`	`399`	`</div>`
`400`	`400`	`,
`401`	`401`	`target,`
`402`		`- { host: input },`
`403`	`402`	`);`
`404`	`403`	`// clang-format on`
`405`	`404`	`}`
Original file line number	Diff line number	Diff line change
`@@ -163,7 +163,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {`
`163`	`163`	`</devtools-widget>`
`164`	`164`	</devtools-split-view>`,
`165`	`165`	`// clang-format on`
`166`		`- target, {host: input});`
	`166`	`+ target);`
`167`	`167`	`};`
`168`	`168`	`}`
`169`	`169`	`super();`