add scroll down helper to console (#2951)

package.json

@@ -37,7 +37,7 @@
         "swr": "^0.2.3",
         "tailwindcss": "^2.0.2",
         "uuid": "^3.3.2",
-        "xterm": "^4.9.0",
+        "xterm": "^4.12.0",
         "xterm-addon-attach": "^0.6.0",
         "xterm-addon-fit": "^0.4.0",
         "xterm-addon-search": "^0.7.0",

resources/scripts/components/server/Console.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ITerminalOptions, Terminal } from 'xterm';
+import { Terminal, ITerminalOptions } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';
 import { SearchBarAddon } from 'xterm-addon-search-bar';
 import { WebLinksAddon } from 'xterm-addon-web-links';
+import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
 import styled from 'styled-components/macro';
@@ -72,6 +73,7 @@ export default () => {
     const searchAddon = new SearchAddon();
     const searchBar = new SearchBarAddon({ searchAddon });
     const webLinksAddon = new WebLinksAddon();
+    const scrollDownHelperAddon = new ScrollDownHelperAddon();
     const { connected, instance } = ServerContext.useStoreState(state => state.socket);
     const [canSendCommands] = usePermissions(['control.console']);
     const serverId = ServerContext.useStoreState(state => state.server.data!.id);
@@ -139,6 +141,7 @@ export default () => {
             terminal.loadAddon(searchAddon);
             terminal.loadAddon(searchBar);
             terminal.loadAddon(webLinksAddon);
+            terminal.loadAddon(scrollDownHelperAddon);
 
             terminal.open(ref.current);
             fitAddon.fit();

resources/scripts/plugins/XtermScrollDownHelperAddon.ts

@@ -0,0 +1,68 @@
+import { Terminal, ITerminalAddon } from 'xterm';
+
+export class ScrollDownHelperAddon implements ITerminalAddon {
+    private terminal: Terminal = new Terminal();
+    private element?: HTMLDivElement;
+
+    activate (terminal: Terminal): void {
+        this.terminal = terminal;
+
+        this.terminal.onScroll(() => {
+            if (this.isScrolledDown()) {
+                this.hide();
+            }
+        });
+
+        this.terminal.onLineFeed(() => {
+            if (!this.isScrolledDown()) {
+                this.show();
+            }
+        });
+
+        this.show();
+    }
+
+    dispose (): void {
+        // ignore
+    }
+
+    show (): void {
+        if (!this.terminal || !this.terminal.element) {
+            return;
+        }
+        if (this.element) {
+            this.element.style.visibility = 'visible';
+            return;
+        }
+
+        this.terminal.element.style.position = 'relative';
+
+        this.element = document.createElement('div');
+        this.element.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bell" class="svg-inline--fa fa-bell fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path></svg>';
+        this.element.style.position = 'absolute';
+        this.element.style.right = '1.5rem';
+        this.element.style.bottom = '.5rem';
+        this.element.style.padding = '.5rem';
+        this.element.style.fontSize = '1.25em';
+        this.element.style.boxShadow = '0 2px 8px #000';
+        this.element.style.backgroundColor = '#252526';
+        this.element.style.zIndex = '999';
+        this.element.style.cursor = 'pointer';
+
+        this.element.addEventListener('click', () => {
+            this.terminal.scrollToBottom();
+        });
+
+        this.terminal.element.appendChild(this.element);
+    }
+
+    hide (): void {
+        if (this.element) {
+            this.element.style.visibility = 'hidden';
+        }
+    }
+
+    isScrolledDown (): boolean {
+        return this.terminal.buffer.active.viewportY === this.terminal.buffer.active.baseY;
+    }
+}

yarn.lock

@@ -8040,10 +8040,10 @@ xterm-addon-web-links@^0.4.0:
   resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.4.0.tgz#265cbf8221b9b315d0a748e1323bee331cd5da03"
   integrity sha512-xv8GeiINmx0zENO9hf5k+5bnkaE8mRzF+OBAr9WeFq2eLaQSudioQSiT34M1ofKbzcdjSsKiZm19Rw3i4eXamg==
 
-xterm@^4.9.0:
+xterm@^4.12.0:
-  version "4.9.0"
+  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.9.0.tgz#7a4c097a433d565339b5533b468bbc60c6c87969"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.12.0.tgz#db09b425b4dcae5b96f8cbbaaa93b3bc60997ca9"
-  integrity sha512-wGfqufmioctKr8VkbRuZbVDfjlXWGZZ1PWHy1yqqpGT3Nm6yaJx8lxDbSEBANtgaiVPTcKSp97sxOy5IlpqYfw==
+  integrity sha512-K5mF/p3txUV18mjiZFlElagoHFpqXrm5OYHeoymeXSu8GG/nMaOO/+NRcNCwfdjzAbdQ5VLF32hEHiWWKKm0bw==
 
 y18n@^4.0.0:
   version "4.0.0"