Merge remote-tracking branch 'upstream/develop' into travis/h1-h2-to-h3

karma.conf.js

@@ -135,17 +135,24 @@ module.exports = function (config) {
                     },
                 ],
                 noParse: [
+                    // for cross platform compatibility use [\\\/] as the path separator
+                    // this ensures that the regex trips on both Windows and *nix
+
                     // don't parse the languages within highlight.js. They
                     // cause stack overflows
                     // (https://github.com/webpack/webpack/issues/1721), and
                     // there is no need for webpack to parse them - they can
                     // just be included as-is.
-                    /highlight\.js\/lib\/languages/,
+                    /highlight\.js[\\\/]lib[\\\/]languages/,
+
+                    // olm takes ages for webpack to process, and it's already heavily
+                    // optimised, so there is little to gain by us uglifying it.
+                    /olm[\\\/](javascript[\\\/])?olm\.js$/,
 
                     // also disable parsing for sinon, because it
                     // tries to do voodoo with 'require' which upsets
                     // webpack (https://github.com/webpack/webpack/issues/304)
-                    /sinon\/pkg\/sinon\.js$/,
+                    /sinon[\\\/]pkg[\\\/]sinon\.js$/,
                 ],
             },
             resolve: {

src/CallHandler.js

@@ -313,7 +313,7 @@ function _onAction(payload) {
                                 console.error("Conference call failed: " + err);
                                 Modal.createDialog(ErrorDialog, {
                                     title: "Failed to set up conference call",
-                                    description: "Conference call failed.",
+                                    description: "Conference call failed. " + ((err && err.message) ? err.message : ""),
                                 });
                             });
                         }

src/components/structures/LoggedInView.js

