make resizing feel good

Author: toddtarsi

packages/selenium-ide/src/browser/components/PlaybackTabBar/index.tsx

@@ -9,7 +9,6 @@ const {
     onPlaybackWindowOpened,
   },
 } = window.sideAPI
-console.log(onPlaybackWindowChanged, onPlaybackWindowClosed, onPlaybackWindowOpened)
 
 const PlaybackTabBar: React.FC = () => {
   const [tabs, setTabs] = React.useState<TabShape[]>([])

packages/selenium-ide/src/browser/windows/PlaybackWindow/renderer.tsx

@@ -0,0 +1,12 @@
+import AppWrapper from 'browser/components/AppWrapper'
+import ProjectPlaybackWindow from 'browser/components/PlaybackPanel'
+import renderWhenReady from 'browser/helpers/renderWhenReady'
+import React from 'react'
+
+const PlaybackWindowLanding = () => (
+  <AppWrapper>
+    <ProjectPlaybackWindow />
+  </AppWrapper>
+)
+
+renderWhenReady(PlaybackWindowLanding)

packages/selenium-ide/src/browser/windows/ProjectEditor/renderer.tsx

@@ -8,10 +8,10 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from 'react-resizable-panels'
-import SIDELogger from '../../components/Logger'
-import PlaybackControls from '../../components/PlaybackControls'
-import ProjectPlaybackWindow from '../../components/PlaybackPanel'
-import ProjectEditor from '../../components/ProjectEditor'
+import SIDELogger from 'browser/components/Logger'
+import PlaybackControls from 'browser/components/PlaybackControls'
+import ProjectPlaybackWindow from 'browser/components/PlaybackPanel'
+import ProjectEditor from 'browser/components/ProjectEditor'
 
 const usePanelGroup = (id: string) => {
   const [ready, setReady] = React.useState(false)

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

@@ -180,11 +180,6 @@ export default class PlaybackController extends BaseController {
       if (!window) {
         throw new Error('No windows found')
       }
-      this.session.windows.focusPlaybackWindow(window.id)
-      const handle = await this.session.windows.getPlaybackWindowHandleByID(
-        window.id
-      )
-      await driver.switchTo().window(handle!)
       return
     } catch (windowDoesNotExist) {
       let success = false
@@ -221,7 +216,11 @@ export default class PlaybackController extends BaseController {
         currentCommand.command === 'open'
           ? new URL(currentCommand.target as string, state.project.url).href
           : firstURL.href
-      await playback.executor.doOpen(url)
+      try {
+        await playback.executor.doOpen(url)
+      } catch (e) {
+        console.warn('Open command failed:', e)
+      }
     } finally {
       await this.session.windows.initPlaybackWindowSize(window!)
     }

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

@@ -265,59 +265,58 @@ export default class WindowsController extends BaseController {
   }
 
   async initPlaybackWindowSize(window: Electron.BrowserWindow) {
-    const {
-      state: {
-        editor: { overrideWindowSize },
-      },
-    } = await this.session.state.get()
-    if (!overrideWindowSize.active) {
-      window.webContents.setZoomFactor(1)
-      return
-    }
-    const { width, height } =
-      await this.session.resizablePanels.getPanelScreenPosition(
-        'playback-panel'
-      )
-    const targetWidth = overrideWindowSize.width
-    const targetHeight = overrideWindowSize.height
-    if (targetWidth > width || targetHeight > height) {
-      const xZoom = width / targetWidth
-      const yZoom = height / targetHeight
-      window.setSize(width, height)
-      window.webContents.setZoomFactor(Math.max(0.1, Math.min(xZoom, yZoom)))
-    } else {
-      window.setSize(targetWidth, targetHeight)
-      window.webContents.setZoomFactor(1)
-    }
+    const panel = await this.session.resizablePanels.getPanelScreenPosition(
+      'playback-panel'
+    )
+    const { height, width, zoomFactor } = await this.calculateScaleAndZoom(
+      panel.width,
+      panel.height
+    )
+    window.setSize(width, height)
+    window.webContents.setZoomFactor(zoomFactor)
   }
 
-  async resizePlaybackWindows(_targetWidth: number, _targetHeight: number) {
+  async calculateScaleAndZoom(_targetWidth: number, _targetHeight: number) {
     const {
       state: {
         editor: { overrideWindowSize },
       },
     } = await this.session.state.get()
     const targetWidth = overrideWindowSize.active
-      ? overrideWindowSize.width
+      ? Math.max(overrideWindowSize.width, 150)
       : _targetWidth
     const targetHeight = overrideWindowSize.active
-      ? overrideWindowSize.height
+      ? Math.max(overrideWindowSize.height, 150)
       : _targetHeight
 
     const { width, height } =
       await this.session.resizablePanels.getPanelScreenPosition(
         'playback-panel'
       )
+    const xAspect = width / targetWidth
+    const yAspect = height / targetHeight
+    let resultWidth = targetWidth
+    let resultHeight = targetHeight
+    const zoomFactor = Math.min(xAspect, yAspect, 1)
+    if (xAspect < 1 || yAspect < 1) {
+      resultWidth = Math.round(targetWidth * zoomFactor)
+      resultHeight = Math.round(targetHeight * zoomFactor)
+    }
+    return {
+      width: resultWidth,
+      height: resultHeight,
+      zoomFactor,
+    }
+  }
+
+  async resizePlaybackWindows(_targetWidth: number, _targetHeight: number) {
+    const { width, height, zoomFactor } = await this.calculateScaleAndZoom(
+      _targetWidth,
+      _targetHeight
+    )
     this.playbackWindows.forEach((window) => {
-      if (targetWidth > width || targetHeight > height) {
-        const xZoom = width / targetWidth
-        const yZoom = height / targetHeight
-        window.setSize(width, height)
-        window.webContents.setZoomFactor(Math.max(0.1, Math.min(xZoom, yZoom)))
-      } else {
-        window.setSize(targetWidth, targetHeight)
-        window.webContents.setZoomFactor(1)
-      }
+      window.setSize(width, height)
+      window.webContents.setZoomFactor(zoomFactor)
     })
   }
 
@@ -380,7 +379,9 @@ export default class WindowsController extends BaseController {
       this.session.api.windows.onPlaybackWindowChanged.dispatchEvent(
         window.id,
         {
-          title: window.webContents.getURL(),
+          title: window.webContents
+            .getURL()
+            .replace(this.session.projects.project.url, ''),
         }
       )
     })