add privacy policy link to 'about' dialog

src/main/index.js

@@ -200,6 +200,9 @@ const createWindow = ({search = null, url = 'index.html', ...browserWindowOption
 
     const fullUrl = makeFullUrl(url, search);
     window.loadURL(fullUrl);
+    window.once('ready-to-show', () => {
+        webContents.send('ready-to-show');
+    });
 
     return window;
 };
@@ -398,6 +401,10 @@ ipcMain.on('open-about-window', () => {
     _windows.about.show();
 });
 
+ipcMain.on('open-privacy-policy-window', () => {
+    _windows.privacy.show();
+});
+
 // start loading initial project data before the GUI needs it so the load seems faster
 const initialProjectDataPromise = (async () => {
     if (argv._.length === 0) {

src/renderer/about.css

@@ -5,6 +5,14 @@ html, body {
     font-weight: bolder;
 }
 
+a:active, a:hover, a:link, a:visited {
+    color: currentColor;
+}
+
+a:active, a:hover {
+    filter: brightness(0.9);
+}
+
 .aboutBox {
     margin: 0;
     position: absolute;
@@ -25,3 +33,7 @@ html, body {
 .aboutDetails {
     font-size: x-small;
 }
+
+.aboutFooter {
+    font-size: small;
+}

src/renderer/about.jsx

@@ -1,3 +1,4 @@
+import {ipcRenderer} from 'electron';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {productName, version} from '../../package.json';
@@ -5,6 +6,16 @@ import {productName, version} from '../../package.json';
 import logo from '../icon/ScratchDesktop.svg';
 import styles from './about.css';
 
+// don't actually follow the link in the `href` attribute
+// instead, tell the main process to open the privacy policy window
+const showPrivacyPolicy = event => {
+    if (event) {
+        event.preventDefault();
+    }
+    ipcRenderer.send('open-privacy-policy-window');
+    return false;
+};
+
 const AboutElement = () => (
     <div className={styles.aboutBox}>
         <div><img
@@ -14,15 +25,24 @@ const AboutElement = () => (
         /></div>
         <div className={styles.aboutText}>
             <h2>{productName}</h2>
-            <div>Version {version}</div>
-            <table className={styles.aboutDetails}>
+            Version {version}
+            <table className={styles.aboutDetails}><tbody>
                 {
-                    ['Electron', 'Chrome'].map(component => {
+                    ['Electron', 'Chrome', 'Node'].map(component => {
                         const componentVersion = process.versions[component.toLowerCase()];
                         return <tr key={component}><td>{component}</td><td>{componentVersion}</td></tr>;
                     })
                 }
-            </table>
+            </tbody></table>
+            <p className={styles.aboutFooter}>
+                <a
+                    // The `href` attribute causes link styling to be applied. The value doesn't really matter but using a
+                    // reasonable value might make testing easier, or at least makes the HTML more readable. The `onClick`
+                    // function actually handles opening the privacy policy window.
+                    href="./index.html?route=privacy"
+                    onClick={showPrivacyPolicy}
+                >View the Privacy Policy...</a>
+            </p>
         </div>
     </div>
 );

src/renderer/app.jsx

@@ -84,7 +84,7 @@ const ScratchDesktopHOC = function (WrappedComponent) {
         componentWillUnmount () {
             ipcRenderer.removeListener('setTitleFromSave', this.handleSetTitleFromSave);
         }
-        handleClickLogo () {
+        handleClickAbout () {
             ipcRenderer.send('open-about-window');
         }
         handleProjectTelemetryEvent (event, metadata) {
@@ -116,7 +116,7 @@ const ScratchDesktopHOC = function (WrappedComponent) {
                 canSave={false}
                 isScratchDesktop
                 showTelemetryModal={shouldShowTelemetryModal}
-                onClickLogo={this.handleClickLogo}
+                onClickAbout={this.handleClickAbout}
                 onProjectTelemetryEvent={this.handleProjectTelemetryEvent}
                 onStorageInit={this.handleStorageInit}
                 onTelemetryModalOptIn={this.handleTelemetryModalOptIn}

src/renderer/index.js

@@ -1,5 +1,14 @@
-// this is an async import so that it doesn't block the first render
-// index.html contains a loading/splash screen which will display while this import loads
+// This file does async imports of the heavy JSX, especially app.jsx, to avoid blocking the first render.
+// The main index.html just contains a loading/splash screen which will display while this import loads.
+
+import {ipcRenderer} from 'electron';
+
+ipcRenderer.on('ready-to-show', () => {
+    // Start without any element in focus, otherwise the first link starts with focus and shows an orange box.
+    // We shouldn't disable that box or the focus behavior in case someone wants or needs to navigate that way.
+    // This seems like a hack... maybe there's some better way to do avoid any element starting with focus?
+    document.activeElement.blur();
+});
 
 const route = new URLSearchParams(window.location.search).get('route') || 'app';
 switch (route) {