Replaced the splash screen with a preload.

Added a bare minimum example.

Closes #193
Closes #324
Closes #327
Closes #717
Closes #851

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

.vscode/launch.json

@@ -20,7 +20,6 @@
         "--no-app-auto-install",
         "--plugins=local-dir:../plugins",
         "--hosted-plugin-inspect=9339",
-        "--nosplash",
         "--content-trace",
         "--open-devtools"
       ],

arduino-ide-extension/src/electron-browser/theia/core/electron-window-module.ts

@@ -6,10 +6,6 @@ import {
   ElectronMainWindowServiceExt,
   electronMainWindowServiceExtPath,
 } from '../../../electron-common/electron-main-window-service-ext';
-import {
-  SplashService,
-  splashServicePath,
-} from '../../../electron-common/splash-service';
 import { ElectronWindowService } from './electron-window-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -24,9 +20,4 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
       )
     )
     .inSingletonScope();
-  bind(SplashService)
-    .toDynamicValue(({ container }) =>
-      ElectronIpcConnectionProvider.createProxy(container, splashServicePath)
-    )
-    .inSingletonScope();
 });

arduino-ide-extension/src/electron-browser/theia/core/electron-window-service.ts

@@ -1,17 +1,15 @@
-import {
-  inject,
-  injectable,
-  postConstruct,
-} from '@theia/core/shared/inversify';
 import * as remote from '@theia/core/electron-shared/@electron/remote';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 import {
   ConnectionStatus,
   ConnectionStatusService,
 } from '@theia/core/lib/browser/connection-status-service';
-import { ElectronWindowService as TheiaElectronWindowService } from '@theia/core/lib/electron-browser/window/electron-window-service';
-import { SplashService } from '../../../electron-common/splash-service';
 import { nls } from '@theia/core/lib/common';
+import { ElectronWindowService as TheiaElectronWindowService } from '@theia/core/lib/electron-browser/window/electron-window-service';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { WindowServiceExt } from '../../../browser/theia/core/window-service-ext';
 import { ElectronMainWindowServiceExt } from '../../../electron-common/electron-main-window-service-ext';
 
@@ -23,20 +21,14 @@ export class ElectronWindowService
   @inject(ConnectionStatusService)
   private readonly connectionStatusService: ConnectionStatusService;
 
