Merge remote-tracking branch 'origin/develop' into dbkr/left_panel_for_newbies_2

package.json

@@ -53,7 +53,7 @@
     "draft-js-export-markdown": "^0.2.0",
     "emojione": "2.2.3",
     "file-saver": "^1.3.3",
-    "filesize": "^3.1.2",
+    "filesize": "3.5.6",
     "flux": "^2.0.3",
     "fuse.js": "^2.2.0",
     "glob": "^5.0.14",

src/Notifier.js

@@ -15,11 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var MatrixClientPeg = require("./MatrixClientPeg");
+import MatrixClientPeg from './MatrixClientPeg';
-var PlatformPeg = require("./PlatformPeg");
+import PlatformPeg from './PlatformPeg';
-var TextForEvent = require('./TextForEvent');
+import TextForEvent from './TextForEvent';
-var Avatar = require('./Avatar');
+import Avatar from './Avatar';
-var dis = require("./dispatcher");
+import dis from './dispatcher';
+import sdk from './index';
+import Modal from './Modal';
 
 /*
  * Dispatches:
@@ -29,7 +31,7 @@ var dis = require("./dispatcher");
  * }
  */
 
-var Notifier = {
+const Notifier = {
     notifsByRoom: {},
 
     notificationMessageForEvent: function(ev) {
@@ -48,16 +50,16 @@ var Notifier = {
             return;
         }
 
-        var msg = this.notificationMessageForEvent(ev);
+        let msg = this.notificationMessageForEvent(ev);
         if (!msg) return;
 
-        var title;
+        let title;
-        if (!ev.sender || room.name == ev.sender.name) {
+        if (!ev.sender || room.name === ev.sender.name) {
             title = room.name;
             // notificationMessageForEvent includes sender,
             // but we already have the sender here
             if (ev.getContent().body) msg = ev.getContent().body;
-        } else if (ev.getType() == 'm.room.member') {
+        } else if (ev.getType() === 'm.room.member') {
             // context is all in the message here, we don't need
             // to display sender info
             title = room.name;
@@ -68,7 +70,7 @@ var Notifier = {
             if (ev.getContent().body) msg = ev.getContent().body;
         }
 
-        var avatarUrl = ev.sender ? Avatar.avatarUrlForMember(
+        const avatarUrl = ev.sender ? Avatar.avatarUrlForMember(
             ev.sender, 40, 40, 'crop'
         ) : null;
 
@@ -83,7 +85,7 @@ var Notifier = {
     },
 
     _playAudioNotification: function(ev, room) {
-        var e = document.getElementById("messageAudio");
+        const e = document.getElementById("messageAudio");
         if (e) {
             e.load();
             e.play();
@@ -95,7 +97,7 @@ var Notifier = {
         this.boundOnSyncStateChange = this.onSyncStateChange.bind(this);
         this.boundOnRoomReceipt = this.onRoomReceipt.bind(this);
         MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
-        MatrixClientPeg.get().on("Room.receipt", this.boundOnRoomReceipt);
+        MatrixClientPeg.get().on('Room.receipt', this.boundOnRoomReceipt);
         MatrixClientPeg.get().on("sync", this.boundOnSyncStateChange);
         this.toolbarHidden = false;
         this.isSyncing = false;
@@ -104,7 +106,7 @@ var Notifier = {
     stop: function() {
         if (MatrixClientPeg.get() && this.boundOnRoomTimeline) {
             MatrixClientPeg.get().removeListener('Room.timeline', this.boundOnRoomTimeline);
-            MatrixClientPeg.get().removeListener("Room.receipt", this.boundOnRoomReceipt);
+            MatrixClientPeg.get().removeListener('Room.receipt', this.boundOnRoomReceipt);
             MatrixClientPeg.get().removeListener('sync', this.boundOnSyncStateChange);
         }
         this.isSyncing = false;
@@ -121,7 +123,7 @@ var Notifier = {
         // make sure that we persist the current setting audio_enabled setting
         // before changing anything
         if (global.localStorage) {
-            if(global.localStorage.getItem('audio_notifications_enabled') == null) {
+            if (global.localStorage.getItem('audio_notifications_enabled') === null) {
                 this.setAudioEnabled(this.isEnabled());
             }
         }
@@ -131,6 +133,16 @@ var Notifier = {
             plaf.requestNotificationPermission().done((result) => {
                 if (result !== 'granted') {
                     // The permission request was dismissed or denied
+                    const description = result === 'denied'
+                        ? 'Riot does not have permission to send you notifications'
+                        + ' - please check your browser settings'
+                        : 'Riot was not given permission to send notifications'
+                        + ' - please try again';
+                    const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+                    Modal.createDialog(ErrorDialog, {
+                        title: 'Unable to enable Notifications',
+                        description,
+                    });
                     return;
                 }
 
@@ -141,7 +153,7 @@ var Notifier = {
                 if (callback) callback();
                 dis.dispatch({
                     action: "notifier_enabled",
-                    value: true
+                    value: true,
                 });
             });
             // clear the notifications_hidden flag, so that if notifications are
@@ -152,7 +164,7 @@ var Notifier = {
             global.localStorage.setItem('notifications_enabled', 'false');
             dis.dispatch({
                 action: "notifier_enabled",
-                value: false
+                value: false,
             });
         }
     },
@@ -165,7 +177,7 @@ var Notifier = {
 
         if (!global.localStorage) return true;
 
-        var enabled = global.localStorage.getItem('notifications_enabled');
+        const enabled = global.localStorage.getItem('notifications_enabled');
         if (enabled === null) return true;
         return enabled === 'true';
     },
@@ -173,12 +185,12 @@ var Notifier = {
     setAudioEnabled: function(enable) {
         if (!global.localStorage) return;
         global.localStorage.setItem('audio_notifications_enabled',
-                                    enable ? 'true' : 'false');
+            enable ? 'true' : 'false');
     },
 
     isAudioEnabled: function(enable) {
         if (!global.localStorage) return true;
-        var enabled = global.localStorage.getItem(
+        const enabled = global.localStorage.getItem(
             'audio_notifications_enabled');
         // default to true if the popups are enabled
         if (enabled === null) return this.isEnabled();
@@ -192,7 +204,7 @@ var Notifier = {
         // this is nothing to do with notifier_enabled
         dis.dispatch({
             action: "notifier_enabled",
-            value: this.isEnabled()
+            value: this.isEnabled(),
         });
 
         // update the info to localStorage for persistent settings
@@ -215,8 +227,7 @@ var Notifier = {
     onSyncStateChange: function(state) {
         if (state === "SYNCING") {
             this.isSyncing = true;
-        }
+        } else if (state === "STOPPED" || state === "ERROR") {
-        else if (state === "STOPPED" || state === "ERROR") {
             this.isSyncing = false;
         }
     },
@@ -225,10 +236,10 @@ var Notifier = {
         if (toStartOfTimeline) return;
         if (!room) return;
         if (!this.isSyncing) return; // don't alert for any messages initially
-        if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;
+        if (ev.sender && ev.sender.userId === MatrixClientPeg.get().credentials.userId) return;
         if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
 
-        var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+        const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
         if (actions && actions.notify) {
             if (this.isEnabled()) {
                 this._displayPopupNotification(ev, room);
@@ -240,7 +251,7 @@ var Notifier = {
     },
 
     onRoomReceipt: function(ev, room) {
-        if (room.getUnreadNotificationCount() == 0) {
+        if (room.getUnreadNotificationCount() === 0) {
             // ideally we would clear each notification when it was read,
             // but we have no way, given a read receipt, to know whether
             // the receipt comes before or after an event, so we can't
@@ -255,7 +266,7 @@ var Notifier = {
             }
             delete this.notifsByRoom[room.roomId];
         }
-    }
+    },
 };
 
 if (!global.mxNotifier) {

src/components/structures/MessagePanel.js

@@ -354,7 +354,6 @@ module.exports = React.createClass({
                     <MemberEventListSummary
                         key={key}
                         events={summarisedEvents}
-                        data-scroll-token={eventId}
                         onToggle={this._onWidgetLoad} // Update scroll state
                     >
                             {eventTiles}
@@ -473,7 +472,7 @@ module.exports = React.createClass({
         ret.push(
                 <li key={eventId}
                         ref={this._collectEventNode.bind(this, eventId)}
-                        data-scroll-token={scrollToken}>
+                        data-scroll-tokens={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         isRedacted={mxEv.isRedacted()}
                         onWidgetLoad={this._onWidgetLoad}

src/components/structures/ScrollPanel.js

@@ -46,9 +46,13 @@ if (DEBUG_SCROLL) {
  * It also provides a hook which allows parents to provide more list elements
  * when we get close to the start or end of the list.
  *
- * Each child element should have a 'data-scroll-token'. This token is used to
+ * Each child element should have a 'data-scroll-tokens'. This string of
- * serialise the scroll state, and returned as the 'trackedScrollToken'
+ * comma-separated tokens may contain a single token or many, where many indicates
- * attribute by getScrollState().
+ * that the element contains elements that have scroll tokens themselves. The first
+ * token in 'data-scroll-tokens' is used to serialise the scroll state, and returned
+ * as the 'trackedScrollToken' attribute by getScrollState().
+ *
+ * IMPORTANT: INDIVIDUAL TOKENS WITHIN 'data-scroll-tokens' MUST NOT CONTAIN COMMAS.
  *
  * Some notes about the implementation:
  *
@@ -349,8 +353,8 @@ module.exports = React.createClass({
             // Subtract height of tile as if it were unpaginated
             excessHeight -= tile.clientHeight;
             // The tile may not have a scroll token, so guard it
-            if (tile.dataset.scrollToken) {
+            if (tile.dataset.scrollTokens) {
-                markerScrollToken = tile.dataset.scrollToken;
+                markerScrollToken = tile.dataset.scrollTokens.split(',')[0];
             }
             if (tile.clientHeight > excessHeight) {
                 break;
@@ -419,7 +423,8 @@ module.exports = React.createClass({
      *   scroll. false if we are tracking a particular child.
      *
      * string trackedScrollToken: undefined if stuckAtBottom is true; if it is
-     *   false, the data-scroll-token of the child which we are tracking.
+     *   false, the first token in data-scroll-tokens of the child which we are
+     *   tracking.
      *
      * number pixelOffset: undefined if stuckAtBottom is true; if it is false,
      *   the number of pixels the bottom of the tracked child is above the
@@ -551,8 +556,10 @@ module.exports = React.createClass({
         var messages = this.refs.itemlist.children;
         for (var i = messages.length-1; i >= 0; --i) {
             var m = messages[i];
-            if (!m.dataset.scrollToken) continue;
+            // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
-            if (m.dataset.scrollToken == scrollToken) {
+            // There might only be one scroll token
+            if (m.dataset.scrollTokens &&
+                m.dataset.scrollTokens.split(',').indexOf(scrollToken) !== -1) {
                 node = m;
                 break;
             }
@@ -568,7 +575,7 @@ module.exports = React.createClass({
         var boundingRect = node.getBoundingClientRect();
         var scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
 
-        debuglog("ScrollPanel: scrolling to token '" + node.dataset.scrollToken + "'+" +
+        debuglog("ScrollPanel: scrolling to token '" + scrollToken + "'+" +
                  pixelOffset + " (delta: "+scrollDelta+")");
 
         if(scrollDelta != 0) {
@@ -591,12 +598,12 @@ module.exports = React.createClass({
 
         for (var i = messages.length-1; i >= 0; --i) {
             var node = messages[i];
-            if (!node.dataset.scrollToken) continue;
+            if (!node.dataset.scrollTokens) continue;
 
             var boundingRect = node.getBoundingClientRect();
             newScrollState = {
                 stuckAtBottom: false,
-                trackedScrollToken: node.dataset.scrollToken,
+                trackedScrollToken: node.dataset.scrollTokens.split(',')[0],
                 pixelOffset: wrapperRect.bottom - boundingRect.bottom,
             };
             // If the bottom of the panel intersects the ClientRect of node, use this node
@@ -608,7 +615,7 @@ module.exports = React.createClass({
                 break;
             }
         }
-        // This is only false if there were no nodes with `node.dataset.scrollToken` set.
+        // This is only false if there were no nodes with `node.dataset.scrollTokens` set.
         if (newScrollState) {
             this.scrollState = newScrollState;
             debuglog("ScrollPanel: saved scroll state", this.scrollState);

src/components/structures/login/Login.js

@@ -23,6 +23,9 @@ import url from 'url';
 import sdk from '../../../index';
 import Login from '../../../Login';
 
+// For validating phone numbers without country codes
+const PHONE_NUMBER_REGEX = /^[0-9\(\)\-\s]*$/;
+
 /**
  * A wire component which glues together login UI components and Login logic
  */
@@ -125,7 +128,16 @@ module.exports = React.createClass({
     },
 
     onPhoneNumberChanged: function(phoneNumber) {
-        this.setState({ phoneNumber: phoneNumber });
+        // Validate the phone number entered
+        if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
+            this.setState({ errorText: 'The phone number entered looks invalid' });
+            return;
+        }
+
+        this.setState({
+            phoneNumber: phoneNumber,
+            errorText: null,
+        });
     },
 
     onServerConfigChange: function(config) {

src/components/views/elements/MemberEventListSummary.js

@@ -369,6 +369,7 @@ module.exports = React.createClass({
 
     render: function() {
         const eventsToRender = this.props.events;
+        const eventIds = eventsToRender.map(e => e.getId()).join(',');
         const fewEvents = eventsToRender.length < this.props.threshold;
         const expanded = this.state.expanded || fewEvents;
 
@@ -379,7 +380,7 @@ module.exports = React.createClass({
 
         if (fewEvents) {
             return (
-                <div className="mx_MemberEventListSummary">
+                <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                     {expandedEvents}
                 </div>
             );
@@ -437,7 +438,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberEventListSummary">
+            <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                 {toggleButton}
                 {summaryContainer}
                 {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}

src/components/views/rooms/SearchResultTile.js

@@ -60,7 +60,7 @@ module.exports = React.createClass({
             }
         }
         return (
-            <li data-scroll-token={eventId+"+"+j}>
+            <li data-scroll-tokens={eventId+"+"+j}>
                 {ret}
             </li>);
     },

test/components/structures/ScrollPanel-test.js

@@ -115,7 +115,7 @@ var Tester = React.createClass({
         //
         // there is an extra 50 pixels of margin at the bottom.
         return (
-            <li key={key} data-scroll-token={key}>
+            <li key={key} data-scroll-tokens={key}>
                 <div style={{height: '98px', margin: '50px', border: '1px solid black',
                              backgroundColor: '#fff8dc' }}>
                    {key}