Open separate windows with theme, update settings theme on change

debug_log_preload.js

@@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
+window.theme = config.theme;
 window.i18n = i18n.setup(locale, localeMessages);
 
 // got.js appears to need this to successfully submit debug logs to the cloud

js/debug_log_start.js

@@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
+$body.addClass(window.theme);
 
 // got.js appears to need this to successfully submit debug logs to the cloud
 window.setImmediate = window.nodeSetImmediate;

js/permissions_popup_start.js

@@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
+$body.addClass(window.theme);
 
 window.view = new Whisper.ConfirmationDialogView({
   message: i18n('audioPermissionNeeded'),

js/settings_start.js

@@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
 });
 
 const $body = $(document.body);
+$body.addClass(window.theme);
 
 const getInitialData = async () => ({
   deviceName: await window.getDeviceName(),

js/views/settings_view.js

@@ -1,5 +1,6 @@
 /* global i18n: false */
 /* global Whisper: false */
+/* global $: false */
 
 /* eslint-disable no-new */
 
@@ -82,7 +83,14 @@
         el: this.$('.theme-settings'),
         name: 'theme-setting',
         value: window.initialData.themeSetting,
-        setFn: window.setThemeSetting,
+        setFn: theme => {
+          $(document.body)
+            .removeClass('android')
+            .removeClass('android-dark')
+            .removeClass('ios')
+            .addClass(theme);
+          window.setThemeSetting(theme);
+        },
       });
       if (Settings.isAudioNotificationSupported()) {
         new CheckboxView({

main.js

@@ -115,7 +115,7 @@ const loadLocale = require('./app/locale').load;
 let logger;
 let locale;
 
-function prepareURL(pathSegments) {
+function prepareURL(pathSegments, moreKeys) {
   return url.format({
     pathname: path.join.apply(null, pathSegments),
     protocol: 'file:',
@@ -134,6 +134,7 @@ function prepareURL(pathSegments) {
       appInstance: process.env.NODE_APP_INSTANCE,
       proxyUrl: process.env.HTTPS_PROXY || process.env.https_proxy,
       importMode: importMode ? true : undefined, // for stringify()
+      ...moreKeys,
     },
   });
 }
@@ -428,7 +429,7 @@ function showAbout() {
 }
 
 let settingsWindow;
-function showSettingsWindow() {
+async function showSettingsWindow() {
   if (settingsWindow) {
     settingsWindow.show();
     return;
@@ -437,6 +438,7 @@ function showSettingsWindow() {
     return;
   }
 
+  const theme = await pify(getDataFromMainWindow)('theme-setting');
   const size = mainWindow.getSize();
   const options = {
     width: Math.min(500, size[0]),
@@ -461,7 +463,7 @@ function showSettingsWindow() {
 
   captureClicks(settingsWindow);
 
-  settingsWindow.loadURL(prepareURL([__dirname, 'settings.html']));
+  settingsWindow.loadURL(prepareURL([__dirname, 'settings.html'], { theme }));
 
   settingsWindow.on('closed', () => {
     removeDarkOverlay();
@@ -475,12 +477,13 @@ function showSettingsWindow() {
 }
 
 let debugLogWindow;
-function showDebugLogWindow() {
+async function showDebugLogWindow() {
   if (debugLogWindow) {
     debugLogWindow.show();
     return;
   }
 
+  const theme = await pify(getDataFromMainWindow)('theme-setting');
   const size = mainWindow.getSize();
   const options = {
     width: Math.max(size[0] - 100, MIN_WIDTH),
@@ -505,7 +508,7 @@ function showDebugLogWindow() {
 
   captureClicks(debugLogWindow);
 
-  debugLogWindow.loadURL(prepareURL([__dirname, 'debug_log.html']));
+  debugLogWindow.loadURL(prepareURL([__dirname, 'debug_log.html'], { theme }));
 
   debugLogWindow.on('closed', () => {
     removeDarkOverlay();
@@ -519,7 +522,7 @@ function showDebugLogWindow() {
 }
 
 let permissionsPopupWindow;
-function showPermissionsPopupWindow() {
+async function showPermissionsPopupWindow() {
   if (permissionsPopupWindow) {
     permissionsPopupWindow.show();
     return;
@@ -528,6 +531,7 @@ function showPermissionsPopupWindow() {
     return;
   }
 
+  const theme = await pify(getDataFromMainWindow)('theme-setting');
   const size = mainWindow.getSize();
   const options = {
     width: Math.min(400, size[0]),
@@ -553,7 +557,7 @@ function showPermissionsPopupWindow() {
   captureClicks(permissionsPopupWindow);
 
   permissionsPopupWindow.loadURL(
-    prepareURL([__dirname, 'permissions_popup.html'])
+    prepareURL([__dirname, 'permissions_popup.html'], { theme })
   );
 
   permissionsPopupWindow.on('closed', () => {
@@ -832,13 +836,19 @@ ipc.on('delete-all-data', () => {
   }
 });
 
+function getDataFromMainWindow(name, callback) {
+  ipc.once(`get-success-${name}`, (_event, error, value) =>
+    callback(error, value)
+  );
+  mainWindow.webContents.send(`get-${name}`);
+}
+
 function installSettingsGetter(name) {
   ipc.on(`get-${name}`, event => {
     if (mainWindow && mainWindow.webContents) {
-      ipc.once(`get-success-${name}`, (_event, error, value) =>
+      getDataFromMainWindow(name, (error, value) =>
         event.sender.send(`get-success-${name}`, error, value)
       );
-      mainWindow.webContents.send(`get-${name}`);
     }
   });
 }

permissions_popup_preload.js

@@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
+window.theme = config.theme;
 window.i18n = i18n.setup(locale, localeMessages);
 
 require('./js/logging');

preload.js

@@ -70,10 +70,6 @@ window.closeAbout = () => ipc.send('close-about');
 window.updateTrayIcon = unreadCount =>
   ipc.send('update-tray-icon', unreadCount);
 
-ipc.on('debug-log', () => {
-  Whisper.events.trigger('showDebugLog');
-});
-
 ipc.on('set-up-with-import', () => {
   Whisper.events.trigger('setupWithImport');
 });

settings_preload.js

@@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
+window.theme = config.theme;
 window.i18n = i18n.setup(locale, localeMessages);
 
 require('./js/logging');

stylesheets/android-dark.scss

@@ -6,6 +6,10 @@ $button-dark: #ccc;
 $text-dark: #cccccc;
 $text-dark_l2: darken($text-dark, 30%);
 
+body.android-dark {
+  background-color: $grey-dark;
+}
+
 .android-dark {
   .app-loading-screen {
     background-color: $grey-dark;