revert: Revert "fix: Console history did not stick to bottom on visib…

…ility changes (#2320)" (#2323)

This reverts commit 648e8c0.

jest.setup.ts

@@ -50,12 +50,6 @@ Object.defineProperty(window, 'ResizeObserver', {
   },
 });
 
-Object.defineProperty(window, 'IntersectionObserver', {
-  value: function () {
-    return TestUtils.createMockProxy<IntersectionObserver>();
-  },
-});
-
 Object.defineProperty(window, 'DOMRect', {
   value: function (x: number = 0, y: number = 0, width = 0, height = 0) {
     return TestUtils.createMockProxy<DOMRect>({

packages/console/src/Console.tsx

@@ -7,7 +7,6 @@ import React, {
   type ReactElement,
   type ReactNode,
   type RefObject,
-  type UIEvent,
 } from 'react';
 import {
   ContextActions,
@@ -191,7 +190,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     this.handleLogMessage = this.handleLogMessage.bind(this);
     this.handleOverflowActions = this.handleOverflowActions.bind(this);
     this.handleScrollPaneScroll = this.handleScrollPaneScroll.bind(this);
-    this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
     this.handleToggleAutoLaunchPanels =
       this.handleToggleAutoLaunchPanels.bind(this);
     this.handleToggleClosePanelsOnDisconnect =
@@ -215,9 +213,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     this.consoleHistoryScrollPane = React.createRef();
     this.pending = new Pending();
     this.queuedLogMessages = [];
-    this.visibilityObserver = new window.IntersectionObserver(
-      this.handleVisibilityChange
-    );
 
     const { objectMap, settings } = this.props;
 
@@ -258,10 +253,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     );
 
     this.updateDimensions();
-
-    if (this.consolePane.current) {
-      this.visibilityObserver.observe(this.consolePane.current);
-    }
   }
 
   componentDidUpdate(prevProps: ConsoleProps, prevState: ConsoleState): void {
@@ -289,7 +280,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     this.processLogMessageQueue.cancel();
 
     this.deinitConsoleLogging();
-    this.visibilityObserver.disconnect();
   }
 
   cancelListener?: () => void;
@@ -304,8 +294,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
 
   queuedLogMessages: ConsoleHistoryActionItem[];
 
-  visibilityObserver: IntersectionObserver;
-
   initConsoleLogging(): void {
     const { session } = this.props;
     this.cancelListener = session.onLogMessage(this.handleLogMessage);
@@ -682,8 +670,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     });
   }
 
-  handleScrollPaneScroll(event: UIEvent<HTMLDivElement>): void {
-    log.debug('handleScrollPaneScroll', event);
+  handleScrollPaneScroll(): void {
     const scrollPane = this.consoleHistoryScrollPane.current;
     assertNotNull(scrollPane);
     this.setState({
@@ -694,18 +681,6 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
     });
   }
 
-  handleVisibilityChange(entries: IntersectionObserverEntry[]): void {
-    log.debug('handleVisibilityChange', entries);
-
-    const entry = entries[0];
-    if (entry.isIntersecting) {
-      const { isStuckToBottom } = this.state;
-      if (isStuckToBottom && !this.isAtBottom()) {
-        this.scrollConsoleHistoryToBottom();
-      }
-    }
-  }
-
   handleToggleAutoLaunchPanels(): void {
     this.setState(state => ({
       isAutoLaunchPanelsEnabled: !state.isAutoLaunchPanelsEnabled,

tests/console.spec.ts

@@ -6,20 +6,6 @@ import {
   generateId,
 } from './utils';
 
-function logMessageLocator(page: Page, text: string): Locator {
-  return page
-    .locator('.console-history .log-message')
-    .filter({ hasText: text });
-}
-
-function panelTabLocator(page: Page, text: string): Locator {
-  return page.locator('.lm_tab .lm_title').filter({ hasText: text });
-}
-
-function scrollPanelLocator(page: Page): Locator {
-  return page.locator('.console-pane .scroll-pane');
-}
-
 let page: Page;
 let consoleInput: Locator;
 
@@ -46,8 +32,9 @@ test.describe('console input tests', () => {
     await page.keyboard.press('Enter');
 
     // Expect the output to show up in the log
-    await expect(logMessageLocator(page, message)).toHaveCount(1);
-    await expect(logMessageLocator(page, message)).toBeVisible();
+    await expect(
+      page.locator('.console-history .log-message').filter({ hasText: message })
+    ).toHaveCount(1);
   });
 
   test('object button is created when creating a table', async ({
@@ -74,53 +61,3 @@ test.describe('console input tests', () => {
     await expect(btnLocator.nth(1)).not.toBeDisabled();
   });
 });
-
-test.describe('console scroll tests', () => {
-  test('scrolls to the bottom when command is executed', async () => {
-    // The command needs to be long, but it doesn't need to actually print anything
-    const ids = Array.from(Array(300).keys()).map(() => generateId());
-    const command = ids.map(i => `# Really long command ${i}`).join('\n');
-
-    await pasteInMonaco(consoleInput, command);
-    await page.keyboard.press('Enter');
-
-    // Allow time for the text to colorize/render
-    await page.waitForTimeout(100);
-
-    // Expect the console to be scrolled to the bottom
-    const scrollPane = await scrollPanelLocator(page);
-    expect(
-      await scrollPane.evaluate(el => {
-        return el.scrollHeight - el.scrollTop - el.clientHeight;
-      })
-    ).toBeLessThanOrEqual(0);
-  });
-
-  test('scrolls to the bottom when focus changed when command executed', async () => {
-    // The command needs to be long, but it doesn't need to actually print anything
-    const ids = Array.from(Array(300).keys()).map(() => generateId());
-    const command =
-      `import time\ntime.sleep(0.5)\n` +
-      ids.map(i => `# Really long command ${i}`).join('\n');
-
-    await pasteInMonaco(consoleInput, command);
-    await page.keyboard.press('Enter');
-
-    // Immediately open the log before the command code block has a chance to finish colorizing/rendering
-    await panelTabLocator(page, 'Log').click();
-
-    // wait for a bit for the code block to render
-    // Since it's in the background, we can't use the waitForSelector method. It should render in less than 1s.
-    await page.waitForTimeout(1000);
-
-    // Switch back to the console, and expect it to be scrolled to the bottom
-    await panelTabLocator(page, 'Console').click();
-
-    const scrollPane = await scrollPanelLocator(page);
-    expect(
-      await scrollPane.evaluate(el => {
-        return el.scrollHeight - el.scrollTop - el.clientHeight;
-      })
-    ).toBeLessThanOrEqual(0);
-  });
-});