Skip to content

Commit 078c7e3

Browse files
toddtarsitoddtarsi
committed
v3 beta: enhancing ux on window resizing
also some tab highlighting this things pretty cool now :D
1 parent 0bb33b3 commit 078c7e3

26 files changed

Lines changed: 425 additions & 148 deletions

File tree

‎packages/selenium-ide/.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const pkg = import('./package.json')
1+
const pkg = require('./package.json')
22

33
module.exports = {
44
extends: './../../.eslintrc.js',

‎packages/selenium-ide/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "selenium-ide",
3-
"version": "4.0.1-beta.2",
3+
"version": "4.0.1-beta.3",
44
"private": false,
55
"description": "Selenium IDE electron app",
66
"author": "Todd <tarsitodd@gmail.com>",
@@ -121,7 +121,7 @@
121121
"@seleniumhq/code-export-python-pytest": "^4.0.1",
122122
"@seleniumhq/code-export-ruby-rspec": "^4.0.1",
123123
"@seleniumhq/get-driver": "^4.0.1",
124-
"@seleniumhq/side-api": "^4.0.2",
124+
"@seleniumhq/side-api": "^4.0.3",
125125
"@seleniumhq/side-commons": "^4.0.1",
126126
"@seleniumhq/side-model": "^4.0.1",
127127
"@seleniumhq/side-runtime": "^4.0.1",

‎packages/selenium-ide/src/browser/components/PanelNav.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ export const NavSize = 14
99

1010
const PanelNav: React.FC<PanelNavProps> = ({ children, horizontal }) => (
1111
<Paper
12-
className={horizontal ? 'draggable panel-v-nav my-1' : 'draggable panel-nav mx-1'}
12+
className={
13+
horizontal ? 'draggable panel-v-nav my-1' : 'draggable panel-nav mx-1'
14+
}
1315
square
1416
variant="outlined"
1517
>
16-
<Paper className='fill' elevation={16} square>
18+
<Paper className="fill" elevation={16} square>
1719
{children}
1820
</Paper>
1921
</Paper>

‎packages/selenium-ide/src/browser/components/PlaybackControls/index.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ const {
1313
},
1414
} = window.sideAPI
1515

16+
const tabBarSX = {
17+
borderBottom: 1,
18+
borderColor: 'grey.500',
19+
}
20+
1621
const PlaybackControls: React.FC = () => {
1722
const [tabs, setTabs] = React.useState<TabShape[]>([])
1823
React.useEffect(() => {
@@ -50,21 +55,20 @@ const PlaybackControls: React.FC = () => {
5055
})
5156
}, [])
5257
return (
53-
<div className="flex flex-col flex-initial width-100 window-drag">
58+
<Paper className="flex flex-col flex-initial width-100 window-drag">
5459
<PlaybackTabBar tabs={tabs} />
5560
<div className="flex flex-row flex-initial no-window-drag">
56-
<Paper className="flex flex-1 height-100 ps-3 z-3" elevation={2} square>
61+
<Paper
62+
className="flex flex-1 height-100 py-2 ps-3 z-3"
63+
elevation={2}
64+
square
65+
sx={tabBarSX}
66+
>
5767
<URLBar tab={tabs.find((t) => t.visible) ?? null} />
58-
<Paper
59-
className="flex flex-initial height-100 flex-row"
60-
elevation={0}
61-
square
62-
>
63-
<PlaybackDimensionControls />
64-
</Paper>
68+
<PlaybackDimensionControls />
6569
</Paper>
6670
</div>
67-
</div>
71+
</Paper>
6872
)
6973
}
7074

‎packages/selenium-ide/src/browser/components/PlaybackPanel/index.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,28 @@ import Box from '@mui/material/Box'
22
import Paper from '@mui/material/Paper'
33
import Typography from '@mui/material/Typography'
44
import React from 'react'
5+
// import { useDivMouseObserver } from 'browser/hooks/useMouseExit'
6+
// import noop from 'lodash/fp/noop'
57

