Setting of blur

Author: KOSHINOawa

src-main/index.js

@@ -1,9 +1,4 @@
-const {app, nativeTheme} = require('electron');
-
-// Force dark theme on Windows for acrylic effect (doesn't follow system)
-if (process.platform === 'win32') {
-  nativeTheme.themeSource = 'dark';
-}
+const { app } = require('electron');
 
 // requestSingleInstanceLock() crashes the app in signed MAS builds
 // https://github.com/electron/electron/issues/15958
@@ -14,8 +9,8 @@ if (!process.mas && !app.requestSingleInstanceLock()) {
 const path = require('path');
 const AbstractWindow = require('./windows/abstract');
 const EditorWindow = require('./windows/editor');
-const {checkForUpdates} = require('./update-checker');
-const {tranlateOrNull} = require('./l10n');
+const { checkForUpdates } = require('./update-checker');
+const { tranlateOrNull } = require('./l10n');
 const migrate = require('./migrate');
 const settings = require('./settings');
 require('./protocols');

src-main/l10n/en.json

@@ -263,6 +263,10 @@
     "string": "Exit F11 fullscreen mode (not the fullscreen button in the editor) when pressing escape",
     "developer_comment": "Refering to when an entire window is in fullscreen by pressing F11 or the maximize button on macOS, not the fullscreen mode you get by pressing the fullscreen button in the editor."
   },
