added option to enable native title bar (disabled by default)

electron.js

@@ -7,6 +7,7 @@ const sqlInit = require('./src/services/sql_init');
 const cls = require('./src/services/cls');
 const url = require("url");
 const port = require('./src/services/port');
+const optionService = require('./src/services/options');
 const env = require('./src/services/env');
 const keyboardActionsService = require('./src/services/keyboard_actions');
 const appIconService = require('./src/services/app_icon');
@@ -31,10 +32,14 @@ function onClosed() {
 async function createMainWindow() {
     await sqlInit.dbConnection;
 
+    let frame = true;
+
     // if schema doesn't exist -> setup process
     // if schema exists, then we need to wait until the migration process is finished
     if (await sqlInit.schemaExists()) {
         await sqlInit.dbReady;
+
+        frame = await optionService.getOptionBool('nativeTitleBarVisible')
     }
 
     const mainWindowState = windowStateKeeper({
@@ -52,7 +57,7 @@ async function createMainWindow() {
         webPreferences: {
             nodeIntegration: true
         },
-        frame: false,
+        frame: frame,
         icon: path.join(__dirname, 'images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png')
     });
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.38.2",
+  "version": "0.38.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/public/javascripts/desktop.js

@@ -32,6 +32,7 @@ import sidebarService from './services/sidebar.js';
 import importService from './services/import.js';
 import keyboardActionService from "./services/keyboard_actions.js";
 import splitService from "./services/split.js";
+import optionService from "./services/options.js";
 
 window.glob.isDesktop = utils.isDesktop;
 window.glob.isMobile = utils.isMobile;
@@ -179,31 +180,32 @@ if (utils.isElectron()) {
     import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 }
 
-if (utils.isElectron()) {
+optionService.waitForOptions().then(options => {
-    $("#title-bar-buttons").show();
+    if (utils.isElectron() && !options.is('nativeTitleBarVisible')) {
+        $("#title-bar-buttons").show();
 
-    $("#minimize-btn").on('click', () => {
+        $("#minimize-btn").on('click', () => {
-        $("#minimize-btn").trigger('blur');
+            $("#minimize-btn").trigger('blur');
-        const { remote } = require('electron');
+            const {remote} = require('electron');
-        remote.BrowserWindow.getFocusedWindow().minimize();
+            remote.BrowserWindow.getFocusedWindow().minimize();
-    });
+        });
 
-    $("#maximize-btn").on('click', () => {
+        $("#maximize-btn").on('click', () => {
-        $("#maximize-btn").trigger('blur');
+            $("#maximize-btn").trigger('blur');
-        const { remote } = require('electron');
+            const {remote} = require('electron');
-        const focusedWindow = remote.BrowserWindow.getFocusedWindow();
+            const focusedWindow = remote.BrowserWindow.getFocusedWindow();
 
-        if (focusedWindow.isMaximized()) {
+            if (focusedWindow.isMaximized()) {
-            focusedWindow.unmaximize();
+                focusedWindow.unmaximize();
-        }
+            } else {
-        else {
+                focusedWindow.maximize();
-            focusedWindow.maximize();
+            }
-        }
+        });
-    });
 
-    $("#close-btn").on('click', () => {
+        $("#close-btn").on('click', () => {
-        $("#close-btn").trigger('blur');
+            $("#close-btn").trigger('blur');
-        const { remote } = require('electron');
+            const {remote} = require('electron');
-        remote.BrowserWindow.getFocusedWindow().close();
+            remote.BrowserWindow.getFocusedWindow().close();
-    });
+        });
-}
+    }
+});

src/public/javascripts/dialogs/options/appearance.js

@@ -9,16 +9,25 @@ const TPL = `
 
 <form>
     <div class="form-group row">
-        <div class="col-6">
+        <div class="col-4">
             <label for="theme-select">Theme</label>
             <select class="form-control" id="theme-select"></select>
         </div>
 
-        <div class="col-6">
+        <div class="col-4">
             <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
 
             <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
         </div>
+        
+        <div class="col-4">
+            <label for="native-title-bar-select">Native title bar (requires app restart)</label>
+
+            <select class="form-control" id="native-title-bar-select">
+                <option value="show">enabled</option>
+                <option value="hide">disabled</option>
+            </select>
+        </div>
     </div>
 
     <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
@@ -69,6 +78,7 @@ export default class ApperanceOptions {
 
         this.$themeSelect = $("#theme-select");
         this.$zoomFactorSelect = $("#zoom-factor-select");
+        this.$nativeTitleBarSelect = $("#native-title-bar-select");
         this.$mainFontSize = $("#main-font-size");
         this.$treeFontSize = $("#tree-font-size");
         this.$detailFontSize = $("#detail-font-size");
@@ -99,6 +109,12 @@ export default class ApperanceOptions {
 
         this.$zoomFactorSelect.on('change', () => { zoomService.setZoomFactorAndSave(this.$zoomFactorSelect.val()); });
 
+        this.$nativeTitleBarSelect.on('change', () => {
+            const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false';
+
+            server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
+        });
+
         this.$mainFontSize.on('change', async () => {
             await server.put('options/mainFontSize/' + this.$mainFontSize.val());
 
@@ -143,6 +159,8 @@ export default class ApperanceOptions {
             this.$zoomFactorSelect.prop('disabled', true);
         }
 
+        this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide');
+
         this.$mainFontSize.val(options.mainFontSize);
         this.$treeFontSize.val(options.treeFontSize);
         this.$detailFontSize.val(options.detailFontSize);

src/routes/api/options.js

@@ -33,7 +33,8 @@ const ALLOWED_OPTIONS = new Set([
     'imageJpegQuality',
     'leftPaneWidth',
     'rightPaneWidth',
-    'rightPaneVisible'
+    'rightPaneVisible',
+    'nativeTitleBarVisible'
 ]);
 
 async function getOptions() {

src/services/options_init.js

@@ -79,7 +79,8 @@ const defaultOptions = [
     { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
     { name: 'leftPaneWidth', value: '25', isSynced: false },
     { name: 'rightPaneWidth', value: '25', isSynced: false },
-    { name: 'rightPaneVisible', value: 'true', isSynced: false }
+    { name: 'rightPaneVisible', value: 'true', isSynced: false },
+    { name: 'nativeTitleBarVisible', value: 'false', isSynced: false }
 ];
 
 async function initStartupOptions() {