tests: enable the no-widget-show-document-body rule and fix violations

Bug: none
Change-Id: I4433ad84d72aceffdd5f4533ad8006b1125a4ca6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6579410
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Victor Porof <victorporof@chromium.org>

Author: jackfranklin

eslint.config.mjs

@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 
 import stylisticPlugin from '@stylistic/eslint-plugin';
-import { defineConfig, globalIgnores } from 'eslint/config';
 import eslintPlugin from 'eslint-plugin-eslint-plugin';
 import importPlugin from 'eslint-plugin-import';
 import jsdocPlugin from 'eslint-plugin-jsdoc';
 import mochaPlugin from 'eslint-plugin-mocha';
+import {defineConfig, globalIgnores} from 'eslint/config';
 import globals from 'globals';
-import { join } from 'path';
+import {join} from 'path';
 import typescriptEslint from 'typescript-eslint';
 
 import rulesdirPlugin from './scripts/eslint_rules/rules-dir.mjs';
@@ -193,7 +193,7 @@ export default defineConfig([
       radix: 'error',
       'valid-typeof': 'error',
       'no-return-assign': ['error', 'always'],
-      'no-implicit-coercion': ['error', { allow: ['!!'] }],
+      'no-implicit-coercion': ['error', {allow: ['!!']}],
 
       'no-array-constructor': 'error',
 
@@ -304,11 +304,11 @@ export default defineConfig([
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-          import.meta.dirname,
-          'config',
-          'typescript',
-          'tsconfig.eslint.json',
-        ),
+            import.meta.dirname,
+            'config',
+            'typescript',
+            'tsconfig.eslint.json',
+            ),
       },
     },
 
@@ -550,12 +550,12 @@ export default defineConfig([
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-            import.meta.dirname,
-            'front_end',
-            'models',
-            'trace',
-            'trace.js',
-          ),
+              import.meta.dirname,
+              'front_end',
+              'models',
+              'trace',
+              'trace.js',
+              ),
           importName: 'Trace',
         },
       ],
