Skip to content

Commit b2ff047

Browse files
corevocorevo
committed
updated on page indicators
1 parent 42a73b5 commit b2ff047

File tree

5 files changed

+48
-19
lines changed

5 files changed

+48
-19
lines changed

‎packages/selenium-ide/src/content/indicator.html

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,36 @@
77
<title>Selenium IDE Recording Indicator</title>
88
<style>
99
body {
10-
font-family: Helvetica;
11-
font-size: 18px;
12-
font-weight: bold;
10+
font-family: system, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
11+
font-size: 22px;
12+
font-weight: 200;
13+
}
14+
#circle {
15+
height: 10px;
16+
width: 10px;
17+
background: #E80600;
18+
border-radius: 50%;
19+
margin: 0 10px;
20+
animation: fadeIn 1s infinite alternate;
21+
visibility: visible;
1322
}
1423
#content {
1524
color: #E80600;
1625
text-align: center;
17-
padding-top: 5px;
18-
animation: fadeIn 1s infinite alternate;
1926
}
2027
@keyframes fadeIn {
2128
from { opacity: 0; }
2229
}
2330
</style>
2431
</head>
2532
<body>
26-
<div id="content">
27-
Selenium IDE is recording...
33+
<div style="display: flex;align-items: center;flex-direction: row;margin: 15px;">
34+
<img id="ide-img" style="width: 28px;margin: 0 10px;" />
35+
<div style="height: 28px;border-left: 1px solid #c6c6c6;"></div>
36+
<div id="circle"></div>
37+
<span id="content">
38+
Selenium IDE is recording...
39+
</span>
2840
</div>
2941
<script>
3042
var url = (chrome || browser).runtime.getURL("assets/indicator.js");

‎packages/selenium-ide/src/content/indicator.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
var handleMessage = (function() {
22
var content = document.getElementById('content')
3+
var circle = document.getElementById('circle')
4+
var img = document.getElementById('ide-img')
5+
img.src = (window.chrome ? chrome : browser).runtime.getURL(
6+
'/icons/icon_menu64.png'
7+
)
38
var lastTimeoutHandle = 0
49
function resetContent() {
510
content.innerText = 'Selenium IDE is recording...'
611
content.style.color = '#E80600'
7-
content.style.animation = 'fadeIn 1s infinite alternate'
12+
circle.style.animation = 'fadeIn 1s infinite alternate'
13+
circle.style.visibility = 'visible'
814
}
915
return function(event) {
1016
if (event.data && event.data.direction === 'from-recording-module') {
1117
clearTimeout(lastTimeoutHandle)
1218
content.innerText = 'Recorded ' + event.data.command
13-
content.style.color = '#4592f9'
14-
content.style.animation = 'none'
19+
content.style.color = '#114990'
20+
circle.style.animation = 'none'
21+
circle.style.visibility = 'hidden'
1522
lastTimeoutHandle = setTimeout(resetContent, 1000)
1623
}
1724
}

‎packages/selenium-ide/src/content/record-api.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -182,14 +182,15 @@ function addRecordingIndicator() {
182182
recordingIndicator = window.document.createElement('iframe')
183183
recordingIndicator.src = browser.runtime.getURL('/indicator.html')
184184
recordingIndicator.id = 'selenium-ide-indicator'
185-
recordingIndicator.style.border = '1px solid white'
185+
recordingIndicator.style.border = '1px solid #d30100'
186+
recordingIndicator.style.borderRadius = '50px'
186187
recordingIndicator.style.position = 'fixed'
187188
recordingIndicator.style.bottom = '36px'
188189
recordingIndicator.style.right = '36px'
189-
recordingIndicator.style.width = '280px'
190-
recordingIndicator.style.height = '50px'
191-
recordingIndicator.style['background-color'] = 'whitesmoke'
192-
recordingIndicator.style['box-shadow'] = '7px 7px 10px 0 rgba(0,0,0,0.3)'
190+
recordingIndicator.style.width = '380px'
191+
recordingIndicator.style.height = '60px'
192+
recordingIndicator.style['background-color'] = '#f7f7f7'
193+
recordingIndicator.style['box-shadow'] = '0 7px 10px 0 rgba(0,0,0,0.1)'
193194
recordingIndicator.style.transition = 'bottom 100ms linear'
194195
recordingIndicator.style['z-index'] = 1000000000000000
195196
recordingIndicator.addEventListener(
@@ -218,6 +219,10 @@ function addRecordingIndicator() {
218219
},
219220
'*'
220221
)
222+
recordingIndicator.style.borderColor = 'black'
223+
setTimeout(() => {
224+
recordingIndicator.style.borderColor = '#d30100'
225+
}, 1000)
221226
sendResponse(true)
222227
}
223228
})

‎packages/selenium-ide/src/content/targetSelector.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,17 @@ class TargetSelector {
5555
const header = doc.createElement('div')
5656
header.setAttribute(
5757
'style',
58-
"pointer-events: none;display: flex;align-items: center;justify-content: center;flex-direction: row;position: fixed;top: 20%;left: 35%;right: 35%;background: whitesmoke;color: #444;font-size: 28px;line-height: 50px;z-index: 10001;font-family: system, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;box-shadow: 7px 7px 10px 0 rgba(0,0,0,0.3);border: 1px white solid;"
58+
"pointer-events: none;display: flex;align-items: center;justify-content: center;flex-direction: row;position: fixed;top: 20%;left: 50%;transform: translateX(-50%);background: #f7f7f7;color: #114990;font-size: 22px;font-weight: 200;z-index: 10001;font-family: system, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;box-shadow: 0 7px 10px 0 rgba(0,0,0,0.1);border: 1px black solid; border-radius: 50px;padding: 15px;"
5959
)
6060
const img = doc.createElement('img')
61-
img.src = browser.runtime.getURL('/icons/icon128.png')
62-
img.setAttribute('style', 'width: 28px;margin-right: 15px;')
61+
img.src = browser.runtime.getURL('/icons/icon_menu64.png')
62+
img.setAttribute('style', 'width: 28px;margin: 0 10px;')
6363
header.appendChild(img)
6464
const span = doc.createElement('span')
65+
span.setAttribute(
66+
'style',
67+
'border-left: 1px solid #c6c6c6;padding: 3px 10px;'
68+
)
6569
span.innerText = 'Select an element'
6670
header.appendChild(span)
6771
setTimeout(() => {

‎packages/selenium-ide/src/manifest.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
},
3939
"web_accessible_resources": [
4040
"icons/icon128.png",
41+
"icons/icon_menu64.png",
4142
"assets/prompt.js",
4243
"assets/indicator.js",
4344
"assets/highlight.css",
@@ -68,4 +69,4 @@
6869
"assets/background.js"
6970
]
7071
}
71-
}
72+
}

0 commit comments

Comments
 (0)