chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/sources/{components/BreakpointsView.test.ts → BreakpointsView.test.ts}

@@ -2,34 +2,34 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 * as Bindings from '../../../models/bindings/bindings.js';
-import * as Breakpoints from '../../../models/breakpoints/breakpoints.js';
-import * as TextUtils from '../../../models/text_utils/text_utils.js';
-import * as Workspace from '../../../models/workspace/workspace.js';
+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 * as Bindings from '../../models/bindings/bindings.js';
+import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import {
   assertElements,
   dispatchClickEvent,
   dispatchKeyDownEvent,
   renderElementIntoDOM,
-} from '../../../testing/DOMHelpers.js';
+} from '../../testing/DOMHelpers.js';
 import {
   createTarget,
   describeWithEnvironment,
-} from '../../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../../testing/MockConnection.js';
-import {MockProtocolBackend} from '../../../testing/MockScopeChain.js';
+} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {MockProtocolBackend} from '../../testing/MockScopeChain.js';
 import {
   createContentProviderUISourceCode,
   setupMockedUISourceCode,
-} from '../../../testing/UISourceCodeHelpers.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as UI from '../../../ui/legacy/legacy.js';
+} from '../../testing/UISourceCodeHelpers.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
-import * as SourcesComponents from './components.js';
+import * as Sources from './sources.js';
 
 const {urlString} = Platform.DevToolsPath;
 const DETAILS_SELECTOR = 'details';
@@ -132,8 +132,8 @@ async function setUpTestWithOneBreakpointLocation(
   ];
   const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
 
-  const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-      {forceNew: true, breakpointManager, settings});
+  const controller =
+      Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
   const data = await controller.getUpdatedBreakpointViewData();
 
   assert.lengthOf(data.groups, 1);
@@ -148,18 +148,19 @@ class MockRevealer<T> implements Common.Revealer.Revealer<T> {
   }
 }
 
-async function createAndInitializeBreakpointsView(): Promise<SourcesComponents.BreakpointsView.BreakpointsView> {
+async function createAndInitializeBreakpointsView(): Promise<Sources.BreakpointsView.BreakpointsView> {
   // Force creation of a new BreakpointsView singleton so that it gets correctly re-wired with
   // the current controller singleton (to pick up the latest breakpoint state).
-  const component = SourcesComponents.BreakpointsView.BreakpointsView.instance({forceNew: true});
+  const component = Sources.BreakpointsView.BreakpointsView.instance({forceNew: true});
   await RenderCoordinator.done();  // Wait until the initial rendering finishes.
   renderElementIntoDOM(component);
+  await component.updateComplete;
   return component;
 }
 
 async function renderNoBreakpoints({pauseOnUncaughtExceptions, pauseOnCaughtExceptions}:
                                        {pauseOnUncaughtExceptions: boolean, pauseOnCaughtExceptions: boolean}):
-    Promise<SourcesComponents.BreakpointsView.BreakpointsView> {
+    Promise<Sources.BreakpointsView.BreakpointsView> {
   const component = await createAndInitializeBreakpointsView();
 
   component.data = {
@@ -169,20 +170,21 @@ async function renderNoBreakpoints({pauseOnUncaughtExceptions, pauseOnCaughtExce
     groups: [],
   };
   await RenderCoordinator.done();
+  await component.updateComplete;
   return component;
 }
 
 async function renderSingleBreakpoint(
     type: SDK.DebuggerModel.BreakpointType = SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT,
     hoverText?: string): Promise<{
-  component: SourcesComponents.BreakpointsView.BreakpointsView,
-  data: SourcesComponents.BreakpointsView.BreakpointsViewData,
+  component: Sources.BreakpointsView.BreakpointsView,
+  data: Sources.BreakpointsView.BreakpointsViewData,
 }> {
   // Only provide a hover text if it's not a regular breakpoint.
   assert.isTrue(!hoverText || type !== SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT);
   const component = await createAndInitializeBreakpointsView();
 
-  const data: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+  const data: Sources.BreakpointsView.BreakpointsViewData = {
     breakpointsActive: true,
     pauseOnUncaughtExceptions: false,
     pauseOnCaughtExceptions: false,
@@ -198,7 +200,7 @@ async function renderSingleBreakpoint(
             location: '1',
             codeSnippet: 'const a = 0;',
             isHit: true,
-            status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+            status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
             type,
             hoverText,
           },
@@ -209,16 +211,17 @@ async function renderSingleBreakpoint(
 
   component.data = data;
   await RenderCoordinator.done();
+  await component.updateComplete;
   return {component, data};
 }
 
 async function renderMultipleBreakpoints(): Promise<{
-  component: SourcesComponents.BreakpointsView.BreakpointsView,
-  data: SourcesComponents.BreakpointsView.BreakpointsViewData,
+  component: Sources.BreakpointsView.BreakpointsView,
+  data: Sources.BreakpointsView.BreakpointsViewData,
 }> {
   const component = await createAndInitializeBreakpointsView();
 
-  const data: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+  const data: Sources.BreakpointsView.BreakpointsViewData = {
     breakpointsActive: true,
     pauseOnUncaughtExceptions: false,
     pauseOnCaughtExceptions: false,
@@ -235,7 +238,7 @@ async function renderMultipleBreakpoints(): Promise<{
             location: '234',
             codeSnippet: 'const a = x;',
             isHit: false,
-            status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+            status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
           },
           {
             id: '2',
@@ -243,7 +246,7 @@ async function renderMultipleBreakpoints(): Promise<{
             location: '3:3',
             codeSnippet: 'if (x > a) {',
             isHit: true,
-            status: SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED,
+            status: Sources.BreakpointsView.BreakpointStatus.DISABLED,
           },
         ],
       },
@@ -259,7 +262,7 @@ async function renderMultipleBreakpoints(): Promise<{
             location: '11',
             codeSnippet: 'const y;',
             isHit: false,
-            status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+            status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
           },
         ],
       },
@@ -275,7 +278,7 @@ async function renderMultipleBreakpoints(): Promise<{
             location: '3',
             codeSnippet: 'if (a == 0) {',
             isHit: false,
-            status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+            status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
           },
         ],
       },
@@ -283,37 +286,37 @@ async function renderMultipleBreakpoints(): Promise<{
   };
   component.data = data;
   await RenderCoordinator.done();
+  await component.updateComplete;
   return {component, data};
 }
 
-function extractBreakpointItems(data: SourcesComponents.BreakpointsView.BreakpointsViewData):
-    SourcesComponents.BreakpointsView.BreakpointItem[] {
+function extractBreakpointItems(data: Sources.BreakpointsView.BreakpointsViewData):
+    Sources.BreakpointsView.BreakpointItem[] {
   const breakpointItems = data.groups.flatMap(group => group.breakpointItems);
   assert.isAbove(breakpointItems.length, 0);
   return breakpointItems;
 }
 
 function checkCodeSnippet(
-    renderedBreakpointItem: HTMLDivElement, breakpointItem: SourcesComponents.BreakpointsView.BreakpointItem): void {
+    renderedBreakpointItem: HTMLDivElement, breakpointItem: Sources.BreakpointsView.BreakpointItem): void {
   const snippetElement = renderedBreakpointItem.querySelector(CODE_SNIPPET_SELECTOR);
   assert.instanceOf(snippetElement, HTMLSpanElement);
   assert.strictEqual(snippetElement.textContent, breakpointItem.codeSnippet);
 }
 
-function checkCheckboxState(
-    checkbox: HTMLInputElement, breakpointItem: SourcesComponents.BreakpointsView.BreakpointItem): void {
+function checkCheckboxState(checkbox: HTMLInputElement, breakpointItem: Sources.BreakpointsView.BreakpointItem): void {
   const checked = checkbox.checked;
   const indeterminate = checkbox.indeterminate;
-  if (breakpointItem.status === SourcesComponents.BreakpointsView.BreakpointStatus.INDETERMINATE) {
+  if (breakpointItem.status === Sources.BreakpointsView.BreakpointStatus.INDETERMINATE) {
     assert.isTrue(indeterminate);
   } else {
     assert.isFalse(indeterminate);
-    assert.strictEqual((breakpointItem.status === SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED), checked);
+    assert.strictEqual((breakpointItem.status === Sources.BreakpointsView.BreakpointStatus.ENABLED), checked);
   }
 }
 
 function checkGroupNames(
-    renderedGroupElements: Element[], breakpointGroups: SourcesComponents.BreakpointsView.BreakpointGroup[]): void {
+    renderedGroupElements: Element[], breakpointGroups: Sources.BreakpointsView.BreakpointGroup[]): void {
   assert.lengthOf(renderedGroupElements, breakpointGroups.length);
   for (let i = 0; i < renderedGroupElements.length; ++i) {
     const renderedGroup = renderedGroupElements[i];
@@ -324,17 +327,17 @@ function checkGroupNames(
   }
 }
 
-function hover(component: SourcesComponents.BreakpointsView.BreakpointsView, selector: string): Promise<void> {
-  assert.isNotNull(component.shadowRoot);
+function hover(component: Sources.BreakpointsView.BreakpointsView, selector: string): Promise<void> {
+  assert.isNotNull(component.contentElement);
   // Dispatch a mouse over.
-  component.shadowRoot.querySelector(selector)?.dispatchEvent(new Event('mouseover'));
+  component.contentElement.querySelector(selector)?.dispatchEvent(new Event('mouseover'));
   // Wait until the re-rendering has happened.
   return RenderCoordinator.done();
 }
 
 describeWithEnvironment('BreakpointsSidebarController', () => {
   after(() => {
-    SourcesComponents.BreakpointsView.BreakpointsSidebarController.removeInstance();
+    Sources.BreakpointsView.BreakpointsSidebarController.removeInstance();
   });
 
   it('can remove a breakpoint', async () => {
@@ -342,18 +345,17 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
     const breakpoint = location.breakpoint as sinon.SinonStubbedInstance<Breakpoints.BreakpointManager.Breakpoint>;
     const breakpointItem = groups[0].breakpointItems[0];
 
-    SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointsRemoved([breakpointItem]);
+    Sources.BreakpointsView.BreakpointsSidebarController.instance().breakpointsRemoved([breakpointItem]);
     assert.isTrue(breakpoint.remove.calledOnceWith(false));
   });
 
   it('changes breakpoint state', async () => {
     const {groups, location} = await setUpTestWithOneBreakpointLocation();
     const breakpointItem = groups[0].breakpointItems[0];
-    assert.strictEqual(breakpointItem.status, SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED);
+    assert.strictEqual(breakpointItem.status, Sources.BreakpointsView.BreakpointStatus.ENABLED);
 
     const breakpoint = location.breakpoint as sinon.SinonStubbedInstance<Breakpoints.BreakpointManager.Breakpoint>;
-    SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointStateChanged(
-        breakpointItem, false);
+    Sources.BreakpointsView.BreakpointsSidebarController.instance().breakpointStateChanged(breakpointItem, false);
     sinon.assert.calledWith(breakpoint.setEnabled, false);
   });
 
@@ -372,7 +374,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       },
     });
 
-    await SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance().jumpToSource(breakpointItem);
+    await Sources.BreakpointsView.BreakpointsSidebarController.instance().jumpToSource(breakpointItem);
     assert.isTrue(revealer.reveal.calledOnceWith(uiLocation));
   });
 
@@ -391,7 +393,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       },
     });
 
-    await SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointEdited(
+    await Sources.BreakpointsView.BreakpointsSidebarController.instance().breakpointEdited(
         breakpointItem, false /* editButtonClicked */);
     assert.isTrue(revealer.reveal.calledOnceWith(location));
   });
