Merge branch 'develop' into release-v0.9.1

.gitignore

@@ -7,6 +7,7 @@
 /node_modules
 /packages/
 /webapp
+/.npmrc
 .DS_Store
 npm-debug.log
 electron/dist

README.md

@@ -119,25 +119,55 @@ You can configure the app by copying `config.sample.json` to
 Running as a Desktop app
 ========================
 
-In future we'll do an official distribution of Riot as an desktop app.  Meanwhile,
-there are a few options:
+Riot can also be run as a desktop app, wrapped in electron. You can download a
+pre-built version from https://riot.im/download/desktop/ or, if you prefer,
+built it yourself.
 
-@asdf:matrix.org points out that you can use nativefier and it just works(tm):
+To run as a desktop app:
+```
+npm install
+npm install electron
+node_modules/.bin/electron .
+```
 
+To build packages, use electron-builder. This is configured to output:
+ * dmg + zip for macOS
+ * exe + nupkg for Windows
+ * deb for Linux
+But this can be customised by editing the `build` section of package.json
+as per https://github.com/electron-userland/electron-builder/wiki/Options
+
+See https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build
+for dependencies required for building packages for various platforms.
+
+The only platform that can build packages for all three platforms is macOS:
+```
+brew install wine --without-x11
+brew install mono
+npm install
+npm run build:electron
+```
+
+For other packages, use electron-builder manually. For example, to build a package
+for 64 bit Linux:
+```
+npm install
+npm run build
+node_modules/.bin/build -l --x64
+```
+
+All electron packages go into `electron/dist/`
+
+Many thanks to @aviraldg for the initial work on the electron integration.
+
+Other options for running as a desktop app:
+ * https://github.com/krisak/vector-electron-desktop
+ * @asdf:matrix.org points out that you can use nativefier and it just works(tm)
    ```
    sudo npm install nativefier -g
    nativefier https://riot.im/app/
    ```
 
-krisa has a dedicated electron project at
-https://github.com/krisak/vector-electron-desktop (although you should swap out
-the 'vector' folder for the latest vector tarball you want to run.  Get a
-tarball from https://github.com/vector-im/vector-web/releases or build your own
-- see Building From Source above).
-
-There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop
-
-
 Development
 ===========
 

package.json