6-
const ProjectPlaybackWindow = () => (
7-
<Box className="fill flex flex-col pos-rel">
8-
<Box className="flex flex-1 width-100" />
9-
<Paper className="flex flex-initial p-5 width-100" elevation={0}>
10-
<Box className="block width-100">
11-
<Typography align="center" variant="subtitle1">
12-
This is where recording and playback will occur
13-
</Typography>
14-
</Box>
15-
</Paper>
16-
<Box className="flex flex-1 width-100" />
17-
</Box>
18-
)
8+
const ProjectPlaybackWindow = () => {
9+
// const ref = useDivMouseObserver(() => {
10+
// if (document.activeElement === document.body) {
11+
// window.sideAPI.windows.shiftFocus('playback')
12+
// }
13+
// }, noop)
14+
return (
15+
<Box className="fill flex flex-col pos-rel">
16+
<Box className="flex flex-1 width-100" />
17+
<Paper className="flex flex-initial p-5 width-100" elevation={0}>
18+
<Box className="block width-100">
19+
<Typography align="center" variant="subtitle1">
20+
This is where recording and playback will occur
21+
</Typography>
22+
</Box>
23+
</Paper>
24+
<Box className="flex flex-1 width-100" />
25+
</Box>
26+
)
27+
}
1928

2029
export default ProjectPlaybackWindow

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,18 @@ const {
99
windows: { requestPlaybackWindow },
1010
} = window.sideAPI
1111

