Merge pull request #8321 from vector-im/experimental

Merge redesign into develop

README.md

@@ -157,8 +157,6 @@ For a good example, see https://riot.im/develop/config.json
     1. `whitelistedHSUrls`: a list of HS URLs to not redact from the analytics
     1. `whitelistedISUrls`: a list of IS URLs to not redact from the analytics
     1. `siteId`: The Piwik Site ID to use when sending analytics to the Piwik server configured above
-1. `teamServerConfig`, `teamTokenMap`, `referralBaseUrl`: an obsolete precursor to communities
-   with referral tracking; please ignore it.
 1. `welcomeUserId`: the user ID of a bot to invite whenever users register that can give them a tour
 
 

electron_app/src/webcontents-handler.js

@@ -1,10 +1,12 @@
 const {clipboard, nativeImage, Menu, MenuItem, shell} = require('electron');
 const url = require('url');
 
+const MAILTO_PREFIX = "mailto:";
+
 const PERMITTED_URL_SCHEMES = [
     'http:',
     'https:',
-    'mailto:',
+    MAILTO_PREFIX,
 ];
 
 function safeOpenURL(target) {
@@ -47,7 +49,7 @@ function onLinkContextMenu(ev, params) {
 
     if (params.mediaType && params.mediaType === 'image' && !url.startsWith('file://')) {
         popupMenu.append(new MenuItem({
-            label: 'Copy Image',
+            label: 'Copy image',
             click() {
                 if (url.startsWith('data:')) {
                     clipboard.writeImage(nativeImage.createFromDataURL(url));
@@ -58,15 +60,25 @@ function onLinkContextMenu(ev, params) {
         }));
     }
 
-    // No point offerring to copy a blob: URL either
+    // No point offering to copy a blob: URL either
     if (!url.startsWith('blob:')) {
+        // Special-case e-mail URLs to strip the `mailto:` like modern browsers do
+        if (url.startsWith(MAILTO_PREFIX)) {
             popupMenu.append(new MenuItem({
-            label: 'Copy Link Address',
+                label: 'Copy email address',
+                click() {
+                    clipboard.writeText(url.substr(MAILTO_PREFIX.length));
+                },
+            }));
+        } else {
+            popupMenu.append(new MenuItem({
+                label: 'Copy link address',
                 click() {
                     clipboard.writeText(url);
                 },
             }));
         }
+    }
     // popup() requires an options object even for no options
     popupMenu.popup({});
     ev.preventDefault();
@@ -117,6 +129,18 @@ function onEditableContextMenu(ev, params) {
 
 module.exports = (webContents) => {
     webContents.on('new-window', onWindowOrNavigate);
+    // XXX: The below now does absolutely nothing because of
+    // https://github.com/electron/electron/issues/8841
+    // Whilst this isn't a security issue since without
+    // node integration and with the sandbox, it should be
+    // no worse than opening the site in Chrome, it obviously
+    // means the user has to restart Riot to make it usable
+    // again (often unintuitive because it minimises to the
+    // system tray). We therefore need to be vigilant about
+    // putting target="_blank" on links in Riot (although
+    // we should generally be doing this anyway since links
+    // navigating you away from Riot in the browser is
+    // also annoying).
     webContents.on('will-navigate', onWindowOrNavigate);
 
     webContents.on('context-menu', function(ev, params) {

package.json

@@ -33,8 +33,8 @@
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:compile": "npm run reskindex && babel --source-maps -d lib src",
-    "build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
+    "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
-    "build:bundle:dev": "webpack-cli --progress --bail --mode development",
+    "build:bundle:dev": "webpack --progress --bail --mode development",
     "build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
     "build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build",
     "build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
@@ -100,7 +100,8 @@
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
     "cross-env": "^4.0.0",
-    "electron-builder": "^20.29.0",
+    "css-loader": "^2.1.0",
+    "electron-builder": "^20.38.5",
     "electron-builder-squirrel-windows": "^11.6.1",
     "electron-devtools-installer": "^2.2.4",
     "emojione": "^2.2.7",
@@ -110,6 +111,7 @@
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-react": "^7.11.1",
     "expect": "^1.16.0",
+    "file-loader": "^3.0.1",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.3",
@@ -136,7 +138,6 @@
     "postcss-scss": "^1.0.6",
     "postcss-simple-vars": "^4.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
-    "raw-loader": "^0.5.1",
     "react-addons-perf": "^15.4.0",
     "react-addons-test-utils": "^15.6.0",
     "rimraf": "^2.4.3",
@@ -146,7 +147,7 @@
     "webpack-dev-server": "^3.1.10"
   },
   "optionalDependencies": {
-    "olm": "https://matrix.org/packages/npm/olm/olm-3.0.0.tgz"
+    "olm": "https://matrix.org/packages/npm/olm/olm-3.1.0-pre1.tgz"
   },
   "build": {
     "appId": "im.riot.app",

res/home.html

@@ -130,7 +130,7 @@
             <div>
                 <h3>_t("Search the room directory")</h3>
                 <a class="mx_HomePage_room" href="#/directory">
-                    <img class="mx_HomePage_icon" src="img/icons-directory.svg">
+                    <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
                 </a>
                 <span class="mx_HomePage_comment">
                     _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")

res/home/images/icons-directory.svg

@@ -0,0 +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: 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="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>

res/themes/status/css/_StatusLogin.scss

@@ -88,7 +88,7 @@ limitations under the License.
 
     // overrides of .mx_Login
 
-    .mx_Login_box {
+    .mx_AuthPage_modal {
         width: 330px;
         min-height: initial;
         padding-top: 40px;
@@ -100,13 +100,13 @@ limitations under the License.
         font-size: 16px;
         line-height: 25px;
         background-color: $form-bg-color;
-        background-image: url(../../themes/status/img/dot.svg);
+        background-image: url("$(status)/img/dot.svg");
         box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
         position: relative;
         text-align: center;
     }
 
-    .mx_Login_logo {
+    .mx_AuthHeader_logo {
         background-color: #fff;
         width: 74px;
         height: 74px;
@@ -118,13 +118,13 @@ limitations under the License.
         margin-left: -36px;
     }
 
-    .mx_Login_logo img {
+    .mx_AuthHeader_logo img {
         width: 36px;
         height: 36px;
         padding: 19px;
     }
 
-    .mx_Login_box h2 {
+    .mx_AuthPage_modal h2 {
         text-align: center;
         color: $form-fg-color;
         font-size: 25px;

res/themes/status/css/_fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family:PostGrotesk-Medium;
+  src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
+  src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family:PostGrotesk-Book;
+  src:url('https://status.im/fonts/PostGrotesk-Book.eot');
+  src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
+  font-weight: 400;
+  font-style: normal;
+}

res/themes/status/css/_paths.scss

@@ -0,0 +1,5 @@
+// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
+$res: ../../../../node_modules/matrix-react-sdk/res;
+
+// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
+$status: ..;

res/themes/status/css/_status.scss

@@ -1,19 +1,3 @@
-@font-face {
-    font-family:PostGrotesk-Medium;
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family:PostGrotesk-Book;
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
 // We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
 // N.B. that the status.im website uses:
 // font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
@@ -68,6 +52,7 @@ $focus-bg-color: #dddddd;
 // button UI (white-on-green in light skin)
 $accent-fg-color: #ffffff;
 $accent-color: #6CC1F6;
+$accent-color-alt: $accent-color;
 $accent-color-50pct: #6CC1F67F;
 $accent-hover-color: #84cfff;
 
@@ -118,7 +103,11 @@ $primary-hairline-color: #e5e5e5;
 
 // used for the border of input text fields
 $input-border-color: #c9cfd4;
+$input-darker-bg-color: #c1c9d6;
+$input-darker-fg-color: #9fa9ba;
 
+$button-bg-color: #7ac9a1;
+$button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
@@ -129,6 +118,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9);
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
+$menu-selected-color: #f5f8fa;
 
 $avatar-initial-color: #ffffff;
 $avatar-bg-color: transparent;
@@ -163,6 +153,15 @@ $roomtile-name-color: #ffffff;
 $roomtile-selected-bg-color: #465561;
 $roomtile-focused-bg-color: #6d8597;
 
+$username-variant1-color: #1e7ddc;
+$username-variant2-color: #a756a8;
+$username-variant3-color: #7ac9a1;
+$username-variant4-color: #f2809d;
+$username-variant5-color: #ffc666;
+$username-variant6-color: #76ddd7;
+$username-variant7-color: #45529b;
+$username-variant8-color: #bfd251;
+
 $roomsublist-background: rgba(0, 0, 0, 0.2);
 $roomsublist-label-fg-color: #ffffff;
 $roomsublist-label-bg-color: $secondary-accent-color;
@@ -188,8 +187,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/status/css/status.scss

@@ -1,3 +1,5 @@
+@import "_paths.scss";
+@import "_fonts.scss";
 @import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
 @import "_status.scss";
 @import "../../../../node_modules/matrix-react-sdk/res/css/_components.scss";

scripts/copy-res.js

@@ -53,15 +53,11 @@ const COPY_LIST = [
     ["res/home.html", "webapp"],
     ["res/home-status.html", "webapp"],
     ["res/home/**", "webapp/home"],
-    ["res/vector-icons/**", "webapp/vector-icons"],
-    ["node_modules/matrix-react-sdk/res/{fonts,img,themes,media}/**", "webapp"],
     ["res/themes/**", "webapp/themes"],
+    ["res/vector-icons/**", "webapp/vector-icons"],
+    ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
     ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
-    // XXX: This is tied quite heavily to the matching olm.js so it really should be
-    // in the bundle dir with the js to avoid caching issues giving us wasm that
-    // doesn't match our js, but I cannot find any way to get webpack to do this.
-    ["node_modules/olm/olm.wasm", "webapp", { directwatch: 1 }],
     ["node_modules/olm/olm_legacy.js", "webapp", { directwatch: 1 }],
     ["./config.json", "webapp", { directwatch: 1 }],
 ];

scripts/fetch-develop.deps.sh

@@ -9,45 +9,49 @@
 set -e
 
 GIT_CLONE_ARGS=("$@")
-
+[ -z "$defbranch" ] && defbranch="develop"
-# Look in the many different CI env vars for which branch we're
-# building
-if [[ "$TRAVIS" == true ]]; then
-    curbranch="${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH}"
-else
-    # ghprbSourceBranch for jenkins github pull request builder
-    # GIT_BRANCH for other jenkins builds
-    curbranch="${ghprbSourceBranch:-$GIT_BRANCH}"
-    # Otherwise look at the actual branch we're on
-    if [ -z "$curbranch" ]
-    then
-        curbranch=`git rev-parse --abbrev-ref HEAD`
-    fi
-fi
-
-# Chop 'origin' off the start as jenkins ends up using
-# branches on the origin, but this doesn't work if we
-# specify the branch when cloning.
-curbranch=${curbranch#origin/}
-
-echo "Determined branch to be $curbranch"
 
 # clone a specific branch of a github repo
 function clone() {
     org=$1
     repo=$2
     branch=$3
+
+    # Chop 'origin' off the start as jenkins ends up using
+    # branches on the origin, but this doesn't work if we
+    # specify the branch when cloning.
+    branch=${branch#origin/}
+
+    if [ -n "$branch" ]
+    then
+        echo "Trying to use $org/$repo#$branch"
         git clone https://github.com/$org/$repo.git $repo --branch $branch \
             "${GIT_CLONE_ARGS[@]}"
+        return $?
+    fi
+    return 1
 }
 
 function dodep() {
     org=$1
     repo=$2
     rm -rf $repo
-    clone $org $repo $curbranch || {
+
-        [ "$curbranch" != 'develop' ] && clone $org $repo develop
+    # Try the PR author's branch in case it exists on the deps as well.
-    } || return $?
+    # Try the target branch of the push or PR.
+    # Use the default branch as the last resort.
+    if [[ "$TRAVIS" == true ]]; then
+        clone $org $repo $TRAVIS_PULL_REQUEST_BRANCH ||
+        clone $org $repo $TRAVIS_BRANCH ||
+        clone $org $repo $defbranch ||
+        return $?
+    else
+        clone $org $repo $ghprbSourceBranch ||
+        clone $org $repo $GIT_BRANCH ||
+        clone $org $repo `git rev-parse --abbrev-ref HEAD` ||
+        clone $org $repo $defbranch ||
+        return $?
+    fi
 
     echo "$repo set to branch "`git -C "$repo" rev-parse --abbrev-ref HEAD`
 

src/components/views/auth/VectorAuthFooter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,9 +22,9 @@ import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore';
 
 module.exports = React.createClass({
-    displayName: 'VectorLoginFooter',
+    displayName: 'VectorAuthFooter',
     statics: {
-        replaces: 'LoginFooter',
+        replaces: 'AuthFooter',
     },
 
     render: function() {
@@ -32,11 +33,11 @@ module.exports = React.createClass({
         if (SettingsStore.getValue("theme") === 'status') return <div />;
 
         return (
-            <div className="mx_Login_links">
+            <div className="mx_AuthFooter">
-                <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://medium.com/@RiotChat" target="_blank" rel="noopener">blog</a>
-                <a href="https://twitter.com/@RiotChat">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://twitter.com/@RiotChat" target="_blank" rel="noopener">twitter</a>
-                <a href="https://github.com/vector-im/riot-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://github.com/vector-im/riot-web" target="_blank" rel="noopener">github</a>
-                <a href="https://matrix.org">{ _t('powered by Matrix') }</a>
+                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t('powered by Matrix') }</a>
             </div>
         );
     },

src/components/views/auth/VectorAuthHeaderLogo.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,9 +24,9 @@ const i = [1, 2, 3, 4, 5][Math.floor(Math.random() * 5)];
 const DEFAULT_LOGO_URI = "themes/riot/img/logos/riot-im-logo-" + i + ".svg";
 
 module.exports = React.createClass({
-    displayName: 'VectorLoginHeader',
+    displayName: 'VectorAuthHeaderLogo',
     statics: {
-        replaces: 'LoginHeader',
+        replaces: 'AuthHeaderLogo',
     },
     propTypes: {
         icon: PropTypes.string,
@@ -33,11 +34,9 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_Login_header">
+            <div className="mx_AuthHeaderLogo">
-                <div className="mx_Login_logo">
                 <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot" />
             </div>
-            </div>
         );
     },
 });

src/components/views/auth/VectorCustomServerDialog.js

@@ -16,9 +16,12 @@ limitations under the License.
 */
 
 const React = require("react");
-const sanitizeHtml = require("sanitize-html");
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
+/**
+ * This is identical to `CustomServerDialog` except for replacing "this app"
+ * with "Riot".
+ */
 module.exports = React.createClass({
     displayName: 'VectorCustomServerDialog',
     statics: {
@@ -32,13 +35,17 @@ module.exports = React.createClass({
                     { _t('Custom Server Options') }
                 </div>
                 <div className="mx_Dialog_content">
-                    <span dangerouslySetInnerHTML={{__html: sanitizeHtml(_t(
+                    <p>{_t(
-                        "You can use the custom server options to sign into other Matrix "+
+                        "You can use the custom server options to sign into other " +
-                        "servers by specifying a different Home server URL.<br/>This allows "+
+                        "Matrix servers by specifying a different homeserver URL. This " +
-                        "you to use Riot with an existing Matrix account on a different home "+
+                        "allows you to use Riot with an existing Matrix account on a " +
-                        "server.<br/><br/>You can also set a custom identity server but you won't "+
+                        "different homeserver.",
-                        "be able to invite users by email address, or be invited by email address yourself.",
+                    )}</p>
-                    ))}} />
+                    <p>{_t(
+                        "You can also set a custom identity server, but you won't be " +
+                        "able to invite users by email address, or be invited by email " +
+                        "address yourself.",
+                    )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.props.onFinished} autoFocus={true}>

src/i18n/strings/en_EN.json

@@ -1,13 +1,13 @@
 {
-    "Riot is not supported on mobile web. Install the app?": "Riot is not supported on mobile web. Install the app?",
     "Riot Desktop on %(platformName)s": "Riot Desktop on %(platformName)s",
     "Unknown device": "Unknown device",
     "%(appName)s via %(browserName)s on %(osName)s": "%(appName)s via %(browserName)s on %(osName)s",
     "You need to be using HTTPS to place a screen-sharing call.": "You need to be using HTTPS to place a screen-sharing call.",
-    "Custom Server Options": "Custom Server Options",
-    "You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.<br/>This allows you to use Riot with an existing Matrix account on a different home server.<br/><br/>You can also set a custom identity server but you won't be able to invite users by email address, or be invited by email address yourself.": "You can use the custom server options to sign into other Matrix servers by specifying a different Home server URL.<br/>This allows you to use Riot with an existing Matrix account on a different home server.<br/><br/>You can also set a custom identity server but you won't be able to invite users by email address, or be invited by email address yourself.",
-    "Dismiss": "Dismiss",
     "powered by Matrix": "powered by Matrix",
+    "Custom Server Options": "Custom Server Options",
+    "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.",
+    "You can also set a custom identity server, but you won't be able to invite users by email address, or be invited by email address yourself.": "You can also set a custom identity server, but you won't be able to invite users by email address, or be invited by email address yourself.",
+    "Dismiss": "Dismiss",
     "Welcome to Riot.im": "Welcome to Riot.im",
     "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralised, encrypted chat &amp; collaboration powered by [matrix]",
     "Search the room directory": "Search the room directory",

src/vector/index.html

@@ -34,13 +34,13 @@
     } %>
   </head>
   <body style="height: 100%;">
-    <section id="matrixchat" style="height: 100%;"></section>
+    <section id="matrixchat" style="height: 100%; overflow: auto;"></section>
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <script>
         window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
     </script>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <audio id="messageAudio">
         <source src="media/message.ogg" type="audio/ogg" />
         <source src="media/message.mp3" type="audio/mpeg" />

src/vector/index.js

@@ -24,6 +24,8 @@ require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 require('draft-js/dist/Draft.css');
 
+import olmWasmPath from 'olm/olm.wasm';
+
 import './rageshakesetup';
 
 import React from 'react';
@@ -140,7 +142,7 @@ function onNewScreen(screen) {
 // so in that instance, hardcode to use riot.im/app for now instead.
 function makeRegistrationUrl(params) {
     let url;
-    if (window.location.protocol === "file:") {
+    if (window.location.protocol === "vector:") {
         url = 'https://riot.im/app/#/register';
     } else {
         url = (
@@ -279,7 +281,7 @@ async function loadApp() {
 
     // as quickly as we possibly can, set a default theme...
     let a;
-    const theme = SettingsStore.getValue("theme");
+    const theme = "dharma";//SettingsStore.getValue("theme");
     for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
         const href = a.getAttribute("href");
         if (!href) continue;
@@ -379,18 +381,19 @@ function loadOlm() {
      *
      * We also need to tell the Olm js to look for its wasm file at the same
      * level as index.html. It really should be in the same place as the js,
-     * ie. in the bundle directory, to avoid caching issues, but as far as I
+     * ie. in the bundle directory, but as far as I can tell this is
-     * can tell this is completely impossible with webpack.
+     * completely impossible with webpack. We do, however, use a hashed
+     * filename to avoid caching issues.
      */
     return Olm.init({
-        locateFile: () => 'olm.wasm',
+        locateFile: () => olmWasmPath,
     }).then(() => {
         console.log("Using WebAssembly Olm");
     }).catch((e) => {
         console.log("Failed to load Olm: trying legacy version");
         return new Promise((resolve, reject) => {
             const s = document.createElement('script');
-            s.src = 'olm_legacy.js';
+            s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
             s.onload = resolve;
             s.onerror = reject;
             document.body.appendChild(s);

src/vector/platform/ElectronPlatform.js

@@ -28,17 +28,17 @@ const ipcRenderer = window.ipcRenderer;
 
 function platformFriendlyName(): string {
     // used to use window.process but the same info is available here
-    if (navigator.userAgent.indexOf('Macintosh')) {
+    if (navigator.userAgent.includes('Macintosh')) {
         return 'macOS';
-    } else if (navigator.userAgent.indexOf('FreeBSD')) {
+    } else if (navigator.userAgent.includes('FreeBSD')) {
         return 'FreeBSD';
-    } else if (navigator.userAgent.indexOf('OpenBSD')) {
+    } else if (navigator.userAgent.includes('OpenBSD')) {
         return 'OpenBSD';
-    } else if (navigator.userAgent.indexOf('SunOS')) {
+    } else if (navigator.userAgent.includes('SunOS')) {
         return 'SunOS';
-    } else if (navigator.userAgent.indexOf('Windows')) {
+    } else if (navigator.userAgent.includes('Windows')) {
         return 'Windows';
-    } else if (navigator.userAgent.indexOf('Linux')) {
+    } else if (navigator.userAgent.includes('Linux')) {
         return 'Linux';
     } else {
         return 'Unknown';
@@ -136,7 +136,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         // 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 (navigator.userAgent.indexOf('Linux')) {
+        if (navigator.userAgent.includes('Linux')) {
             msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
         }
 

test/app-tests/joining.js

@@ -71,7 +71,13 @@ describe('joining a room', function() {
             }
         });
 
-        it('should not get stuck at a spinner', function() {
+        // TODO: Re-enable test
+        // The test is currently disabled because the room directory now resides in a dialog,
+        // which is not accessible from the MatrixChat component anymore. Convincing react that
+        // the dialog does exist and is under a different tree is incredibly difficult though,
+        // so for now the test has been disabled. We should revisit this test when someone has
+        // the time to kill to figure this out. Problem area is highlighted within the test.
+        xit('should not get stuck at a spinner', function() {
             const ROOM_ALIAS = '#alias:localhost';
             const ROOM_ID = '!id:localhost';
 
@@ -118,8 +124,19 @@ describe('joining a room', function() {
             }).then(() => {
                 console.log(`${Date.now()} App made requests for directory view; switching to a room.`);
 
+                // TODO: Make this look in the right spot for the directory dialog.
+                // See the comment block at the top of the test for a bit more information. The short
+                // story here is that the RoomDirectory does not exist under matrixChat anymore, or even
+                // the parentDiv we have access to. Asking React to find the RoomDirectory as a child of
+                // the document results in it complaining that you didn't give it a component tree to
+                // search in. When you do get a reference to the component tree based off the document
+                // root and ask it to search, it races and can't find the component in time. To top it
+                // all off, MatrixReactTestUtils can't find the element in time either even with a very
+                // high number of attempts. Assuming we can get a reference to the RoomDirectory in a
+                // dialog, the rest of the test should be fine.
                 const roomDir = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomDirectory);
+                    matrixChat, RoomDirectory,
+                );
 
                 // enter an alias in the input, and simulate enter
                 const input = ReactTestUtils.findRenderedDOMComponentWithTag(

test/app-tests/loading.js

@@ -254,7 +254,7 @@ describe('loading:', function() {
             return awaitLoginComponent(matrixChat).then(() => {
                 // we expect a single <Login> component
                 ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.login.Login'));
+                    matrixChat, sdk.getComponent('structures.auth.Login'));
 
                 // the only outstanding request should be a GET /login
                 // (in particular there should be no /register request for
@@ -343,40 +343,6 @@ describe('loading:', function() {
             }).done(done, done);
         });
 
-        it("logs in correctly with a Riot Team Server", function() {
-            sdk.setFetch(httpBackend.fetchFn); // XXX: ought to restore this!
-
-            httpBackend.when('GET', '/pushrules').respond(200, {});
-            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
-
-            loadApp({
-                config: {
-                    teamServerConfig: {
-                        teamServerURL: 'http://my_team_server',
-                    },
-                },
-            });
-
-            return Promise.delay(1).then(() => {
-                // we expect a loading spinner while we log into the RTS
-                assertAtLoadingSpinner(matrixChat);
-
-                httpBackend.when('GET', 'my_team_server/login').respond(200, {
-                    team_token: 'nom',
-                });
-                return httpBackend.flush();
-            }).then(() => {
-                return awaitSyncingSpinner(matrixChat);
-            }).then(() => {
-                // we got a sync spinner - let the sync complete
-                return expectAndAwaitSync();
-            }).then(() => {
-                // once the sync completes, we should have a home page
-                ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.HomePage'));
-            });
-        });
-
         describe('/#/login link:', function() {
             beforeEach(function() {
                 loadApp({
@@ -390,7 +356,7 @@ describe('loading:', function() {
             it('shows a login view', function() {
                 // we expect a single <Login> component
                 ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.login.Login'),
+                    matrixChat, sdk.getComponent('structures.auth.Login'),
                 );
 
                 // the only outstanding request should be a GET /login
@@ -554,7 +520,7 @@ describe('loading:', function() {
 
                 // we expect a single <Login> component
                 ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.login.Login'),
+                    matrixChat, sdk.getComponent('structures.auth.Login'),
                 );
             });
 
@@ -562,7 +528,7 @@ describe('loading:', function() {
             // ILAG renders this obsolete. I think.
             it('should allow us to return to the app', function() {
                 const login = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.login.Login')
+                    matrixChat, sdk.getComponent('structures.auth.Login')
                 );
 
                 const linkText = 'Return to app';
@@ -630,7 +596,7 @@ describe('loading:', function() {
     function completeLogin(matrixChat) {
         // we expect a single <Login> component
         const login = ReactTestUtils.findRenderedComponentWithType(
-            matrixChat, sdk.getComponent('structures.login.Login'));
+            matrixChat, sdk.getComponent('structures.auth.Login'));
 
         httpBackend.when('POST', '/login').check(function(req) {
             expect(req.data.type).toEqual('m.login.password');
@@ -743,6 +709,6 @@ function awaitRoomView(matrixChat, retryLimit, retryCount) {
 
 function awaitLoginComponent(matrixChat, attempts) {
     return MatrixReactTestUtils.waitForRenderedComponentWithType(
-        matrixChat, sdk.getComponent('structures.login.Login'), attempts,
+        matrixChat, sdk.getComponent('structures.auth.Login'), attempts,
     );
 }

webpack.config.js

@@ -16,34 +16,42 @@ module.exports = {
         "mobileguide": "./src/vector/mobile_guide/index.js",
 
         // CSS themes
-        "theme-light":  "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+        //"theme-light":  "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
-        "theme-dark":   "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
+        //"theme-dark":   "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
-        "theme-status": "./res/themes/status/css/status.scss",
+        "theme-dharma": "./node_modules/matrix-react-sdk/res/themes/dharma/css/dharma.scss",
+        //"theme-status": "./res/themes/status/css/status.scss",
     },
     module: {
         rules: [
             { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
             { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
+            {
+                test: /\.wasm$/,
+                loader: "file-loader",
+                type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
+                options: {
+                    name: '[name].[hash:7].[ext]',
+                    outputPath: '.',
+                },
+            },
             {
                 test: /\.scss$/,
                 // 1. postcss-loader turns the SCSS into normal CSS.
-                // 2. raw-loader turns the CSS into a javascript module
+                // 2. css-loader turns the CSS into a JS module whose default
-                //    whose default export is a string containing the CSS.
+                //    export is a string containing the CSS, while also adding
-                //    (raw-loader is similar to css-loader, but the latter
+                //    the images and fonts from CSS as Webpack inputs.
-                //    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.
                 use: ExtractTextPlugin.extract({
                     use: [
-                        "raw-loader",
+                        "css-loader",
                         {
                             loader: 'postcss-loader',
                             options: {
                                 config: {
-                                    path: './postcss.config.js'
+                                    path: './postcss.config.js',
-                                }
+                                },
-                            }
+                            },
-                        }
+                        },
                     ],
                 }),
             },
@@ -51,10 +59,40 @@ module.exports = {
                 // this works similarly to the scss case, without postcss.
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
-                    use: "raw-loader"
+                    use: "css-loader",
                 }),
             },
-
+            {
+                test: /\.(gif|png|svg|ttf)$/,
+                // Use a content-based hash in the name so that we can set a long cache
+                // lifetime for assets while still delivering changes quickly.
+                oneOf: [
+                    {
+                        // Images referenced in CSS files
+                        issuer: /\.(scss|css)$/,
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                            publicPath: function(url, resourcePath) {
+                                // CSS image usages end up in the `bundles/[hash]` output
+                                // directory, so we adjust the final path to navigate up
+                                // twice.
+                                const outputPath = getImgOutputPath(url, resourcePath);
+                                return toPublicPath(path.join("../..", outputPath));
+                            },
+                        },
+                    },
+                    {
+                        // Images referenced in HTML and JS files
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                        },
+                    },
+                ],
+            },
         ],
         noParse: [
             // for cross platform compatibility use [\\\/] as the path separator
@@ -74,14 +112,13 @@ module.exports = {
     output: {
         path: path.join(__dirname, "webapp"),
 
-        // the generated js (and CSS, from the ExtractTextPlugin) are put in a
+        // The generated JS (and CSS, from the ExtractTextPlugin) are put in a
         // unique subdirectory for the build. There will only be one such
         // 'bundle' directory in the generated tarball; however, hosting
         // servers can collect 'bundles' from multiple versions into one
         // directory and symlink it into place - this allows users who loaded
         // an older version of the application to continue to access webpack
         // chunks even after the app is redeployed.
-        //
         filename: "bundles/[hash]/[name].js",
         chunkFilename: "bundles/[hash]/[name].js",
         devtoolModuleFilenameTemplate: function(info) {
@@ -157,3 +194,27 @@ module.exports = {
         inline: false,
     },
 };
+
+/**
+ * Merge assets found via CSS and imports into a single tree, while also preserving
+ * directories under `res`.
+ *
+ * @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
+ * @param {string} resourcePath The absolute path to the source file with unmodified name.
+ * @return {string} The returned paths will look like `img/warning.1234567.svg`.
+ */
+function getImgOutputPath(url, resourcePath) {
+    const prefix = /^.*[/\\]res[/\\]/;
+    const outputDir = path.dirname(resourcePath).replace(prefix, "");
+    return path.join(outputDir, path.basename(url));
+}
+
+/**
+ * Convert path to public path format, which always uses forward slashes, since it will
+ * be placed directly into things like CSS files.
+ *
+ * @param {string} path Some path to a file.
+ */
+function toPublicPath(path) {
+    return path.replace(/\\/g, '/');
+}