fix: vue structure for replay

Author: blakebyrnes

package.json

@@ -86,6 +86,7 @@
       "remote-interfaces",
       "replay",
       "replay-app",
+      "replay-app/frontend",
       "replay-api",
       "session-state",
       "testing",

replay-app/backend/Application.ts

@@ -1,16 +1,12 @@
 import * as Path from 'path';
-import { app, dialog, ipcMain, Menu } from 'electron';
+import { app, dialog, ipcMain, Menu, protocol } from 'electron';
 import * as Fs from 'fs';
-import { app, protocol, dialog, ipcMain, Menu } from 'electron';
-import WindowManager from './managers/WindowManager';
 import OverlayManager from './managers/OverlayManager';
 import generateAppMenu from './menus/generateAppMenu';
 import ReplayApi from './ReplayApi';
 import storage from './storage';
 import Window from './models/Window';
 import { ChildProcess } from 'child_process';
-import InternalServer from '~shared/constants/files';
-import * as Fs from 'fs';
 import IReplayMeta from '../shared/interfaces/IReplayMeta';
 
 protocol.registerSchemesAsPrivileged([
@@ -59,7 +55,6 @@ export default class Application {
 
   public getPageUrl(page: string) {
     if (Application.devServerUrl) {
-      console.log('returining page url', new URL(page, Application.devServerUrl).href);
       return new URL(page, Application.devServerUrl).href;
     }
     return `app://./${page}.html`;
@@ -319,9 +314,7 @@ export default class Application {
     protocol.registerBufferProtocol('app', async (request, respond) => {
       let pathName = new URL(request.url).pathname;
       pathName = decodeURI(pathName); // Needed in case URL contains spaces
-      const filePath = Path.join(app.getAppPath(), 'pages', pathName);
-
-      console.log('getting protocol', request.url, filePath);
+      const filePath = Path.join(app.getAppPath(), 'frontend', pathName);
 
       try {
         const data = await Fs.promises.readFile(filePath);

replay-app/backend/models/AppView.ts

@@ -1,7 +1,7 @@
 import Window from './Window';
 import TabBackend from './TabBackend';
 import ITabLocation, { InternalLocations } from '~shared/interfaces/ITabLocation';
-import InternalServer from '~shared/constants/files';
+import Application from '~backend/Application';
 
 export default class AppView extends TabBackend {
   public location: InternalLocations;
@@ -20,9 +20,10 @@ export default class AppView extends TabBackend {
 
     const page = location === InternalLocations.NewTab ? 'home' : location.toLowerCase();
 
-    console.log('Loading app page', `${InternalServer.url}/${page}`);
+    const url = Application.instance.getPageUrl(page);
+    console.log('Loading app page', url);
 
-    this.webContents.loadURL(`${InternalServer.url}/${page}`);
+    this.webContents.loadURL(url);
 
     this.window.sendToRenderer('tab:updated', { id: this.id, location, replaceTabId });
   }

replay-app/backend/models/ReplayView.ts

@@ -4,6 +4,7 @@ import ReplayApi from '~backend/ReplayApi';
 import IRectangle from '~shared/interfaces/IRectangle';
 import Application from '~backend/Application';
 import TabBackend from './TabBackend';
+import { v1 as uuidv1 } from 'uuid';
 
 const domReplayerScript = require.resolve('../../injected-scripts/domReplayer');
 
@@ -14,6 +15,7 @@ export default class ReplayView extends TabBackend {
     super(window, {
       preload: domReplayerScript,
       nodeIntegration: true,
+      partition: uuidv1(),
       contextIsolation: true,
       javascript: false,
     });

replay-app/backend/models/TabBackend.ts

@@ -1,12 +1,6 @@
-import { BrowserView, app } from 'electron';
-import { URL } from 'url';
-import { v1 as uuidv1 } from 'uuid';
+import { BrowserView } from 'electron';
 import Window from './Window';
 import generateContextMenu from '../menus/generateContextMenu';
-import ITabLocation, { InternalLocations } from '~shared/interfaces/ITabLocation';
-import ReplayApi from '~backend/ReplayApi';
-import IRectangle from '~shared/interfaces/IRectangle';
-import Application from '~backend/Application';
 import Rectangle = Electron.Rectangle;
 
 export default abstract class TabBackend {
@@ -23,7 +17,6 @@ export default abstract class TabBackend {
         contextIsolation: false,
         javascript: true,
         enableRemoteModule: true,
-        partition: uuidv1(),
         nativeWindowOpen: true,
         webSecurity: true,
         sandbox: false,

replay-app/backend/models/Window.ts

@@ -3,7 +3,6 @@ import { resolve } from 'path';
 import Application from '../Application';
 import ReplayApi from '~backend/ReplayApi';
 import storage from '../storage';
-import InternalServer from '~shared/constants/files';
 import ICreateTabOptions from '~shared/interfaces/ICreateTabOptions';
 import { defaultTabOptions } from '~shared/constants/tabs';
 import ITabMeta from '~shared/interfaces/ITabMeta';
@@ -189,7 +188,7 @@ export default class Window {
 
     const { width, height } = this.browserWindow.getContentBounds();
     const toolbarContentHeight = await this.webContents.executeJavaScript(
-      `document.body.offsetHeight`,
+      `document.querySelector('.AppPage').offsetHeight`,
     );
 
     const newBounds = {
@@ -280,7 +279,8 @@ export default class Window {
         const resizeObserver = new ResizeObserver(() => {
           ipcRenderer.send('resize-height');
         });
-        resizeObserver.observe(document.body);
+        const elem = document.querySelector('.AppPage');
+        resizeObserver.observe(elem);
       `);
 
     this.webContents.on('ipc-message', (e, message) => {

replay-app/backend/overlays/BaseOverlay.ts

@@ -1,7 +1,7 @@
 import { BrowserView, BrowserWindow } from 'electron';
 import IRectangle from '~shared/interfaces/IRectangle';
-import Application from '../Application';
 import Rectangle = Electron.Rectangle;
+import Application from '~backend/Application';
 
 interface IOptions {
   name: string;
@@ -26,12 +26,8 @@ export default class BaseOverlay {
     height: 0,
   };
   private readonly calcBounds: (bounds: IRectangle) => IRectangle;
+  private readonly hideTimeout: number;
   private timeout: any;
-  private hideTimeout: number;
-
-  private isLoaded = false;
-  private isInitialized = false;
-  private showCallback: any = null;
 
   public constructor({
     name,
@@ -55,16 +51,7 @@ export default class BaseOverlay {
     this.hideTimeout = hideTimeout;
     this.name = name;
 
-    const { webContents } = this.browserView;
-
-    webContents.once('dom-ready', () => {
-      this.isLoaded = true;
-      if (this.showCallback) {
-        this.showCallback();
-        this.showCallback = null;
-      }
-    });
-
+    this.webContents.loadURL(Application.instance.getPageUrl(this.name));
     if (devtools) {
       this.webContents.openDevTools({ mode: 'detach' });
     }
@@ -99,9 +86,6 @@ export default class BaseOverlay {
     options: { focus?: boolean; waitForLoad?: boolean; rect?: IRectangle },
     ...args: any[]
   ) {
-    if (!this.isInitialized) {
-      this.initialize();
-    }
     const { focus = true, waitForLoad = true, rect } = options;
     return new Promise(resolve => {
       this.browserWindow = browserWindow;
@@ -131,11 +115,6 @@ export default class BaseOverlay {
         resolve();
       };
 
-      if (!this.isLoaded && waitForLoad) {
-        this.showCallback = callback;
-        return;
-      }
-
       callback();
     });
   }
@@ -166,11 +145,6 @@ export default class BaseOverlay {
     this.browserView.destroy();
     this.browserView = null;
   }
-
-  private initialize() {
-    this.isInitialized = true;
-    this.webContents.loadURL(Application.instance.getPageUrl(this.name));
-  }
 }
 
 export const roundifyRectangle = (rect: IRectangle): IRectangle => {

replay-app/frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@secret-agent/replay-app-frontend",
+  "private": true,
+  "scripts": {
+    "build": "vue-cli-service build",
+    "clean": "vue-cli-service clean",
+    "start": "vue-cli-service serve",
+    "dev": "vue-cli-service serve --mode=development"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.11.2",
+    "animejs": "^3.2.0",
+    "core-js": "^3.6.5",
+    "mobx": "^5.15.4",
+    "mobx-vue": "^2.0.10",
+    "source-map-support": "^0.5.19",
+    "uuid": "^8.1.0",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.4",
+    "vue-property-decorator": "^9.0.0",
+    "vue-slider-component": "^3.2.2",
+    "vue-styled-components": "^1.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-typescript": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
+    "concurrently": "^5.2.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "~3.5.3",
+    "node-sass": "^4.14.1",
+    "pug": "^2.0.4",
+    "pug-plain-loader": "^1.0.0",
+    "sass-loader": "^8.0.2",
+    "shx": "^0.3.2",
+    "typescript": "~3.8.3"
+  }
+}

replay-app/frontend/public/index.html

@@ -1,6 +1,7 @@
 <html>
 <head>
   <title>SecretAgent</title>
-<body id="app">
+<body>
+<div id="app"></div>
 </body>
 </html>

replay-app/frontend/src/components/Icon.vue

@@ -5,10 +5,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { transparency } from '@/constants/transparency';
+import { transparency } from '~frontend/constants/transparency';
 import { TOOLBAR_BUTTON_HEIGHT } from '~shared/constants/design';
 import store from '../models/BaseStore';
-import NoCache from '@/lib/NoCache';
+import NoCache from '~frontend/lib/NoCache';
 
 const IconProps = Vue.extend({
   props: {