objs-core 2.2.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,18 @@
1
+ {
2
+ "manifest_version": 3,
3
+ "name": "Objs Test Recorder",
4
+ "version": "2.4.0",
5
+ "description": "Record and replay Objs browser tests (Objs 2.4). Package for your organization — not distributed on the public Chrome Web Store.",
6
+ "permissions": ["storage", "scripting", "activeTab", "tabs"],
7
+ "host_permissions": ["<all_urls>"],
8
+ "background": {
9
+ "service_worker": "background.js"
10
+ },
11
+ "action": {
12
+ "default_title": "Objs tests",
13
+ "default_popup": "sidepanel.html"
14
+ },
15
+ "icons": {
16
+ "128": "icons/icon128.png"
17
+ }
18
+ }
@@ -0,0 +1,455 @@
1
+ /* Themes: match examples/recording .dev-panel (dark) + light panel */
2
+ :root {
3
+ font-family: system-ui, sans-serif;
4
+ font-size: 13px;
5
+ }
6
+
7
+ html[data-theme="light"] {
8
+ color-scheme: light;
9
+ --sp-bg: #f8fafc;
10
+ --sp-text: #0f172a;
11
+ --sp-muted: #64748b;
12
+ --sp-hdr-border: #e2e8f0;
13
+ --sp-acc-border: #cbd5e1;
14
+ --sp-acc-bg: #fff;
15
+ --sp-acc-head-bg: #f1f5f9;
16
+ --sp-acc-head-border: #e2e8f0;
17
+ --sp-inp-bg: #fff;
18
+ --sp-inp-border: #cbd5e1;
19
+ --sp-inp-color: #0f172a;
20
+ --sp-lbl: #475569;
21
+ --sp-toolbar-chk: #475569;
22
+ --sp-status: #64748b;
23
+ --sp-hint: #64748b;
24
+ --sp-btn-outline-bg: #fff;
25
+ --sp-btn-outline-border: #94a3b8;
26
+ --sp-btn-outline-color: #334155;
27
+ --sp-delete: #94a3b8;
28
+ --sp-delete-hover: #64748b;
29
+ --sp-name-focus: #2563eb;
30
+ --sp-rec: #dc2626;
31
+ --sp-stop: #1e293b;
32
+ --sp-play: #2563eb;
33
+ }
34
+
35
+ html[data-theme="dark"] {
36
+ color-scheme: dark;
37
+ --sp-bg: #0f172a;
38
+ --sp-text: #e2e8f0;
39
+ --sp-muted: #94a3b8;
40
+ --sp-hdr-border: #1e293b;
41
+ --sp-acc-border: #1e293b;
42
+ --sp-acc-bg: #0a0f1e;
43
+ --sp-acc-head-bg: #0a0f1e;
44
+ --sp-acc-head-border: #1e293b;
45
+ --sp-inp-bg: #0a0f1e;
46
+ --sp-inp-border: #334155;
47
+ --sp-inp-color: #e2e8f0;
48
+ --sp-lbl: #94a3b8;
49
+ --sp-toolbar-chk: #94a3b8;
50
+ --sp-status: #94a3b8;
51
+ --sp-hint: #64748b;
52
+ --sp-btn-outline-bg: transparent;
53
+ --sp-btn-outline-border: #334155;
54
+ --sp-btn-outline-color: #94a3b8;
55
+ --sp-delete: #94a3b8;
56
+ --sp-delete-hover: #cbd5e1;
57
+ --sp-name-focus: #38bdf8;
58
+ --sp-rec: #ef4444;
59
+ --sp-stop: #475569;
60
+ --sp-play: #16a34a;
61
+ }
62
+
63
+ body {
64
+ margin: 0;
65
+ padding: 10px 12px 16px;
66
+ min-width: 320px;
67
+ max-width: 560px;
68
+ background: var(--sp-bg);
69
+ color: var(--sp-text);
70
+ }
71
+
72
+ .hdr {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: space-between;
76
+ gap: 10px;
77
+ margin-bottom: 8px;
78
+ padding-bottom: 8px;
79
+ border-bottom: 1px solid var(--sp-hdr-border);
80
+ }
81
+
82
+ .hdr__title {
83
+ margin: 0;
84
+ font-size: 15px;
85
+ font-weight: 700;
86
+ color: var(--sp-text);
87
+ flex: 1;
88
+ min-width: 0;
89
+ }
90
+
91
+ html[data-theme="dark"] .hdr__title {
92
+ font-size: 0.8125rem;
93
+ font-weight: 700;
94
+ text-transform: uppercase;
95
+ letter-spacing: 0.08em;
96
+ color: #94a3b8;
97
+ }
98
+
99
+ .hdr__actions {
100
+ display: flex;
101
+ align-items: center;
102
+ gap: 8px;
103
+ flex-shrink: 0;
104
+ }
105
+
106
+ .hdr__icon-btn {
107
+ flex-shrink: 0;
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ width: 32px;
112
+ height: 32px;
113
+ padding: 0;
114
+ border: 1.5px solid var(--sp-btn-outline-border);
115
+ border-radius: 8px;
116
+ background: var(--sp-btn-outline-bg);
117
+ color: var(--sp-btn-outline-color);
118
+ cursor: pointer;
119
+ transition: opacity 0.15s, border-color 0.15s, color 0.15s;
120
+ }
121
+
122
+ .hdr__icon-btn:hover {
123
+ opacity: 0.9;
124
+ border-color: #64748b;
125
+ color: #e2e8f0;
126
+ }
127
+
128
+ html[data-theme="light"] .hdr__icon-btn:hover {
129
+ color: #334155;
130
+ }
131
+
132
+ .hdr__theme {
133
+ flex-shrink: 0;
134
+ width: 32px;
135
+ height: 32px;
136
+ padding: 0;
137
+ border: 1.5px solid var(--sp-btn-outline-border);
138
+ border-radius: 8px;
139
+ background: var(--sp-btn-outline-bg);
140
+ color: var(--sp-btn-outline-color);
141
+ font-size: 16px;
142
+ line-height: 1;
143
+ cursor: pointer;
144
+ transition: opacity 0.15s, border-color 0.15s, color 0.15s;
145
+ }
146
+
147
+ .hdr__theme:hover {
148
+ opacity: 0.9;
149
+ border-color: #64748b;
150
+ color: #e2e8f0;
151
+ }
152
+
153
+ html[data-theme="light"] .hdr__theme:hover {
154
+ color: #334155;
155
+ }
156
+
157
+ .toolbar {
158
+ margin-bottom: 10px;
159
+ }
160
+
161
+ .toolbar--row {
162
+ display: flex;
163
+ align-items: center;
164
+ justify-content: space-between;
165
+ gap: 10px;
166
+ flex-wrap: wrap;
167
+ }
168
+
169
+ .toolbar__cluster {
170
+ display: flex;
171
+ align-items: center;
172
+ gap: 8px;
173
+ flex-wrap: wrap;
174
+ }
175
+
176
+ .toolbar__chk {
177
+ display: flex;
178
+ align-items: center;
179
+ gap: 6px;
180
+ margin: 0;
181
+ font-size: 12px;
182
+ color: var(--sp-toolbar-chk);
183
+ white-space: nowrap;
184
+ cursor: pointer;
185
+ user-select: none;
186
+ }
187
+
188
+ .toolbar__chk input {
189
+ cursor: pointer;
190
+ accent-color: #2563eb;
191
+ }
192
+
193
+ .accordion {
194
+ display: flex;
195
+ flex-direction: column;
196
+ gap: 8px;
197
+ }
198
+
199
+ .acc-item {
200
+ border: 1px solid var(--sp-acc-border);
201
+ border-radius: 12px;
202
+ background: var(--sp-acc-bg);
203
+ overflow: hidden;
204
+ }
205
+
206
+ .acc-item--open .acc-body {
207
+ display: block;
208
+ }
209
+
210
+ .acc-item--open .acc-chevron {
211
+ transform: rotate(90deg);
212
+ }
213
+
214
+ .acc-head {
215
+ display: flex;
216
+ flex-wrap: wrap;
217
+ align-items: center;
218
+ gap: 6px;
219
+ padding: 8px 10px;
220
+ background: var(--sp-acc-head-bg);
221
+ border-bottom: 1px solid var(--sp-acc-head-border);
222
+ }
223
+
224
+ .acc-chevron {
225
+ border: none;
226
+ background: transparent;
227
+ cursor: pointer;
228
+ font-size: 10px;
229
+ padding: 2px 4px;
230
+ color: var(--sp-muted);
231
+ transition: transform 0.15s;
232
+ }
233
+
234
+ .acc-name {
235
+ flex: 1;
236
+ min-width: 100px;
237
+ padding: 4px 8px;
238
+ border: 1px solid var(--sp-inp-border);
239
+ border-radius: 6px;
240
+ font: inherit;
241
+ font-weight: 600;
242
+ background: var(--sp-inp-bg);
243
+ color: var(--sp-inp-color);
244
+ }
245
+
246
+ .acc-name:focus {
247
+ outline: 2px solid var(--sp-name-focus);
248
+ outline-offset: 0;
249
+ }
250
+
251
+ .acc-head .btn {
252
+ padding: 4px 8px;
253
+ font-size: 11px;
254
+ }
255
+
256
+ .acc-head .btn.acc-head__delete {
257
+ margin-left: auto;
258
+ flex-shrink: 0;
259
+ background: transparent;
260
+ border: none;
261
+ border-radius: 4px;
262
+ color: var(--sp-delete);
263
+ font-weight: 500;
264
+ padding: 2px 6px;
265
+ line-height: 1;
266
+ }
267
+
268
+ .acc-head .btn.acc-head__delete:hover {
269
+ color: var(--sp-delete-hover);
270
+ background: transparent;
271
+ }
272
+
273
+ .acc-head .btn.acc-head__delete:active {
274
+ color: var(--sp-text);
275
+ }
276
+
277
+ .acc-body {
278
+ display: none;
279
+ padding: 10px;
280
+ }
281
+
282
+ .acc-row {
283
+ margin-bottom: 8px;
284
+ }
285
+
286
+ .lbl {
287
+ display: block;
288
+ font-size: 11px;
289
+ font-weight: 600;
290
+ color: var(--sp-lbl);
291
+ margin-bottom: 4px;
292
+ }
293
+
294
+ .inp {
295
+ width: 100%;
296
+ box-sizing: border-box;
297
+ padding: 6px 8px;
298
+ border: 1px solid var(--sp-inp-border);
299
+ border-radius: 6px;
300
+ font: inherit;
301
+ background: var(--sp-inp-bg);
302
+ color: var(--sp-inp-color);
303
+ }
304
+
305
+ .ta {
306
+ width: 100%;
307
+ min-height: 200px;
308
+ box-sizing: border-box;
309
+ padding: 8px;
310
+ border: 1px solid var(--sp-inp-border);
311
+ border-radius: 6px;
312
+ font: 11px/1.35 ui-monospace, monospace;
313
+ resize: vertical;
314
+ background: var(--sp-inp-bg);
315
+ color: var(--sp-inp-color);
316
+ }
317
+
318
+ .btn {
319
+ padding: 6px 10px;
320
+ border: none;
321
+ border-radius: 6px;
322
+ font: inherit;
323
+ font-weight: 600;
324
+ cursor: pointer;
325
+ }
326
+
327
+ .btn:disabled {
328
+ opacity: 0.45;
329
+ cursor: not-allowed;
330
+ }
331
+
332
+ .btn--rec {
333
+ background: var(--sp-rec);
334
+ color: #fff;
335
+ }
336
+
337
+ .btn--stop {
338
+ background: var(--sp-stop);
339
+ color: #fff;
340
+ }
341
+
342
+ .btn--play {
343
+ background: var(--sp-play);
344
+ color: #fff;
345
+ }
346
+
347
+ .btn--outline {
348
+ background: var(--sp-btn-outline-bg);
349
+ border: 1px solid var(--sp-btn-outline-border);
350
+ color: var(--sp-btn-outline-color);
351
+ }
352
+
353
+ .btn--sm {
354
+ padding: 4px 8px;
355
+ font-size: 11px;
356
+ }
357
+
358
+ .acc-observe-line {
359
+ display: flex;
360
+ align-items: center;
361
+ flex-wrap: wrap;
362
+ gap: 8px;
363
+ }
364
+
365
+ .acc-observe-line .acc-observe {
366
+ flex: 1;
367
+ min-width: 0;
368
+ }
369
+
370
+ .acc-observe-line .acc-autotag {
371
+ flex: 0 0 4.75rem;
372
+ max-width: 6rem;
373
+ min-width: 3rem;
374
+ }
375
+
376
+ .acc-observe-line .btn--rec,
377
+ .acc-observe-line .btn--stop {
378
+ flex-shrink: 0;
379
+ }
380
+
381
+ .acc-rec-settings {
382
+ margin-bottom: 8px;
383
+ border: 1px solid var(--sp-acc-border);
384
+ border-radius: 8px;
385
+ background: var(--sp-acc-bg);
386
+ overflow: hidden;
387
+ }
388
+
389
+ .acc-rec-settings__summary {
390
+ cursor: pointer;
391
+ padding: 6px 10px;
392
+ font-size: 11px;
393
+ font-weight: 600;
394
+ color: var(--sp-lbl);
395
+ list-style: none;
396
+ user-select: none;
397
+ }
398
+
399
+ .acc-rec-settings__summary::-webkit-details-marker {
400
+ display: none;
401
+ }
402
+
403
+ .acc-rec-settings__inner {
404
+ padding: 6px 10px 10px;
405
+ border-top: 1px solid var(--sp-acc-head-border);
406
+ display: flex;
407
+ flex-direction: column;
408
+ gap: 6px;
409
+ }
410
+
411
+ .acc-rec-settings__row {
412
+ display: flex;
413
+ align-items: flex-start;
414
+ gap: 8px;
415
+ font-size: 11px;
416
+ color: var(--sp-toolbar-chk);
417
+ cursor: pointer;
418
+ margin: 0;
419
+ }
420
+
421
+ .acc-rec-settings__row input {
422
+ margin-top: 2px;
423
+ flex-shrink: 0;
424
+ accent-color: #2563eb;
425
+ }
426
+
427
+ .acc-actions-below {
428
+ display: flex;
429
+ flex-wrap: wrap;
430
+ align-items: center;
431
+ gap: 6px;
432
+ margin-top: 4px;
433
+ }
434
+
435
+ .status {
436
+ font-size: 11px;
437
+ color: var(--sp-status);
438
+ margin-top: 10px;
439
+ min-height: 1em;
440
+ transition: opacity 0.2s ease;
441
+ }
442
+
443
+ .status.status--hidden {
444
+ opacity: 0;
445
+ min-height: 0;
446
+ margin-top: 0;
447
+ overflow: hidden;
448
+ pointer-events: none;
449
+ }
450
+
451
+ .hint {
452
+ font-size: 10px;
453
+ color: var(--sp-hint);
454
+ margin-top: 4px;
455
+ }
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Objs Extension v.2.4</title>
7
+ <link rel="stylesheet" href="sidepanel.css" />
8
+ </head>
9
+ <body>
10
+ <header class="hdr">
11
+ <h1 class="hdr__title">Objs Extension v.2.4</h1>
12
+ <div class="hdr__actions">
13
+ <button
14
+ type="button"
15
+ id="btn-show-overlay"
16
+ class="hdr__icon-btn"
17
+ title="Show test results on the page"
18
+ aria-label="Show test results on the page"
19
+ >
20
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
21
+ <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
22
+ <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
23
+ <path d="M9 14l2 2 4-4" />
24
+ </svg>
25
+ </button>
26
+ <button type="button" id="btn-theme" class="hdr__theme" title="Switch to light theme" aria-label="Switch to light theme">☀</button>
27
+ </div>
28
+ </header>
29
+
30
+ <div class="toolbar toolbar--row">
31
+ <div class="toolbar__cluster">
32
+ <button type="button" id="btn-new-global" class="btn btn--sm btn--outline">+ New test</button>
33
+ <button type="button" id="btn-import-global" class="btn btn--sm btn--outline">Import…</button>
34
+ </div>
35
+ <label class="toolbar__chk">
36
+ <input type="checkbox" id="chk-show-succeeded" checked />
37
+ Show succeeded
38
+ </label>
39
+ </div>
40
+
41
+ <div id="accordion-root" class="accordion"></div>
42
+
43
+ <input type="file" id="file-import-hidden" accept=".js,.json,.ts,text/javascript,application/json" hidden />
44
+ <input
45
+ type="file"
46
+ id="file-import-multi-hidden"
47
+ accept=".js,.json,.ts,text/javascript,application/json"
48
+ multiple
49
+ hidden
50
+ />
51
+
52
+ <footer class="status status--hidden" id="status" aria-live="polite"></footer>
53
+
54
+ <script src="sidepanel.js" type="module"></script>
55
+ </body>
56
+ </html>