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]>

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,17 @@
 
 import {assert} from 'chai';
 
-import {getBrowserAndPages, waitFor, waitForNone} from '../../shared/helper.js';
-
+import {getBrowserAndPages, waitFor, waitForElementWithTextContent, 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 +146,42 @@ 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);
+
+      const scrollTopAfterFileChange = await snippetsPanel.evaluate(panel => panel.scrollTop);
+      assert.notStrictEqual(scrollTopBeforeFileChange, scrollTopAfterFileChange);
+    });
   });
 });