@@ -404,12 +406,12 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actual = await controller.getUpdatedBreakpointViewData();
       const createExpectedBreakpointGroups = (testData: LocationTestData) => {
-        const status = testData.enabled ? SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED :
-                                          SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED;
+        const status = testData.enabled ? Sources.BreakpointsView.BreakpointStatus.ENABLED :
+                                          Sources.BreakpointsView.BreakpointStatus.DISABLED;
         let type = SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT;
 
         if (testData.condition) {
@@ -438,7 +440,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
           ],
         };
       };
-      const expected: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+      const expected: Sources.BreakpointsView.BreakpointsViewData = {
         breakpointsActive: true,
         pauseOnUncaughtExceptions: false,
         pauseOnCaughtExceptions: false,
@@ -449,8 +451,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
 
     it('respects the breakpointsActive setting', async () => {
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata([]);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       settings.moduleSetting('breakpoints-active').set(true);
       let data = await controller.getUpdatedBreakpointViewData();
       assert.isTrue(data.breakpointsActive);
@@ -466,8 +468,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       breakpointManager.supportsConditionalBreakpoints.returns(false);
       for (const group of (await controller.getUpdatedBreakpointViewData()).groups) {
         assert.isFalse(group.editable);
@@ -485,8 +487,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 2);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
@@ -513,7 +515,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
          ];
 
          const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-         const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
+         const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance(
              {forceNew: true, breakpointManager, settings});
          const actualViewData = await controller.getUpdatedBreakpointViewData();
          assert.lengthOf(actualViewData.groups, 1);
@@ -529,8 +531,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 2);
@@ -545,8 +547,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 2);
       const names = actualViewData.groups.map(group => group.name);
@@ -560,8 +562,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
@@ -571,14 +573,14 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       const {groups} =
           await setUpTestWithOneBreakpointLocation({file: '', lineNumber: 0, columnNumber: 0, enabled: true});
       const breakpointItem = groups[0].breakpointItems[0];
