fix(xod-client): open console log with scrolled to the bottom content

packages/xod-client/package.json

@@ -19,7 +19,6 @@
     "lib": "./dist"
   },
   "dependencies": {
-    "autoscroll-react": "git+https://github.com/xodio/autoscroll-react.git#cbb3422461a28b40ca082d6a5f33f667508c3288",
     "classnames": "^2.2.5",
     "codemirror": "^5.31.0",
     "escape-string-regexp": "^1.0.5",

packages/xod-client/src/debugger/containers/Log.jsx

@@ -9,25 +9,38 @@ import * as selectors from '../selectors';
 import * as actions from '../actions';
 import { LOG_TAB_TYPE } from '../constants';
 
-import Autoscrolled from '../components/Autoscrolled';
+import Autoscroll from '../../utils/components/Autoscroll';
 
 class Log extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.logEnd = null;
+    this.autoscrollRef = null;
 
     this.onFollowLog = this.onFollowLog.bind(this);
+    this.scrollToBottom = this.scrollToBottom.bind(this);
   }
 
-  onFollowLog() {
-    if (this.logEnd) {
-      this.logEnd.scrollIntoView({ behavior: 'smooth' });
-    }
+  componentDidMount() {
+    // Postpone scrolling to the next tick
+    // so content could be rendered and then
+    // it will scroll to the right position
+    setTimeout(() => {
+      this.scrollToBottom();
+    }, 0);
+  }
 
+  onFollowLog() {
+    this.scrollToBottom();
     this.props.stopSkippingNewLogLines();
   }
 
+  scrollToBottom() {
+    if (this.autoscrollRef) {
+      this.autoscrollRef.scrollDown();
+    }
+  }
+
   render() {
     const {
       log,
@@ -39,22 +52,23 @@ class Log extends React.PureComponent {
     } = this.props;
 
     return (
-      <Autoscrolled
+      <Autoscroll
+        className="log"
+        ref={el => (this.autoscrollRef = el)}
         onScrolledFromBottom={
           isSkipOnScrollEnabled ? startSkippingNewLogLines : noop
         }
       >
         {log}
         {R.isEmpty(error) ? null : <div className="error">{error}</div>}
-        <div ref={el => (this.logEnd = el)} />
         {isSkipOnScrollEnabled && isSkippingNewSerialLogLines ? (
           <div className="skipped">
             <button className="Button Button--small" onClick={this.onFollowLog}>
               Follow log ({numberOfSkippedSerialLogLines} new lines skipped)
             </button>
           </div>
         ) : null}
-      </Autoscrolled>
+      </Autoscroll>
     );
   }
 }

packages/xod-client/src/utils/components/Autoscroll.jsx

@@ -0,0 +1,100 @@
+/*
+  Edited fork of `autoscroll-react`: https://github.com/thk2b/autoscroll-react
+  Changes:
+  - Added `onScrolledFromBottom` property
+  - Added `scrollDown` method
+ */
+
+import * as R from 'ramda';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/* eslint-disable no-param-reassign */
+const hasOverflow = el => el.clientHeight < el.scrollHeight;
+const isScrolledDown = (el, threshold) => {
+  const bottom = el.scrollTop + el.clientHeight;
+  return bottom >= el.scrollHeight - threshold;
+};
+const isScrolledUp = el => el.scrollTop === 0;
+const scrollDown = el => (el.scrollTop = el.scrollHeight - el.clientHeight);
+const scrollDownBy = (amount, el) => (el.scrollTop += amount);
+/* eslint-enable no-param-reassign */
+
+const isScrolledDownThreshold = 0;
+
+class Autoscroll extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this._isScrolledDown = true; /* whether the user has scrolled down */
+    this._el = null;
+    this._scrollHeight = null;
+    this._isScrolledUp = null;
+  }
+  componentDidMount() {
+    this.scrollDownIfNeeded();
+  }
+  componentWillUpdate() {
+    this._scrollHeight = this._el.scrollHeight;
+    this._isScrolledUp = isScrolledUp(this._el);
+  }
+  componentDidUpdate() {
+    /* if the list is scrolled all the way up and new items are added, preserve the current scroll position */
+    if (this._isScrolledUp && this._scrollHeight !== null) {
+      /* the scroll height increased by this much during the update */
+      const difference = this._el.scrollHeight - this._scrollHeight;
+      this._scrollHeight = null;
+      scrollDownBy(difference, this._el);
+    } else this.scrollDownIfNeeded();
+  }
+  scrollDownIfNeeded() {
+    if (this._isScrolledDown && hasOverflow(this._el)) {
+      scrollDown(this._el);
+    }
+  }
+  scrollDown() {
+    scrollDown(this._el);
+  }
+  handleScroll(e) {
+    const nextIsScrolledDown = isScrolledDown(
+      this._el,
+      isScrolledDownThreshold
+    );
+    if (
+      !nextIsScrolledDown &&
+      this._isScrolledDown &&
+      this.props.onScrolledFromBottom
+    ) {
+      this.props.onScrolledFromBottom(e);
+    }
+    this._isScrolledDown = nextIsScrolledDown;
+
+    if (isScrolledUp(this._el) && this.props.onScrolledTop) {
+      this.props.onScrolledTop(e);
+    }
+
+    if (this.props.onScrolled) {
+      this.props.onScrolled(e);
+    }
+  }
+  render() {
+    const restProps = R.omit(
+      ['onScrolled', 'onScrolledTop', 'onScrolledFromBottom'],
+      this.props
+    );
+    return (
+      <div
+        {...restProps}
+        ref={el => (this._el = el)}
+        onScroll={e => this.handleScroll(e)}
+      />
+    );
+  }
+}
+
+Autoscroll.propTypes = {
+  onScrolled: PropTypes.func,
+  onScrolledTop: PropTypes.func,
+  onScrolledFromBottom: PropTypes.func,
+};
+
+export default Autoscroll;

yarn.lock

@@ -1070,10 +1070,6 @@ autoprefixer@^7.1.6:
     postcss "^6.0.14"
     postcss-value-parser "^3.2.3"
 
-"autoscroll-react@git+https://github.com/xodio/autoscroll-react.git#cbb3422461a28b40ca082d6a5f33f667508c3288":
-  version "3.2.0"
-  resolved "git+https://github.com/xodio/autoscroll-react.git#cbb3422461a28b40ca082d6a5f33f667508c3288"
-
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"