fix(replay): playback on page 2

fix(replay): refreshing history list on load

replay-app/backend/Application.ts

@@ -54,7 +54,7 @@ export default class Application {
 
   private async loadLocationFromArgv(argv: string[]) {
     const args = argv.slice(2);
-    console.log('Launched with args', argv);
+    console.log('Launched with args', argv.slice(2));
     if (!args.length) {
       return this.createWindowIfNeeded();
     }

replay-app/frontend/src/assets/style/overlay-mixins.scss

@@ -1,12 +1,12 @@
-@import "common-mixins";
+@import 'common-mixins';
 
 $DIALOG_TRANSITION: 0.2s opacity;
 $DIALOG_BOX_SHADOW: 0 12px 16px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.16);
 $DIALOG_BORDER_RADIUS: 4px;
 
 @mixin overlayBaseStyle() {
   @include baseStyle();
-};
+}
 
 @mixin overlayStyle() {
   margin: 3px 16px 16px;
@@ -18,6 +18,22 @@ $DIALOG_BORDER_RADIUS: 4px;
   height: calc(100vh - 28px);
   background-color: var(--dropdownBackgroundColor);
 
+  ul {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+    li {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--menuItemHoverBackgroundColor);
+      }
+      margin: 0;
+      padding: 5px 5px 5px 10px;
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
   @keyframes fadeIn {
     0% {
       opacity: 0;
@@ -27,4 +43,4 @@ $DIALOG_BORDER_RADIUS: 4px;
     }
   }
   animation: 0.15s ease-out 0s 1 fadeIn;
-};
+}

replay-app/frontend/src/lib/NoCache.ts

@@ -1,6 +1,5 @@
 import { createDecorator } from 'vue-class-component';
 
