lots of suite stabilizations

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-alpha.97",
+  "version": "4.0.1-alpha.98",
   "private": false,
   "description": "Selenium IDE electron app",
   "author": "Todd <tarsitodd@gmail.com>",
@@ -122,9 +122,9 @@
     "@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.6",
     "@seleniumhq/get-driver": "^4.0.0-alpha.3",
     "@seleniumhq/side-api": "^4.0.0-alpha.49",
-    "@seleniumhq/side-commons": "^4.0.0-alpha.2",
+    "@seleniumhq/side-commons": "^4.0.0-alpha.3",
     "@seleniumhq/side-model": "^4.0.0-alpha.5",
-    "@seleniumhq/side-runtime": "^4.0.0-alpha.43",
+    "@seleniumhq/side-runtime": "^4.0.0-alpha.44",
     "dnd-core": "^16.0.1",
     "electron-chromedriver": "^28.0.0",
     "electron-log": "^5.1.0",

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

@@ -24,28 +24,25 @@ const ProjectEditor: React.FC<
           <SIDEAppBar session={session} setTab={setTab} tab={tab} />
         </div>
         <div className="flex-1">
-          {showDrawer && (
-            <PanelGroup
-              direction="horizontal"
-              id="drawer-editor"
-              {...usePanelGroup('drawer-editor')}
-            >
-              <Panel collapsible id="editor-drawer" order={1}>
-                <SIDEDrawer session={session} tab={tab} />
-              </Panel>
-              <PanelResizeHandle className="resize-bar" id="h-resize-1" />
-              <Panel id="editor-panel" order={2}>
-                <Box className="fill flex flex-col">
-                  <Main session={session} setTab={setTab} tab={tab} />
-                </Box>
-              </Panel>
-            </PanelGroup>
-          )}
-          {!showDrawer && (
-            <Box className="fill flex flex-col">
-              <Main session={session} setTab={setTab} tab={tab} />
-            </Box>
-          )}
+          <PanelGroup
+            direction="horizontal"
+            id="drawer-editor"
+            {...usePanelGroup('drawer-editor', !showDrawer)}
+          >
+            {showDrawer && (
+              <>
+                <Panel collapsible id="editor-drawer" defaultSize={25} order={1}>
+                  <SIDEDrawer session={session} tab={tab} />
+                </Panel>
+                <PanelResizeHandle className="resize-bar" id="h-resize-1" />
+              </>
+            )}
+            <Panel defaultSize={75} id="editor-panel" order={2}>
+              <Box className="fill flex flex-col">
+                <Main session={session} setTab={setTab} tab={tab} />
+              </Box>
+            </Panel>
+          </PanelGroup>
         </div>
       </div>
     </DndProvider>

packages/selenium-ide/src/browser/hooks/usePanelGroup.ts

@@ -1,16 +1,19 @@
 import React from 'react'
 import { ImperativePanelGroupHandle } from 'react-resizable-panels'
 
