feat: you can now choose where to save the debug logs

debug log window now follows the app theme, logs are save as txt
winter0019 · Jun 20, 2022 · d3d0ac8 · d3d0ac8
1 parent 5b02d1e
commit d3d0ac8
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 111 deletions.
diff --git a/debug_log.html b/debug_log.html
@@ -15,6 +15,11 @@
             style-src 'self' 'unsafe-inline';"
     />
     <link href="dist/manifest.css" rel="stylesheet" type="text/css" />
+    <style>
+      body {
+        background-color: #000;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/stylesheets/_debugLog.scss b/stylesheets/_debugLog.scss
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
@@ -16,7 +16,6 @@
 
 // Components
 @import 'modal';
-@import 'debugLog';
 @import 'lightbox';
 @import 'emoji';
 @import 'mentions';

diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx
@@ -1,12 +1,45 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import {
+  SessionTheme,
+  switchHtmlToDarkTheme,
+  switchHtmlToLightTheme,
+} from '../state/ducks/SessionTheme';
 import { fetch } from '../util/logging';
+import { SessionButton } from './basic/SessionButton';
 
 const StyledContent = styled.div`
+  background-color: var(--color-modal-background);
+  color: var(--color-text);
+  font-family: var(--font-default);
+
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 20px;
   height: 100%;
+
+  .session-button {
+    margin: 1em auto 1em 0;
+    padding: 1em;
+    width: fit-content;
+  }
+
+  h1 {
+    color: var(--color-text);
+  }
+
+  textarea {
+    flex-grow: 1;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--margins-sm);
+    border: 2px solid var(--color-session-border);
+    resize: none;
+    min-height: 100px;
+
+    font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
+    font-size: 12px;
+  }
 `;
 
 const DebugLogTextArea = (props: { content: string }) => {
@@ -18,21 +51,16 @@ const DebugLogTextArea = (props: { content: string }) => {
 const DebugLogButtons = (props: { content: string }) => {
   return (
     <div className="buttons">
-      <button
-        className="grey submit"
-        onClick={e => {
-          e.preventDefault();
-
+      <SessionButton
+        text={window.i18n('saveLogToDesktop')}
+        onClick={() => {
           if (props.content.length <= 20) {
             // loading
             return;
           }
           (window as any).saveLog(props.content);
-          (window as any).closeDebugLog();
         }}
-      >
-        {window.i18n('saveLogToDesktop')}
-      </button>
+      />
     </div>
   );
 };
@@ -65,20 +93,30 @@ const DebugLogViewAndSave = () => {
 };
 
 export const DebugLogView = () => {
+  useEffect(() => {
+    if ((window as any).theme === 'dark') {
+      switchHtmlToDarkTheme();
+    } else {
+      switchHtmlToLightTheme();
+    }
+  }, []);
+
   return (
-    <StyledContent>
-      <div>
-        <button
-          className="x close"
-          aria-label="close debug log"
-          onClick={() => {
-            (window as any).closeDebugLog();
-          }}
-        />
-        <h1> {window.i18n('debugLog')} </h1>
-        <p> {window.i18n('debugLogExplanation')}</p>
-      </div>
-      <DebugLogViewAndSave />
-    </StyledContent>
+    <SessionTheme>
+      <StyledContent>
+        <div>
+          <button
+            className="x close"
+            aria-label="close debug log"
+            onClick={() => {
+              (window as any).closeDebugLog();
+            }}
+          />
+          <h1> {window.i18n('debugLog')} </h1>
+          <p> {window.i18n('debugLogExplanation')}</p>
+        </div>
+        <DebugLogViewAndSave />
+      </StyledContent>
+    </SessionTheme>
   );
 };
diff --git a/ts/mains/main_node.ts b/ts/mains/main_node.ts
@@ -3,6 +3,7 @@
 import {
   app,
   BrowserWindow,
+  dialog,
   ipcMain as ipc,
   Menu,
   protocol as electronProtocol,
@@ -645,6 +646,7 @@ async function showDebugLogWindow() {
     title: locale.messages.debugLog,
     autoHideMenuBar: true,
     backgroundColor: '#000',
+    shadow: true,
     show: false,
     modal: true,
     webPreferences: {
@@ -668,10 +670,36 @@ async function showDebugLogWindow() {
   });
 
   debugLogWindow.once('ready-to-show', () => {
+    debugLogWindow?.setBackgroundColor('#000');
     debugLogWindow?.show();
   });
 }
 
+async function saveDebugLog(_event: any, logText: any) {
+  const options: Electron.SaveDialogOptions = {
+    title: 'Save debug log',
+    defaultPath: path.join(app.getPath('desktop'), `session_debug_${Date.now()}.txt`),
+    properties: ['createDirectory'],
+  };
+
+  try {
+    const result = await dialog.showSaveDialog(options);
+    const outputPath = result.filePath;
+    console.info(`Trying to save logs to ${outputPath}`);
+    if (result === undefined || outputPath === undefined || outputPath === '') {
+      throw Error("User clicked Save button but didn't create a file");
+    }
+    fs.writeFile(outputPath, logText, err => {
+      if (err) {
+        throw Error(`${err}`);
+      }
+      console.info(`Saved log - ${outputPath}`);
+    });
+  } catch (err) {
+    console.error(`Error saving debug log`, err);
+  }
+};
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -1020,20 +1048,7 @@ ipc.on('close-debug-log', () => {
     debugLogWindow.close();
   }
 });
-ipc.on('save-debug-log', (_event, logText) => {
-  const osSpecificDesktopFolder = app.getPath('desktop');
-  console.info(`Trying to save logs to log Desktop ${osSpecificDesktopFolder}`);
-
-  const outputPath = path.join(osSpecificDesktopFolder, `session_debug_${Date.now()}.log`);
-  // tslint:disable: non-literal-fs-path
-  fs.writeFile(outputPath, logText, err => {
-    if (err) {
-      console.error(`Error saving debug log to ${outputPath}`);
-      return;
-    }
-    console.info(`Saved log - ${outputPath}`);
-  });
-});
+ipc.on('save-debug-log', saveDebugLog);
 
 // This should be called with an ipc sendSync
 ipc.on('get-media-permissions', event => {