-// tslint:disable-next-line:variable-name
 const NoCache = createDecorator((options, key) => {
   // component options should be passed to the callback
   // and update for the options object affect the component

replay-app/frontend/src/models/OverlayStore.ts

@@ -1,9 +1,8 @@
 import { ipcRenderer, remote } from 'electron';
-import { observable, computed } from 'mobx';
+import { computed, observable } from 'mobx';
 import { getTheme } from '~shared/utils/themes';
 import ISettings from '~shared/interfaces/ISettings';
 
-// tslint:disable-next-line:interface-name
 export declare interface OverlayStore {
   onUpdateTabInfo: (tabId: number, data: any) => void;
   onHide: (data: any) => void;
@@ -18,11 +17,22 @@ export class OverlayStore {
     return getTheme(this.settings.theme);
   }
 
+  @observable
+  public alwaysOnTop = false;
+
   @observable
   public visible = false;
 
-  protected args: any;
-  protected onShowArgs?: (...args: any[]) => void;
+  @computed
+  public get cssVars() {
+    const dialogLightForeground = this.theme.dialogLightForeground;
+    return {
+      '--dropdownBackgroundColor': this.theme.dropdownBackgroundColor,
+      '--menuItemHoverBackgroundColor': dialogLightForeground
+        ? 'rgba(255, 255, 255, 0.06)'
+        : 'rgba(0, 0, 0, 0.03)',
+    };
+  }
 
   private _windowId = -1;
 
@@ -40,6 +50,10 @@ export class OverlayStore {
       ...options,
     };
 
+    if (remote.getCurrentWindow()) {
+      this.alwaysOnTop = remote.getCurrentWindow().isAlwaysOnTop();
+    }
+
     if (!persistent) this.visible = true;
 
     this.persistent = persistent;
@@ -50,12 +64,6 @@ export class OverlayStore {
       });
     }
 
-    ipcRenderer.on('will-show', (event, ...args: any[]) => {
-      this.visible = true;
-      this.args = args;
-      if (this.onShowArgs) this.onShowArgs(...args);
-    });
-
     ipcRenderer.on('update-settings', (e, settings: ISettings) => {
       this.settings = { ...this.settings, ...settings };
     });

replay-app/frontend/src/pages/app/components/AddressBar.vue

@@ -13,7 +13,7 @@
         .text {{store.saSession.scriptStartDate}}
       .window-section.section(@mousedown="showLocationOverlay($event, 'sessions-menu')")
         Icon(:src="ICON_NUMBER" :size=16 iconStyle="transform: 'scale(-1,1)'")
-        .text {{1}} of {{store.saSession.relatedScriptInstances.length}}
+        .text {{1}} of {{store.saSession.relatedSessions.length}}
       .page-section.section(@mousedown="showLocationOverlay($event, 'session-pages-menu')")
         Icon.lock(:src="ICON_LOCK" :size=16 iconStyle="transform: 'scale(-1,1)'")
         .text {{store.pageUrl}}
@@ -51,10 +51,9 @@ import {
   ICON_LOCK,
   ICON_HOME,
 } from '~frontend/constants/icons';
-import store from '~frontend/stores/app';
+import store from '~frontend/pages/app/store';
 import NoCache from '~frontend/lib/NoCache';
 import ITabLocation, { InternalLocations } from '~shared/interfaces/ITabLocation';
-import { toJS } from 'mobx';
 
 @Observer
 @Component({ components: { AppButton, Icon } })

replay-app/frontend/src/pages/app/components/AppButton.vue

@@ -24,7 +24,7 @@ import { transparency } from '~frontend/constants/transparency';
 import { BLUE_500 } from '~frontend/constants';
 import Preloader from '~frontend/components/Preloader.vue';
 import { TOOLBAR_BUTTON_WIDTH, TOOLBAR_BUTTON_HEIGHT } from '~shared/constants/design';
-import store from '~frontend/stores/app';
+import store from '~frontend/pages/app/store';
 import NoCache from '~frontend/lib/NoCache';
 
 const AppButtonProps = Vue.extend({

replay-app/frontend/src/pages/app/components/ReplayBar.vue

@@ -23,7 +23,7 @@ import { Observer } from 'mobx-vue';
 import Icon from '~frontend/components/Icon.vue';
 import { TOOLBAR_HEIGHT } from '~shared/constants/design';
 import { ICON_PLAY, ICON_PAUSE } from '~frontend/constants/icons';
-import store from '~frontend/stores/app';
+import store from '~frontend/pages/app/store';
 import NoCache from '~frontend/lib/NoCache';
 import VueSlider from 'vue-slider-component';
 import 'vue-slider-component/theme/default.css';

replay-app/frontend/src/pages/app/components/Tab.vue

@@ -22,9 +22,9 @@ import Component from 'vue-class-component';
 import { Observer } from 'mobx-vue';
 import { remote } from 'electron';
 import Preloader from '~frontend/components/Preloader.vue';
-import TabFrontend from '~frontend/stores/app/TabFrontend';
-import store from '~frontend/stores/app';
-import { TAB_MAX_WIDTH } from '~frontend/stores/app/constants';
+import TabFrontend from '~frontend/pages/app/store/TabFrontend';
+import store from '~frontend/pages/app/store';
+import { TAB_MAX_WIDTH } from '~frontend/pages/app/store/constants';
 
 import {
   transparency,

replay-app/frontend/src/pages/app/components/TabBar.vue

@@ -13,7 +13,7 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import { Observer } from 'mobx-vue';
 import os from 'os';
-import store from '~frontend/stores/app';
+import store from '~frontend/pages/app/store';
 import Tab from '~frontend/pages/app/components/Tab.vue';
 import AppButton from '~frontend/pages/app/components/AppButton.vue';
 import {

replay-app/frontend/src/pages/app/index.vue

@@ -12,7 +12,7 @@ import TabBar from './components/TabBar.vue';
 import AddressBar from './components/AddressBar.vue';
 import ReplayBar from './components/ReplayBar.vue';
 import NoCache from '~frontend/lib/NoCache';
-import store from '~frontend/stores/app';
+import store from '~frontend/pages/app/store';
 
 @Component({ components: { TabBar, AddressBar, ReplayBar } })
 export default class AppPage extends Vue {

replay-app/frontend/src/stores/app/AddTabStore.ts → replay-app/frontend/src/pages/app/store/AddTabStore.ts

@@ -1,5 +1,5 @@
-import { animateTab } from '../../pages/app/utils/tabs';
-import { AppStore } from '../app';
+import { animateTab } from '../utils/tabs';
+import { AppStore } from '~frontend/pages/app/store';
 
 export default class AddTabStore {
   public left = 0;

replay-app/frontend/src/stores/app/TabFrontend.ts → replay-app/frontend/src/pages/app/store/TabFrontend.ts

@@ -1,12 +1,12 @@
 import { ipcRenderer } from 'electron';
 import { action, computed, observable } from 'mobx';
 import { TAB_ANIMATION_DURATION, TAB_MAX_WIDTH, TAB_MIN_WIDTH, TABS_PADDING } from './constants';
-import { closeWindow } from '../../pages/app/utils/windows';
-import { animateTab } from '../../pages/app/utils/tabs';
+import { closeWindow } from '../utils/windows';
+import { animateTab } from '../utils/tabs';
 import ITabLocation from '~shared/interfaces/ITabLocation';
 import ITabMeta from '~shared/interfaces/ITabMeta';
 import ISaSession from '~shared/interfaces/ISaSession';
-import store from '../app';
+import store from '~frontend/pages/app/store';
 import ITickState from '~shared/interfaces/ITickState';
 
 export default class TabFrontend {
@@ -142,9 +142,9 @@ export default class TabFrontend {
 
     if (startSessionMillis && this.currentTickValue) {
       if (this.tickState.durationMillis < startSessionMillis) {
-        this.currentTickValue *= (state.durationMillis / startSessionMillis);
+        this.currentTickValue *= state.durationMillis / startSessionMillis;
       } else {
-        this.currentTickValue *= (startSessionMillis / state.durationMillis);
+        this.currentTickValue *= startSessionMillis / state.durationMillis;
       }
     }
   }

replay-app/frontend/src/stores/app/TabsStore.ts → replay-app/frontend/src/pages/app/store/TabsStore.ts

@@ -4,8 +4,7 @@ import TabFrontend from './TabFrontend';
 import { TAB_ANIMATION_DURATION, TABS_PADDING } from './constants';
 import ICreateTabOptions from '~shared/interfaces/ICreateTabOptions';
 import ITabMeta from '~shared/interfaces/ITabMeta';
-import { AppStore } from '../app';
-import store from '~frontend/stores/app';
+import store, { AppStore } from '~frontend/pages/app/store';
 
 export default class TabsStore {
   @observable

replay-app/frontend/src/stores/app.ts → replay-app/frontend/src/pages/app/store/index.ts

@@ -1,8 +1,8 @@
 import { ipcRenderer, remote } from 'electron';
 import { computed, observable } from 'mobx';
 import { getTheme } from '~shared/utils/themes';
-import TabsStore from './app/TabsStore';
-import AddTabStore from './app/AddTabStore';
+import TabsStore from '~frontend/pages/app/store/TabsStore';
+import AddTabStore from '~frontend/pages/app/store/AddTabStore';
 import settings from '~frontend/lib/settings';
 
 export class AppStore {

replay-app/frontend/src/pages/app/utils/tabs.ts

@@ -1,5 +1,5 @@
 import anime from 'animejs';
-import { TAB_ANIMATION_DURATION } from '~frontend/stores/app/constants';
+import { TAB_ANIMATION_DURATION } from '~frontend/pages/app/store/constants';
 
 export const animateTab = (
   property: 'translateX' | 'width',

replay-app/frontend/src/pages/command-overlay/index.vue

@@ -1,38 +1,42 @@
 <template lang="pug">
     .CommandOverlay.Page(:style="cssVars")
-        h4.title {{store.commandLabel}}
-        .resultBox
+        h4.title {{commandLabel}}
+        .resultBox(v-if="commandResult")
             .duration
                 span.label duration:
-                span.value {{store.commandResult.duration}} ms
-            .result(v-if="store.commandResult.result")
+                span.value {{commandResult.duration}} ms
+            .result(v-if="commandResult.result")
                 span.label result:
-                span.value(:class="{error:store.commandResult.isError}") {{store.commandResult.result}}
+                span.value(:class="{error:commandResult.isError}") {{commandResult.result}}
 
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { ipcRenderer } from 'electron';
-import store from '~frontend/stores/command-overlay';
-import NoCache from '~frontend/lib/NoCache';
-import { Observer } from 'mobx-vue';
+import Vue from "vue";
+import Component from "vue-class-component";
+import { ipcRenderer } from "electron";
+import NoCache from "~frontend/lib/NoCache";
+import ICommandWithResult from "~shared/interfaces/ICommandResult";
+import { OverlayStore } from "~frontend/models/OverlayStore";
 
-@Observer
 @Component
 export default class CommandOverlay extends Vue {
-  private store = store;
+  public commandLabel: string = '';
+  private commandResult: ICommandWithResult = {} as any;
+
+  private store = new OverlayStore({ hideOnBlur: true, persistent: false });
 
   @NoCache
   private get cssVars() {
-    const dialogLightForeground = store.theme.dialogLightForeground;
-    return {
-      '--dropdownBackgroundColor': store.theme.dropdownBackgroundColor,
-      '--menuItemHoverBackgroundColor': dialogLightForeground
-        ? 'rgba(255, 255, 255, 0.06)'
-        : 'rgba(0, 0, 0, 0.03)',
-    };
+    return this.store.cssVars;
+  }
+
+  mounted() {
+    ipcRenderer.on('will-show', (_, commandLabel: string, commandResult: ICommandWithResult) => {
+      console.log(commandLabel, commandResult);
+      this.commandLabel = commandLabel;
+      this.commandResult = commandResult;
+    });
   }
 }
 </script>

replay-app/frontend/src/pages/history/index.vue

@@ -11,15 +11,14 @@
 </template>
 
 <script lang="ts">
-  import { ipcRenderer } from 'electron';
-  import moment from 'moment';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import Icon from "~frontend/components/Icon.vue";
-  import { ICON_CLOSE } from "~frontend/constants";
-  import store from "~frontend/stores/locations-menu";
+import { ipcRenderer } from "electron";
+import moment from "moment";
+import Vue from "vue";
+import Component from "vue-class-component";
+import Icon from "~frontend/components/Icon.vue";
+import { ICON_CLOSE } from "~frontend/constants";
 
-  interface IItem {
+interface IItem {
     id: string;
     sessionName: string,
     dataLocation: string,