-export const usePanelGroup = (id: string) => {
+export const usePanelGroup = (id: string, disabled = false) => {
   const [ready, setReady] = React.useState(false)
   const ref = React.useRef<null | ImperativePanelGroupHandle>(null)
   React.useEffect(() => {
+    if (disabled) {
+      return setReady(false)
+    }
     if (!ref.current) return
     window.sideAPI.resizablePanels.getPanelGroup(id).then((values) => {
       ref.current?.setLayout(values)
       setReady(true)
     })
-  }, [ref])
+  }, [disabled, ref])
   const onLayout = React.useCallback(
     (sizes: number[]) => {
       if (!ready) return
@@ -20,6 +23,7 @@ export const usePanelGroup = (id: string) => {
   )
   return {
     ref,
+    reset: () => setReady(false),
     onLayout,
   }
 }

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Project/ProjectTab.tsx

@@ -4,6 +4,7 @@ import { SIDEMainProps } from 'browser/components/types'
 import React, { FC } from 'react'
 import ProjectSettings from './ProjectSettings'
 import SystemSettings from './SystemSettings'
+import SettingsTabs from './SettingTabs'
 
 export interface MiniProjectShape {
   id: string
@@ -23,6 +24,7 @@ const ProjectTab: React.FC<
   Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>
 > = ({ session }) => (
   <Box className="fill flex flex-col">
+    {!session.state.editor.showDrawer && <SettingsTabs session={session} />}
     <Paper elevation={1} id="project-editor" square>
       <SettingsWrapper session={session} />
     </Paper>

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/SuitesTab.tsx

@@ -13,7 +13,7 @@ const SuitesTab: React.FC<
 
   return (
     <Box className="fill flex flex-col">
-      <SuiteSelector session={session} />
+      {!session.state.editor.showDrawer && <SuiteSelector session={session} />}
       <Component session={session} />
     </Box>
   )

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandListItem.tsx

@@ -123,7 +123,6 @@ const CommandRow: React.FC<CommandRowProps> = ({
         }
         secondary={
           <>
-            <Box sx={errorTextFormat}>{commandState.message}</Box>
             {comment && (
               <Box sx={commentTextFormat}>// {comment}</Box>
             )}

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestsTab.tsx

@@ -12,6 +12,7 @@ import CommandTable from './TestCommandTable'
 import { loadingID } from '@seleniumhq/side-api/dist/constants/loadingID'
 import MainHeader from 'browser/components/Main/Header'
 import { SIDEMainProps } from 'browser/components/types'
+import TestSelector from './TestSelector'
 
 const sxCenter = { textAlign: 'center' }
 const NoTestFound = () => (
@@ -79,6 +80,7 @@ const TestsTab: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
   const disabled = ['playing', 'recording'].includes(session.state.status)
   return (
     <Box className="fill flex flex-col" ref={ref}>
+      {!session.state.editor.showDrawer && (<TestSelector session={session} />)}
       {activeTestID === loadingID ? (
         <NoTestFound />
       ) : (

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

@@ -10,6 +10,8 @@ import startDriver, { port, WebdriverDebugLog } from './start'
 import BaseController from '../Base'
 import { createBidiAPIBindings } from './bidi'
 import { CommandShape } from '@seleniumhq/side-model'
+import { absolutifyUrl } from '@seleniumhq/side-runtime/src/utils'
+import { retry } from '@seleniumhq/side-commons'
 
 // Escape hatch to avoid dealing with rootDir complexities in TS
 // https://stackoverflow.com/questions/50822310/how-to-import-package-json-in-typescript
@@ -152,15 +154,38 @@ const electronPolyfills = (
     name: 'dismissPrompt',
     description: 'Dismisses a prompt',
   },
+  open: {
+    execute: async (command: CommandShape, executor: WebDriverExecutor) => {
+      const url = command.target
+      const handle = await executor.driver.getWindowHandle()
+      const window = await session.windows.getPlaybackWindowByHandle(handle)
+      if (!window) {
+        throw new Error('Failed to find playback window')
+      }
+      await retry(
+        () => window.loadURL(absolutifyUrl(url!, session.projects.project.url)),
+        5,
+        100
+      )
+    },
+    name: 'doOpen',
+    description: 'Opens a URL',
+  },
   setWindowSize: {
     execute: async (command: CommandShape, executor: WebDriverExecutor) => {
       const handle = await executor.driver.getWindowHandle()
       const window = await session.windows.getPlaybackWindowByHandle(handle)
       if (!window) {
         throw new Error('Failed to find playback window')
       }
-      const [targetWidth, targetHeight] = command.target!.split('x').map((v) => parseInt(v))
-      await session.windows.resizePlaybackWindow(window, targetWidth, targetHeight)
+      const [targetWidth, targetHeight] = command
+        .target!.split('x')
+        .map((v) => parseInt(v))
+      await session.windows.resizePlaybackWindow(
+        window,
+        targetWidth,
+        targetHeight
+      )
     },
     name: 'setWindowSize',
     description: 'Sets the playback window size',
@@ -213,7 +238,15 @@ export default class DriverController extends BaseController {
       .usingServer(server)
       .forBrowser(browserName)
     console.info('Building driver for ' + browser)
-    const driver = await driverBuilder.build()
+    const driver = await retry(
+      async () => {
+        const result = await driverBuilder.build()
+        console.info('Built driver for ' + browser)
+        return result
+      },
+      3,
+      100
+    )
     console.info('Built driver for ' + browser)
     const useBidi = await this.session.store.get('browserInfo.useBidi')
     if (useBidi) {