Merge git://github.com/tootsuite/mastodon into tootsuite-master

app/javascript/mastodon/components/column.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import detectPassiveEvents from 'detect-passive-events';
 import scrollTop from '../scroll';
 
 export default class Column extends React.PureComponent {
@@ -30,16 +31,19 @@ export default class Column extends React.PureComponent {
     this.node = c;
   }
 
+  componentDidMount () {
+    this.node.addEventListener('wheel', this.handleWheel,  detectPassiveEvents ? { passive: true } : false);
+  }
+
+  componentWillUnmount () {
+    this.node.removeEventListener('wheel', this.handleWheel);
+  }
+
   render () {
     const { children } = this.props;
 
     return (
-      <div
-        role='region'
-        className='column'
-        ref={this.setRef}
-        onWheel={this.handleWheel}
-      >
+      <div role='region' className='column' ref={this.setRef}>
         {children}
       </div>
     );

app/javascript/mastodon/components/loading_indicator.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 const LoadingIndicator = () => (
   <div className='loading-indicator'>
+    <div className='loading-indicator__figure' />
     <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
   </div>
 );

app/javascript/mastodon/components/status_action_bar.js

@@ -15,6 +15,7 @@ const messages = defineMessages({
   mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
@@ -60,6 +61,13 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.props.onReply(this.props.status, this.context.router.history);
   }
 
+  handleShareClick = () => {
+    navigator.share({
+      text: this.props.status.get('search_index'),
+      url: this.props.status.get('url'),
+    });
+  }
+
   handleFavouriteClick = () => {
     this.props.onFavourite(this.props.status);
   }
@@ -139,11 +147,16 @@ export default class StatusActionBar extends ImmutablePureComponent {
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
+    const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
+      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+    );
+
     return (
       <div className='status__action-bar'>
         <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
         <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        {shareButton}
 
         <div className='status__action-bar-dropdown'>
           <DropdownMenu disabled={anonymousAccess} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />

app/javascript/mastodon/components/status_list.js

@@ -31,16 +31,18 @@ export default class StatusList extends ImmutablePureComponent {
   intersectionObserverWrapper = new IntersectionObserverWrapper();
 
   handleScroll = debounce(() => {
-    const { scrollTop, scrollHeight, clientHeight } = this.node;
-    const offset = scrollHeight - scrollTop - clientHeight;
-    this._oldScrollPosition = scrollHeight - scrollTop;
+    if (this.node) {
+      const { scrollTop, scrollHeight, clientHeight } = this.node;
+      const offset = scrollHeight - scrollTop - clientHeight;
+      this._oldScrollPosition = scrollHeight - scrollTop;
 
-    if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
-      this.props.onScrollToBottom();
-    } else if (scrollTop < 100 && this.props.onScrollToTop) {
-      this.props.onScrollToTop();
-    } else if (this.props.onScroll) {
-      this.props.onScroll();
+      if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
+        this.props.onScrollToBottom();
+      } else if (scrollTop < 100 && this.props.onScrollToTop) {
+        this.props.onScrollToTop();
+      } else if (this.props.onScroll) {
+        this.props.onScroll();
+      }
     }
   }, 200, {
     trailing: true,