Fixed the trivial violations of the no-lit-render-outside-of-view

Fixed: 407940043, 407750767
Change-Id: I3ce8d7da3945c6a83139a8bfd60648742b1eb973
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7084745
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/ai_assistance/PatchWidget.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
@@ -187,42 +186,8 @@ export interface ViewOutput {
 }
 
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
-
-export class PatchWidget extends UI.Widget.Widget {
-  changeSummary = '';
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
-  // Whether the user completed first run experience dialog or not.
-  #aiPatchingFreCompletedSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
-  #projectIdSetting =
-      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
-  #view: View;
-  #viewOutput: ViewOutput = {};
-  #aidaClient: Host.AidaClient.AidaClient;
-  #applyPatchAbortController?: AbortController;
-  #project?: Workspace.Workspace.Project;
-  #patchSources?: string;
-  #savedToDisk?: boolean;
-  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
-  #patchSuggestionState = PatchSuggestionState.INITIAL;
-  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
-  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
-  #automaticFileSystem =
-      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
-  #applyToDisconnectedAutomaticWorkspace = false;
-  // `rpcId` from the `applyPatch` request
-  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
-
-  constructor(element?: HTMLElement, view?: View, opts?: {
-    aidaClient: Host.AidaClient.AidaClient,
-  }) {
-    super(element);
-    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
-        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-
-    // clang-format off
-    this.#view = view ?? ((input, output, target) => {
+const DEFAULT_VIEW: View =
+    (input, output, target) => {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
@@ -428,9 +393,43 @@ export class PatchWidget extends UI.Widget.Widget {
           </details>
         `;
 
-      render(template, target, {host: target});
-    });
-    // clang-format on
+      render(template, target);
+    };
+
+export class PatchWidget extends UI.Widget.Widget {
+  changeSummary = '';
+  changeManager: AiAssistanceModel.ChangeManager.ChangeManager|undefined;
+  // Whether the user completed first run experience dialog or not.
+  #aiPatchingFreCompletedSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-fre-completed', false);
+  #projectIdSetting =
+      Common.Settings.Settings.instance().createSetting('ai-assistance-patching-selected-project-id', '');
+  #view: View;
+  #viewOutput: ViewOutput = {};
+  #aidaClient: Host.AidaClient.AidaClient;
+  #applyPatchAbortController?: AbortController;
+  #project?: Workspace.Workspace.Project;
+  #patchSources?: string;
+  #savedToDisk?: boolean;
+  #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
+  #patchSuggestionState = PatchSuggestionState.INITIAL;
+  #workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
+  #automaticFileSystem =
+      Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
+  #applyToDisconnectedAutomaticWorkspace = false;
+  // `rpcId` from the `applyPatch` request
+  #rpcId: Host.AidaClient.RpcGlobalId|null = null;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW, opts?: {
+    aidaClient: Host.AidaClient.AidaClient,
+  }) {
+    super(element);
+    this.#aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
+    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
+    this.#view = view;
+
     this.requestUpdate();
   }
 

front_end/panels/ai_assistance/components/ExploreWidget.ts

@@ -2,7 +2,6 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -105,7 +104,6 @@ export const DEFAULT_VIEW = (
       </div>
     `,
     target,
-    { host: target },
   );
   // clang-format on
 };

front_end/panels/autofill/AutofillView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -250,7 +249,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
             </div>
           </div>
         </main>
-      `, target, {host: this});
+      `, target);
     // clang-format on
     return;
   }
@@ -287,7 +286,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           ${renderFilledFields()}
         </div>
       </main>
-    `, target, {host: this});
+    `, target);
   // clang-format on
 };
 

front_end/panels/changes/CombinedDiffView.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -101,6 +100,18 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
   // clang-format on
 }
 
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(
+      html`
+      <div class="combined-diff-view">
+        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
+      </div>
+    `,
+      target);
+  // clang-format on
+};
+
 export class CombinedDiffView extends UI.Widget.Widget {
   /**
    * Ignores urls that start with any in the list
@@ -113,19 +124,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
   #copiedFiles: Record<string, boolean> = {};
   #view: View;
   #viewOutput: ViewOutput = {};
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    output.scrollToSelectedDiff = () => {
-      target.querySelector('details.selected')?.scrollIntoView();
-    };
-
-    Lit.render(
-        html`
-      <div class="combined-diff-view">
-        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
-      </div>
-    `,
-        target, {host: target});
-  }) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.registerRequiredCSS(combinedDiffViewStyles);
     this.#view = view;

front_end/panels/network/components/DirectSocketConnectionView.test.ts

@@ -196,7 +196,7 @@ describeWithEnvironment('view', () => {
       onCopyRow: () => {}
     };
 
-    view(viewInput, target);
+    view(viewInput, undefined, target);
     await assertScreenshot('direct_socket_connection_view/all_categories_open.png');
   });
 
@@ -221,7 +221,7 @@ describeWithEnvironment('view', () => {
       onCopyRow: () => {}
     };
 
-    view(viewInput, target);
+    view(viewInput, undefined, target);
     await assertScreenshot('direct_socket_connection_view/all_categories_open_values_absent.png');
   });
 
@@ -247,7 +247,7 @@ describeWithEnvironment('view', () => {
       onCopyRow: () => {}
     };
 
-    view(viewInput, target);
+    view(viewInput, undefined, target);
     await assertScreenshot('direct_socket_connection_view/all_categories_closed.png');
   });
 });

front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -112,9 +110,9 @@ export interface ViewInput {
   onCopyRow: () => void;
 }
 
-export type View = (input: ViewInput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   function isCategoryOpen(name: string): boolean {
     return input.openCategories.includes(name);
   }
@@ -203,7 +201,7 @@ export const DEFAULT_VIEW: View = (input, target) => {
     ${renderCategory(CATEGORY_NAME_GENERAL, i18nString(UIStrings.general), generalContent)}
     ${renderCategory(CATEGORY_NAME_OPTIONS, i18nString(UIStrings.options), optionsContent)}
     ${socketInfo.openInfo ? renderCategory(CATEGORY_NAME_OPEN_INFO, i18nString(UIStrings.openInfo), openInfoContent) : Lit.nothing}
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
@@ -278,7 +276,7 @@ export class DirectSocketConnectionView extends UI.Widget.Widget {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
       }
     };
-    this.#view(viewInput, this.contentElement);
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #setIsOpen(categoryName: string, open: boolean): void {