12+
const tabBarSX = {
13+
borderBottom: 1,
14+
borderColor: 'grey.500',
15+
height: 38,
16+
}
17+
1218
const PlaybackTabBar: React.FC<{ tabs: TabShape[] }> = ({ tabs }) => (
1319
<Paper
1420
className="flex flex-initial flex-row pt-2 width-100 z-1"
1521
elevation={3}
1622
square
17-
sx={{
18-
height: 38,
19-
}}
23+
sx={tabBarSX}
2024
>
2125
{tabs.map((tab) => (
2226
<PlaybackTab key={tab.id} {...tab} />

‎packages/selenium-ide/src/browser/components/PlaybackTabBar/tab.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,15 @@ export type TabShape = {
1919
visible: boolean
2020
}
2121

22-
const PlaybackTab: React.FC<TabShape> = ({ focused, id, test, title }) => {
22+
const playbackTabSX = { borderRadius: 0.5 }
23+
24+
const PlaybackTab: React.FC<TabShape> = ({
25+
focused,
26+
id,
27+
test,
28+
title,
29+
visible,
30+
}) => {
2331
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
2432
const colorSuffix = `.${prefersDarkMode ? 'dark' : 'light'}`
2533
return (
@@ -31,7 +39,8 @@ const PlaybackTab: React.FC<TabShape> = ({ focused, id, test, title }) => {
3139
}}
3240
square
3341
sx={{
34-
backgroundColor: `${focused ? 'success' : 'info'}${colorSuffix}`,
42+
backgroundColor: `${visible ? 'warning' : 'info'}${colorSuffix}`,
43+
opacity: visible ? (focused ? 1 : 0.9) : 0.7,
3544
borderRadius: '12px 12px 0 0',
3645
marginLeft: '1px',
3746
}}
@@ -49,8 +58,8 @@ const PlaybackTab: React.FC<TabShape> = ({ focused, id, test, title }) => {
4958
e.stopPropagation()
5059
closePlaybackWindow(id)
5160
}}
52-
size='small'
53-
sx={{ borderRadius: 0.5 }}
61+
size="small"
62+
sx={playbackTabSX}
5463
>
5564
<Clear />
5665
</IconButton>

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

Lines changed: 67 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,82 @@
11
import Box from '@mui/material/Box'
2+
import SIDEAppBar from 'browser/components/AppBar'
3+
import SIDEDrawer from 'browser/components/Drawer'
4+
import Main from 'browser/components/Main'
5+
import { context } from 'browser/contexts/show-drawer'
6+
import { PROJECT_TAB, TAB } from 'browser/enums/tab'
7+
import { usePanelGroup } from 'browser/hooks/usePanelGroup'
28
import React, { useContext } from 'react'
39
import { DndProvider } from 'react-dnd'
410
import { HTML5Backend } from 'react-dnd-html5-backend'
5-
import Main from '../Main'
6-
import { SIDEMainProps } from '../types'
7-
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
8-
import SIDEDrawer from '../Drawer'
9-
import { usePanelGroup } from 'browser/hooks/usePanelGroup'
10-
import SIDEAppBar from '../AppBar'
11-
import { context } from 'browser/contexts/show-drawer'
11+
import { Panel, PanelGroup } from 'react-resizable-panels'
12+
import ResizeHandle from '../ResizeHandle'
1213

13-
const ProjectEditor: React.FC<Pick<SIDEMainProps, 'setTab' | 'tab'>> = ({
14-
setTab,
15-
tab,
16-
}) => {
14+
export type PluginWindow = {
15+
name: string
16+
url: string
17+
}
18+
19+
const ProjectEditor: React.FC = () => {
20+
const [tab, setTab] = React.useState<TAB>(PROJECT_TAB)
1721
const showDrawer = useContext(context)
22+
const [pluginWindows, setPluginWindows] = React.useState<PluginWindow[]>([])
23+
React.useEffect(() => {
24+
const handler = (name: string, url: string) => {
25+
setPluginWindows((prev) => prev.concat({ name, url }))
26+
}
27+
window.sideAPI.plugins.onRequestCustomEditorPanel.addListener(handler)
28+
return () => {
29+
window.sideAPI.plugins.onRequestCustomEditorPanel.removeListener(handler)
30+
}
31+
}, [])
1832
return (
1933
<DndProvider backend={HTML5Backend}>
20-
<div className="flex flex-col height-100 pb-1 ps-1 pt-5 window-drag">
34+
<div className="flex flex-col height-100 pb-1 ps-1 pt-6 window-drag">
2135
<div className="flex-initial no-window-drag">
2236
<SIDEAppBar setTab={setTab} tab={tab} />
2337
</div>
24-
<div className="flex-1 no-window-drag">
25-
<PanelGroup
26-
direction="horizontal"
27-
id="drawer-editor"
28-
{...usePanelGroup('drawer-editor', !showDrawer)}
29-
>
30-
{showDrawer && (
31-
<>
32-
<Panel
33-
collapsible
34-
id="editor-drawer"
35-
defaultSize={25}
36-
order={1}
37-
>
38-
<SIDEDrawer tab={tab} />
38+
<PanelGroup direction="vertical" id="plugin-windows">
39+
<Panel defaultSize={100} id="plugin-windows-panel">
40+
<div className="flex-col flex-1 height-100 no-window-drag">
41+
<PanelGroup
42+
direction="horizontal"
43+
id="drawer-editor"
44+
{...usePanelGroup('drawer-editor', !showDrawer)}
45+
>
46+
{showDrawer && (
47+
<>
48+
<Panel
49+
collapsible
50+
id="editor-drawer"
51+
defaultSize={25}
52+
order={1}
53+
>
54+
<SIDEDrawer tab={tab} />
55+
</Panel>
56+
<ResizeHandle id="h-resize-1" y />
57+
</>
58+
)}
59+
<Panel defaultSize={75} id="editor-panel" order={2}>
60+
<Box className="fill flex flex-col">
61+
<Main setTab={setTab} tab={tab} />
62+
</Box>
3963
</Panel>
40-
<PanelResizeHandle className="resize-bar" id="h-resize-1" />
41-
</>
42-
)}
43-
<Panel defaultSize={75} id="editor-panel" order={2}>
44-
<Box className="fill flex flex-col">
45-
<Main setTab={setTab} tab={tab} />
46-
</Box>
47-
</Panel>
48-
</PanelGroup>
49-
</div>
64+
</PanelGroup>
65+
</div>
66+
</Panel>
67+
{pluginWindows.map((pluginWindow, index) => (
68+
<React.Fragment key={index}>
69+
<ResizeHandle id={`v-resize-${index}`} x />
70+
<Panel key={index} id={pluginWindow.name}>
71+
<iframe
72+
className="fill"
73+
src={pluginWindow.url}
74+
title={pluginWindow.name}
75+
/>
76+
</Panel>
77+
</React.Fragment>
78+
))}
79+
</PanelGroup>
5080
</div>
5181
</DndProvider>
5282
)

‎packages/selenium-ide/src/browser/components/ResizeHandle/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Paper from '@mui/material/Paper'
2+
import React from 'react'
3+
import { PanelResizeHandle } from 'react-resizable-panels'
4+
5+
export type PluginWindow = {
6+
name: string
7+
url: string
8+
}
9+
10+
const sx = {
11+
backgroundColor: 'primary.main',
12+
}
13+
14+
type ResizeHandleProps = {
15+
id: string
16+
x?: boolean
17+
y?: boolean
18+
}
19+
20+
const ResizeHandle: React.FC<ResizeHandleProps> = ({
21+
id,
22+
x = false,
23+
y = false,
24+
}) => (
25+
<PanelResizeHandle className="resize-bar" id={id}>
26+
<Paper
27+
className={React.useMemo(
28+
() =>
29+
['resize-handle', x ? 'x' : '', y ? 'y' : '']
30+
.filter(Boolean)
31+
.join(' '),
32+
[x, y]
33+
)}
34+
sx={sx}
35+
variant="outlined"
36+
/>
37+
</PanelResizeHandle>
38+
)
39+
40+
export default ResizeHandle

0 commit comments

Comments
 (0)