log fix, overlaid playback window

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-alpha.73",
+  "version": "4.0.1-alpha.74",
   "private": false,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",

packages/selenium-ide/src/browser/windows/Logger/main.tsx

@@ -13,11 +13,13 @@ const SIDELogger: React.FC = () => {
   const logContainer = React.useRef<HTMLPreElement>(null)
   React.useEffect(() => {
     const handleLog = (level: LogLevel, log: string) => {
-      logContainer.current?.append(
+      const el = logContainer.current
+      if (!el) return; 
+      console.info(el.scrollHeight)
+      el.append(
         `${new Date().toLocaleTimeString()} [${level}] ${log}\n`
       )
-      console.log(logContainer.current?.scrollHeight)
-      window.scrollTo(0, logContainer.current?.scrollHeight ?? 0)
+      el.scrollTo(0, el.scrollHeight)
     }
     window.sideAPI.system.onLog.addListener(handleLog)
     return () => {

packages/selenium-ide/src/browser/windows/PlaybackWindow/controller.ts

@@ -1,6 +1,10 @@
 import { WindowConfig } from 'browser/types'
 
 export const window: WindowConfig['window'] = () => ({
-  title: 'Playback Window',
+  alwaysOnTop: true,
+  frame: false,
   resizable: false,
+  roundedCorners: false,
+  show: false,
+  title: 'Playback Window',
 })

packages/selenium-ide/src/main/session/controllers/ResizablePanels/index.ts

@@ -26,8 +26,24 @@ export default class ResizablePanelsController extends BaseController {
       resizablePanelDefaults?.[id] ?? [50, 50]
     )
   }
+  async recalculatePlaybackWindows() {
+    const panelScreenPosition = await this.getPanelScreenPosition(
+      'playback-panel'
+    )
+    this.session.windows.playbackWindows.forEach((playbackWindow) => {
+      playbackWindow.setSize(
+        panelScreenPosition.width,
+        panelScreenPosition.height,
+      )
+      playbackWindow.setPosition(
+        panelScreenPosition.x,
+        panelScreenPosition.y,
+      )
+    })
+  }
   async setPanelGroup(id: string, dimensions: number[]) {
     this.session.store.set(`panelGroup.${id}`, dimensions)
+    this.recalculatePlaybackWindows()
   }
   async getPanelScreenPosition(id: string) {
     const projectWindow = await this.session.windows.get('project-main-window')
@@ -37,10 +53,10 @@ export default class ResizablePanelsController extends BaseController {
         `JSON.parse(JSON.stringify(document.querySelector('[data-panel-id="${id}"]').getBoundingClientRect()))`
       )) as Rect
     return {
-      x: Math.round(panelGroupPosition.x + projectWindowBounds.x) + 11,
-      y: Math.round(panelGroupPosition.y + projectWindowBounds.y) + 38,
-      width: Math.round(panelGroupPosition.width) - 24,
-      height: Math.round(panelGroupPosition.height) - 20,
+      x: Math.round(panelGroupPosition.x + projectWindowBounds.x) + 2,
+      y: Math.round(panelGroupPosition.y + projectWindowBounds.y) + 30,
+      width: Math.round(panelGroupPosition.width) - 5,
+      height: Math.round(panelGroupPosition.height) - 3,
     }
   }
 }

packages/selenium-ide/src/main/session/controllers/Windows/index.ts

@@ -240,8 +240,10 @@ export default class WindowsController extends BaseController {
     const window = this.windowLoaders[playbackWindowName]({
       ...opts,
       ...playbackScreenPosition,
+      parent: await this.session.windows.get(projectEditorWindowName),
     })
     this.handlePlaybackWindow(window)
+    window.showInactive()
     if (opts.title) {
       window.webContents.executeJavaScript(`document.title = "${opts.title}";`)
     }
@@ -363,15 +365,8 @@ export default class WindowsController extends BaseController {
     await this.open(projectEditorWindowName, { show: false })
     const projectWindow = await this.get(projectEditorWindowName)
     this.useWindowState(projectWindow, 'windowSize', 'windowPosition')
-    projectWindow.on('focus', () => {
-      this.playbackWindows.forEach((bw) => {
-        bw.setAlwaysOnTop(true)
-      })
-    })
-    projectWindow.on('blur', () => {
-      this.playbackWindows.forEach((bw) => {
-        bw.setAlwaysOnTop(false)
-      })
+    projectWindow.on('resize', () => {
+      this.session.resizablePanels.recalculatePlaybackWindows()
     })
 
     projectWindow.show()