Reland "Use shadow dom for Lighthouse panel"

This is a reland of commit 465796b

This CL restricts the shadow dom only to the `LighthouseStartView`
instead of the whole `LighthousePanel`, which led to the regression.

Original change's description:
> Use shadow dom for Lighthouse panel
>
> This CL changes the Lighthouse panel to make use of a top level shadow
> dom. Previously, styles from the Lighthouse panel were appended
> to the document's adoptedStyleSheets, and thus leaking to other panels.
>
> Bug: 372176188
> Change-Id: I0b9695cd86839e28ea4c83ef2ad6bb290797946a
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5953314
> Reviewed-by: Ergün Erdoğmuş <[email protected]>
> Commit-Queue: Kim-Anh Tran <[email protected]>

Bug: 372176188
Change-Id: I9bb842949b76d2f60ea3b60bb10238727ac4a55b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5966474
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Liviu Rau <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: ktran

front_end/panels/lighthouse/LighthouseStartView.ts

@@ -63,7 +63,7 @@ export class StartView extends UI.Widget.Widget {
   changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController, panel: LighthousePanel) {
-    super();
+    super(true /* useShadowDom */);
 
     this.controller = controller;
     this.panel = panel;

front_end/ui/legacy/Panel.ts

@@ -39,8 +39,8 @@ import {VBox} from './Widget.js';
 export class Panel extends VBox {
   protected panelName: string;
 
-  constructor(name: string) {
-    super();
+  constructor(name: string, useShadowDom?: boolean) {
+    super(useShadowDom);
 
     this.element.setAttribute('jslog', `${VisualLogging.panel().context(name).track({resize: true})}`);
     this.element.classList.add('panel');

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2741,6 +2741,7 @@ export const knownContextValues = new Set([
   'show-grid-areas',
   'show-grid-areas-true',
   'show-grid-line-labels',
+  'show-grid-line-labels-line-names',
   'show-grid-track-sizes',
   'show-grid-track-sizes-true',
   'show-html-comments',

test/e2e/BUILD.gn

@@ -35,6 +35,7 @@ node_ts_library("tests") {
     "media",
     "memory",
     "network",
+    "panels",
     "performance",
     "puppeteer",
     "quick_open",

test/e2e/panels/BUILD.gn

@@ -0,0 +1,14 @@
+# 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.
+
+import("../../../scripts/build/typescript/typescript.gni")
+
+node_ts_library("panels") {
+  sources = [ "panels_test.ts" ]
+
+  deps = [
+    "../../shared",
+    "../helpers",
+  ]
+}

test/e2e/panels/panels_test.ts

@@ -0,0 +1,32 @@
+// 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.
+
+import {assert} from 'chai';
+
+import {
+  getBrowserAndPages,
+  waitFor,
+} from '../../shared/helper.js';
+
+// Ideally we want to have all panels within this list,
+// but introducing shadow doms for all panels currently leads
+// to unwanted visual side effects.
+const PANEL_NAMES = [
+  'Lighthouse',
+];
+
+import {runCommandWithQuickOpen} from '../helpers/quick_open-helpers.js';
+
+describe('DevTools panels', function() {
+  PANEL_NAMES.forEach(panel => {
+    it(`${panel} doesn't increase number of adopted style sheets on the document`, async () => {
+      const {frontend} = getBrowserAndPages();
+      const previousNumStyleSheets = await frontend.evaluate(() => document.adoptedStyleSheets.length);
+      await runCommandWithQuickOpen(`Show ${panel}`);
+      await waitFor(`[aria-label="${panel}"]`);
+      const nextNumStyleSheets = await frontend.evaluate(() => document.adoptedStyleSheets.length);
+      assert.strictEqual(previousNumStyleSheets, nextNumStyleSheets);
+    });
+  });
+});