Call out icons on hover

https://github.com/vector-im/riot-web/issues/3609

.editorconfig

@@ -0,0 +1,23 @@
+#   Copyright 2017 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.
+
+root = true
+
+[*]
+charset=utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true

.gitignore

@@ -12,3 +12,4 @@
 npm-debug.log
 electron/dist
 electron/pub
+/config.json

AUTHORS.rst

@@ -10,3 +10,6 @@ include:
 
 * Florent VIOLLEAU (https://github.com/floviolleau) <floviolleau at gmail dot com>
   Improve README.md for a better understanding of installation instructions
+
+* Michael Telatynski (https://github.com/t3chguy)
+  Improved consistency of inverted elements in dark theme across browsers

CHANGELOG.md

@@ -1,3 +1,122 @@
+Changes in [0.9.8](https://github.com/vector-im/riot-web/releases/tag/v0.9.8) (2017-04-12)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.8-rc.3...v0.9.8)
+
+ * No changes
+
+Changes in [0.9.8-rc.3](https://github.com/vector-im/riot-web/releases/tag/v0.9.8-rc.3) (2017-04-11)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.8-rc.2...v0.9.8-rc.3)
+
+ * Make the clear cache button work on desktop
+   [\#3598](https://github.com/vector-im/riot-web/pull/3598)
+
+Changes in [0.9.8-rc.2](https://github.com/vector-im/riot-web/releases/tag/v0.9.8-rc.2) (2017-04-10)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.8-rc.1...v0.9.8-rc.2)
+
+ * Redacted events bg: black lozenge -> torn paper
+   [\#3596](https://github.com/vector-im/riot-web/pull/3596)
+ * Add 'app' parameter to rageshake report
+   [\#3594](https://github.com/vector-im/riot-web/pull/3594)
+
+Changes in [0.9.8-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.8-rc.1) (2017-04-07)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7...v0.9.8-rc.1)
+
+ * Add support for indexeddb sync in webworker
+   [\#3578](https://github.com/vector-im/riot-web/pull/3578)
+ * Add CSS to make Emote sender cursor : pointer
+   [\#3574](https://github.com/vector-im/riot-web/pull/3574)
+ * Remove rageshake server
+   [\#3565](https://github.com/vector-im/riot-web/pull/3565)
+ * Adjust CSS for matrix-org/matrix-react-sdk#789
+   [\#3566](https://github.com/vector-im/riot-web/pull/3566)
+ * Fix tests to reflect recent changes
+   [\#3537](https://github.com/vector-im/riot-web/pull/3537)
+ * Do not assume getTs will return comparable integer
+   [\#3536](https://github.com/vector-im/riot-web/pull/3536)
+ * Rename ReactPerf to Perf
+   [\#3535](https://github.com/vector-im/riot-web/pull/3535)
+ * Don't show phone number as target for email notifs
+   [\#3530](https://github.com/vector-im/riot-web/pull/3530)
+ * Fix people section again
+   [\#3458](https://github.com/vector-im/riot-web/pull/3458)
+ * dark theme invert inconsistent across browsers
+   [\#3479](https://github.com/vector-im/riot-web/pull/3479)
+ * CSS for adding phone number in UserSettings
+   [\#3451](https://github.com/vector-im/riot-web/pull/3451)
+ * Support for phone number registration/signin, mk2
+   [\#3426](https://github.com/vector-im/riot-web/pull/3426)
+ * Confirm redactions with a dialog
+   [\#3470](https://github.com/vector-im/riot-web/pull/3470)
+ * Better CSS for redactions
+   [\#3453](https://github.com/vector-im/riot-web/pull/3453)
+ * Fix the people section
+   [\#3448](https://github.com/vector-im/riot-web/pull/3448)
+ * Merge the two RoomTile context menus into one
+   [\#3395](https://github.com/vector-im/riot-web/pull/3395)
+ * Refactor screen set after login
+   [\#3385](https://github.com/vector-im/riot-web/pull/3385)
+ * CSS for redacted EventTiles
+   [\#3379](https://github.com/vector-im/riot-web/pull/3379)
+ * Height:100% for welcome pages on Safari
+   [\#3340](https://github.com/vector-im/riot-web/pull/3340)
+ * `view_room` dispatch from `onClick` RoomTile
+   [\#3376](https://github.com/vector-im/riot-web/pull/3376)
+ * Hide statusAreaBox_line entirely when inCall
+   [\#3350](https://github.com/vector-im/riot-web/pull/3350)
+ * Set padding-bottom: 0px for .mx_Dialog spinner
+   [\#3351](https://github.com/vector-im/riot-web/pull/3351)
+ * Support InteractiveAuth based registration
+   [\#3333](https://github.com/vector-im/riot-web/pull/3333)
+ * Expose notification option for username/MXID
+   [\#3334](https://github.com/vector-im/riot-web/pull/3334)
+ * Float the toggle in the top right of MELS
+   [\#3190](https://github.com/vector-im/riot-web/pull/3190)
+ * More aggressive rageshake log culling
+   [\#3311](https://github.com/vector-im/riot-web/pull/3311)
+ * Don't overflow directory network options
+   [\#3282](https://github.com/vector-im/riot-web/pull/3282)
+ * CSS for ban / kick reason prompt
+   [\#3250](https://github.com/vector-im/riot-web/pull/3250)
+ * Allow forgetting rooms you're banned from
+   [\#3246](https://github.com/vector-im/riot-web/pull/3246)
+ * Fix icon paths in manifest
+   [\#3245](https://github.com/vector-im/riot-web/pull/3245)
+ * Fix broken tests caused by adding IndexedDB support
+   [\#3242](https://github.com/vector-im/riot-web/pull/3242)
+ * CSS for un-ban button in RoomSettings
+   [\#3227](https://github.com/vector-im/riot-web/pull/3227)
+ * Remove z-index property on avatar initials
+   [\#3239](https://github.com/vector-im/riot-web/pull/3239)
+ * Reposition certain icons in the status bar
+   [\#3233](https://github.com/vector-im/riot-web/pull/3233)
+ * CSS for kick/ban confirmation dialog
+   [\#3224](https://github.com/vector-im/riot-web/pull/3224)
+ * Style for split-out interactive auth
+   [\#3217](https://github.com/vector-im/riot-web/pull/3217)
+ * Use the teamToken threaded through from react sdk
+   [\#3196](https://github.com/vector-im/riot-web/pull/3196)
+ * rageshake: Add file server with basic auth
+   [\#3169](https://github.com/vector-im/riot-web/pull/3169)
+ * Fix bug with home icon not appearing when logged in as team member
+   [\#3162](https://github.com/vector-im/riot-web/pull/3162)
+ * Add ISSUE_TEMPLATE
+   [\#2836](https://github.com/vector-im/riot-web/pull/2836)
+ * Store bug reports in separate directories
+   [\#3150](https://github.com/vector-im/riot-web/pull/3150)
+ * Quick and dirty support for custom welcome pages.
+   [\#2575](https://github.com/vector-im/riot-web/pull/2575)
+ * RTS Welcome Pages
+   [\#3103](https://github.com/vector-im/riot-web/pull/3103)
+ * rageshake: Abide by Go standards
+   [\#3149](https://github.com/vector-im/riot-web/pull/3149)
+ * Bug report server script
+   [\#3072](https://github.com/vector-im/riot-web/pull/3072)
+ * Bump olm version
+   [\#3125](https://github.com/vector-im/riot-web/pull/3125)
+
 Changes in [0.9.7](https://github.com/vector-im/riot-web/releases/tag/v0.9.7) (2017-02-04)
 ==========================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.3...v0.9.7)

README.md

@@ -67,6 +67,18 @@ to build.
    (cd node_modules/matrix-js-sdk && npm install)
    (cd node_modules/matrix-react-sdk && npm install)
    ```
+   Whenever you git pull on riot-web you will also probably need to force an update
+   to these dependencies - the easiest way is probably:
+   ```
+   rm -rf node_modules/matrjx-{js,react}-sdk && npm i
+   (cd node_modules/matrix-js-sdk && npm install)
+   (cd node_modules/matrix-react-sdk && npm install)
+   ```
+   However, we recommend setting up a proper development environment (see "Setting
+   up a development environment" below) if you want to run your own copy of the
+   `develop` branch, as it makes it much easier to keep these dependencies
+   up-to-date.  Or just use https://riot.im/develop - the continuous integration
+   release of the develop branch.
 1. Configure the app by copying `config.sample.json` to `config.json` and
    modifying it (see below for details)
 1. `npm run dist` to build a tarball to deploy. Untaring this file will give
@@ -117,7 +129,8 @@ built it yourself.
 
 To run as a desktop app:
 
-1. Follow the instructions in 'Building From Source' above
+1. Follow the instructions in 'Building From Source' above, but run
+   `npm run build` instead of `npm run dist` (since we don't need the tarball).
 2. Install electron and run it:
 
    ```
@@ -266,21 +279,28 @@ Triaging issues
 Issues will be triaged by the core team using the following primary set of tags:
 
 priority:
-    P1: top priority; typically blocks releases.
-    P2: one below that
-    P3: non-urgent
-    P4/P5: bluesky some day, who knows.
+
+* P1: top priority; typically blocks releases
+* P2: still need to fix, but lower than P1
+* P3: non-urgent
+* P4: intereseting idea - bluesky some day
+* P5: recorded for posterity/to avoid duplicates. No intention to resolves right now.
 
 bug or feature:
-  bug severity:
-     * cosmetic - feature works functionally but UI/UX is broken.
-     * critical - whole app doesn't work
-     * major - entire feature doesn't work
-     * minor - partially broken feature (but still usable)
 
-     * release blocker
+* bug
+* feature
 
-     * ui/ux (think of this as cosmetic)
+bug severity:
+  
+* cosmetic - feature works functionally but UI/UX is broken
+* critical - whole app doesn't work
+* major - entire feature doesn't work
+* minor - partially broken feature (but still usable)
 
-     * network (specific to network conditions)
-     * platform (platform specific)
+additional categories:
+
+* release blocker
+* ui/ux (think of this as cosmetic)
+* network (specific to network conditions)
+* platform (platform specific)

electron/src/electron-main.js

@@ -171,6 +171,7 @@ const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirector
 });
 
 if (shouldQuit) {
+    console.log("Other instance detected: exiting");
     electron.app.quit()
 }
 
@@ -201,9 +202,12 @@ electron.app.on('ready', () => {
         brand: vectorConfig.brand || 'Riot'
     });
 
-    mainWindow.once('ready-to-show', () => {
-        mainWindow.show();
-    });
+    if (!process.argv.includes('--hidden')) {
+        mainWindow.once('ready-to-show', () => {
+            mainWindow.show();
+        });
+    }
+
     mainWindow.on('closed', () => {
         mainWindow = null;
     });

package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {
@@ -30,7 +30,7 @@
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:compile": "babel --source-maps -d lib src",
-    "build:bundle": "NODE_ENV=production webpack -p --progress",
+    "build:bundle": "cross-env NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
     "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
     "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle",
@@ -38,7 +38,7 @@
     "dist": "scripts/package.sh",
     "start:res": "node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress",
-    "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
+    "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
     "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",
     "lint": "eslint src/",
@@ -58,19 +58,19 @@
     "favico.js": "^0.3.10",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
+    "pako": "^1.0.5",
     "q": "^1.4.1",
     "react": "^15.4.0",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.4.0",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#39d858c",
     "sanitize-html": "^1.11.1",
     "ua-parser-js": "^0.7.10",
     "url": "^0.11.0"
@@ -93,10 +93,11 @@
     "babel-preset-stage-2": "^6.17.0",
     "chokidar": "^1.6.1",
     "cpx": "^1.3.2",
+    "cross-env": "^4.0.0",
     "css-raw-loader": "^0.1.1",
     "electron-builder": "^11.2.4",
     "electron-builder-squirrel-windows": "^11.2.1",
-    "emojione": "^2.2.3",
+    "emojione": "^2.2.7",
     "eslint": "^3.14.0",
     "eslint-config-google": "^0.7.1",
     "eslint-plugin-flowtype": "^2.30.0",
@@ -138,7 +139,7 @@
   "build": {
     "appId": "im.riot.app",
     "category": "Network",
-    "electronVersion": "1.4.14",
+    "electronVersion": "1.6.2",
     "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675",
     "asar": false,
     "dereference": true,

scripts/copy-res.js

@@ -10,6 +10,7 @@ const COPY_LIST = [
     ["res/{media,vector-icons}/**", "webapp"],
     ["src/skins/vector/{fonts,img}/**", "webapp"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
+    ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
     ["./config.json", "webapp", {directwatch: 1}],
 ];
 

scripts/rageshake.go

@@ -1,146 +0,0 @@
-// Run a web server capable of dumping bug reports sent by Riot.
-// Requires Go 1.5+
-// Usage:   BUGS_USER=user BUGS_PASS=password go run rageshake.go PORT
-// Example: BUGS_USER=alice BUGS_PASS=secret go run rageshake.go 8080
-package main
-
-import (
-	"bytes"
-	"compress/gzip"
-	"crypto/subtle"
-	"encoding/json"
-	"fmt"
-	"io/ioutil"
-	"log"
-	"net/http"
-	"os"
-	"path/filepath"
-	"strconv"
-	"time"
-)
-
-var maxPayloadSize = 1024 * 1024 * 55 // 55 MB
-
-type LogEntry struct {
-	ID    string `json:"id"`
-	Lines string `json:"lines"`
-}
-
-type Payload struct {
-	Text      string     `json:"text"`
-	Version   string     `json:"version"`
-	UserAgent string     `json:"user_agent"`
-	Logs      []LogEntry `json:"logs"`
-}
-
-func respond(code int, w http.ResponseWriter) {
-	w.WriteHeader(code)
-	w.Write([]byte("{}"))
-}
-
-func gzipAndSave(data []byte, dirname, fpath string) error {
-	_ = os.MkdirAll(filepath.Join("bugs", dirname), os.ModePerm)
-	fpath = filepath.Join("bugs", dirname, fpath)
-
-	if _, err := os.Stat(fpath); err == nil {
-		return fmt.Errorf("file already exists") // the user can just retry
-	}
-	var b bytes.Buffer
-	gz := gzip.NewWriter(&b)
-	if _, err := gz.Write(data); err != nil {
-		return err
-	}
-	if err := gz.Flush(); err != nil {
-		return err
-	}
-	if err := gz.Close(); err != nil {
-		return err
-	}
-	if err := ioutil.WriteFile(fpath, b.Bytes(), 0644); err != nil {
-		return err
-	}
-	return nil
-}
-
-func basicAuth(handler http.Handler, username, password, realm string) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		user, pass, ok := r.BasicAuth() // pull creds from the request
-
-		// check user and pass securely
-		if !ok || subtle.ConstantTimeCompare([]byte(user), []byte(username)) != 1 || subtle.ConstantTimeCompare([]byte(pass), []byte(password)) != 1 {
-			w.Header().Set("WWW-Authenticate", `Basic realm="`+realm+`"`)
-			w.WriteHeader(401)
-			w.Write([]byte("Unauthorised.\n"))
-			return
-		}
-
-		handler.ServeHTTP(w, r)
-	})
-}
-
-func main() {
-	http.HandleFunc("/api/submit", func(w http.ResponseWriter, req *http.Request) {
-		if req.Method != "POST" && req.Method != "OPTIONS" {
-			respond(405, w)
-			return
-		}
-		// Set CORS
-		w.Header().Set("Access-Control-Allow-Origin", "*")
-		w.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS")
-		w.Header().Set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
-		if req.Method == "OPTIONS" {
-			respond(200, w)
-			return
-		}
-		if length, err := strconv.Atoi(req.Header.Get("Content-Length")); err != nil || length > maxPayloadSize {
-			respond(413, w)
-			return
-		}
-		var p Payload
-		if err := json.NewDecoder(req.Body).Decode(&p); err != nil {
-			respond(400, w)
-			return
-		}
-		// Dump bug report to disk as form:
-		//  "bugreport-20170115-112233.log.gz" => user text, version, user agent, # logs
-		//  "bugreport-20170115-112233-0.log.gz" => most recent log
-		//  "bugreport-20170115-112233-1.log.gz" => ...
-		//  "bugreport-20170115-112233-N.log.gz" => oldest log
-		t := time.Now().UTC()
-		prefix := t.Format("2006-01-02/150405")
-		summary := fmt.Sprintf(
-			"%s\n\nNumber of logs: %d\nVersion: %s\nUser-Agent: %s\n", p.Text, len(p.Logs), p.Version, p.UserAgent,
-		)
-		if err := gzipAndSave([]byte(summary), prefix, "details.log.gz"); err != nil {
-			respond(500, w)
-			return
-		}
-		for i, log := range p.Logs {
-			if err := gzipAndSave([]byte(log.Lines), prefix, fmt.Sprintf("logs-%d.log.gz", i)); err != nil {
-				respond(500, w)
-				return // TODO: Rollback?
-			}
-		}
-		respond(200, w)
-	})
-
-	// Make sure bugs directory exists
-	_ = os.Mkdir("bugs", os.ModePerm)
-
-	// serve files under "bugs"
-	fs := http.FileServer(http.Dir("bugs"))
-	fs = http.StripPrefix("/api/listing/", fs)
-
-	// set auth if env vars exist
-	usr := os.Getenv("BUGS_USER")
-	pass := os.Getenv("BUGS_PASS")
-	if usr == "" || pass == "" {
-		fmt.Println("BUGS_USER and BUGS_PASS env vars not found. No authentication is running for /api/listing")
-	} else {
-		fs = basicAuth(fs, usr, pass, "Riot bug reports")
-	}
-	http.Handle("/api/listing/", fs)
-
-	port := os.Args[1]
-	log.Fatal(http.ListenAndServe(":"+port, nil))
-}

src/component-index.js

@@ -30,26 +30,26 @@ import structures$BottomLeftMenu from './components/structures/BottomLeftMenu';
 structures$BottomLeftMenu && (module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu);
 import structures$CompatibilityPage from './components/structures/CompatibilityPage';
 structures$CompatibilityPage && (module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage);
+import structures$HomePage from './components/structures/HomePage';
+structures$HomePage && (module.exports.components['structures.HomePage'] = structures$HomePage);
 import structures$LeftPanel from './components/structures/LeftPanel';
 structures$LeftPanel && (module.exports.components['structures.LeftPanel'] = structures$LeftPanel);
 import structures$RightPanel from './components/structures/RightPanel';
 structures$RightPanel && (module.exports.components['structures.RightPanel'] = structures$RightPanel);
-import structures$HomePage from './components/structures/HomePage';
-structures$HomePage && (module.exports.components['structures.HomePage'] = structures$HomePage);
 import structures$RoomDirectory from './components/structures/RoomDirectory';
 structures$RoomDirectory && (module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory);
 import structures$RoomSubList from './components/structures/RoomSubList';
 structures$RoomSubList && (module.exports.components['structures.RoomSubList'] = structures$RoomSubList);
+import structures$RoomSubListHeader from './components/structures/RoomSubListHeader';
+structures$RoomSubListHeader && (module.exports.components['structures.RoomSubListHeader'] = structures$RoomSubListHeader);
 import structures$SearchBox from './components/structures/SearchBox';
 structures$SearchBox && (module.exports.components['structures.SearchBox'] = structures$SearchBox);
 import structures$ViewSource from './components/structures/ViewSource';
 structures$ViewSource && (module.exports.components['structures.ViewSource'] = structures$ViewSource);
 import views$context_menus$MessageContextMenu from './components/views/context_menus/MessageContextMenu';
 views$context_menus$MessageContextMenu && (module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu);
-import views$context_menus$NotificationStateContextMenu from './components/views/context_menus/NotificationStateContextMenu';
-views$context_menus$NotificationStateContextMenu && (module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu);
-import views$context_menus$RoomTagContextMenu from './components/views/context_menus/RoomTagContextMenu';
-views$context_menus$RoomTagContextMenu && (module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu);
+import views$context_menus$RoomTileContextMenu from './components/views/context_menus/RoomTileContextMenu';
+views$context_menus$RoomTileContextMenu && (module.exports.components['views.context_menus.RoomTileContextMenu'] = views$context_menus$RoomTileContextMenu);
 import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
 views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
 import views$dialogs$ChangelogDialog from './components/views/dialogs/ChangelogDialog';

src/components/structures/BottomLeftMenu.js

@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import sdk from 'matrix-react-sdk';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+import Velocity from 'velocity-vector';
+import 'velocity-vector/velocity.ui';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var sdk = require('matrix-react-sdk')
-var dis = require('matrix-react-sdk/lib/dispatcher');
-var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+const CALLOUT_ANIM_DURATION = 1000;
 
 module.exports = React.createClass({
     displayName: 'BottomLeftMenu',
@@ -40,6 +42,18 @@ module.exports = React.createClass({
         });
     },
 
+    componentWillMount: function() {
+        this._dispatcherRef = dis.register(this.onAction);
+        this._peopleButton = null;
+        this._directoryButton = null;
+        this._createRoomButton = null;
+        this._lastCallouts = {};
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this._dispatcherRef);
+    },
+
     // Room events
     onDirectoryClick: function() {
         dis.dispatch({ action: 'view_room_directory' });
@@ -104,6 +118,30 @@ module.exports = React.createClass({
         this.setState({ settingsHover: false });
     },
 
+    onAction: function(payload) {
+        let calloutElement;
+        switch (payload.action) {
+            // Incoming instruction: dance!
+            case 'callout_start_chat':
+                calloutElement = this._peopleButton;
+                break;
+            case 'callout_room_directory':
+                calloutElement = this._directoryButton;
+                break;
+            case 'callout_create_room':
+                calloutElement = this._createRoomButton;
+                break;
+        }
+        if (calloutElement) {
+            const lastCallout = this._lastCallouts[payload.action];
+            const now = Date.now();
+            if (lastCallout == undefined || lastCallout < now - CALLOUT_ANIM_DURATION) {
+                this._lastCallouts[payload.action] = now;
+                Velocity(ReactDOM.findDOMNode(calloutElement), "callout.bounce", CALLOUT_ANIM_DURATION);
+            }
+        }
+    },
+
     // Get the label/tooltip to show
     getLabel: function(label, show) {
         if (show) {
@@ -112,6 +150,18 @@ module.exports = React.createClass({
         }
     },
 
+    _collectPeopleButton: function(e) {
+        this._peopleButton = e;
+    },
+
+    _collectDirectoryButton: function(e) {
+        this._directoryButton = e;
+    },
+
+    _collectCreateRoomButton: function(e) {
+        this._createRoomButton = e;
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
 
@@ -130,15 +180,15 @@ module.exports = React.createClass({
                 <div className="mx_BottomLeftMenu_options">
                     { homeButton }
                     <AccessibleButton className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
-                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
+                        <TintableSvg ref={this._collectPeopleButton} src="img/icons-people.svg" width="25" height="25" />
                         { this.getLabel("Start chat", this.state.peopleHover) }
                     </AccessibleButton>
                     <AccessibleButton className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
-                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
+                        <TintableSvg ref={this._collectDirectoryButton} src="img/icons-directory.svg" width="25" height="25"/>
                         { this.getLabel("Room directory", this.state.directoryHover) }
                     </AccessibleButton>
                     <AccessibleButton className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
-                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
+                        <TintableSvg ref={this._collectCreateRoomButton} src="img/icons-create-room.svg" width="25" height="25" />
                         { this.getLabel("Create new room", this.state.roomsHover) }
                     </AccessibleButton>
                     <AccessibleButton className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >

src/components/structures/LeftPanel.js

@@ -19,9 +19,11 @@ limitations under the License.
 var React = require('react');
 var DragDropContext = require('react-dnd').DragDropContext;
 var HTML5Backend = require('react-dnd-html5-backend');
+var KeyCode = require('matrix-react-sdk/lib/KeyCode');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
+
 var VectorConferenceHandler = require('../../VectorConferenceHandler');
 var CallHandler = require("matrix-react-sdk/lib/CallHandler");
 
@@ -40,6 +42,10 @@ var LeftPanel = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        this.focusedElement = null;
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
@@ -62,6 +68,91 @@ var LeftPanel = React.createClass({
         }
     },
 
+    _onFocus: function(ev) {
+        this.focusedElement = ev.target;
+    },
+
+    _onBlur: function(ev) {
+        this.focusedElement = null;
+    },
+
+    _onKeyDown: function(ev) {
+        if (!this.focusedElement) return;
+        let handled = false;
+
+        switch (ev.keyCode) {
+            case KeyCode.UP:
+                this._onMoveFocus(true);
+                handled = true;
+                break;
+            case KeyCode.DOWN:
+                this._onMoveFocus(false);
+                handled = true;
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
+    _onMoveFocus: function(up) {
+        var element = this.focusedElement;
+
+        // unclear why this isn't needed
+        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
+        // this.focusDirection = up;
+
+        var descending = false; // are we currently descending or ascending through the DOM tree?
+        var classes;
+
+        do {
+            var child = up ? element.lastElementChild : element.firstElementChild;
+            var sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                }
+                else if (sibling) {
+                    element = sibling;
+                }
+                else {
+                    descending = false;
+                    element = element.parentElement;
+                }
+            }
+            else {
+                if (sibling) {
+                    element = sibling;
+                    descending = true;
+                }
+                else {
+                    element = element.parentElement;
+                }
+            }
+
+            if (element) {
+                classes = element.classList;
+                if (classes.contains("mx_LeftPanel")) { // we hit the top
+                    element = up ? element.lastElementChild : element.firstElementChild;
+                    descending = true;
+                }
+            }
+
+        } while(element && !(
+            classes.contains("mx_RoomTile") ||
+            classes.contains("mx_SearchBox_search") ||
+            classes.contains("mx_RoomSubList_ellipsis")));
+
+        if (element) {
+            element.focus();
+            this.focusedElement = element;
+            this.focusedDescending = descending;
+        }
+    },
+
     _recheckCallElement: function(selectedRoomId) {
         // if we aren't viewing a room with an ongoing call, but there is an
         // active call, show the call element - we need to do this to make
@@ -120,7 +211,8 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}
+                   onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                 <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
                 { collapseButton }
                 { callPreview }

src/components/structures/RoomDirectory.js

@@ -23,7 +23,6 @@ var ContentRepo = require("matrix-js-sdk").ContentRepo;
 var Modal = require('matrix-react-sdk/lib/Modal');
 var sdk = require('matrix-react-sdk');
 var dis = require('matrix-react-sdk/lib/dispatcher');
-var GeminiScrollbar = require('react-gemini-scrollbar');
 
 var linkify = require('linkifyjs');
 var linkifyString = require('linkifyjs/string');
@@ -162,7 +161,7 @@ module.exports = React.createClass({
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
                 title: "Failed to get public room list",
-                description: err.message
+                description: ((err && err.message) ? err.message : "The server may be unavailable or overloaded"),
             });
         });
     },
@@ -208,9 +207,10 @@ module.exports = React.createClass({
                 }, function(err) {
                     modal.close();
                     this.refreshRoomList();
+                    console.error("Failed to " + step + ": " + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Failed to "+step,
-                        description: err.toString()
+                        title: "Failed to " + step,
+                        description: ((err && err.message) ? err.message : "The server may be unavailable or overloaded"),
                     });
                 });
             }
@@ -459,6 +459,17 @@ module.exports = React.createClass({
         return fields;
     },
 
+    /**
+     * called by the parent component when PageUp/Down/etc is pressed.
+     *
+     * We pass it down to the scroll panel.
+     */
+    handleScrollKey: function(ev) {
+        if (this.scrollPanel) {
+            this.scrollPanel.handleScrollKey(ev);
+        }
+    },
+
     render: function() {
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const Loader = sdk.getComponent("elements.Spinner");

src/components/structures/RoomSubList.js

@@ -27,8 +27,10 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');
+var RoomSubListHeader = require('./RoomSubListHeader.js');
 
-// turn this on for drop & drag console debugging galore
+// turn this on for drag & drop console debugging galore
 var debug = false;
 
 const TRUNCATE_AT = 10;
@@ -71,17 +73,16 @@ var RoomSubList = React.createClass({
 
         order: React.PropTypes.string.isRequired,
 
-        // undefined if no room is selected (eg we are showing settings)
-        selectedRoom: React.PropTypes.string,
-
         startAsHidden: React.PropTypes.bool,
         showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
         collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
         onHeaderClick: React.PropTypes.func,
         alwaysShowHeader: React.PropTypes.bool,
+        selectedRoom: React.PropTypes.string,
         incomingCall: React.PropTypes.object,
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
+        emptyContent: React.PropTypes.node, // content shown if the list is empty
     },
 
     getInitialState: function() {
@@ -100,13 +101,31 @@ var RoomSubList = React.createClass({
     },
 
     componentWillMount: function() {
+        constantTimeDispatcher.register("RoomSubList.sort", this.props.tagName, this.onSort);
+        constantTimeDispatcher.register("RoomSubList.refreshHeader", this.props.tagName, this.onRefresh);
         this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
+        this._fixUndefinedOrder(this.props.list);
+    },
+
+    componentWillUnmount: function() {
+        constantTimeDispatcher.unregister("RoomSubList.sort", this.props.tagName, this.onSort);
+        constantTimeDispatcher.unregister("RoomSubList.refreshHeader", this.props.tagName, this.onRefresh);
     },
 
     componentWillReceiveProps: function(newProps) {
         // order the room list appropriately before we re-render
         //if (debug) console.log("received new props, list = " + newProps.list);
         this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order);
+        this._fixUndefinedOrder(newProps.list);
+    },
+
+    onSort: function() {
+        this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
+        // we deliberately don't waste time trying to fix undefined ordering here
+    },
+
+    onRefresh: function() {
+        this.forceUpdate();
     },
 
     applySearchFilter: function(list, filter) {
@@ -119,7 +138,7 @@ var RoomSubList = React.createClass({
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
-        var stuck = this.refs.header.dataset.stuck;
+        var stuck = this.refs.header.refs.header.dataset.stuck;
         if (this.state.hidden || stuck === undefined || stuck === "none") {
             return true;
         } else {
@@ -142,16 +161,25 @@ var RoomSubList = React.createClass({
             this.props.onHeaderClick(isHidden);
         } else {
             // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.refs.header.dataset.originalPosition);
         }
     },
 
+    onRoomTileClick(roomId, ev) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+            clear_search: (ev && (ev.keyCode == 13 || ev.keyCode == 32)),
+        });
+    },
+
     tsOfNewestEvent: function(room) {
         for (var i = room.timeline.length - 1; i >= 0; --i) {
             var ev = room.timeline[i];
-            if (Unread.eventTriggersUnreadCount(ev) ||
-                (ev.sender && ev.sender.userId === MatrixClientPeg.get().credentials.userId))
-            {
+            if (ev.getTs() &&
+                (Unread.eventTriggersUnreadCount(ev) ||
+                (ev.getSender() === MatrixClientPeg.get().credentials.userId))
+            ) {
                 return ev.getTs();
             }
         }
@@ -159,7 +187,7 @@ var RoomSubList = React.createClass({
         // we might only have events that don't trigger the unread indicator,
         // in which case use the oldest event even if normally it wouldn't count.
         // This is better than just assuming the last event was forever ago.
-        if (room.timeline.length) {
+        if (room.timeline.length && room.timeline[0].getTs()) {
             return room.timeline[0].getTs();
         } else {
             return Number.MAX_SAFE_INTEGER;
@@ -203,9 +231,6 @@ var RoomSubList = React.createClass({
         if (order === "manual") comparator = this.manualComparator;
         if (order === "recent") comparator = this.recentsComparator;
 
-        // Fix undefined orders here, and make sure the backend gets updated as well
-        this._fixUndefinedOrder(list);
-
         //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list);
         this.setState({ sortedList: list.sort(comparator) });
     },
@@ -240,10 +265,9 @@ var RoomSubList = React.createClass({
 
                 if (badges) {
                     result[0] += notificationCount;
-                    if (highlight) {
-                        result[1] = true;
-                    }
                 }
+
+                result[1] |= highlight;
             }
             return result;
         }, [0, false]);
@@ -351,7 +375,6 @@ var RoomSubList = React.createClass({
         var self = this;
         var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
         return this.state.sortedList.map(function(room) {
-            var selected = room.roomId == self.props.selectedRoom;
             // XXX: is it evil to pass in self as a prop to RoomTile?
             return (
                 <DNDRoomTile
@@ -359,80 +382,16 @@ var RoomSubList = React.createClass({
                     roomSubList={ self }
                     key={ room.roomId }
                     collapsed={ self.props.collapsed || false}
-                    selected={ selected }
-                    unread={ Unread.doesRoomHaveUnreadMessages(room) }
-                    highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
+                    selectedRoom={ self.props.selectedRoom }
                     isInvite={ self.props.label === 'Invites' }
                     refreshSubList={ self._updateSubListCount }
-                    incomingCall={ null } />
+                    incomingCall={ null }
+                    onClick={ self.onRoomTileClick }
+                />
             );
         });
     },
 
-    _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        var subListNotifications = this.roomNotificationCount();
-        var subListNotifCount = subListNotifications[0];
-        var subListNotifHighlight = subListNotifications[1];
-
-        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
-
-        var chevronClasses = classNames({
-            'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronRight': this.state.hidden,
-            'mx_RoomSubList_chevronDown': !this.state.hidden,
-        });
-
-        var badgeClasses = classNames({
-            'mx_RoomSubList_badge': true,
-            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-        });
-
-        var badge;
-        if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
-        }
-
-        // When collapsed, allow a long hover on the header to show user
-        // the full tag name and room count
-        var title;
-        if (this.props.collapsed) {
-            title = this.props.label;
-            if (roomCount !== '') {
-                title += " [" + roomCount + "]";
-            }
-        }
-
-        var incomingCall;
-        if (this.props.incomingCall) {
-            var self = this;
-            // Check if the incoming call is for this section
-            var incomingCallRoom = this.state.sortedList.filter(function(room) {
-                return self.props.incomingCall.roomId === room.roomId;
-            });
-
-            if (incomingCallRoom.length === 1) {
-                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-                incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
-            }
-        }
-
-        var tabindex = this.props.searchFilter === "" ? "0" : "-1";
-
-        return (
-            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
-                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
-                    { this.props.collapsed ? '' : this.props.label }
-                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
-                    <div className={chevronClasses}></div>
-                    { badge }
-                    { incomingCall }
-                </AccessibleButton>
-            </div>
-        );
-    },
-
     _createOverflowTile: function(overflowCount, totalCount) {
         var content = <div className="mx_RoomSubList_chevronDown"></div>;
 
@@ -488,7 +447,7 @@ var RoomSubList = React.createClass({
             // gets triggered and another list is passed in. Doing it one at a time means that
             // we always correctly calculate the highest order for the list - stops multiple
             // rooms getting the same order. This is only really relevant for the first time this
-            // is run with historical room tag data, after that there should only be undefined
+            // is run with historical room tag data, after that there should only be one undefined
             // in the list at a time anyway.
             for (let i = 0; i < list.length; i++) {
                 if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) {
@@ -496,9 +455,10 @@ var RoomSubList = React.createClass({
                         // Do any final stuff here
                     }).fail(function(err) {
                         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        console.error("Failed to add tag " + self.props.tagName + " to room" + err);
                         Modal.createDialog(ErrorDialog, {
                             title: "Failed to add tag " + self.props.tagName + " to room",
-                            description: err.toString()
+                            description: ((err && err.message) ? err.message : "Operation failed"),
                         });
                     });
                     break;
@@ -509,16 +469,28 @@ var RoomSubList = React.createClass({
 
     render: function() {
         var connectDropTarget = this.props.connectDropTarget;
-        var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
         var TruncatedList = sdk.getComponent('elements.TruncatedList');
 
         var label = this.props.collapsed ? null : this.props.label;
 
         //console.log("render: " + JSON.stringify(this.state.sortedList));
 
-        var target;
-        if (this.state.sortedList.length == 0 && this.props.editable) {
-            target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
+        let content;
+        if (this.state.sortedList.length == 0) {
+            //content = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
+            content = this.props.emptyContent;
+        } else {
+            content = this.makeRoomTiles();
+        }
+
+        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
+
+        var isIncomingCallRoom;
+        if (this.props.incomingCall) {
+            // Check if the incoming call is for this section
+            isIncomingCallRoom = this.props.list.find(room=>{
+                return this.props.incomingCall.roomId === room.roomId;
+            }) ? true : false;
         }
 
         if (this.state.sortedList.length > 0 || this.props.editable) {
@@ -528,8 +500,7 @@ var RoomSubList = React.createClass({
             if (!this.state.hidden) {
                 subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
                                          createOverflowElement={this._createOverflowTile} >
-                                { target }
-                                { this.makeRoomTiles() }
+                                { content }
                           </TruncatedList>;
             }
             else {
@@ -539,7 +510,19 @@ var RoomSubList = React.createClass({
 
             return connectDropTarget(
                 <div>
-                    { this._getHeaderJsx() }
+                    <RoomSubListHeader
+                        ref='header'
+                        label={ this.props.label }
+                        tagName={ this.props.tagName }
+                        roomCount={ roomCount }
+                        collapsed={ this.props.collapsed }
+                        hidden={ this.state.hidden }
+                        incomingCall={ this.props.incomingCall }
+                        isIncomingCallRoom={ isIncomingCallRoom }
+                        roomNotificationCount={ this.roomNotificationCount() }
+                        onClick={ this.onClick }
+                        onHeaderClick={ this.props.onHeaderClick }
+                    />
                     { subList }
                 </div>
             );
@@ -548,7 +531,20 @@ var RoomSubList = React.createClass({
             var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <div className="mx_RoomSubList">
-                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
+                    { this.props.alwaysShowHeader ? 
+                        <RoomSubListHeader
+                            ref='header'
+                            label={ this.props.label }
+                            tagName={ this.props.tagName }
+                            roomCount={ roomCount }
+                            collapsed={ this.props.collapsed }
+                            hidden={ this.state.hidden }
+                            isIncomingCallRoom={ isIncomingCallRoom }
+                            roomNotificationCount={ this.roomNotificationCount() }
+                            onClick={ this.onClick }
+                            onHeaderClick={ this.props.onHeaderClick }
+                        />
+                     : undefined }
                     { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
                 </div>
             );

src/components/structures/RoomSubListHeader.js

@@ -0,0 +1,121 @@
+/*
+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.
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var classNames = require('classnames');
+var sdk = require('matrix-react-sdk')
+var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher');
+
+module.exports = React.createClass({
+    displayName: 'RoomSubListHeader',
+
+    propTypes: {
+        label: React.PropTypes.string.isRequired,
+        tagName: React.PropTypes.string,
+        roomCount: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number
+        ]),
+        collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
+        incomingCall: React.PropTypes.object,
+        isIncomingCallRoom: React.PropTypes.bool,
+        roomNotificationCount: React.PropTypes.array,
+        hidden: React.PropTypes.bool,
+        onClick: React.PropTypes.func,
+        onHeaderClick: React.PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHeaderClick: function() {}, // NOP
+        };
+    },
+
+    componentWillMount: function() {
+        // constantTimeDispatcher.register("RoomSubList.refreshHeader", this.props.tagName, this.onRefresh);
+    },
+
+    componentWillUnmount: function() {
+        // constantTimeDispatcher.unregister("RoomSubList.refreshHeader", this.props.tagName, this.onRefresh);
+    },
+
+    // onRefresh: function() {
+    //     this.forceUpdate();
+    // },
+
+    render: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        var subListNotifications = this.props.roomNotificationCount;
+        var subListNotifCount = subListNotifications[0];
+        var subListNotifHighlight = subListNotifications[1];
+
+        var chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronRight': this.props.hidden,
+            'mx_RoomSubList_chevronDown': !this.props.hidden,
+        });
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+        });
+
+        var badge;
+        if (subListNotifCount > 0) {
+            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
+        }
+        else if (subListNotifHighlight) {
+            badge = <div className={badgeClasses}>!</div>;   
+        }
+
+        // When collapsed, allow a long hover on the header to show user
+        // the full tag name and room count
+        var title;
+        var roomCount = this.props.roomCount;
+        if (this.props.collapsed) {
+            title = this.props.label;
+            if (roomCount !== '') {
+                title += " [" + roomCount + "]";
+            }
+        }
+
+        var incomingCall;
+        if (this.props.isIncomingCallRoom) {
+            var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+            incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
+        }
+
+        return (
+            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
+                <AccessibleButton onClick={ this.props.onClick } className="mx_RoomSubList_label" tabIndex="0">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
+                    <div className={chevronClasses}></div>
+                    { badge }
+                </AccessibleButton>
+                { incomingCall }
+            </div>
+        );
+    },
+});
+

src/components/structures/SearchBox.js

@@ -21,6 +21,7 @@ var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+var KeyCode = require('matrix-react-sdk/lib/KeyCode');
 
 module.exports = React.createClass({
     displayName: 'SearchBox',
@@ -38,17 +39,19 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
+        document.addEventListener('keydown', this._onKeyDown);
     },
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
+        document.removeEventListener('keydown', this._onKeyDown);
     },
 
     onAction: function(payload) {
         switch (payload.action) {
             // Clear up the text field when a room is selected.
             case 'view_room':
-                if (this.refs.search) {
+                if (payload.clear_search && this.refs.search) {
                     this._clearSearch();
                 }
                 break;
@@ -86,6 +89,38 @@ module.exports = React.createClass({
         this.onChange();
     },
 
+    _onKeyDown: function(ev) {
+        let handled = false;
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+        let ctrlCmdOnly;
+        if (isMac) {
+            ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
+        } else {
+            ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
+        }
+
+        switch (ev.keyCode) {
+            case KeyCode.ESCAPE:
+                this._clearSearch();
+                dis.dispatch({action: 'focus_composer'});
+                break;
+            case KeyCode.KEY_K:
+                if (ctrlCmdOnly) {
+                    if (this.refs.search) {
+                        this.refs.search.focus();
+                        this.refs.search.select();
+                    }
+                    handled = true;
+                }
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
 

src/components/views/context_menus/MessageContextMenu.js

@@ -62,19 +62,24 @@ module.exports = React.createClass({
     },
 
     onRedactClick: function() {
-        MatrixClientPeg.get().redactEvent(
-            this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-        ).done(function() {
-            // message should disappear by itself
-        }, function(e) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            // display error message stating you couldn't delete this.
-            var code = e.errcode || e.statusCode;
-            Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: "You cannot delete this message. (" + code + ")"
-            });
-        });
+        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+        Modal.createDialog(ConfirmRedactDialog, {
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                MatrixClientPeg.get().redactEvent(
+                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
+                ).catch(function(e) {
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    // display error message stating you couldn't delete this.
+                    var code = e.errcode || e.statusCode;
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Error",
+                        description: "You cannot delete this message. (" + code + ")"
+                    });
+                }).done();
+            },
+        }, 'mx_Dialog_confirmredact');
         if (this.props.onFinished) this.props.onFinished();
     },
 
@@ -121,7 +126,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus) { // sent
+        if (!eventStatus && !this.props.mxEvent.isRedacted()) { // sent and not redacted
             redactButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
                     Redact

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -1,144 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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.
-*/
-
-'use strict';
-
-var q = require("q");
-var React = require('react');
-var classNames = require('classnames');
-var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-
-module.exports = React.createClass({
-    displayName: 'NotificationStateContextMenu',
-
-    propTypes: {
-        room: React.PropTypes.object.isRequired,
-        /* callback called when the menu is dismissed */
-        onFinished: React.PropTypes.func,
-    },
-
-    getInitialState() {
-        return {
-            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
-        }
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    _save: function(newState) {
-        const oldState = this.state.roomNotifState;
-        const roomId = this.props.room.roomId;
-        var cli = MatrixClientPeg.get();
-
-        if (cli.isGuest()) return;
-
-        this.setState({
-            roomNotifState: newState,
-        });
-        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
-            // delay slightly so that the user can see their state change
-            // before closing the menu
-            return q.delay(500).then(() => {
-                if (this._unmounted) return;
-                // Close the context menu
-                if (this.props.onFinished) {
-                    this.props.onFinished();
-                };
-            });
-        }, (error) => {
-            // TODO: some form of error notification to the user
-            // to inform them that their state change failed.
-            // For now we at least set the state back
-            if (this._unmounted) return;
-            this.setState({
-                roomNotifState: oldState,
-            });
-        });
-    },
-
-    _onClickAlertMe: function() {
-        this._save(RoomNotifs.ALL_MESSAGES_LOUD);
-    },
-
-    _onClickAllNotifs: function() {
-        this._save(RoomNotifs.ALL_MESSAGES);
-    },
-
-    _onClickMentions: function() {
-        this._save(RoomNotifs.MENTIONS_ONLY);
-    },
-
-    _onClickMute: function() {
-        this._save(RoomNotifs.MUTE);
-    },
-
-    render: function() {
-        var alertMeClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
-        });
-
-        var allNotifsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
-        });
-
-        var mentionsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
-        });
-
-        var muteNotifsClasses = classNames({
-            'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
-        });
-
-        return (
-            <div>
-                <div className="mx_NotificationStateContextMenu_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
-                </div>
-                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
-                    All messages (loud)
-                </div>
-                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
-                    All messages
-                </div>
-                <div className={ mentionsClasses } onClick={this._onClickMentions} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
-                    Mentions only
-                </div>
-                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
-                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
-                    Mute
-                </div>
-            </div>
-        );
-    }
-});

src/components/views/context_menus/RoomTagContextMenu.js

@@ -1,255 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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.
-*/
-
-'use strict';
-
-import q from 'q';
-import React from 'react';
-import classNames from 'classnames';
-import sdk from 'matrix-react-sdk';
-import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-import dis from 'matrix-react-sdk/lib/dispatcher';
-import DMRoomMap from 'matrix-react-sdk/lib/utils/DMRoomMap';
-import Rooms from 'matrix-react-sdk/lib/Rooms';
-import Modal from 'matrix-react-sdk/lib/Modal';
-
-module.exports = React.createClass({
-    displayName: 'RoomTagContextMenu',
-
-    propTypes: {
-        room: React.PropTypes.object.isRequired,
-        /* callback called when the menu is dismissed */
-        onFinished: React.PropTypes.func,
-    },
-
-    getInitialState: function() {
-        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-        return {
-            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
-            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
-            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
-        };
-    },
-
-    _toggleTag: function(tagNameOn, tagNameOff) {
-        var self = this;
-        const roomId = this.props.room.roomId;
-        var cli = MatrixClientPeg.get();
-        if (!cli.isGuest()) {
-            q.delay(500).then(function() {
-                if (tagNameOff !== null && tagNameOff !== undefined) {
-                    cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
-                        // Close the context menu
-                        if (self.props.onFinished) {
-                            self.props.onFinished();
-                        };
-                    }).fail(function(err) {
-                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to remove tag " + tagNameOff + " from room",
-                            description: err.toString()
-                        });
-                    });
-                }
-
-                if (tagNameOn !== null && tagNameOn !== undefined) {
-                    // If the tag ordering meta data is required, it is added by
-                    // the RoomSubList when it sorts its rooms
-                    cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
-                        // Close the context menu
-                        if (self.props.onFinished) {
-                            self.props.onFinished();
-                        };
-                    }).fail(function(err) {
-                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to add tag " + tagNameOn + " to room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            });
-        }
-    },
-
-    _onClickFavourite: function() {
-        // Tag room as 'Favourite'
-        if (!this.state.isFavourite && this.state.isLowPriority) {
-            this.setState({
-                isFavourite: true,
-                isLowPriority: false,
-            });
-            this._toggleTag("m.favourite", "m.lowpriority");
-        } else if (this.state.isFavourite) {
-            this.setState({isFavourite: false});
-            this._toggleTag(null, "m.favourite");
-        } else if (!this.state.isFavourite) {
-            this.setState({isFavourite: true});
-            this._toggleTag("m.favourite");
-        }
-    },
-
-    _onClickLowPriority: function() {
-        // Tag room as 'Low Priority'
-        if (!this.state.isLowPriority && this.state.isFavourite) {
-            this.setState({
-                isFavourite: false,
-                isLowPriority: true,
-            });
-            this._toggleTag("m.lowpriority", "m.favourite");
-        } else if (this.state.isLowPriority) {
-            this.setState({isLowPriority: false});
-            this._toggleTag(null, "m.lowpriority");
-        } else if (!this.state.isLowPriority) {
-            this.setState({isLowPriority: true});
-            this._toggleTag("m.lowpriority");
-        }
-    },
-
-    _onClickDM: function() {
-        const newIsDirectMessage = !this.state.isDirectMessage;
-        this.setState({
-            isDirectMessage: newIsDirectMessage,
-        });
-
-        if (MatrixClientPeg.get().isGuest()) return;
-
-        let newTarget;
-        if (newIsDirectMessage) {
-            const guessedTarget = Rooms.guessDMRoomTarget(
-                this.props.room,
-                this.props.room.getMember(MatrixClientPeg.get().credentials.userId),
-            );
-            newTarget = guessedTarget.userId;
-        } else {
-            newTarget = null;
-        }
-
-        // give some time for the user to see the icon change first, since
-        // this will hide the context menu once it completes
-        q.delay(500).done(() => {
-            return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => {
-                // Close the context menu
-                if (this.props.onFinished) {
-                    this.props.onFinished();
-                };
-            }, (err) => {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to set Direct Message status of room",
-                    description: err.toString()
-                });
-            });
-        });
-    },
-
-    _onClickLeave: function() {
-        // Leave room
-        dis.dispatch({
-            action: 'leave_room',
-            room_id: this.props.room.roomId,
-        });
-
-        // Close the context menu
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        };
-    },
-
-    _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() {
-        const myUserId = MatrixClientPeg.get().credentials.userId;
-        const myMember = this.props.room.getMember(myUserId);
-
-        const favouriteClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const lowPriorityClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const leaveClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': false,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        const dmClasses = classNames({
-            'mx_RoomTagContextMenu_field': true,
-            'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage,
-            'mx_RoomTagContextMenu_fieldDisabled': false,
-        });
-
-        if (myMember && (myMember.membership === "leave" || myMember.membership === "ban")) {
-            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} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_fave.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
-                    Favourite
-                </div>
-                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_low.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
-                    Low Priority
-                </div>
-                <div className={ dmClasses } onClick={this._onClickDM} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_person.svg" width="15" height="15" />
-                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
-                    Direct Chat
-                </div>
-                <hr className="mx_RoomTagContextMenu_separator" />
-                <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
-                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
-                    Leave
-                </div>
-            </div>
-        );
-    }
-});

src/components/views/context_menus/RoomTileContextMenu.js

@@ -0,0 +1,392 @@
+/*
+Copyright 2015, 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.
+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.
+*/
+
+'use strict';
+
+import q from 'q';
+import React from 'react';
+import classNames from 'classnames';
+import sdk from 'matrix-react-sdk';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import DMRoomMap from 'matrix-react-sdk/lib/utils/DMRoomMap';
+import * as Rooms from 'matrix-react-sdk/lib/Rooms';
+import * as RoomNotifs from 'matrix-react-sdk/lib/RoomNotifs';
+import Modal from 'matrix-react-sdk/lib/Modal';
+
+module.exports = React.createClass({
+    displayName: 'RoomTileContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState() {
+        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
+        return {
+            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
+            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
+        }
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _toggleTag: function(tagNameOn, tagNameOff) {
+        var self = this;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+        if (!cli.isGuest()) {
+            q.delay(500).then(function() {
+                if (tagNameOff !== null && tagNameOff !== undefined) {
+                    cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
+                        // Close the context menu
+                        if (self.props.onFinished) {
+                            self.props.onFinished();
+                        };
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to remove tag " + tagNameOff + " from room",
+                            description: ((err && err.message) ? err.message : "Operation failed"),
+                        });
+                    });
+                }
+
+                if (tagNameOn !== null && tagNameOn !== undefined) {
+                    // If the tag ordering meta data is required, it is added by
+                    // the RoomSubList when it sorts its rooms
+                    cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
+                        // Close the context menu
+                        if (self.props.onFinished) {
+                            self.props.onFinished();
+                        };
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to add tag " + tagNameOn + " to room",
+                            description: ((err && err.message) ? err.message : "Operation failed"),
+                        });
+                    });
+                }
+            });
+        }
+    },
+
+    _onClickFavourite: function() {
+        // Tag room as 'Favourite'
+        if (!this.state.isFavourite && this.state.isLowPriority) {
+            this.setState({
+                isFavourite: true,
+                isLowPriority: false,
+            });
+            this._toggleTag("m.favourite", "m.lowpriority");
+        } else if (this.state.isFavourite) {
+            this.setState({isFavourite: false});
+            this._toggleTag(null, "m.favourite");
+        } else if (!this.state.isFavourite) {
+            this.setState({isFavourite: true});
+            this._toggleTag("m.favourite");
+        }
+    },
+
+    _onClickLowPriority: function() {
+        // Tag room as 'Low Priority'
+        if (!this.state.isLowPriority && this.state.isFavourite) {
+            this.setState({
+                isFavourite: false,
+                isLowPriority: true,
+            });
+            this._toggleTag("m.lowpriority", "m.favourite");
+        } else if (this.state.isLowPriority) {
+            this.setState({isLowPriority: false});
+            this._toggleTag(null, "m.lowpriority");
+        } else if (!this.state.isLowPriority) {
+            this.setState({isLowPriority: true});
+            this._toggleTag("m.lowpriority");
+        }
+    },
+
+    _onClickDM: function() {
+        const newIsDirectMessage = !this.state.isDirectMessage;
+        this.setState({
+            isDirectMessage: newIsDirectMessage,
+        });
+
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        Rooms.guessAndSetDMRoom(
+            this.props.room, newIsDirectMessage
+        ).delay(500).finally(() => {
+            // Close the context menu
+            if (this.props.onFinished) {
+                this.props.onFinished();
+            };
+        }, (err) => {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to set Direct Message status of room",
+                description: ((err && err.message) ? err.message : "Operation failed"),
+            });
+        });
+    },
+
+    _onClickLeave: function() {
+        // Leave room
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickReject: function() {
+        dis.dispatch({
+            action: 'reject_invite',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _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: `Failed to forget room (${errCode})`,
+                description: ((err && err.message) ? err.message : "Operation failed"),
+            });
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _saveNotifState: function(newState) {
+        const oldState = this.state.roomNotifState;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+
+        if (cli.isGuest()) return;
+
+        this.setState({
+            roomNotifState: newState,
+        });
+        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
+            // delay slightly so that the user can see their state change
+            // before closing the menu
+            return q.delay(500).then(() => {
+                if (this._unmounted) return;
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            });
+        }, (error) => {
+            // TODO: some form of error notification to the user
+            // to inform them that their state change failed.
+            // For now we at least set the state back
+            if (this._unmounted) return;
+            this.setState({
+                roomNotifState: oldState,
+            });
+        });
+    },
+
+    _onClickAlertMe: function() {
+        this._saveNotifState(RoomNotifs.ALL_MESSAGES_LOUD);
+    },
+
+    _onClickAllNotifs: function() {
+        this._saveNotifState(RoomNotifs.ALL_MESSAGES);
+    },
+
+    _onClickMentions: function() {
+        this._saveNotifState(RoomNotifs.MENTIONS_ONLY);
+    },
+
+    _onClickMute: function() {
+        this._saveNotifState(RoomNotifs.MUTE);
+    },
+
+    _renderNotifMenu: function() {
+        var alertMeClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
+        });
+
+        var allNotifsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
+        });
+
+        var mentionsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
+        });
+
+        return (
+            <div>
+                <div className="mx_RoomTileContextMenu_notif_picker" >
+                    <img src="img/notif-slider.svg" width="20" height="107" />
+                </div>
+                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    All messages (loud)
+                </div>
+                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    All messages
+                </div>
+                <div className={ mentionsClasses } onClick={this._onClickMentions} >
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    Mentions only
+                </div>
+                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
+                    Mute
+                </div>
+            </div>
+        );
+    },
+
+    _renderLeaveMenu: function(membership) {
+        if (!membership) {
+            return null;
+        }
+
+        let leaveClickHandler = null;
+        let leaveText = null;
+
+        switch (membership) {
+            case "join":
+                leaveClickHandler = this._onClickLeave;
+                leaveText = "Leave";
+                break;
+            case "leave":
+            case "ban":
+                leaveClickHandler = this._onClickForget;
+                leaveText = "Forget";
+                break;
+            case "invite":
+                leaveClickHandler = this._onClickReject;
+                leaveText = "Reject";
+                break;
+        }
+
+        return (
+            <div>
+                <div className="mx_RoomTileContextMenu_leave" onClick={ leaveClickHandler } >
+                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    { leaveText }
+                </div>
+            </div>
+        );
+    },
+
+    _renderRoomTagMenu: function() {
+        const favouriteClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isFavourite,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        const lowPriorityClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isLowPriority,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        const dmClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isDirectMessage,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        return (
+            <div>
+                <div className={ favouriteClasses } onClick={this._onClickFavourite} >
+                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    Favourite
+                </div>
+                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
+                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    Low Priority
+                </div>
+                <div className={ dmClasses } onClick={this._onClickDM} >
+                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    Direct Chat
+                </div>
+            </div>
+        );
+    },
+
+    render: function() {
+        const myMember = this.props.room.getMember(
+            MatrixClientPeg.get().credentials.userId
+        );
+
+        // Can't set notif level or tags on non-join rooms
+        if (myMember.membership !== 'join') {
+            return this._renderLeaveMenu(myMember.membership);
+        }
+
+        return (
+            <div>
+                { this._renderNotifMenu() }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderLeaveMenu(myMember.membership) }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderRoomTagMenu() }
+            </div>
+        );
+    }
+});

src/components/views/dialogs/BugReportDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from 'matrix-react-sdk';
-import rageshake from '../../../vector/rageshake';
+import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
 
 export default class BugReportDialog extends React.Component {
     constructor(props, context) {
@@ -26,11 +26,18 @@ export default class BugReportDialog extends React.Component {
             busy: false,
             err: null,
             text: "",
+            progress: null,
         };
+        this._unmounted = false;
         this._onSubmit = this._onSubmit.bind(this);
         this._onCancel = this._onCancel.bind(this);
         this._onTextChange = this._onTextChange.bind(this);
         this._onSendLogsChange = this._onSendLogsChange.bind(this);
+        this._sendProgressCallback = this._sendProgressCallback.bind(this);
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
     }
 
     _onCancel(ev) {
@@ -46,12 +53,27 @@ export default class BugReportDialog extends React.Component {
             });
             return;
         }
-        this.setState({ busy: true, err: null });
-        rageshake.sendBugReport(userText, sendLogs).then(() => {
-            this.setState({ busy: false });
-            this.props.onFinished(false);
-        }, (err) => {
-            this.setState({ busy: false, err: `Failed: ${err.message}` });
+        this.setState({ busy: true, progress: null, err: null });
+        this._sendProgressCallback("Loading bug report module");
+
+        require(['../../../vector/submit-rageshake'], (s) => {
+            s(SdkConfig.get().bug_report_endpoint_url, {
+                userText: userText,
+                sendLogs: sendLogs,
+                progressCallback: this._sendProgressCallback,
+            }).then(() => {
+                if (!this._unmounted) {
+                    this.setState({ busy: false, progress: null });
+                    this.props.onFinished(false);
+                }
+            }, (err) => {
+                if (!this._unmounted) {
+                    this.setState({
+                        busy: false, progress: null,
+                        err: `Failed to send report: ${err.message}`,
+                    });
+                }
+            });
         });
     }
 
@@ -63,6 +85,13 @@ export default class BugReportDialog extends React.Component {
         this.setState({ sendLogs: ev.target.checked });
     }
 
+    _sendProgressCallback(progress) {
+        if (this._unmounted) {
+            return;
+        }
+        this.setState({progress: progress});
+    }
+
     render() {
         const Loader = sdk.getComponent("elements.Spinner");
 
@@ -73,8 +102,6 @@ export default class BugReportDialog extends React.Component {
             </div>;
         }
 
-        const okLabel = this.state.busy ? <Loader /> : 'Send';
-
         let cancelButton = null;
         if (!this.state.busy) {
             cancelButton = <button onClick={this._onCancel}>
@@ -82,6 +109,16 @@ export default class BugReportDialog extends React.Component {
             </button>;
         }
 
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    <Loader />
+                    {this.state.progress} ...
+                </div>
+            );
+        }
+
         return (
             <div className="mx_BugReportDialog">
                 <div className="mx_Dialog_title">
@@ -104,6 +141,7 @@ export default class BugReportDialog extends React.Component {
                     <input type="checkbox" checked={this.state.sendLogs}
                         onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
                     <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
+                    {progress}
                     {error}
                 </div>
                 <div className="mx_Dialog_buttons">
@@ -111,8 +149,9 @@ export default class BugReportDialog extends React.Component {
                         className="mx_Dialog_primary danger"
                         onClick={this._onSubmit}
                         autoFocus={true}
+                        disabled={this.state.busy}
                     >
-                        {okLabel}
+                        Send
                     </button>
 
                     {cancelButton}

src/components/views/elements/ImageView.js

@@ -23,6 +23,8 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var DateUtils = require('matrix-react-sdk/lib/DateUtils');
 var filesize = require('filesize');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+const Modal = require('matrix-react-sdk/lib/Modal');
+const sdk = require('matrix-react-sdk');
 
 module.exports = React.createClass({
     displayName: 'ImageView',
@@ -62,19 +64,23 @@ module.exports = React.createClass({
     },
 
     onRedactClick: function() {
-        var self = this;
-        MatrixClientPeg.get().redactEvent(
-            this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-        ).done(function() {
-            if (self.props.onFinished) self.props.onFinished();
-        }, function(e) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            // display error message stating you couldn't delete this.
-            var code = e.errcode || e.statusCode;
-            Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: "You cannot delete this image. (" + code + ")"
-            });
+        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+        Modal.createDialog(ConfirmRedactDialog, {
+            onFinished: (proceed) => {
+                if (!proceed) return;
+                var self = this;
+                MatrixClientPeg.get().redactEvent(
+                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
+                ).catch(function(e) {
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    // display error message stating you couldn't delete this.
+                    var code = e.errcode || e.statusCode;
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Error",
+                        description: "You cannot delete this image. (" + code + ")"
+                    });
+                }).done();
+            }
         });
     },
 
@@ -170,7 +176,7 @@ module.exports = React.createClass({
                                 { this.getName() }
                             </div>
                             { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank" rel="noopener">
+                            <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
                                 <div className="mx_ImageView_download">
                                         Download this file<br/>
                                          <span className="mx_ImageView_size">{ size_res }</span>

src/components/views/login/VectorLoginHeader.js

@@ -18,6 +18,9 @@ limitations under the License.
 
 var React = require('react');
 
+const i = [1, 2, 3, 4, 5][Math.floor(Math.random() * 5)];
+const DEFAULT_LOGO_URI = "img/logos/riot-logo-" + i + ".svg";
+
 module.exports = React.createClass({
     displayName: 'VectorLoginHeader',
     statics: {
@@ -30,7 +33,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_logo">
-                <img src={this.props.icon || "img/logo.png"} alt="Riot"/>
+                <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
             </div>
         );
     }

src/components/views/rooms/DNDRoomTile.js

@@ -16,14 +16,16 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var DragSource = require('react-dnd').DragSource;
-var DropTarget = require('react-dnd').DropTarget;
+import React from 'react';
+import {DragSource} from 'react-dnd';
+import {DropTarget} from 'react-dnd';
 
-var dis = require("matrix-react-sdk/lib/dispatcher");
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var sdk = require('matrix-react-sdk');
-var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import sdk from 'matrix-react-sdk';
+import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
+import * as Rooms from 'matrix-react-sdk/lib/Rooms';
+import Modal from 'matrix-react-sdk/lib/Modal';
 
 /**
  * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
@@ -72,21 +74,49 @@ var roomTileSource = {
             item.targetList.forceUpdate(); // as we're not using state
         }
 
+        const prevTag = item.originalList.props.tagName;
+        const newTag = item.targetList.props.tagName;
+
         if (monitor.didDrop() && item.targetList.props.editable) {
+            // Evil hack to get DMs behaving
+            if ((prevTag === undefined && newTag === 'im.vector.fake.direct') ||
+                (prevTag === 'im.vector.fake.direct' && newTag === undefined)
+            ) {
+                Rooms.guessAndSetDMRoom(
+                    item.room, newTag === 'im.vector.fake.direct',
+                ).done(() => {
+                    item.originalList.removeRoomTile(item.room);
+                }, (err) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to set direct chat tag " + err);
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Failed to set direct chat tag",
+                        description: ((err && err.message) ? err.message : "Operation failed"),
+                    });
+                });
+                return;
+            }
+
+            // More evilness: We will still be dealing with moving to favourites/low prio,
+            // but we avoid ever doing a request with 'im.vector.fake.direct`.
+
             // if we moved lists, remove the old tag
-            if (item.targetList !== item.originalList && item.originalList.props.tagName) {
+            if (prevTag && prevTag !== 'im.vector.fake.direct' &&
+                item.targetList !== item.originalList
+            ) {
                 // commented out attempts to set a spinner on our target component as component is actually
                 // the original source component being dragged, not our target.  To fix we just need to
                 // move all of this to endDrop in the target instead.  FIXME later.
 
                 //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 });
-                MatrixClientPeg.get().deleteRoomTag(item.room.roomId, item.originalList.props.tagName).finally(function() {
+                MatrixClientPeg.get().deleteRoomTag(item.room.roomId, prevTag).finally(function() {
                     //component.state.set({ spinner: component.state.spinner-- });
                 }).fail(function(err) {
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to remove tag " + prevTag + " from room: " + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Failed to remove tag " + item.originalList.props.tagName + " from room",
-                        description: err.toString()
+                        title: "Failed to remove tag " + prevTag + " from room",
+                        description: ((err && err.message) ? err.message : "Operation failed"),
                     });
                 });
             }
@@ -97,15 +127,18 @@ var roomTileSource = {
             }
 
             // if we moved lists or the ordering changed, add the new tag
-            if (item.targetList.props.tagName && (item.targetList !== item.originalList || newOrder)) {
+            if (newTag && newTag !== 'im.vector.fake.direct' &&
+                (item.targetList !== item.originalList || newOrder)
+            ) {
                 //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 });
-                MatrixClientPeg.get().setRoomTag(item.room.roomId, item.targetList.props.tagName, newOrder).finally(function() {
+                MatrixClientPeg.get().setRoomTag(item.room.roomId, newTag, newOrder).finally(function() {
                     //component.state.set({ spinner: component.state.spinner-- });
                 }).fail(function(err) {
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to add tag " + newTag + " to room: " + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Failed to add tag " + item.targetList.props.tagName + " to room",
-                        description: err.toString()
+                        title: "Failed to add tag " + newTag + " to room",
+                        description: ((err && err.message) ? err.message : "Operation failed"),
                     });
                 });
             }

src/components/views/rooms/RoomDropTarget.js

@@ -22,21 +22,12 @@ module.exports = React.createClass({
     displayName: 'RoomDropTarget',
 
     render: function() {
-        if (this.props.placeholder) {
-            return (
-                <div className="mx_RoomDropTarget mx_RoomDropTarget_placeholder">
+        return (
+            <div className="mx_RoomDropTarget">
+                <div className="mx_RoomDropTarget_label">
+                    { this.props.label }
                 </div>
-            );
-        }
-        else {
-            return (
-                <div className="mx_RoomDropTarget">
-                    <div className="mx_RoomDropTarget_avatar"></div>
-                    <div className="mx_RoomDropTarget_label">
-                        { this.props.label }
-                    </div>
-                </div>
-            );
-        }
+            </div>
+        );
     }
 });

src/components/views/settings/Notifications.js

@@ -238,9 +238,10 @@ module.exports = React.createClass({
                 self._refreshFromServer();
             }, function(error) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Failed to change settings: " + error);
                 Modal.createDialog(ErrorDialog, {
-                    title: "Can't change settings",
-                    description: error.toString(),
+                    title: "Failed to change settings",
+                    description: ((error && error.message) ? error.message : "Operation failed"),
                     onFinished: self._refreshFromServer
                 });
             });
@@ -307,9 +308,10 @@ module.exports = React.createClass({
             self._refreshFromServer();
         }, function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Can't update user notification settings: " + error);
             Modal.createDialog(ErrorDialog, {
                 title: "Can't update user notification settings",
-                description: error.toString(),
+                description: ((error && error.message) ? error.message : "Operation failed"),
                 onFinished: self._refreshFromServer
             });
         });
@@ -348,9 +350,10 @@ module.exports = React.createClass({
 
         var onError = function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to update keywords: " + error);
             Modal.createDialog(ErrorDialog, {
-                title: "Can't update keywords",
-                description: error.toString(),
+                title: "Failed to update keywords",
+                description: ((error && error.message) ? error.message : "Operation failed"),
                 onFinished: self._refreshFromServer
             });
         }
@@ -458,8 +461,8 @@ module.exports = React.createClass({
                 '.m.rule.master': 'master',
 
                 // The default push rules displayed by Vector UI
-                // XXX: .m.rule.contains_user_name is not managed (not a fancy rule for Vector?)
                 '.m.rule.contains_display_name': 'vector',
+                '.m.rule.contains_user_name': 'vector',
                 '.m.rule.room_one_to_one': 'vector',
                 '.m.rule.message': 'vector',
                 '.m.rule.invite_for_me': 'vector',
@@ -512,6 +515,7 @@ module.exports = React.createClass({
 
             var vectorRuleIds = [
                 '.m.rule.contains_display_name',
+                '.m.rule.contains_user_name',
                 '_keywords',
                 '.m.rule.room_one_to_one',
                 '.m.rule.message',
@@ -715,20 +719,17 @@ module.exports = React.createClass({
             );
         }
 
-        var emailNotificationsRow;
-        if (this.props.threepids.filter(function(tp) {
-                if (tp.medium == "email") {
-                    return true;
-                }
-            }).length == 0) {
+        const emailThreepids = this.props.threepids.filter((tp) => tp.medium === "email");
+        let emailNotificationsRow;
+        if (emailThreepids.length === 0) {
             emailNotificationsRow = <div>
                 Add an email address above to configure email notifications
             </div>;
         } else {
             // This only supports the first email address in your profile for now
             emailNotificationsRow = this.emailNotificationsRow(
-                this.props.threepids[0].address,
-                "Enable email notifications ("+this.props.threepids[0].address+")"
+                emailThreepids[0].address,
+                "Enable email notifications ("+emailThreepids[0].address+")"
             );
         }
 

src/notifications/VectorPushRulesDefinitions.js

@@ -63,10 +63,20 @@ class VectorPushRuleDefinition {
  */
 module.exports = {
     // Messages containing user's display name
-    // (skip contains_user_name which is too geeky)
     ".m.rule.contains_display_name": new VectorPushRuleDefinition({
         kind: "override",
-        description: "Messages containing my name",
+        description: "Messages containing my display name",
+        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Messages containing user's username (localpart/MXID)
+    ".m.rule.contains_user_name": new VectorPushRuleDefinition({
+        kind: "override",
+        description: "Messages containing my user name",
         vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
             on: StandardActions.ACTION_NOTIFY,
             loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,

src/skins/vector/css/_common.scss

@@ -65,7 +65,7 @@ input[type=text].error, input[type=password].error {
     border: 1px solid $warning-color;
 }
 
-input[type=text]:focus, textarea:focus {
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
@@ -135,7 +135,7 @@ textarea {
 .mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
     width: auto;
     border-radius: 8px;
-    padding-left: 0px;
+    padding: 0px;
     box-shadow: none;
 }
 
@@ -187,12 +187,16 @@ textarea {
 }
 
 .mx_Dialog_cancelButton {
-    float: right;
-    margin-top: 5px;
-    margin-right: 5px;
+    position: absolute;
+    right: 11px;
+    top: 13px;
     cursor: pointer;
 }
 
+.mx_Dialog_cancelButton object {
+    pointer-events: none;
+}
+
 .mx_Dialog_content {
     margin: 24px 58px 68px 0;
     font-size: 14px;
@@ -221,6 +225,10 @@ textarea {
     vertical-align: middle;
 }
 
+.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
+    filter: brightness($focus-brightness);
+}
+
 .mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
     color: $accent-fg-color;
     background-color: $accent-color;

src/skins/vector/css/_components.scss

@@ -13,18 +13,23 @@
 @import "./matrix-react-sdk/structures/login/_Login.scss";
 @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
 @import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss";
+@import "./matrix-react-sdk/views/elements/_AccessibleButton.scss";
 @import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
 @import "./matrix-react-sdk/views/elements/_AddressTile.scss";
 @import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
+@import "./matrix-react-sdk/views/elements/_Dropdown.scss";
 @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
 @import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
+@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
 @import "./matrix-react-sdk/views/login/_ServerConfig.scss";
+@import "./matrix-react-sdk/views/messages/_MEmoteBody.scss";
 @import "./matrix-react-sdk/views/messages/_MImageBody.scss";
 @import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
 @import "./matrix-react-sdk/views/messages/_MTextBody.scss";
@@ -61,8 +66,7 @@
 @import "./vector-web/structures/_RoomSubList.scss";
 @import "./vector-web/structures/_ViewSource.scss";
 @import "./vector-web/views/context_menus/_MessageContextMenu.scss";
-@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
-@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
+@import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
 @import "./vector-web/views/dialogs/_ChangelogDialog.scss";
 @import "./vector-web/views/directory/_NetworkDropdown.scss";
 @import "./vector-web/views/elements/_ImageView.scss";

src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss

@@ -90,16 +90,13 @@ limitations under the License.
        */
     overflow-x: auto;
 
-    /* XXX: Hack: apparently if you try to nest a flex-box
-     * within a non-flex-box within a flex-box, the height
-     * of the innermost element gets miscalculated if the
-     * parents are both auto.  Height has to be auto here
-     * for RoomView to correctly fit when the Toolbar is shown.
-     * Ideally we'd launch straight into the RoomView at this
-     * point, but instead we fudge it and make the middlePanel
-     * flex itself.
-     */
     display: flex;
+
+    /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
+       needed height 100% all the way down to the HomePage. Height does not
+       have to be auto, empirically.
+    */
+    height: 100%;
 }
 
 .mx_MatrixChat .mx_RightPanel {

src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss

@@ -171,7 +171,7 @@ hr.mx_RoomView_myReadMarker {
 
     max-height: 0px;
     background-color: $primary-bg-color;
-    z-index: 1000;
+    z-index: 5;
     overflow: hidden;
 
     -webkit-transition: all .2s ease-out;
@@ -206,8 +206,9 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
-    border-top: 1px hidden;
-    padding-top: 1px;
+    margin-top: 2px;
+    border: none;
+    height: 0px;
 }
 
 .mx_RoomView_inCall .mx_MessageComposer_wrapper {
@@ -258,4 +259,4 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_ongoingConfCallNotification a {
     color: $accent-fg-color ! important;
-}
+}

src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -175,6 +176,21 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_UserSettings_phoneSection {
+    display:table;
+}
+
+.mx_UserSettings_phoneCountry {
+    width: 70px;
+    display: table-cell;
+}
+
+input.mx_UserSettings_phoneNumberField {
+    margin-left: 3px;
+    width: 172px;
+    border: 1px solid transparent;
+}
+
 .mx_UserSettings_changePasswordButton {
     float: right;
     margin-right: 32px;
@@ -206,3 +222,9 @@ limitations under the License.
 .mx_UserSettings_avatarPicker_edit > input {
     display: none;
 }
+
+.mx_UserSettings_advanced_spoiler {
+    cursor: pointer;
+    color: $accent-color;
+    word-break: break-all;
+}

src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@@ -42,7 +42,8 @@ limitations under the License.
 
 .mx_Login_logo {
     text-align: center;
-    height: 195px;
+    height: 150px;
+    margin-bottom: 45px;
 }
 
 .mx_Login_logo img {
@@ -163,3 +164,82 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
+.mx_Login_type_container {
+    display: flex;
+    margin-bottom: 14px;
+}
+
+.mx_Login_type_label {
+    flex-grow: 1;
+    line-height: 35px;
+}
+
+.mx_Login_type_dropdown {
+    width: 125px;
+    align-self: flex-end;
+}
+
+.mx_Login_field_group {
+    display: flex;
+}
+
+.mx_Login_field_prefix {
+    height: 33px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-right: 0px;
+    border-radius: 3px 0px 0px 3px;
+
+    text-align: center;
+}
+
+.mx_Login_field_suffix {
+    height: 33px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-left: 0px;
+    border-radius: 0px 3px 3px 0px;
+
+    text-align: center;
+    flex-grow: 1;
+}
+
+.mx_Login_username {
+    flex-shrink: 1;
+    min-width: 0px;
+    border-radius: 3px;
+}
+
+.mx_Login_field_has_prefix {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+.mx_Login_field_has_suffix {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.mx_Login_phoneCountry {
+    margin-bottom: 14px;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option {
+    /*
+        To match height of mx_Login_field
+        33px + 2px border from mx_Dropdown_option = 35px
+    */
+    height: 33px;
+    line-height: 33px;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option img {
+    margin: 4px;
+    vertical-align: top;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss

@@ -0,0 +1,27 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
+    margin-top: 24px;
+}
+
+.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
+    margin-bottom: 24px;
+}
+
+.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
+    display: none;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss

@@ -14,22 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_ConfirmUserActionDialog .mx_Dialog_content {
+    min-height: 48px;
+    margin-bottom: 24px;
+}
+
 .mx_ConfirmUserActionDialog_avatar {
     float: left;
     margin-right: 20px;
+    margin-top: -2px;
 }
 
 .mx_ConfirmUserActionDialog_name {
-    font-size: 150%;
+    font-size: 18px;
 }
 
 .mx_ConfirmUserActionDialog_userId {
-    font-style: italic;
+    font-size: 13px;
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
-    margin-bottom: 40px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    font-size: 14px;
+    color: $primary-fg-color;
+
+    border-radius: 3px;
+    border: solid 1px $input-border-color;
+    line-height: 36px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+
+    margin-bottom: 24px;
+
     width: 90%;
-    font-size: 120%;
-    height: 35px;
 }

src/skins/vector/css/matrix-react-sdk/views/elements/_AccessibleButton.scss

@@ -0,0 +1,21 @@
+/*
+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.
+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_AccessibleButton:focus {
+    outline: 0;
+    filter: brightness($focus-brightness);
+}
+

src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss

@@ -0,0 +1,102 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+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_Dropdown {
+    position: relative;
+}
+
+.mx_Dropdown_input {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+    font-weight: 300;
+    font-size: 13px;
+    user-select: none;
+}
+
+.mx_Dropdown_input:focus {
+    border-color: $accent-color;
+}
+
+/* Disable dropdown highlight on focus */
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_Dropdown_arrow {
+    border-color: $primary-fg-color transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0
+}
+
+.mx_Dropdown_option {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.mx_Dropdown_option img {
+    margin: 5px;
+    width: 25px;
+    vertical-align: middle;
+}
+
+input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    // XXX: hack to prevent text box being too big and pushing
+    // its parent out / overlapping the dropdown arrow. Only really
+    // works in the Country dropdown.
+    width: 60%;
+}
+
+.mx_Dropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid $accent-color;
+    background-color: $primary-bg-color;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+    background-color: $focus-bg-color;
+}
+
+.mx_Dropdown_menu {
+    font-weight: bold;
+}
+
+.mx_Dropdown_searchPrompt {
+    font-weight: normal;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+

src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MemberEventListSummary {
+    position: relative;
+}
+
 .mx_TextualEvent.mx_MemberEventListSummary_summary {
     font-size: 14px;
 }
@@ -31,6 +35,15 @@ limitations under the License.
 }
 
 .mx_MemberEventListSummary_toggle {
-    color:$accent-color;
-    cursor:pointer;
+    color: $accent-color;
+    cursor: pointer;
+    float: right;
+    margin-right: 10px;
+    margin-top: 8px;
+}
+
+.mx_MemberEventListSummary_line {
+    border-bottom: 1px solid $primary-hairline-color;
+    margin-left: 63px;
+    line-height: 30px;
 }

src/skins/vector/css/matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss

@@ -0,0 +1,42 @@
+/*
+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.
+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_InteractiveAuthEntryComponents_msisdnWrapper {
+    text-align: center;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry {
+    font-size: 200%;
+    font-weight: bold;
+    border: 1px solid $strong-input-border-color;
+    border-radius: 3px;
+    width: 6em;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
+    border: 1px solid $accent-color;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnSubmit {
+    margin-top: 4px;
+    margin-bottom: 5px;
+}
+
+// XXX: This should be a common button class
+.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
+    background-color: $light-fg-color;
+    cursor: default;
+}

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

@@ -0,0 +1,19 @@
+/*
+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.
+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_MEmoteBody_sender {
+    cursor: pointer;
+}

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

@@ -130,6 +130,23 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
+.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
+    display: block;
+    width: 100%;
+    height: 36px;
+    background-image: $event-redacted-img;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
+    /*
+       Prevent changing colour of the background because
+       $event-redacted-img matches $primary-bg-color
+    */
+    background-color: initial !important;
+}
+
 .mx_EventTile_highlight,
 .mx_EventTile_highlight .markdown-body
  {
@@ -251,9 +268,9 @@ limitations under the License.
     padding-left: 60px;
 }
 
-.mx_EventTile_selected .mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_info .mx_EventTile_line {
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
     padding-left: 78px;
 }
 
@@ -314,6 +331,14 @@ limitations under the License.
     font-family: inherit ! important;
 }
 
+
+/* Make h1 and h2 the same size as h3. */
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2
+{
+    font-size: 1.5em;
+}
+
 .mx_EventTile_content .markdown-body a {
     color: $accent-color;
 }

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

@@ -38,6 +38,7 @@ limitations under the License.
 .mx_LinkPreviewWidget_title {
     display: inline;
     font-weight: bold;
+    white-space: normal;
 }
 
 .mx_LinkPreviewWidget_siteName {

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

@@ -31,6 +31,7 @@ limitations under the License.
     margin-left: -2px;
     order: 1;
     flex: 1;
+    overflow: hidden;
 }
 
 .mx_RoomHeader_spinner {

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2107 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.
@@ -37,3 +38,24 @@ limitations under the License.
 .mx_RoomList_scrollbar .gm-scrollbar.-vertical {
     z-index: 6;
 }
+
+.mx_RoomList_greyedSubListLabel {
+    color: #a2a2a2;
+}
+
+.mx_RoomList_emptySubListTip {
+    font-size: 13px;
+    margin-left: 18px;
+    margin-right: 18px;
+    margin-top: 8px;
+    margin-bottom: 7px;
+    padding: 5px;
+    border: 1px solid $accent-color;
+    color: $primary-fg-color;
+    background-color: $droptarget-bg-color;
+    border-radius: 4px;
+}
+
+.mx_RoomList_butonPreview {
+    float: right;
+}

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

@@ -59,41 +59,6 @@ limitations under the License.
     z-index: 2;
 }
 
-.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
-.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
-    display: block;
-    position: absolute;
-    content: "";
-    border-radius: 40px;
-    background-image: url("../../img/icons_ellipsis.svg");
-    background-size: 25px;
-    width: 24px;
-    height: 24px;
-    z-index: 4;
-}
-
-.mx_RoomTile:hover .mx_RoomTile_avatar_container:after,
-.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
-    display: block;
-    position: absolute;
-    content: "";
-    border-radius: 40px;
-    background: $primary-fg-color;
-    bottom: 0;
-    width: 24px;
-    height: 24px;
-    opacity: 0.6;
-    z-index: 1;
-}
-
-.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {
-    display: none;
-}
-
-.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:after {
-    display: none;
-}
-
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
@@ -164,13 +129,13 @@ limitations under the License.
 }
 
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
-.mx_RoomTile.mx_RoomTile_notificationStateMenu .mx_RoomTile_badge {
+.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
     letter-spacing: 0.1em;
     opacity: 1;
 }
 
 .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
-.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
+.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
     background-color: $neutral-badge-color;
 }
 
@@ -191,7 +156,7 @@ limitations under the License.
 }
 
 .mx_RoomTile:focus {
-    outline: 0;
+    filter: none ! important;
     background-color: $roomtile-focused-bg-color;
 }
 

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

@@ -17,14 +17,15 @@ limitations under the License.
 .mx_TopUnreadMessagesBar {
     margin: auto;  /* centre horizontally */
     max-width: 960px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
     display: inline;
     cursor: pointer;
+    text-decoration: underline;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp img {

src/skins/vector/css/themes/_base.scss

@@ -15,6 +15,8 @@ $accent-color: #76CFA6;
 
 $selection-fg-color: $primary-bg-color;
 
+$focus-brightness: 125%;
+
 // red warning colour
 $warning-color: #ff0064;
 
@@ -93,6 +95,9 @@ $event-encrypting-color: #abddbc;
 $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
+// event redaction
+$event-redacted-img: url('../../img/redacted.jpg');
+
 // event timestamp
 $event-timestamp-color: #acacac;
 

src/skins/vector/css/themes/_dark.scss

@@ -15,6 +15,8 @@ $accent-color: #76CFA6;
 
 $selection-fg-color: $primary-fg-color;
 
+$focus-brightness: 200%;
+
 // red warning colour
 $warning-color: #ff0064;
 
@@ -93,6 +95,9 @@ $event-encrypting-color: rgba(171, 221, 188, 0.4);
 $event-sending-color: #888;
 $event-notsent-color: #f44;
 
+// event redaction
+$event-redacted-img: url('../../img/redacted-dark.jpg');
+
 // event timestamp
 $event-timestamp-color: #acacac;
 
@@ -115,17 +120,17 @@ $progressbar-color: #000;
 // better match the theme.  Typically applied to dark grey 'off' buttons or
 // light grey 'on' buttons.
 .mx_filterFlipColor {
-    filter: invert();
+    filter: invert(1);
 }
 
 .gm-scrollbar .thumb {
-    filter: invert();
+    filter: invert(1);
 }
 
 // markdown overrides:
 .mx_EventTile_content .markdown-body {
     pre, code {
-        filter: invert();
+        filter: invert(1);
     }
 
     pre code {

src/skins/vector/css/vector-web/structures/_HomePage.scss

@@ -18,6 +18,8 @@ limitations under the License.
 .mx_HomePage {
     max-width: 960px;
     width: 100%;
+    height: 100%;
+    overflow-y: hidden;
     margin-left: auto;
     margin-right: auto;
 }

src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss

@@ -1,56 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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_NotificationStateContextMenu_picker {
-    position: absolute;
-    top: 16px;
-    left: 5px;
-}
-
-.mx_NotificationStateContextMenu_field {
-    padding-top: 4px;
-    padding-right: 6px;
-    padding-bottom: 10px;
-    padding-left: 8px; /* 20px */
-    cursor: pointer;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-}
-
-.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
-    font-weight: bold;
-}
-
-.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
-    color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_NotificationStateContextMenu_icon {
-    padding-right: 4px;
-    padding-left: 4px;
-}
-
-.mx_NotificationStateContextMenu_activeIcon {
-    display: inline-block;
-    opacity: 0;
-    position: relative;
-    left: -5px;
-}
-
-.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {
-    opacity: 1;
-}

src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss

@@ -1,78 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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_RoomTagContextMenu_field {
-    padding-top: 8px;
-    padding-right: 20px;
-    padding-bottom: 8px;
-    cursor: pointer;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    line-height: 16px;
-}
-
-.mx_RoomTagContextMenu_field:first-child {
-    padding-top: 4px;
-}
-
-.mx_RoomTagContextMenu_field:last-child {
-    padding-bottom: 4px;
-    color: $warning-color;
-}
-
-.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
-    font-weight: bold;
-}
-
-.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
-    display: none;
-}
-
-.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon_set {
-    display: inline-block;
-}
-
-.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled {
-    color: rgba(0, 0, 0, 0.2);
-}
-
-.mx_RoomTagContextMenu_icon {
-    padding-right: 8px;
-    padding-left: 4px;
-    display: inline-block
-}
-
-.mx_RoomTagContextMenu_icon_set {
-    padding-right: 8px;
-    padding-left: 4px;
-    display: none;
-}
-
-.mx_RoomTagContextMenu_separator {
-    margin-top: 0;
-    margin-bottom: 0;
-    border-bottom-style: none;
-    border-left-style: none;
-    border-right-style: none;
-    border-top-style: solid;
-    border-top-width: 1px;
-    border-color: $menu-border-color;
-}
-
-.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
-    /* Something to indicate that the icon is the set tag */
-}

src/skins/vector/css/vector-web/views/context_menus/_RoomTileContextMenu.scss

@@ -0,0 +1,114 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-bottom: 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
+    font-weight: bold;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
+    display: none;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set {
+    display: inline-block;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTileContextMenu_tag_icon {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: inline-block
+}
+
+.mx_RoomTileContextMenu_tag_icon_set {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: none;
+}
+
+.mx_RoomTileContextMenu_separator {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-bottom-style: none;
+    border-left-style: none;
+    border-right-style: none;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-color: $menu-border-color;
+}
+
+.mx_RoomTileContextMenu_leave {
+    color: $warning-color;
+}
+
+.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
+    /* Something to indicate that the icon is the set tag */
+}
+
+.mx_RoomTileContextMenu_notif_picker {
+    position: absolute;
+    top: 16px;
+    left: 5px;
+}
+
+.mx_RoomTileContextMenu_notif_field {
+    padding-top: 4px;
+    padding-right: 6px;
+    padding-bottom: 10px;
+    padding-left: 8px; /* 20px */
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet {
+    font-weight: bold;
+}
+
+.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTileContextMenu_notif_icon {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.mx_RoomTileContextMenu_notif_activeIcon {
+    display: inline-block;
+    opacity: 0;
+    position: relative;
+    left: -5px;
+}
+
+.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon {
+    opacity: 1;
+}

src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss

@@ -44,6 +44,9 @@ limitations under the License.
     line-height: 35px;
     padding-left: 8px;
     padding-right: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .mx_NetworkDropdown_networkoption img {

src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss

@@ -33,26 +33,12 @@ limitations under the License.
     margin-left: 10px;
 }
 
-.mx_RoomDropTarget_placeholder {
-    padding-top: 1px;
-    padding-bottom: 1px;
-}
-
-.mx_RoomDropTarget_avatar {
-    background-color: $primary-bg-color;
-    border-radius: 24px;
-    width: 24px;
-    height: 24px;
-    float: left;
-    margin-left: 7px;
-    margin-right: 7px;
-}
-
 .mx_RoomDropTarget_label {
     position: relative;
     margin-top: 3px;
     line-height: 21px;
     z-index: 1;
+    text-align: center;
 }
 
 .collapsed .mx_RoomDropTarget_avatar {

src/skins/vector/img/icons-directory.svg

@@ -1,21 +1,24 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>E34C64ED-EBD7-49B6-BDD9-CB729162705A</title>
-    <desc>Created with sketchtool.</desc>
-    <defs>
-        <rect id="path-1" x="6" y="10" width="13" height="8" rx="1"></rect>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13" height="8" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-    </defs>
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_directory</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Room-list-Copy-3" transform="translate(-58.000000, -726.000000)">
-            <g id="icons_directory" transform="translate(58.000000, 726.000000)">
-                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
-                <use id="Rectangle-9" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="2" opacity="0.8" xlink:href="#path-1"></use>
-                <path d="M6,9 L6,6.99895656 C6,6.44724809 6.45097518,6 6.99077797,6 L11.009222,6 C11.5564136,6 12,6.44386482 12,7 L12,8 L17.9970707,8 C18.5509732,8 19,8.45318604 19,9 L19,9 L6,9 Z" id="Path-Copy" fill="#FFFFFF" opacity="0.6"></path>
+        <g id="Left-panel" transform="translate(-83.000000, -726.000000)">
+            <g id="icons_directory">
+                <g transform="translate(83.000000, 726.000000)">
+                    <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
+                    <g id="Lines" transform="translate(6.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round">
+                        <path d="M4,5.5 L9,5.5" id="Line"></path>
+                        <path d="M4,1.5 L13,1.5" id="Line-Copy-4"></path>
+                        <path d="M0,1.5 L2,1.5" id="Line" opacity="0.6"></path>
+                        <path d="M0,5.5 L2,5.5" id="Line" opacity="0.6"></path>
+                        <path d="M4,9.5 L11,9.5" id="Line-Copy-6"></path>
+                        <path d="M0,9.5 L2,9.5" id="Line-Copy-3" opacity="0.6"></path>
+                    </g>
+                </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/skins/vector/img/scrollto.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="scrollup">
+            <g id="02-Chat" transform="translate(12.000000, 12.000000) scale(-1, 1) rotate(-180.000000) translate(-12.000000, -12.000000) ">
+                <g id="02_7-Chat-new-messages">
+                    <g id="icon_newmessages">
+                        <circle id="Oval-1909" fill-opacity="0.5" fill="#454545" fill-rule="nonzero" cx="12" cy="12" r="12"></circle>
+                        <circle id="Oval" stroke="#FFFFFF" cx="12" cy="12" r="7"></circle>
+                        <circle id="Oval" stroke="#FFFFFF" cx="12" cy="12" r="4"></circle>
+                        <circle id="Oval" fill="#FFFFFF" cx="12" cy="12" r="1"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/vector/index.html

@@ -37,8 +37,19 @@
   <body style="height: 100%;">
     <section id="matrixchat" style="height: 100%;"></section>
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
-    <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
-       <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
+    <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {
+        // Not a particularly graceful way of not putting the indexeddb worker script
+        // into the main page
+        if (_.endsWith(htmlWebpackPlugin.files.js[i], 'indexeddb-worker.js')) {
+            %>
+            <script>
+                window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.js[i] %>';
+            </script>
+            <%
+            continue;
+        }
+        %>
+        <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
     <% } %>
     <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <audio id="messageAudio">

src/vector/index.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -49,7 +50,7 @@ rageshake.init().then(() => {
  // access via the console
 global.React = require("react");
 if (process.env.NODE_ENV !== 'production') {
-    global.ReactPerf = require("react-addons-perf");
+    global.Perf = require("react-addons-perf");
 }
 
 var RunModernizrTests = require("./modernizr"); // this side-effects a global
@@ -67,11 +68,15 @@ import url from 'url';
 import {parseQs, parseQsFromFragment} from './url_utils';
 import Platform from './platform';
 
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+
 var lastLocationHashSet = null;
 
 var CallHandler = require("matrix-react-sdk/lib/CallHandler");
 CallHandler.setConferenceHandler(VectorConferenceHandler);
 
+MatrixClientPeg.setIndexedDbWorkerScript(window.vector_indexeddb_worker_script);
+
 function checkBrowserFeatures(featureList) {
     if (!window.Modernizr) {
         console.error("Cannot check features - Modernizr global is missing.");
@@ -101,15 +106,24 @@ var validBrowser = checkBrowserFeatures([
     "objectfit"
 ]);
 
+// Parse the given window.location and return parameters that can be used when calling
+// MatrixChat.showScreen(screen, params)
+function getScreenFromLocation(location) {
+    const fragparts = parseQsFromFragment(location);
+    return {
+        screen: fragparts.location.substring(1),
+        params: fragparts.params,
+    }
+}
+
 // Here, we do some crude URL analysis to allow
 // deep-linking.
 function routeUrl(location) {
     if (!window.matrixChat) return;
 
-    console.log("Routing URL "+location);
-    var fragparts = parseQsFromFragment(location);
-    window.matrixChat.showScreen(fragparts.location.substring(1),
-                                 fragparts.params);
+    console.log("Routing URL ", location.href);
+    const s = getScreenFromLocation(location);
+    window.matrixChat.showScreen(s.screen, s.params);
 }
 
 function onHashChange(ev) {
@@ -120,22 +134,13 @@ function onHashChange(ev) {
     routeUrl(window.location);
 }
 
-var loaded = false;
-var lastLoadedScreen = null;
-
 // This will be called whenever the SDK changes screens,
 // so a web page can update the URL bar appropriately.
 var onNewScreen = function(screen) {
     console.log("newscreen "+screen);
-    // just remember the most recent screen while we are loading, so that the
-    // user doesn't see the URL bar doing a dance
-    if (!loaded) {
-        lastLoadedScreen = screen;
-    } else {
-        var hash = '#/' + screen;
-        lastLocationHashSet = hash;
-        window.location.hash = hash;
-    }
+    var hash = '#/' + screen;
+    lastLocationHashSet = hash;
+    window.location.hash = hash;
 }
 
 // We use this to work out what URL the SDK should
@@ -147,16 +152,30 @@ var onNewScreen = function(screen) {
 // If we're in electron, we should never pass through a file:// URL otherwise
 // the identity server will try to 302 the browser to it, which breaks horribly.
 // so in that instance, hardcode to use riot.im/app for now instead.
-var makeRegistrationUrl = function() {
+var makeRegistrationUrl = function(params) {
+    let url;
     if (window.location.protocol === "file:") {
-        return 'https://riot.im/app/#/register';
+        url = 'https://riot.im/app/#/register';
+    } else {
+        url = (
+            window.location.protocol + '//' +
+            window.location.host +
+            window.location.pathname +
+            '#/register'
+        );
     }
-    else {
-        return window.location.protocol + '//' +
-               window.location.host +
-               window.location.pathname +
-               '#/register';
+
+    const keys = Object.keys(params);
+    for (let i = 0; i < keys.length; ++i) {
+        if (i == 0) {
+            url += '?';
+        } else {
+            url += '&';
+        }
+        const k = keys[i];
+        url += k + '=' + encodeURIComponent(params[k]);
     }
+    return url;
 }
 
 window.addEventListener('hashchange', onHashChange);
@@ -240,11 +259,15 @@ async function loadApp() {
     let configError;
     try {
         configJson = await getConfig();
-        rageshake.setBugReportEndpoint(configJson.bug_report_endpoint_url);
     } catch (e) {
         configError = e;
     }
 
+    if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) {
+        console.log('User has previously accepted risks in using an unsupported browser');
+        validBrowser = true;
+    }
+
     console.log("Vector starting at "+window.location);
     if (configError) {
         window.matrixChat = ReactDOM.render(<div className="error">
@@ -253,31 +276,22 @@ async function loadApp() {
     } else if (validBrowser) {
         UpdateChecker.start();
 
-        var MatrixChat = sdk.getComponent('structures.MatrixChat');
-
+        const MatrixChat = sdk.getComponent('structures.MatrixChat');
         window.matrixChat = ReactDOM.render(
             <MatrixChat
                 onNewScreen={onNewScreen}
-                registrationUrl={makeRegistrationUrl()}
+                makeRegistrationUrl={makeRegistrationUrl}
                 ConferenceHandler={VectorConferenceHandler}
                 config={configJson}
                 realQueryParams={params}
                 startingFragmentQueryParams={fragparts.params}
                 enableGuest={true}
                 onLoadCompleted={onLoadCompleted}
+                initialScreenAfterLogin={getScreenFromLocation(window.location)}
                 defaultDeviceDisplayName={PlatformPeg.get().getDefaultDeviceDisplayName()}
             />,
             document.getElementById('matrixchat')
         );
-
-        routeUrl(window.location);
-
-        // we didn't propagate screen changes to the URL bar while we were loading; do it now.
-        loaded = true;
-        if (lastLoadedScreen) {
-            onNewScreen(lastLoadedScreen);
-            lastLoadedScreen = null;
-        }
     }
     else {
         console.error("Browser is missing required features.");
@@ -285,6 +299,7 @@ async function loadApp() {
         var CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
         window.matrixChat = ReactDOM.render(
             <CompatibilityPage onAccept={function() {
+                if (window.localStorage) window.localStorage.setItem('mx_accepts_unsupported_browser', true);
                 validBrowser = true;
                 console.log("User accepts the compatibility risks.");
                 loadApp();

src/vector/indexedbd-worker.js

@@ -0,0 +1,21 @@
+/*
+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.
+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 {IndexedDBStoreWorker} from 'matrix-js-sdk/lib/indexeddb-worker.js';
+
+const remoteWorker = new IndexedDBStoreWorker(postMessage);
+
+onmessage = remoteWorker.onMessage;

src/vector/platform/ElectronPlatform.js

@@ -24,12 +24,12 @@ import q from 'q';
 const electron = require('electron');
 const remote = electron.remote;
 
-electron.remote.autoUpdater.on('update-downloaded', onUpdateDownloaded);
+remote.autoUpdater.on('update-downloaded', onUpdateDownloaded);
 
 function onUpdateDownloaded(ev, releaseNotes, ver, date, updateURL) {
     dis.dispatch({
         action: 'new_version',
-        currentVersion: electron.remote.app.getVersion(),
+        currentVersion: remote.app.getVersion(),
         newVersion: ver,
         releaseNotes: releaseNotes,
     });
@@ -68,7 +68,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         try {
             remote.app.setBadgeCount(count);
         } catch (e) {
-            console.error("Failed to set notification count", e);
+            console.error('Failed to set notification count', e);
         }
     }
 
@@ -81,13 +81,24 @@ export default class ElectronPlatform extends VectorBasePlatform {
     }
 
     displayNotification(title: string, msg: string, avatarUrl: string, room: Object): Notification {
+
+        // GNOME notification spec parses HTML tags for styling...
+        // Electron Docs state all supported linux notification systems follow this markup spec
+        // https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md#linux
+        // maybe we should pass basic styling (italics, bold, underline) through from MD
+        // we only have to strip out < and > as the spec doesn't include anything about things like &amp;
+        // so we shouldn't assume that all implementations will treat those properly. Very basic tag parsing is done.
+        if (window.process.platform === 'linux') {
+            msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        }
+
         // Notifications in Electron use the HTML5 notification API
         const notification = new global.Notification(
             title,
             {
                 body: msg,
                 icon: avatarUrl,
-                tag: "vector",
+                tag: 'vector',
                 silent: true, // we play our own sounds
             }
         );
@@ -95,13 +106,14 @@ export default class ElectronPlatform extends VectorBasePlatform {
         notification.onclick = function() {
             dis.dispatch({
                 action: 'view_room',
-                room_id: room.roomId
+                room_id: room.roomId,
             });
             global.focus();
-            const currentWin = electron.remote.getCurrentWindow();
-            currentWin.show();
-            currentWin.restore();
-            currentWin.focus();
+            const win = remote.getCurrentWindow();
+
+            if (win.isMinimized()) win.restore();
+            else if (!win.isVisible()) win.show();
+            else win.focus();
         };
 
         return notification;
@@ -112,7 +124,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
     }
 
     getAppVersion() {
-        return q(electron.remote.app.getVersion());
+        return q(remote.app.getVersion());
     }
 
     pollForUpdate() {
@@ -129,7 +141,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
     }
 
     getDefaultDeviceDisplayName() {
-        return "Riot Desktop on " + platformFriendlyName();
+        return 'Riot Desktop on ' + platformFriendlyName();
     }
 
     screenCaptureErrorString() {
@@ -139,4 +151,8 @@ export default class ElectronPlatform extends VectorBasePlatform {
     requestNotificationPermission() : Promise {
         return q('granted');
     }
+
+    reload() {
+        remote.getCurrentWebContents().reload();
+    }
 }

src/vector/platform/WebPlatform.js

@@ -206,4 +206,10 @@ export default class WebPlatform extends VectorBasePlatform {
         }
         return null;
     }
+
+    reload() {
+        // forceReload=false since we don't really need new HTML/JS files
+        // we just need to restart the JS runtime.
+        window.location.reload(false);
+    }
 }

src/vector/rageshake.js

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
-import request from "browser-request";
 import q from "q";
 
 // This module contains all the code needed to log the console, persist it to
@@ -205,9 +203,6 @@ class IndexedDBLogStore {
             }
             let txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
             let objStore = txn.objectStore("logs");
-            objStore.add(this._generateLogEntry(lines));
-            let lastModStore = txn.objectStore("logslastmod");
-            lastModStore.put(this._generateLastModifiedTime());
             txn.oncomplete = (event) => {
                 resolve();
             };
@@ -219,6 +214,9 @@ class IndexedDBLogStore {
                     new Error("Failed to write logs: " + event.target.errorCode)
                 );
             }
+            objStore.add(this._generateLogEntry(lines));
+            let lastModStore = txn.objectStore("logslastmod");
+            lastModStore.put(this._generateLastModifiedTime());
         });
         return this.flushPromise;
     }
@@ -314,17 +312,24 @@ class IndexedDBLogStore {
         let size = 0;
         for (let i = 0; i < allLogIds.length; i++) {
             let lines = await fetchLogs(allLogIds[i]);
+
+            // always include at least one log file, but only include
+            // subsequent ones if they won't take us over the MAX_LOG_SIZE
+            if (i > 0 && size + lines.length > MAX_LOG_SIZE) {
+                // the remaining log IDs should be removed. If we go out of
+                // bounds this is just []
+                //
+                // XXX: there's nothing stopping the current session exceeding
+                // MAX_LOG_SIZE. We ought to think about culling it.
+                removeLogIds = allLogIds.slice(i + 1);
+                break;
+            }
+
             logs.push({
                 lines: lines,
                 id: allLogIds[i],
             });
             size += lines.length;
-            if (size > MAX_LOG_SIZE) {
-                // the remaining log IDs should be removed. If we go out of
-                // bounds this is just []
-                removeLogIds = allLogIds.slice(i + 1);
-                break;
-            }
         }
         if (removeLogIds.length > 0) {
             console.log("Removing logs: ", removeLogIds);
@@ -389,7 +394,6 @@ function selectQuery(store, keyRange, resultMapper) {
 let store = null;
 let logger = null;
 let initPromise = null;
-let bugReportEndpoint = null;
 module.exports = {
 
     /**
@@ -423,79 +427,29 @@ module.exports = {
         await store.consume();
     },
 
-    setBugReportEndpoint: function(url) {
-        bugReportEndpoint = url;
-    },
-
     /**
-     * Send a bug report.
-     * @param {string} userText Any additional user input.
-     * @param {boolean} sendLogs True to send logs
-     * @return {Promise} Resolved when the bug report is sent.
+     * Get a recent snapshot of the logs, ready for attaching to a bug report
+     *
+     * @return {Array<{lines: string, id, string}>}  list of log data
      */
-    sendBugReport: async function(userText, sendLogs) {
+    getLogsForReport: async function() {
         if (!logger) {
             throw new Error(
                 "No console logger, did you forget to call init()?"
             );
         }
-        if (!bugReportEndpoint) {
-            throw new Error("No bug report endpoint has been set.");
-        }
-
-        let version = "UNKNOWN";
-        try {
-            version = await PlatformPeg.get().getAppVersion();
-        }
-        catch (err) {} // PlatformPeg already logs this.
-
-        let userAgent = "UNKNOWN";
-        if (window.navigator && window.navigator.userAgent) {
-            userAgent = window.navigator.userAgent;
-        }
-
         // If in incognito mode, store is null, but we still want bug report
         // sending to work going off the in-memory console logs.
-        console.log("Sending bug report.");
-        let logs = [];
-        if (sendLogs) {
-            if (store) {
-                // flush most recent logs
-                await store.flush();
-                logs = await store.consume();
-            }
-            else {
-                logs.push({
-                    lines: logger.flush(true),
-                    id: "-",
-                });
-            }
+        if (store) {
+            // flush most recent logs
+            await store.flush();
+            return await store.consume();
         }
-
-        await q.Promise((resolve, reject) => {
-            request({
-                method: "POST",
-                url: bugReportEndpoint,
-                body: {
-                    logs: logs,
-                    text: (
-                        userText || "User did not supply any additional text."
-                    ),
-                    version: version,
-                    user_agent: userAgent,
-                },
-                json: true,
-            }, (err, res) => {
-                if (err) {
-                    reject(err);
-                    return;
-                }
-                if (res.status < 200 || res.status >= 400) {
-                    reject(new Error(`HTTP ${res.status}`));
-                    return;
-                }
-                resolve();
-            })
-        });
-    }
+        else {
+            return [{
+                lines: logger.flush(true),
+                id: "-",
+            }];
+        }
+    },
 };

src/vector/submit-rageshake.js

@@ -0,0 +1,116 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+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 pako from 'pako';
+import q from "q";
+
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+
+import rageshake from './rageshake'
+
+
+// polyfill textencoder if necessary
+import * as TextEncodingUtf8 from 'text-encoding-utf-8';
+let TextEncoder = window.TextEncoder;
+if (!TextEncoder) {
+    TextEncoder = TextEncodingUtf8.TextEncoder;
+}
+
+/**
+ * Send a bug report.
+ *
+ * @param {string} bugReportEndpoint HTTP url to send the report to
+ *
+ * @param {object} opts optional dictionary of options
+ *
+ * @param {string} opts.userText Any additional user input.
+ *
+ * @param {boolean} opts.sendLogs True to send logs
+ *
+ * @param {function(string)} opts.progressCallback Callback to call with progress updates
+ *
+ * @return {Promise} Resolved when the bug report is sent.
+ */
+export default async function sendBugReport(bugReportEndpoint, opts) {
+    if (!bugReportEndpoint) {
+        throw new Error("No bug report endpoint has been set.");
+    }
+
+    opts = opts || {};
+    const progressCallback = opts.progressCallback || (() => {});
+
+    progressCallback("Collecting app version information");
+    let version = "UNKNOWN";
+    try {
+        version = await PlatformPeg.get().getAppVersion();
+    }
+    catch (err) {} // PlatformPeg already logs this.
+
+    let userAgent = "UNKNOWN";
+    if (window.navigator && window.navigator.userAgent) {
+        userAgent = window.navigator.userAgent;
+    }
+
+    console.log("Sending bug report.");
+
+    const body = new FormData();
+    body.append('text', opts.userText || "User did not supply any additional text.");
+    body.append('app', 'riot-web');
+    body.append('version', version);
+    body.append('user_agent', userAgent);
+
+    if (opts.sendLogs) {
+        progressCallback("Collecting logs");
+        const logs = await rageshake.getLogsForReport();
+        for (let entry of logs) {
+            // encode as UTF-8
+            const buf = new TextEncoder().encode(entry.lines);
+
+            // compress
+            const compressed = pako.gzip(buf);
+
+            body.append('compressed-log', new Blob([compressed]), entry.id);
+        }
+    }
+
+    progressCallback("Uploading report");
+    await _submitReport(bugReportEndpoint, body, progressCallback);
+}
+
+function _submitReport(endpoint, body, progressCallback) {
+    const deferred = q.defer();
+
+    const req = new XMLHttpRequest();
+    req.open("POST", endpoint);
+    req.timeout = 5 * 60 * 1000;
+    req.onreadystatechange = function() {
+        if (req.readyState === XMLHttpRequest.LOADING) {
+            progressCallback("Waiting for response from server");
+        } else if (req.readyState === XMLHttpRequest.DONE) {
+            on_done();
+        }
+    };
+    req.send(body);
+    return deferred.promise;
+
+    function on_done() {
+        if (req.status < 200 || req.status >= 400) {
+            deferred.reject(new Error(`HTTP ${req.status}`));
+            return;
+        }
+        deferred.resolve();
+    }
+}

test/app-tests/joining.js

@@ -23,6 +23,7 @@ var jssdk = require('matrix-js-sdk');
 var sdk = require('matrix-react-sdk');
 var peg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var dis = require('matrix-react-sdk/lib/dispatcher');
+var PageTypes = require('matrix-react-sdk/lib/PageTypes');
 var MatrixChat = sdk.getComponent('structures.MatrixChat');
 var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
 var RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
@@ -71,14 +72,13 @@ describe('joining a room', function () {
             var ROOM_ALIAS = '#alias:localhost';
             var ROOM_ID = '!id:localhost';
 
-            httpBackend.when('PUT', '/presence/'+encodeURIComponent(USER_ID)+'/status')
-                .respond(200, {});
             httpBackend.when('GET', '/pushrules').respond(200, {});
             httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
             httpBackend.when('GET', '/sync').respond(200, {});
-            httpBackend.when('POST', '/publicRooms').respond(200, {chunk: []});
-            httpBackend.when('GET', '/thirdparty/protocols').respond(200, {});
-            httpBackend.when('GET', '/directory/room/'+encodeURIComponent(ROOM_ALIAS)).respond(200, { room_id: ROOM_ID });
+
+            // note that we deliberately do *not* set an expectation for a
+            // presence update - setting one makes the first httpBackend.flush
+            // return before the first /sync arrives.
 
             // start with a logged-in client
             localStorage.setItem("mx_hs_url", HS_URL );
@@ -90,14 +90,21 @@ describe('joining a room', function () {
             matrixChat = ReactDOM.render(mc, parentDiv);
 
             // switch to the Directory
-            dis.dispatch({
-                action: 'view_room_directory',
-            });
+            matrixChat._setPage(PageTypes.RoomDirectory);
 
             var roomView;
+
             // wait for /sync to happen
             return q.delay(1).then(() => {
                 return httpBackend.flush();
+            }).then(() => {
+                // wait for the directory requests
+                httpBackend.when('POST', '/publicRooms').respond(200, {chunk: []});
+                httpBackend.when('GET', '/thirdparty/protocols').respond(200, {});
+                return q.all([
+                    httpBackend.flush('/publicRooms'),
+                    httpBackend.flush('/thirdparty/protocols'),
+                ]);
             }).then(() => {
                 var roomDir = ReactTestUtils.findRenderedComponentWithType(
                     matrixChat, RoomDirectory);
@@ -111,6 +118,7 @@ describe('joining a room', function () {
 
                 // that should create a roomview which will start a peek; wait
                 // for the peek.
+                httpBackend.when('GET', '/directory/room/'+encodeURIComponent(ROOM_ALIAS)).respond(200, { room_id: ROOM_ID });
                 httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ID)+"/initialSync")
                     .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
                 return httpBackend.flush();

test/app-tests/loading.js

@@ -104,6 +104,23 @@ describe('loading:', function () {
             }
         }
 
+        // Parse the given window.location and return parameters that can be used when calling
+        // MatrixChat.showScreen(screen, params)
+        function getScreenFromLocation(location) {
+            const fragparts = parseQsFromFragment(location);
+            return {
+                screen: fragparts.location.substring(1),
+                params: fragparts.params,
+            }
+        }
+
+        function routeUrl(location, matrixChat) {
+            console.log(Date.now() + "Routing URL " + location);
+            const s = getScreenFromLocation(location);
+            console.log("Showing screen", s);
+            matrixChat.showScreen(s.screen, s.params);
+        }
+
         const MatrixChat = sdk.getComponent('structures.MatrixChat');
         const fragParts = parseQsFromFragment(windowLocation);
         var params = parseQs(windowLocation);
@@ -118,16 +135,10 @@ describe('loading:', function () {
                 startingFragmentQueryParams={fragParts.params}
                 enableGuest={true}
                 onLoadCompleted={loadCompleteDefer.resolve}
+                initialScreenAfterLogin={getScreenFromLocation(windowLocation)}
             />, parentDiv
         );
 
-        function routeUrl(location, matrixChat) {
-            console.log(Date.now() + " Routing URL "+location);
-            var fragparts = parseQsFromFragment(location);
-            matrixChat.showScreen(fragparts.location.substring(1),
-                                  fragparts.params);
-        }
-
         // pause for a cycle, then simulate the window.onload handler
         window.setTimeout(() => {
             console.log(Date.now() + " simulating window.onload");
@@ -188,15 +199,17 @@ describe('loading:', function () {
                 let login = ReactTestUtils.findRenderedComponentWithType(
                     matrixChat, sdk.getComponent('structures.login.Login'));
                 httpBackend.when('POST', '/login').check(function(req) {
+                    console.log(req);
                     expect(req.data.type).toEqual('m.login.password');
-                    expect(req.data.user).toEqual('user');
+                    expect(req.data.identifier.type).toEqual('m.id.user');
+                    expect(req.data.identifier.user).toEqual('user');
                     expect(req.data.password).toEqual('pass');
                 }).respond(200, {
                     user_id: '@user:id',
                     device_id: 'DEVICE_ID',
                     access_token: 'access_token',
                 });
-                login.onPasswordLogin("user", "pass")
+                login.onPasswordLogin("user", undefined, undefined, "pass")
                 return httpBackend.flush();
             }).then(() => {
                 // Wait for another trip around the event loop for the UI to update
@@ -474,7 +487,8 @@ function awaitRoomView(matrixChat, retryLimit, retryCount) {
         retryCount = 0;
     }
 
-    if (!matrixChat.state.ready) {
+    if (matrixChat.state.loading ||
+        !(matrixChat.state.loggedIn && matrixChat.state.ready)) {
         console.log(Date.now() + " Awaiting room view: not ready yet.");
         if (retryCount >= retryLimit) {
             throw new Error("MatrixChat still not ready after " +

webpack.config.js

@@ -1,11 +1,12 @@
-var path = require('path');
-var webpack = require('webpack');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     entry: {
         "bundle": "./src/vector/index.js",
+        "indexeddb-worker": "./src/vector/indexedbd-worker.js",
 
         // We ship olm.js as a separate lump of javascript. This makes it get
         // loaded via a separate <script/> tag in index.html (which loads it
@@ -18,11 +19,11 @@ module.exports = {
 
         // CSS themes
         "theme-light": "./src/skins/vector/css/themes/light.scss",
-        "theme-dark": "./src/skins/vector/css/themes/dark.scss"
+        "theme-dark": "./src/skins/vector/css/themes/dark.scss",
     },
     module: {
         preLoaders: [
-            { test: /\.js$/, loader: "source-map-loader" }
+            { test: /\.js$/, loader: "source-map-loader" },
         ],
         loaders: [
             { test: /\.json$/, loader: "json" },
@@ -37,9 +38,7 @@ module.exports = {
                 //    would also drag in the imgs and fonts that our CSS refers to
                 //    as webpack inputs.)
                 // 3. ExtractTextPlugin turns that string into a separate asset.
-                loader: ExtractTextPlugin.extract(
-                    "css-raw-loader!postcss-loader?config=postcss.config.js"
-                ),
+                loader: ExtractTextPlugin.extract("css-raw-loader!postcss-loader?config=postcss.config.js"),
             },
             {
                 // this works similarly to the scss case, without postcss.
@@ -48,15 +47,18 @@ module.exports = {
             },
         ],
         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$/,
+            /olm[\\\/](javascript[\\\/])?olm\.js$/,
         ],
     },
     output: {
@@ -82,7 +84,7 @@ module.exports = {
             // various levels of '.' and '..'
             // Also, sometimes the resource path is absolute.
             return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
-        }
+        },
     },
     resolve: {
         alias: {
@@ -105,16 +107,13 @@ module.exports = {
     plugins: [
         new webpack.DefinePlugin({
             'process.env': {
-                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-            }
+                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+            },
         }),
 
-        new ExtractTextPlugin(
-            "bundles/[hash]/[name].css",
-            {
-                allChunks: true
-            }
-        ),
+        new ExtractTextPlugin("bundles/[hash]/[name].css", {
+            allChunks: true,
+        }),
 
         new HtmlWebpackPlugin({
             template: './src/vector/index.html',