ELECTRON-925 (Add support for customizing Windows title bar styles) (#529)

* ELECTRON-925 - Add support for customizing Windows title bar styles * ELECTRON-925 - Fix file path * ELECTRON-925 - Validate if the file exists, if not use the default styles
2024-11-21 16:38:41 -06:00 · 2018-11-29 23:24:23 +05:30 · 2018-11-29 23:24:23 +05:30 · f8044051df
commit f8044051df
parent 0050a6e4a7
7 changed files with 180 additions and 8 deletions
--- a/config/titleBarStyles.css
+++ b/config/titleBarStyles.css
@ -0,0 +1,153 @@
+
+/*---
+title:   Tile bar
+section: div
+---
+
+Use this Id for setting the background image.
+Typically you'll want to set background-image: url(""); and background-size: cover;
+
+```example:html
+<div id="title-bar">
+```
+
+*/
+#title-bar {
+    display: flex;
+    position: fixed;
+    background: rgba(74,74,74,1);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 32px;
+    padding-left: 0;
+    justify-content: center;
+    align-items: center;
+    -webkit-app-region: drag;
+    -webkit-user-select: none;
+    box-sizing: content-box;
+    z-index: 1000;
+}
+
+/*---
+title:   @media
+section: title-bar
+---
+@media screen and (min-width: 400px) {
+    #title-bar {
+        background-url: url("big");
+    }
+}
+
+@media screen and (max-width: 600px) {
+    #title-bar {
+        background-color: url("small");
+    }
+}
+*/
+
+/*---
+title:   Branding logo
+section: div
+---
+
+Use this class for the branding logo.
+Typically you'll want to set content: url("") and adjust the width property
+
+```example:html
+<div id="branding-logo" align="right" />
+```
+*/
+.branding-logo {
+    height: 32px;
+}
+
+#hamburger-menu-button {
+    color: rgba(255,255,255,1);
+    text-align: center;
+    width: 40px;
+    height: 32px;
+    background: center;
+    border: none;
+    border-image: initial;
+    display: inline-grid;
+    border-radius: 0;
+    padding: 11px;
+    box-sizing: border-box;
+    cursor: default;
+}
+
+#hamburger-menu-button:focus {
+    outline: none;
+}
+
+#title-container {
+    height: 32px;
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#title-bar-title {
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    color: white;
+    margin: 0;
+    padding-left: 10px;
+    font-size: 13px;
+}
+
+.title-bar-button-container {
+    justify-content: center;
+    align-items: center;
+    right: 0;
+    color: rgba(255,255,255,1);
+    -webkit-app-region: no-drag;
+    text-align: center;
+    width: 45px;
+    height: 32px;
+    margin: 0;
+    box-sizing: border-box !important;
+    cursor: default;
+}
+
+.title-bar-button {
+    color: rgba(255,255,255,1);
+    text-align: center;
+    width: 45px;
+    height: 32px;
+    background: center;
+    border: none;
+    border-image: initial;
+    display: inline-grid;
+    border-radius: 0;
+    padding: 10px 15px;
+    cursor: default;
+}
+
+.title-bar-button:hover {
+    background-color: rgba(255,255,255,0.2);
+}
+
+.title-bar-button:focus {
+    outline: none;
+}
+
+.title-bar-button-container:hover {
+    background-color: rgba(255,255,255,0.2);
+}
+
+.window-border {
+    border-left: 1px solid rgba(74,74,74,1);
+    border-right: 1px solid rgba(74,74,74,1);
+}
+
+.bottom-window-border {
+    position: fixed;
+    border-bottom: 1px solid rgba(74,74,74,1);
+    width: 100%;
+    z-index: 3000;
+    bottom: 0;
+}
--- a/installer/win/Symphony-x64.aip
+++ b/installer/win/Symphony-x64.aip
@ -158,7 +158,7 @@
    <ROW File="VkLayer_object_tracker.dll" Component_="VkLayer_object_tracker.dll" FileName="VKLAYE~2.DLL|VkLayer_object_tracker.dll" Attributes="0" SourcePath="..\..\dist\win-unpacked\VkLayer_object_tracker.dll" SelfReg="false" NextFile="VkLayer_parameter_validation.dll"/>
    <ROW File="VkLayer_parameter_validation.dll" Component_="VkLayer_parameter_validation.dll" FileName="VKLAYE~3.DLL|VkLayer_parameter_validation.dll" Attributes="0" SourcePath="..\..\dist\win-unpacked\VkLayer_parameter_validation.dll" SelfReg="false" NextFile="VkLayer_threading.dll"/>
    <ROW File="VkLayer_threading.dll" Component_="VkLayer_threading.dll" FileName="VKLAYE~4.DLL|VkLayer_threading.dll" Attributes="0" SourcePath="..\..\dist\win-unpacked\VkLayer_threading.dll" SelfReg="false" NextFile="VkLayer_unique_objects.dll"/>