-      assert.strictEqual(breakpointItem.status, SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED);
+      assert.strictEqual(breakpointItem.status, Sources.BreakpointsView.BreakpointStatus.ENABLED);
     });
 
     it('correctly extracts the enabled state', async () => {
       const {groups} =
           await setUpTestWithOneBreakpointLocation({file: '', lineNumber: 0, columnNumber: 0, enabled: false});
       const breakpointItem = groups[0].breakpointItems[0];
-      assert.strictEqual(breakpointItem.status, SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED);
+      assert.strictEqual(breakpointItem.status, Sources.BreakpointsView.BreakpointStatus.DISABLED);
     });
 
     it('correctly extracts the enabled state', async () => {
@@ -588,14 +590,13 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
       assert.strictEqual(
-          actualViewData.groups[0].breakpointItems[0].status,
-          SourcesComponents.BreakpointsView.BreakpointStatus.INDETERMINATE);
+          actualViewData.groups[0].breakpointItems[0].status, Sources.BreakpointsView.BreakpointStatus.INDETERMINATE);
     });
 
     it('correctly extracts the disabled state', async () => {
@@ -612,14 +613,13 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
       assert.strictEqual(
-          actualViewData.groups[0].breakpointItems[0].status,
-          SourcesComponents.BreakpointsView.BreakpointStatus.INDETERMINATE);
+          actualViewData.groups[0].breakpointItems[0].status, Sources.BreakpointsView.BreakpointStatus.INDETERMINATE);
     });
 
     it('correctly extracts conditional breakpoints', async () => {
@@ -630,8 +630,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
@@ -648,8 +648,8 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
       ];
 
       const {breakpointManager, settings} = createStubBreakpointManagerAndSettingsWithMockdata(testData);
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-          {forceNew: true, breakpointManager, settings});
+      const controller =
+          Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
       const actualViewData = await controller.getUpdatedBreakpointViewData();
       assert.lengthOf(actualViewData.groups, 1);
       assert.lengthOf(actualViewData.groups[0].breakpointItems, 1);
