Merge pull request #2371 from yougotwill/debug_log_window_updates

Debug Log Window updates
3 years ago · e8ddeafa3c
parent 5b02d1e70e dfb2c3e797
commit e8ddeafa3c
6 changed files with 100 additions and 114 deletions
--- 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>
--- a/stylesheets/_debugLog.scss
+++ b/stylesheets/_debugLog.scss
@ -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;
-    }
-  }
-}
--- 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;
+    }
  }
 }

--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@ -16,7 +16,6 @@

 // Components
@import 'modal';
-@import 'debugLog';
@import 'lightbox';
@import 'emoji';
@import 'mentions';
--- 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>
  );
 };
--- 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,37 @@ 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");
+    }
+    // tslint:disable: non-literal-fs-path
+    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 +1049,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 => {