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 => {