Added pre-requisites for building native modules on linux and updated native-node-modules.md

README.md

@@ -5,6 +5,12 @@ Element Desktop is a Matrix client for desktop platforms with Element Web at its
 
 First Steps
 ===========
+Clone the repository using:
+
+```
+git clone https://github.com/vector-im/element-desktop.git
+```
+
 Before you do anything else, fetch the dependencies:
 
 ```
@@ -54,10 +60,8 @@ Building
 
 ## Native Build
 
-TODO: List native pre-requisites
-
 Optionally, [build the native modules](https://github.com/vector-im/element-desktop/blob/develop/docs/native-node-modules.md), 
-which include support for searching in encrypted rooms and secure storage. Skipping this step is fine, you just won't have those features.  
+which include support for searching in encrypted rooms and secure storage. Make sure that you install all the pre-requisites to [build the native modules](https://github.com/vector-im/element-desktop/blob/develop/docs/native-node-modules.md). Skipping this step is fine, you just won't have those features.  
 
 Then, run
 ```
@@ -84,19 +88,9 @@ yarn run docker:build
 
 After running, the packages should be in `dist/`.
 
-Starting
-========
-If you'd just like to run the electron app locally for development:
-```
-# Install electron - we don't normally need electron itself as it's provided
-# by electron-builder when building packages
-yarn add electron
-yarn start
-```
-
 Config
 ======
