[Distribution] Addition of console window

console.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8"/>
+    <title>Console Logs</title>
+
+    <style>
+    /*   #log-container { overflow: auto; } */
+
+        .log-warn { color: orange }
+        .log-error { color: red }
+        .log-info { color: skyblue }
+        .log-log { color: silver }
+
+        .log-warn, .log-error { font-weight: bold; }
+    </style>
+</head>
+
+<body>
+    <div id="log-container">
+        <pre id="log"></pre>
+    </div>
+
+    <script>
+        window.onload = () => {
+            window.api.receive('fromMain', (data) => {
+                //const consoleLine = document.createElement('span')
+                //const consoleLineText = document.createTextNode(data)
+                //consoleLine.appendChild(consoleLineText)
+                if(data.includes('[ERROR]')) {
+                    //const consoleLine = document.createElement('span')
+                    document.getElementById('log').insertAdjacentHTML('beforeend', "<span class=\"log-error\">" + data + "</span><br>");
+                }
+                if(data.includes('[WARN]')) {
+                    //consoleLineText.style.cssText = "color: orange; font-weight: bold;"
+                    document.getElementById('log').insertAdjacentHTML('beforeend',"<span class=\"log-warn\">" + data + "</span><br>");
+                }
+            document.getElementById('log').insertAdjacentHTML('beforeend',"<span class=\"log-info\">" + data + "</span><br>");
+            //document.getElementById('log').insertAdjacentHTML('beforeend', consoleLineText);
+        })
+        window.api.send("toMain", "ImAlive!")
+        }
+    </script>
+
+    <!-- <script>
+        rewireLoggingToElement(
+        () => document.getElementById("log"),
+        () => document.getElementById("log-container"), true);
+
+    function rewireLoggingToElement(eleLocator, eleOverflowLocator, autoScroll) {
+        fixLoggingFunc('log');
+        fixLoggingFunc('debug');
+        fixLoggingFunc('warn');
+        fixLoggingFunc('error');
+        fixLoggingFunc('info');
+
+        function fixLoggingFunc(name) {
+            console['old' + name] = console[name];
+            console[name] = function(...arguments) {
+                //const output = produceOutput(name, arguments);
+                output = window.api.receive('fromMain', (message, arguments) => {
+                    produceOutput(message, arguments)
+                })
+                const eleLog = eleLocator();
+
+                if (autoScroll) {
+                    const eleContainerLog = eleOverflowLocator();
+                    const isScrolledToBottom = eleContainerLog.scrollHeight - eleContainerLog.clientHeight <= eleContainerLog.scrollTop + 1;
+                    eleLog.innerHTML += output + "<br>";
+                    if (isScrolledToBottom) {
+                        eleContainerLog.scrollTop = eleContainerLog.scrollHeight - eleContainerLog.clientHeight;
+                    }
+                } else {
+                    eleLog.innerHTML += output + "<br>";
+                }
+
+                console['old' + name].apply(undefined, arguments);
+            };
+        }
+
+        function produceOutput(name, args) {
+            return args.reduce((output, arg) => {
+                return output +
+                    "<span class=\"log-" + (typeof arg) + " log-" + name + "\">" +
+                        (typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) +
+                    "</span>&nbsp;";
+            }, '');
+        }
+    }
+
+
+    /* setInterval(() => {
+    const method = (['log', 'debug', 'warn', 'error', 'info'][Math.floor(Math.random() * 5)]);
+    console[method](method, 'logging something...');
+    }, 200); */
+    </script> -->
+</body>
+</html>

electron-wrapper.js

@@ -1,9 +1,10 @@
-const {app, Menu, BrowserWindow} = require('electron')
+const {app, Menu, BrowserWindow, ipcMain} = require('electron')
 
 const path = require('path')
 const fs = require('fs')
 // To check for update on Github repo
 const {autoUpdater} = require("electron-updater")
+const { windowsStore } = require('process')
 
 // Enable non contribution mode (test)
 process.env.SA_MODE = 'gitDisable'
@@ -13,7 +14,7 @@ process.env.DATA_PATH = app.getPath('documents')
 const WINDOW_WIDTH = null
 const WINDOW_HEIGHT = null
 
-var w
+let mainWindow, consoleWindow, platform
 
 var app_ready = false
 var server_ready = false
@@ -22,42 +23,100 @@ const port = 34248 // Default HTTP port
 
 run()
 
