feat: ELECTRON-1462 (Combine more information into about app window) (#777)

* ELECTRON-1462 - Merge more info window in to about app window

* ELECTRON-1462 - Adjust window size

* ELECTRON-1462 - Add line space

* ELECTRON-1462 - Resize for windows

* ELECTRON-1462 - Add translation for swift search

* ELECTRON-1462 - Adjust width for Windows OS

* ELECTRON-1462 - Add about app snapshots file

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -3,26 +3,169 @@
 exports[`about app should render correctly 1`] = `
 <div
   className="AboutApp"
+  lang="en-US"
 >
-  <img
-    alt="Symphony"
-    className="AboutApp-logo"
-    src="../renderer/assets/symphony-logo.png"
-  />
-  <span
-    className="AboutApp-name"
+  <div
+    className="AboutApp-header-container"
   >
-    Symphony
-  </span>
-  <span
-    className="AboutApp-versionText"
+    <div
+      className="AboutApp-image-container"
+    >
+      <img
+        alt="Symphony Logo"
+        className="AboutApp-logo"
+        src="../renderer/assets/symphony-logo.png"
+      />
+    </div>
+    <div
+      className="AboutApp-header-content"
+    >
+      <h1
+        className="AboutApp-name"
+      >
+        Symphony
+      </h1>
+      <p
+        className="AboutApp-copyrightText"
+      >
+        © 2019 Symphony
+      </p>
+    </div>
+  </div>
+  <hr />
+  <div
+    className="AboutApp-main-container"
   >
-    Version 0 ()
-  </span>
-  <span
-    className="AboutApp-copyrightText"
-  >
-    Copyright © 2019 Symphony
-  </span>
+    <section>
+      <h4>
+        Symphony
+      </h4>
+      <ul
+        className="AboutApp-symphony-section"
+      >
+        <li>
+          <b>
+            SBE:
+          </b>
+           
+          N/A (N/A)
+        </li>
+        <li>
+          <b>
+            SDA:
+          </b>
+           
+          N/A (N/A)
+        </li>
+      </ul>
+    </section>
+    <section>
+      <h4>
+        Electron
+      </h4>
+      <ul
+        className="AboutApp-electron-section"
+      >
+        <li>
+          <b>
+            Electron:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            Chrome:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            V8:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            Node:
+          </b>
+           
+          N/A
+        </li>
+      </ul>
+    </section>
+    <section>
+      <h4>
+        Others
+      </h4>
+      <ul
+        className="AboutApp-others-section"
+      >
+        <li>
+          <b>
+            openssl:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            zlib:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            uv:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            ares:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            http_parser:
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            Swift Search
+            :
+          </b>
+           
+          N/A
+        </li>
+        <li>
+          <b>
+            Swift Search API
+            :
+          </b>
+           
+          N/A
+        </li>
+      </ul>
+    </section>
+  </div>
+  <hr />
+  <div>
+    <button
+      className="AboutApp-copy-button"
+      onClick={[Function]}
+      title="Copy all the version information in this page"
+    >
+      Copy
+    </button>
+  </div>
 </div>
 `;

spec/__snapshots__/moreInfo.spec.ts.snap

@@ -1,158 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`more info should render correctly 1`] = `
-<div
-  className="MoreInfo"
->
-  <span>
-    <b>
-      Version Information
-    </b>
-  </span>
-  <div
-    className="content"
-  >
-    <h4>
-      Symphony
-    </h4>
-    <table>
-      <tbody>
-        <tr>
-          <th>
-            Pod Version
-          </th>
-          <th>
-            SDA Version
-          </th>
-        </tr>
-        <tr>
-          <td>
-            N/A (N/A)
-          </td>
-          <td>
-            N/A (N/A)
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div
-    className="content"
-  >
-    <h4>
-      Electron
-    </h4>
-    <span
-      className="MoreInfo-electron"
-    >
-      N/A
-    </span>
-  </div>
-  <div
-    className="content"
-  >
-    <h4>
-      v8 
-      related
-    </h4>
-    <table>
-      <tbody>
-        <tr>
-          <th>
-            Chrome
-          </th>
-          <th>
-            v8
-          </th>
-          <th>
-            Node
-          </th>
-        </tr>
-        <tr>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div
-    className="content"
-  >
-    <h4>
-      Others
-    </h4>
-    <table>
-      <tbody>
-        <tr>
-          <th>
-            openssl
-          </th>
-          <th>
-            zlib
-          </th>
-          <th>
-            uv
-          </th>
-          <th>
-            ares
-          </th>
-          <th>
-            http_parser
-          </th>
-        </tr>
-        <tr>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div
-    className="content"
-  >
-    <h4>
-      Swift Search
-    </h4>
-    <table>
-      <tbody>
-        <tr>
-          <th>
-            Swift Search Version
-          </th>
-          <th>
-            API Version
-          </th>
-        </tr>
-        <tr>
-          <td>
-            N/A
-          </td>
-          <td>
-            N/A
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;

spec/aboutApp.spec.ts

@@ -5,7 +5,24 @@ import { ipcRenderer } from './__mocks__/electron';
 
 describe('about app', () => {
     const aboutAppDataLabel = 'about-app-data';
-    const aboutDataMock = { buildNumber: '4.x.x', clientVersion: '1', version: 'x.x.x' };
+    const aboutDataMock = {
+        buildNumber: '4.x.x',
+        clientVersion: '1',
+        version: 'x.x.x',
+        sdaVersion: '3.8.0',
+        sdaBuildNumber: '0',
+        electronVersion: '3.1.11',
+        chromeVersion: '66.789',
+        v8Version: '6.7.8',
+        nodeVersion: '10.12',
+        openSslVersion: '1.2.3',
+        zlibVersion: '4.5.6',
+        uvVersion: '7.8',
+        aresVersion: '9.10',
+        httpParserVersion: '11.12',
+        swiftSearchVersion: '1.55.3-beta.1',
+        swiftSerchSupportedVersion: '1.55.3',
+    };
     const onLabelEvent = 'on';
     const removeListenerLabelEvent = 'removeListener';
 

spec/appMenu.spec.ts

@@ -3,7 +3,6 @@ import { autoLaunchInstance } from '../src/app/auto-launch-controller';
 import { config } from '../src/app/config-handler';
 import { exportCrashDumps, exportLogs } from '../src/app/reports-handler';
 import { updateAlwaysOnTop } from '../src/app/window-actions';
-import { windowHandler } from '../src/app/window-handler';
 import * as envMock from '../src/common/env';
 import { logger } from '../src/common/logger';
 import { dialog, session, shell } from './__mocks__/electron';
@@ -337,13 +336,6 @@ describe('app menu', () => {
                     expect(spy).not.toBeCalledWith(null, expectedValue);
                 });
             });
-            it('should call `createMoreInfoWindow` when click in `More Information` menu', () => {
-                const spyFn = 'createMoreInfoWindow';
-                const spy = jest.spyOn(windowHandler, spyFn);
-                const menuItem = findHelpTroubleshootingMenuItem('More Information');
-                menuItem.click();
-                expect(spy).toBeCalled();
-            });
         });
     });
 });

spec/moreInfo.spec.ts

@@ -1,54 +0,0 @@
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import MoreInfo from '../src/renderer/components/more-info';
-import { ipcRenderer } from './__mocks__/electron';
-
-describe('more info', () => {
-    const moreInfoDataLabel = 'more-info-data';
-    const moreInfoDataMock = {
-        clientVersion: '1.55.2',
-        buildNumber: '12333',
-        sdaVersion: '3.8.0',
-        sdaBuildNumber: '0',
-        electronVersion: '3.1.11',
-        chromeVersion: '66.789',
-        v8Version: '6.7.8',
-        nodeVersion: '10.12',
-        openSslVersion: '1.2.3',
-        zlibVersion: '4.5.6',
-        uvVersion: '7.8',
-        aresVersion: '9.10',
-        httpParserVersion: '11.12',
-        swiftSearchVersion: '1.55.3-beta.1',
-        swiftSerchSupportedVersion: '1.55.3',
-    };
-    const onLabelEvent = 'on';
-    const removeListenerLabelEvent = 'removeListener';
-
-    it('should render correctly', () => {
-        const wrapper = shallow(React.createElement(MoreInfo));
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should call `more-info-data` event when component is mounted', () => {
-        const spy = jest.spyOn(ipcRenderer, onLabelEvent);
-        shallow(React.createElement(MoreInfo));
-        expect(spy).toBeCalledWith(moreInfoDataLabel, expect.any(Function));
-    });
-
-    it('should remove listener `more-info-data` when component is unmounted', () => {
-        const spyMount = jest.spyOn(ipcRenderer, onLabelEvent);
-        const spyUnmount = jest.spyOn(ipcRenderer, removeListenerLabelEvent);
-        const wrapper = shallow(React.createElement(MoreInfo));
-        expect(spyMount).toBeCalledWith(moreInfoDataLabel, expect.any(Function));
-        wrapper.unmount();
-        expect(spyUnmount).toBeCalledWith(moreInfoDataLabel, expect.any(Function));
-    });
-
-    it('should call `updateState` when component is mounted', () => {
-        const spy = jest.spyOn(MoreInfo.prototype, 'setState');
-        shallow(React.createElement(MoreInfo));
-        ipcRenderer.send('more-info-data', moreInfoDataMock);
-        expect(spy).toBeCalledWith(moreInfoDataMock);
-    });
-});

src/app/app-menu.ts

@@ -177,7 +177,13 @@ export class AppMenu {
             id: menuSections.about,
             label: app.getName(),
             submenu: [
-                { label: i18n.t('About Symphony')(), role: 'about' },
+                {
+                    label: i18n.t('About Symphony')(),
+                    click(_menuItem, focusedWindow) {
+                        const windowName = focusedWindow ? (focusedWindow as ICustomBrowserWindow).winName : '';
+                        windowHandler.createAboutAppWindow(windowName);
+                    },
+                },
                 this.buildSeparator(),
                 { label: i18n.t('Services')(), role: 'services' },
                 this.buildSeparator(),
@@ -413,9 +419,6 @@ export class AppMenu {
                                 return;
                             }
                         },
-                    }, {
-                        click: () => windowHandler.createMoreInfoWindow(),
-                        label: i18n.t('More Information')(),
                     } ],
                 }, {
                     label: i18n.t('About Symphony')(),

src/app/window-handler.ts

@@ -82,7 +82,6 @@ export class WindowHandler {
     private loadFailError: string | undefined;
     private mainWindow: ICustomBrowserWindow | null = null;
     private aboutAppWindow: Electron.BrowserWindow | null = null;
-    private moreInfoWindow: Electron.BrowserWindow | null = null;
     private screenPickerWindow: Electron.BrowserWindow | null = null;
     private screenSharingIndicatorWindow: Electron.BrowserWindow | null = null;
     private basicAuthWindow: Electron.BrowserWindow | null = null;
@@ -415,7 +414,11 @@ export class WindowHandler {
         });
 
         const opts: BrowserWindowConstructorOptions = this.getWindowOpts({
-            modal: true,
+            width: 420,
+            height: isWindowsOS ? 725 : 685,
+            modal: false,
+            alwaysOnTop: isMac,
+            resizable: true,
         }, {
             devTools: false,
         });
@@ -424,7 +427,7 @@ export class WindowHandler {
             opts.alwaysOnTop = true;
         }
 
-        if (selectedParentWindow) {
+        if (isWindowsOS && selectedParentWindow) {
             opts.parent = selectedParentWindow;
         }
 
@@ -437,6 +440,7 @@ export class WindowHandler {
                 buildNumber: versionHandler.versionInfo.buildNumber,
                 clientVersion: versionHandler.versionInfo.clientVersion,
                 versionLocalised,
+                ...versionHandler.versionInfo,
             };
             if (this.aboutAppWindow && windowExists(this.aboutAppWindow)) {
                 this.aboutAppWindow.webContents.send('about-app-data', aboutInfo);
@@ -444,36 +448,6 @@ export class WindowHandler {
         });
     }
 
-    /**
-     * Creates a more info window
-     */
-    public createMoreInfoWindow(): void {
-        if (this.moreInfoWindow && windowExists(this.moreInfoWindow)) {
-            if (this.moreInfoWindow.isMinimized()) {
-                this.moreInfoWindow.restore();
-            }
-            this.moreInfoWindow.focus();
-            return;
-        }
-
-        const opts: BrowserWindowConstructorOptions = this.getWindowOpts({
-            width: 550,
-            height: 500,
-        }, {
-            devTools: false,
-        });
-        if (this.mainWindow && windowExists(this.mainWindow) && this.mainWindow.isAlwaysOnTop()) {
-            opts.alwaysOnTop = true;
-        }
-
-        this.moreInfoWindow = createComponentWindow('more-info', opts);
-        this.moreInfoWindow.webContents.once('did-finish-load', async () => {
-            if (this.moreInfoWindow && windowExists(this.moreInfoWindow)) {
-                this.moreInfoWindow.webContents.send('more-info-data', versionHandler.versionInfo);
-            }
-        });
-    }
-
     /**
      * Creates a screen picker window
      *

src/locale/en-US.json

@@ -2,7 +2,12 @@
   "About Symphony": "About Symphony",
   "AboutSymphony": {
     "About Symphony": "About Symphony",
-    "Version": "Version"
+    "Copy": "Copy",
+    "Copy all the version information in this page": "Copy all the version information in this page",
+    "Others": "Others",
+    "Swift Search": "Swift Search",
+    "Swift Search API": "Swift Search API",
+    "Symphony Logo": "Symphony Logo"
   },
   "Actual Size": "Actual Size",
   "Always on Top": "Always on Top",
@@ -71,15 +76,6 @@
   "Loading Error": "Loading Error",
   "Minimize": "Minimize",
   "Minimize on Close": "Minimize on Close",
-  "More Information": "More Information",
-  "MoreInfo": {
-    "Swift Search Version": "Swift Search Version",
-    "More Information": "More Information",
-    "Others": "Others",
-    "related": "related",
-    "API Version": "API Version",
-    "Version Information": "Version Information"
-  },
   "Native": "Native",
   "Network connectivity has been lost. Check your internet connection.": "Network connectivity has been lost. Check your internet connection.",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "Services",
   "Show All": "Show All",
   "Show crash dump in Explorer": "Show crash dump in Explorer",
-  "Show crash dump in Finder": "Show crash dump in Finder",
   "Show crash dump in File Manager": "Show crash dump in File Manager",
+  "Show crash dump in Finder": "Show crash dump in Finder",
   "Show Logs in Explorer": "Show Logs in Explorer",
-  "Show Logs in Finder": "Show Logs in Finder",
   "Show Logs in File Manager": "Show Logs in File Manager",
+  "Show Logs in Finder": "Show Logs in Finder",
   "SnackBar": {
     " to exit full screen": " to exit full screen",
     "esc": "esc",

src/locale/en.json

@@ -2,7 +2,12 @@
   "About Symphony": "About Symphony",
   "AboutSymphony": {
     "About Symphony": "About Symphony",
-    "Version": "Version"
+    "Copy": "Copy",
+    "Copy all the version information in this page": "Copy all the version information in this page",
+    "Others": "Others",
+    "Swift Search": "Swift Search",
+    "Swift Search API": "Swift Search API",
+    "Symphony Logo": "Symphony Logo"
   },
   "Actual Size": "Actual Size",
   "Always on Top": "Always on Top",
@@ -71,15 +76,6 @@
   "Loading Error": "Loading Error",
   "Minimize": "Minimize",
   "Minimize on Close": "Minimize on Close",
-  "More Information": "More Information",
-  "MoreInfo": {
-    "API Version": "API Version",
-    "More Information": "More Information",
-    "Others": "Others",
-    "related": "related",
-    "Swift Search Version": "Swift Search Version",
-    "Version Information": "Version Information"
-  },
   "Native": "Native",
   "Network connectivity has been lost. Check your internet connection.": "Network connectivity has been lost. Check your internet connection.",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "Services",
   "Show All": "Show All",
   "Show crash dump in Explorer": "Show crash dump in Explorer",
-  "Show crash dump in Finder": "Show crash dump in Finder",
   "Show crash dump in File Manager": "Show crash dump in File Manager",
+  "Show crash dump in Finder": "Show crash dump in Finder",
   "Show Logs in Explorer": "Show Logs in Explorer",
-  "Show Logs in Finder": "Show Logs in Finder",
   "Show Logs in File Manager": "Show Logs in File Manager",
+  "Show Logs in Finder": "Show Logs in Finder",
   "SnackBar": {
     " to exit full screen": " to exit full screen",
     "esc": "esc",

src/locale/fr-FR.json

@@ -2,7 +2,12 @@
   "About Symphony": "À propos de Symphony",
   "AboutSymphony": {
     "About Symphony": "À propos de Symphony",
-    "Version": "Version"
+    "Copy": "Copier",
+    "Copy all the version information in this page": "Copier toutes les informations de version dans cette page",
+    "Others": "Autres",
+    "Swift Search": "Recherche Rapide",
+    "Swift Search API": "API Recherche Rapide",
+    "Symphony Logo": "Logo Symphony"
   },
   "Actual Size": "Taille actuelle",
   "Always on Top": "Garder Symphony au premier plan",
@@ -71,15 +76,6 @@
   "Loading Error": "Erreur lors du chargement",
   "Minimize": "Minimiser",
   "Minimize on Close": "Minimiser lors de la fermeture",
-  "More Information": "Informations détaillées",
-  "MoreInfo": {
-    "API Version": "Version de l'API",
-    "More Information": "Informations détaillées",
-    "Others": "Autres",
-    "related": "en relation",
-    "Swift Search Version": "Version de recherche rapide",
-    "Version Information": "Information sur cette version de Symphony"
-  },
   "Native": "Originaire",
   "Network connectivity has been lost. Check your internet connection.": "La connectivité a été perdue. Vérifiez votre connection à l'internet.",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "Services",
   "Show All": "Tout afficher",
   "Show crash dump in Explorer": "Afficher rapport de crash dans Explorateur",
-  "Show crash dump in Finder": "Montrer dans l'application 'Finder' le rapport de l'arrêt inopiné",
   "Show crash dump in File Manager": "Afficher le vidage sur incident dans le Gestionnaire de fichiers",
+  "Show crash dump in Finder": "Montrer dans l'application 'Finder' le rapport de l'arrêt inopiné",
   "Show Logs in Explorer": "Afficher journal d'évenements dans Explorateur",
-  "Show Logs in Finder": "Montrer dans l'application 'Finder' le journal d'évènements",
   "Show Logs in File Manager": "Afficher les journaux dans le gestionnaire de fichiers",
+  "Show Logs in Finder": "Montrer dans l'application 'Finder' le journal d'évènements",
   "SnackBar": {
     " to exit full screen": " pour quitter le plein écran",
     "esc": "esc",

src/locale/fr.json

@@ -2,7 +2,12 @@
   "About Symphony": "À propos de Symphony",
   "AboutSymphony": {
     "About Symphony": "À propos de Symphony",
-    "Version": "Version"
+    "Copy": "Copier",
+    "Copy all the version information in this page": "Copier toutes les informations de version dans cette page",
+    "Others": "Autres",
+    "Swift Search": "Recherche Rapide",
+    "Swift Search API": "API Recherche Rapide",
+    "Symphony Logo": "Logo Symphony"
   },
   "Actual Size": "Taille actuelle",
   "Always on Top": "Garder Symphony au premier plan",
@@ -71,15 +76,6 @@
   "Loading Error": "Erreur lors du chargement",
   "Minimize": "Minimiser",
   "Minimize on Close": "Minimiser lors de la fermeture",
-  "More Information": "Informations détaillées",
-  "MoreInfo": {
-    "API Version": "Version de l'API",
-    "More Information": "Informations détaillées",
-    "Others": "Autres",
-    "related": "en relation",
-    "Swift Search Version": "Version de recherche rapide",
-    "Version Information": "Information sur cette version de Symphony"
-  },
   "Native": "Originaire",
   "Network connectivity has been lost. Check your internet connection.": "La connectivité a été perdue. Vérifiez votre connection à l'internet.",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "Services",
   "Show All": "Tout afficher",
   "Show crash dump in Explorer": "Afficher rapport de crash dans Explorateur",
-  "Show crash dump in Finder": "Montrer dans l'application 'Finder' le rapport de l'arrêt inopiné",
   "Show crash dump in File Manager": "Afficher le vidage sur incident dans le Gestionnaire de fichiers",
+  "Show crash dump in Finder": "Montrer dans l'application 'Finder' le rapport de l'arrêt inopiné",
   "Show Logs in Explorer": "Afficher journal d'évenements dans Explorateur",
-  "Show Logs in Finder": "Montrer dans l'application 'Finder' le journal d'évènements",
   "Show Logs in File Manager": "Afficher les journaux dans le gestionnaire de fichiers",
+  "Show Logs in Finder": "Montrer dans l'application 'Finder' le journal d'évènements",
   "SnackBar": {
     " to exit full screen": " pour quitter le plein écran",
     "esc": "esc",

src/locale/ja-JP.json

@@ -2,7 +2,12 @@
   "About Symphony": "Symphonyについて",
   "AboutSymphony": {
     "About Symphony": "Symphonyについて",
-    "Version": "バージョン"
+    "Copy": "コピー",
+    "Copy all the version information in this page": "このページのすべてのバージョン情報をコピー",
+    "Others": "その他",
+    "Swift Search": "Swift検索",
+    "Swift Search API": "Swift検索API",
+    "Symphony Logo": "Symphonyロゴ"
   },
   "Actual Size": "実際のサイズ",
   "Always on Top": "つねに前面に表示",
@@ -71,15 +76,6 @@
   "Loading Error": "読み込みエラー",
   "Minimize": "最小化",
   "Minimize on Close": "閉じるで最小化",
-  "More Information": "詳しくは",
-  "MoreInfo": {
-    "API Version": "APIのバージョン",
-    "More Information": "詳しくは",
-    "Others": "その他",
-    "related": "関連した",
-    "Swift Search Version": "迅速な検索バージョン",
-    "Version Information": "バージョン情報"
-  },
   "Native": "Native",
   "Network connectivity has been lost. Check your internet connection.": "ネットワーク接続が失われました。インターネット接続を確認してください。",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "サービス",
   "Show All": "すべてを表示",
   "Show crash dump in Explorer": "Explorerにクラッシュダンプを表示",
-  "Show crash dump in Finder": "ファインダーにクラッシュダンプを表示",
   "Show crash dump in File Manager": "ファイルマネージャでクラッシュダンプを表示します",
+  "Show crash dump in Finder": "ファインダーにクラッシュダンプを表示",
   "Show Logs in Explorer": "Explorerにログを表示",
-  "Show Logs in Finder": "ファインダーにログを表示",
   "Show Logs in File Manager": "ファイルマネージャに表示ログ",
+  "Show Logs in Finder": "ファインダーにログを表示",
   "SnackBar": {
     " to exit full screen": " を押します",
     "esc": "esc",

src/locale/ja.json

@@ -2,7 +2,12 @@
   "About Symphony": "Symphonyについて",
   "AboutSymphony": {
     "About Symphony": "Symphonyについて",
-    "Version": "バージョン"
+    "Copy": "コピー",
+    "Copy all the version information in this page": "このページのすべてのバージョン情報をコピー",
+    "Others": "その他",
+    "Swift Search": "Swift検索",
+    "Swift Search API": "Swift検索API",
+    "Symphony Logo": "Symphonyロゴ"
   },
   "Actual Size": "実際のサイズ",
   "Always on Top": "つねに前面に表示",
@@ -71,15 +76,6 @@
   "Loading Error": "読み込みエラー",
   "Minimize": "最小化",
   "Minimize on Close": "閉じるで最小化",
-  "More Information": "詳しくは",
-  "MoreInfo": {
-    "API Version": "APIのバージョン",
-    "More Information": "詳しくは",
-    "Others": "その他",
-    "related": "関連した",
-    "Swift Search Version": "迅速な検索バージョン",
-    "Version Information": "バージョン情報"
-  },
   "Native": "Native",
   "Network connectivity has been lost. Check your internet connection.": "ネットワーク接続が失われました。インターネット接続を確認してください。",
   "NetworkError": {
@@ -157,11 +153,11 @@
   "Services": "サービス",
   "Show All": "すべてを表示",
   "Show crash dump in Explorer": "Explorerにクラッシュダンプを表示",
-  "Show crash dump in Finder": "ファインダーにクラッシュダンプを表示",
   "Show crash dump in File Manager": "ファイルマネージャでクラッシュダンプを表示します",
+  "Show crash dump in Finder": "ファインダーにクラッシュダンプを表示",
   "Show Logs in Explorer": "Explorerにログを表示",
-  "Show Logs in Finder": "ファインダーにログを表示",
   "Show Logs in File Manager": "ファイルマネージャに表示ログ",
+  "Show Logs in Finder": "ファインダーにログを表示",
   "SnackBar": {
     " to exit full screen": " を押します",
     "esc": "esc",

src/renderer/components/about-app.tsx

@@ -1,5 +1,6 @@
-import { ipcRenderer, remote } from 'electron';
+import { clipboard, ipcRenderer, remote } from 'electron';
 import * as React from 'react';
+import { i18n } from '../../common/i18n-preload';
 
 interface IState {
     appName: string;
@@ -7,20 +8,52 @@ interface IState {
     clientVersion: string;
     buildNumber: string;
     versionLocalised?: string;
+    sdaVersion?: string;
+    sdaBuildNumber?: string;
+    electronVersion?: string;
+    chromeVersion?: string;
+    v8Version?: string;
+    nodeVersion?: string;
+    openSslVersion?: string;
+    zlibVersion?: string;
+    uvVersion?: string;
+    aresVersion?: string;
+    httpParserVersion?: string;
+    swiftSearchVersion?: string;
+    swiftSearchSupportedVersion?: string;
 }
 
+const ABOUT_SYMPHONY_NAMESPACE = 'AboutSymphony';
+
 /**
  * Window that display app version and copyright info
  */
 export default class AboutApp extends React.Component<{}, IState> {
 
+    private readonly eventHandlers = {
+        onCopy: () => this.copy(),
+    };
+
     constructor(props) {
         super(props);
         this.state = {
             appName: 'Symphony',
-            buildNumber: '',
-            clientVersion: '0',
             versionLocalised: 'Version',
+            clientVersion: 'N/A',
+            buildNumber: 'N/A',
+            sdaVersion: 'N/A',
+            sdaBuildNumber: 'N/A',
+            electronVersion: 'N/A',
+            chromeVersion: 'N/A',
+            v8Version: 'N/A',
+            nodeVersion: 'N/A',
+            openSslVersion: 'N/A',
+            zlibVersion: 'N/A',
+            uvVersion: 'N/A',
+            aresVersion: 'N/A',
+            httpParserVersion: 'N/A',
+            swiftSearchVersion: 'N/A',
+            swiftSearchSupportedVersion: 'N/A',
         };
         this.updateState = this.updateState.bind(this);
     }
@@ -29,16 +62,72 @@ export default class AboutApp extends React.Component<{}, IState> {
      * main render function
      */
     public render(): JSX.Element {
-        const { clientVersion, buildNumber, versionLocalised } = this.state;
+        const { clientVersion, buildNumber,
+            sdaVersion, sdaBuildNumber,
+            electronVersion, chromeVersion, v8Version,
+            nodeVersion, openSslVersion, zlibVersion,
+            uvVersion, aresVersion, httpParserVersion,
+            swiftSearchVersion, swiftSearchSupportedVersion,
+        } = this.state;
+
         const appName = remote.app.getName() || 'Symphony';
-        const versionString = `${versionLocalised} ${clientVersion} (${buildNumber})`;
-        const copyright = `Copyright \xA9 ${new Date().getFullYear()} ${appName}`;
+        const copyright = `\xA9 ${new Date().getFullYear()} ${appName}`;
+        const podVersion = `${clientVersion} (${buildNumber})`;
+        const sdaVersionBuild = `${sdaVersion} (${sdaBuildNumber})`;
         return (
-            <div className='AboutApp'>
-                <img className='AboutApp-logo' src='../renderer/assets/symphony-logo.png' alt='Symphony'/>
-                <span className='AboutApp-name'>{appName}</span>
-                <span className='AboutApp-versionText'>{versionString}</span>
-                <span className='AboutApp-copyrightText'>{copyright}</span>
+            <div className='AboutApp' lang={i18n.getLocale()}>
+                <div className='AboutApp-header-container'>
+                    <div className='AboutApp-image-container'>
+                        <img
+                            className='AboutApp-logo'
+                            src='../renderer/assets/symphony-logo.png'
+                            alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
+                        />
+                    </div>
+                    <div className='AboutApp-header-content'>
+                        <h1 className='AboutApp-name'>{appName}</h1>
+                        <p className='AboutApp-copyrightText'>{copyright}</p>
+                    </div>
+                </div>
+                <hr />
+                <div className='AboutApp-main-container'>
+                    <section>
+                        <h4>Symphony</h4>
+                        <ul className='AboutApp-symphony-section'>
+                            <li><b>SBE:</b> {podVersion}</li>
+                            <li><b>SDA:</b> {sdaVersionBuild}</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h4>Electron</h4>
+                        <ul className='AboutApp-electron-section'>
+                            <li><b>Electron:</b> {electronVersion}</li>
+                            <li><b>Chrome:</b> {chromeVersion}</li>
+                            <li><b>V8:</b> {v8Version}</li>
+                            <li><b>Node:</b> {nodeVersion}</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h4>{i18n.t('Others', ABOUT_SYMPHONY_NAMESPACE)()}</h4>
+                        <ul className='AboutApp-others-section'>
+                            <li><b>openssl:</b> {openSslVersion}</li>
+                            <li><b>zlib:</b> {zlibVersion}</li>
+                            <li><b>uv:</b> {uvVersion}</li>
+                            <li><b>ares:</b> {aresVersion}</li>
+                            <li><b>http_parser:</b> {httpParserVersion}</li>
+                            <li><b>{i18n.t('Swift Search', ABOUT_SYMPHONY_NAMESPACE)()}:</b> {swiftSearchVersion}</li>
+                            <li><b>{i18n.t('Swift Search API', ABOUT_SYMPHONY_NAMESPACE)()}:</b> {swiftSearchSupportedVersion}</li>
+                        </ul>
+                    </section>
+                </div>
+                <hr />
+                <div>
+                    <button
+                        className='AboutApp-copy-button'
+                        onClick={this.eventHandlers.onCopy}
+                        title={i18n.t('Copy all the version information in this page', ABOUT_SYMPHONY_NAMESPACE)()}
+                    >{i18n.t('Copy', ABOUT_SYMPHONY_NAMESPACE)()}</button>
+                </div>
             </div>
         );
     }
@@ -51,6 +140,16 @@ export default class AboutApp extends React.Component<{}, IState> {
         ipcRenderer.removeListener('about-app-data', this.updateState);
     }
 
+    /**
+     * Copies the version info on to the clipboard
+     */
+    public copy(): void {
+        const data = this.state;
+        if (data) {
+            clipboard.write({ text: JSON.stringify(data) }, 'clipboard' );
+        }
+    }
+
     /**
      * Sets the About app state
      *

src/renderer/components/more-info.tsx

@@ -1,163 +0,0 @@
-import * as React from 'react';
-
-import { ipcRenderer } from 'electron';
-import { i18n } from '../../common/i18n-preload';
-
-interface IState {
-    clientVersion: string;
-    buildNumber: string;
-    sdaVersion: string;
-    sdaBuildNumber: string;
-    electronVersion: string;
-    chromeVersion: string;
-    v8Version: string;
-    nodeVersion: string;
-    openSslVersion: string;
-    zlibVersion: string;
-    uvVersion: string;
-    aresVersion: string;
-    httpParserVersion: string;
-    swiftSearchVersion: string;
-    swiftSearchSupportedVersion: string;
-}
-
-const MORE_INFO_NAMESPACE = 'MoreInfo';
-
-/**
- * Window that display app version and copyright info
- */
-export default class MoreInfo extends React.Component<{}, IState> {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            clientVersion: 'N/A',
-            buildNumber: 'N/A',
-            sdaVersion: 'N/A',
-            sdaBuildNumber: 'N/A',
-            electronVersion: 'N/A',
-            chromeVersion: 'N/A',
-            v8Version: 'N/A',
-            nodeVersion: 'N/A',
-            openSslVersion: 'N/A',
-            zlibVersion: 'N/A',
-            uvVersion: 'N/A',
-            aresVersion: 'N/A',
-            httpParserVersion: 'N/A',
-            swiftSearchVersion: 'N/A',
-            swiftSearchSupportedVersion: 'N/A',
-        };
-        this.updateState = this.updateState.bind(this);
-    }
-
-    public componentDidMount(): void {
-        ipcRenderer.on('more-info-data', this.updateState);
-    }
-
-    public componentWillUnmount(): void {
-        ipcRenderer.removeListener('more-info-data', this.updateState);
-    }
-
-    /**
-     * main render function
-     */
-    public render(): JSX.Element {
-        const { clientVersion, buildNumber,
-            sdaVersion, sdaBuildNumber,
-            electronVersion, chromeVersion, v8Version,
-            nodeVersion, openSslVersion, zlibVersion,
-            uvVersion, aresVersion, httpParserVersion,
-            swiftSearchVersion, swiftSearchSupportedVersion,
-        } = this.state;
-
-        const podVersion = `${clientVersion} (${buildNumber})`;
-        const sdaVersionBuild = `${sdaVersion} (${sdaBuildNumber})`;
-        return (
-            <div className='MoreInfo'>
-                <span><b>{i18n.t('Version Information', MORE_INFO_NAMESPACE)()}</b></span>
-                <div className='content'>
-                    <h4>Symphony</h4>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>Pod Version</th>
-                                <th>SDA Version</th>
-                            </tr>
-                            <tr>
-                                <td>{podVersion || 'N/A'}</td>
-                                <td>{sdaVersionBuild || 'N/A'}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div className='content'>
-                    <h4>Electron</h4>
-                    <span className='MoreInfo-electron'>{electronVersion || 'N/A'}</span>
-                </div>
-                <div className='content'>
-                    <h4>v8 {i18n.t('related', MORE_INFO_NAMESPACE)()}</h4>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>Chrome</th>
-                                <th>v8</th>
-                                <th>Node</th>
-                            </tr>
-                            <tr>
-                                <td>{chromeVersion || 'N/A'}</td>
-                                <td>{v8Version || 'N/A'}</td>
-                                <td>{nodeVersion || 'N/A'}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div className='content'>
-                    <h4>{i18n.t('Others', MORE_INFO_NAMESPACE)()}</h4>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>openssl</th>
-                                <th>zlib</th>
-                                <th>uv</th>
-                                <th>ares</th>
-                                <th>http_parser</th>
-                            </tr>
-                            <tr>
-                                <td>{openSslVersion || 'N/A'}</td>
-                                <td>{zlibVersion || 'N/A'}</td>
-                                <td>{uvVersion || 'N/A'}</td>
-                                <td>{aresVersion || 'N/A'}</td>
-                                <td>{httpParserVersion || 'N/A'}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div className='content'>
-                    <h4>Swift Search</h4>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>{i18n.t('Swift Search Version', MORE_INFO_NAMESPACE)()}</th>
-                                <th>{i18n.t('API Version', MORE_INFO_NAMESPACE)()}</th>
-                            </tr>
-                            <tr>
-                                <td>{swiftSearchVersion || 'N/A'}</td>
-                                <td>{swiftSearchSupportedVersion || 'N/A'}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Sets the About app state
-     *
-     * @param _event
-     * @param data {Object} { buildNumber, clientVersion, version }
-     */
-    private updateState(_event, data): void {
-        this.setState(data as IState);
-    }
-}

src/renderer/preload-component.ts

@@ -5,7 +5,6 @@ import * as ReactDOM from 'react-dom';
 import { i18n } from '../common/i18n-preload';
 import AboutBox from './components/about-app';
 import BasicAuth from './components/basic-auth';
-import MoreInfo from './components/more-info';
 import NotificationComp from './components/notification-comp';
 import NotificationSettings from './components/notification-settings';
 import ScreenPicker from './components/screen-picker';
@@ -13,7 +12,6 @@ import ScreenSharingIndicator from './components/screen-sharing-indicator';
 
 const enum components {
     aboutApp = 'about-app',
-    moreInfo = 'more-info',
     screenPicker = 'screen-picker',
     screenSharingIndicator = 'screen-sharing-indicator',
     basicAuth = 'basic-auth',
@@ -41,11 +39,7 @@ const load = () => {
         case components.aboutApp:
             loadStyle(components.aboutApp);
             component = AboutBox;
-            break;
-        case components.moreInfo:
-            loadStyle(components.moreInfo);
-            component = MoreInfo;
-            document.title = i18n.t('More Information', 'MoreInfo')();
+            document.title = i18n.t('About Symphony', 'AboutSymphony')();
             break;
         case components.screenPicker:
             loadStyle(components.screenPicker);

src/renderer/styles/about-app.less

@@ -6,40 +6,153 @@
 @text-padding: 10px;
 
 body {
-  overflow: hidden;
+  overflow: scroll;
   background-color: white;
   margin: 0;
   height: 100%;
+  width: 100%;
+}
+
+.AboutApp:lang(ja-JP) {
+  font-family: @font-family-ja;
+
+  h4 {
+    margin: 3px 0;
+  }
+
+  .AboutApp-others-section {
+    padding-left: 55px;
+  }
+
+  .AboutApp-symphony-section {
+    padding-left: 119px;
+  }
+}
+
+.AboutApp:lang(fr-FR) {
+
+  .AboutApp-symphony-section {
+    padding-left: 130px;
+  }
+
+  .AboutApp-electron-section {
+    padding-left: 103px;
+  }
+
+  .AboutApp-others-section {
+    padding-left: 0;
+  }
 }
 
 .AboutApp {
   text-align: center;
   display: flex;
   flex-direction: column;
-  padding-top: 20px;
+  padding: 10px;
+  font-family: @font-family;
 
-  &-name {
-    flex: 1;
-    font-size: 1.3em;
-    padding: @text-padding;
-    font-weight: bold;
+  &-header-container {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
   }
 
-  &-versionText {
-    flex: 1;
-    font-size: 1em;
-    color: @version-text-color;
+  &-header-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  &-main-container {
+    padding: 0 20px;
+  }
+
+  &-name {
+    font-size: 1.6em;
+    padding-left: @text-padding;
+    font-weight: bold;
+    margin: 0;
   }
 
   &-copyrightText {
-    flex: 1;
-    padding: @text-padding;
-    font-size: 0.6em;
+    padding-left: @text-padding;
+    font-size: 0.9em;
+    margin: 0;
     color: @copyright-text-color;
   }
 
   &-logo {
     margin: auto;
   }
+
+  &-symphony-section {
+    padding-left: 115px;
+  }
+
+  &-electron-section {
+    padding-left: 88px;
+  }
+
+  &-others-section {
+    padding-left: 27px;
+  }
+
+  hr {
+    width: 90%;
+  }
+
+  ul {
+    list-style: none;
+    clear: both;
+    display: table;
+    text-align: right;
+    margin: 0;
+  }
+
+  h4 {
+    text-align: start;
+    margin: 6px 0;
+  }
+
+  li {
+    display: table-row;
+    text-align: left;
+    line-height: 26px;
+  }
+
+  b {
+    display: table-cell;
+    padding-right: 1em;
+    text-align: right;
+    font-weight: normal;
+  }
+
+  &-copy-button {
+    text-transform: capitalize;
+  }
+
+  &-copy-button {
+    box-shadow: none;
+    border: none;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    text-align: center;
+    padding: 10px 32px;
+    margin: 4px 20px;
+    display: inline-block;
+    text-decoration: none;
+    line-height: 12px;
+    background-color: rgba(61, 162, 253, 1);
+    color: rgba(255, 255, 255, 1);
+    cursor: pointer;
+    text-transform: uppercase;
+    float: right;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
 }
 

src/renderer/styles/more-info.less

@@ -1,31 +0,0 @@
-@import "theme";
-
-body {
-  font-family: @font-family;
-  text-align: center;
-}
-
-h4 {
-  background: lightgrey;
-  padding: 10px;
-}
-
-.content {
-  text-align: center;
-}
-
-table {
-  font-family: @font-family;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-td, th {
-  border: 1px solid @text-color-primary-dark;
-  text-align: center;
-  padding: 8px;
-}
-
-tr:nth-child(odd) {
-  background-color: @text-color-secondary;
-}