-    <ROW File="VkLayer_unique_objects.dll" Component_="VkLayer_unique_objects.dll" FileName="VKLAYE~5.DLL|VkLayer_unique_objects.dll" Attributes="0" SourcePath="..\..\dist\win-unpacked\VkLayer_unique_objects.dll" SelfReg="false"/>
+    <ROW File="VkLayer_unique_objects.dll" Component_="VkLayer_unique_objects.dll" FileName="VKLAYE~5.DLL|VkLayer_unique_objects.dll" Attributes="0" SourcePath="..\..\dist\win-unpacked\VkLayer_unique_objects.dll" SelfReg="false" NextFile="titleBarStyles.css"/>
    <ROW File="am.pak" Component_="am.pak" FileName="am.pak" Attributes="0" SourcePath="..\..\dist\win-unpacked\locales\am.pak" SelfReg="false" NextFile="ar.pak"/>
    <ROW File="app.asar" Component_="appupdate.yml" FileName="APP~1.ASA|app.asar" Attributes="0" SourcePath="..\..\dist\win-unpacked\resources\app.asar" SelfReg="false" NextFile="electron.asar"/>
    <ROW File="ar.pak" Component_="am.pak" FileName="ar.pak" Attributes="0" SourcePath="..\..\dist\win-unpacked\locales\ar.pak" SelfReg="false" NextFile="bg.pak"/>
@ -233,6 +233,7 @@
    <ROW File="tarwin.exe" Component_="tarwin.exe" FileName="tar-win.exe" Attributes="0" SourcePath="..\..\library\tar-win.exe" SelfReg="false" NextFile="ScreenSnippet.resources.dll" DigSign="true"/>
    <ROW File="te.pak" Component_="am.pak" FileName="te.pak" Attributes="0" SourcePath="..\..\dist\win-unpacked\locales\te.pak" SelfReg="false" NextFile="th.pak"/>
    <ROW File="th.pak" Component_="am.pak" FileName="th.pak" Attributes="0" SourcePath="..\..\dist\win-unpacked\locales\th.pak" SelfReg="false" NextFile="tr.pak"/>
+    <ROW File="titleBarStyles.css" Component_="Symphony.config" FileName="TITLEB~1.CSS|titleBarStyles.css" Attributes="0" SourcePath="..\..\dist\win-unpacked\config\titleBarStyles.css" SelfReg="false"/>
    <ROW File="tr.pak" Component_="am.pak" FileName="tr.pak" Attributes="0" SourcePath="..\..\dist\win-unpacked\locales\tr.pak" SelfReg="false" NextFile="uk.pak"/>
    <ROW File="tsconfig.json" Component_="npmignore" FileName="TSCONF~1.JSO|tsconfig.json" Attributes="0" SourcePath="..\..\dist\win-unpacked\resources\app.asar.unpacked\node_modules\spawn-rx\tsconfig.json" SelfReg="false" NextFile="tslint.json"/>
    <ROW File="tslint.json" Component_="npmignore" FileName="TSLINT~1.JSO|tslint.json" Attributes="0" SourcePath="..\..\dist\win-unpacked\resources\app.asar.unpacked\node_modules\spawn-rx\tslint.json" SelfReg="false" NextFile="Jobber.exe"/>
--- a/installer/win/Symphony-x86.aip
+++ b/installer/win/Symphony-x86.aip
@ -156,7 +156,7 @@
    <ROW File="VkLayer_object_tracker.dll" Component_="VkLayer_object_tracker.dll" FileName="VKLAYE~2.DLL|VkLayer_object_tracker.dll" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\VkLayer_object_tracker.dll" SelfReg="false" NextFile="VkLayer_parameter_validation.dll"/>
    <ROW File="VkLayer_parameter_validation.dll" Component_="VkLayer_parameter_validation.dll" FileName="VKLAYE~3.DLL|VkLayer_parameter_validation.dll" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\VkLayer_parameter_validation.dll" SelfReg="false" NextFile="VkLayer_threading.dll"/>
    <ROW File="VkLayer_threading.dll" Component_="VkLayer_threading.dll" FileName="VKLAYE~4.DLL|VkLayer_threading.dll" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\VkLayer_threading.dll" SelfReg="false" NextFile="VkLayer_unique_objects.dll"/>
-    <ROW File="VkLayer_unique_objects.dll" Component_="VkLayer_unique_objects.dll" FileName="VKLAYE~5.DLL|VkLayer_unique_objects.dll" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\VkLayer_unique_objects.dll" SelfReg="false"/>
+    <ROW File="VkLayer_unique_objects.dll" Component_="VkLayer_unique_objects.dll" FileName="VKLAYE~5.DLL|VkLayer_unique_objects.dll" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\VkLayer_unique_objects.dll" SelfReg="false" NextFile="titleBarStyles.css"/>
    <ROW File="am.pak" Component_="am.pak" FileName="am.pak" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\locales\am.pak" SelfReg="false" NextFile="ar.pak"/>
    <ROW File="app.asar" Component_="appupdate.yml" FileName="APP~1.ASA|app.asar" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\resources\app.asar" SelfReg="false" NextFile="cld.node"/>
    <ROW File="ar.pak" Component_="am.pak" FileName="ar.pak" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\locales\ar.pak" SelfReg="false" NextFile="bg.pak"/>
