Release v3.28

.github/dependabot.yml

@@ -3,21 +3,18 @@ updates:
  - package-ecosystem: npm
  directory: '/'
  schedule:
- interval: weekly
- day: monday
+ interval: daily
  time: '05:00'
  timezone: 'Europe/Berlin'
  open-pull-requests-limit: 99
  versioning-strategy: increase
  ignore:
- # our current Electron version uses Node.js 14
- - dependency-name: '@types/node'
- versions:
- - '> 14.x'
- # in progress, always takes some time to follow all breaking changes
+ # don't perform major updates for electron automatically
  - dependency-name: electron
- versions:
- - '> 11.x'
+ update-types: ['version-update:semver-major']
+ # don't perform major updates for the used node version as it is defined by the used electron version
+ - dependency-name: '@types/node'
+ update-types: ['version-update:semver-major']
  - dependency-name: electron-builder
  versions:
  - '> 20.x'

.gitignore

@@ -23,3 +23,4 @@ electron/img/
 !electron/img/taskbar.overlay.png
 resources
 !resources/macos/entitlements/child.plist
+!resources/macos/entitlements/parent.plist

README.md

@@ -23,8 +23,16 @@ Cross platform desktop app, wrapping the [wire-webapp](https:/wireap
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= 10
+- Npm
 - Git
+- Yarn (Install using the official instructions at https://yarnpkg.com/lang/en/docs/install/, and not using the package recommended by apt-get)
 
+### Install Dependencies
+
+```shell
+sudo apt install git npm nodejs
+npm install --global yarn
+```
 ### Clone
 
 ```shell

app-config/package.json

@@ -1,6 +1,6 @@
 {
  "dependencies": {
- "wire-web-config-internal": "https:/wireapp/wire-web-config-default#v0.29.6",
- "wire-web-config-production": "https:/wireapp/wire-web-config-wire#v0.29.7-0"
+ "wire-web-config-internal": "https:/wireapp/wire-web-config-default#v0.31.0",
+ "wire-web-config-production": "https:/wireapp/wire-web-config-wire#v0.31.1-0"
  }
 }

bin/build-tools/lib/build-macos.ts

@@ -224,7 +224,7 @@ export async function manualMacOSSign(
  if (macOSConfig.certNameInstaller) {
  const appExecutable = `${appFile}/Contents/MacOS/${commonConfig.name}`;
  const {stderr: stderrSignExecutable, stdout: stdoutSignExecutable} = await execAsync(
- `codesign -fs '${macOSConfig.certNameApplication}' --entitlements '${inheritEntitlements}' '${appExecutable}'`,
+ `codesign -fs '${macOSConfig.certNameApplication}' --entitlements '${mainEntitlements}' '${appExecutable}'`,
  );
  logger.log(stdoutSignExecutable);
  logger.warn(stderrSignExecutable);

electron/renderer/src/Index.css

@@ -21,7 +21,10 @@
  --graphite-dark: #323639;
  --graphite: #8d989f;
 
- --sidebar-color: #1e2022;
+ --text-color: #000;
+ --border-color: #00000040;
+
+ --sidebar-color: #dce0e3;
 
  --z-index-webview-close-button: 100;
  --z-index-webview: 1;
@@ -43,14 +46,20 @@
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
 }
 
+.theme-dark {
+ --sidebar-color: #000;
+ --text-color: #fff;
+ --border-color: #ffffff40;
+}
+
 body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(0, #2391d3, #68b3e0);
  background-repeat: no-repeat;
  font-family: BlinkMacSystemFont, -apple-system, Helvetica Neue, Arial, sans-serif;
- color: var(--graphite-dark);
+ color: var(--text-color);
 }
 
 #root {

electron/renderer/src/actions/index.js

@@ -36,6 +36,7 @@ export const ActionType = {
  TOGGLE_EDIT_ACCOUNT_VISIBILITY: 'TOGGLE_EDIT_ACCOUNT_VISIBILITY',
  UPDATE_ACCOUNT: 'UPDATE_ACCOUNT',
  UPDATE_ACCOUNT_BADGE: 'UPDATE_ACCOUNT_BADGE',
+ UPDATE_ACCOUNT_DARK_MODE: 'UPDATE_ACCOUNT_DARK_MODE',
  UPDATE_ACCOUNT_LIFECYCLE: 'UPDATE_ACCOUNT_LIFECYCLE',
 };
 
@@ -87,6 +88,12 @@ export const updateAccountBadge = (id, count) => ({
  type: ActionType.UPDATE_ACCOUNT_BADGE,
 });
 
+export const updateAccountDarkMode = (id, darkMode) => ({
+ darkMode,
+ id,
+ type: ActionType.UPDATE_ACCOUNT_DARK_MODE,
+});
+
 export const setAccountContextHidden = () => ({
  type: ActionType.HIDE_CONTEXT_MENUS,
 });
@@ -142,6 +149,7 @@ export const updateAccountData = (id, data) => {
  const accountDataSchema = Joi.object({
  accentID: Joi.number(),
  availability: Joi.number().optional(),
+ darkMode: Joi.boolean().optional(),
  name: Joi.string(),
  picture: Joi.string().optional(),
  teamID: Joi.string().optional(),

electron/renderer/src/components/Sidebar.css

@@ -64,8 +64,8 @@
  width: 28px;
  height: 28px;
  border-radius: 50%;
- border: 2px solid rgba(255, 255, 255, 0.16);
- fill: #fff;
+ border: 2px solid var(--border-color);
+ fill: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;

electron/renderer/src/components/Sidebar.jsx

@@ -48,15 +48,16 @@ const getClassName = account => {
 const Sidebar = ({
  accounts,
  currentAccentID,
+ isDarkMode,
  hasCreatedAccount,
  hasReachedLimitOfAccounts,
  isAddingAccount,
  isEditAccountMenuVisible,
  ...connected
 }) => (
  <div
- className="Sidebar"
- style={hasCreatedAccount ? {} : {display: 'none'}}
+ className={`${isDarkMode ? 'Sidebar theme-dark' : 'Sidebar theme-light'}`}
+ style={!hasCreatedAccount ? {display: 'none'} : {}}
  onMouseDown={preventFocus()}
  onClick={connected.setAccountContextHidden}
  >
@@ -104,6 +105,7 @@ export default connect(
  hasCreatedAccount: AccountSelector.hasCreatedAccount(state),
  hasReachedLimitOfAccounts: AccountSelector.hasReachedLimitOfAccounts(state),
  isAddingAccount: AccountSelector.isAddingAccount(state),
+ isDarkMode: AccountSelector.getSelectedAccountDarkMode(state),
  isEditAccountMenuVisible: ContextMenuSelector.isEditAccountMenuVisible(state),
  }),
  {

electron/renderer/src/components/Webview.jsx

@@ -32,6 +32,7 @@ import {
  updateAccountBadgeCount,
  updateAccountData,
  updateAccountLifecycle,
+ updateAccountDarkMode,
 } from '../actions';
 import {getText, wrapperLocale} from '../lib/locale';
 import {AccountSelector} from '../selector/AccountSelector';
@@ -70,6 +71,7 @@ const Webview = ({
  switchWebview,
  updateAccountData,
  updateAccountLifecycle,
+ updateAccountDarkMode,
 }) => {
  const webviewRef = useRef();
  const [canDelete, setCanDelete] = useState(false);
@@ -211,6 +213,13 @@ const Webview = ({
  onUnreadCountUpdated(accountId, badgeCount);
  break;
  }
+
+ case EVENT_TYPE.UI.THEME_UPDATE: {
+ const [theme] = args;
+ const darkMode = theme === 'dark';
+ updateAccountDarkMode(account.id, darkMode);
+ break;
+ }
  }
  };
  const ON_IPC_MESSAGE = 'ipc-message';
@@ -232,6 +241,7 @@ const Webview = ({
  <>
  <LoadingSpinner visible={!!account.visible} webviewRef={webviewRef} />
  <webview
+ allowpopups="true"
  className={`Webview${account.visible ? '' : ' hide'}`}
  data-accountid={account.id}
  visible={String(!!account.visible)}
@@ -319,6 +329,7 @@ export default connect(
  setConversationJoinData,
  switchWebview: accountAction.switchWebview,
  updateAccountBadgeCount,
+ updateAccountDarkMode,
  updateAccountData,
  updateAccountLifecycle,
  },

electron/renderer/src/lib/__tests__/accentColor.spec.js

@@ -23,7 +23,7 @@ import {colorFromId} from '../accentColor';
 
 describe('colorFromId', () => {
  it('should return correct color', () => {
- expect(colorFromId(2)).toEqual('#00c800');
+ expect(colorFromId(2)).toEqual('#1d7833');
  });
 
  it('should return undefined if id does not exist', () => {

electron/renderer/src/lib/accentColor.js

@@ -17,43 +17,45 @@
  *
  */
 
-export const STRONG_BLUE = {
- color: '#2391d3',
+import {COLOR_V2} from '@wireapp/react-ui-kit';
+
+export const BLUE = {
+ color: '#0667c8',
  id: 1,
- name: 'StrongBlue',
+ name: 'Blue',
 };
 
-export const STRONG_LIME_GREEN = {
- color: '#00c800',
+export const GREEN = {
+ color: COLOR_V2.GREEN,
  id: 2,
- name: 'StrongLimeGreen',
+ name: 'Green',
 };
 
-export const VIVID_RED = {
- color: '#fb0807',
+export const RED = {
+ color: COLOR_V2.RED,
  id: 4,
- name: 'VividRed',
+ name: 'Red',
 };
 
-export const BRIGHT_ORANGE = {
- color: '#ff8900',
+export const AMBER = {
+ color: COLOR_V2.AMBER,
  id: 5,
- name: 'BrightOrange',
+ name: 'Orange',
 };
 
-export const SOFT_PINK = {
- color: '#fe5ebd',
+export const TURQUOISE = {
+ color: COLOR_V2.TURQUOISE ? COLOR_V2.TURQUOISE : '#5de6ff',
  id: 6,
- name: 'SoftPink',
+ name: 'Turquoise',
 };
 
-export const VIOLET = {
- color: '#9c00fe',
+export const PURPLE = {
+ color: COLOR_V2.PURPLE,
  id: 7,
- name: 'Violet',
+ name: 'Purple',
 };
 
-export const ACCENT_COLORS = [STRONG_BLUE, STRONG_LIME_GREEN, VIVID_RED, BRIGHT_ORANGE, SOFT_PINK, VIOLET];
+export const ACCENT_COLORS = [BLUE, GREEN, RED, AMBER, TURQUOISE, PURPLE];
 
 export const colorFromId = id => {
  const accentColor = ACCENT_COLORS.find(color => color.id === id);

electron/renderer/src/reducers/accountReducer.js

@@ -24,6 +24,7 @@ const createAccount = (sessionID, ssoCode = undefined) => ({
  accentID: undefined,
  availability: 0,
  badgeCount: 0,
+ darkMode: true,
  id: generateUUID(),
  isAdding: true,
  lifecycle: undefined,
@@ -102,6 +103,13 @@ export default (state = [createAccount()], action) => {
  });
  }
 
+ case ActionType.UPDATE_ACCOUNT_DARK_MODE: {
+ return state.map(account => {
+ const isMatchingAccount = account.id === action.id;
+ return isMatchingAccount ? {...account, darkMode: action.darkMode} : account;
+ });
+ }
+
  case ActionType.UPDATE_ACCOUNT_LIFECYCLE: {
  return state.map(account => {
  const isMatchingAccount = account.id === action.id;

electron/renderer/src/selector/AccountSelector.js

@@ -25,6 +25,7 @@ export class AccountSelector {
  static getAccountIndex = (state, accountId) =>
  AccountSelector.getAccounts(state).findIndex(account => account.id === accountId);
  static getSelectedAccountAccentId = state => AccountSelector.getSelectedAccount(state)?.accentID;
+ static getSelectedAccountDarkMode = state => AccountSelector.getSelectedAccount(state)?.darkMode;
  static isAddingAccount = state => !!AccountSelector.getUnboundAccount(state);
  static getUnboundAccount = state =>
  !!AccountSelector.getAccounts(state).length &&

electron/src/global.ts

@@ -58,9 +58,15 @@ declare global {
  namespace NodeJS {
  interface Global {
  _ConfigurationPersistence: Record<string, any>;
- desktopCapturer: DesktopCapturer;
+ desktopCapturer: {
+ getDesktopSources(options: Electron.SourcesOptions): Promise<Electron.DesktopCapturerSource[]>;
+ };
  environment: typeof EnvironmentUtil;
  openGraphAsync(url: string): Promise<OpenGraphResult>;
+ secretsCrypto?: {
+ decrypt: (value: Uint8Array) => Promise<Uint8Array>;
+ encrypt: (encrypted: Uint8Array) => Promise<Uint8Array>;
+ };
  }
  }
 }

electron/src/lib/eventType.ts

@@ -34,7 +34,10 @@ export const EVENT_TYPE = {
  CHANGE_ENVIRONMENT: 'EVENT_TYPE.ACTION.CHANGE_ENVIRONMENT',
  CREATE_SSO_ACCOUNT: 'EVENT_TYPE.ACTION.CREATE_SSO_ACCOUNT',
  CREATE_SSO_ACCOUNT_RESPONSE: 'EVENT_TYPE.ACTION.CREATE_SSO_ACCOUNT_RESPONSE',
+ DECRYPT: 'EVENT_TYPE.ACTION.DECRYPT',
  DEEP_LINK_SUBMIT: 'EVENT_TYPE.ACTION.DEEP_LINK_SUBMIT',
+ ENCRYPT: 'EVENT_TYPE.ACTION.ENCRYPT',
+ GET_DESKTOP_SOURCES: 'EVENT_TYPE.ACTION.GET_DESKTOP_SOURCES',
  GET_OG_DATA: 'EVENT_TYPE.ACTION.GET_OG_DATA',
  JOIN_CONVERSATION: 'EVENT_TYPE.ACTION.JOIN_CONVERSATION',
  NOTIFICATION_CLICK: 'EVENT_TYPE.ACTION.NOTIFICATION_CLICK',
@@ -83,6 +86,7 @@ export const EVENT_TYPE = {
  UI: {
  BADGE_COUNT: 'EVENT_TYPE.UI.BADGE_COUNT',
  SYSTEM_MENU: 'EVENT_TYPE.UI.SYSTEM_MENU',
+ THEME_UPDATE: 'EVENT_TYPE.UI.THEME_UPDATE',
  WEBAPP_VERSION: 'EVENT_TYPE.UI.WEBAPP_VERSION',
  },
  WEBAPP: {

electron/src/locale/index.ts

@@ -53,7 +53,7 @@ export type i18nStrings = Record<i18nLanguageIdentifier, string>;
 export type SupportedI18nLanguage = keyof typeof SUPPORTED_LANGUAGES;
 export type SupportedI18nLanguageObject = Record<SupportedI18nLanguage, i18nStrings>;
 
-const app = Electron.app || Electron.remote.app;
+const app = Electron.app || require('@electron/remote').app;
 
 export const LANGUAGES: SupportedI18nLanguageObject = {
  cs,

electron/src/logging/getLogger.ts

@@ -24,8 +24,8 @@ import * as path from 'path';
 
 import {config} from '../settings/config';
 
-const mainProcess = process || Electron.remote.process;
-const app = Electron.app || Electron.remote.app;
+const mainProcess = process || require('@electron/remote').process;
+const app = Electron.app || require('@electron/remote').app;
 
 const logDir = path.join(app.getPath('userData'), 'logs');
 const logFile = path.join(logDir, 'electron.log');