x Fixed browser settings dialog (placeholder) so that it actually works and looks correct

chat/localize.ts

@@ -189,6 +189,11 @@ Current log location: {1}`,
     'settings.beta': 'Opt-in to test unstable prerelease updates',
     'settings.hwAcceleration': 'Enable hardware acceleration (requires restart)',
     'settings.bbCodeBar': 'Show BBCode formatting bar',
+    'settings.browserOption': 'Set command for opening clicked links',
+    'settings.browserOptionTitle': 'Browser Path',
+    'settings.browserOptionPath': 'Path to browser executable',
+    'settings.browserOptionArguments': 'Arguments to pass to executable',
+    'settings.browserOptionArgumentsHelp': 'Arguments are separated by spaces. Use %s to insert the URL.',
     'fixLogs.action': 'Fix corrupted logs',
     'fixLogs.text': `There are a few reason log files can become corrupted - log files from old versions with bugs that have since been fixed or incomplete file operations caused by computer crashes are the most common.
 If one of your log files is corrupted, you may get an "Unknown Type" error when you log in or when you open a specific tab. You may also experience other issues.

electron/BrowserOption.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="display: flex;flex-direction:column;height:100%" :class="getThemeClass()" @auxclick.prevent>
     <div v-html="styling"></div>
-    <div style="display:flex;align-items:stretch;border-bottom-width:1px" class="border-bottom" id="window-tabs">
-      <h4 style="padding:2px 0">F-Chat</h4>
+    <div style="display:flex;align-items:stretch;border-bottom-width:1px" class="border-bottom" id="window-browser-settings">
+      <h4 style="padding:2px 0">{{l('settings.browserOptionTitle')}}</h4>
       <div style="flex:1;display:flex;justify-content:flex-end;-webkit-app-region:drag" class="btn-group"
            id="windowButtons">
         <i class="far fa-window-minimize btn btn-light" @click.stop="minimize()"></i>
@@ -12,77 +12,106 @@
                 </span>
       </div>
     </div>
+    <div style="display:flex; flex-direction: column; height:100%; justify-content: center">
+      <div class="card bg-light" style="width:100%;margin:0 auto">
+        <div class="card-body">
+          <h4 class="card-title">Hello</h4>
+
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import {Component} from '@f-list/vue-ts';
+import {Component, Hook} from '@f-list/vue-ts';
 import * as remote from '@electron/remote';
 import Vue from 'vue';
 import l from '../chat/localize';
 import {GeneralSettings} from './common';
 import fs from "fs";
 import path from "path";
+import Modal from "../components/Modal.vue";
+import tabs from "../components/tabs";
+import modal from "../components/Modal.vue";
+import core from "../chat/core";
+import BBCodeParser from "../chat/bbcode";
+import logs from "../chat/Logs.vue";
+import chat from "../chat/ChatView.vue";
 
 const browserWindow = remote.getCurrentWindow();
-    @Component
-    export default class BrowserOption extends Vue {
-      settings!: GeneralSettings;
-      isMaximized = false;
-      l = l;
-      platform = process.platform;
-      hasCompletedUpgrades = false;
+@Component({
+  components: {chat, logs, modal, tabs, Modal}
+})
+export default class BrowserOption extends Vue {
+  settings!: GeneralSettings;
+  isMaximized = false;
+  l = l;
+  platform = process.platform;
+  hasCompletedUpgrades = false;
+  browserPath = '';
+  browserArgs = '';
 
-      get styling(): string {
-        try {
-          return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`;
-        } catch(e) {
-          if((<Error & {code: string}>e).code === 'ENOENT' && this.settings.theme !== 'default') {
-            this.settings.theme = 'default';
-            return this.styling;
-          }
-          throw e;
-        }
+  get styling(): string {
+    console.log("HELLO");
+    try {
+      return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`;
+    } catch (e) {
+      if ((<Error & { code: string }>e).code === 'ENOENT' && this.settings.theme !== 'default') {
+        this.settings.theme = 'default';
+        return this.styling;
       }
-
-      minimize(): void {
-        browserWindow.minimize();
-      }
-
-      maximize(): void {
-        if(browserWindow.isMaximized()) browserWindow.unmaximize();
-        else browserWindow.maximize();
-      }
-
-      close(): void {
-        browserWindow.close();
-      }
-
-      getThemeClass() {
-        // console.log('getThemeClassWindow', this.settings?.risingDisableWindowsHighContrast);
-
-        try {
-          // Hack!
-          if (process.platform === 'win32') {
-            if (this.settings?.risingDisableWindowsHighContrast) {
-              document.querySelector('html')?.classList.add('disableWindowsHighContrast');
-            } else {
-              document.querySelector('html')?.classList.remove('disableWindowsHighContrast');
-            }
-          }
-
-          return {
-            ['platform-' + this.platform]: true,
-            disableWindowsHighContrast: this.settings?.risingDisableWindowsHighContrast || false
-          };
-        } catch (err) {
-          return {
-            ['platform-' + this.platform]: true
-          };
-        }
-      }
-
+      throw e;
     }
+  }
+
+  minimize(): void {
+    browserWindow.minimize();
+  }
+
+  maximize(): void {
+    if (browserWindow.isMaximized()) browserWindow.unmaximize();
+    else browserWindow.maximize();
+  }
+
+  close(): void {
+    browserWindow.close();
+  }
+
+  getThemeClass() {
+    // console.log('getThemeClassWindow', this.settings?.risingDisableWindowsHighContrast);
+
+    try {
+      // Hack!
+      if (process.platform === 'win32') {
+        if (this.settings?.risingDisableWindowsHighContrast) {
+          document.querySelector('html')?.classList.add('disableWindowsHighContrast');
+        } else {
+          document.querySelector('html')?.classList.remove('disableWindowsHighContrast');
+        }
+      }
+
+      return {
+        ['platform-' + this.platform]: true,
+        disableWindowsHighContrast: this.settings?.risingDisableWindowsHighContrast || false
+      };
+    } catch (err) {
+      return {
+        ['platform-' + this.platform]: true
+      };
+    }
+  }
+
+  async load(): Promise<void> {
+    this.browserPath = this.settings.browserPath;
+    this.browserArgs = this.settings.browserArgs;
+  }
+
+  async submit(): Promise<void> {
+    this.settings.browserPath = this.browserPath;
+    this.settings.browserArgs = this.browserArgs;
+  }
+}
 </script>
 
 <style lang="scss">
@@ -91,23 +120,37 @@ const browserWindow = remote.getCurrentWindow();
     font-size: 14px;
   }
 