+  "desktop-settings.useBlurBackground": {
+    "string": "Enable window background blur (Windows only)",
+    "developer_comment": "Show beautiful effect on the Window background."
+  },
   "desktop-settings.rich-presence": {
     "string": "Enable Rich Presence",
     "developer_comment": "Option to enable Discord Rich Presence support, which shows the name of the project someone is editing on their Discord profile. For compliance with Scratch policies don't use the word \"Discord\" in the translation."

src-main/l10n/generated-translations.json

@@ -1781,6 +1781,7 @@
         "desktop-settings.editor-must-be-open": "错误：请打开编辑器配置媒体设备",
         "desktop-settings.error": "错误：{error}",
         "desktop-settings.exit-fullscreen-on-escape": "当按下 Esc 键时，退出 F11 全屏模式（不是编辑器全屏）",
+          "desktop-settings.useBlurBackground": "启用窗口背景模糊（只支持Windows）",
         "desktop-settings.hardware-acceleration": "启用图形加速（重启后生效）",
         "desktop-settings.hardware-acceleration-disabled": "禁用图形加速会显著降低性能。某些项目的运行速度可能下降100倍以上，因为所有渲染工作都将转由CPU承担。只有当图形加速导致程序崩溃时，才应将此作为最后的手段。",
         "desktop-settings.hardware-acceleration-when-available": "在可用时启用图形加速（重启后生效）",

src-main/settings.js

@@ -177,6 +177,13 @@ class Settings {
   set richPresence (richPresence) {
     this.data.richPresence = richPresence;
   }
+
+  get useBlurBackground() {
+    return this.data.useBlurBackground !== false;
+  }
+  set useBlurBackground(useBlurBackground) {
+    this.data.useBlurBackground = useBlurBackground;
+  }
 }
 
 module.exports = new Settings();

src-main/update-checker.js

@@ -8,7 +8,7 @@ const currentVersion = packageJSON.version;
 const getRepositoryInfo = () => {
   const fallback = {
     owner: 'AstraEditor',
-    repo: 'desktop'
+    repo: 'Desktop'
   };
 
   const repositoryURL = packageJSON?.repository?.url;

src-main/windows/desktop-settings.js

@@ -1,13 +1,13 @@
-const {app, shell} = require('electron');
+const { app, shell, nativeTheme } = require('electron');
 const AbstractWindow = require('./abstract');
-const {translate, getStrings, getLocale} = require('../l10n');
-const {APP_NAME} = require('../brand');
+const { translate, getStrings, getLocale } = require('../l10n');
+const { APP_NAME } = require('../brand');
 const settings = require('../settings');
-const {isUpdateCheckerAllowed} = require('../update-checker');
+const { isUpdateCheckerAllowed } = require('../update-checker');
 const RichPresence = require('../rich-presence');
 
 class DesktopSettingsWindow extends AbstractWindow {
-  constructor () {
+  constructor() {
     super();
 
     this.window.setTitle(`${translate('desktop-settings.title')} - ${APP_NAME}`);
@@ -28,6 +28,7 @@ class DesktopSettingsWindow extends AbstractWindow {
           bypassCORS: settings.bypassCORS,
           spellchecker: settings.spellchecker,
           exitFullscreenOnEscape: settings.exitFullscreenOnEscape,
+          useBlurBackground: settings.useBlurBackground,
           richPresenceAvailable: RichPresence.isAvailable(),
           richPresence: settings.richPresence
         }
@@ -89,8 +90,8 @@ class DesktopSettingsWindow extends AbstractWindow {
 
     this.ipc.handle('set-rich-presence', async (event, richPresence) => {
       settings.richPresence = richPresence;
-      if (richPresence) {
-        RichPresence.enable();
+      if (richPrece) {
+        RichPresencesen.enable();
       } else {
         RichPresence.disable();
       }
@@ -101,25 +102,36 @@ class DesktopSettingsWindow extends AbstractWindow {
       shell.showItemInFolder(app.getPath('userData'));
     });
 
+    this.ipc.handle('use-blur-background', async (event, useBlurBackground) => {
+      settings.useBlurBackground = useBlurBackground;
+      await settings.save();
+
+      const EditorWindow = require('./editor');
+      const editorWindows = AbstractWindow.getWindowsByClass(EditorWindow);
+      for (const win of editorWindows) {
+        win.updateBlurBackground(useBlurBackground);
+      }
+    })
+
     this.loadURL('tw-desktop-settings://./desktop-settings.html');
   }
 
-  getDimensions () {
+  getDimensions() {
     return {
       width: 550,
       height: 500
     };
   }
 
-  getPreload () {
+  getPreload() {
     return 'desktop-settings';
   }
 
-  isPopup () {
+  isPopup() {
     return true;
   }
 
-  static show () {
+  static show() {
     const window = AbstractWindow.singleton(DesktopSettingsWindow);
     window.show();
   }

src-main/windows/editor.js

@@ -3,16 +3,16 @@ const path = require('path');
 const nodeURL = require('url');
 const zlib = require('zlib');
 const nodeCrypto = require('crypto');
-const {app, dialog} = require('electron');
+const { app, dialog, nativeTheme } = require('electron');
 const ProjectRunningWindow = require('./project-running-window');
 const AddonsWindow = require('./addons');
 const DesktopSettingsWindow = require('./desktop-settings');
 const PrivacyWindow = require('./privacy');
 const AboutWindow = require('./about');
 const PackagerWindow = require('./packager');
-const {createAtomicWriteStream} = require('../atomic-write-stream');
-const {translate, updateLocale, getStrings} = require('../l10n');
-const {APP_NAME} = require('../brand');
+const { createAtomicWriteStream } = require('../atomic-write-stream');
+const { translate, updateLocale, getStrings } = require('../l10n');
+const { APP_NAME } = require('../brand');
 const prompts = require('../prompts');
 const settings = require('../settings');
 const privilegedFetch = require('../fetch');
@@ -68,7 +68,7 @@ const getCachedExtensionsRedirect = (input) => {
 };
 
 class OpenedFile {
-  constructor (type, path) {
+  constructor(type, path) {
     /** @type {TYPE_FILE|TYPE_URL|TYPE_SCRATCH|TYPE_SAMPLE|TYPE_SAMPLE_ASTRA} */
     this.type = type;
 
@@ -79,7 +79,7 @@ class OpenedFile {
     this.path = path;
   }
 
-  async read () {
+  async read() {
     if (this.type === TYPE_FILE) {
       return {
         name: path.basename(this.path),
@@ -273,7 +273,7 @@ class EditorWindow extends ProjectRunningWindow {
    * @param {OpenedFile|null} initialFile
    * @param {boolean} isInitiallyFullscreen
    */
-  constructor (initialFile, isInitiallyFullscreen) {
+  constructor(initialFile, isInitiallyFullscreen) {
     super();
 
     /**
@@ -369,7 +369,7 @@ class EditorWindow extends ProjectRunningWindow {
 
     this.ipc.handle('get-file', async (event, id) => {
       const file = getFileById(id);
-      const {name, data} = await file.read();
+      const { name, data } = await file.read();
       return {
         name,
         type: file.type,
@@ -468,7 +468,7 @@ class EditorWindow extends ProjectRunningWindow {
             .replace('{APP_NAME}', unsafePath.app)
             .replace('{file}', filePath),
           noLink: true
-        });  
+        });
         return null;
       }
 
@@ -668,35 +668,44 @@ class EditorWindow extends ProjectRunningWindow {
       this.isInEditorFullScreen = !!isFullScreen;
     });
 
+    this.ipc.handle('set-window-theme', (event, theme) => {
+      if (process.platform === 'win32') {
+        if (theme === 'light' || theme === 'dark') {
+          nativeTheme.themeSource = theme;
+        } else {
+          nativeTheme.themeSource = 'dark'; // default
+        }
+      }
+    });
+
     this.loadURL('tw-editor://./gui/gui.html');
     this.show();
 
     // Windows acrylic blur effect (theme controlled by nativeTheme.themeSource in index.js)
-    if (process.platform === 'win32') {
+    if (process.platform === 'win32' && settings.useBlurBackground) {
       this.window.setBackgroundMaterial('acrylic');
     }
   }
 
-  getPreload () {
+  getPreload() {
     return 'editor';
   }
 
-  getDimensions () {
+  getDimensions() {
     return {
       width: 1280,
       height: 800
     };
   }
 
-  getBackgroundColor () {
-    // Windows acrylic handles background, return solid color for animations
+  getBackgroundColor() {
     if (process.platform === 'win32') {
       return '#333333';
     }
     return '#33333300';
   }
 
-  getWindowOptions () {
+  getWindowOptions() {
     const options = super.getWindowOptions();
     options.frame = false;
     options.minWidth = 1024;
@@ -712,19 +721,28 @@ class EditorWindow extends ProjectRunningWindow {
     // Windows uses setBackgroundMaterial instead of transparent
     if (process.platform === 'win32') {
       options.transparent = false;
-      options.backgroundColor = '#333333';
     } else {
       options.transparent = true;
     }
 
     return options;
   }
 
-  applySettings () {
+  applySettings() {
     this.window.webContents.setBackgroundThrottling(settings.backgroundThrottling);
   }
 
-  enumerateMediaDevices () {
+  updateBlurBackground(useBlurBackground) {
+    if (process.platform !== 'win32') return;
+    
+    if (useBlurBackground) {
+      this.window.setBackgroundMaterial('acrylic');
+    } else {
+      this.window.setBackgroundMaterial('none');
+    }
+  }
+
+  enumerateMediaDevices() {
     // Used by desktop settings
     return new Promise((resolve, reject) => {
       this.ipc.once('enumerated-media-devices', (event, result) => {
@@ -738,7 +756,7 @@ class EditorWindow extends ProjectRunningWindow {
     });
   }
 
-  handleWindowOpen (details) {
+  handleWindowOpen(details) {
     const url = new URL(details.url);
     const params = new URLSearchParams(url.search);
 
@@ -786,11 +804,11 @@ class EditorWindow extends ProjectRunningWindow {
     return super.handleWindowOpen(details);
   }
 
-  canExitFullscreenByPressingEscape () {
+  canExitFullscreenByPressingEscape() {
     return !this.isInEditorFullScreen;
   }
 
-  updateRichPresence () {
+  updateRichPresence() {
     RichPresence.setActivity(this.projectTitle, this.openedProjectAt);
   }
 
@@ -799,7 +817,7 @@ class EditorWindow extends ProjectRunningWindow {
    * @param {boolean} fullscreen
    * @param {string|null} workingDirectory
    */
-  static openFiles (files, fullscreen, workingDirectory) {
+  static openFiles(files, fullscreen, workingDirectory) {
     if (files.length === 0) {
       EditorWindow.newWindow(fullscreen);
     } else {
@@ -813,7 +831,7 @@ class EditorWindow extends ProjectRunningWindow {
    * Open a new window with the default project.
    * @param {boolean} fullscreen
    */
-  static newWindow (fullscreen) {
+  static newWindow(fullscreen) {
     new EditorWindow(null, fullscreen);
   }
 }

src-preload/desktop-settings.js

@@ -12,5 +12,6 @@ contextBridge.exposeInMainWorld('DesktopSettingsPreload', {
   setSpellchecker: (spellchecker) => ipcRenderer.invoke('set-spellchecker', spellchecker),
   setExitFullscreenOnEscape: (exitFullscreenOnEscape) => ipcRenderer.invoke('set-exit-fullscreen-on-escape', exitFullscreenOnEscape),
   setRichPresence: (richPresence) => ipcRenderer.invoke('set-rich-presence', richPresence),
+  setBlurBackground: (useBlurBackground) => ipcRenderer.invoke('use-blur-background', useBlurBackground),
   openUserData: () => ipcRenderer.invoke('open-user-data')
 });

src-preload/editor.js

@@ -26,7 +26,7 @@ contextBridge.exposeInMainWorld('EditorPreload', {
     exportForPackager = callback;
   },
   setIsFullScreen: (isFullScreen) => ipcRenderer.invoke('set-is-full-screen', isFullScreen),
-  getLocalStorage: (key) => localStorage.getItem(key)
+  getLocalStorage: (key) => localStorage.getItem(key),
 });
 
 let exportForPackager = () => Promise.reject(new Error('exportForPackager missing'));
@@ -52,6 +52,13 @@ window.addEventListener('message', (e) => {
   }
 });
 
+window.addEventListener('storage', () => {
+  const theme = localStorage.getItem('tw:theme');
+  if (process.platform === 'win32') {
+    ipcRenderer.invoke('set-window-theme', theme);
+  }
+})
+
 ipcRenderer.on('enumerate-media-devices', (e) => {
   navigator.mediaDevices.enumerateDevices()
     .then((devices) => {

src-renderer/desktop-settings/desktop-settings.html

@@ -301,6 +301,19 @@ <h1 class="title"></h1>
         document.querySelector('.exit-fullscreen-on-escape-label').textContent = strings['desktop-settings.exit-fullscreen-on-escape'];
       </script>
 
+      <label>
+        <input type="checkbox" class="useBlurBackground-checkbox" autocomplete="off">
+        <span class="useBlurBackground-label"></span>
+      </label>
+        <script>
+        const useBlurBackground = document.querySelector('.useBlurBackground-checkbox');
+        useBlurBackground.onchange = () => {
+          DesktopSettingsPreload.setBlurBackground(useBlurBackground.checked);
+        };
+        useBlurBackground.checked = settings.useBlurBackground;
+        document.querySelector('.useBlurBackground-label').textContent = strings['desktop-settings.useBlurBackground'];
+      </script>
+
       <label>
         <input type="checkbox" class="rich-presence-checkbox" autocomplete="off">
         <span class="rich-presence-label"></span>