Skip to content

Commit 2da0018

Browse files
toddtarsitoddtarsi
committed
alpha v80 release candidate
avoids resetting window url on record start adds instructions for debugging connection issues (-X flag on side-runner) changes the nsis install to be configurable to help others help me selects a test automatically when loading a project if none is found adds actual window size controls
1 parent b137f3d commit 2da0018

File tree

36 files changed

+512
-162
lines changed

36 files changed

+512
-162
lines changed

‎packages/selenium-ide/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "selenium-ide",
3-
"version": "4.0.1-alpha.79",
3+
"version": "4.0.1-alpha.80",
44
"private": false,
55
"description": "Selenium IDE electron app",
66
"author": "Todd <[email protected]>",
@@ -48,7 +48,7 @@
4848
],
4949
"directories": {
5050
"buildResources": "resources"
51-
},
51+
},
5252
"productName": "Selenium IDE",
5353
"mac": {
5454
"target": {
@@ -77,6 +77,9 @@
7777
"win": {
7878
"target": "nsis"
7979
},
80+
"nsis": {
81+
"oneClick": false
82+
},
8083
"linux": {
8184
"target": "AppImage"
8285
},
@@ -110,7 +113,7 @@
110113
"@seleniumhq/code-export-python-pytest": "^4.0.0-alpha.4",
111114
"@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.3",
112115
"@seleniumhq/get-driver": "^4.0.0-alpha.3",
113-
"@seleniumhq/side-api": "^4.0.0-alpha.44",
116+
"@seleniumhq/side-api": "^4.0.0-alpha.45",
114117
"@seleniumhq/side-commons": "^4.0.0-alpha.2",
115118
"@seleniumhq/side-model": "^4.0.0-alpha.5",
116119
"@seleniumhq/side-runtime": "^4.0.0-alpha.35",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const SIDEAppBar: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> =
1313
tab,
1414
}) => {
1515
return (
16-
<Paper className="flex flex-row width-100" elevation={15} square>
16+
<Paper className="flex flex-row width-100 z-3" elevation={1} square>
1717
<AppBarTabs setTab={setTab} tab={tab} />
1818
<div className="flex flex-1" />
1919
<TabPanel index={TESTS_TAB} value={tab}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
115115
children,
116116
className = '',
117117
disabled = false,
118-
elevation = 7,
118+
elevation = 0,
119119
onAdd,
120120
addText = "Add",
121121
onEdit,

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Paper from '@mui/material/Paper'
2+
import React from 'react'
3+
import URLBar from '../URLBar'
4+
import PlaybackDimensionControls from '../PlaybackDimensionControls'
5+
import PlaybackTabBar from '../PlaybackTabBar'
6+
import { SIDEMainProps } from '../types'
7+
8+
const PlaybackControls: React.FC<Pick<SIDEMainProps, 'session'>> = ({
9+
session,
10+
}) => {
11+
return (
12+
<div className="flex flex-col flex-initial width-100">
13+
<div className="flex flex-row flex-initial">
14+
<Paper className="flex flex-1 height-100 ps-3 z-3" elevation={2} square>
15+
<URLBar session={session} />
16+
<Paper
17+
className="flex flex-initial height-100 flex-row"
18+
elevation={0}
19+
square
20+
>
21+
<PlaybackDimensionControls session={session} />
22+
</Paper>
23+
</Paper>
24+
</div>
25+
<PlaybackTabBar />
26+
</div>
27+
)
28+
}
29+
30+
export default PlaybackControls

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import TabUnselectedIcon from '@mui/icons-material/TabUnselected'
2+
import Box from '@mui/material/Box'
3+
import TextField from '@mui/material/TextField'
4+
import Typography from '@mui/material/Typography'
5+
import React from 'react'
6+
import { SIDEMainProps } from '../types'
7+
import { Checkbox, Tooltip } from '@mui/material'
8+
9+
const {
10+
state: { set },
11+
} = window.sideAPI
12+
13+
const fieldStyle = { width: 60 }
14+
const inputProps = {
15+
sx: {
16+
paddingLeft: 0.5,
17+
paddingRight: 0.5
18+
},
19+
};
20+
21+
const PlaybackDimensionControls: React.FC<Pick<SIDEMainProps, 'session'>> = ({
22+
session,
23+
}) => {
24+
const [panelWidth, setPanelWidth] = React.useState(0)
25+
const [panelHeight, setPanelHeight] = React.useState(0)
26+
const { active, width, height } = session.state.editor.overrideWindowSize
27+
React.useEffect(() => {
28+
if (active) {
29+
return
30+
}
31+
const playbackPanel = document.querySelector(
32+
'[data-panel-id="playback-panel"]'
33+
)!
34+
const observer = new ResizeObserver((entries) => {
35+
for (let entry of entries) {
36+
const { width, height } = entry.contentRect
37+
setPanelWidth(Math.round(width))
38+
setPanelHeight(Math.round(height))
39+
}
40+
})
41+
observer.observe(playbackPanel)
42+
return () => observer.disconnect()
43+
}, [active])
44+
return (
45+
<>
46+
<Tooltip title="Force panel window dimensions (will zoom out if larger than panel and crop if smaller)">
47+
<Box
48+
className="flex flex-row flex-initial ps-3"
49+
justifyContent="center"
50+
sx={{
51+
cursor: 'pointer',
52+
}}
53+
onClick={() =>
54+
set('editor.overrideWindowSize', {
55+
active: !active,
56+
width: panelWidth,
57+
height: panelHeight,
58+
})
59+
}
60+
>
61+
<TabUnselectedIcon className="height-100" />
62+
<Checkbox checked={active} size="small" disableRipple />
63+
</Box>
64+
</Tooltip>
65+
<Box className="flex flex-col flex-initial pe-3" justifyContent="center">
66+
<Typography>W</Typography>
67+
</Box>
68+
<Box className="flex-initial py-2">
69+
<TextField
70+
disabled={!active}
71+
inputProps={inputProps}
72+
onChange={(e: any) => {
73+
const val = Number(e.target.value)
74+
if (!isNaN(val)) {
75+
set('editor.overrideWindowSize.width', val)
76+
}
77+
}}
78+
margin="none"
79+
size="small"
80+
sx={fieldStyle}
81+
value={active ? width : panelWidth}
82+
/>
83+
</Box>
84+
<Box className="flex flex-col flex-initial px-3" justifyContent="center">
85+
<Typography>H</Typography>
86+
</Box>
87+
<Box className="flex-initial pe-4 py-2">
88+
<TextField
89+
disabled={!active}
90+
inputProps={inputProps}
91+
onChange={(e: any) => {
92+
const val = Number(e.target.value)
93+
if (!isNaN(val)) {
94+
set('editor.overrideWindowSize.height', val)
95+
}
96+
}}
97+
margin="none"
98+
size="small"
99+
sx={fieldStyle}
100+
value={active ? height : panelHeight}
101+
/>
102+
</Box>
103+
</>
104+
)
105+
}
106+
107+
export default PlaybackDimensionControls

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React from 'react'
66
const ProjectPlaybackWindow = () => (
77
<Box className="fill flex flex-col pos-rel">
88
<Box className="flex flex-1 width-100" />
9-
<Paper className="flex flex-initial p-5 width-100">
9+
<Paper className="flex flex-initial p-5 width-100" elevation={0}>
1010
<Box className="block width-100">
1111
<Typography align="center" variant="subtitle1">
1212
This is where recording and playback will occur

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ const PlaybackTabBar: React.FC = () => {
3636
}, []);
3737
return (
3838
<Paper
39-
className="flex flex-initial flex-row px-3 width-100"
40-
elevation={5}
39+
className="flex flex-initial flex-row px-3 width-100 z-1"
40+
elevation={3}
4141
square
4242
sx={{
4343
height: 40,

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Clear from '@mui/icons-material/Clear'
2+
import { useMediaQuery } from '@mui/material'
23
import Box from '@mui/material/Box'
34
import IconButton from '@mui/material/IconButton'
45
import Paper from '@mui/material/Paper'
@@ -16,22 +17,25 @@ export type TabShape = {
1617
}
1718

1819
const PlaybackTab: React.FC<TabShape> = ({ focused, id, title }) => {
20+
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
21+
const colorSuffix = `.${prefersDarkMode ? 'dark' : 'light'}`
1922
return (
2023
<Paper
21-
className="flex flex-1 flex-row mw-200 mx-2 ps-3"
22-
elevation={10}
24+
className="flex flex-1 flex-row mw-200 mx-2 ps-3 text-overflow z-2"
25+
elevation={1}
2326
onClick={() => {
2427
focusPlaybackWindow(id)
2528
}}
2629
square
2730
sx={{
28-
marginBottom: focused ? 0 : 0.25,
31+
backgroundColor: `${focused ? 'success' : 'info'}${colorSuffix}`,
2932
}}
3033
>
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>
34+
<Box
35+
className="flex flex-1 flex-col height-100 text-overflow"
36+
justifyContent="center"
37+
>
38+
<Typography variant="subtitle1">{title}</Typography>
3539
</Box>
3640
<Box className="flex flex-initial">
3741
<IconButton

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from '@mui/material/Box'
2-
import Paper from '@mui/material/Paper'
32
import TextField from '@mui/material/TextField'
43
import Typography from '@mui/material/Typography'
54
import React from 'react'
@@ -11,11 +10,11 @@ const {
1110

1211
const URLBar: React.FC<Pick<SIDEMainProps, 'session'>> = ({ session }) => {
1312
return (
14-
<Paper className="flex flex-initial flex-row px-3 py-2" elevation={15} square>
13+
<>
1514
<Box className="flex flex-col flex-initial ps-4" justifyContent="center">
1615
<Typography>URL</Typography>
1716
</Box>
18-
<Box className="flex-1 px-4">
17+
<Box className="flex-1 px-3 py-2">
1918
<TextField
2019
className="width-100"
2120
onChange={(e: any) => {
@@ -28,7 +27,7 @@ const URLBar: React.FC<Pick<SIDEMainProps, 'session'>> = ({ session }) => {
2827
value={session.project.url}
2928
/>
3029
</Box>
31-
</Paper>
30+
</>
3231
)
3332
}
3433

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ body,
117117
* Height
118118
*/
119119
.height-100 {
120-
height: 100%;
120+
height: 100% !important;
121121
}
122122

123123
/**
@@ -150,10 +150,10 @@ body,
150150
* Margin
151151
*/
152152

153-
.ml-4 {
153+
.ms-4 {
154154
margin-left: 1rem !important;
155155
}
156-
.ml-5 {
156+
.ms-5 {
157157
margin-left: 1.5rem !important;
158158
}
159159

@@ -213,6 +213,12 @@ body,
213213
.pb-0 {
214214
padding-bottom: 0 !important;
215215
}
216+
.pe-3 {
217+
padding-right: 0.5rem;
218+
}
219+
.pe-4 {
220+
padding-right: 1rem;
221+
}
216222
.pt-0 {
217223
padding-top: 0 !important;
218224
}
@@ -411,4 +417,24 @@ body,
411417

412418
.justify-content-start {
413419
justify-content: flex-start !important;
414-
}
420+
}
421+
422+
.z-1 {
423+
z-index: 1;
424+
}
425+
426+
.z-2 {
427+
z-index: 2;
428+
}
429+
430+
.z-3 {
431+
z-index: 3;
432+
}
433+
434+
.z-4 {
435+
z-index: 4;
436+
}
437+
438+
.z-5 {
439+
z-index: 5;
440+
}

0 commit comments

Comments
 (0)