testing out a single pane UX

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-alpha.72",
+  "version": "4.0.1-alpha.73",
   "private": false,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",
@@ -111,7 +111,7 @@
     "@seleniumhq/code-export-python-pytest": "^4.0.0-alpha.4",
     "@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.3",
     "@seleniumhq/get-driver": "^4.0.0-alpha.3",
-    "@seleniumhq/side-api": "^4.0.0-alpha.41",
+    "@seleniumhq/side-api": "^4.0.0-alpha.42",
     "@seleniumhq/side-commons": "^4.0.0-alpha.2",
     "@seleniumhq/side-model": "^4.0.0-alpha.5",
     "@seleniumhq/side-runtime": "^4.0.0-alpha.35",
@@ -126,6 +126,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^1.0.8",
     "scroll-into-view-if-needed": "^3.0.10",
     "selenium-webdriver": "^4.16.0",
     "side-code-export": "^4.0.0-alpha.13",

packages/selenium-ide/src/browser/components/ReorderableList.tsx

@@ -3,12 +3,10 @@ import List, { ListProps } from '@mui/material/List'
 import React, { FC } from 'react'
 
 export type ReorderableListProps = ListProps & TableBodyProps & {
-  bottomOffset: number
   Component?: React.FC | React.ComponentClass
 }
 
 const ReorderableList: FC<ReorderableListProps> = ({
-  bottomOffset,
   children,
   Component = List,
   sx = {},
@@ -18,7 +16,6 @@ const ReorderableList: FC<ReorderableListProps> = ({
       dense
       sx={{
         borderColor: 'primary.main',
-        marginBottom: `${bottomOffset}px`,
         verticalAlign: 'top',
         ...sx,
       }}

packages/selenium-ide/src/browser/helpers/preload-electron.ts

@@ -30,4 +30,4 @@ export const cb = (isWebdriver: boolean) => () => new Promise<void>((resolve) =>
   })
 });
 
-export default preload(api, cb(false))
+export default () => preload(api, cb(false))

packages/selenium-ide/src/browser/helpers/preload.ts

@@ -24,24 +24,60 @@ export type NestedPartial<API> = {
     : API[K]
 }
 
-export default (api: Api, ...cbs: (() => void)[]) =>
-  async (
-    apiSubset: NestedPartial<Api> & {
-      mutators: NestedPartial<BrowserApiMutators>
-    } = {
-      ...api,
-      mutators,
-    },
-  ) => {
-    window.sideAPI = apiSubset as Api & { mutators: BrowserApiMutators }
-    if (cbs?.length) {
-      for (const cb of cbs) {
-        await cb()
-      }
+function isDictionary(obj: any): obj is Record<string, unknown> {
+  if (typeof obj !== 'object' || obj === null) {
+    return false
+  }
+
+  for (const key in obj) {
+    if (typeof key !== 'string') {
+      return false
+    }
+  }
+
+  return true
+}
+
+function getApiSubset(
+  originalObj: any,
+  nestedSubset: any
+): Record<string, any> | undefined {
+  if (!isDictionary(originalObj)) {
+    return originalObj
+  }
+  if (!isDictionary(nestedSubset)) {
+    return undefined
+  }
+  const results: Record<string, any> = {}
+  for (const key in nestedSubset) {
+    const result = getApiSubset(originalObj[key], nestedSubset[key])
+    if (result === undefined) {
+      results[key] = originalObj[key]
+    } else {
+      results[key] = result
     }
+  }
+  return results
+}
+
+type ApiWithMutators = Api & {
+  mutators: BrowserApiMutators
+}
 
-    return cbs.reduce((acc, cb) => () => {
-        acc()
-        cb()
-    })
+export default async (api: NestedPartial<Api>, ...cbs: (() => void)[]) => {
+  window.sideAPI = {
+    ...api,
+    mutators: getApiSubset(mutators, api),
+  } as ApiWithMutators
+  console.log(api, mutators, getApiSubset(mutators, api))
+  if (cbs?.length) {
+    for (const cb of cbs) {
+      await cb()
+    }
   }
+
+  return cbs.reduce((acc, cb) => () => {
+    acc()
+    cb()
+  })
+}

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

@@ -3,7 +3,6 @@ import { useEffect } from 'react'
 
 export interface useKeyboundNavInput {
   activeSuite: string
-  bottomOffset: number
   selectedIndexes: number[]
   tests: TestShape[]
 }

packages/selenium-ide/src/browser/index.css

@@ -14,10 +14,19 @@ body,
   box-sizing: border-box;
 }
 
+.resize-bar {
+  background-color: #999;
+  min-height: 4px;
+  min-width: 4px;
+}
+
 @media (prefers-color-scheme: dark) {
   html, body, #root {
     background-color: #111;
   }
+  .resize-bar {
+    background-color: #666;
+  }
 }
 
 /**
@@ -53,17 +62,22 @@ body,
   opacity: 0.75;
 }
 
+.block {
+  display: block;
+}
 /**
  * Flexbox
  */
 .flex {
   display: flex !important;
 }
 .flex-1 {
+  display: flex;
   min-height: 0;
   flex: 1 1 1px;
 }
 .flex-initial {
+  display: flex;
   flex: 0 0 auto;
 }
 .flex-col {
@@ -89,6 +103,14 @@ body,
 .no-overflow-y {
   overflow-y: hidden;
 }
+.no-overflow-x {
+  overflow-x: hidden;
+}
+.text-overflow {
+  display: block;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
 
 /**
  * Height
@@ -162,29 +184,38 @@ body,
 /**
  * Padding
  */
-.pt-0 {
-  padding-top: 0;
-}
-
 .p-1 {
   padding: 0.125rem;
 }
-
-.py-3 {
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+.p-2 {
+  padding: 0.25rem;
+}
+.p-3 {
+  padding: 0.5rem;
 }
-
 .p-4 {
   padding: 1rem;
 }
+.p-5 {
+  padding: 2rem;
+}
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+.pt-0 {
+  padding-top: 0 !important;
+}
 .pt-4 {
   padding-top: 1rem;
 }
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.py-3 {
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+}
 .py-4 {
   padding-bottom: 1rem;
   padding-top: 1rem;
@@ -268,12 +299,6 @@ body,
   padding-top: 14px;
 }
 
-.playback-text {
-  position: absolute;
-  top: 45%;
-  padding: 24px;
-}
-
 /*
  * Playback command overlay colors
  */
@@ -316,6 +341,10 @@ body,
   border-bottom: 0 !important;
 }
 
+.square {
+  border-radius: 0;
+}
+
 /*
  * Stealing from here:
  * https://codepen.io/fahimfoysal/pen/wvpKjKq

packages/selenium-ide/src/browser/windows/Logger/components/Logger/index.tsx renamed to packages/selenium-ide/src/browser/windows/Logger/main.tsx

@@ -16,6 +16,7 @@ const SIDELogger: React.FC = () => {
       logContainer.current?.append(
         `${new Date().toLocaleTimeString()} [${level}] ${log}\n`
       )
+      console.log(logContainer.current?.scrollHeight)
       window.scrollTo(0, logContainer.current?.scrollHeight ?? 0)
     }
     window.sideAPI.system.onLog.addListener(handleLog)
@@ -25,9 +26,8 @@ const SIDELogger: React.FC = () => {
   }, [logContainer])
   return (
     <>
-      <pre ref={logContainer} style={consoleStyle} />
-      <div className="p-1 pos-fixed" style={{ top: 0, right: 0 }}>
-        <Paper className="p-1" elevation={3}>
+      <div className="p-1 pos-abs" style={{ top: 0, right: 0 }}>
+        <Paper className="p-1" elevation={3} square>
           <IconButton
             onClick={() => {
               if (logContainer.current) {
@@ -39,6 +39,11 @@ const SIDELogger: React.FC = () => {
           </IconButton>
         </Paper>
       </div>
+      <pre
+        className="fill overflow-y"
+        ref={logContainer}
+        style={consoleStyle}
+      />
     </>
   )
 }

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import AppWrapper from 'browser/components/AppWrapper'
 import renderWhenReady from 'browser/helpers/renderWhenReady'
-import SIDELogger from './components/Logger'
+import SIDELogger from './main'
 
 const ProjectPlaybackControls = () =>(
   <AppWrapper>

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

@@ -1,22 +1,6 @@
 import { WindowConfig } from 'browser/types'
-import Electron from 'electron'
 
-const dimensions = {
-  height: 600,
-  width: 800,
-}
-export const window: WindowConfig['window'] = () => {
-  const display = Electron.screen.getPrimaryDisplay()
-  return {
-    ...dimensions,
-    x:
-      Math.floor(display.bounds.width / 2) -
-      Math.floor(dimensions.width / 2) -
-      275,
-    y:
-      Math.floor(display.bounds.height / 2) -
-      Math.floor(dimensions.height / 2) -
-      50,
-    title: 'Playback Window',
-  }
-}
+export const window: WindowConfig['window'] = () => ({
+  title: 'Playback Window',
+  resizable: false,
+})

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

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import React from 'react'
+
+const ProjectPlaybackWindow = () => (
+  <Box className="fill flex flex-col pos-rel">
+    <Box className="flex flex-1 width-100" />
+    <Paper className="flex flex-initial p-5 width-100">
+      <Box className="block width-100">
+        <Typography align="center" variant="subtitle1">
+          This is where recording and playback will occur
+        </Typography>
+      </Box>
+    </Paper>
+    <Box className="flex flex-1 width-100" />
+  </Box>
+)
+
+export default ProjectPlaybackWindow