@@ -117,9 +117,10 @@ export default React.createClass({
                 }
 
                 break;
+
             case KeyCode.UP:
             case KeyCode.DOWN:
-                if (ev.altKey) {
+                if (ev.altKey && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
                     var action = ev.keyCode == KeyCode.UP ?
                         'view_prev_room' : 'view_next_room';
                     dis.dispatch({action: action});
@@ -129,13 +130,15 @@ export default React.createClass({
 
             case KeyCode.PAGE_UP:
             case KeyCode.PAGE_DOWN:
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
+                }
                 break;
 
             case KeyCode.HOME:
             case KeyCode.END:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
                 }
@@ -153,6 +156,9 @@ export default React.createClass({
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
         }
+        else if (this.refs.roomDirectory) {
+            this.refs.roomDirectory.handleScrollKey(ev);
+        }
     },
 
     render: function() {
@@ -213,6 +219,7 @@ export default React.createClass({
 
             case PageTypes.RoomDirectory:
                 page_element = <RoomDirectory
+                    ref="roomDirectory"
                     collapsedRhs={this.props.collapse_rhs}
                     config={this.props.config.roomDirectory}
                 />;

src/components/structures/MatrixChat.js

@@ -413,7 +413,7 @@ module.exports = React.createClass({
                                 console.error("Failed to leave room " + payload.room_id + " " + err);
                                 Modal.createDialog(ErrorDialog, {
                                     title: "Failed to leave room",
-                                    description: "Server may be unavailable, overloaded, or you hit a bug."
+                                    description: (err && err.message ? err.message : "Server may be unavailable, overloaded, or you hit a bug."),
                                 });
                             });
                         }

src/components/structures/RoomView.js

@@ -26,6 +26,7 @@ var q = require("q");
 var classNames = require("classnames");
 var Matrix = require("matrix-js-sdk");
 
+var UserSettingsStore = require('../../UserSettingsStore');
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var ContentMessages = require("../../ContentMessages");
 var Modal = require("../../Modal");
@@ -946,7 +947,7 @@ module.exports = React.createClass({
             console.error("Failed to upload file " + file + " " + error);
             Modal.createDialog(ErrorDialog, {
                 title: "Failed to upload file",
-                description: "Server may be unavailable, overloaded, or the file too big",
+                description: ((error && error.message) ? error.message : "Server may be unavailable, overloaded, or the file too big"),
             });
         });
     },
@@ -1033,7 +1034,7 @@ module.exports = React.createClass({
             console.error("Search failed: " + error);
             Modal.createDialog(ErrorDialog, {
                 title: "Search failed",
-                description: "Server may be unavailable, overloaded, or search timed out :("
+                description: ((error && error.message) ? error.message : "Server may be unavailable, overloaded, or search timed out :("),
             });
         }).finally(function() {
             self.setState({
@@ -1181,6 +1182,7 @@ module.exports = React.createClass({
         console.log("updateTint from onCancelClick");
         this.updateTint();
         this.setState({editingRoomSettings: false});
+        dis.dispatch({action: 'focus_composer'});
     },
 
     onLeaveClick: function() {
@@ -1726,7 +1728,7 @@ module.exports = React.createClass({
         var messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
                 timelineSet={this.state.room.getUnfilteredTimelineSet()}
-                manageReadReceipts={true}
+                manageReadReceipts={!UserSettingsStore.getSyncedSetting('hideReadReceipts', false)}
                 manageReadMarkers={true}
                 hidden={hideMessagePanel}
                 highlightedEventId={this.props.highlightedEventId}

src/components/structures/ScrollPanel.js

@@ -483,21 +483,25 @@ module.exports = React.createClass({
     handleScrollKey: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.PAGE_UP:
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollRelative(-1);
+                }
                 break;
 
             case KeyCode.PAGE_DOWN:
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollRelative(1);
+                }
                 break;
 
             case KeyCode.HOME:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollToTop();
                 }
                 break;
 
             case KeyCode.END:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollToBottom();
                 }
                 break;

src/components/structures/TimelinePanel.js

@@ -766,7 +766,9 @@ var TimelinePanel = React.createClass({
 
         // jump to the live timeline on ctrl-end, rather than the end of the
         // timeline window.
-        if (ev.ctrlKey && ev.keyCode == KeyCode.END) {
+        if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey &&
+            ev.keyCode == KeyCode.END)
+        {
             this.jumpToLiveTimeline();
         } else {
             this.refs.messagePanel.handleScrollKey(ev);

src/components/structures/UserSettings.js

@@ -31,10 +31,14 @@ var SdkConfig = require('../../SdkConfig');
 import AccessibleButton from '../views/elements/AccessibleButton';
 
 // if this looks like a release, use the 'version' from package.json; else use
-// the git sha.
+// the git sha. Prepend version with v, to look like riot-web version
-const REACT_SDK_VERSION =
+const REACT_SDK_VERSION = 'dist' in package_json ? `v${package_json.version}` : package_json.gitHead || '<local>';
-      'dist' in package_json ? package_json.version : package_json.gitHead || "<local>";
 
+// Simple method to help prettify GH Release Tags and Commit Hashes.
+const GHVersionUrl = function(repo, token) {
+    const uriTail = (token.startsWith('v') && token.includes('.')) ? `releases/tag/${token}` : `commit/${token}`;
+    return `https://github.com/${repo}/${uriTail}`;
+}
 
 // Enumerate some simple 'flip a bit' UI settings (if any).
 // 'id' gives the key name in the im.vector.web.settings account data event
@@ -44,6 +48,14 @@ const SETTINGS_LABELS = [
         id: 'autoplayGifsAndVideos',
         label: 'Autoplay GIFs and videos',
     },
+    {
+        id: 'hideReadReceipts',
+        label: 'Hide read receipts'
+    },
+    {
+        id: 'dontSendTypingNotifications',
+        label: "Don't send typing notifications",
+    },
 /*
     {
         id: 'alwaysShowTimestamps',
@@ -211,7 +223,7 @@ module.exports = React.createClass({
             console.error("Failed to load user settings: " + error);
             Modal.createDialog(ErrorDialog, {
                 title: "Can't load user settings",
-                description: "Server may be unavailable or overloaded",
+                description: ((error && error.message) ? error.message : "Server may be unavailable or overloaded"),
             });
         });
     },
@@ -252,8 +264,8 @@ module.exports = React.createClass({
             console.error("Failed to set avatar: " + err);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
+                title: "Failed to set avatar",
-                description: "Failed to set avatar."
+                description: ((err && err.message) ? err.message : "Operation failed"),
             });
         });
     },
@@ -271,7 +283,7 @@ module.exports = React.createClass({
                 </div>,
             button: "Sign out",
             extraButtons: [
-                <button className="mx_Dialog_primary"
+                <button key="export" className="mx_Dialog_primary"
                         onClick={this._onExportE2eKeysClicked}>
                     Export E2E room keys
                 </button>
@@ -354,8 +366,8 @@ module.exports = React.createClass({
             this.setState({email_add_pending: false});
             console.error("Unable to add email address " + email_address + " " + err);
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
+                title: "Unable to add email address",
-                description: "Unable to add email address"
+                description: ((err && err.message) ? err.message : "Operation failed"),
             });
         });
         ReactDOM.findDOMNode(this.refs.add_email_input).blur();
@@ -379,8 +391,8 @@ module.exports = React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Unable to remove contact information: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Error",
+                            title: "Unable to remove contact information",
-                            description: "Unable to remove contact information",
+                            description: ((err && err.message) ? err.message : "Operation failed"),
                         });
                     }).done();
                 }
@@ -420,8 +432,8 @@ module.exports = React.createClass({
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Unable to verify email address: " + err);
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
+                    title: "Unable to verify email address",
-                    description: "Unable to verify email address",
+                    description: ((err && err.message) ? err.message : "Operation failed"),
                 });
             }
         });
@@ -763,6 +775,20 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _showSpoiler: function(event) {
+        const target = event.target;
+        const hidden = target.getAttribute('data-spoiler');
+
+        target.innerHTML = hidden;
+
+        const range = document.createRange();
+        range.selectNodeContents(target);
+
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    },
+
     nameForMedium: function(medium) {
         if (medium == 'msisdn') return 'Phone';
         return medium[0].toUpperCase() + medium.slice(1);
@@ -880,12 +906,12 @@ module.exports = React.createClass({
             </div>);
         }
 
-        var olmVersion = MatrixClientPeg.get().olmVersion;
+        const olmVersion = MatrixClientPeg.get().olmVersion;
         // If the olmVersion is not defined then either crypto is disabled, or
         // we are using a version old version of olm. We assume the former.
-        var olmVersionString = "<not-enabled>";
+        let olmVersionString = "<not-enabled>";
         if (olmVersion !== undefined) {
-            olmVersionString = olmVersion[0] + "." + olmVersion[1] + "." + olmVersion[2];
+            olmVersionString = `v${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}`;
         }
 
         return (
@@ -958,6 +984,9 @@ module.exports = React.createClass({
                     <div className="mx_UserSettings_advanced">
                         Logged in as {this._me}
                     </div>
+                    <div className="mx_UserSettings_advanced">
+                        Access Token: <span className="mx_UserSettings_advanced_spoiler" onClick={this._showSpoiler} data-spoiler={ MatrixClientPeg.get().getAccessToken() }>&lt;click to reveal&gt;</span>
+                    </div>
                     <div className="mx_UserSettings_advanced">
                         Homeserver is { MatrixClientPeg.get().getHomeserverUrl() }
                     </div>
@@ -965,8 +994,14 @@ module.exports = React.createClass({
                         Identity Server is { MatrixClientPeg.get().getIdentityServerUrl() }
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        matrix-react-sdk version: {REACT_SDK_VERSION}<br/>
+                        matrix-react-sdk version: {(REACT_SDK_VERSION !== '<local>')
-                        riot-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}<br/>
+                            ? <a href={ GHVersionUrl('matrix-org/matrix-react-sdk', REACT_SDK_VERSION) }>{REACT_SDK_VERSION}</a>
+                            : REACT_SDK_VERSION
+                        }<br/>
+                        riot-web version: {(this.state.vectorVersion !== null)
+                            ? <a href={ GHVersionUrl('vector-im/riot-web', this.state.vectorVersion.split('-')[0]) }>{this.state.vectorVersion}</a>
+                            : 'unknown'
+                        }<br/>
                         olm version: {olmVersionString}<br/>
                     </div>
                 </div>

src/components/views/dialogs/BaseDialog.js

@@ -47,6 +47,16 @@ export default React.createClass({
         children: React.PropTypes.node,
     },
 
+    componentWillMount: function() {
+        this.priorActiveElement = document.activeElement;
+    },
+
+    componentWillUnmount: function() {
+        if (this.priorActiveElement !== null) {
+            this.priorActiveElement.focus();
+        }
+    },
+
     _onKeyDown: function(e) {
         if (e.keyCode === KeyCode.ESCAPE) {
             e.stopPropagation();

src/components/views/dialogs/ChatInviteDialog.js

@@ -308,8 +308,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
+                    title: "Failed to invite",
-                    description: "Failed to invite",
+                    description: ((err && err.message) ? err.message : "Operation failed"),
                 });
                 return null;
             })
@@ -321,8 +321,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
+                    title: "Failed to invite user",
-                    description: "Failed to invite user",
+                    description: ((err && err.message) ? err.message : "Operation failed"),
                 });
                 return null;
             })
@@ -342,8 +342,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
+                    title: "Failed to invite",
-                    description: "Failed to invite",
+                    description: ((err && err.message) ? err.message : "Operation failed"),
                 });
                 return null;
             })

src/components/views/dialogs/ErrorDialog.js

@@ -50,6 +50,12 @@ export default React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        if (this.props.focus) {
+            this.refs.button.focus();
+        }
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
@@ -59,7 +65,7 @@ export default React.createClass({
                     {this.props.description}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={this.props.focus}>
+                    <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
                         {this.props.button}
                     </button>
                 </div>

src/components/views/messages/MFileBody.js

@@ -346,7 +346,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank">
+                            <a className="mx_ImageBody_downloadLink" href={contentUrl} download={fileName} target="_blank">
                                 { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
@@ -360,7 +360,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a href={contentUrl} target="_blank" rel="noopener">
+                            <a href={contentUrl} download={fileName} target="_blank" rel="noopener">
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
                                 Download {text}
                             </a>

src/components/views/messages/MImageBody.js

@@ -56,6 +56,7 @@ module.exports = React.createClass({
             const ImageView = sdk.getComponent("elements.ImageView");
             const params = {
                 src: httpUrl,
+                name: content.body && content.body.length > 0 ? content.body : 'Attachment',
                 mxEvent: this.props.mxEvent,
             };
 

src/components/views/rooms/EventTile.js

@@ -284,6 +284,12 @@ module.exports = WithMatrixClient(React.createClass({
     },
 
     getReadAvatars: function() {
+
+        // return early if there are no read receipts
+        if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
+            return (<span className="mx_EventTile_readAvatars"></span>);
+        }
+
         const ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
         const avatars = [];
         const receiptOffset = 15;

src/components/views/rooms/MemberInfo.js

@@ -241,8 +241,8 @@ module.exports = WithMatrixClient(React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Kick error: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Error", 
+                            title: "Failed to kick",
-                            description: "Failed to kick user",
+                            description: ((err && err.message) ? err.message : "Operation failed"),
                         });
                     }
                 ).finally(()=>{

src/components/views/rooms/MessageComposerInput.js

@@ -355,6 +355,7 @@ export default class MessageComposerInput extends React.Component {
     }
 
     sendTyping(isTyping) {
+        if (UserSettingsStore.getSyncedSetting('dontSendTypingNotifications', false)) return;
         MatrixClientPeg.get().sendTyping(
             this.props.room.roomId,
             this.isTyping, TYPING_SERVER_TIMEOUT
@@ -509,7 +510,7 @@ export default class MessageComposerInput extends React.Component {
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
                         title: "Server error",
-                        description: "Server unavailable, overloaded, or something else went wrong.",
+                        description: ((err && err.message) ? err.message : "Server unavailable, overloaded, or something else went wrong."),
                     });
                 });
             }

src/components/views/rooms/MessageComposerInputOld.js

@@ -20,6 +20,7 @@ var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
 var sdk = require('../../../index');
+import UserSettingsStore from "../../../UserSettingsStore";
 
 var dis = require("../../../dispatcher");
 var KeyCode = require("../../../KeyCode");
@@ -311,7 +312,7 @@ export default React.createClass({
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
                         title: "Server error",
-                        description: "Server unavailable, overloaded, or something else went wrong.",
+                        description: ((err && err.message) ? err.message : "Server unavailable, overloaded, or something else went wrong."),
                     });
                 });
             }
@@ -420,6 +421,7 @@ export default React.createClass({
     },
 
     sendTyping: function(isTyping) {
+        if (UserSettingsStore.getSyncedSetting('dontSendTypingNotifications', false)) return;
         MatrixClientPeg.get().sendTyping(
             this.props.room.roomId,
             this.isTyping, TYPING_SERVER_TIMEOUT

src/components/views/rooms/PresenceLabel.js

@@ -75,7 +75,7 @@ module.exports = React.createClass({
 
     render: function() {
         if (this.props.activeAgo >= 0) {
-            var ago = this.props.currentlyActive ? "now" : (this.getDuration(this.props.activeAgo) + " ago");
+            var ago = this.props.currentlyActive ? "" : "for " + (this.getDuration(this.props.activeAgo));
             // var ago = this.getDuration(this.props.activeAgo) + " ago";
             // if (this.props.currentlyActive) ago += " (now?)";
             return (

src/components/views/rooms/RoomList.js

@@ -265,9 +265,16 @@ module.exports = React.createClass({
     },
 
     onRoomStateMember: function(ev, state, member) {
+        if (ev.getStateKey() === MatrixClientPeg.get().credentials.userId && 
+            ev.getPrevContent() && ev.getPrevContent().membership === "invite")
+        {
+            this._delayedRefreshRoomList();
+        }
+        else {
             constantTimeDispatcher.dispatch(
                 "RoomTile.refresh", member.roomId, {}
             );
+        }
     },
 
     onRoomMemberName: function(ev, member) {
@@ -449,11 +456,10 @@ module.exports = React.createClass({
         var panel = ReactDOM.findDOMNode(this);
         if (!panel) return null;
 
-        if (panel.classList.contains('gm-prevented')) {
+        // empirically, if we have gm-prevented for some reason, the scroll node
-            return panel;
+        // is still the 3rd child (i.e. the view child).  This looks to be due
-        } else {
+        // to vdh's improved resize updater logic...?
         return panel.children[2]; // XXX: Fragile!
-        }
     },
 
     _whenScrolling: function(e) {
@@ -476,7 +482,7 @@ module.exports = React.createClass({
             // Use the offset of the top of the scroll area from the window
             // as this is used to calculate the CSS fixed top position for the stickies
             var scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
-            // Use the offset of the top of the componet from the window
+            // Use the offset of the top of the component from the window
             // as this is used to calculate the CSS fixed top position for the stickies
             var scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
 
@@ -499,7 +505,7 @@ module.exports = React.createClass({
         // Use the offset of the top of the scroll area from the window
         // as this is used to calculate the CSS fixed top position for the stickies
         var scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
-        // Use the offset of the top of the componet from the window
+        // Use the offset of the top of the component from the window
         // as this is used to calculate the CSS fixed top position for the stickies
         var scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
 
@@ -599,7 +605,7 @@ module.exports = React.createClass({
 
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
-                 autoshow={true} onScroll={ self._whenScrolling } ref="gemscroll">
+                 autoshow={true} onScroll={ self._whenScrolling } onResize={ self._whenScrolling } ref="gemscroll">
             <div className="mx_RoomList" onMouseOver={ this._onMouseOver }>
                 <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
                              label="Invites"

src/components/views/rooms/RoomSettings.js

@@ -129,6 +129,8 @@ module.exports = React.createClass({
             console.error("Failed to get room visibility: " + err);
         });
 
+        this.scalarClient = null;
+        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
             this.scalarClient = new ScalarAuthClient();
             this.scalarClient.connect().done(() => {
                 this.forceUpdate();
@@ -137,6 +139,7 @@ module.exports = React.createClass({
                     scalar_error: err
                 });
             });
+        }
 
         dis.dispatch({
             action: 'ui_opacity',
@@ -490,7 +493,7 @@ module.exports = React.createClass({
         ev.preventDefault();
         var IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
         Modal.createDialog(IntegrationsManager, {
-            src: this.scalarClient.hasCredentials() ?
+            src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                     this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) :
                     null,
             onFinished: ()=>{
@@ -765,8 +768,10 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        var integrationsButton;
+        let integrationsButton;
-        var integrationsError;
+        let integrationsError;
+
+        if (this.scalarClient !== null) {
             if (this.state.showIntegrationsError && this.state.scalar_error) {
                 console.error(this.state.scalar_error);
                 integrationsError = (
@@ -796,6 +801,7 @@ module.exports = React.createClass({
                     </div>
                 );
             }
+        }
 
         return (
             <div className="mx_RoomSettings">

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -32,7 +33,10 @@ module.exports = React.createClass({
             <div className="mx_TopUnreadMessagesBar">
                 <div className="mx_TopUnreadMessagesBar_scrollUp"
                         onClick={this.props.onScrollUpClick}>
-                    Jump to first unread message. <span style={{ textDecoration: 'underline' }} onClick={this.props.onCloseClick}>Mark all read</span>
+                    <img src="img/scrollto.svg" width="24" height="24"
+                        alt="Scroll to unread messages"
+                        title="Scroll to unread messages"/>
+                    Jump to first unread message.
                 </div>
                 <img className="mx_TopUnreadMessagesBar_close"
                     src="img/cancel.svg" width="18" height="18"

src/linkify-matrix.js

@@ -122,7 +122,7 @@ var escapeRegExp = function(string) {
 // anyone else really should be using matrix.to.
 matrixLinkify.VECTOR_URL_PATTERN = "^(?:https?:\/\/)?(?:"
     + escapeRegExp(window.location.host + window.location.pathname) + "|"
-    + "(?:www\\.)?(?:riot|vector)\\.im/(?:beta|staging|develop)/"
+    + "(?:www\\.)?(?:riot|vector)\\.im/(?:app|beta|staging|develop)/"
     + ")(#.*)";
 
 matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/((#|@|!).*)";