@@ -690,7 +690,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
         // A new controller is created and initialized with the expanded settings.
         {const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance();
          const settings = Common.Settings.Settings.instance();
-         const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance({
+         const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance({
            forceNew: true,
            breakpointManager,
            settings,
@@ -709,7 +709,7 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
         // A new controller is created and initialized with the expanded settings.
         {
 
-            const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance({
+            const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance({
               forceNew: true,
               breakpointManager: Breakpoints.BreakpointManager.BreakpointManager.instance(),
               settings: Common.Settings.Settings.instance(),
@@ -728,10 +728,12 @@ describeWithMockConnection('BreakpointsSidebarController', () => {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
     Breakpoints.BreakpointManager.BreakpointManager.instance(
         {forceNew: true, targetManager, workspace, debuggerWorkspaceBinding});
@@ -746,14 +748,13 @@ describeWithMockConnection('BreakpointsSidebarController', () => {
             Breakpoints.BreakpointManager.BreakpointOrigin.USER_ACTION,
           ];
 
-  // Flaky
-  it.skip('[crbug.com/345456307] auto-expands if a user adds a new  breakpoint', async () => {
+  it('auto-expands if a user adds a new  breakpoint', async () => {
     const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance();
     const settings = Common.Settings.Settings.instance();
     const {uiSourceCode, project} =
         createContentProviderUISourceCode({url: urlString`test.js`, mimeType: 'text/javascript'});
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-        {forceNew: true, breakpointManager, settings});
+    const controller =
+        Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
 
     // Add one breakpoint and collapse the tree.
     const b1 = await breakpointManager.setBreakpoint(uiSourceCode, 0, 0, ...DEFAULT_BREAKPOINT);
@@ -787,8 +788,8 @@ describeWithMockConnection('BreakpointsSidebarController', () => {
     const settings = Common.Settings.Settings.instance();
     const {uiSourceCode, project} =
         createContentProviderUISourceCode({url: urlString`test.js`, mimeType: 'text/javascript'});
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-        {forceNew: true, breakpointManager, settings});
+    const controller =
+        Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
 
     // Add one breakpoint and collapse the tree.
     const b1 = await breakpointManager.setBreakpoint(uiSourceCode, 0, 0, ...DEFAULT_BREAKPOINT);
@@ -858,7 +859,7 @@ describeWithMockConnection('BreakpointsSidebarController', () => {
     assert.exists(b1);
     await responderPromise;
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance(
         {forceNew: true, breakpointManager, settings: Common.Settings.Settings.instance()});
     controller.expandedStateChanged(uiSourceCode.url(), false /* expanded */);
 
@@ -892,8 +893,8 @@ describeWithMockConnection('BreakpointsSidebarController', () => {
   it('changes pause on exception state', async () => {
     const {breakpointManager, settings} = createStubBreakpointManagerAndSettings();
     breakpointManager.allBreakpointLocations.returns([]);
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance(
-        {forceNew: true, breakpointManager, settings});
+    const controller =
+        Sources.BreakpointsView.BreakpointsSidebarController.instance({forceNew: true, breakpointManager, settings});
     for (const pauseOnUncaughtExceptions of [true, false]) {
       for (const pauseOnCaughtExceptions of [true, false]) {
         controller.setPauseOnUncaughtExceptions(pauseOnUncaughtExceptions);
@@ -914,10 +915,12 @@ describeWithMockConnection('BreakpointsView', () => {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
     Breakpoints.BreakpointManager.BreakpointManager.instance(
         {forceNew: true, targetManager, workspace, debuggerWorkspaceBinding});
@@ -925,12 +928,12 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('correctly expands breakpoint groups', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     const expandedGroups = data.groups.filter(group => group.expanded);
     assert.isAbove(expandedGroups.length, 0);
 
-    const renderedExpandedGroups = Array.from(component.shadowRoot.querySelectorAll(EXPANDED_GROUPS_SELECTOR));
+    const renderedExpandedGroups = Array.from(component.contentElement.querySelectorAll(EXPANDED_GROUPS_SELECTOR));
     assert.lengthOf(renderedExpandedGroups, expandedGroups.length);
 
     checkGroupNames(renderedExpandedGroups, expandedGroups);
@@ -938,21 +941,21 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('correctly collapses breakpoint groups', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     const collapsedGroups = data.groups.filter(group => !group.expanded);
     assert.isAbove(collapsedGroups.length, 0);
 
-    const renderedCollapsedGroups = Array.from(component.shadowRoot.querySelectorAll(COLLAPSED_GROUPS_SELECTOR));
+    const renderedCollapsedGroups = Array.from(component.contentElement.querySelectorAll(COLLAPSED_GROUPS_SELECTOR));
 
     checkGroupNames(renderedCollapsedGroups, collapsedGroups);
   });
 
   it('renders the group names', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedGroupNames = component.shadowRoot.querySelectorAll(GROUP_NAME_SELECTOR);
+    const renderedGroupNames = component.contentElement.querySelectorAll(GROUP_NAME_SELECTOR);
     assertElements(renderedGroupNames, HTMLSpanElement);
 
     const expectedNames = data.groups.flatMap(group => group.name);
@@ -965,9 +968,9 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('renders the breakpoints with their checkboxes', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedBreakpointItems = Array.from(component.shadowRoot.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
+    const renderedBreakpointItems = Array.from(component.contentElement.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
 
     const breakpointItems = extractBreakpointItems(data);
     assert.lengthOf(renderedBreakpointItems, breakpointItems.length);
@@ -984,9 +987,9 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('renders breakpoints with their code snippet', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedBreakpointItems = Array.from(component.shadowRoot.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
+    const renderedBreakpointItems = Array.from(component.contentElement.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
 
     const breakpointItems = extractBreakpointItems(data);
     assert.lengthOf(renderedBreakpointItems, breakpointItems.length);
@@ -1013,7 +1016,7 @@ describeWithMockConnection('BreakpointsView', () => {
           location: '234',
           codeSnippet: 'const a = x;',
           isHit: false,
-          status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+          status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
         },
       ],
     };
@@ -1025,7 +1028,7 @@ describeWithMockConnection('BreakpointsView', () => {
     const group2 = {...groupTemplate};
     group2.url = urlString`https://google.com/src/index.js`;
 
-    const data: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+    const data: Sources.BreakpointsView.BreakpointsViewData = {
       breakpointsActive: true,
       pauseOnUncaughtExceptions: false,
       pauseOnCaughtExceptions: false,
@@ -1036,9 +1039,10 @@ describeWithMockConnection('BreakpointsView', () => {
     };
     component.data = data;
     await RenderCoordinator.done();
+    await component.updateComplete;
 
-    assert.isNotNull(component.shadowRoot);
-    const groupSummaries = Array.from(component.shadowRoot.querySelectorAll(SUMMARY_SELECTOR));
+    assert.isNotNull(component.contentElement);
+    const groupSummaries = Array.from(component.contentElement.querySelectorAll(SUMMARY_SELECTOR));
     const differentiatingPath = groupSummaries.map(group => {
       const differentiatorElement = group.querySelector(GROUP_DIFFERENTIATOR_SELECTOR);
       assert.instanceOf(differentiatorElement, HTMLSpanElement);
@@ -1049,9 +1053,9 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('renders breakpoints with a differentiating path', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedBreakpointItems = Array.from(component.shadowRoot.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
+    const renderedBreakpointItems = Array.from(component.contentElement.querySelectorAll(BREAKPOINT_ITEM_SELECTOR));
 
     const breakpointItems = extractBreakpointItems(data);
     assert.lengthOf(renderedBreakpointItems, breakpointItems.length);
@@ -1072,16 +1076,16 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('triggers an event on clicking the checkbox of a breakpoint', async () => {
     const {component, data} = await renderSingleBreakpoint();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedItem = component.shadowRoot.querySelector(BREAKPOINT_ITEM_SELECTOR);
+    const renderedItem = component.contentElement.querySelector(BREAKPOINT_ITEM_SELECTOR);
     assert.instanceOf(renderedItem, HTMLDivElement);
 
     const checkbox = renderedItem.querySelector('input');
     assert.instanceOf(checkbox, HTMLInputElement);
     const checked = checkbox.checked;
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const breakpointStateChanged = sinon.stub(controller, 'breakpointStateChanged');
     checkbox.click();
 
@@ -1090,12 +1094,12 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('triggers an event on clicking on the snippet text', async () => {
     const {component, data} = await renderSingleBreakpoint();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const snippet = component.shadowRoot.querySelector(CODE_SNIPPET_SELECTOR);
+    const snippet = component.contentElement.querySelector(CODE_SNIPPET_SELECTOR);
     assert.instanceOf(snippet, HTMLSpanElement);
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const jumpToSource = sinon.stub(controller, 'jumpToSource');
     snippet.click();
 
@@ -1104,14 +1108,14 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('triggers an event on expanding/unexpanding', async () => {
     const {component, data} = await renderSingleBreakpoint();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedGroupName = component.shadowRoot.querySelector(GROUP_NAME_SELECTOR);
+    const renderedGroupName = component.contentElement.querySelector(GROUP_NAME_SELECTOR);
     assert.instanceOf(renderedGroupName, HTMLSpanElement);
 
     const expandedInitialValue = data.groups[0].expanded;
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const expandedStateChanged = sinon.stub(controller, 'expandedStateChanged');
     renderedGroupName.click();
 
@@ -1123,22 +1127,22 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('highlights breakpoint if it is set to be hit', async () => {
     const {component} = await renderSingleBreakpoint();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
-    const renderedBreakpointItem = component.shadowRoot.querySelector(HIT_BREAKPOINT_SELECTOR);
+    const renderedBreakpointItem = component.contentElement.querySelector(HIT_BREAKPOINT_SELECTOR);
     assert.instanceOf(renderedBreakpointItem, HTMLDivElement);
   });
 
   it('triggers an event on removing file breakpoints', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     await hover(component, SUMMARY_SELECTOR);
 
-    const removeFileBreakpointsButton = component.shadowRoot.querySelector(REMOVE_FILE_BREAKPOINTS_SELECTOR);
+    const removeFileBreakpointsButton = component.contentElement.querySelector(REMOVE_FILE_BREAKPOINTS_SELECTOR);
     assert.instanceOf(removeFileBreakpointsButton, HTMLButtonElement);
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const breakpointsRemoved = sinon.stub(controller, 'breakpointsRemoved');
     removeFileBreakpointsButton.click();
     // await new Promise(resolve => setTimeout(resolve, 0));
@@ -1147,14 +1151,14 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('triggers an event on removing one breakpoint', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-    const removeFileBreakpointsButton = component.shadowRoot.querySelector(REMOVE_SINGLE_BREAKPOINT_SELECTOR);
+    const removeFileBreakpointsButton = component.contentElement.querySelector(REMOVE_SINGLE_BREAKPOINT_SELECTOR);
     assert.instanceOf(removeFileBreakpointsButton, HTMLButtonElement);
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const breakpointsRemoved = sinon.stub(controller, 'breakpointsRemoved');
     removeFileBreakpointsButton.click();
     // await new Promise(resolve => setTimeout(resolve, 0));
@@ -1164,14 +1168,14 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('triggers an event on editing one breakpoint', async () => {
     const {component, data} = await renderMultipleBreakpoints();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-    const editBreakpointButton = component.shadowRoot.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
+    const editBreakpointButton = component.contentElement.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
     assert.instanceOf(editBreakpointButton, HTMLButtonElement);
 
-    const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+    const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
     const breakpointEdited = sinon.stub(controller, 'breakpointEdited');
     editBreakpointButton.click();
     // await new Promise(resolve => setTimeout(resolve, 0));
@@ -1180,11 +1184,11 @@ describeWithMockConnection('BreakpointsView', () => {
 
   it('shows a tooltip with edit condition on regular breakpoints', async () => {
     const {component} = await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT);
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-    const editBreakpointButton = component.shadowRoot.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
+    const editBreakpointButton = component.contentElement.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
     assert.instanceOf(editBreakpointButton, HTMLButtonElement);
 
     assert.strictEqual(editBreakpointButton.title, 'Edit condition');
@@ -1194,7 +1198,7 @@ describeWithMockConnection('BreakpointsView', () => {
     async function waitForCheckboxToggledEventsWithCheckedUpdate(numBreakpointItems: number, checked: boolean) {
       return await new Promise<void>(resolve => {
         let numCheckboxToggledEvents = 0;
-        const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+        const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
         sinon.stub(controller, 'breakpointStateChanged').callsFake((_, checkedArg) => {
           assert.strictEqual(checkedArg, checked);
           ++numCheckboxToggledEvents;
@@ -1208,14 +1212,15 @@ describeWithMockConnection('BreakpointsView', () => {
       const {component, data} = await renderMultipleBreakpoints();
 
       // Make sure that at least one breakpoint is enabled.
-      data.groups[0].breakpointItems[0].status = SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED;
+      data.groups[0].breakpointItems[0].status = Sources.BreakpointsView.BreakpointStatus.ENABLED;
       component.data = data;
       await RenderCoordinator.done();
+      await component.updateComplete;
 
       await hover(component, SUMMARY_SELECTOR);
 
-      assert.isNotNull(component.shadowRoot);
-      const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
+      assert.isNotNull(component.contentElement);
+      const firstGroupSummary = component.contentElement.querySelector(SUMMARY_SELECTOR);
       assert.exists(firstGroupSummary);
       const groupCheckbox = firstGroupSummary.querySelector('input');
       assert.instanceOf(groupCheckbox, HTMLInputElement);
@@ -1229,16 +1234,17 @@ describeWithMockConnection('BreakpointsView', () => {
       // Make sure that all breakpoints are disabled.
       const breakpointItems = data.groups[0].breakpointItems;
       for (let i = 0; i < breakpointItems.length; ++i) {
-        breakpointItems[i].status = SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED;
+        breakpointItems[i].status = Sources.BreakpointsView.BreakpointStatus.DISABLED;
       }
 
       component.data = data;
       await RenderCoordinator.done();
+      await component.updateComplete;
 
       await hover(component, SUMMARY_SELECTOR);
 
-      assert.isNotNull(component.shadowRoot);
-      const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
+      assert.isNotNull(component.contentElement);
+      const firstGroupSummary = component.contentElement.querySelector(SUMMARY_SELECTOR);
       assert.exists(firstGroupSummary);
       const groupCheckbox = firstGroupSummary.querySelector('input');
       assert.instanceOf(groupCheckbox, HTMLInputElement);
@@ -1254,16 +1260,17 @@ describeWithMockConnection('BreakpointsView', () => {
 
       // Make sure that all breakpoints are enabled.
       for (let i = 0; i < numBreakpointItems; ++i) {
-        data.groups[0].breakpointItems[i].status = SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED;
+        data.groups[0].breakpointItems[i].status = Sources.BreakpointsView.BreakpointStatus.ENABLED;
       }
       component.data = data;
       await RenderCoordinator.done();
+      await component.updateComplete;
 
       await hover(component, SUMMARY_SELECTOR);
 
       // Uncheck the group checkbox.
-      assert.isNotNull(component.shadowRoot);
-      const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
+      assert.isNotNull(component.contentElement);
+      const firstGroupSummary = component.contentElement.querySelector(SUMMARY_SELECTOR);
       assert.exists(firstGroupSummary);
       const groupCheckbox = firstGroupSummary.querySelector('input');
       assert.instanceOf(groupCheckbox, HTMLInputElement);
@@ -1283,16 +1290,17 @@ describeWithMockConnection('BreakpointsView', () => {
 
       // Make sure that all breakpoints are disabled.
       for (let i = 0; i < numBreakpointItems; ++i) {
-        data.groups[0].breakpointItems[i].status = SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED;
+        data.groups[0].breakpointItems[i].status = Sources.BreakpointsView.BreakpointStatus.DISABLED;
       }
       component.data = data;
       await RenderCoordinator.done();
+      await component.updateComplete;
 
       await hover(component, SUMMARY_SELECTOR);
 
       // Uncheck the group checkbox.
-      assert.isNotNull(component.shadowRoot);
-      const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
+      assert.isNotNull(component.contentElement);
+      const firstGroupSummary = component.contentElement.querySelector(SUMMARY_SELECTOR);
       assert.exists(firstGroupSummary);
       const groupCheckbox = firstGroupSummary.querySelector('input');
       assert.instanceOf(groupCheckbox, HTMLInputElement);
@@ -1308,7 +1316,7 @@ describeWithMockConnection('BreakpointsView', () => {
   it('only renders edit button for breakpoints in editable groups', async () => {
     const component = await createAndInitializeBreakpointsView();
 
-    const data: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+    const data: Sources.BreakpointsView.BreakpointsViewData = {
       breakpointsActive: true,
       pauseOnUncaughtExceptions: false,
       pauseOnCaughtExceptions: false,
@@ -1324,7 +1332,7 @@ describeWithMockConnection('BreakpointsView', () => {
               location: '1',
               codeSnippet: 'const a = 0;',
               isHit: true,
-              status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+              status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
               type: SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT,
             },
           ],
@@ -1334,18 +1342,18 @@ describeWithMockConnection('BreakpointsView', () => {
 
     component.data = data;
     await RenderCoordinator.done();
-    assert.isNotNull(component.shadowRoot);
+    assert.isNotNull(component.contentElement);
 
     await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-    const editBreakpointButton = component.shadowRoot.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
+    const editBreakpointButton = component.contentElement.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
     assert.isNull(editBreakpointButton);
   });
 
   it('initializes data from the controller on construction', async () => {
     await setUpTestWithOneBreakpointLocation();
     const component = await createAndInitializeBreakpointsView();
-    const renderedGroupName = component.shadowRoot?.querySelector(GROUP_NAME_SELECTOR);
+    const renderedGroupName = component.contentElement?.querySelector(GROUP_NAME_SELECTOR);
     assert.strictEqual(renderedGroupName?.textContent, HELLO_JS_FILE);
   });
 
@@ -1355,7 +1363,7 @@ describeWithMockConnection('BreakpointsView', () => {
     it('are rendered', async () => {
       const {component} =
           await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT, breakpointDetails);
-      const breakpointItem = component.shadowRoot?.querySelector(BREAKPOINT_ITEM_SELECTOR);
+      const breakpointItem = component.contentElement?.querySelector(BREAKPOINT_ITEM_SELECTOR);
       assert.exists(breakpointItem);
       assert.instanceOf(breakpointItem, HTMLDivElement);
       assert.isTrue(breakpointItem.classList.contains('conditional-breakpoint'));
@@ -1364,7 +1372,7 @@ describeWithMockConnection('BreakpointsView', () => {
     it('show a tooltip', async () => {
       const {component} =
           await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT, breakpointDetails);
-      const codeSnippet = component.shadowRoot?.querySelector(CODE_SNIPPET_SELECTOR);
+      const codeSnippet = component.contentElement?.querySelector(CODE_SNIPPET_SELECTOR);
       assert.exists(codeSnippet);
       assert.instanceOf(codeSnippet, HTMLSpanElement);
       assert.strictEqual(codeSnippet.title, `Condition: ${breakpointDetails}`);
@@ -1373,11 +1381,11 @@ describeWithMockConnection('BreakpointsView', () => {
     it('show a tooltip on editing the condition', async () => {
       const {component} =
           await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT, breakpointDetails);
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
       await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-      const editBreakpointButton = component.shadowRoot.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
+      const editBreakpointButton = component.contentElement.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
       assert.instanceOf(editBreakpointButton, HTMLButtonElement);
 
       assert.strictEqual(editBreakpointButton.title, 'Edit condition');
@@ -1389,7 +1397,7 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('are rendered', async () => {
       const {component} = await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.LOGPOINT, breakpointDetails);
-      const breakpointItem = component.shadowRoot?.querySelector(BREAKPOINT_ITEM_SELECTOR);
+      const breakpointItem = component.contentElement?.querySelector(BREAKPOINT_ITEM_SELECTOR);
       assert.exists(breakpointItem);
       assert.instanceOf(breakpointItem, HTMLDivElement);
       assert.isTrue(breakpointItem.classList.contains('logpoint'));
@@ -1397,7 +1405,7 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('show a tooltip', async () => {
       const {component} = await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.LOGPOINT, breakpointDetails);
-      const codeSnippet = component.shadowRoot?.querySelector(CODE_SNIPPET_SELECTOR);
+      const codeSnippet = component.contentElement?.querySelector(CODE_SNIPPET_SELECTOR);
       assert.exists(codeSnippet);
       assert.instanceOf(codeSnippet, HTMLSpanElement);
       assert.strictEqual(codeSnippet.title, `Logpoint: ${breakpointDetails}`);
@@ -1405,11 +1413,11 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('show a tooltip on editing the logpoint', async () => {
       const {component} = await renderSingleBreakpoint(SDK.DebuggerModel.BreakpointType.LOGPOINT, breakpointDetails);
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
       await hover(component, BREAKPOINT_ITEM_SELECTOR);
 
-      const editBreakpointButton = component.shadowRoot.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
+      const editBreakpointButton = component.contentElement.querySelector(EDIT_SINGLE_BREAKPOINT_SELECTOR);
       assert.instanceOf(editBreakpointButton, HTMLButtonElement);
 
       assert.strictEqual(editBreakpointButton.title, 'Edit logpoint');
@@ -1419,16 +1427,17 @@ describeWithMockConnection('BreakpointsView', () => {
   describe('pause on exceptions', () => {
     it('state is rendered correctly when disabled', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: false, pauseOnCaughtExceptions: false});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const pauseOnUncaughtExceptionsItem = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnUncaughtExceptionsItem =
+          component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnUncaughtExceptionsItem);
 
       const pauseOnUncaughtExceptionsCheckbox = pauseOnUncaughtExceptionsItem.querySelector('input');
       assert.instanceOf(pauseOnUncaughtExceptionsCheckbox, HTMLInputElement);
       assert.isFalse(pauseOnUncaughtExceptionsCheckbox.checked);
 
-      const pauseOnCaughtExceptionsItem = component.shadowRoot?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnCaughtExceptionsItem = component.contentElement?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnCaughtExceptionsItem);
 
       const pauseOnCaughtExceptionsCheckbox = pauseOnUncaughtExceptionsItem.querySelector('input');
@@ -1438,9 +1447,10 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('state is rendered correctly when pausing on uncaught exceptions', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: true, pauseOnCaughtExceptions: false});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const pauseOnUncaughtExceptionsItem = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnUncaughtExceptionsItem =
+          component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnUncaughtExceptionsItem);
 
       const pauseOnUncaughtExceptionsCheckbox = pauseOnUncaughtExceptionsItem.querySelector('input');
@@ -1448,7 +1458,7 @@ describeWithMockConnection('BreakpointsView', () => {
       assert.instanceOf(pauseOnUncaughtExceptionsCheckbox, HTMLInputElement);
       assert.isTrue(pauseOnUncaughtExceptionsCheckbox.checked);
 
-      const pauseOnCaughtExceptionsItem = component.shadowRoot?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnCaughtExceptionsItem = component.contentElement?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnCaughtExceptionsItem);
 
       const pauseOnCaughtExceptionsCheckbox = pauseOnCaughtExceptionsItem.querySelector('input');
@@ -1459,9 +1469,10 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('state is rendered correctly when pausing on all exceptions', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: true, pauseOnCaughtExceptions: true});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const pauseOnUncaughtExceptionsItem = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnUncaughtExceptionsItem =
+          component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnUncaughtExceptionsItem);
 
       const pauseOnUncaughtExceptionsCheckbox = pauseOnUncaughtExceptionsItem.querySelector('input');
@@ -1469,7 +1480,7 @@ describeWithMockConnection('BreakpointsView', () => {
       assert.instanceOf(pauseOnUncaughtExceptionsCheckbox, HTMLInputElement);
       assert.isTrue(pauseOnUncaughtExceptionsCheckbox.checked);
 
-      const pauseOnCaughtExceptionsItem = component.shadowRoot?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnCaughtExceptionsItem = component.contentElement?.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(pauseOnCaughtExceptionsItem);
 
       const pauseOnCaughtExceptionsCheckbox = pauseOnCaughtExceptionsItem.querySelector('input');
@@ -1480,16 +1491,16 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('triggers an event when disabling pausing on all exceptions', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: true, pauseOnCaughtExceptions: false});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const item = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const item = component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(item);
 
       const checkbox = item.querySelector('input');
       assert.instanceOf(checkbox, HTMLInputElement);
       const {checked} = checkbox;
 
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+      const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
       const setPauseOnUncaughtExceptions = sinon.stub(controller, 'setPauseOnUncaughtExceptions');
 
       checkbox.click();
@@ -1499,16 +1510,16 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('triggers an event when enabling pausing on caught exceptions', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: true, pauseOnCaughtExceptions: false});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const item = component.shadowRoot.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+      const item = component.contentElement.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(item);
 
       const checkbox = item.querySelector('input');
       assert.instanceOf(checkbox, HTMLInputElement);
       const {checked} = checkbox;
 
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+      const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
       const setPauseOnCaughtExceptions = sinon.stub(controller, 'setPauseOnCaughtExceptions');
 
       checkbox.click();
@@ -1518,16 +1529,16 @@ describeWithMockConnection('BreakpointsView', () => {
 
     it('triggers an event when enabling pausing on uncaught exceptions', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: false, pauseOnCaughtExceptions: true});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const item = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const item = component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.exists(item);
 
       const checkbox = item.querySelector('input');
       assert.instanceOf(checkbox, HTMLInputElement);
       const {checked} = checkbox;
 
-      const controller = SourcesComponents.BreakpointsView.BreakpointsSidebarController.instance();
+      const controller = Sources.BreakpointsView.BreakpointsSidebarController.instance();
       const setPauseOnUncaughtExceptions = sinon.stub(controller, 'setPauseOnUncaughtExceptions');
 
       checkbox.click();
@@ -1539,12 +1550,12 @@ describeWithMockConnection('BreakpointsView', () => {
   describe('navigating with keyboard', () => {
     // One expanded group with 2 breakpoints, and one collapsed with 2 breakpoints.
     async function renderBreakpointsForKeyboardNavigation(): Promise<{
-      component: SourcesComponents.BreakpointsView.BreakpointsView,
-      data: SourcesComponents.BreakpointsView.BreakpointsViewData,
+      component: Sources.BreakpointsView.BreakpointsView,
+      data: Sources.BreakpointsView.BreakpointsViewData,
     }> {
       const component = await createAndInitializeBreakpointsView();
 
-      const data: SourcesComponents.BreakpointsView.BreakpointsViewData = {
+      const data: Sources.BreakpointsView.BreakpointsViewData = {
         breakpointsActive: true,
         pauseOnUncaughtExceptions: false,
         pauseOnCaughtExceptions: false,
@@ -1561,7 +1572,7 @@ describeWithMockConnection('BreakpointsView', () => {
                 location: '234',
                 codeSnippet: 'const a = x;',
                 isHit: false,
-                status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+                status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
               },
               {
                 id: '2',
@@ -1569,7 +1580,7 @@ describeWithMockConnection('BreakpointsView', () => {
                 location: '3:3',
                 codeSnippet: 'if (x > a) {',
                 isHit: true,
-                status: SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED,
+                status: Sources.BreakpointsView.BreakpointStatus.DISABLED,
               },
             ],
           },
@@ -1585,7 +1596,7 @@ describeWithMockConnection('BreakpointsView', () => {
                 location: '11',
                 codeSnippet: 'const y;',
                 isHit: false,
-                status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+                status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
               },
               {
                 id: '4',
@@ -1593,7 +1604,7 @@ describeWithMockConnection('BreakpointsView', () => {
                 location: '12',
                 codeSnippet: 'const y;',
                 isHit: false,
-                status: SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED,
+                status: Sources.BreakpointsView.BreakpointStatus.ENABLED,
               },
             ],
           },
@@ -1601,26 +1612,27 @@ describeWithMockConnection('BreakpointsView', () => {
       };
       component.data = data;
       await RenderCoordinator.done();
+      await component.updateComplete;
       return {component, data};
     }
 
     it('pause on exceptions is tabbable', async () => {
       const component = await renderNoBreakpoints({pauseOnUncaughtExceptions: true, pauseOnCaughtExceptions: false});
-      assert.isNotNull(component.shadowRoot);
+      assert.isNotNull(component.contentElement);
 
-      const focusableElements = component.shadowRoot.querySelectorAll(TABBABLE_SELECTOR);
+      const focusableElements = component.contentElement.querySelectorAll(TABBABLE_SELECTOR);
       assert.lengthOf(focusableElements, 1);
 
-      const pauseOnUncaughtExceptions = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+      const pauseOnUncaughtExceptions = component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
       assert.deepEqual(focusableElements[0], pauseOnUncaughtExceptions);
     });
 
     describe('pressing the HOME key', () => {
       it('takes the user to the pause-on-exceptions line', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
+        assert.isNotNull(component.contentElement);
         const secondGroupsSummary =
-            component.shadowRoot.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
+            component.contentElement.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(secondGroupsSummary, HTMLElement);
 
         // Focus on second group by clicking on it, then press Home button.
@@ -1628,9 +1640,9 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(secondGroupsSummary, {key: 'Home', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
-        const pauseOnUncaughtExceptions = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+        const pauseOnUncaughtExceptions = component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
         assert.instanceOf(pauseOnUncaughtExceptions, HTMLElement);
         assert.strictEqual(selected, pauseOnUncaughtExceptions);
       });
@@ -1639,8 +1651,8 @@ describeWithMockConnection('BreakpointsView', () => {
     describe('pressing the END key', () => {
       it('takes the user to the summary node of the last group (if last group is collapsed)', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
-        const pauseOnUncaughtExceptions = component.shadowRoot.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
+        assert.isNotNull(component.contentElement);
+        const pauseOnUncaughtExceptions = component.contentElement.querySelector(PAUSE_ON_UNCAUGHT_EXCEPTIONS_SELECTOR);
         assert.instanceOf(pauseOnUncaughtExceptions, HTMLElement);
 
         // Focus on the pause-on-exceptions line by clicking on it, then press End key.
@@ -1648,11 +1660,11 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(pauseOnUncaughtExceptions, {key: 'End', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
         const lastGroupSummary =
-            component.shadowRoot.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
+            component.contentElement.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(lastGroupSummary, HTMLElement);
         assert.strictEqual(selected, lastGroupSummary);
       });
@@ -1664,8 +1676,8 @@ describeWithMockConnection('BreakpointsView', () => {
         component.data = data;
         await RenderCoordinator.done();
 
-        assert.isNotNull(component.shadowRoot);
-        const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
+        assert.isNotNull(component.contentElement);
+        const firstGroupSummary = component.contentElement.querySelector(SUMMARY_SELECTOR);
         assert.instanceOf(firstGroupSummary, HTMLElement);
 
         // First focus on the first group by clicking on it, then press the End button.
@@ -1673,10 +1685,10 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(firstGroupSummary, {key: 'End', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
-        const breakpointItems = component.shadowRoot.querySelectorAll(BREAKPOINT_ITEM_SELECTOR);
+        const breakpointItems = component.contentElement.querySelectorAll(BREAKPOINT_ITEM_SELECTOR);
         assertElements(breakpointItems, HTMLDivElement);
 
         const lastBreakpointItem = breakpointItems.item(breakpointItems.length - 1);
@@ -1688,9 +1700,9 @@ describeWithMockConnection('BreakpointsView', () => {
       it('on the pause-on-uncaught-exception takes the user to the summary node of the top most details element',
          async () => {
            const {component} = await renderBreakpointsForKeyboardNavigation();
-           assert.isNotNull(component.shadowRoot);
+           assert.isNotNull(component.contentElement);
 
-           const pauseOnCaughtException = component.shadowRoot.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+           const pauseOnCaughtException = component.contentElement.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
            assert.instanceOf(pauseOnCaughtException, HTMLElement);
 
            // Focus on the pause on exception, and navigate one down.
@@ -1698,8 +1710,8 @@ describeWithMockConnection('BreakpointsView', () => {
            dispatchKeyDownEvent(pauseOnCaughtException, {key: 'ArrowDown', bubbles: true});
            await RenderCoordinator.done();
 
-           const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
-           const firstSummary = component.shadowRoot.querySelector(`${DETAILS_SELECTOR} > ${SUMMARY_SELECTOR}`);
+           const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
+           const firstSummary = component.contentElement.querySelector(`${DETAILS_SELECTOR} > ${SUMMARY_SELECTOR}`);
            assert.instanceOf(firstSummary, HTMLElement);
            assert.strictEqual(selected, firstSummary);
          });
@@ -1707,8 +1719,8 @@ describeWithMockConnection('BreakpointsView', () => {
       it('on the summary node of an expanded group takes the user to the top most breakpoint item of that group',
          async () => {
            const {component} = await renderBreakpointsForKeyboardNavigation();
-           assert.isNotNull(component.shadowRoot);
-           const collapsedDetailsElement = component.shadowRoot.querySelector(COLLAPSED_GROUPS_SELECTOR);
+           assert.isNotNull(component.contentElement);
+           const collapsedDetailsElement = component.contentElement.querySelector(COLLAPSED_GROUPS_SELECTOR);
            assert.instanceOf(collapsedDetailsElement, HTMLDetailsElement);
 
            const collapsedGroupSummary = collapsedDetailsElement.querySelector(SUMMARY_SELECTOR);
@@ -1719,7 +1731,7 @@ describeWithMockConnection('BreakpointsView', () => {
            dispatchKeyDownEvent(collapsedGroupSummary, {key: 'ArrowDown', bubbles: true});
            await RenderCoordinator.done();
 
-           const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+           const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
            assert.instanceOf(selected, HTMLElement);
 
            const firstBreakpointItem = collapsedDetailsElement.querySelector(BREAKPOINT_ITEM_SELECTOR);
@@ -1730,10 +1742,10 @@ describeWithMockConnection('BreakpointsView', () => {
 
       it('on the summary node of a collapsed group takes the user to the summary node of the next group', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
+        assert.isNotNull(component.contentElement);
 
         const firstGroupSummary =
-            component.shadowRoot.querySelector(`${DETAILS_SELECTOR}:nth-of-type(1) > ${SUMMARY_SELECTOR}`);
+            component.contentElement.querySelector(`${DETAILS_SELECTOR}:nth-of-type(1) > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(firstGroupSummary, HTMLElement);
 
         // Focus on the expanded group and collapse it by clicking on it. Then navigate down.
@@ -1741,20 +1753,20 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(firstGroupSummary, {key: 'ArrowDown', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
         const secondGroupSummary =
-            component.shadowRoot.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
+            component.contentElement.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(secondGroupSummary, HTMLElement);
         assert.strictEqual(selected, secondGroupSummary);
       });
 
       it('on a breakpoint item takes the user to the next breakpoint item', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
+        assert.isNotNull(component.contentElement);
 
-        const firstDetailsElement = component.shadowRoot.querySelector('details');
+        const firstDetailsElement = component.contentElement.querySelector('details');
         assert.instanceOf(firstDetailsElement, HTMLDetailsElement);
         const firstBreakpointItem = firstDetailsElement.querySelector(BREAKPOINT_ITEM_SELECTOR);
         assert.instanceOf(firstBreakpointItem, HTMLDivElement);
@@ -1764,7 +1776,7 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(firstBreakpointItem, {key: 'ArrowDown', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
         const secondBreakpointItem = firstDetailsElement.querySelector(`${BREAKPOINT_ITEM_SELECTOR}:nth-of-type(2)`);
@@ -1777,8 +1789,8 @@ describeWithMockConnection('BreakpointsView', () => {
     describe('pressing the ArrowUp key', () => {
       it('on the first summary takes a user to the pause on exceptions', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
-        const firstSummary = component.shadowRoot.querySelector(`${DETAILS_SELECTOR} > ${SUMMARY_SELECTOR}`);
+        assert.isNotNull(component.contentElement);
+        const firstSummary = component.contentElement.querySelector(`${DETAILS_SELECTOR} > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(firstSummary, HTMLElement);
 
         // Focus on the summary element.
@@ -1786,8 +1798,8 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(firstSummary, {key: 'ArrowUp', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
-        const pauseOnUncaughtExceptions = component.shadowRoot.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
+        const pauseOnUncaughtExceptions = component.contentElement.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
         assert.instanceOf(pauseOnUncaughtExceptions, HTMLDivElement);
 
         assert.strictEqual(selected, pauseOnUncaughtExceptions);
@@ -1795,8 +1807,8 @@ describeWithMockConnection('BreakpointsView', () => {
 
       it('on the first breakpoint item in an expanded group takes the user to the summary node', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
-        const expandedDetails = component.shadowRoot.querySelector(EXPANDED_GROUPS_SELECTOR);
+        assert.isNotNull(component.contentElement);
+        const expandedDetails = component.contentElement.querySelector(EXPANDED_GROUPS_SELECTOR);
         assert.instanceOf(expandedDetails, HTMLDetailsElement);
 
         const firstBreakpointItem = expandedDetails.querySelector(BREAKPOINT_ITEM_SELECTOR);
@@ -1807,7 +1819,7 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(firstBreakpointItem, {key: 'ArrowUp', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
         const summary = expandedDetails.querySelector(SUMMARY_SELECTOR);
@@ -1818,8 +1830,8 @@ describeWithMockConnection('BreakpointsView', () => {
 
       it('on a breakpoint item in an expanded group takes the user to the previous breakpoint item', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
-        const expandedDetails = component.shadowRoot.querySelector(EXPANDED_GROUPS_SELECTOR);
+        assert.isNotNull(component.contentElement);
+        const expandedDetails = component.contentElement.querySelector(EXPANDED_GROUPS_SELECTOR);
         assert.instanceOf(expandedDetails, HTMLDetailsElement);
 
         const breakpointItems = expandedDetails.querySelectorAll(BREAKPOINT_ITEM_SELECTOR);
@@ -1831,7 +1843,7 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(lastBreakpointItem, {key: 'ArrowUp', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
         const nextToLastBreakpointItem = breakpointItems.item(breakpointItems.length - 2);
@@ -1841,9 +1853,9 @@ describeWithMockConnection('BreakpointsView', () => {
 
       it('on a summary node takes the user to the last breakpoint item of the previous group', async () => {
         const {component} = await renderBreakpointsForKeyboardNavigation();
-        assert.isNotNull(component.shadowRoot);
+        assert.isNotNull(component.contentElement);
         const secondGroupSummary =
-            component.shadowRoot.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
+            component.contentElement.querySelector(`${DETAILS_SELECTOR}:nth-of-type(2) > ${SUMMARY_SELECTOR}`);
         assert.instanceOf(secondGroupSummary, HTMLElement);
 
         // Focus on the group. Then navigate up.
@@ -1851,10 +1863,10 @@ describeWithMockConnection('BreakpointsView', () => {
         dispatchKeyDownEvent(secondGroupSummary, {key: 'ArrowUp', bubbles: true});
         await RenderCoordinator.done();
 
-        const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
+        const selected = component.contentElement.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
 
-        const firstDetailsElement = component.shadowRoot.querySelector(DETAILS_SELECTOR);
+        const firstDetailsElement = component.contentElement.querySelector(DETAILS_SELECTOR);
         assert.exists(firstDetailsElement);
         const lastBreakpointItem = firstDetailsElement.querySelector(`${BREAKPOINT_ITEM_SELECTOR}:last-child`);
         assert.instanceOf(lastBreakpointItem, HTMLDivElement);