@@ -699,6 +699,7 @@ export default defineConfig([
       'rulesdir/prefer-sinon-assert': 'error',
       'rulesdir/prefer-url-string': 'error',
       'rulesdir/trace-engine-test-timeouts': 'error',
+      'rulesdir/no-widget-show-document-body': 'error',
       'rulesdir/enforce-custom-element-definitions-location': 'off',
     },
 

front_end/panels/accessibility/AccessibilitySidebarView.test.ts

@@ -4,6 +4,7 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 
@@ -39,8 +40,7 @@ describeWithMockConnection('AccessibilitySidebarView', () => {
 
     view = Accessibility.AccessibilitySidebarView.AccessibilitySidebarView.instance(
         {forceNew: true, throttlingTimeout: 0});
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     view.setNode(node);
     await new Promise<void>(resolve => setTimeout(resolve, 0));
 

front_end/panels/animation/AnimationTimeline.test.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {
   createTarget,
   stubNoopSettings,
@@ -166,7 +167,7 @@ describeWithMockConnection('AnimationTimeline', () => {
 
     view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
     view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     await new Promise<void>(resolve => setTimeout(resolve, 0));
 
     const previewContainer = (view.contentElement.querySelector('.animation-timeline-buffer') as HTMLElement);
@@ -203,7 +204,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     it('updates --timeline-controls-width and calls onResize', async () => {
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
       view.markAsRoot();
-      view.show(document.body);
+      renderElementIntoDOM(view);
       const onResizeStub = sinon.stub(view, 'onResize');
       await new Promise<void>(resolve => setTimeout(resolve, 0));
 
@@ -246,7 +247,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     beforeEach(async () => {
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
       view.markAsRoot();
-      view.show(document.body);
+      renderElementIntoDOM(view);
 
       sinon.stub(view, 'animationGroupSelectedForTest').callsFake(() => {
         waitForAnimationGroupSelectedPromise.resolve();
@@ -396,7 +397,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     beforeEach(async () => {
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
       view.markAsRoot();
-      view.show(document.body);
+      renderElementIntoDOM(view);
 
       sinon.stub(view, 'animationGroupSelectedForTest').callsFake(() => {
         waitForAnimationGroupSelectedPromise.resolve();
@@ -491,7 +492,7 @@ describeWithMockConnection('AnimationTimeline', () => {
 
       view = Animation.AnimationTimeline.AnimationTimeline.instance({forceNew: true});
       view.markAsRoot();
-      view.show(document.body);
+      renderElementIntoDOM(view);
 
       sinon.stub(view, 'animationGroupSelectedForTest').callsFake(() => {
         waitForAnimationGroupSelectedPromise.resolve();
@@ -687,7 +688,7 @@ describeWithMockConnection('AnimationTimeline', () => {
 
     // Render into document in order to see the computed styles.
     view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     assert.deepEqual(window.getComputedStyle(placeholder).display, 'flex');
 
     assert.deepEqual(placeholder.querySelector('.empty-state-header')?.textContent, 'Currently waiting for animations');
@@ -710,7 +711,7 @@ describeWithMockConnection('AnimationTimeline', () => {
     // Render into document in order to update the shown empty state.
     const view = Animation.AnimationTimeline.AnimationTimeline.instance();
     view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     const previewUpdatePromise = new ManualPromise();
     sinon.stub(view, 'previewsCreatedForTest').callsFake(() => {

front_end/panels/application/AppManifestView.test.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import {getCleanTextContentFromElements} from '../../testing/DOMHelpers.js';
+import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -52,8 +52,7 @@ describeWithMockConnection('AppManifestView', () => {
     sinon.stub(resourceTreeModel, 'getAppId').resolves({} as Protocol.Page.GetAppIdResponse);
 
     view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     await new Promise(resolve => {
       view.addEventListener(Application.AppManifestView.Events.MANIFEST_DETECTED, resolve, {once: true});
@@ -88,8 +87,7 @@ describeWithMockConnection('AppManifestView', () => {
     sinon.stub(resourceTreeModel, 'getAppId').resolves({} as Protocol.Page.GetAppIdResponse);
 
     view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.DOMContentLoaded, 42);
     await new Promise(resolve => {
@@ -132,8 +130,7 @@ describeWithMockConnection('AppManifestView', () => {
     sinon.stub(resourceTreeModel, 'getAppId').resolves({} as Protocol.Page.GetAppIdResponse);
 
     view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     await new Promise(resolve => {
       view.addEventListener(Application.AppManifestView.Events.MANIFEST_RENDERED, resolve, {once: true});

front_end/panels/application/ServiceWorkersView.test.ts

@@ -4,6 +4,7 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 
@@ -25,8 +26,7 @@ describeWithMockConnection('ServiceWorkersView', () => {
 
   it('shows service worker registrations', async () => {
     view = new Application.ServiceWorkersView.ServiceWorkersView();
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     const serviceWorkersManager = target.model(SDK.ServiceWorkerManager.ServiceWorkerManager);
     assert.exists(serviceWorkersManager);
     const securityOriginManager = target.model(SDK.SecurityOriginManager.SecurityOriginManager);
@@ -72,8 +72,7 @@ describeWithMockConnection('ServiceWorkersView', () => {
     beforeEach(() => {
       Application.ServiceWorkersView.setThrottleDisabledForDebugging(true);
       view = new Application.ServiceWorkersView.ServiceWorkersView();
-      view.markAsRoot();
-      view.show(document.body);
+      renderElementIntoDOM(view);
 
       serviceWorkersManager = target.model(SDK.ServiceWorkerManager.ServiceWorkerManager);
       assert.exists(serviceWorkersManager);

front_end/panels/application/StorageBucketsTreeElement.test.ts

@@ -111,7 +111,7 @@ describeWithMockConnection('StorageBucketsTreeElement', function() {
 
     const panel = Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     panel.markAsRoot();
-    panel.show(document.body);
+    renderElementIntoDOM(panel);
 
     const parentTreeElement = new Application.StorageBucketsTreeElement.StorageBucketsTreeParentElement(panel);
     const appendChildSpy = sinon.spy(parentTreeElement, 'appendChild');

front_end/panels/console/ConsoleView.test.ts

@@ -10,7 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import {findMenuItemWithLabel, getContextMenuForElement} from '../../testing/ContextMenuHelpers.js';
-import {dispatchPasteEvent} from '../../testing/DOMHelpers.js';
+import {dispatchPasteEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {expectCall, expectCalled} from '../../testing/ExpectStubCall.js';
 import {stubFileManager} from '../../testing/FileManagerHelpers.js';
@@ -37,7 +37,6 @@ describeWithMockConnection('ConsoleView', () => {
         consoleView.element.querySelector('devtools-toolbar')!.querySelectorAll('devtools-checkbox');
     if (!consoleSettingsCheckboxes) {
       assert.fail('No checkbox found in console settings');
-      return;
     }
     for (const checkbox of consoleSettingsCheckboxes) {
       assert.isTrue(checkbox.shadowRoot?.querySelector('.devtools-checkbox-text')?.hasAttribute('title'));
@@ -123,7 +122,7 @@ describeWithMockConnection('ConsoleView', () => {
       target = createTarget();
       SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
       consoleView.markAsRoot();
-      consoleView.show(document.body);
+      renderElementIntoDOM(consoleView);
     });
 
     it('adds messages', async () => {
@@ -162,7 +161,7 @@ describeWithMockConnection('ConsoleView', () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
     const anotherTarget = createTarget();
     consoleView.markAsRoot();
-    consoleView.show(document.body);
+    renderElementIntoDOM(consoleView);
 
     const consoleModel = target.model(SDK.ConsoleModel.ConsoleModel);
     assert.exists(consoleModel);
@@ -190,7 +189,7 @@ describeWithMockConnection('ConsoleView', () => {
       target = createTarget();
       SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
       consoleView.markAsRoot();
-      consoleView.show(document.body);
+      renderElementIntoDOM(consoleView);
     });
 
     it('shows', async () => {
@@ -244,7 +243,7 @@ describeWithMockConnection('ConsoleView', () => {
     const target = createTarget();
     SDK.TargetManager.TargetManager.instance().setScopeTarget(target);
     consoleView.markAsRoot();
-    consoleView.show(document.body);
+    renderElementIntoDOM(consoleView);
 
     const consoleModel = target.model(SDK.ConsoleModel.ConsoleModel);
     assert.exists(consoleModel);
@@ -270,7 +269,7 @@ describeWithMockConnection('ConsoleView', () => {
     sinon.assert.calledOnce(spy);
 
     // Continues updating the issue counter
-    consoleView.show(document.body);
+    renderElementIntoDOM(consoleView);
     issuesManager.dispatchEventToListeners(IssuesManager.IssuesManager.Events.ISSUES_COUNT_UPDATED);
     sinon.assert.calledTwice(spy);
   });

front_end/panels/coverage/CoverageView.test.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
+import {dispatchClickEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {activate, getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
@@ -112,8 +112,7 @@ describeWithMockConnection('CoverageView', () => {
   it('can handle back/forward cache navigations', async () => {
     const {startSpy, stopSpy, target} = setupTargetAndModels();
     const view = Coverage.CoverageView.CoverageView.instance();
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     assert.isTrue(isShowingLandingPage(view));
     assert.isFalse(isShowingResults(view));
     assert.isFalse(isShowingPrerenderPage(view));
@@ -155,8 +154,7 @@ describeWithMockConnection('CoverageView', () => {
   it('can handle prerender activations', async () => {
     const {startSpy, stopSpy} = setupTargetAndModels();
     const view = Coverage.CoverageView.CoverageView.instance();
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
     assert.isTrue(isShowingLandingPage(view));
     assert.isFalse(isShowingResults(view));
     assert.isFalse(isShowingPrerenderPage(view));

front_end/panels/elements/AccessibilityTreeView.test.ts

@@ -4,6 +4,7 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
@@ -27,8 +28,7 @@ describeWithMockConnection('AccessibilityTreeView', () => {
   const updatesUiOnEvent = (inScope: boolean) => async () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
     const view = new Elements.AccessibilityTreeView.AccessibilityTreeView(toggleButoon, treeComponent);
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     const model = target.model(SDK.AccessibilityModel.AccessibilityModel);
     const treeComponentDataSet = sinon.spy(treeComponent, 'data', ['set']);

front_end/panels/elements/ClassesPaneWidget.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -27,8 +28,7 @@ describeWithMockConnection('ClassesPaneWidget', () => {
   const updatesUiOnEvent = (inScope: boolean) => async () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
     view = new Elements.ClassesPaneWidget.ClassesPaneWidget();
-    view.markAsRoot();
-    view.show(document.body);
+    renderElementIntoDOM(view);
 
     const model = target.model(SDK.DOMModel.DOMModel);
     assert.exists(model);

front_end/panels/elements/ComputedStyleWidget.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 
@@ -66,8 +67,7 @@ describeWithMockConnection('ComputedStyleWidget', () => {
         node,
       });
       const computedStyleWidget = new Elements.ComputedStyleWidget.ComputedStyleWidget(computedStyleModel);
-      computedStyleWidget.markAsRoot();
-      computedStyleWidget.show(document.body);
+      renderElementIntoDOM(computedStyleWidget);
 
       return computedStyleWidget;
     }