-  .platform-darwin {
-    #windowButtons .btn, #settings {
-      display: none;
+  #window-browser-settings {
+    user-select: none;
+    .btn {
+      border: 0;
+      border-radius: 0;
+      padding: 0 18px;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      -webkit-app-region: no-drag;
+      flex-grow: 0;
     }
 
-    #window-tabs {
-      h4 {
-        margin: 0 15px 0 77px;
-      }
+    .btn-default {
+      background: transparent;
+    }
 
-      .btn, li a {
-        padding-top: 6px;
-        padding-bottom: 6px;
-      }
+    h4 {
+      margin: 0 10px;
+      user-select: none;
+      cursor: default;
+      align-self: center;
+      -webkit-app-region: drag;
+    }
+
+    .fa {
+      line-height: inherit;
     }
   }
 
+
   .disableWindowsHighContrast, .disableWindowsHighContrast * {
     forced-color-adjust: none;
   }

electron/browser_option.html

@@ -7,7 +7,7 @@
     <link href="fa.css" rel="stylesheet">
 </head>
 <body>
-<div id="browser-option"></div>
+<div id="browserOption"></div>
 <script type="text/javascript" src="common.js"></script>
 <script type="text/javascript" src="browser_option.js"></script>
 </body>

electron/browser_option.ts

@@ -17,9 +17,8 @@ log.transports.file.maxSize = 5 * 1024 * 1024;
 
 log.info('init.browser_option.vue');
 
-//tslint:disable-next-line:no-unused-expression
-export default new BrowserOption({
-    el: '#browser-option',
+new BrowserOption({
+    el: '#browserOption',
     data: {settings}
 });
 

electron/common.ts

@@ -31,7 +31,8 @@ export class GeneralSettings {
     risingCacheExpiryDays = 30;
     risingSystemLogLevel: log.LevelOption = 'info';
     risingDisableWindowsHighContrast =  false;
-    browserCommand = '';
+    browserPath = '';
+    browserArgs = '';
 }
 
 // //tslint:disable

electron/main.ts

@@ -284,11 +284,12 @@ function showPatchNotes(): void {
     electron.shell.openExternal('https://github.com/hearmeneigh/fchat-rising/blob/master/CHANGELOG.md');
 }
 
-function openBrowserSettings(): void {
+function openBrowserSettings(): electron.BrowserWindow | undefined {
     const windowProperties: electron.BrowserWindowConstructorOptions = {
         center: true,
         show: false,
         icon: process.platform === 'win32' ? winIcon : pngIcon,
+        frame: false,
         webPreferences: {
             webviewTag: true, nodeIntegration: true, nodeIntegrationInWorker: true, spellcheck: true,
             enableRemoteModule: true, contextIsolation: false, partition: 'persist:fchat'
@@ -296,11 +297,16 @@ function openBrowserSettings(): void {
     };
 
     const browserWindow = new electron.BrowserWindow(windowProperties);
-    browserWindow.removeMenu();
-    browserWindow.loadFile(path.join(__dirname, 'browser_option.html')).then(r => {
-        console.log(r);
+    remoteMain.enable(browserWindow.webContents);
+    browserWindow.loadFile(path.join(__dirname, 'browser_option.html'), {
+        query: { settings: JSON.stringify(settings), import: shouldImportSettings ? 'true' : '' }
+    });
+
+    browserWindow.once('ready-to-show', () => {
         browserWindow.show();
     });
+
+    return browserWindow;
 }
 
 
@@ -550,7 +556,7 @@ function onReady(): void {
                             }
                         },
                         {
-                            label: 'Set command for opening clicked links',
+                            label: l('settings.browserOption'),
                             click: () => {
                                 openBrowserSettings();
                             }