-If you'd like the packaged Element to have a configuration file, you can create a
+For the packaged Element to have a configuration file, you should create a
 config directory and place `config.json` in there, then specify this directory
 with the `--cfgdir` option to `yarn run fetch`, eg:
 ```
@@ -107,6 +101,16 @@ yarn run fetch --cfgdir myconfig
 The config dir for the official Element app is in `element.io`. If you use this,
 your app will auto-update itself using builds from element.io.
 
+Starting
+========
+If you'd just like to run the electron app locally for development:
+```
+# Install electron - we don't normally need electron itself as it's provided
+# by electron-builder when building packages
+yarn add electron
+yarn start
+```
+
 Profiles
 ========
 

docs/linux-requirements.md

@@ -0,0 +1,74 @@
+# Linux
+
+The native modules include support for features like searching in encrypted rooms and secure storage.
+Thus, skipping this step is fine, you just won't have those features in your build.
+
+**NOTE:** Instructions are for Debian-derived distros other distros should adapt them as appropriate.
+## Requirements to build native modules
+
+If you want to build native modules, make sure that the following tools are installed on your system.
+If they're not already installed on your system, you can run the following commands to install them:
+```
+sudo apt install pkg-config 
+sudo apt install pkgconf 
+sudo apt install libsecret-1-dev 
+```
+
+- [Node 14](https://nodejs.org)
+
+You can run the following commands to install Node 14:
+```
+curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
+sudo apt -y install nodejs
+```
+
+Verify the version of Node.js installed. (Latest version is preferred)
+```
+node -v
+```
+
+Install the Node dev tools and the yarn package manager using the following commands:
+```
+sudo apt -y install gcc g++ make
+curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install yarn
+```
+
+Verify the version of Yarn installed. (Must be v1)
+```
+yarn -v
+```
+
+- [Python 3](https://www.python.org/downloads/)
+
+You can run the following commands to install Python 3:
+```
+sudo apt-get install python3.6
+python3 --version
+```
+
+- [Perl](https://www.perl.org/get.html)
+
+You can run the following commands to install Perl:
+```
+sudo apt install perl
+apt list --installed | grep -i perl
+perl -v
+```
+
+- [Rust](https://rustup.rs/)
+
+Run the following in your terminal, then follow the on-screen instructions.
+```
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+- [SQLCipher](https://www.zetetic.net/sqlcipher/)
+
+You can run the following commands to install SQLCipher:
+```
+sudo apt install sqlcipher
+sudo apt install libsqlcipher-dev
+```
+

docs/native-node-modules.md

@@ -18,12 +18,13 @@ when releasing.
 Install the pre-requisites for your system:
 
 * [Windows pre-requisites](https://github.com/vector-im/element-desktop/blob/develop/docs/windows-requirements.md)
-* Linux: TODO
+* [Linux pre-requisites](https://github.com/vector-im/element-desktop/blob/develop/docs/linux-requirements.md)
 * OS X: TODO
 
 Then optionally, [add seshat and dependencies to support search in E2E rooms](#adding-seshat-for-search-in-e2e-encrypted-rooms).
 
-Then, to build for an architecture selected automatically based on your system (recommended), run:
+Then, to build for an architecture selected automatically based on your system 
+(recommended), run:
 ```
 yarn run build:native
 ```
@@ -36,14 +37,24 @@ Seshat is a native Node module that adds support for local event indexing and
 full text search in E2E encrypted rooms.
 
 Since Seshat is written in Rust, the Rust compiler and related tools need to be
-installed before installing Seshat itself. To install Rust please consult the
-official Rust [documentation](https://www.rust-lang.org/tools/install).
+installed before installing Seshat itself. If you're running macOS, Linux, or 
+another Unix-like OS, to download Rustup and install Rust, run the following in
+your terminal, then follow the on-screen instructions.
+```
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+Or you can consult the official Rust [documentation](https://www.rust-lang.org/tools/install).
 
 Seshat also depends on the SQLCipher library to store its data in encrypted form
-on disk. You'll need to install it via your OS package manager.
+on disk. You'll need to install it via your OS package manager,on Debian/Ubuntu run:
+```
+sudo apt install sqlcipher
+sudo apt install libsqlcipher-dev
+```
 
-After installing the Rust compiler and SQLCipher, Seshat support can be added
-using yarn at the root of this project:
+After installing the Rust compiler and SQLCipher along with libsqlcipher, Seshat 
+support can be added using yarn at the root of this project:
 
     yarn add matrix-seshat
 

package.json

@@ -61,7 +61,7 @@
     "app-builder-lib": "^22.14.10",
     "asar": "^2.0.1",
     "chokidar": "^3.5.2",
-    "electron": "^17",
+    "electron": "^18.0.1",
     "electron-builder": "22.11.4",
     "electron-builder-squirrel-windows": "22.11.4",
     "electron-devtools-installer": "^3.1.1",

src/electron-main.ts

@@ -29,6 +29,7 @@ import {
     protocol,
     dialog,
     desktopCapturer,
+    nativeTheme
 } from "electron";
 import AutoLaunch from "auto-launch";
 import path from "path";
@@ -45,6 +46,7 @@ import webContentsHandler from './webcontents-handler';
 import * as updater from './updater';
 import { getProfileFromDeeplink, protocolInit, recordSSOSession } from './protocol';
 import { _t, AppLocalization } from './language-helper';
+import bodyToHtml from '@matrix-react-sdk/src/HtmlUtils';
 
 const argv = minimist(process.argv, {
     alias: { help: "h" },
@@ -940,9 +942,11 @@ app.on('ready', async () => {
     });
 
     const preloadScript = path.normalize(`${__dirname}/preload.js`);
+    const html = bodyToHtml(IContent, null);
+
     mainWindow = global.mainWindow = new BrowserWindow({
         // https://www.electronjs.org/docs/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do
-        backgroundColor: '#fff',
+        backgroundColor: html.attribs['background-color'], //nativeTheme.shouldUseDarkColors ? '#15191e' : '#fff',
 
         icon: iconPath,
         show: false,
@@ -1061,4 +1065,4 @@ app.on('second-instance', (ev, commandLine, workingDirectory) => {
 // installer uses for the shortcut icon.
 // This makes notifications work on windows 8.1 (and is
 // a noop on other platforms).
-app.setAppUserModelId('com.squirrel.element-desktop.Element');
+app.setAppUserModelId('com.squirrel.element-desktop.Element');

yarn.lock

@@ -819,11 +819,16 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.16.tgz#e3733f46797b9df9e853ca9f719c8a6f7b84cd26"
   integrity sha512-ydLaGVfQOQ6hI1xK2A5nVh8bl0OGoIfYMxPWHqqYe9bTkWCfqiVvZoh2I/QF2sNSkZzZyROBoTefIEI+PB6iIA==
 
-"@types/node@^14.14.17", "@types/node@^14.6.2":
+"@types/node@^14.14.17":
   version "14.18.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.10.tgz#774f43868964f3cfe4ced1f5417fe15818a4eaea"
   integrity sha512-6iihJ/Pp5fsFJ/aEDGyvT4pHGmCpq7ToQ/yf4bl5SbVAvwpspYJ+v3jO7n8UyjhQVHTy+KNszOozDdv+O6sovQ==
 
+"@types/node@^16.11.26":
+  version "16.11.26"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.26.tgz#63d204d136c9916fb4dcd1b50f9740fe86884e47"
+  integrity sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==
+
 "@types/npm-package-arg@*":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@types/npm-package-arg/-/npm-package-arg-6.1.1.tgz#9e2d8adc04d39824a3d9f36f738010a3f7da3c1a"
@@ -2237,13 +2242,13 @@ electron-window-state@^5.0.3:
     jsonfile "^4.0.0"
     mkdirp "^0.5.1"
 
-electron@^17:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-17.0.0.tgz#60f00f3e3c657020e807a519700213943468b4d1"
-  integrity sha512-3UXcBQMwbMWdPvGHaSdPMluHrd+/bc+K143MyvE5zVZ+S1XCHt4sau7dj6svJHns5llN0YG/c6h/vRfadIp8Zg==
+electron@^18.0.1:
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-18.0.1.tgz#70653ecee008bea8a4240da78d0f5a426bb24d50"
+  integrity sha512-8y3nxmK+v/tiuaR8yd4K83ApHxgomMIPAEl3J+2Jfv/D5G6M3KnvxNlNiNoTXI8uOegfmoqiDm5/2xlWFLzfLQ==
   dependencies:
     "@electron/get" "^1.13.0"
-    "@types/node" "^14.6.2"
+    "@types/node" "^16.11.26"
     extract-zip "^1.0.3"
 
 emoji-regex@^8.0.0: