contextual right click

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-alpha.75",
+  "version": "4.0.1-alpha.76",
   "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.43",
+    "@seleniumhq/side-api": "^4.0.0-alpha.44",
     "@seleniumhq/side-commons": "^4.0.0-alpha.2",
     "@seleniumhq/side-model": "^4.0.0-alpha.5",
     "@seleniumhq/side-runtime": "^4.0.0-alpha.35",

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import TabPanel from '../Tab/Panel'
-import SuiteControls from '../../tabs/Suites/Controls'
-import TestControls from '../../tabs/Tests/Controls'
+import SuiteControls from '../../windows/ProjectEditor/tabs/Suites/Controls'
+import TestControls from '../../windows/ProjectEditor/tabs/Tests/Controls'
 import { SUITES_TAB, TESTS_TAB } from '../../enums/tab'
 import { SIDEMainProps } from '../types'
 import AppBarTabs from './AppBarTabs'

packages/selenium-ide/src/browser/windows/ProjectEditor/components/Drawer/EditorToolbar.tsx → packages/selenium-ide/src/browser/components/Drawer/EditorToolbar.tsx

@@ -13,24 +13,30 @@ import baseControlProps from '../Controls/BaseProps'
 export interface EditorToolbarIconsProps {
   disabled?: boolean
   onAdd?: () => void
+  addText?: string
   onEdit?: () => void
   editText?: string
   onRemove?: () => void
+  removeText?: string
   onView?: () => void
+  viewText?: string
 }
 
 export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
   disabled = false,
-  editText = 'Edit',
   onAdd,
+  addText = "Add",
   onEdit,
+  editText = 'Edit',
   onRemove,
+  removeText = 'Remove',
   onView,
+  viewText = 'View',
 }) => (
   <>
     {onRemove ? (
       <Box sx={{ flex: 0 }}>
-        <Tooltip title="Remove">
+        <Tooltip title={removeText}>
           <IconButton
             {...baseControlProps}
             color="warning"
@@ -56,30 +62,30 @@ export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
         </Tooltip>
       </Box>
     ) : null}
-    {onAdd ? (
+    {onView ? (
       <Box sx={{ flex: 0 }}>
-        <Tooltip title="Add">
+        <Tooltip title={viewText}>
           <IconButton
             {...baseControlProps}
-            color="success"
+            color="info"
             disabled={disabled}
-            onClick={onAdd}
+            onClick={onView}
           >
-            <AddIcon />
+            <VisibilityIcon />
           </IconButton>
         </Tooltip>
       </Box>
     ) : null}
-    {onView ? (
+    {onAdd ? (
       <Box sx={{ flex: 0 }}>
-        <Tooltip title="View Playback Results">
+        <Tooltip title={addText}>
           <IconButton
             {...baseControlProps}
-            color="info"
+            color="success"
             disabled={disabled}
-            onClick={onView}
+            onClick={onAdd}
           >
-            <VisibilityIcon />
+            <AddIcon />
           </IconButton>
         </Tooltip>
       </Box>
@@ -111,9 +117,13 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
   disabled = false,
   elevation = 7,
   onAdd,
+  addText = "Add",
   onEdit,
+  editText = 'Edit',
   onRemove,
+  removeText = 'Remove',
   onView,
+  viewText = 'View',
   ...props
 }) => (
   <DrawerHeader
@@ -126,9 +136,13 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
     <EditorToolbarIcons
       disabled={disabled}
       onAdd={onAdd}
+      addText={addText}
       onEdit={onEdit}
+      editText={editText}
       onRemove={onRemove}
+      removeText={removeText}
       onView={onView}
+      viewText={viewText}
     />
   </DrawerHeader>
 )

packages/selenium-ide/src/browser/windows/ProjectEditor/components/Drawer/RenamableListItem.tsx → packages/selenium-ide/src/browser/components/Drawer/RenamableListItem.tsx

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText'
 import TextField from '@mui/material/TextField'
 import { CommandState } from '@seleniumhq/side-runtime'
 import React, { FC } from 'react'
-import CommandOverlay from '../../tabs/Tests/TestCommandOverlay'
+import CommandOverlay from '../../windows/ProjectEditor/tabs/Tests/TestCommandOverlay'
 
 export interface TestListProps {
   id: string

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

@@ -15,7 +15,6 @@ const SIDELogger: React.FC = () => {
     const handleLog = (level: LogLevel, log: string) => {
       const el = logContainer.current
       if (!el) return; 
-      console.info(el.scrollHeight)
       el.append(
         `${new Date().toLocaleTimeString()} [${level}] ${log}\n`
       )

packages/selenium-ide/src/browser/windows/ProjectEditor/components/Main/Header.tsx → packages/selenium-ide/src/browser/components/Main/Header.tsx

@@ -1,6 +1,7 @@
+import Box, {BoxProps} from '@mui/material/Box'
 import { styled } from '@mui/material/styles'
 
-const MainHeader = styled('div')(() => ({
+const MainHeader: React.FC<BoxProps> = styled(Box)(() => ({
   alignItems: 'center',
   display: 'flex',
   // necessary for content to be below app bar

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import TabPanel from '../Tab/Panel'
 import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from '../../enums/tab'
-import ProjectTab from '../../tabs/Project/ProjectTab'
-import SuitesTab from '../../tabs/Suites/SuitesTab'
-import TestsTab from '../../tabs/Tests/TestsTab'
+import ProjectTab from '../../windows/ProjectEditor/tabs/Project/ProjectTab'
+import SuitesTab from '../../windows/ProjectEditor/tabs/Suites/SuitesTab'
+import TestsTab from '../../windows/ProjectEditor/tabs/Tests/TestsTab'
 import { SIDEMainProps } from '../types'
 
 const SIDEMain: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({

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

@@ -3,9 +3,9 @@ import { loadingID } from '@seleniumhq/side-api/dist/constants/loadingID'
 import React from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import Main from './components/Main'
-import { TAB, TESTS_TAB } from './enums/tab'
-import { SIDEMainProps } from './components/types'
+import Main from '../Main'
+import { TAB, TESTS_TAB } from '../../enums/tab'
+import { SIDEMainProps } from '../types'
 
 const ProjectEditor: React.FC<Pick<SIDEMainProps, 'session'>> = ({
   session,

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

@@ -408,3 +408,7 @@ body,
     -webkit-transform: rotate(360deg);
   }
 }
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}

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

@@ -15,7 +15,6 @@ export const window: WindowConfig['window'] = () => ({
   maximizable: false,
   show: false,
   skipTaskbar: true,
-  alwaysOnTop: false,
   useContentSize: false,
   modal: true,
   title: 'Window Prompt Polyfill',

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

@@ -15,7 +15,6 @@ export const window: WindowConfig['window'] = () => ({
   maximizable: false,
   show: false,
   skipTaskbar: true,
-  alwaysOnTop: false,
   useContentSize: false,
   modal: true,
   title: 'Window Prompt Polyfill',

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

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

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

@@ -58,6 +58,9 @@ function injectRecorder() {
 preload(
   {
     channels: api.channels,
+    menus: {
+      openSync: () => api.menus.openSync('playback'),
+    },
     plugins: {
       addRecorderPreprocessor: (fn) => {
         recorderProcessors.push(fn)

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/record-shortcuts.ts

@@ -1,53 +1,64 @@
-// import { ipcRenderer } from 'electron'
 import Recorder from './recorder'
-import {singleton as locatorBuilders} from './locator-builders'
+import { singleton as locatorBuilders } from './locator-builders'
 
 let recorder: Recorder
-let eleTarget: HTMLElement | null
-
-const shortcutHandler = new Map
-
-shortcutHandler.set('verifyText', function () {
-  return (eleTarget as any).innerText
-})
-shortcutHandler.set('verifyChecked', function () {
-  return ''
-})
-shortcutHandler.set('verifyElementPresent', function () {
-  return ''
-})
-shortcutHandler.set('waitForElementVisible', function () {
-  return '1000'
-})
-
-async function onContextMenu (event: any) {
-  eleTarget = event.target as HTMLElement
-  /*
-  const result = await ipcRenderer.invoke('show-shortcut-menu')
-  if (!result) {
-    eleTarget = null
-    return
+async function onContextMenu(event: any) {
+  const el = event.target as HTMLElement
+  const targets = locatorBuilders.buildAll(el);
+  const selectedCommand = await window.sideAPI.menus.openSync('playback')
+  switch (selectedCommand) {
+    case 'Record Wait For Element Present':
+      recorder.record(
+        event,
+        'waitForElementPresent',
+        targets,
+        '',
+        false,
+        null,
+        true
+      )
+      break
+    case 'Record Wait For Element Visible':
+      recorder.record(
+        event,
+        'waitForElementVisible',
+        targets,
+        '',
+        false,
+        null,
+        true
+      )
+      break
+    case 'Record Wait For Element Text':
+      recorder.record(
+        event,
+        'waitForElementText',
+        targets,
+        el.innerText,
+        false,
+        null,
+        true
+      )
+      break
+    case 'Record Wait For Element Editable':
+      recorder.record(
+        event,
+        'waitForElementEditable',
+        targets,
+        '',
+        false,
+        null,
+        true
+      )
+      break
   }
-  recorder.record(
-    event,
-    result.cmd,
-    locatorBuilders.buildAll(eleTarget),
-    shortcutHandler.get(result.cmd)(result.params)
-  )
-  */
-  recorder.record(
-    event,
-    'click',
-    locatorBuilders.buildAll(eleTarget),
-    shortcutHandler.get('click')([])
-  )
 }
 
-export function attach (_recorder: Recorder) {
+export function attach(_recorder: Recorder) {
   recorder = _recorder
   window.addEventListener('contextmenu', onContextMenu)
 }
 
-export function detach () {
+export function detach() {
   window.removeEventListener('contextmenu', onContextMenu)
-}
+}

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/recorder.ts

@@ -91,10 +91,10 @@ export default class Recorder {
     command: string,
     target: string | [string, string][],
     value: string | [string, string][],
-    insertBeforeLastCommand: boolean = false,
-    actualFrameLocation?: string
+    insertBeforeLastCommand = false,
+    actualFrameLocation: string | null = null,
+    overrideRecorder = false
   ) {
-    console.log('record', event, command, target, value, insertBeforeLastCommand)
     let newCommand: RecordNewCommandInput = {
       command,
       target,
@@ -115,7 +115,7 @@ export default class Recorder {
           newCommand = result.command
       }
     }
-    window.sideAPI.recorder.recordNewCommand(newCommand)
+    window.sideAPI.recorder.recordNewCommand(newCommand, overrideRecorder)
   }
 
   setWindowHandle(event: ExpandedMessageEvent) {