Skip to content

Commit 33c6637

Browse files
toddtarsitoddtarsi
committed
playback window tab bar
1 parent 810cca7 commit 33c6637

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+739
-447
lines changed

‎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-alpha.74",
3+
"version": "4.0.1-alpha.75",
44
"private": false,
55
"description": "Selenium IDE electron app",
66
"author": "Todd <[email protected]>",
@@ -111,7 +111,7 @@
111111
"@seleniumhq/code-export-python-pytest": "^4.0.0-alpha.4",
112112
"@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.3",
113113
"@seleniumhq/get-driver": "^4.0.0-alpha.3",
114-
"@seleniumhq/side-api": "^4.0.0-alpha.42",
114+
"@seleniumhq/side-api": "^4.0.0-alpha.43",
115115
"@seleniumhq/side-commons": "^4.0.0-alpha.2",
116116
"@seleniumhq/side-model": "^4.0.0-alpha.5",
117117
"@seleniumhq/side-runtime": "^4.0.0-alpha.35",

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ body,
110110
display: block;
111111
text-overflow: ellipsis;
112112
overflow-x: hidden;
113+
white-space: nowrap;
113114
}
114115

115116
/**
@@ -174,6 +175,16 @@ body,
174175
margin-bottom: auto;
175176
}
176177

178+
.m-0 {
179+
margin: 0;
180+
}
181+
.mb-2 {
182+
margin-bottom: 0.5rem;
183+
}
184+
.mx-2 {
185+
margin-left: 0.5rem;
186+
margin-right: 0.5rem;
187+
}
177188
.m-2 {
178189
margin: 0.5rem;
179190
}
@@ -208,10 +219,24 @@ body,
208219
.pt-4 {
209220
padding-top: 1rem;
210221
}
222+
.ps-3 {
223+
padding-left: 0.5rem;
224+
}
225+
.ps-4 {
226+
padding-left: 1rem;
227+
}
228+
.px-3 {
229+
padding-left: 0.5rem;
230+
padding-right: 0.5rem;
231+
}
211232
.px-4 {
212233
padding-left: 1rem;
213234
padding-right: 1rem;
214235
}
236+
.py-2 {
237+
padding-bottom: 0.25rem;
238+
padding-top: 0.25rem;
239+
}
215240
.py-3 {
216241
padding-bottom: 0.5rem;
217242
padding-top: 0.5rem;
@@ -221,6 +246,13 @@ body,
221246
padding-top: 1rem;
222247
}
223248

249+
/**
250+
* Width
251+
*/
252+
.mw-200 {
253+
max-width: 200px;
254+
}
255+
224256
/**
225257
* Text-Align
226258
*/