@ -231,6 +231,7 @@
    <ROW File="tarwin.exe" Component_="tarwin.exe" FileName="tar-win.exe" Attributes="0" SourcePath="..\..\library\tar-win.exe" SelfReg="false" NextFile="ScreenSnippet.exe" DigSign="true"/>
    <ROW File="te.pak" Component_="am.pak" FileName="te.pak" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\locales\te.pak" SelfReg="false" NextFile="th.pak"/>
    <ROW File="th.pak" Component_="am.pak" FileName="th.pak" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\locales\th.pak" SelfReg="false" NextFile="tr.pak"/>
+    <ROW File="titleBarStyles.css" Component_="Symphony.config" FileName="TITLEB~1.CSS|titleBarStyles.css" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\config\titleBarStyles.css" SelfReg="false"/>
    <ROW File="tr.pak" Component_="am.pak" FileName="tr.pak" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\locales\tr.pak" SelfReg="false" NextFile="uk.pak"/>
    <ROW File="tsconfig.json" Component_="npmignore" FileName="TSCONF~1.JSO|tsconfig.json" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\resources\app.asar.unpacked\node_modules\spawn-rx\tsconfig.json" SelfReg="false" NextFile="tslint.json"/>
    <ROW File="tslint.json" Component_="npmignore" FileName="TSLINT~1.JSO|tslint.json" Attributes="0" SourcePath="..\..\dist\win-ia32-unpacked\resources\app.asar.unpacked\node_modules\spawn-rx\tslint.json" SelfReg="false" NextFile="Jobber.exe"/>
--- a/js/windowMgr.js
+++ b/js/windowMgr.js
@ -44,6 +44,7 @@ let display;
 let isAutoReload = false;
 let devToolsEnabled = true;
 let isCustomTitleBarEnabled = true;
+let titleBarStyles;

 const KeyCodes = {
    Esc: 27,
@ -253,7 +254,22 @@ function doCreateMainWindow(initialUrl, initialBounds, isCustomTitleBar) {
        // initializes and applies styles required for snack bar
        mainWindow.webContents.insertCSS(fs.readFileSync(path.join(__dirname, '/snackBar/style.css'), 'utf8').toString());
        if (isCustomTitleBarEnabled) {
-            mainWindow.webContents.insertCSS(fs.readFileSync(path.join(__dirname, '/windowsTitleBar/style.css'), 'utf8').toString());
+            if (!titleBarStyles) {
+                let titleBarStylesPath;
+                let stylesFileName = path.join('config', 'titleBarStyles.css');
+                if (isDevEnv) {
+                    titleBarStylesPath = path.join(app.getAppPath(), stylesFileName);
+                } else {
+                    const execPath = path.dirname(app.getPath('exe'));
+                    titleBarStylesPath = path.join(execPath, stylesFileName);
+                }
+                if (fs.existsSync(titleBarStylesPath)) {
+                    titleBarStyles = fs.readFileSync(titleBarStylesPath, 'utf8').toString();
+                } else {
+                    titleBarStyles = fs.readFileSync(path.join(__dirname, '/windowsTitleBar/style.css'), 'utf8').toString();
+                }
+            }
+            mainWindow.webContents.insertCSS(titleBarStyles);
            // This is required to initiate Windows title bar only after insertCSS
            const titleBarStyle = getTitleBarStyle();
            mainWindow.webContents.send('initiate-windows-title-bar', titleBarStyle);
--- a/js/windowsTitleBar/contents.js
+++ b/js/windowsTitleBar/contents.js
@ -81,6 +81,7 @@ const titleBar = (`

        <p id="title-bar-title">Symphony</p>
    </div>
+    <div class="branding-logo" align="right" />
 </div>
 `);

--- a/js/windowsTitleBar/style.css
+++ b/js/windowsTitleBar/style.css
@ -20,7 +20,7 @@
    text-align: center;
    width: 40px;
    height: 32px;
-    background: none;
+    background: center;
    border: none;
    border-image: initial;
    display: inline-grid;
@ -61,7 +61,6 @@
    text-align: center;
    width: 45px;
    height: 32px;
-    background: rgba(74,74,74,1);
    margin: 0;
    box-sizing: border-box !important;
    cursor: default;
@ -72,7 +71,7 @@
    text-align: center;
    width: 45px;
    height: 32px;
-    background: none;
+    background: center;
    border: none;
    border-image: initial;
    display: inline-grid;
@ -82,7 +81,7 @@
 }

 .title-bar-button:hover {
-    background-color: rgba(51,51,51,1);
+    background-color: rgba(255,255,255,0.2);
 }

 .title-bar-button:focus {
@ -90,7 +89,7 @@
 }

 .title-bar-button-container:hover {
-    background-color: rgba(51,51,51,1);
+    background-color: rgba(255,255,255,0.2);
 }

 .window-border {
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    ],
    "extraFiles": [
      "config/Symphony.config",
+      "config/titleBarStyles.css",
      "library/libsymphonysearch.dylib",
      "library/cryptoLib.dylib",
      "library/lz4.exec"