From d3d0ac80a083642eae3f8b39084a1362ce7f70bb Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 20 Jun 2022 14:51:52 +1000 Subject: [PATCH 1/2] feat: you can now choose where to save the debug logs debug log window now follows the app theme, logs are save as txt --- debug_log.html | 5 ++ stylesheets/_debugLog.scss | 72 ---------------------------- stylesheets/manifest.scss | 1 - ts/components/DebugLogView.tsx | 86 ++++++++++++++++++++++++---------- ts/mains/main_node.ts | 43 +++++++++++------ 5 files changed, 96 insertions(+), 111 deletions(-) delete mode 100644 stylesheets/_debugLog.scss diff --git a/debug_log.html b/debug_log.html index 922ae3699..cb0010d6a 100644 --- a/debug_log.html +++ b/debug_log.html @@ -15,6 +15,11 @@ style-src 'self' 'unsafe-inline';" /> +
diff --git a/stylesheets/_debugLog.scss b/stylesheets/_debugLog.scss deleted file mode 100644 index c7972b4e2..000000000 --- a/stylesheets/_debugLog.scss +++ /dev/null @@ -1,72 +0,0 @@ -.debug-log { - &.modal { - padding: 50px; - - .content { - margin: 0; - max-width: 100%; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - - textarea { - flex-grow: 1; - width: 100%; - resize: none; - min-height: 100px; - - font-family: Monaco, Consolas, 'Courier New', Courier, monospace; - font-size: 12px; - } - } - } - - .result { - $link-max-width: 400px; - $open-width: 72px; - $open-height: 36px; - text-align: center; - - $group-max-width: $link-max-width + $open-width; - .input-group { - display: inline-block; - width: 100%; - max-width: $group-max-width; - } - - $open-pad-x: calc(($open-width - $button-height - 2px) / 2); - $open-pad-y: calc(($open-height - $button-height - 2px) / 2); - - .open { - float: left; - display: inline-block; - width: $open-width; - height: $open-height; - padding: $open-pad-y $open-pad-x; - cursor: pointer; - border: solid 1px #ccc; - border-radius: 0 $border-radius $border-radius 0; - background: $grey_l; - &:before { - content: ''; - display: block; - width: $button-height; - height: $button-height; - @include header-icon-black('../images/open_link.svg'); - } - } - - .link { - border-radius: $border-radius 0 0 $border-radius; - float: left; - width: calc(100% - #{$open-width}); - max-width: $link-max-width; - height: $open-height; - padding: 0 10px; - outline-offset: -4px; - border: solid 1px #ccc; - border-right: none; - } - } -} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 2810cee1c..7e7a18e60 100644 --- 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 index 5c31a6102..15a82a02f 100644 --- 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 (
- + />
); }; @@ -65,20 +93,30 @@ const DebugLogViewAndSave = () => { }; export const DebugLogView = () => { + useEffect(() => { + if ((window as any).theme === 'dark') { + switchHtmlToDarkTheme(); + } else { + switchHtmlToLightTheme(); + } + }, []); + return ( - -
-
- - + + +
+
+ + + ); }; diff --git a/ts/mains/main_node.ts b/ts/mains/main_node.ts index 35ca69da5..ba9533937 100644 --- 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 => { From dfb2c3e7977a77fde27936572b56b0912e2e685a Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 20 Jun 2022 15:13:31 +1000 Subject: [PATCH 2/2] fix: pass yarn ready tests --- stylesheets/_session.scss | 6 +++--- ts/mains/main_node.ts | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4d9a23d5a..616af58e1 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -39,9 +39,9 @@ textarea { input, textarea { user-select: text; - a { - word-break: break-all; - } + a { + word-break: break-all; + } } } diff --git a/ts/mains/main_node.ts b/ts/mains/main_node.ts index ba9533937..0c486ad00 100644 --- a/ts/mains/main_node.ts +++ b/ts/mains/main_node.ts @@ -689,6 +689,7 @@ async function saveDebugLog(_event: any, logText: any) { if (result === undefined || outputPath === undefined || outputPath === '') { throw Error("User clicked Save button but didn't create a file"); } + // tslint:disable: non-literal-fs-path fs.writeFile(outputPath, logText, err => { if (err) { throw Error(`${err}`); @@ -696,9 +697,9 @@ async function saveDebugLog(_event: any, logText: any) { console.info(`Saved log - ${outputPath}`); }); } catch (err) { - console.error(`Error saving debug log`, 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.