‎packages/selenium-ide/src/browser/windows/Logger/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const SIDELogger: React.FC = () => {
4242
</Paper>
4343
</div>
4444
<pre
45-
className="fill overflow-y"
45+
className="fill m-0 overflow-y"
4646
ref={logContainer}
4747
style={consoleStyle}
4848
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ export const window: WindowConfig['window'] = () => ({
66
resizable: false,
77
roundedCorners: false,
88
show: false,
9+
skipTaskbar: true,
910
title: 'Playback Window',
1011
})

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

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import IconButton from '@mui/material/IconButton'
2-
import MenuIcon from '@mui/icons-material/Menu'
31
import React from 'react'
42
import TabPanel from '../Tab/Panel'
53
import SuiteControls from '../../tabs/Suites/Controls'
@@ -9,29 +7,13 @@ import { SIDEMainProps } from '../types'
97
import AppBarTabs from './AppBarTabs'
108
import { Paper } from '@mui/material'
119

12-
const SIDEAppBar: React.FC<SIDEMainProps> = ({
13-
openDrawer,
10+
const SIDEAppBar: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
1411
session,
15-
setOpenDrawer,
1612
setTab,
1713
tab,
1814
}) => {
1915
return (
20-
<Paper className="flex flex-row width-100" elevation={5} square>
21-
<IconButton
22-
aria-label="openDrawer drawer"
23-
color="inherit"
24-
onClick={() => setOpenDrawer(true)}
25-
sx={{
26-
flex: 0,
27-
paddingX: 2,
28-
borderRadius: 0.5,
29-
...(openDrawer && { display: 'none' }),
30-
}}
31-
size="small"
32-
>
33-
<MenuIcon />
34-
</IconButton>
16+
<Paper className="flex flex-row width-100" elevation={15} square>
3517
<AppBarTabs setTab={setTab} tab={tab} />
3618
<div className="flex flex-1" />
3719
<TabPanel index={TESTS_TAB} value={tab}>

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,20 @@ export interface EditorToolbarIconsProps {
1414
disabled?: boolean
1515
onAdd?: () => void
1616
onEdit?: () => void
17+
editText?: string
1718
onRemove?: () => void
1819
onView?: () => void
1920
}
2021

2122
export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
2223
disabled = false,
24+
editText = 'Edit',
2325
onAdd,
2426
onEdit,
2527
onRemove,
2628
onView,
2729
}) => (
2830
<>
29-
{onAdd ? (
30-
<Box sx={{ flex: 0 }}>
31-
<Tooltip title="Add">
32-
<IconButton
33-
{...baseControlProps}
34-
color="success"
35-
disabled={disabled}
36-
onClick={onAdd}
37-
>
38-
<AddIcon />
39-
</IconButton>
40-
</Tooltip>
41-
</Box>
42-
) : null}
4331
{onRemove ? (
4432
<Box sx={{ flex: 0 }}>
4533
<Tooltip title="Remove">
@@ -56,7 +44,7 @@ export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
5644
) : null}
5745
{onEdit ? (
5846
<Box sx={{ flex: 0 }}>
59-
<Tooltip title="Edit">
47+
<Tooltip title={editText}>
6048
<IconButton
6149
{...baseControlProps}
6250
color="info"
@@ -68,6 +56,20 @@ export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
6856
</Tooltip>
6957
</Box>
7058
) : null}
59+
{onAdd ? (
60+
<Box sx={{ flex: 0 }}>
61+
<Tooltip title="Add">
62+
<IconButton
63+
{...baseControlProps}
64+
color="success"
65+
disabled={disabled}
66+
onClick={onAdd}
67+
>
68+
<AddIcon />
69+
</IconButton>
70+
</Tooltip>
71+
</Box>
72+
) : null}
7173
{onView ? (
7274
<Box sx={{ flex: 0 }}>
7375
<Tooltip title="View Playback Results">

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

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,29 @@ import SuitesTab from '../../tabs/Suites/SuitesTab'
66
import TestsTab from '../../tabs/Tests/TestsTab'
77
import { SIDEMainProps } from '../types'
88

9-
const SIDEMain: React.FC<
10-
Pick<
11-
SIDEMainProps,
12-
'openDrawer' | 'session' | 'setOpenDrawer' | 'setTab' | 'tab'
13-
>
14-
> = ({ openDrawer, session, setOpenDrawer, setTab, tab }) => (
9+
const SIDEMain: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
10+
session,
11+
setTab,
12+
tab,
13+
}) => (
1514
<>
1615
<TabPanel index={TESTS_TAB} value={tab}>
1716
<TestsTab
18-
openDrawer={openDrawer}
1917
session={session}
20-
setOpenDrawer={setOpenDrawer}
2118
setTab={setTab}
2219
tab={tab}
2320
/>
2421
</TabPanel>
2522
<TabPanel index={SUITES_TAB} value={tab}>
2623
<SuitesTab
27-
openDrawer={openDrawer}
2824
session={session}
29-
setOpenDrawer={setOpenDrawer}
3025
setTab={setTab}
3126
tab={tab}
3227
/>
3328
</TabPanel>
3429
<TabPanel index={PROJECT_TAB} value={tab}>
3530
<ProjectTab
36-
openDrawer={openDrawer}
3731
session={session}
38-
setOpenDrawer={setOpenDrawer}
3932
setTab={setTab}
4033
tab={tab}
4134
/>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import Paper from '@mui/material/Paper'
2+
import React from 'react'
3+
import PlaybackTab, { TabShape } from './tab'
4+
5+
const {
6+
windows: {
7+
onPlaybackWindowChanged,
8+
onPlaybackWindowClosed,
9+
onPlaybackWindowOpened,
10+
},
11+
} = window.sideAPI
12+
console.log(onPlaybackWindowChanged, onPlaybackWindowClosed, onPlaybackWindowOpened)
13+
14+
const PlaybackTabBar: React.FC = () => {
15+
const [tabs, setTabs] = React.useState<TabShape[]>([])
16+
React.useEffect(() => {
17+
onPlaybackWindowChanged.addListener((id, partialTab) => {
18+
setTabs((tabs) => {
19+
const tab = tabs.find((tab) => tab.id === id)
20+
if (!tab) return tabs
21+
return tabs.map((tab) => {
22+
if (tab.id !== id) return tab
23+
return {
24+
...tab,
25+
...partialTab,
26+
}
27+
})
28+
})
29+
});
30+
onPlaybackWindowOpened.addListener((id, {title}) => {
31+
setTabs((tabs) => [...tabs, { id, focused: false, title }])
32+
});
33+
onPlaybackWindowClosed.addListener((id) => {
34+
setTabs((tabs) => tabs.filter((tab) => tab.id !== id))
35+
});
36+
}, []);
37+
return (
38+
<Paper
39+
className="flex flex-initial flex-row px-3 width-100"
40+
elevation={5}
41+
square
42+
sx={{
43+
height: 40,
44+
}}
45+
>
46+
{tabs.map((tab) => (
47+
<PlaybackTab key={tab.id} {...tab} />
48+
))}
49+
</Paper>
50+
)
51+
}
52+
53+
export default PlaybackTabBar

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Clear from '@mui/icons-material/Clear'
2+
import Box from '@mui/material/Box'
3+
import IconButton from '@mui/material/IconButton'
4+
import Paper from '@mui/material/Paper'
5+
import Typography from '@mui/material/Typography'
6+
import React from 'react'
7+
8+
const {
9+
windows: { closePlaybackWindow, focusPlaybackWindow },
10+
} = window.sideAPI
11+
12+
export type TabShape = {
13+
id: number
14+
title: string
15+
focused: boolean
16+
}
17+
18+
const PlaybackTab: React.FC<TabShape> = ({ focused, id, title }) => {
19+
return (
20+
<Paper
21+
className="flex flex-1 flex-row mw-200 mx-2 ps-3"
22+
elevation={10}
23+
onClick={() => {
24+
focusPlaybackWindow(id)
25+
}}
26+
square
27+
sx={{
28+
marginBottom: focused ? 0 : 0.25,
29+
}}
30+
>
31+
<Box className="flex-1 text-overflow">
32+
<Box className="flex flex-col height-100" justifyContent="center">
33+
<Typography variant="subtitle1">{title}</Typography>
34+
</Box>
35+
</Box>
36+
<Box className="flex flex-initial">
37+
<IconButton
38+
onClick={(e) => {
39+
e.preventDefault()
40+
e.stopPropagation()
41+
closePlaybackWindow(id)
42+
}}
43+
sx={{ borderRadius: 0.5 }}
44+
>
45+
<Clear />
46+
</IconButton>
47+
</Box>
48+
</Paper>
49+
)
50+
}
51+
52+
export default PlaybackTab

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import FormControl from '@mui/material/FormControl'
1+
import Box from '@mui/material/Box'
22
import Paper from '@mui/material/Paper'
33
import TextField from '@mui/material/TextField'
4+
import Typography from '@mui/material/Typography'
45
import React from 'react'
56
import { SIDEMainProps } from '../types'
67

@@ -10,21 +11,23 @@ const {
1011

1112
const URLBar: React.FC<Pick<SIDEMainProps, 'session'>> = ({ session }) => {
1213
return (
13-
<Paper className="flex-initial pb-0 p-3" elevation={7} square>
14-
<FormControl fullWidth size="small">
14+
<Paper className="flex flex-initial flex-row px-3 py-2" elevation={15} square>
15+
<Box className="flex flex-col flex-initial ps-4" justifyContent="center">
16+
<Typography>URL</Typography>
17+
</Box>
18+
<Box className="flex-1 px-4">
1519
<TextField
16-
id="url"
17-
label="URL"
18-
name="url"
20+
className="width-100"
1921
onChange={(e: any) => {
2022
update({
2123
url: e.target.value,
2224
})
2325
}}
26+
margin="none"
2427
size="small"
2528
value={session.project.url}
2629
/>
27-
</FormControl>
30+
</Box>
2831
</Paper>
2932
)
3033
}

0 commit comments

Comments
 (0)