-  @inject(SplashService)
-  private readonly splashService: SplashService;
-
-  @inject(FrontendApplicationStateService)
-  private readonly appStateService: FrontendApplicationStateService;
-
   @inject(ElectronMainWindowServiceExt)
   private readonly mainWindowServiceExt: ElectronMainWindowServiceExt;
 
   @postConstruct()
   protected override init(): void {
-    this.appStateService
-      .reachedAnyState('initialized_layout')
-      .then(() => this.splashService.requestClose());
+    // NOOP
+    // Does not listen on Theia's `window.zoomLevel` changes.
+    // TODO: IDE2 must switch to the Theia preferences and drop the custom one.
   }
 
   protected shouldUnload(): boolean {

arduino-ide-extension/src/electron-common/splash-service.ts

@@ -16,13 +16,8 @@ import {
   ElectronMainWindowServiceExt,
   electronMainWindowServiceExtPath,
 } from '../electron-common/electron-main-window-service-ext';
-import {
-  SplashService,
-  splashServicePath,
-} from '../electron-common/splash-service';
 import { ElectronMainWindowServiceExtImpl } from './electron-main-window-service-ext-impl';
 import { IDEUpdaterImpl } from './ide-updater/ide-updater-impl';
-import { SplashServiceImpl } from './splash/splash-service-impl';
 import { ElectronMainApplication } from './theia/electron-main-application';
 import { ElectronMainWindowServiceImpl } from './theia/electron-main-window-service';
 import { TheiaElectronWindow } from './theia/theia-electron-window';
@@ -34,17 +29,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(ElectronMainWindowServiceImpl).toSelf().inSingletonScope();
   rebind(ElectronMainWindowService).toService(ElectronMainWindowServiceImpl);
 
-  bind(SplashServiceImpl).toSelf().inSingletonScope();
-  bind(SplashService).toService(SplashServiceImpl);
-  bind(ElectronConnectionHandler)
-    .toDynamicValue(
-      (context) =>
-        new JsonRpcConnectionHandler(splashServicePath, () =>
-          context.container.get(SplashService)
-        )
-    )
-    .inSingletonScope();
-
   // IDE updater bindings
   bind(IDEUpdaterImpl).toSelf().inSingletonScope();
   bind(IDEUpdater).toService(IDEUpdaterImpl);

arduino-ide-extension/src/electron-main/arduino-electron-main-module.ts

@@ -1,26 +1,22 @@
-import { inject, injectable } from '@theia/core/shared/inversify';
+import { injectable } from '@theia/core/shared/inversify';
 import {
   app,
   BrowserWindow,
-  BrowserWindowConstructorOptions,
   contentTracing,
   ipcMain,
-  screen,
   Event as ElectronEvent,
 } from '@theia/core/electron-shared/electron';
 import { fork } from 'child_process';
 import { AddressInfo } from 'net';
 import { join, dirname } from 'path';
 import * as fs from 'fs-extra';
-import { initSplashScreen } from '../splash/splash-screen';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { ElectronSecurityToken } from '@theia/core/lib/electron-common/electron-token';
 import { FrontendApplicationConfig } from '@theia/application-package/lib/application-props';
 import {
   ElectronMainApplication as TheiaElectronMainApplication,
   ElectronMainExecutionParams,
 } from '@theia/core/lib/electron-main/electron-main-application';
-import { SplashServiceImpl } from '../splash/splash-service-impl';
 import { URI } from '@theia/core/shared/vscode-uri';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import * as os from '@theia/core/lib/common/os';
@@ -42,14 +38,6 @@ interface WorkspaceOptions {
 
 const WORKSPACES = 'workspaces';
 
-/**
- * Purely a dev thing. If you start the app with the `--nosplash` argument,
- * then you won't have the splash screen (which is always on top :confused:) and can debug the app at startup.
- * Note: if you start the app from VS Code with the `App (Electron)` config, the splash screen will be disabled.
- */
-const APP_STARTED_WITH_NOSPLASH =
-  typeof process !== 'undefined' && process.argv.indexOf('--nosplash') !== -1;
-
 /**
  * If the app is started with `--open-devtools` argument, the `Dev Tools` will be opened.
  */
@@ -70,9 +58,6 @@ export class ElectronMainApplication extends TheiaElectronMainApplication {
   private _firstWindowId: number | undefined;
   private openFilePromise = new Deferred();
 
-  @inject(SplashServiceImpl)
-  private readonly splashService: SplashServiceImpl;
-
   override async start(config: FrontendApplicationConfig): Promise<void> {
     // Explicitly set the app name to have better menu items on macOS. ("About", "Hide", and "Quit")
     // See: https://github.com/electron-userland/electron-builder/issues/2468
@@ -289,69 +274,10 @@ export class ElectronMainApplication extends TheiaElectronMainApplication {
     super.onSecondInstance(event, argv, cwd);
   }
 
-  /**
-   * Use this rather than creating `BrowserWindow` instances from scratch, since some security parameters need to be set, this method will do it.
-   *
-   * @param options
-   */
   override async createWindow(
     asyncOptions: MaybePromise<TheiaBrowserWindowOptions> = this.getDefaultTheiaWindowOptions()
   ): Promise<BrowserWindow> {
-    let options = await asyncOptions;
-    options = this.avoidOverlap(options);
-    let electronWindow: BrowserWindow | undefined;
-    if (this.windows.size || APP_STARTED_WITH_NOSPLASH) {
-      electronWindow = await this.doCreateWindow(options);
-    } else {
-      const { bounds } = screen.getDisplayNearestPoint(
-        screen.getCursorScreenPoint()
-      );
-      const splashHeight = 450;
-      const splashWidth = 600;
-      const splashY = Math.floor(bounds.y + (bounds.height - splashHeight) / 2);
-      const splashX = Math.floor(bounds.x + (bounds.width - splashWidth) / 2);
-      const splashScreenOpts: BrowserWindowConstructorOptions = {
-        height: splashHeight,
-        width: splashWidth,
-        x: splashX,
-        y: splashY,
-        transparent: true,
-        alwaysOnTop: true,
-        focusable: false,
-        minimizable: false,
-        maximizable: false,
-        hasShadow: false,
-        resizable: false,
-      };
-      electronWindow = await initSplashScreen(
-        {
-          windowOpts: options,
-          templateUrl: join(
-            __dirname,
-            '..',
-            '..',
-            '..',
-            'src',
-            'electron-main',
-            'splash',
-            'static',
-            'splash.html'
-          ),
-          delay: 0,
-          minVisible: 2000,
-          splashScreenOpts,
-        },
-        (windowOptions) => this.doCreateWindow(windowOptions),
-        this.splashService.onCloseRequested
-      );
-    }
-    return electronWindow;
-  }
-
-  private async doCreateWindow(
-    options: TheiaBrowserWindowOptions
-  ): Promise<BrowserWindow> {
-    const electronWindow = await super.createWindow(options);
+    const electronWindow = await super.createWindow(asyncOptions);
     if (APP_STARTED_WITH_DEV_TOOLS) {
       electronWindow.webContents.openDevTools();
     }

arduino-ide-extension/src/electron-main/splash/splash-screen.ts

@@ -61,7 +61,7 @@
     },
     "generator": {
       "config": {
-        "preloadTemplate": "<div class='theia-preload' style='background-color: rgb(237, 241, 242);'></div>"
+        "preloadTemplate": "./resources/preload.html"
       }
     }
   }

arduino-ide-extension/src/electron-main/splash/splash-service-impl.ts

@@ -0,0 +1,113 @@
+<html>
+
+<head>
+    <style>
+        :root {
+            --arduino-color: #008184;
+        }
+
+        /* The colors are hard-coded and based on the `editor.background` and `editor.foreground` values from `./arduino-ide-extension/src/browser/data/default.color-theme.json` */
+        @media (prefers-color-scheme: light) {
+            html {
+                background: #ffffff;
+            }
+        }
+
+        /* The colors are hard-coded and based on the `editor.background` and `editor.foreground` values from `./arduino-ide-extension/src/browser/data/dark.color-theme.json` */
+        @media (prefers-color-scheme: dark) {
+            html {
+                background: #1f272a;
+            }
+        }
+
+        .theia-preload {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            /* Above styles copied from https://github.com/eclipse-theia/theia/blob/5aeef6c0c683b4e91713ab736957e6655b486adc/packages/core/src/browser/style/index.css#L147-L161 */
+            /* Otherwise, there is a flickering when Theia's CSS loads. */
+
+            background-image: none;
+        }
+
+        .theia-preload::after {
+            /* remove default loading animation */
+            content: none;
+        }
+
+        .spinner-container {
+            display: flex;
+            flex-direction: center;
+            align-self: center;
+            justify-content: center;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        .custom-spinner {
+            align-self: center;
+        }
+
+        #logo-arduino {
+            position: absolute;
+            left: calc(50% - 100px);
+        }
+
+        .plus,
+        .minus {
+            fill: var(--arduino-color);
+        }
+
+        .loop {
+            fill: none;
+            stroke: var(--arduino-color);
+            stroke-miterlimit: 10;
+            stroke-width: 72.11px;
+            stroke-dasharray: 2500;
+            stroke-dashoffset: 2500;
+            animation: dash 2.3s ease-in-out infinite;
+        }
+
+        @keyframes dash {
+            from {
+                stroke-dashoffset: 5000;
+            }
+
+            to {
+                stroke-dashoffset: 2000;
+            }
+
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class='spinner-container'>
+        <div class='custom-spinner'>
+            <svg id="arduino-logo" xmlns="http://www.w3.org/2000/svg" width="200px" height="100%"
+                viewBox="0 0 821.27 566.24">
+                <g id="traccia-loop">
+                    <path class="loop"
+                        d="M960,449.62l-28,50.66c-29.35,43.15-79.66,96.78-152.66,107.26a188.26,188.26,0,0,1-26.14,1.78c-92,0-166.78-71.64-166.78-159.7s74.86-159.7,166.87-159.7a180.62,180.62,0,0,1,26,1.83c65.21,9.3,112.32,53,142.56,93a213.75,213.75,0,0,1,16.52,25.65l45.53,82.31A158.69,158.69,0,0,0,994,508.77c29.92,41.4,78.28,89,146.55,98.76a189.83,189.83,0,0,0,26.26,1.79c92,0,166.77-71.64,166.77-159.7s-74.85-159.7-166.86-159.7a183.49,183.49,0,0,0-26.1,1.84c-73,10.42-123.26,64-152.54,107.09L960,449.62"
+                        transform="translate(-550.35 -252.49)" />
+                </g>
+                <g id="minus" data-name="-">
+                    <rect class="minus" x="143.14" y="178.03" width="121.88" height="39.29" />
+                </g>
+                <g id="plus" data-name="+">
+                    <polygon class="plus"
+                        points="630.62 217.32 671.82 217.32 671.82 178.03 630.62 178.03 630.62 136.7 591.24 136.7 591.24 178.03 549.97 178.03 549.97 217.32 591.24 217.32 591.24 258.65 630.62 258.65 630.62 217.32" />
+                </g>
+            </svg>
+        </div>
+    </div>
+</body>
+
+</html>

arduino-ide-extension/src/electron-main/splash/static/splash.html

@@ -15,4 +15,8 @@ dist/
 electron-builder.env
 
 # The generated `package.json` under the `build` folder.
-build/package.json
+build/package.json
+
+# Resources the packager copies from dev to prod
+build/resources/preload.html
+build/patch/frontend/index.js

arduino-ide-extension/src/electron-main/splash/static/splash.png

@@ -7,14 +7,16 @@
   const glob = require('glob');
   const isCI = require('is-ci');
   shell.env.THEIA_ELECTRON_SKIP_REPLACE_FFMPEG = '1'; // Do not run the ffmpeg validation for the packager.
+  // Note, this will crash on PI if the available memory is less than desired heap size.
+  // https://github.com/shelljs/shelljs/issues/1024#issuecomment-1001552543
   shell.env.NODE_OPTIONS = '--max_old_space_size=4096'; // Increase heap size for the CI
   shell.env.PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = 'true'; // Skip download and avoid `ERROR: Failed to download Chromium`.
   const template = require('./config').generateTemplate(
     new Date().toISOString()
   );
   const utils = require('./utils');
   const merge = require('deepmerge');
-  const { isRelease, isElectronPublish, getChannelFile } = utils;
+  const { isRelease, getChannelFile } = utils;
   const { version } = template;
   const { productName } = template.build;
 
@@ -58,6 +60,11 @@
     .filter((filename) => resourcesToKeep.indexOf(filename) === -1)
     .forEach((filename) => rm('-rf', path('..', 'build', filename)));
 
+  // Clean up the `./electron/build/patch` and `./electron/build/resources` folder with Git.
+  // To avoid file duplication between bundled app and dev mode, some files are copied from `./electron-app` to `./electron/build` folder.
+  const foldersToSyncFromDev = ['patch', 'resources'];
+  foldersToSyncFromDev.forEach(filename => shell.exec(`git -C ${path('..', 'build', filename)} clean -ffxdq`, { async: false }));
+
   const extensions = require('./extensions.json');
   echo(
     `Building the application with the following extensions:\n${extensions
@@ -70,20 +77,28 @@
   // Copy the following items into the `working-copy` folder. Make sure to reuse the `yarn.lock`. |
   //----------------------------------------------------------------------------------------------+
   mkdir('-p', path('..', workingCopy));
-  for (const name of [
+  for (const filename of [
     ...allDependencies,
     'yarn.lock',
     'package.json',
     'lerna.json',
     'i18n'
   ]) {
-    cp('-rf', path(rootPath, name), path('..', workingCopy));
+    cp('-rf', path(rootPath, filename), path('..', workingCopy));
+  }
+
+  //---------------------------------------------------------------------------------------------+
+  // Copy the patched `index.js` for the frontend, the Theia preload, etc. from `./electron-app` |
+  //---------------------------------------------------------------------------------------------+
+  for (const filename of foldersToSyncFromDev) {
+    cp('-rf', path('..', workingCopy, 'electron-app', filename), path('..', 'build'));
   }
 
   //----------------------------------------------+
   // Sanity check: all versions must be the same. |
   //----------------------------------------------+
   verifyVersions(allDependencies);
+
   //----------------------------------------------------------------------+
   // Use the nightly patch version if not a release but requires publish. |
   //----------------------------------------------------------------------+
@@ -438,6 +453,12 @@ ${fs.readFileSync(path('..', 'build', 'package.json')).toString()}
     }
   }
 
+  /**
+   * @param {import('fs').PathLike} file
+   * @param {string|undefined} [algorithm="sha512"]
+   * @param {BufferEncoding|undefined} [encoding="base64"]
+   * @param {object|undefined} [options]
+   */
   async function hashFile(
     file,
     algorithm = 'sha512',