Reland "Fix scrolling into view in Treeoutline"

This is a reland of commit 1dcc489

Difference to original: I've added an await function to properly
wait for the expected scroll difference before asserting it.

Original change's description:
> Fix scrolling into view in Treeoutline
>
> The scrollable container for the Treeoutline has changed, and as a
> result, the wrong container was used for scrolling when we attempted
> to scoll an item in the tree into view.
>
> This CL changes the way we retrieve the correct scroll container.
> Instead of using the parent element, we either get the parent
> element or the shadow host.
>
> Fixed: 374592181
> Change-Id: Ib3d033b0a4d1c7f7b88e2af63f9bd1f67de452d9
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5961819
> Commit-Queue: Kim-Anh Tran <[email protected]>
> Reviewed-by: Benedikt Meurer <[email protected]>

Bug: 374592181
Change-Id: I56fa39a1473b5d40f4f1b0089302a079bf7fad53
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5969660
Auto-Submit: Kim-Anh Tran <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: ktran

front_end/ui/legacy/Treeoutline.ts

@@ -349,9 +349,12 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
       // Usually, this.element is the tree container that scrolls. But sometimes
       // (i.e. in the Elements panel), its parent is.
-      let scrollParentElement: HTMLElement = this.element;
-      while (getComputedStyle(scrollParentElement).overflow === 'visible' && scrollParentElement.parentElement) {
-        scrollParentElement = scrollParentElement.parentElement;
+      let scrollParentElement: Element = this.element;
+      while (getComputedStyle(scrollParentElement).overflow === 'visible' &&
+             scrollParentElement.parentElementOrShadowHost()) {
+        const parent = scrollParentElement.parentElementOrShadowHost();
+        Platform.assertNotNullOrUndefined(parent);
+        scrollParentElement = parent;
       }
 
       const viewRect = scrollParentElement.getBoundingClientRect();

test/e2e/sources/navigator-view_test.ts

@@ -4,11 +4,23 @@
 
 import {assert} from 'chai';
 
-import {getBrowserAndPages, waitFor, waitForNone} from '../../shared/helper.js';
-
+import {
+  getBrowserAndPages,
+  waitFor,
+  waitForElementWithTextContent,
+  waitForFunction,
+  waitForNone,
+} from '../../shared/helper.js';
 import {openSoftContextMenuAndClickOnItem} from '../helpers/context-menu-helpers.js';
-import {openFileWithQuickOpen, runCommandWithQuickOpen} from '../helpers/quick_open-helpers.js';
 import {
+  getMenuItemAtPosition,
+  openFileQuickOpen,
+  openFileWithQuickOpen,
+  runCommandWithQuickOpen,
+  typeIntoQuickOpen,
+} from '../helpers/quick_open-helpers.js';
+import {
+  createNewSnippet,
   openFileInSourcesPanel,
   openSnippetsSubPane,
   openSourceCodeEditorForFile,
@@ -140,5 +152,45 @@ describe('The Sources panel', () => {
       await toggleNavigatorSidebar(frontend);
       await waitFor('.navigator-tabbed-pane');
     });
+
+    it('which can scroll the navigator element into view on source file change', async () => {
+      async function openSnippet(snippet: string) {
+        await openFileQuickOpen();
+        await typeIntoQuickOpen(snippet);
+        const firstItem = await getMenuItemAtPosition(0);
+        await firstItem.click();
+      }
+
+      async function assertSnippetIsSelected(snippet: string) {
+        const selectedItem = await waitFor('.navigator-file-tree-item.selected');
+        const selectedItemName = await selectedItem.evaluate(node => node.textContent);
+        assert.strictEqual(selectedItemName, snippet);
+      }
+
+      await openSourcesPanel();
+      await openSnippetsSubPane();
+
+      const numSnippets = 50;
+      for (let i = 0; i < numSnippets; ++i) {
+        await createNewSnippet(`Snippet${i}`);
+      }
+      const firstSnippetName = 'Snippet0';
+      const lastSnippetName = `Snippet${numSnippets - 1}`;
+
+      await waitForElementWithTextContent(lastSnippetName);
+      await assertSnippetIsSelected(lastSnippetName);
+
+      const snippetsPanel = await waitFor('[aria-label="Snippets panel"]');
+      const scrollTopBeforeFileChange = await snippetsPanel.evaluate(panel => panel.scrollTop);
+
+      await openSnippet(firstSnippetName);
+      await assertSnippetIsSelected(firstSnippetName);
+      await waitForFunction(async () => {
+        return await snippetsPanel.evaluate(panel => panel.scrollTop) === 0;
+      });
+
+      const scrollTopAfterFileChange = await snippetsPanel.evaluate(panel => panel.scrollTop);
+      assert.notStrictEqual(scrollTopBeforeFileChange, scrollTopAfterFileChange);
+    });
   });
 });