merge develop

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+    - 6   # node v6, to match jenkins
+install:
+    - npm install
+    - (cd node_modules/matrix-react-sdk && npm run build)

CHANGELOG.md

@@ -1,3 +1,40 @@
+Changes in [0.7.5-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r1) (2016-08-28)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5...v0.7.5-r1)
+
+ * Correctly pin deps :(
+
+Changes in [0.7.5](https://github.com/vector-im/vector-web/releases/tag/v0.7.5) (2016-08-28)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4-r1...v0.7.5)
+
+ * re-add leave button in RoomSettings
+ * add /user URLs
+ * recognise matrix.to links and other vector links
+ * fix linkify dependency
+ * fix avatar clicking in MemberInfo
+ * fix RoomTagContextMenu so it works on historical rooms
+ * warn people to put their Matrix HS on a separate domain to Vector
+ * fix zalgos again
+ * Add .travis.yml
+   [\#2007](https://github.com/vector-im/vector-web/pull/2007)
+ * add fancy changelog dialog
+   [\#1972](https://github.com/vector-im/vector-web/pull/1972)
+ * Update autocomplete design
+   [\#1978](https://github.com/vector-im/vector-web/pull/1978)
+ * Update encryption info in README
+   [\#2001](https://github.com/vector-im/vector-web/pull/2001)
+ * Added event/info message avatars back in
+   [\#2000](https://github.com/vector-im/vector-web/pull/2000)
+ * Wmwragg/chat message presentation
+   [\#1987](https://github.com/vector-im/vector-web/pull/1987)
+ * Make the notification slider work
+   [\#1982](https://github.com/vector-im/vector-web/pull/1982)
+ * Use cpx to copy olm.js, and add watcher
+   [\#1966](https://github.com/vector-im/vector-web/pull/1966)
+ * Make up a device display name
+   [\#1959](https://github.com/vector-im/vector-web/pull/1959)
+
 Changes in [0.7.4-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.4-r1) (2016-08-12)
 ==================================================================================================
 [Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4...v0.7.4-r1)

README.md

@@ -8,7 +8,7 @@ Getting Started
 
 The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta.
 The develop branch is continuously deployed by Jenkins at https://vector.im/develop for
-those who like living dangerously. 
+those who like living dangerously.
 
 To host your own copy of Vector, the quickest bet is to use a pre-built released version
 of Vector:
@@ -20,6 +20,19 @@ of Vector:
    as desired. See below for details.
 1. Enter the URL into your browser and log into vector!
 
+Important Security Note
+=======================
+
+We do not recommend running Vector from the same domain name as your Matrix
+homeserver.  The reason is the risk of XSS (cross-site-scripting) vulnerabilities
+that could occur if someone caused Vector to load and render malicious user generated
+content from a Matrix API which then had trusted access to Vector (or other apps) due
+to sharing the same domain.
+
+We have put some coarse mitigations into place to try to protect against this situation,
+but it's still not good practice to do it in the first place.
+See https://github.com/vector-im/vector-web/issues/1977 for more details.
+
 Building From Source
 ====================
 
@@ -55,7 +68,7 @@ You can configure the app by copying `vector/config.sample.json` to
    for verifying third party identifiers like email addresses). If this is blank,
    registering with an email address, adding an email address to your account,
    or inviting users via email address will not work.  Matrix identity servers are
-   very simple web services which map third party identifiers (currently only email 
+   very simple web services which map third party identifiers (currently only email
    addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html
    for more details.  Currently the only public matrix identity servers are https://matrix.org
    and https://vector.im.  In future identity servers will be decentralised.
@@ -75,7 +88,9 @@ nativefier https://vector.im/beta/
 ```
 
 krisa has a dedicated electron project at https://github.com/krisak/vector-electron-desktop
-(although you should swap out the 'vector' folder for the latest vector tarball you want to run)
+(although you should swap out the 'vector' folder for the latest vector tarball you want to run.
+Get a tarball from https://vector.im/packages or build your own - see Building From Source
+above).
 
 There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop
 
@@ -216,20 +231,13 @@ day-to-day use; it is experimental and should be considered only as a
 proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
 of the current progress.
 
-Vector is built with support for end-to-end encryption by default.
-
-To enable encryption for a room, type
-
-```
-/encrypt on
-```
-
-in the message bar in that room. Vector will then generate a set of keys, and
-encrypt all outgoing messages in that room. (Note that other people in that
-room will send messages in the clear unless they also `/encrypt on`.)
+To enable the (very experimental) support, check the 'End-to-End Encryption'
+box in the 'Labs' section of the user settings (note that the labs are disabled
+on http://vector.im/beta: you will need to use http://vector.im/develop or your
+own deployment of vector). The Room Settings dialog will then show an
+'Encryption' setting; rooms for which you are an administrator will offer you
+the option of enabling encryption. Any messages sent in that room will then be
+encrypted.
 
 Note that historical encrypted messages cannot currently be decoded - history
 is therefore lost when the page is reloaded.
-
-There is currently no visual indication of whether encryption is enabled for a
-room.

jenkins.sh

@@ -4,12 +4,15 @@ set -e
 
 export NVM_DIR="/home/jenkins/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 4
+nvm use 6
 
 set -x
 
 npm install
 
+# apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked.
+npm install matrix-react-sdk matrix-js-sdk
+
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vector-web",
-  "version": "0.7.4-r1",
+  "version": "0.7.5-r1",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -46,9 +46,9 @@
     "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
-    "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
+    "linkifyjs": "2.0.0-beta.4",
+    "matrix-js-sdk": "0.5.6",
+    "matrix-react-sdk": "0.6.5",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.2.1",

src/component-index.js

@@ -37,6 +37,7 @@ module.exports.components['structures.ViewSource'] = require('./components/struc
 module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
 module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
 module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
+module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');

src/components/structures/RightPanel.js

@@ -17,7 +17,8 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+var Matrix = require("matrix-js-sdk");
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
@@ -46,8 +47,17 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return {
-            phase : this.Phase.MemberList
+        if (this.props.userId) {
+            var member = new Matrix.RoomMember(null, this.props.userId);
+            return {
+                phase: this.Phase.MemberInfo,
+                member: member,
+            }
+        }
+        else {
+            return {
+                phase: this.Phase.MemberList
+            }
         }
     },
 
@@ -98,7 +108,7 @@ module.exports = React.createClass({
                 });
             }
         }
-        if (payload.action === "view_room") {
+        else if (payload.action === "view_room") {
             if (this.state.phase === this.Phase.MemberInfo) {
                 this.setState({
                     phase: this.Phase.MemberList
@@ -155,18 +165,18 @@ module.exports = React.createClass({
                             { notificationsHighlight }
                         </div>
                     </div>;
+        }
 
-            if (!this.props.collapsed) {
-                if (this.state.phase == this.Phase.MemberList) {
-                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
-                }
-                else if (this.state.phase == this.Phase.MemberInfo) {
-                    var MemberInfo = sdk.getComponent('rooms.MemberInfo');
-                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
-                }
-                else if (this.state.phase == this.Phase.NotificationPanel) {
-                    panel = <NotificationPanel />
-                }
+        if (!this.props.collapsed) {
+            if(this.props.roomId && this.state.phase == this.Phase.MemberList) {
+                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+            }
+            else if(this.state.phase == this.Phase.MemberInfo) {
+                var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
+            }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />
             }
         }
 

src/components/structures/RoomSubList.js

@@ -354,7 +354,7 @@ var RoomSubList = React.createClass({
             // is run with historical room tag data, after that there should only be undefined
             // in the list at a time anyway.
             for (let i = 0; i < list.length; i++) {
-                if (list[i].tags[self.props.tagName].order === undefined) {
+                if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) {
                     MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() {
                         // Do any final stuff here
                     }).fail(function(err) {

src/components/views/context_menus/MessageContextMenu.js

@@ -133,12 +133,11 @@ module.exports = React.createClass({
             }
         }
 
-        // XXX: this should be https://matrix.to.
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
-                   onClick={ this.onPermalinkClick }>Permalink</a>
+                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
+                   target="_blank" onClick={ this.onPermalinkClick }>Permalink</a>
             </div>
         );
 

src/components/views/context_menus/RoomTagContextMenu.js

@@ -126,6 +126,25 @@ module.exports = React.createClass({
         };
     },
 
+    _onClickForget: function() {
+        // FIXME: duplicated with RoomSettings (and dead code in RoomView)
+        MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
+            dis.dispatch({ action: 'view_next_room' });
+        }, function(err) {
+            var errCode = err.errcode || "unknown error code";
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: `Failed to forget room (${errCode})`
+            });
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var myMember = this.props.room.getMember(myUserId);
@@ -148,6 +167,17 @@ module.exports = React.createClass({
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
+        if (myMember && myMember.membership === "leave") {
+            return (
+                <div>
+                    <div className={ leaveClasses } onClick={ this._onClickForget } >
+                        <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                        Forget
+                    </div>
+                </div>
+            );
+        }
+
         return (
             <div>
                 <div className={ favouriteClasses } onClick={this._onClickFavourite} >

src/components/views/dialogs/ChangelogDialog.js

@@ -0,0 +1,82 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import request from 'browser-request';
+
+const REPOS = ['vector-im/vector-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
+
+export default class ChangelogDialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const version = this.props.newVersion.split('-');
+        const version2 = this.props.version.split('-');
+        if(version == null || version2 == null) return;
+        for(let i=0; i<REPOS.length; i++) {
+            const oldVersion = version2[2*i+1];
+            const newVersion = version[2*i+1];
+            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
+                if(body == null) return;
+                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+            });
+        }
+    }
+
+    render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+
+        const logs = REPOS.map(repo => {
+            if (this.state[repo] == null) return <Spinner key={repo} />;
+            return (
+                <div key={repo}>
+                    <h2>{repo}</h2>
+                    {this.state[repo].map(commit =>
+                        <div key={commit.commit.url}><a href={commit.commit.url}>{commit.commit.message}</a></div>
+                    )}
+                </div>
+            )
+        });
+
+        const content = (
+            <div className="mx_ChangelogDialog_content">
+                {this.props.version == null || this.props.newVersion == null ? <h2>Unavailable</h2> : logs}
+            </div>
+        );
+
+
+        return (
+            <QuestionDialog
+                title="Changelog"
+                description={content}
+                button="Update"
+                onFinished={this.props.onFinished}
+                />
+        )
+    }
+}
+
+ChangelogDialog.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/globals/NewVersionBar.js

@@ -17,20 +17,36 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+import Modal from 'matrix-react-sdk/lib/Modal';
 
-module.exports = React.createClass({
-    displayName: 'NewVersionBar',
+export default function NewVersionBar(props) {
+    const onChangelogClicked = () => {
+        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
 
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
-                    A new version of Vector is available. Refresh your browser.
-                </div>
+        Modal.createDialog(ChangelogDialog, {
+            version: props.version,
+            newVersion: props.newVersion,
+            onFinished: (update) => {
+                if(update) {
+                    window.location.reload();
+                }
+            }
+        });
+    };
+
+    return (
+        <div className="mx_MatrixToolbar">
+            <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
+            <div className="mx_MatrixToolbar_content">
+                A new version of Vector is available. Refresh your browser.
             </div>
-        );
-    }
-});
+            <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>
+        </div>
+    );
+}
 
+NewVersionBar.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+};

src/components/views/messages/MessageTimestamp.js

@@ -26,7 +26,7 @@ module.exports = React.createClass({
         var date = new Date(this.props.ts);
         return (
             <span className="mx_MessageTimestamp">
-                { DateUtils.formatDate(date) }
+                { DateUtils.formatTime(date) }
             </span>
         );
     },

src/skins/vector/css/common.css

@@ -251,7 +251,7 @@ input[type=text]:focus, textarea:focus {
     background-color: #fff;
 }
 
-.emojione {
+.mx_emojione {
     height: 1em;
     vertical-align: middle;
 }
@@ -267,7 +267,7 @@ input[type=text]:focus, textarea:focus {
 }
 
 /** green button with rounded corners */
-.textButton {
+.mx_textButton {
     color: #fff;
     background-color: #76cfa6;
     border-radius: 17px;

src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css

@@ -109,7 +109,7 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
-    padding-left: 25px;
+    padding-left: 20px;
     padding-right: 22px;
     background-color: #fff;
 

src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_MImageBody {
     display: block;
+    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {

src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css

@@ -4,7 +4,7 @@
     z-index: 1000;
     width: 100%;
     border: 1px solid #e5e5e5;
-    background: rgba(255, 255, 255, 0.9);
+    background: white;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
@@ -12,56 +12,68 @@
 }
 
 .mx_Autocomplete_ProviderSection {
-    padding: 12px;
     border-bottom: 1px solid #e5e5e5;
 }
 
-.mx_Autocomplete_ProviderSection * {
-    padding: 2px;
-    border-radius: 4px;
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
 }
 
-.mx_Autocomplete_Completion {
+/* a "block" completion takes up a whole line */
+.mx_Autocomplete_Completion_block {
+    height: 34px;
+    display: flex;
+    padding: 0 12px;
     user-select: none;
     cursor: pointer;
-    transition: 0.3s all ease;
-    display: flex;
     align-items: center;
+    color: #4a4a4a;
 }
 
-.mx_Autocomplete_Completion.selected * {
-    transition: 0.3s all ease;
+.mx_Autocomplete_Completion_block * {
+     margin: 0 3px;
+}
+
+.mx_Autocomplete_Completion_pill {
+    border-radius: 17px;
+    height: 34px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
+}
+
+.mx_Autocomplete_Completion_pill * {
+    margin: 0 3px;
+}
+
+/* container for pill-style completions */
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
 }
 
 .mx_Autocomplete_Completion.selected {
-    background: #76cfa6;
-    color: white;
+    background: #f6f6f6;
     outline: none;
 }
 
-.mx_Autocomplete_Completion.selected * {
-    color: white !important;
-}
-
 .mx_Autocomplete_provider_name {
-    color: #76cfa6;
-    font-weight: 600;
+    margin: 12px;
+    color: #454545;
+    font-weight: 400;
+    opacity: 0.4;
 }
 
-.autocomplete-enter {
-    opacity: 0.01;
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
 }
 
-.autocomplete-enter.autocomplete-enter-active {
-    opacity: 1;
-    transition: opacity 300ms ease-in;
-}
-
-.autocomplete-leave {
-    opacity: 1;
-}
-
-.autocomplete-leave.autocomplete-leave-active {
-    opacity: 0.01;
-    transition: opacity 300ms ease-in;
+.mx_Autocomplete_Completion_description {
+    color: gray;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -17,23 +17,30 @@ limitations under the License.
 .mx_EventTile {
     max-width: 100%;
     clear: both;
-    padding-top: 24px;
-    margin-left: 65px;
+    padding-top: 18px;
+    font-size: 14px;
+    position: relative;
+}
+
+.mx_EventTile.mx_EventTile_info {
+    padding-top: 0px;
 }
 
 .mx_EventTile_avatar {
-    padding-left: 18px;
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: -2px;
-    float: left;
-    position: relative;
-    top: 0px;
+    position: absolute;
+    top: 14px;
+    left: 8px;
     cursor: pointer;
+    z-index: 2;
+}
+
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    top: 8px;
+    left: 44px;
 }
 
 .mx_EventTile_continuation {
-    padding-top: 8px ! important;
+    padding-top: 0px ! important;
 }
 
 .mx_EventTile_verified {
@@ -47,79 +54,39 @@ limitations under the License.
 .mx_EventTile .mx_SenderProfile {
     color: #454545;
     opacity: 0.5;
-    display: inline-block;
-    font-size: 13px;
+    font-size: 14px;
+    display: block; /* anti-zalgo, with overflow hidden */
     overflow-y: hidden;
     cursor: pointer;
+    padding-left: 65px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 22px;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
     color: #acacac;
     font-size: 11px;
+    left: 8px;
+    position: absolute;
 }
 
 .mx_EventTile_line {
     position: relative;
     /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-    margin-right: 95px;
+    margin-right: 110px;
+    padding-left: 65px; /* left gutter */
+    padding-top: 4px;
+    padding-bottom: 2px;
+    border-radius: 4px;
+    min-height: 24px;
+    line-height: 22px;
 }
 
-/* all the overflow-y: hidden; are to trap Zalgos -
-   but they introduce an implicit overflow-x: auto.
-   so make that explicitly hidden too to avoid random
-   horizontal scrollbars occasionally appearing, like in
-   https://github.com/vector-im/vector-web/issues/1154
-    */
-.mx_EventTile_content {
-    display: block;
-    overflow-y: hidden;
-    overflow-x: hidden;
-}
-
-/* De-zalgoing */
-.mx_EventTile_body {
-    overflow-y: hidden;
-}
-
-/* Various markdown overrides */
-
-.mx_EventTile_content .markdown-body {
-    font-family: inherit ! important;
-    white-space: normal ! important;
-    line-height: inherit ! important;
-    color: inherit;
-    font-size: 15px;
-}
-
-/* have to use overlay rather than auto otherwise Linux and Windows
-   Chrome gets very confused about vertical spacing:
-   https://github.com/vector-im/vector-web/issues/754
-*/
-.mx_EventTile_content .markdown-body pre {
-    overflow-x: overlay;
-    overflow-y: visible;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2,
-.mx_EventTile_content .markdown-body h3,
-.mx_EventTile_content .markdown-body h4,
-.mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6
-{
-    font-family: inherit ! important;
-}
-
-.mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
-}
-
-.mx_EventTile_content .markdown-body .hljs {
-    display: inline ! important;
-}
-
-/* end of overrides */
-
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px ! important;
@@ -129,10 +96,16 @@ limitations under the License.
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected {
+.mx_EventTile_selected .mx_EventTile_line {
     border-left: #76cfa6 5px solid;
-    margin-left: 53px;
-    padding-left: 7px;
+    padding-left: 60px;
+    background-color: #f7f7f7;
+}
+
+.mx_EventTile:hover .mx_EventTile_line,
+.mx_EventTile.menu .mx_EventTile_line
+{
+    background-color: #f7f7f7;
 }
 
 .mx_EventTile_searchHighlight {
@@ -181,32 +154,29 @@ limitations under the License.
     text-decoration: none;
 }
 
-.mx_EventTile .mx_MessageTimestamp {
-    display: block;
-    visibility: hidden;
-    text-align: right;
-    white-space: nowrap;
-}
-
-.mx_EventTile_last .mx_MessageTimestamp {
+.mx_EventTile_last .mx_MessageTimestamp,
+.mx_EventTile:hover .mx_MessageTimestamp,
+.mx_EventTile.menu .mx_MessageTimestamp
+{
     visibility: visible;
 }
 
-.mx_EventTile:hover .mx_MessageTimestamp {
-    visibility: visible;
+.mx_EventTile_selected .mx_MessageTimestamp {
+    left: 3px;
 }
 
 .mx_EventTile_editButton {
     position: absolute;
     display: inline-block;
     visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
 }
 
-.mx_EventTile:hover .mx_EventTile_editButton {
-    visibility: visible;
-}
-
-.mx_EventTile.menu .mx_EventTile_editButton {
+.mx_EventTile:hover .mx_EventTile_editButton,
+.mx_EventTile.menu .mx_EventTile_editButton
+{
     visibility: visible;
 }
 
@@ -219,6 +189,13 @@ limitations under the License.
     display: inline-block;
     width: 14px;
     height: 14px;
+    top: 29px;
+}
+
+.mx_EventTile_continuation .mx_EventTile_readAvatars,
+.mx_EventTile_info .mx_EventTile_readAvatars
+{
+    top: 7px;
 }
 
 .mx_EventTile_readAvatars .mx_BaseAvatar {
@@ -231,3 +208,60 @@ limitations under the License.
     font-size: 11px;
     position: absolute;
 }
+
+/* all the overflow-y: hidden; are to trap Zalgos -
+   but they introduce an implicit overflow-x: auto.
+   so make that explicitly hidden too to avoid random
+   horizontal scrollbars occasionally appearing, like in
+   https://github.com/vector-im/vector-web/issues/1154
+    */
+.mx_EventTile_content {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
+}
+
+/* Various markdown overrides */
+
+.mx_EventTile_content .markdown-body {
+    font-family: inherit ! important;
+    white-space: normal ! important;
+    line-height: inherit ! important;
+    color: inherit;
+    font-size: 14px;
+}
+
+/* have to use overlay rather than auto otherwise Linux and Windows
+   Chrome gets very confused about vertical spacing:
+   https://github.com/vector-im/vector-web/issues/754
+*/
+.mx_EventTile_content .markdown-body pre {
+    overflow-x: overlay;
+    overflow-y: visible;
+}
+
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
+{
+    font-family: inherit ! important;
+}
+
+.mx_EventTile_content .markdown-body a {
+    color: #76cfa6;
+}
+
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
+}
+
+/* end of overrides */

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -62,6 +62,8 @@ limitations under the License.
     display: flex;
     align-items: center;
     overflow: auto;
+    font-size: 14px;
+    margin-right: 6px;
 }
 .mx_MessageComposer_input_rte {
     border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
@@ -73,7 +75,6 @@ limitations under the License.
 
 .mx_MessageComposer_input textarea {
     display: block;
-    font-size: 15px;
     width: 100%;
     padding: 0px;
     margin-top: 6px;
@@ -86,6 +87,7 @@ limitations under the License.
     box-shadow: none;
     color: #454545;
     background-color: #fff;
+    font-size: 14px;
 
     /* needed for FF */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css

@@ -19,6 +19,21 @@ limitations under the License.
     margin-bottom: 20px;
 }
 
+.mx_RoomSettings_leaveButton {
+    height: 36px;
+    background-color: #76cfa6;
+    border-radius: 36px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 34px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-right: 32px;
+}
+
 .mx_RoomSettings_powerLevels {
     display: table;
 }

src/skins/vector/css/vector-web/fonts.css

@@ -0,0 +1,65 @@
+/*
+ * Open Sans
+ * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
+ */
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/*
+ * Fira Mono
+ * Used for monospace copy, i.e. code
+ */
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}

src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2016 Aviral Dasgupta
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}

src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css

@@ -54,3 +54,7 @@ limitations under the License.
     float: right;
     margin-right: 10px;
 }
+
+.mx_MatrixToolbar_action {
+    margin-right: 16px;
+}

src/skins/vector/fonts/Fira_Mono/OFL.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/skins/vector/fonts/Lato.css

@@ -1,48 +0,0 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Lato Light'), local('Lato-Light'), url(IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Lato Light'), local('Lato-Light'), url(22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'), url(8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'), url(MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'), url(rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'), url(MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}

src/skins/vector/fonts/OpenSans.css

@@ -1,24 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'), url(Open_Sans/OpenSans-Regular.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Semibold.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Bold.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}

src/skins/vector/img/icon_context_message.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon_context">
+            <g>
+                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#ECECEC"></path>
+                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#9B9B9B"></path>
+            </g>
+        </g>
+    </g>
+</svg>

vector/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>Vector</title>
-    <link href='fonts/OpenSans.css' rel='stylesheet' type='text/css'>
     <link rel="apple-touch-icon" sizes="57x57" href="vector-icons/apple-touch-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="vector-icons/apple-touch-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="vector-icons/apple-touch-icon-72x72.png">