+//var platform = null
+
 function run() {
   const { fork } = require('child_process')
-  const platform = fork(path.join(__dirname, '/PlatformRoot.js'), ["noBrowser"], {stdio: ['pipe', 'pipe', 'pipe', 'ipc'], env: process.env})
+  platform = fork(path.join(__dirname, '/PlatformRoot.js'), ["noBrowser"], {stdio: ['pipe', 'pipe', 'pipe', 'ipc'], env: process.env})
-  platform.on('message', message => {
+
-    if(message == "Running") {
+  //var consoleOutput = ""
-      open()
+
-    }
+  platform.on('message', _ => {
+    open()
   })
 }
 
+ipcMain.on("toMain", (event, args) => {
+  platform.stdout.setEncoding('utf8')
+  platform.stdout.on('data', (data) => {
+    //data = data.toString()
+    //consoleOutput += data
+    consoleWindow.webContents.send("fromMain", data);
+  })
+})
+
+
 function open () {
   let bw_options = {
     width: WINDOW_WIDTH ? WINDOW_WIDTH : 1280,
     height: WINDOW_HEIGHT ? WINDOW_HEIGHT : 768,
-    resizable: true
+    resizable: true,
+    webPreferences: {
+      nodeIntegration: false, // is default value after Electron v5
+      contextIsolation: true, // protect against prototype pollution
+      enableRemoteModule: false, // turn off remote
+    }
   }
 
-  w = new BrowserWindow(
+  mainWindow = new BrowserWindow(
     bw_options
   )
 
-  w.setResizable(true)
+  //mainWindow.setResizable(true)
   
-  w.loadURL("http://localhost:" + port)
+  mainWindow.loadURL("http://localhost:" + port)
 
   // w.webContents.openDevTools()
 
-  w.on('closed', function () {
+  mainWindow.on('closed', function () {
-    w = null
+    mainWindow = null
+  })
+}
+
+function openConsoleWindow() {
+  createConsoleMenus()
+  if(consoleWindow) {
+    consoleWindow.focus()
+    return
+  }
+
+  newWindow = 
+  consoleWindow = new BrowserWindow({
+    resizable: true,
+    title: 'Platform Logs',
+    minimizable: false,
+    fullscreenable: false,
+    width: 1024,
+    webPreferences: {
+      devTools: true,
+      nodeIntegration: false, // is default value after Electron v5
+      contextIsolation: true, // protect against prototype pollution
+      enableRemoteModule: false, // turn off remote
+      preload: path.join(__dirname, "preload.js") // use a preload script
+    }
+  })
+
+  consoleWindow.setBackgroundColor('#000000')
+  consoleWindow.loadFile('./console.html')
+
+  /* consoleWindow.on('ready'), _ => {
+    platform.stdout.setEncoding('utf8')
+    platform.stdout.on('data', (data) => {
+      //data = data.toString()
+      //consoleOutput += data
+      consoleWindow.webContents.send("fromMain", data);
+    })
+  } */
+
+  consoleWindow.on('closed', function() {
+    consoleWindow = null
   })
 }
 
 app.on('ready', function () {
   app_ready = true
   autoUpdater.checkForUpdatesAndNotify();
-  create_menus()
+  createMainMenus()
   if (server_ready) open()
 })
 
@@ -69,7 +128,7 @@ app.on('activate', function () {
   if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
 
-function create_menus () {
+function createMainMenus () {
   const template = [
     {
       label: 'File',
@@ -88,7 +147,6 @@ function create_menus () {
         {role: 'cut'},
         {role: 'copy'},
         {role: 'paste'},
-        {role: 'pasteandmatchstyle'},
         {role: 'delete'},
         {role: 'selectall'}
       ]
@@ -115,6 +173,55 @@ function create_menus () {
         {type: 'separator'},
         {role: 'togglefullscreen'}
       ]
+    },
+    {
+      label: 'Logs',
+      click () {
+        openConsoleWindow()
+      }
+    }
+  ]
+
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+}
+
+function createConsoleMenus () {
+  const template = [
+    {
+      label: 'File',
+      submenu: [
+        {
+          role: 'quit'
+        }
+      ]
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        {role: 'undo'},
+        {role: 'redo'},
+        {type: 'separator'},
+        {role: 'cut'},
+        {role: 'copy'},
+        {role: 'paste'},
+        {role: 'delete'},
+        {role: 'selectall'}
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {role: 'reload'},
+        {role: 'forcereload'},
+        {role: 'toggledevtools'},
+        {type: 'separator'},
+        {role: 'resetzoom'},
+        {role: 'zoomin'},
+        {role: 'zoomout'},
+        {type: 'separator'},
+        {role: 'togglefullscreen'}
+      ]
     }
   ]
 

preload.js

@@ -0,0 +1,25 @@
+const {
+    contextBridge,
+    ipcRenderer
+} = require("electron");
+
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld(
+    "api", {
+        send: (channel, data) => {
+            // whitelist channels
+            let validChannels = ["toMain"];
+            if (validChannels.includes(channel)) {
+                ipcRenderer.send(channel, data);
+            }
+        },
+        receive: (channel, func) => {
+            let validChannels = ["fromMain"];
+            if (validChannels.includes(channel)) {
+                // Deliberately strip event as it includes `sender` 
+                ipcRenderer.on(channel, (event, ...args) => func(...args));
+            }
+        }
+    }
+);