Further work on overlay mechanism.

app/app.ejs

@@ -13,6 +13,8 @@
         #main {
             height: calc(100% - 22px);
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
+            will-change: filter;
+            transition: filter 0.5s ease;
         }
         #main[overlay] {
             filter: blur(3px) contrast(0.9) brightness(1.0);

app/assets/css/launcher.css

@@ -1258,4 +1258,71 @@ p {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Overlay View (app.ejs)                                                      *
+ *                                                                             *
+ ******************************************************************************/
+
+#overlayContainer {
+    position: absolute;
+    top: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: calc(100% - 22px);
+    background: rgba(0, 0, 0, 0.50);
+}
+
+#overlayContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 300px;
+    height: 35%;
+    box-sizing: border-box;
+    padding: 15px 0px;
+    /* background-color: #424242; */
+    text-align: center;
+}
+
+#overlayTitle {
+    font-family: 'Avenir Medium';
+    font-size: 20px;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+#overlayDesc {
+    font-family: 'Avenir Book';
+    font-size: 12px;
+    color: #fff;
+    font-weight: bold;
+}
+
+#overlayAcknowledge {
+    background: none;
+    border: 1px solid #ffffff;
+    color: white;
+    font-family: 'Avenir Medium';
+    font-weight: bold;
+    border-radius: 2px;
+    width: 75px;
+    cursor: pointer;
+    transition: 0.25s ease;
+}
+#overlayAcknowledge:hover,
+#overlayAcknowledge:focus {
+    box-shadow: 0px 0px 10px 0px #fff;
+    outline: none;
+}
+#overlayAcknowledge:active {
+    border-color: rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
 }

app/assets/js/actionbinder.js

@@ -89,8 +89,33 @@ document.addEventListener('readystatechange', function(){
     }
 }, false)
 
+/* Overlay Wrapper Functions */
+
+/**
+ * Toggle the visibility of the overlay.
+ * 
+ * @param {boolean} toggleState True to display, false to hide.
+ */
+function toggleOverlay(toggleState){
+    if(toggleState == null){
+        toggleState = !document.getElementById('main').hasAttribute('overlay')
+    }
+    if(toggleState){
+        document.getElementById('main').setAttribute('overlay', true)
+        $('#overlayContainer').fadeToggle(500)
+    } else {
+        document.getElementById('main').removeAttribute('overlay')
+        $('#overlayContainer').fadeToggle(500)
+    }
+}
+
 /* Launch Progress Wrapper Functions */
 
+/**
+ * Show/hide the loading area.
+ * 
+ * @param {boolean} loading True if the loading area should be shown, otherwise false.
+ */
 function toggleLaunchArea(loading){
     if(loading){
         launch_details.style.display = 'flex'
@@ -101,21 +126,42 @@ function toggleLaunchArea(loading){
     }
 }
 
+/**
+ * Set the details text of the loading area.
+ * 
+ * @param {string} details The new text for the loading details.
+ */
 function setLaunchDetails(details){
     launch_details_text.innerHTML = details
 }
 
+/**
+ * Set the value of the loading progress bar and display that value.
+ * 
+ * @param {number} value The progress value.
+ * @param {number} max The total size.
+ * @param {number|string} percent Optional. The percentage to display on the progress label.
+ */
 function setLaunchPercentage(value, max, percent = ((value/max)*100)){
     launch_progress.setAttribute('max', max)
     launch_progress.setAttribute('value', value)
     launch_progress_label.innerHTML = percent + '%'
 }
 
+/**
+ * Set the value of the OS progress bar and display that on the UI.
+ * 
+ * @param {number} value The progress value.
+ * @param {number} max The total download size.
+ * @param {number|string} percent Optional. The percentage to display on the progress label.
+ */
 function setDownloadPercentage(value, max, percent = ((value/max)*100)){
     remote.getCurrentWindow().setProgressBar(value/max)
     setLaunchPercentage(value, max, percent)
 }
 
+/* System (Java) Scan */
+
 let sysAEx
 let scanAt
 

app/overlay.ejs

@@ -1,66 +1,3 @@
-<style type="text/css">
-
-    #overlayContainer {
-        position: absolute;
-        top: 22px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: calc(100% - 22px);
-        background: rgba(0, 0, 0, 0.50);
-    }
-
-    #overlayContent {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        width: 300px;
-        height: 35%;
-        box-sizing: border-box;
-        padding: 15px 0px;
-        /* background-color: #424242; */
-        text-align: center;
-    }
-
-    #overlayTitle {
-        font-family: 'Avenir Medium';
-        font-size: 20px;
-        color: #fff;
-        font-weight: bold;
-        letter-spacing: 1px;
-    }
-
-    #overlayDesc {
-        font-family: 'Avenir Book';
-        font-size: 12px;
-        color: #fff;
-        font-weight: bold;
-    }
-
-    #overlayAcknowledge {
-        background: none;
-        border: 1px solid #ffffff;
-        color: white;
-        font-family: 'Avenir Medium';
-        font-weight: bold;
-        border-radius: 2px;
-        width: 75px;
-        cursor: pointer;
-        transition: 0.25s ease;
-    }
-    #overlayAcknowledge:hover,
-    #overlayAcknowledge:focus {
-        box-shadow: 0px 0px 10px 0px #fff;
-        outline: none;
-    }
-    #overlayAcknowledge:active {
-        border-color: rgba(255, 255, 255, 0.75);
-        color: rgba(255, 255, 255, 0.75);
-    }
-</style>
 <div id="overlayContainer" style="display: none;">
     <div id="overlayContent">
         <span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>

index.js

@@ -4,11 +4,16 @@ const url = require('url')
 const fs = require('fs')
 const ejse = require('ejs-electron')
 
+// Disable hardware acceleration.
+// https://electronjs.org/docs/tutorial/offscreen-rendering
+app.disableHardwareAcceleration()
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win
 
 function createWindow() {
+
     win = new BrowserWindow({
         width: 980,
         height: 552,