From d173e5863ed8fed93f40c38fc79fa3bffad4b142 Mon Sep 17 00:00:00 2001
From: Greyhoof <132987288+greyhoof@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:29:37 +0200
Subject: [PATCH] x Fixed browser settings dialog (placeholder) so that it
 actually works and looks correct

---
 chat/localize.ts             |   5 +
 electron/BrowserOption.vue   | 181 ++++++++++++++++++++++-------------
 electron/browser_option.html |   2 +-
 electron/browser_option.ts   |   5 +-
 electron/common.ts           |   3 +-
 electron/main.ts             |  16 +++-
 6 files changed, 133 insertions(+), 79 deletions(-)

diff --git a/chat/localize.ts b/chat/localize.ts
index 36e998e..c7a1e9b 100644
--- a/chat/localize.ts
+++ b/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.
diff --git a/electron/BrowserOption.vue b/electron/BrowserOption.vue
index 5ff127a..c4d4a7f 100644
--- a/electron/BrowserOption.vue
+++ b/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;
   }
diff --git a/electron/browser_option.html b/electron/browser_option.html
index a34ba1c..954e08b 100644
--- a/electron/browser_option.html
+++ b/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>
diff --git a/electron/browser_option.ts b/electron/browser_option.ts
index 451e173..e8e5f80 100644
--- a/electron/browser_option.ts
+++ b/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}
 });
 
diff --git a/electron/common.ts b/electron/common.ts
index 198fd03..3c09c84 100644
--- a/electron/common.ts
+++ b/electron/common.ts
@@ -31,7 +31,8 @@ export class GeneralSettings {
     risingCacheExpiryDays = 30;
     risingSystemLogLevel: log.LevelOption = 'info';
     risingDisableWindowsHighContrast =  false;
-    browserCommand = '';
+    browserPath = '';
+    browserArgs = '';
 }
 
 // //tslint:disable
diff --git a/electron/main.ts b/electron/main.ts
index bade67d..4dea7d1 100644
--- a/electron/main.ts
+++ b/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();
                             }