@@ -128,7 +128,7 @@
   "build": {
     "appId": "im.riot.app",
     "category": "Network",
-    "electronVersion": "1.4.8",
+    "electronVersion": "1.4.11",
     "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675",
     "asar": false,
     "dereference": true,

release_config.yaml

@@ -0,0 +1 @@
+signing_id: packages@riot.im

scripts/electron-package.sh

@@ -72,6 +72,10 @@ echo "Building $version using Update base URL $update_base_url"
 projdir=`pwd`
 builddir=`mktemp -d 2>/dev/null || mktemp -d -t 'buildtmp'`
 pushd "$builddir"
+
+# Figure out what version we're building
+vername=`jq -r .version package.json`
+
 git clone "$projdir" .
 git checkout "$version"
 
@@ -105,7 +109,7 @@ cp $distdir/win/*.exe "$pubdir/install/win32/x64/"
 # Packages for auto-update
 mkdir -p "$pubdir/update/macos"
 cp $distdir/mac/*.zip "$pubdir/update/macos/"
-echo "$ver" > "$pubdir/update/macos/latest"
+echo "$vername" > "$pubdir/update/macos/latest"
 
 mkdir -p "$pubdir/update/win32/ia32/"
 cp $distdir/win-ia32/*.nupkg "$pubdir/update/win32/ia32/"

scripts/make-icons.sh

@@ -0,0 +1,93 @@
+#!/bin/bash
+
+if [ $# != 1 ]
+then
+    echo "Usage: $0 <svg file>"
+    exit
+fi
+
+set -e
+set -x
+
+tmpdir=`mktemp -d 2>/dev/null || mktemp -d -t 'icontmp'`
+
+for i in 1024 512 310 256 192 180 152 150 144 128 120 114 96 76 72 70 64 60 57 48 36 32 24 16
+do
+    #convert -background none -density 1000 -resize $i -extent $i -gravity center "$1" "$tmpdir/$i.png"
+
+    # Above is the imagemagick command to render an svg to png. Unfortunately, its support for SVGs
+    # with CSS isn't very good (with rsvg and even moreso the built in renderer) so we use cairosvg.
+    # This can be installed with:
+    #    pip install cairosvg==1.0.22 # Version 2 doesn't support python 2
+    #    pip install tinycss
+    #    pip install cssselect # These are necessary for CSS support
+    # You'll also need xmlstarlet from your favourite package manager
+    #
+    # Cairosvg doesn't suport rendering at a specific size (https://github.com/Kozea/CairoSVG/issues/83#issuecomment-215720176)
+    # so we have to 'resize the svg' first (add width and height attributes to the svg element) to make it render at the
+    # size we need.
+    # XXX: This will break if the svg already has width and height attributes
+    cp "$1" "$tmpdir/tmp.svg"
+    xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v $i "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg"
+    xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v $i "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg"
+    cairosvg -f png -o "$tmpdir/$i.png"  "$tmpdir/tmp3.svg"
+    rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg"
+done
+
+# one more for the non-square mstile
+cp "$1" "$tmpdir/tmp.svg"
+xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v 310 "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg"
+xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v 150 "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg"
+cairosvg -f png -o "$tmpdir/310x150.png"  "$tmpdir/tmp3.svg"
+rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg"
+
+mkdir "$tmpdir/Riot.iconset"
+cp "$tmpdir/16.png" "$tmpdir/Riot.iconset/icon_16x16.png"
+cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_16x16@2x.png"
+cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_32x32.png"
+cp "$tmpdir/64.png" "$tmpdir/Riot.iconset/icon_32x32@2x.png"
+cp "$tmpdir/128.png" "$tmpdir/Riot.iconset/icon_128x128.png"
+cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_128x128@2x.png"
+cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_256x256.png"
+cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_256x256@2x.png"
+cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_512x512.png"
+cp "$tmpdir/1024.png" "$tmpdir/Riot.iconset/icon_512x512@2x.png"
+iconutil -c icns -o electron/build/icon.icns "$tmpdir/Riot.iconset"
+
+cp "$tmpdir/36.png" "res/vector-icons/android-chrome-36x36.png"
+cp "$tmpdir/48.png" "res/vector-icons/android-chrome-48x48.png"
+cp "$tmpdir/72.png" "res/vector-icons/android-chrome-72x72.png"
+cp "$tmpdir/96.png" "res/vector-icons/android-chrome-96x96.png"
+cp "$tmpdir/144.png" "res/vector-icons/android-chrome-144x144.png"
+cp "$tmpdir/192.png" "res/vector-icons/android-chrome-192x192.png"
+cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon.png"
+cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-precomposed.png"
+cp "$tmpdir/57.png" "res/vector-icons/apple-touch-icon-57x57.png"
+cp "$tmpdir/60.png" "res/vector-icons/apple-touch-icon-60x60.png"
+cp "$tmpdir/72.png" "res/vector-icons/apple-touch-icon-72x72.png"
+cp "$tmpdir/76.png" "res/vector-icons/apple-touch-icon-76x76.png"
+cp "$tmpdir/114.png" "res/vector-icons/apple-touch-icon-114x114.png"
+cp "$tmpdir/120.png" "res/vector-icons/apple-touch-icon-120x120.png"
+cp "$tmpdir/144.png" "res/vector-icons/apple-touch-icon-144x144.png"
+cp "$tmpdir/152.png" "res/vector-icons/apple-touch-icon-152x152.png"
+cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-180x180.png"
+cp "$tmpdir/16.png" "res/vector-icons/favicon-16x16.png"
+cp "$tmpdir/32.png" "res/vector-icons/favicon-32x32.png"
+cp "$tmpdir/96.png" "res/vector-icons/favicon-96x96.png"
+cp "$tmpdir/70.png" "res/vector-icons/mstile-70x70.png"
+cp "$tmpdir/144.png" "res/vector-icons/mstile-144x144.png"
+cp "$tmpdir/150.png" "res/vector-icons/mstile-150x150.png"
+cp "$tmpdir/310.png" "res/vector-icons/mstile-310x310.png"
+cp "$tmpdir/310x150.png" "res/vector-icons/mstile-310x150.png"
+
+convert "$tmpdir/16.png" "$tmpdir/32.png" "$tmpdir/64.png" "$tmpdir/128.png"  "res/vector-icons/favicon.ico"
+
+cp "res/vector-icons/favicon.ico" "electron/build/icon.ico"
+
+# https://github.com/electron-userland/electron-builder/blob/3f97b86993d4ea5172e562b182230a194de0f621/src/targets/LinuxTargetHelper.ts#L127
+for i in 24 96 16 48 64 128 256 512
+do
+    cp "$tmpdir/$i.png" "electron/build/icons/${i}x${i}.png"
+done
+
+rm -r "$tmpdir"

test/app-tests/loading.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 /* loading.js: test the myriad paths we have for loading the application */
 
+import 'skin-sdk';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-addons-test-utils';
@@ -152,6 +154,9 @@ describe('loading:', function () {
                 }).respond(403, "Guest access is disabled");
 
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // we expect a single <Login> component
                 ReactTestUtils.findRenderedComponentWithType(
@@ -175,6 +180,9 @@ describe('loading:', function () {
                 }).respond(403, "Guest access is disabled");
 
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // we expect a single <Login> component
                 let login = ReactTestUtils.findRenderedComponentWithType(
@@ -189,6 +197,9 @@ describe('loading:', function () {
                 });
                 login.onPasswordLogin("user", "pass")
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // we expect a spinner
                 ReactTestUtils.findRenderedComponentWithType(
@@ -198,6 +209,9 @@ describe('loading:', function () {
                 httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // once the sync completes, we should have a room view
                 httpBackend.verifyNoOutstandingExpectation();
@@ -285,6 +299,9 @@ describe('loading:', function () {
                 });
 
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // now we should have a spinner with a logout link
                 assertAtSyncingSpinner(matrixChat);
@@ -320,6 +337,9 @@ describe('loading:', function () {
                 });
 
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // now we should have a spinner with a logout link
                 assertAtSyncingSpinner(matrixChat);
@@ -356,12 +376,18 @@ describe('loading:', function () {
                 });
 
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // now we should have a spinner with a logout link
                 assertAtSyncingSpinner(matrixChat);
 
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
+            }).then(() => {
+                // Wait for another trip around the event loop for the UI to update
+                return q.delay(1);
             }).then(() => {
                 // once the sync completes, we should have a room view
                 httpBackend.verifyNoOutstandingExpectation();