web addon web auto scroll

addon/web/client/package.json

@@ -15,6 +15,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "scrollmonitor": "^1.2.4",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },

addon/web/client/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Table from 'react-bootstrap/Table'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
+import scrollMonitor from 'scrollmonitor'
 import './App.css'
 
 import BreakPoint from './components/BreakPoint'
@@ -22,6 +23,9 @@ class App extends React.Component<any, IState> {
   private flowMgr: FlowManager
   private ws: WebSocket | null
 
+  private pageBottom: HTMLDivElement | null
+  private autoScore = false
+
   constructor(props: any) {
     super(props)
 
@@ -35,6 +39,7 @@ class App extends React.Component<any, IState> {
     }
 
     this.ws = null
+    this.pageBottom = null
   }
 
   componentDidMount() {
@@ -71,7 +76,9 @@ class App extends React.Component<any, IState> {
       if (msg.type === MessageType.REQUEST) {
         const flow = new Flow(msg)
         this.flowMgr.add(flow)
-        this.setState({ flows: this.flowMgr.showList() })
+        this.setState({ flows: this.flowMgr.showList() }, () => {
+          if (this.pageBottom && this.autoScore) this.pageBottom.scrollIntoView({ behavior: 'auto' })
+        })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
         const flow = this.flowMgr.get(msg.id)
@@ -97,6 +104,18 @@ class App extends React.Component<any, IState> {
     }
   }
 
+  initScrollMonitor() {
+    if (!this.pageBottom) return
+
+    const watcher = scrollMonitor.create(this.pageBottom)
+    watcher.enterViewport(() => {
+      this.autoScore = true
+    })
+    watcher.exitViewport(() => {
+      this.autoScore = false
+    })
+  }
+
   renderFlow() {
     const { flow, flowTab } = this.state
     if (!flow) return null
@@ -274,6 +293,12 @@ class App extends React.Component<any, IState> {
         </Table>
 
         {this.renderFlow()}
+
+        <div ref={el => {
+          if (this.pageBottom) return
+          this.pageBottom = el
+          this.initScrollMonitor()
+        }} style={{ height: '0px', visibility: 'hidden' }}>bottom</div>
       </div>
     )
   }

addon/web/client/src/types/scrollmonitor.d.ts

@@ -0,0 +1,3 @@
+declare module 'scrollmonitor' {
+  export function create(el: HTMLElement): any
+}

addon/web/client/yarn.lock

@@ -9832,6 +9832,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scrollmonitor@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/scrollmonitor/-/scrollmonitor-1.2.4.tgz#823d04cc1574aa3b71de7cc70ef91ebe633344a0"
+  integrity sha512-HBQpeZVAYETbNk0DAmi+X4hdTQMk5WRa/Udez9o8yC8GcRiPDgBxyEdV9g9Su/TWOuUeVfVGfNcyboEyzkte4Q==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"