1berry/mullvadvpn-app
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update documentation references to gui-directory

Browse Source
This commit is contained in:
Oskar 2024-11-05 09:07:39 +01:00
parent d40ddb0ecc
commit cc831fd604
6 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
BuildInstructions.md
View File

@ -11,7 +11,7 @@ on your platform please submit an issue or a pull request.
- Get the latest **stable** Rust toolchain via [rustup.rs](https://rustup.rs/).
- You need Node.js and npm. You can find the exact versions in the `volta` section of
`gui/package.json`. The toolchain is managed by volta.
`desktop/package.json`. The toolchain is managed by volta.
- Linux & macOS
@ -186,17 +186,21 @@ To build the management interface proto files there is a script (execute it on a
ARM64 Linux):
```bash
cd gui/scripts
npm ci
./build-proto.sh
cd desktop
npm ci -w mullvad-vpn
npm run -w mullvad-vpn build-proto
```
After that copy the files from `gui/src/main/management_interface/` and
`gui/build/src/main/management_interface/` directories into a single directory, and set the value
of `MANAGEMENT_INTERFACE_PROTO_BUILD_DIR` to that directory while running the main build.
After that copy the files from the following directories into a single directory:
```
desktop/packages/mullvad-vpn/src/main/management_interface/
desktop/packages/mullvad-vpn/build/src/main/management_interface/
```
Set the value of `MANAGEMENT_INTERFACE_PROTO_BUILD_DIR` to that directory while running the main
build.
When all is done, run the main build. Assuming that you copied the proto files into `/tmp/management_interface_proto`
directory, the build command will look as follows:
When all is done, run the main build. Assuming that you copied the proto files into
`/tmp/management_interface_proto` directory, the build command will look as follows:
```bash
MANAGEMENT_INTERFACE_PROTO_BUILD_DIR=/tmp/management_interface_proto ./build.sh --dev-build
@ -246,28 +250,28 @@ This section is for building the system service individually.
Leave out `sudo` on Windows. The daemon must run as root since it modifies the firewall and sets
up virtual network interfaces etc.
# Building and running the GUI app
# Building and running the desktop app
This section is for building the GUI app individually.
This section is for building the desktop app individually.
1. Go to the `gui` directory
1. Go to the `desktop` directory
```bash
cd gui
cd desktop
```
1. Install all the JavaScript dependencies by running:
```bash
npm install
npm install -w mullvad-vpn
```
1. Start the GUI in development mode by running:
1. Start the Electron app in development mode by running:
```bash
npm run develop
npm run -w mullvad-vpn develop
```
If you change any javascript file while the development mode is running it will automatically
transpile and reload the file so that the changes are visible almost immediately.
Please note that the GUI needs a running daemon to connect to in order to work. See
Please note that the Electron app needs a running daemon to connect to in order to work. See
[Building and running mullvad-daemon](#building-and-running-mullvad-daemon) for instructions
on how to do that before starting the GUI.
on how to do that before starting the Electron app.

26
README.md
View File

@ -8,10 +8,10 @@ For more information about the service, please visit our website,
This repository contains all the source code for the
desktop and mobile versions of the app. For desktop this includes the system service/daemon
([`mullvad-daemon`](mullvad-daemon/)), a graphical user interface ([GUI](gui/)) and a
command line interface ([CLI](mullvad-cli/)). The Android app uses the same backing
system service for the tunnel and security but has a dedicated frontend in [android/](android/).
iOS consists of a completely standalone implementation that resides in [ios/](ios/).
([`mullvad-daemon`](mullvad-daemon/)), a graphical user interface ([GUI](desktop/)) and a command
line interface ([CLI](mullvad-cli/)). The Android app uses the same backing system service for the
tunnel and security but has a dedicated frontend in [android/](android/). iOS consists of a
completely standalone implementation that resides in [ios/](ios/).
## Releases
@ -234,15 +234,15 @@ launchctl unload -w /Library/LaunchDaemons/net.mullvad.daemon.plist
launchctl load -w /Library/LaunchDaemons/net.mullvad.daemon.plist
```
## Environment variables used by the GUI frontend
## Environment variables used by the desktop frontend
* `MULLVAD_PATH` - Allows changing the path to the folder with the `mullvad-problem-report` tool
when running in development mode. Defaults to: `<repo>/target/debug/`.
* `MULLVAD_DISABLE_UPDATE_NOTIFICATION` - If set to `1`, GUI notification will be disabled when
* `MULLVAD_DISABLE_UPDATE_NOTIFICATION` - If set to `1`, notification will be disabled when
an update is available.
## Command line tools for Electron GUI app development
## Command line tools for Electron app development
- `$ npm run develop` - develop app with live-reload enabled
- `$ npm run lint` - lint code
@ -266,8 +266,8 @@ If you're using GNOME, try installing one of these GNOME Shell extensions:
## Repository structure
### Electron GUI app and electron-builder packaging assets
- **gui/**
### Electron app and electron-builder packaging assets
- **desktop/packages/mullvad-vpn/**
- **assets/** - Graphical assets and stylesheets
- **src/**
- **main/**
@ -386,10 +386,10 @@ environment variable.
| Windows | `//./pipe/Mullvad VPN` |
| Android | [`getNoBackupFilesDir()`](https://developer.android.com/reference/android/content/ContextWrapper#getNoBackupFilesDir()) |
### GUI
### Desktop Electron app
The GUI has a specific settings file that is configured for each user. The path is set in the
`gui/packages/desktop/main/gui-settings.ts` file.
The desktop Electron app has a specific settings file that is configured for each user. The path is
set in the `desktop/packages/mullvad-vpn/src/main/gui-settings.ts` file.
| Platform | Path |
|----------|------|
@ -405,7 +405,7 @@ See [graphics README](graphics/README.md) for information about icons.
## Locales and translations
Instructions for how to handle locales and translations are found
[here](./gui/locales/README.md).
[here](./desktop/packages/mullvad-vpn/locales/README.md).
For instructions specific to the Android app, see [here](./android/README.md).

4
desktop/packages/mullvad-vpn/assets/images/menubar-icons/README.md
View File

@ -4,8 +4,8 @@ This directory contains the images for the menubar/traybar. The content consists
manually.
## Build script
The png/ico files are generated using the script `gui/scripts/build-menubar-icons.sh` which can be
run from the `gui`-directory using
The png/ico files are generated using the script `../../scripts/build-menubar-icons.sh` which can be
run from the `desktop/packages/mullvad-vpn`-directory using
```sh
./scripts/build-menubar-icons.sh
```

38
desktop/packages/mullvad-vpn/locales/README.md
View File

@ -2,38 +2,38 @@ This is a folder with gettext translations for Mullvad VPN app.
## Adding new translations
1. Create a new sub-folder under `gui/locales`, use the locale identifier for the folder name.
1. Create a new sub-folder under `../locales`, use the locale identifier for the folder name.
The complete list of supported locale identifiers can be found at:
https://electronjs.org/docs/api/locales
1. Add a new language on Crowdin under Settings -> Translations -> Target languages menu.
1. Add a new language on Crowdin under Settings -> Translations -> Target languages menu.
By default the file structure is configured to produce folders with translations using two-letter
language code (defined under Settings -> Files -> <FILE> -> ... [ellipsis] -> Settings).
If you wish to add a dialect (i.e: `pt-BR`), you have to provide a custom mapping
language code (defined under Settings -> Files -> <FILE> -> ... [ellipsis] -> Settings).
If you wish to add a dialect (i.e: `pt-BR`), you have to provide a custom mapping
to tell Crowdin to output Portuguese (Brazil) as `pt-BR` instead of `pt`.
In order to add a language mapping, go to Settings -> General Settings -> Language mapping
In order to add a language mapping, go to Settings -> General Settings -> Language mapping
(three faders icon on the left hand side of the "Translations" menu).
1. Follow the procedure as described in `gui/scripts/README.md`.
1. Follow the procedure as described in `../scripts/README.md`.
1. Optional: Upload the automatically translated `<NEW_LOCALE>/relay-locations.po` to
Crowdin.
1. Optional: Upload the automatically translated `<NEW_LOCALE>/relay-locations.po` to
Crowdin.
*Note: Replace `<NEW_LOCALE>` with the identifier of a newly added language.*
1. ZIP file with the following command:
```
cd gui/locales
cd ../locales
zip payload.zip <NEW_LOCALE>/relay-locations.po
```
1. Upload `payload.zip` to Crowdin via web interface (Settings -> Translations -> Upload
1. Upload `payload.zip` to Crowdin via web interface (Settings -> Translations -> Upload
translations).
1. Add the language to `SUPPORTED_LOCALE_LIST` in `app.tsx`.

2
desktop/packages/mullvad-vpn/scripts/README.md
View File

@ -21,7 +21,7 @@ and `integrate-relay-locations.py` in this directory.
* `fetch-relay-locations.py` fetches the relay list and extracts all country and city names.
* `intregrate-relay-locations.py` integrates the fetched relay locations into
`<repo>/gui/locales/relay-locations.pot`.
`../locales/relay-locations.pot`.
### Locking Python dependencies

2
graphics/README.md
View File

@ -16,7 +16,7 @@ feature graphics in the app's Google Play Store listing. The PNG image should be
The main and official mole logo. Used to generate icons on a bunch of platforms.
If `icon.svg` is changed. You need to run the following to generate new assets:
* Desktop: `gui/scripts/build-logo-icons.sh`
* Desktop: `desktop/packages/mullvad-vpn/scripts/build-logo-icons.sh`
* Android: `android/scripts/generate-pngs.sh`
### `icon-square.svg`