Skip to content

Commit c9720ba

Browse files
konfrontendazhawkes
konfrontend
and
azhawkes
authored
L-914 Record Click events when significant (#28)
* Move to vite * Use webext-bridge for messaging * Support firefox * Build to dist/target * Use npm version of finder.js. Update README * Testing * Remove Speedway logo * Testing... * Fix firefox's XrayVision error * Support for alternative selectors * Fix typo * Register content scripts on document_start * Record mouseenter and mouseover events as hover steps * Filtering mouseover records. If the hover target has an ancestor with an event listener, return the original event target instead of the ancestor. Mouseover and mouseenter events only. * Use browser recorder options * Mess with the styles a bit. --------- Co-authored-by: Andy Hawkes <[email protected]>
1 parent a031cc4 commit c9720ba

Some content is hidden

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

41 files changed

+4909
-1509
lines changed

Diff for: ‎.editorconfig

+1
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ end_of_line = lf
88
insert_final_newline = true
99
trim_trailing_whitespace = true
1010
max_line_length = off
11+
ij_javascript_use_double_quotes = false

Diff for: ‎.eslintignore

-1
This file was deleted.

Diff for: ‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
manifest.json
21
.idea/
2+
node_modules
3+
dist
4+
.webextrc

Diff for: ‎.webextrc.sample

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
chromiumBinary: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
2+
firefoxDesktop: /Applications/Firefox.app/Contents/MacOS/firefox
3+
startUrl:
4+
- http://localhost:8082/dashboard/

Diff for: ‎README.md

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
# Loadster Recorder Browser Extension
22

3-
This is the source code for the Loadster Recorder extension in the
4-
[Chrome Web Store](https://chrome.google.com/webstore/detail/loadster-recorder/bkhfnmahbfjemfpgehoolkhhdhbidaan)
3+
This is the source code for the Loadster Recorder extension in the
4+
[Chrome Web Store](https://chrome.google.com/webstore/detail/loadster-recorder/bkhfnmahbfjemfpgehoolkhhdhbidaan)
55
and [Firefox Add-ons Directory](https://addons.mozilla.org/en-US/firefox/addon/loadster-recorder/).
66

7-
Its purpose is to assist you with creating [Loadster](https://loadster.app) and [Speedway](https://speedway.app)
7+
Its purpose is to assist you with creating [Loadster](https://loadster.app) and [Speedway](https://speedway.app)
88
test scripts by recording your browser activity (only when recording is enabled).
99

10-
It then collates the browser events into a test script that you can then edit and play back.
11-
Once you're satisfied with your script, launch a load test with hundreds or thousands
10+
It then collates the browser events into a test script that you can then edit and play back.
11+
Once you're satisfied with your script, launch a load test with hundreds or thousands
1212
of bots running your script simultaneously in Loadster, or use it for site monitoring in Speedway.
1313

1414
To learn more about Loadster and load testing in general, check out [Loadster](https://loadster.app).
1515
To see how you can use the same scripts for site monitoring, have a look at [Speedway](https://speedway.app).
1616

1717
## About this project
1818

19-
While Loadster is a commercial product, our browser extension is open source under the
20-
[Apache License](LICENSE). We've put the source code on GitHub because we want you to be able to
19+
While Loadster is a commercial product, our browser extension is open source under the
20+
[Apache License](LICENSE). We've put the source code on GitHub because we want you to be able to
2121
freely inspect the extension's source code and understand how it works.
2222

2323
If you have any questions about the extension or its licensing, please contact [[email protected]](mailto:[email protected]).
2424

2525
## Libraries
2626

27-
* [@medv/finder](https://www.npmjs.com/package/@medv/finder) - unminified transpiled version included in source
28-
* [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) - minified version included, thanks to Mozilla
27+
* [@medv/finder](https://www.npmjs.com/package/@medv/finder) - The CSS Selector Generator
28+
* [webext-bridge](https://www.npmjs.com/package/webext-bridge) - Messaging in WebExtensions made super easy. Out of the box.
29+
* [webextension-polyfill](https://www.npmjs.com/package/webextension-polyfill) - WebExtension browser API Polyfill

Diff for: ‎eslint.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from "@eslint/js";
2+
import globals from 'globals';
3+
4+
export default [
5+
{
6+
ignores: ['dist/**', 'bk/**'],
7+
},
8+
js.configs.recommended,
9+
{
10+
languageOptions: {
11+
globals: {
12+
...globals.browser
13+
}
14+
},
15+
rules: {
16+
semi: 'error',
17+
'object-curly-spacing': ['error', 'always'],
18+
'no-unused-vars': 'warn',
19+
'no-prototype-builtins': 'warn',
20+
'no-useless-escape': 'warn'
21+
}
22+
}
23+
];

Diff for: ‎images/speedway-logo.svg

-45
This file was deleted.

Diff for: ‎index.html

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!doctype html>
2+
<!--
3+
This page is shown when the extension button is clicked, because the
4+
"browser_action" field in manifest.json contains the "default_popup" key with
5+
value "index.html".
6+
-->
7+
<html>
8+
<head>
9+
<title>Loadster Recorder Browser Extension</title>
10+
<style>
11+
body {
12+
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
13+
font-size: 100%;
14+
background: #f9f9f9;
15+
color: #000000;
16+
-webkit-touch-callout: none;
17+
-webkit-user-select: none;
18+
-moz-user-select: none;
19+
-ms-user-select: none;
20+
cursor: default;
21+
user-select: none !important;
22+
padding: 0;
23+
margin: 0;
24+
width: 250px;
25+
}
26+
27+
.logo-bar {
28+
display: flex;
29+
align-items: center;
30+
}
31+
32+
.logo {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
align-content: center;
37+
flex-direction: column;
38+
padding: 0 40px;
39+
min-height: 100px;
40+
font-size: 10px;
41+
font-weight: bold;
42+
text-decoration: none;
43+
flex-grow: 1;
44+
color: white;
45+
text-transform: uppercase;
46+
background-repeat: no-repeat;
47+
background-position: center;
48+
background-size: contain;
49+
}
50+
51+
.logo span {
52+
transform: skewX(-9deg);
53+
}
54+
55+
#loadster {
56+
background: #2d2d2d;
57+
}
58+
59+
.panel {
60+
background: #2d2d2d;
61+
clear: both;
62+
margin: 0 0;
63+
padding: 50px 0;
64+
width: 100%;
65+
}
66+
67+
@keyframes pulsate {
68+
0% {
69+
opacity: 1.0;
70+
}
71+
50% {
72+
opacity: 0.5;
73+
}
74+
100% {
75+
opacity: 1.0;
76+
}
77+
}
78+
79+
#rec {
80+
width: 25px;
81+
height: 25px;
82+
border-radius: 50%;
83+
background: rgba(82, 32, 32, 1);
84+
display: flex;
85+
flex-direction: column;
86+
align-items: center;
87+
justify-content: center;
88+
margin: 10px;
89+
}
90+
91+
.rec-led {
92+
width: 25px;
93+
height: 25px;
94+
border-radius: 50%;
95+
background: #e54904;
96+
box-shadow: 0 0 10px #e54904;
97+
opacity: 0;
98+
}
99+
100+
#status-panel {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
justify-content: center;
105+
}
106+
107+
#status-panel.enabled .rec-led {
108+
animation: pulsate 1.5s ease-in-out;
109+
animation-iteration-count: infinite;
110+
}
111+
112+
#status-panel #status::after {
113+
text-transform: uppercase;
114+
font-size: 12px;
115+
font-weight: bold;
116+
color: #808080;
117+
content: "Not Recording";
118+
}
119+
120+
#status-panel.enabled #status::after {
121+
color: #fff;
122+
content: "Recording Script";
123+
}
124+
125+
</style>
126+
<script src="src/popup.js"></script>
127+
</head>
128+
<body>
129+
<div id="status-panel" class="panel">
130+
<div id="rec">
131+
<div class="rec-led"></div>
132+
</div>
133+
<div id="status"></div>
134+
</div>
135+
<div class="logo-bar">
136+
<a href="https://loadster.app" target="_blank" class="logo" id="loadster">
137+
<img title="Loadster" src="loadster-logo.svg"/>
138+
</a>
139+
</div>
140+
</body>
141+
</html>
142+

Diff for: ‎js/blinker.js

-24
This file was deleted.

0 commit comments

Comments
 (0)