@c15t/dev-tools 2.0.0-rc.3 → 2.0.0-rc.4
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.
- package/CHANGELOG.md +9 -0
- package/dist/components/panel.d.ts.map +1 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/ui.d.ts +8 -0
- package/dist/components/ui.d.ts.map +1 -1
- package/dist/core/debug-bundle.d.ts +14 -0
- package/dist/core/debug-bundle.d.ts.map +1 -0
- package/dist/core/devtools.d.ts.map +1 -1
- package/dist/core/panel-renderer.d.ts +5 -0
- package/dist/core/panel-renderer.d.ts.map +1 -1
- package/dist/core/state-manager.d.ts.map +1 -1
- package/dist/core/store-connector.d.ts +16 -0
- package/dist/core/store-connector.d.ts.map +1 -1
- package/dist/core/store-instrumentation.d.ts +13 -0
- package/dist/core/store-instrumentation.d.ts.map +1 -0
- package/dist/index.cjs +1681 -905
- package/dist/index.js +1680 -904
- package/dist/panels/actions.d.ts +1 -0
- package/dist/panels/actions.d.ts.map +1 -1
- package/dist/panels/consents.d.ts.map +1 -1
- package/dist/panels/events.d.ts.map +1 -1
- package/dist/panels/iab.d.ts.map +1 -1
- package/dist/panels/location.d.ts.map +1 -1
- package/dist/panels/scripts.d.ts.map +1 -1
- package/dist/react.cjs +1610 -748
- package/dist/react.js +1610 -748
- package/dist/tanstack.cjs +1565 -532
- package/dist/tanstack.js +1565 -532
- package/dist/utils/preference-trigger.d.ts.map +1 -1
- package/dist/version.d.ts +1 -1
- package/package.json +9 -9
- package/tsconfig.json +9 -1
- package/dist/__tests__/components/ui.test.d.ts +0 -2
- package/dist/__tests__/components/ui.test.d.ts.map +0 -1
- package/dist/__tests__/core/override-storage.test.d.ts +0 -2
- package/dist/__tests__/core/override-storage.test.d.ts.map +0 -1
- package/dist/__tests__/core/renderer.test.d.ts +0 -2
- package/dist/__tests__/core/renderer.test.d.ts.map +0 -1
- package/dist/__tests__/core/reset-consents.test.d.ts +0 -2
- package/dist/__tests__/core/reset-consents.test.d.ts.map +0 -1
- package/dist/__tests__/core/state-manager.test.d.ts +0 -2
- package/dist/__tests__/core/state-manager.test.d.ts.map +0 -1
- package/dist/__tests__/core/store-connector.test.d.ts +0 -2
- package/dist/__tests__/core/store-connector.test.d.ts.map +0 -1
- package/dist/__tests__/panels/dom-scanner.test.d.ts +0 -2
- package/dist/__tests__/panels/dom-scanner.test.d.ts.map +0 -1
- package/dist/__tests__/panels/events.test.d.ts +0 -2
- package/dist/__tests__/panels/events.test.d.ts.map +0 -1
- package/dist/__tests__/panels/iab.test.d.ts +0 -2
- package/dist/__tests__/panels/iab.test.d.ts.map +0 -1
- package/dist/__tests__/panels/scripts.test.d.ts +0 -2
- package/dist/__tests__/panels/scripts.test.d.ts.map +0 -1
- package/dist/__tests__/utils/preference-trigger.test.d.ts +0 -2
- package/dist/__tests__/utils/preference-trigger.test.d.ts.map +0 -1
package/dist/react.js
CHANGED
|
@@ -261,21 +261,21 @@ var __webpack_modules__ = {
|
|
|
261
261
|
module.id,
|
|
262
262
|
`.toggle-bPZtik {
|
|
263
263
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
264
|
-
background-color: var(--c15t-switch-track, #
|
|
264
|
+
background-color: var(--c15t-switch-track, #d9d9d9);
|
|
265
265
|
cursor: pointer;
|
|
266
|
-
width:
|
|
267
|
-
height:
|
|
268
|
-
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
266
|
+
width: 2rem;
|
|
267
|
+
height: 1.25rem;
|
|
268
|
+
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
269
269
|
border: none;
|
|
270
270
|
align-items: center;
|
|
271
|
-
padding:
|
|
271
|
+
padding: .125rem;
|
|
272
272
|
display: inline-flex;
|
|
273
273
|
position: relative;
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
.toggle-bPZtik:focus-visible {
|
|
277
|
-
|
|
278
|
-
outline
|
|
277
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
278
|
+
outline: none;
|
|
279
279
|
}
|
|
280
280
|
|
|
281
281
|
.toggleActive-Ldlasg {
|
|
@@ -285,16 +285,16 @@ var __webpack_modules__ = {
|
|
|
285
285
|
.toggleThumb-hjGfoX {
|
|
286
286
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
287
287
|
background-color: var(--c15t-switch-thumb, #fff);
|
|
288
|
-
width:
|
|
289
|
-
height:
|
|
290
|
-
|
|
288
|
+
width: .75rem;
|
|
289
|
+
height: .75rem;
|
|
290
|
+
box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
|
|
291
|
+
transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
291
292
|
position: absolute;
|
|
292
293
|
left: 2px;
|
|
293
|
-
box-shadow: 0 1px 2px #0003;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
.toggleActive-Ldlasg .toggleThumb-hjGfoX {
|
|
297
|
-
transform: translateX(
|
|
297
|
+
transform: translateX(1rem);
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
.toggle-bPZtik:disabled, .toggleDisabled-ZcD8nZ {
|
|
@@ -307,13 +307,14 @@ var __webpack_modules__ = {
|
|
|
307
307
|
}
|
|
308
308
|
|
|
309
309
|
.badge-yA0giZ {
|
|
310
|
-
border-radius: var(--c15t-radius-
|
|
310
|
+
border-radius: var(--c15t-radius-full, 9999px);
|
|
311
311
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
312
312
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
313
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
313
314
|
white-space: nowrap;
|
|
315
|
+
justify-content: center;
|
|
314
316
|
align-items: center;
|
|
315
|
-
padding:
|
|
316
|
-
line-height: 1;
|
|
317
|
+
padding: .1875rem .4375rem;
|
|
317
318
|
display: inline-flex;
|
|
318
319
|
}
|
|
319
320
|
|
|
@@ -346,35 +347,36 @@ var __webpack_modules__ = {
|
|
|
346
347
|
justify-content: center;
|
|
347
348
|
align-items: center;
|
|
348
349
|
gap: var(--c15t-space-xs, .25rem);
|
|
349
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
350
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
350
351
|
border-radius: var(--c15t-radius-md, .5rem);
|
|
351
|
-
background-color: var(--c15t-surface, #fff);
|
|
352
|
-
min-height:
|
|
352
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
353
|
+
min-height: 2rem;
|
|
353
354
|
color: var(--c15t-text, #171717);
|
|
354
|
-
font-family:
|
|
355
|
-
font-size:
|
|
355
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
356
|
+
font-size: var(--c15t-font-size-sm, .875rem);
|
|
356
357
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
358
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
359
|
+
box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
|
|
357
360
|
cursor: pointer;
|
|
358
361
|
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
359
|
-
padding:
|
|
360
|
-
line-height: 1;
|
|
362
|
+
padding: .375rem .625rem;
|
|
361
363
|
display: inline-flex;
|
|
362
|
-
box-shadow: 0 1px 1px #0000000a;
|
|
363
364
|
}
|
|
364
365
|
|
|
365
366
|
.btn-evRVlh:hover {
|
|
366
|
-
background-color: var(--c15t-surface-
|
|
367
|
+
background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
|
|
367
368
|
border-color: var(--c15t-border-hover, #c9c9c9);
|
|
368
|
-
box-shadow: 0
|
|
369
|
+
box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
|
|
369
370
|
}
|
|
370
371
|
|
|
371
372
|
.btn-evRVlh:focus-visible {
|
|
372
|
-
|
|
373
|
-
outline
|
|
373
|
+
box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
374
|
+
outline: none;
|
|
374
375
|
}
|
|
375
376
|
|
|
376
377
|
.btn-evRVlh:active {
|
|
377
|
-
box-shadow: 0 1px 2px #
|
|
378
|
+
box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
|
|
379
|
+
transform: scale(.98);
|
|
378
380
|
}
|
|
379
381
|
|
|
380
382
|
.btn-evRVlh:disabled {
|
|
@@ -387,6 +389,7 @@ var __webpack_modules__ = {
|
|
|
387
389
|
background-color: var(--c15t-primary, #335cff);
|
|
388
390
|
border-color: var(--c15t-primary, #335cff);
|
|
389
391
|
color: var(--c15t-text-on-primary, #fff);
|
|
392
|
+
box-shadow: none;
|
|
390
393
|
}
|
|
391
394
|
|
|
392
395
|
.btnPrimary-dA6nqY:hover {
|
|
@@ -398,6 +401,7 @@ var __webpack_modules__ = {
|
|
|
398
401
|
background-color: var(--c15t-devtools-badge-error, #ef4343);
|
|
399
402
|
border-color: var(--c15t-devtools-badge-error, #ef4343);
|
|
400
403
|
color: var(--c15t-text-on-primary, #fff);
|
|
404
|
+
box-shadow: none;
|
|
401
405
|
}
|
|
402
406
|
|
|
403
407
|
.btnDanger-eDnqOX:hover {
|
|
@@ -406,10 +410,10 @@ var __webpack_modules__ = {
|
|
|
406
410
|
}
|
|
407
411
|
|
|
408
412
|
.btnSmall-TjXoqZ {
|
|
413
|
+
min-height: 1.75rem;
|
|
414
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
409
415
|
border-radius: var(--c15t-radius-sm, .375rem);
|
|
410
|
-
|
|
411
|
-
padding: 3px 8px;
|
|
412
|
-
font-size: 11px;
|
|
416
|
+
padding: .25rem .5rem;
|
|
413
417
|
}
|
|
414
418
|
|
|
415
419
|
.btnIcon-fiYQAh {
|
|
@@ -419,19 +423,22 @@ var __webpack_modules__ = {
|
|
|
419
423
|
}
|
|
420
424
|
|
|
421
425
|
.input-IeTcCs {
|
|
422
|
-
|
|
423
|
-
padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
|
|
424
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
426
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
425
427
|
border-radius: var(--c15t-radius-md, .5rem);
|
|
426
|
-
background-color: var(--c15t-surface, #fff);
|
|
428
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
429
|
+
width: 100%;
|
|
430
|
+
min-height: 2rem;
|
|
427
431
|
color: var(--c15t-text, #171717);
|
|
428
|
-
font-family:
|
|
429
|
-
font-size: var(--c15t-font-size-
|
|
430
|
-
|
|
432
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
433
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
434
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
435
|
+
transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
436
|
+
padding: .375rem .625rem;
|
|
431
437
|
}
|
|
432
438
|
|
|
433
439
|
.input-IeTcCs:focus {
|
|
434
|
-
border-color: var(--c15t-
|
|
440
|
+
border-color: var(--c15t-devtools-focus-ring, #335cff);
|
|
441
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
|
|
435
442
|
outline: none;
|
|
436
443
|
}
|
|
437
444
|
|
|
@@ -440,30 +447,35 @@ var __webpack_modules__ = {
|
|
|
440
447
|
}
|
|
441
448
|
|
|
442
449
|
.inputSmall-pJyXcL {
|
|
443
|
-
|
|
450
|
+
min-height: 1.625rem;
|
|
444
451
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
452
|
+
padding: .25rem .4375rem;
|
|
445
453
|
}
|
|
446
454
|
|
|
447
455
|
.select-byJ1WM {
|
|
448
|
-
|
|
449
|
-
padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
|
|
450
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
456
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
451
457
|
border-radius: var(--c15t-radius-md, .5rem);
|
|
452
|
-
background-color: var(--c15t-surface, #fff);
|
|
458
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
459
|
+
width: 100%;
|
|
460
|
+
min-height: 2rem;
|
|
453
461
|
color: var(--c15t-text, #171717);
|
|
454
|
-
font-family:
|
|
462
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
455
463
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
464
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
456
465
|
cursor: pointer;
|
|
466
|
+
transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
467
|
+
padding: .375rem .625rem;
|
|
457
468
|
}
|
|
458
469
|
|
|
459
470
|
.select-byJ1WM:focus {
|
|
460
|
-
border-color: var(--c15t-
|
|
471
|
+
border-color: var(--c15t-devtools-focus-ring, #335cff);
|
|
472
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
|
|
461
473
|
outline: none;
|
|
462
474
|
}
|
|
463
475
|
|
|
464
476
|
.grid-LlrmEz {
|
|
465
477
|
gap: var(--c15t-space-sm, .5rem);
|
|
466
|
-
padding: var(--c15t-space-
|
|
478
|
+
padding: var(--c15t-space-md, 1rem);
|
|
467
479
|
display: grid;
|
|
468
480
|
}
|
|
469
481
|
|
|
@@ -476,42 +488,51 @@ var __webpack_modules__ = {
|
|
|
476
488
|
}
|
|
477
489
|
|
|
478
490
|
.gridCard-Qm5xxI {
|
|
479
|
-
padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
|
|
480
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
481
|
-
border-radius: var(--c15t-radius-md, .5rem);
|
|
482
|
-
background-color: var(--c15t-surface, #fff);
|
|
483
|
-
transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
484
491
|
justify-content: space-between;
|
|
485
492
|
align-items: center;
|
|
493
|
+
gap: var(--c15t-space-sm, .5rem);
|
|
494
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
495
|
+
border-radius: var(--c15t-radius-md, .5rem);
|
|
496
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
497
|
+
min-height: 2.75rem;
|
|
498
|
+
box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
|
|
499
|
+
transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
500
|
+
padding: .5625rem .75rem;
|
|
486
501
|
display: flex;
|
|
487
502
|
}
|
|
488
503
|
|
|
489
504
|
.gridCard-Qm5xxI:hover {
|
|
490
505
|
border-color: var(--c15t-border-hover, #c9c9c9);
|
|
506
|
+
background-color: var(--c15t-devtools-surface-subtle, #fafafa);
|
|
491
507
|
}
|
|
492
508
|
|
|
493
509
|
.gridCardTitle-HjXETp {
|
|
494
510
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
495
511
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
496
512
|
color: var(--c15t-text, #171717);
|
|
513
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
497
514
|
}
|
|
498
515
|
|
|
499
516
|
.listItem-XUKGIo {
|
|
500
|
-
padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
|
|
501
|
-
border-bottom: 1px solid var(--c15t-border, #e3e3e3);
|
|
502
517
|
justify-content: space-between;
|
|
503
518
|
align-items: center;
|
|
519
|
+
gap: var(--c15t-space-sm, .5rem);
|
|
520
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
521
|
+
border-radius: var(--c15t-radius-md, .5rem);
|
|
522
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
523
|
+
margin-bottom: .375rem;
|
|
524
|
+
padding: .625rem .75rem;
|
|
504
525
|
display: flex;
|
|
505
526
|
}
|
|
506
527
|
|
|
507
528
|
.listItem-XUKGIo:last-child {
|
|
508
|
-
|
|
529
|
+
margin-bottom: 0;
|
|
509
530
|
}
|
|
510
531
|
|
|
511
532
|
.listItemContent-WDBF1N {
|
|
512
533
|
flex-direction: column;
|
|
513
534
|
flex: 1;
|
|
514
|
-
gap:
|
|
535
|
+
gap: .1875rem;
|
|
515
536
|
min-width: 0;
|
|
516
537
|
display: flex;
|
|
517
538
|
}
|
|
@@ -525,6 +546,7 @@ var __webpack_modules__ = {
|
|
|
525
546
|
.listItemDescription-E6JHyZ {
|
|
526
547
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
527
548
|
color: var(--c15t-text-muted, #737373);
|
|
549
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
528
550
|
text-overflow: ellipsis;
|
|
529
551
|
white-space: nowrap;
|
|
530
552
|
overflow: hidden;
|
|
@@ -538,8 +560,8 @@ var __webpack_modules__ = {
|
|
|
538
560
|
}
|
|
539
561
|
|
|
540
562
|
.section-a197cB {
|
|
541
|
-
|
|
542
|
-
|
|
563
|
+
border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
564
|
+
padding: .75rem 1rem;
|
|
543
565
|
}
|
|
544
566
|
|
|
545
567
|
.section-a197cB:last-child {
|
|
@@ -547,9 +569,10 @@ var __webpack_modules__ = {
|
|
|
547
569
|
}
|
|
548
570
|
|
|
549
571
|
.sectionHeader-Xcljcw {
|
|
550
|
-
margin-bottom: var(--c15t-space-sm, .5rem);
|
|
551
572
|
justify-content: space-between;
|
|
552
573
|
align-items: center;
|
|
574
|
+
gap: .5rem;
|
|
575
|
+
margin-bottom: .625rem;
|
|
553
576
|
display: flex;
|
|
554
577
|
}
|
|
555
578
|
|
|
@@ -558,47 +581,49 @@ var __webpack_modules__ = {
|
|
|
558
581
|
font-weight: var(--c15t-font-weight-semibold, 600);
|
|
559
582
|
color: var(--c15t-text-muted, #737373);
|
|
560
583
|
text-transform: uppercase;
|
|
561
|
-
letter-spacing: .
|
|
584
|
+
letter-spacing: .04em;
|
|
562
585
|
}
|
|
563
586
|
|
|
564
587
|
.overrideField-keNdpJ {
|
|
565
588
|
flex-direction: column;
|
|
566
|
-
gap:
|
|
589
|
+
gap: .3125rem;
|
|
567
590
|
margin-bottom: 0;
|
|
568
591
|
display: flex;
|
|
569
592
|
}
|
|
570
593
|
|
|
571
594
|
.overrideLabel-ApMoTw {
|
|
595
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
596
|
+
font-weight: var(--c15t-font-weight-semibold, 600);
|
|
572
597
|
color: var(--c15t-text-muted, #737373);
|
|
573
|
-
|
|
574
|
-
font-weight: 600;
|
|
598
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
575
599
|
}
|
|
576
600
|
|
|
577
601
|
.overrideHint-yCfwGt {
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
602
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
603
|
+
color: var(--c15t-text-muted, #737373);
|
|
604
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
605
|
+
margin-top: .5rem;
|
|
581
606
|
}
|
|
582
607
|
|
|
583
608
|
.overrideActions-imdcn7 {
|
|
584
|
-
border-top: 1px dashed var(--c15t-border, #e3e3e3);
|
|
609
|
+
border-top: 1px dashed var(--c15t-devtools-border-strong, #e3e3e3);
|
|
585
610
|
justify-content: space-between;
|
|
586
611
|
align-items: center;
|
|
587
|
-
gap:
|
|
588
|
-
margin-top:
|
|
589
|
-
padding-top:
|
|
612
|
+
gap: .5rem;
|
|
613
|
+
margin-top: .625rem;
|
|
614
|
+
padding-top: .625rem;
|
|
590
615
|
display: flex;
|
|
591
616
|
}
|
|
592
617
|
|
|
593
618
|
.overrideActionButtons-gYOx1e {
|
|
594
619
|
flex-wrap: wrap;
|
|
595
|
-
gap:
|
|
620
|
+
gap: .375rem;
|
|
596
621
|
display: flex;
|
|
597
622
|
}
|
|
598
623
|
|
|
599
624
|
.overrideStatus-sty_qS {
|
|
625
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
600
626
|
color: var(--c15t-text-muted, #737373);
|
|
601
|
-
font-size: 11px;
|
|
602
627
|
}
|
|
603
628
|
|
|
604
629
|
.overrideStatusDirty-OUdDMw {
|
|
@@ -606,9 +631,10 @@ var __webpack_modules__ = {
|
|
|
606
631
|
}
|
|
607
632
|
|
|
608
633
|
.infoRow-RlB_0h {
|
|
609
|
-
padding: var(--c15t-space-xs, .25rem) 0;
|
|
610
634
|
justify-content: space-between;
|
|
611
635
|
align-items: center;
|
|
636
|
+
gap: .5rem;
|
|
637
|
+
padding: .25rem 0;
|
|
612
638
|
display: flex;
|
|
613
639
|
}
|
|
614
640
|
|
|
@@ -621,6 +647,7 @@ var __webpack_modules__ = {
|
|
|
621
647
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
622
648
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
623
649
|
color: var(--c15t-text, #171717);
|
|
650
|
+
font-variant-numeric: tabular-nums;
|
|
624
651
|
font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
|
|
625
652
|
}
|
|
626
653
|
|
|
@@ -631,18 +658,27 @@ var __webpack_modules__ = {
|
|
|
631
658
|
flex-direction: column;
|
|
632
659
|
justify-content: center;
|
|
633
660
|
align-items: center;
|
|
661
|
+
gap: .375rem;
|
|
634
662
|
display: flex;
|
|
635
663
|
}
|
|
636
664
|
|
|
637
665
|
.emptyStateIcon-WHFkX8 {
|
|
666
|
+
opacity: .55;
|
|
638
667
|
width: 32px;
|
|
639
668
|
height: 32px;
|
|
640
|
-
margin-bottom: var(--c15t-space-sm, .5rem);
|
|
641
|
-
opacity: .5;
|
|
642
669
|
}
|
|
643
670
|
|
|
644
671
|
.emptyStateText-TaLvAJ {
|
|
645
672
|
font-size: var(--c15t-font-size-sm, .875rem);
|
|
673
|
+
line-height: var(--c15t-line-height-normal, 1.5);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.disconnectedState-dOtZBG {
|
|
677
|
+
padding: var(--c15t-space-xl, 2rem);
|
|
678
|
+
text-align: center;
|
|
679
|
+
font-size: var(--c15t-font-size-sm, .875rem);
|
|
680
|
+
color: var(--c15t-text-muted, #737373);
|
|
681
|
+
line-height: var(--c15t-line-height-normal, 1.5);
|
|
646
682
|
}
|
|
647
683
|
|
|
648
684
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -709,7 +745,8 @@ var __webpack_modules__ = {
|
|
|
709
745
|
infoValue: "infoValue-flMl_e",
|
|
710
746
|
emptyState: "emptyState-QcmzTQ",
|
|
711
747
|
emptyStateIcon: "emptyStateIcon-WHFkX8",
|
|
712
|
-
emptyStateText: "emptyStateText-TaLvAJ"
|
|
748
|
+
emptyStateText: "emptyStateText-TaLvAJ",
|
|
749
|
+
disconnectedState: "disconnectedState-dOtZBG"
|
|
713
750
|
};
|
|
714
751
|
const __rspack_default_export = ___CSS_LOADER_EXPORT___;
|
|
715
752
|
},
|
|
@@ -738,9 +775,9 @@ var __webpack_modules__ = {
|
|
|
738
775
|
.floatingButton-Gw8MtJ {
|
|
739
776
|
width: var(--c15t-devtools-button-size, 40px);
|
|
740
777
|
height: var(--c15t-devtools-button-size, 40px);
|
|
741
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
778
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
742
779
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
743
|
-
background-color: var(--c15t-surface, #fff);
|
|
780
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
744
781
|
box-shadow: var(--c15t-shadow-lg, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a);
|
|
745
782
|
cursor: grab;
|
|
746
783
|
z-index: var(--c15t-devtools-z-index, 99999);
|
|
@@ -768,13 +805,13 @@ var __webpack_modules__ = {
|
|
|
768
805
|
}
|
|
769
806
|
|
|
770
807
|
.floatingButton-Gw8MtJ:focus-visible {
|
|
771
|
-
|
|
772
|
-
outline
|
|
808
|
+
box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
809
|
+
outline: none;
|
|
773
810
|
}
|
|
774
811
|
|
|
775
812
|
.floatingButton-Gw8MtJ:active {
|
|
776
813
|
cursor: grabbing;
|
|
777
|
-
transform: scale(
|
|
814
|
+
transform: scale(.98);
|
|
778
815
|
}
|
|
779
816
|
|
|
780
817
|
.floatingButtonIcon-cHWefk {
|
|
@@ -815,6 +852,7 @@ var __webpack_modules__ = {
|
|
|
815
852
|
|
|
816
853
|
.backdrop-LhVMB5 {
|
|
817
854
|
background-color: var(--c15t-overlay, #00000080);
|
|
855
|
+
backdrop-filter: blur(1px);
|
|
818
856
|
z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
|
|
819
857
|
position: fixed;
|
|
820
858
|
inset: 0;
|
|
@@ -823,10 +861,10 @@ var __webpack_modules__ = {
|
|
|
823
861
|
.panel-jtWove {
|
|
824
862
|
width: var(--c15t-devtools-panel-width, 480px);
|
|
825
863
|
max-height: var(--c15t-devtools-panel-max-height, 560px);
|
|
826
|
-
background-color: var(--c15t-surface, #fff);
|
|
827
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
864
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
865
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
828
866
|
border-radius: var(--c15t-radius-lg, .75rem);
|
|
829
|
-
box-shadow: var(--c15t-shadow-lg, 0
|
|
867
|
+
box-shadow: var(--c15t-shadow-lg, 0 10px 28px #00000029);
|
|
830
868
|
z-index: calc(var(--c15t-devtools-z-index, 99999) + 2);
|
|
831
869
|
flex-direction: column;
|
|
832
870
|
display: flex;
|
|
@@ -859,11 +897,11 @@ var __webpack_modules__ = {
|
|
|
859
897
|
}
|
|
860
898
|
|
|
861
899
|
.header-xluoTr {
|
|
862
|
-
|
|
863
|
-
border-bottom: 1px solid var(--c15t-border, #e3e3e3);
|
|
900
|
+
border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
864
901
|
background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
|
|
865
902
|
justify-content: space-between;
|
|
866
903
|
align-items: center;
|
|
904
|
+
padding: .6875rem .875rem;
|
|
867
905
|
display: flex;
|
|
868
906
|
}
|
|
869
907
|
|
|
@@ -872,6 +910,7 @@ var __webpack_modules__ = {
|
|
|
872
910
|
gap: var(--c15t-space-sm, .5rem);
|
|
873
911
|
font-size: var(--c15t-font-size-sm, .875rem);
|
|
874
912
|
font-weight: var(--c15t-font-weight-semibold, 600);
|
|
913
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
875
914
|
color: var(--c15t-text, #171717);
|
|
876
915
|
display: flex;
|
|
877
916
|
}
|
|
@@ -883,9 +922,9 @@ var __webpack_modules__ = {
|
|
|
883
922
|
}
|
|
884
923
|
|
|
885
924
|
.closeButton-Yto0Nb {
|
|
886
|
-
border-radius: var(--c15t-radius-
|
|
887
|
-
width:
|
|
888
|
-
height:
|
|
925
|
+
border-radius: var(--c15t-radius-md, .5rem);
|
|
926
|
+
width: 2rem;
|
|
927
|
+
height: 2rem;
|
|
889
928
|
color: var(--c15t-text-muted, #737373);
|
|
890
929
|
cursor: pointer;
|
|
891
930
|
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
@@ -898,13 +937,13 @@ var __webpack_modules__ = {
|
|
|
898
937
|
}
|
|
899
938
|
|
|
900
939
|
.closeButton-Yto0Nb:hover {
|
|
901
|
-
background-color: var(--c15t-surface-
|
|
940
|
+
background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
|
|
902
941
|
color: var(--c15t-text, #171717);
|
|
903
942
|
}
|
|
904
943
|
|
|
905
944
|
.closeButton-Yto0Nb:focus-visible {
|
|
906
|
-
|
|
907
|
-
outline
|
|
945
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
946
|
+
outline: none;
|
|
908
947
|
}
|
|
909
948
|
|
|
910
949
|
.closeButtonIcon-fVlR1I {
|
|
@@ -912,33 +951,71 @@ var __webpack_modules__ = {
|
|
|
912
951
|
height: 16px;
|
|
913
952
|
}
|
|
914
953
|
|
|
954
|
+
.inlineActionButton-Ky8BmN {
|
|
955
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
956
|
+
border-radius: var(--c15t-radius-sm, .375rem);
|
|
957
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
958
|
+
min-height: 1.625rem;
|
|
959
|
+
color: var(--c15t-text, #171717);
|
|
960
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
961
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
962
|
+
font-weight: var(--c15t-font-weight-medium, 500);
|
|
963
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
964
|
+
cursor: pointer;
|
|
965
|
+
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
966
|
+
justify-content: center;
|
|
967
|
+
align-items: center;
|
|
968
|
+
padding: .25rem .5rem;
|
|
969
|
+
display: inline-flex;
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
.inlineActionButton-Ky8BmN:hover {
|
|
973
|
+
background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
|
|
974
|
+
border-color: var(--c15t-border-hover, #c9c9c9);
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
.inlineActionButton-Ky8BmN:focus-visible {
|
|
978
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
979
|
+
outline: none;
|
|
980
|
+
}
|
|
981
|
+
|
|
915
982
|
.content-yDMYfG {
|
|
983
|
+
scrollbar-gutter: stable;
|
|
916
984
|
overscroll-behavior: contain;
|
|
917
985
|
-webkit-overflow-scrolling: touch;
|
|
986
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
918
987
|
flex: auto;
|
|
919
988
|
min-height: 200px;
|
|
920
|
-
overflow: hidden
|
|
989
|
+
overflow: hidden scroll;
|
|
921
990
|
}
|
|
922
991
|
|
|
923
992
|
.footer-ESbmwQ {
|
|
924
|
-
|
|
925
|
-
border-top: 1px solid var(--c15t-border, #e3e3e3);
|
|
993
|
+
border-top: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
926
994
|
background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
|
|
927
995
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
928
996
|
color: var(--c15t-text-muted, #737373);
|
|
929
997
|
justify-content: space-between;
|
|
930
998
|
align-items: center;
|
|
999
|
+
gap: .5rem;
|
|
1000
|
+
padding: .5rem .75rem;
|
|
931
1001
|
display: flex;
|
|
932
1002
|
}
|
|
933
1003
|
|
|
934
1004
|
.footerStatus-rlb99A {
|
|
935
1005
|
align-items: center;
|
|
936
|
-
gap:
|
|
1006
|
+
gap: .375rem;
|
|
1007
|
+
min-width: 0;
|
|
937
1008
|
display: flex;
|
|
938
1009
|
}
|
|
939
1010
|
|
|
1011
|
+
.footerMeta-Vdtxdk {
|
|
1012
|
+
opacity: .75;
|
|
1013
|
+
white-space: nowrap;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
940
1016
|
.statusDot-hYJoej {
|
|
941
1017
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
1018
|
+
flex-shrink: 0;
|
|
942
1019
|
width: 6px;
|
|
943
1020
|
height: 6px;
|
|
944
1021
|
}
|
|
@@ -977,6 +1054,7 @@ var __webpack_modules__ = {
|
|
|
977
1054
|
font-size: var(--c15t-font-size-sm, .875rem);
|
|
978
1055
|
color: var(--c15t-text-muted, #737373);
|
|
979
1056
|
max-width: 280px;
|
|
1057
|
+
line-height: var(--c15t-line-height-normal, 1.5);
|
|
980
1058
|
}
|
|
981
1059
|
|
|
982
1060
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -993,17 +1071,17 @@ var __webpack_modules__ = {
|
|
|
993
1071
|
}
|
|
994
1072
|
|
|
995
1073
|
.dropdownMenu-aKK18l {
|
|
996
|
-
|
|
997
|
-
padding: var(--c15t-space-xs, .25rem);
|
|
998
|
-
border: 1px solid var(--c15t-border, #e3e3e3);
|
|
1074
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
999
1075
|
border-radius: var(--c15t-radius-lg, .75rem);
|
|
1000
|
-
background-color: var(--c15t-surface, #fff);
|
|
1076
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
1077
|
+
min-width: 200px;
|
|
1001
1078
|
box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
|
|
1002
1079
|
z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
|
|
1003
1080
|
opacity: 0;
|
|
1004
1081
|
transform-origin: 0 100%;
|
|
1005
1082
|
pointer-events: none;
|
|
1006
1083
|
transition: opacity var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1)), transform var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1));
|
|
1084
|
+
padding: .375rem;
|
|
1007
1085
|
position: fixed;
|
|
1008
1086
|
transform: scale(.95)translateY(8px);
|
|
1009
1087
|
}
|
|
@@ -1031,34 +1109,35 @@ var __webpack_modules__ = {
|
|
|
1031
1109
|
}
|
|
1032
1110
|
|
|
1033
1111
|
.menuItem-kBbHRP {
|
|
1034
|
-
align-items: center;
|
|
1035
|
-
gap: var(--c15t-space-sm, .5rem);
|
|
1036
|
-
width: 100%;
|
|
1037
|
-
padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
|
|
1038
1112
|
border-radius: var(--c15t-radius-md, .5rem);
|
|
1113
|
+
width: 100%;
|
|
1039
1114
|
color: var(--c15t-text, #171717);
|
|
1040
|
-
font-size: var(--c15t-font-size-
|
|
1115
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
1041
1116
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
1117
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
1042
1118
|
text-align: left;
|
|
1043
1119
|
cursor: pointer;
|
|
1044
1120
|
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1045
1121
|
background: none;
|
|
1046
1122
|
border: none;
|
|
1123
|
+
align-items: center;
|
|
1124
|
+
gap: .625rem;
|
|
1125
|
+
padding: .5rem .625rem;
|
|
1047
1126
|
display: flex;
|
|
1048
1127
|
}
|
|
1049
1128
|
|
|
1050
1129
|
.menuItem-kBbHRP:hover {
|
|
1051
|
-
background-color: var(--c15t-surface-
|
|
1130
|
+
background-color: var(--c15t-devtools-surface-subtle, #f2f2f2);
|
|
1052
1131
|
}
|
|
1053
1132
|
|
|
1054
1133
|
.menuItem-kBbHRP:focus-visible {
|
|
1055
|
-
|
|
1056
|
-
outline
|
|
1134
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
1135
|
+
outline: none;
|
|
1057
1136
|
}
|
|
1058
1137
|
|
|
1059
1138
|
.menuItemIcon-P3pP5K {
|
|
1060
|
-
width:
|
|
1061
|
-
height:
|
|
1139
|
+
width: 1rem;
|
|
1140
|
+
height: 1rem;
|
|
1062
1141
|
color: var(--c15t-text-muted, #737373);
|
|
1063
1142
|
flex-shrink: 0;
|
|
1064
1143
|
}
|
|
@@ -1071,6 +1150,7 @@ var __webpack_modules__ = {
|
|
|
1071
1150
|
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
1072
1151
|
color: var(--c15t-text-muted, #737373);
|
|
1073
1152
|
font-weight: var(--c15t-font-weight-normal, 400);
|
|
1153
|
+
margin-top: .125rem;
|
|
1074
1154
|
}
|
|
1075
1155
|
|
|
1076
1156
|
.menuItemContent-hBlruV {
|
|
@@ -1086,8 +1166,8 @@ var __webpack_modules__ = {
|
|
|
1086
1166
|
.menuItemToggleTrack-gDp_f3 {
|
|
1087
1167
|
background-color: var(--c15t-switch-track, #d9d9d9);
|
|
1088
1168
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
1089
|
-
width:
|
|
1090
|
-
height:
|
|
1169
|
+
width: 2rem;
|
|
1170
|
+
height: 1.25rem;
|
|
1091
1171
|
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1092
1172
|
position: relative;
|
|
1093
1173
|
}
|
|
@@ -1095,21 +1175,22 @@ var __webpack_modules__ = {
|
|
|
1095
1175
|
.menuItemToggleThumb-ioqqyc {
|
|
1096
1176
|
background-color: var(--c15t-switch-thumb, #fff);
|
|
1097
1177
|
border-radius: var(--c15t-radius-full, 9999px);
|
|
1098
|
-
width:
|
|
1099
|
-
height:
|
|
1100
|
-
box-shadow: var(--c15t-
|
|
1178
|
+
width: .75rem;
|
|
1179
|
+
height: .75rem;
|
|
1180
|
+
box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
|
|
1101
1181
|
transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1102
1182
|
position: absolute;
|
|
1103
|
-
top:
|
|
1183
|
+
top: 50%;
|
|
1104
1184
|
left: 2px;
|
|
1185
|
+
transform: translateY(-50%);
|
|
1105
1186
|
}
|
|
1106
1187
|
|
|
1107
1188
|
.menuItemToggleChecked-K3BPtk .menuItemToggleTrack-gDp_f3 {
|
|
1108
|
-
background-color: var(--c15t-switch-track-
|
|
1189
|
+
background-color: var(--c15t-switch-track-active, #335cff);
|
|
1109
1190
|
}
|
|
1110
1191
|
|
|
1111
1192
|
.menuItemToggleChecked-K3BPtk .menuItemToggleThumb-ioqqyc {
|
|
1112
|
-
transform:
|
|
1193
|
+
transform: translate(1rem, -50%);
|
|
1113
1194
|
}
|
|
1114
1195
|
|
|
1115
1196
|
.menuDivider-JIBdhU {
|
|
@@ -1145,9 +1226,11 @@ var __webpack_modules__ = {
|
|
|
1145
1226
|
headerLogo: "headerLogo-PxJ_w1",
|
|
1146
1227
|
closeButton: "closeButton-Yto0Nb",
|
|
1147
1228
|
closeButtonIcon: "closeButtonIcon-fVlR1I",
|
|
1229
|
+
inlineActionButton: "inlineActionButton-Ky8BmN",
|
|
1148
1230
|
content: "content-yDMYfG",
|
|
1149
1231
|
footer: "footer-ESbmwQ",
|
|
1150
1232
|
footerStatus: "footerStatus-rlb99A",
|
|
1233
|
+
footerMeta: "footerMeta-Vdtxdk",
|
|
1151
1234
|
statusDot: "statusDot-hYJoej",
|
|
1152
1235
|
statusConnected: "statusConnected-hPSUgS",
|
|
1153
1236
|
statusDisconnected: "statusDisconnected-HIpcee",
|
|
@@ -1186,62 +1269,63 @@ var __webpack_modules__ = {
|
|
|
1186
1269
|
___CSS_LOADER_EXPORT___.push([
|
|
1187
1270
|
module.id,
|
|
1188
1271
|
`.tabList-IyuiBE {
|
|
1272
|
+
border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
1273
|
+
background-color: var(--c15t-devtools-surface-subtle, #fafafa);
|
|
1189
1274
|
align-items: center;
|
|
1190
|
-
gap:
|
|
1191
|
-
padding:
|
|
1192
|
-
border-bottom: 1px solid var(--c15t-border, #e3e3e3);
|
|
1193
|
-
background-color: var(--c15t-surface, #fff);
|
|
1194
|
-
scrollbar-width: none;
|
|
1195
|
-
-ms-overflow-style: none;
|
|
1196
|
-
scroll-padding-inline-end: var(--c15t-space-sm, .5rem);
|
|
1275
|
+
gap: .375rem;
|
|
1276
|
+
padding: .75rem;
|
|
1197
1277
|
display: flex;
|
|
1198
|
-
overflow-x: auto;
|
|
1199
1278
|
}
|
|
1200
1279
|
|
|
1201
|
-
.
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1280
|
+
.tabStrip-_KrWe4 {
|
|
1281
|
+
align-items: center;
|
|
1282
|
+
gap: var(--c15t-space-xs, .25rem);
|
|
1283
|
+
flex: auto;
|
|
1284
|
+
min-width: 0;
|
|
1285
|
+
display: flex;
|
|
1286
|
+
overflow: hidden;
|
|
1208
1287
|
}
|
|
1209
1288
|
|
|
1210
1289
|
.tab-yfDEqg {
|
|
1211
|
-
align-items: center;
|
|
1212
|
-
gap: var(--c15t-space-xs, .25rem);
|
|
1213
1290
|
border-radius: var(--c15t-radius-md, .5rem);
|
|
1291
|
+
min-height: 1.875rem;
|
|
1214
1292
|
color: var(--c15t-text-muted, #737373);
|
|
1215
|
-
font-family:
|
|
1216
|
-
font-size:
|
|
1293
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
1294
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
1217
1295
|
font-weight: var(--c15t-font-weight-medium, 500);
|
|
1296
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
1218
1297
|
cursor: pointer;
|
|
1219
1298
|
white-space: nowrap;
|
|
1220
|
-
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1299
|
+
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1221
1300
|
background-color: #0000;
|
|
1222
|
-
border:
|
|
1223
|
-
|
|
1301
|
+
border: 1px solid #0000;
|
|
1302
|
+
flex-shrink: 0;
|
|
1303
|
+
align-items: center;
|
|
1304
|
+
gap: .375rem;
|
|
1305
|
+
padding: .25rem .625rem;
|
|
1224
1306
|
display: flex;
|
|
1225
1307
|
}
|
|
1226
1308
|
|
|
1227
1309
|
.tab-yfDEqg:hover {
|
|
1228
|
-
background-color: var(--c15t-surface-
|
|
1310
|
+
background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
|
|
1229
1311
|
color: var(--c15t-text, #171717);
|
|
1230
1312
|
}
|
|
1231
1313
|
|
|
1232
1314
|
.tab-yfDEqg:focus-visible {
|
|
1233
|
-
|
|
1234
|
-
outline
|
|
1315
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
1316
|
+
outline: none;
|
|
1235
1317
|
}
|
|
1236
1318
|
|
|
1237
1319
|
.tabActive-r4hing {
|
|
1238
|
-
background-color: var(--c15t-
|
|
1239
|
-
color: var(--c15t-
|
|
1320
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
1321
|
+
border-color: var(--c15t-devtools-border-strong, #e3e3e3);
|
|
1322
|
+
color: var(--c15t-text, #171717);
|
|
1323
|
+
box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
|
|
1240
1324
|
}
|
|
1241
1325
|
|
|
1242
1326
|
.tabActive-r4hing:hover {
|
|
1243
|
-
background-color: var(--c15t-
|
|
1244
|
-
color: var(--c15t-text
|
|
1327
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
1328
|
+
color: var(--c15t-text, #171717);
|
|
1245
1329
|
}
|
|
1246
1330
|
|
|
1247
1331
|
.tabIcon-U9tnu0 {
|
|
@@ -1250,6 +1334,131 @@ var __webpack_modules__ = {
|
|
|
1250
1334
|
height: 14px;
|
|
1251
1335
|
}
|
|
1252
1336
|
|
|
1337
|
+
.tabHidden-HBXYSd {
|
|
1338
|
+
display: none;
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
.overflowContainer-TTw9DO {
|
|
1342
|
+
flex-shrink: 0;
|
|
1343
|
+
position: relative;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
.overflowContainerHidden-sQa_XZ {
|
|
1347
|
+
display: none;
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.overflowButton-tKq4FF {
|
|
1351
|
+
border-radius: var(--c15t-radius-md, .5rem);
|
|
1352
|
+
width: 1.875rem;
|
|
1353
|
+
height: 1.875rem;
|
|
1354
|
+
color: var(--c15t-text-muted, #737373);
|
|
1355
|
+
cursor: pointer;
|
|
1356
|
+
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1357
|
+
background-color: #0000;
|
|
1358
|
+
border: 1px solid #0000;
|
|
1359
|
+
justify-content: center;
|
|
1360
|
+
align-items: center;
|
|
1361
|
+
padding: 0;
|
|
1362
|
+
display: inline-flex;
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
.overflowButton-tKq4FF:hover {
|
|
1366
|
+
background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
|
|
1367
|
+
color: var(--c15t-text, #171717);
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.overflowButton-tKq4FF:focus-visible {
|
|
1371
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
1372
|
+
outline: none;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.overflowButtonIcon-FSurfC {
|
|
1376
|
+
justify-content: center;
|
|
1377
|
+
align-items: center;
|
|
1378
|
+
width: 14px;
|
|
1379
|
+
height: 14px;
|
|
1380
|
+
display: inline-flex;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
.overflowMenu-TST0eZ {
|
|
1384
|
+
border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
|
|
1385
|
+
border-radius: var(--c15t-radius-md, .5rem);
|
|
1386
|
+
background-color: var(--c15t-devtools-surface-elevated, #fff);
|
|
1387
|
+
min-width: 10rem;
|
|
1388
|
+
box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
|
|
1389
|
+
opacity: 0;
|
|
1390
|
+
transform-origin: 100% 0;
|
|
1391
|
+
pointer-events: none;
|
|
1392
|
+
z-index: 10;
|
|
1393
|
+
transition: opacity var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1)), transform var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1));
|
|
1394
|
+
flex-direction: column;
|
|
1395
|
+
gap: .125rem;
|
|
1396
|
+
padding: .3125rem;
|
|
1397
|
+
display: flex;
|
|
1398
|
+
position: absolute;
|
|
1399
|
+
top: calc(100% + .375rem);
|
|
1400
|
+
right: 0;
|
|
1401
|
+
transform: translateY(-4px)scale(.98);
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.overflowMenu-TST0eZ[data-state="open"] {
|
|
1405
|
+
opacity: 1;
|
|
1406
|
+
pointer-events: auto;
|
|
1407
|
+
transform: translateY(0)scale(1);
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.overflowItem-y5Pz7k {
|
|
1411
|
+
border-radius: var(--c15t-radius-sm, .375rem);
|
|
1412
|
+
min-height: 1.75rem;
|
|
1413
|
+
color: var(--c15t-text, #171717);
|
|
1414
|
+
font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
|
|
1415
|
+
font-size: var(--c15t-devtools-font-size-xs, .75rem);
|
|
1416
|
+
font-weight: var(--c15t-font-weight-medium, 500);
|
|
1417
|
+
line-height: var(--c15t-line-height-tight, 1.25);
|
|
1418
|
+
text-align: left;
|
|
1419
|
+
cursor: pointer;
|
|
1420
|
+
white-space: nowrap;
|
|
1421
|
+
transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
|
|
1422
|
+
background-color: #0000;
|
|
1423
|
+
border: none;
|
|
1424
|
+
align-items: center;
|
|
1425
|
+
gap: .5rem;
|
|
1426
|
+
padding: .3125rem .5rem;
|
|
1427
|
+
display: inline-flex;
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
.overflowItem-y5Pz7k:hover {
|
|
1431
|
+
background-color: var(--c15t-devtools-surface-subtle, #fafafa);
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.overflowItem-y5Pz7k:focus-visible {
|
|
1435
|
+
box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
|
|
1436
|
+
outline: none;
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
.overflowItemActive-mzVG1T {
|
|
1440
|
+
background-color: var(--c15t-devtools-accent-soft, #ebefff);
|
|
1441
|
+
color: var(--c15t-text, #171717);
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
.overflowItemDisabled-dcHX3K {
|
|
1445
|
+
opacity: .5;
|
|
1446
|
+
cursor: not-allowed;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
.overflowItemIcon-fz291V {
|
|
1450
|
+
flex-shrink: 0;
|
|
1451
|
+
justify-content: center;
|
|
1452
|
+
align-items: center;
|
|
1453
|
+
width: 14px;
|
|
1454
|
+
height: 14px;
|
|
1455
|
+
display: inline-flex;
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
.overflowItemHidden-k4aawi {
|
|
1459
|
+
display: none;
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1253
1462
|
.tabDisabled-lDuv5l {
|
|
1254
1463
|
opacity: .5;
|
|
1255
1464
|
cursor: not-allowed;
|
|
@@ -1270,7 +1479,7 @@ var __webpack_modules__ = {
|
|
|
1270
1479
|
}
|
|
1271
1480
|
|
|
1272
1481
|
@media (prefers-reduced-motion: reduce) {
|
|
1273
|
-
.tab-yfDEqg {
|
|
1482
|
+
.tab-yfDEqg, .overflowButton-tKq4FF, .overflowMenu-TST0eZ, .overflowItem-y5Pz7k {
|
|
1274
1483
|
transition: none;
|
|
1275
1484
|
}
|
|
1276
1485
|
}
|
|
@@ -1286,9 +1495,21 @@ var __webpack_modules__ = {
|
|
|
1286
1495
|
]);
|
|
1287
1496
|
___CSS_LOADER_EXPORT___.locals = {
|
|
1288
1497
|
tabList: "tabList-IyuiBE",
|
|
1498
|
+
tabStrip: "tabStrip-_KrWe4",
|
|
1289
1499
|
tab: "tab-yfDEqg",
|
|
1290
1500
|
tabActive: "tabActive-r4hing",
|
|
1291
1501
|
tabIcon: "tabIcon-U9tnu0",
|
|
1502
|
+
tabHidden: "tabHidden-HBXYSd",
|
|
1503
|
+
overflowContainer: "overflowContainer-TTw9DO",
|
|
1504
|
+
overflowContainerHidden: "overflowContainerHidden-sQa_XZ",
|
|
1505
|
+
overflowButton: "overflowButton-tKq4FF",
|
|
1506
|
+
overflowButtonIcon: "overflowButtonIcon-FSurfC",
|
|
1507
|
+
overflowMenu: "overflowMenu-TST0eZ",
|
|
1508
|
+
overflowItem: "overflowItem-y5Pz7k",
|
|
1509
|
+
overflowItemActive: "overflowItemActive-mzVG1T",
|
|
1510
|
+
overflowItemDisabled: "overflowItemDisabled-dcHX3K",
|
|
1511
|
+
overflowItemIcon: "overflowItemIcon-fz291V",
|
|
1512
|
+
overflowItemHidden: "overflowItemHidden-k4aawi",
|
|
1292
1513
|
tabDisabled: "tabDisabled-lDuv5l",
|
|
1293
1514
|
tabPanel: "tabPanel-QKO8FX",
|
|
1294
1515
|
tabPanelActive: "tabPanelActive-mrNlGE"
|
|
@@ -1312,6 +1533,15 @@ var __webpack_modules__ = {
|
|
|
1312
1533
|
--c15t-devtools-button-size: 40px;
|
|
1313
1534
|
--c15t-devtools-z-index: 99999;
|
|
1314
1535
|
--c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
|
|
1536
|
+
--c15t-devtools-surface-subtle: #fafafa;
|
|
1537
|
+
--c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
|
|
1538
|
+
--c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
|
|
1539
|
+
--c15t-devtools-code-surface: #f7f7f7;
|
|
1540
|
+
--c15t-devtools-accent-soft: #ebefff;
|
|
1541
|
+
--c15t-devtools-focus-ring: var(--c15t-primary, #335cff);
|
|
1542
|
+
--c15t-devtools-text-muted: var(--c15t-text-muted, #737373);
|
|
1543
|
+
--c15t-devtools-font-size-sm: var(--c15t-font-size-sm, .875rem);
|
|
1544
|
+
--c15t-surface-muted: var(--c15t-devtools-surface-muted, #f7f7f7);
|
|
1315
1545
|
--c15t-devtools-font-size-xs: .75rem;
|
|
1316
1546
|
--c15t-devtools-badge-success: #21c45d;
|
|
1317
1547
|
--c15t-devtools-badge-success-bg: #e4fbed;
|
|
@@ -1325,8 +1555,37 @@ var __webpack_modules__ = {
|
|
|
1325
1555
|
--c15t-devtools-badge-neutral-bg: #f0f0f0;
|
|
1326
1556
|
}
|
|
1327
1557
|
|
|
1558
|
+
:is(:global(.c15t-light), :global(.light)) {
|
|
1559
|
+
--c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
|
|
1560
|
+
--c15t-devtools-surface-subtle: #fafafa;
|
|
1561
|
+
--c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
|
|
1562
|
+
--c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
|
|
1563
|
+
--c15t-devtools-code-surface: #f7f7f7;
|
|
1564
|
+
--c15t-devtools-accent-soft: #ebefff;
|
|
1565
|
+
--c15t-devtools-badge-success-bg: #e4fbed;
|
|
1566
|
+
--c15t-devtools-badge-error-bg: #fde7e7;
|
|
1567
|
+
--c15t-devtools-badge-warning-bg: #fef7dc;
|
|
1568
|
+
--c15t-devtools-badge-info-bg: #dcebfe;
|
|
1569
|
+
--c15t-devtools-badge-neutral-bg: #f0f0f0;
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
@supports (color: color-mix(in srgb, white, black)) {
|
|
1573
|
+
:root {
|
|
1574
|
+
--c15t-devtools-surface-muted: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 85%, var(--c15t-surface, #fff));
|
|
1575
|
+
--c15t-devtools-surface-subtle: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 55%, var(--c15t-surface, #fff));
|
|
1576
|
+
--c15t-devtools-border-strong: color-mix(in srgb, var(--c15t-border, #e3e3e3) 80%, var(--c15t-text-muted, #737373));
|
|
1577
|
+
--c15t-devtools-code-surface: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 70%, var(--c15t-surface, #fff));
|
|
1578
|
+
--c15t-devtools-accent-soft: color-mix(in srgb, var(--c15t-primary, #335cff) 12%, transparent);
|
|
1579
|
+
}
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1328
1582
|
:is(:global(.c15t-dark), :global(.dark)) {
|
|
1329
1583
|
--c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
|
|
1584
|
+
--c15t-devtools-surface-subtle: #242424;
|
|
1585
|
+
--c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
|
|
1586
|
+
--c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
|
|
1587
|
+
--c15t-devtools-code-surface: #212121;
|
|
1588
|
+
--c15t-devtools-accent-soft: #335cff33;
|
|
1330
1589
|
--c15t-devtools-badge-success-bg: #21c45d33;
|
|
1331
1590
|
--c15t-devtools-badge-error-bg: #ef434333;
|
|
1332
1591
|
--c15t-devtools-badge-warning-bg: #f59f0a33;
|
|
@@ -1335,8 +1594,13 @@ var __webpack_modules__ = {
|
|
|
1335
1594
|
}
|
|
1336
1595
|
|
|
1337
1596
|
@media (prefers-color-scheme: dark) {
|
|
1338
|
-
:root {
|
|
1597
|
+
:global(:root:not(.light):not(.c15t-light)) {
|
|
1339
1598
|
--c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
|
|
1599
|
+
--c15t-devtools-surface-subtle: #242424;
|
|
1600
|
+
--c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
|
|
1601
|
+
--c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
|
|
1602
|
+
--c15t-devtools-code-surface: #212121;
|
|
1603
|
+
--c15t-devtools-accent-soft: #335cff33;
|
|
1340
1604
|
--c15t-devtools-badge-success-bg: #21c45d33;
|
|
1341
1605
|
--c15t-devtools-badge-error-bg: #ef434333;
|
|
1342
1606
|
--c15t-devtools-badge-warning-bg: #f59f0a33;
|
|
@@ -1844,7 +2108,7 @@ function renderer_button(options = {}) {
|
|
|
1844
2108
|
type: options.type ?? 'button'
|
|
1845
2109
|
});
|
|
1846
2110
|
}
|
|
1847
|
-
function
|
|
2111
|
+
function renderer_span(options = {}) {
|
|
1848
2112
|
return createElement({
|
|
1849
2113
|
...options,
|
|
1850
2114
|
tag: 'span'
|
|
@@ -1923,7 +2187,8 @@ panel_module_options.domAPI = styleDomAPI_default();
|
|
|
1923
2187
|
panel_module_options.insertStyleElement = insertStyleElement_default();
|
|
1924
2188
|
injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
|
|
1925
2189
|
const styles_panel_module = panel_module.A && panel_module.A.locals ? panel_module.A.locals : void 0;
|
|
1926
|
-
const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings"], [aria-label*="preference"]';
|
|
2190
|
+
const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
|
|
2191
|
+
const PREVIOUS_DISPLAY_ATTR = 'data-c15t-devtools-prev-display';
|
|
1927
2192
|
function detectPreferenceTrigger() {
|
|
1928
2193
|
const triggers = document.querySelectorAll(PREFERENCE_TRIGGER_SELECTORS);
|
|
1929
2194
|
return triggers.length > 0;
|
|
@@ -1933,7 +2198,19 @@ function getPreferenceTriggerElements() {
|
|
|
1933
2198
|
}
|
|
1934
2199
|
function setPreferenceTriggerVisibility(visible) {
|
|
1935
2200
|
const elements = getPreferenceTriggerElements();
|
|
1936
|
-
for (const el of elements)
|
|
2201
|
+
for (const el of elements){
|
|
2202
|
+
if (visible) {
|
|
2203
|
+
const previousDisplay = el.getAttribute(PREVIOUS_DISPLAY_ATTR);
|
|
2204
|
+
if (null === previousDisplay) el.style.removeProperty('display');
|
|
2205
|
+
else {
|
|
2206
|
+
el.style.display = previousDisplay;
|
|
2207
|
+
el.removeAttribute(PREVIOUS_DISPLAY_ATTR);
|
|
2208
|
+
}
|
|
2209
|
+
continue;
|
|
2210
|
+
}
|
|
2211
|
+
if (!el.hasAttribute(PREVIOUS_DISPLAY_ATTR)) el.setAttribute(PREVIOUS_DISPLAY_ATTR, el.style.display);
|
|
2212
|
+
el.style.display = 'none';
|
|
2213
|
+
}
|
|
1937
2214
|
}
|
|
1938
2215
|
function getPreferenceCenterOpener(namespace = 'c15tStore') {
|
|
1939
2216
|
const win = window;
|
|
@@ -1946,7 +2223,7 @@ function getPreferenceCenterOpener(namespace = 'c15tStore') {
|
|
|
1946
2223
|
}
|
|
1947
2224
|
return null;
|
|
1948
2225
|
}
|
|
1949
|
-
const version = '2.0.0-rc.
|
|
2226
|
+
const version = '2.0.0-rc.4';
|
|
1950
2227
|
const DEVTOOLS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 445" aria-label="c15t">
|
|
1951
2228
|
<path fill="currentColor" d="M223.178.313c39.064 0 70.732 31.668 70.732 70.732-.001 39.064-31.668 70.731-70.732 70.731-12.181 0-23.642-3.079-33.649-8.502l-55.689 55.689a70.267 70.267 0 0 1 5.574 13.441h167.531c8.695-29.217 35.762-50.523 67.804-50.523 39.064 0 70.731 31.668 70.731 70.732s-31.668 70.732-70.731 70.732c-32.042 0-59.108-21.306-67.803-50.523H139.413a70.417 70.417 0 0 1-7.888 17.396l54.046 54.046c10.893-6.851 23.786-10.815 37.605-10.815 39.064 0 70.732 31.669 70.732 70.733 0 39.064-31.668 70.731-70.732 70.731s-70.732-31.667-70.732-70.731c0-10.518 2.296-20.499 6.414-29.471l-57.78-57.78c-8.972 4.117-18.952 6.414-29.47 6.414-39.063 0-70.731-31.668-70.732-70.732 0-39.064 31.669-70.732 70.733-70.732 12.18 0 23.642 3.079 33.649 8.502l55.688-55.688c-5.423-10.007-8.502-21.469-8.502-33.65 0-39.064 31.668-70.733 70.732-70.733Zm0 343.555c-16.742 0-30.314 13.572-30.314 30.314 0 16.741 13.572 30.313 30.314 30.313s30.314-13.572 30.314-30.313c0-16.742-13.572-30.314-30.314-30.314ZM71.611 192.299c-16.742 0-30.315 13.572-30.315 30.314s13.573 30.314 30.315 30.314c16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314Zm303.138 0c-16.729 0-30.294 13.551-30.315 30.275l.001.039-.001.038c.021 16.725 13.586 30.276 30.315 30.276 16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314ZM223.178 40.73c-16.742 0-30.314 13.573-30.314 30.315s13.573 30.313 30.314 30.313c16.742 0 30.313-13.572 30.314-30.313 0-16.742-13.572-30.314-30.314-30.315Z"/>
|
|
1952
2229
|
</svg>`;
|
|
@@ -2027,7 +2304,7 @@ function createDropdownMenu(options) {
|
|
|
2027
2304
|
const labelContainer = renderer_div({
|
|
2028
2305
|
className: styles_panel_module.menuItemContent ?? ''
|
|
2029
2306
|
});
|
|
2030
|
-
const label =
|
|
2307
|
+
const label = renderer_span({
|
|
2031
2308
|
className: styles_panel_module.menuItemLabel ?? '',
|
|
2032
2309
|
text: item.label
|
|
2033
2310
|
});
|
|
@@ -2149,6 +2426,11 @@ function getPositionClass(position) {
|
|
|
2149
2426
|
return styles_panel_module.positionTopLeft ?? '';
|
|
2150
2427
|
}
|
|
2151
2428
|
}
|
|
2429
|
+
function formatRetryDelay(delayMs) {
|
|
2430
|
+
if (null === delayMs) return 'n/a';
|
|
2431
|
+
if (delayMs < 1000) return `${delayMs}ms`;
|
|
2432
|
+
return `${(delayMs / 1000).toFixed(1)}s`;
|
|
2433
|
+
}
|
|
2152
2434
|
function createPanel(options) {
|
|
2153
2435
|
const { stateManager, storeConnector, onRenderContent, namespace = 'c15tStore', enableUnifiedMode = true } = options;
|
|
2154
2436
|
let removePortal = null;
|
|
@@ -2280,7 +2562,7 @@ function createPanel(options) {
|
|
|
2280
2562
|
}));
|
|
2281
2563
|
return logoWrapper;
|
|
2282
2564
|
})(),
|
|
2283
|
-
|
|
2565
|
+
renderer_span({
|
|
2284
2566
|
text: 'c15t DevTools'
|
|
2285
2567
|
})
|
|
2286
2568
|
]
|
|
@@ -2324,38 +2606,41 @@ function createPanel(options) {
|
|
|
2324
2606
|
const isConnected = storeConnector.isConnected();
|
|
2325
2607
|
const storeState = storeConnector.getState();
|
|
2326
2608
|
const isLoading = storeState?.isLoadingConsentInfo ?? false;
|
|
2609
|
+
const diagnostics = storeConnector.getDiagnostics();
|
|
2327
2610
|
const statusChildren = [
|
|
2328
|
-
|
|
2611
|
+
renderer_span({
|
|
2329
2612
|
className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
|
|
2330
2613
|
}),
|
|
2331
|
-
|
|
2614
|
+
renderer_span({
|
|
2332
2615
|
text: isConnected ? 'Connected' : 'Disconnected'
|
|
2333
2616
|
})
|
|
2334
2617
|
];
|
|
2335
|
-
if (isLoading) statusChildren.push(
|
|
2336
|
-
|
|
2337
|
-
marginLeft: '4px',
|
|
2338
|
-
opacity: '0.7'
|
|
2339
|
-
},
|
|
2618
|
+
if (isLoading) statusChildren.push(renderer_span({
|
|
2619
|
+
className: styles_panel_module.footerMeta,
|
|
2340
2620
|
text: '\u00b7 Fetching /init\u2026'
|
|
2341
2621
|
}));
|
|
2622
|
+
else if (!isConnected) statusChildren.push(renderer_span({
|
|
2623
|
+
className: styles_panel_module.footerMeta,
|
|
2624
|
+
text: `· ${diagnostics.namespace} · retry ${diagnostics.reconnectAttempts} · next ${formatRetryDelay(diagnostics.nextRetryInMs)}`
|
|
2625
|
+
}));
|
|
2342
2626
|
footerElement.appendChild(renderer_div({
|
|
2343
2627
|
className: styles_panel_module.footerStatus,
|
|
2344
2628
|
children: statusChildren
|
|
2345
2629
|
}));
|
|
2346
2630
|
if (!isConnected) footerElement.appendChild(renderer_button({
|
|
2347
|
-
className: styles_panel_module.
|
|
2631
|
+
className: styles_panel_module.inlineActionButton,
|
|
2348
2632
|
text: 'Retry',
|
|
2349
2633
|
onClick: ()=>{
|
|
2350
2634
|
storeConnector.retryConnection();
|
|
2351
2635
|
}
|
|
2352
2636
|
}));
|
|
2353
|
-
footerElement.appendChild(
|
|
2637
|
+
footerElement.appendChild(renderer_span({
|
|
2354
2638
|
text: `v${version}`
|
|
2355
2639
|
}));
|
|
2356
2640
|
}
|
|
2357
2641
|
function renderErrorState(container) {
|
|
2358
2642
|
clearElement(container);
|
|
2643
|
+
const diagnostics = storeConnector.getDiagnostics();
|
|
2359
2644
|
const errorState = renderer_div({
|
|
2360
2645
|
className: styles_panel_module.errorState,
|
|
2361
2646
|
children: [
|
|
@@ -2377,8 +2662,25 @@ function createPanel(options) {
|
|
|
2377
2662
|
className: styles_panel_module.errorMessage,
|
|
2378
2663
|
text: 'c15t consent manager is not initialized. Make sure you have set up the ConsentManagerProvider in your app.'
|
|
2379
2664
|
}),
|
|
2665
|
+
renderer_div({
|
|
2666
|
+
className: styles_panel_module.errorMessage,
|
|
2667
|
+
style: {
|
|
2668
|
+
marginTop: '4px',
|
|
2669
|
+
fontSize: 'var(--c15t-devtools-font-size-xs)'
|
|
2670
|
+
},
|
|
2671
|
+
text: `Namespace: ${diagnostics.namespace} · Retries: ${diagnostics.reconnectAttempts} · Next retry: ${formatRetryDelay(diagnostics.nextRetryInMs)}`
|
|
2672
|
+
}),
|
|
2673
|
+
diagnostics.lastError ? renderer_div({
|
|
2674
|
+
className: styles_panel_module.errorMessage,
|
|
2675
|
+
style: {
|
|
2676
|
+
marginTop: '4px',
|
|
2677
|
+
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
2678
|
+
color: 'var(--c15t-text-muted)'
|
|
2679
|
+
},
|
|
2680
|
+
text: `Last error: ${diagnostics.lastError}`
|
|
2681
|
+
}) : null,
|
|
2380
2682
|
renderer_button({
|
|
2381
|
-
className: styles_panel_module.
|
|
2683
|
+
className: styles_panel_module.inlineActionButton,
|
|
2382
2684
|
text: 'Retry Connection',
|
|
2383
2685
|
onClick: ()=>{
|
|
2384
2686
|
storeConnector.retryConnection();
|
|
@@ -2441,6 +2743,10 @@ function createPanel(options) {
|
|
|
2441
2743
|
if (contentContainer) if (storeConnector.isConnected()) onRenderContent(contentContainer);
|
|
2442
2744
|
else renderErrorState(contentContainer);
|
|
2443
2745
|
});
|
|
2746
|
+
const unsubscribeDiagnostics = storeConnector.subscribeDiagnostics(()=>{
|
|
2747
|
+
updateFooter();
|
|
2748
|
+
if (contentContainer && !storeConnector.isConnected()) renderErrorState(contentContainer);
|
|
2749
|
+
});
|
|
2444
2750
|
container.appendChild(floatingButton);
|
|
2445
2751
|
removePortal = createPortal(container);
|
|
2446
2752
|
return {
|
|
@@ -2450,6 +2756,7 @@ function createPanel(options) {
|
|
|
2450
2756
|
destroy: ()=>{
|
|
2451
2757
|
unsubscribeState();
|
|
2452
2758
|
unsubscribeStore();
|
|
2759
|
+
unsubscribeDiagnostics();
|
|
2453
2760
|
if (dropdownMenu) {
|
|
2454
2761
|
dropdownMenu.destroy();
|
|
2455
2762
|
dropdownMenu = null;
|
|
@@ -2499,6 +2806,11 @@ const EVENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
|
2499
2806
|
<path d="M12 20h9"></path>
|
|
2500
2807
|
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
|
|
2501
2808
|
</svg>`;
|
|
2809
|
+
const MORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
2810
|
+
<circle cx="12" cy="5" r="1.75"></circle>
|
|
2811
|
+
<circle cx="12" cy="12" r="1.75"></circle>
|
|
2812
|
+
<circle cx="12" cy="19" r="1.75"></circle>
|
|
2813
|
+
</svg>`;
|
|
2502
2814
|
const TABS = [
|
|
2503
2815
|
{
|
|
2504
2816
|
id: 'location',
|
|
@@ -2534,12 +2846,56 @@ const TABS = [
|
|
|
2534
2846
|
function tabs_createTabs(options) {
|
|
2535
2847
|
const { onTabChange, disabledTabs = [] } = options;
|
|
2536
2848
|
let activeTab = options.activeTab;
|
|
2849
|
+
let isOverflowMenuOpen = false;
|
|
2850
|
+
let visibleTabIds = [];
|
|
2851
|
+
let hiddenTabIds = [];
|
|
2537
2852
|
const tabButtons = new Map();
|
|
2853
|
+
const overflowButtons = new Map();
|
|
2538
2854
|
const tabList = renderer_div({
|
|
2539
|
-
className: styles_tabs_module.tabList
|
|
2855
|
+
className: styles_tabs_module.tabList
|
|
2856
|
+
});
|
|
2857
|
+
const tabStrip = renderer_div({
|
|
2858
|
+
className: styles_tabs_module.tabStrip,
|
|
2540
2859
|
role: 'tablist',
|
|
2541
2860
|
ariaLabel: 'DevTools tabs'
|
|
2542
2861
|
});
|
|
2862
|
+
tabList.appendChild(tabStrip);
|
|
2863
|
+
const overflowMenu = renderer_div({
|
|
2864
|
+
className: styles_tabs_module.overflowMenu,
|
|
2865
|
+
role: 'menu',
|
|
2866
|
+
ariaLabel: 'All tabs'
|
|
2867
|
+
});
|
|
2868
|
+
overflowMenu.dataset.state = 'closed';
|
|
2869
|
+
const overflowButton = renderer_button({
|
|
2870
|
+
className: styles_tabs_module.overflowButton,
|
|
2871
|
+
ariaLabel: 'More tabs',
|
|
2872
|
+
ariaExpanded: 'false',
|
|
2873
|
+
onClick: ()=>toggleOverflowMenu(),
|
|
2874
|
+
onKeyDown: (e)=>{
|
|
2875
|
+
if ('ArrowDown' === e.key || 'Enter' === e.key || ' ' === e.key) {
|
|
2876
|
+
e.preventDefault();
|
|
2877
|
+
openOverflowMenu();
|
|
2878
|
+
focusFirstEnabledOverflowItem();
|
|
2879
|
+
}
|
|
2880
|
+
}
|
|
2881
|
+
});
|
|
2882
|
+
overflowButton.setAttribute('aria-haspopup', 'menu');
|
|
2883
|
+
const overflowIcon = renderer_div({
|
|
2884
|
+
className: styles_tabs_module.overflowButtonIcon
|
|
2885
|
+
});
|
|
2886
|
+
overflowIcon.appendChild(createSvgElement(MORE_ICON, {
|
|
2887
|
+
width: 14,
|
|
2888
|
+
height: 14
|
|
2889
|
+
}));
|
|
2890
|
+
overflowButton.appendChild(overflowIcon);
|
|
2891
|
+
const overflowContainer = renderer_div({
|
|
2892
|
+
className: styles_tabs_module.overflowContainer,
|
|
2893
|
+
children: [
|
|
2894
|
+
overflowButton,
|
|
2895
|
+
overflowMenu
|
|
2896
|
+
]
|
|
2897
|
+
});
|
|
2898
|
+
tabList.appendChild(overflowContainer);
|
|
2543
2899
|
for (const tab of TABS){
|
|
2544
2900
|
const isActive = tab.id === activeTab;
|
|
2545
2901
|
const isDisabled = disabledTabs.includes(tab.id);
|
|
@@ -2553,6 +2909,7 @@ function tabs_createTabs(options) {
|
|
|
2553
2909
|
disabled: isDisabled,
|
|
2554
2910
|
onClick: ()=>{
|
|
2555
2911
|
if (!isDisabled) {
|
|
2912
|
+
closeOverflowMenu();
|
|
2556
2913
|
setActiveTab(tab.id);
|
|
2557
2914
|
onTabChange(tab.id);
|
|
2558
2915
|
}
|
|
@@ -2569,11 +2926,188 @@ function tabs_createTabs(options) {
|
|
|
2569
2926
|
tabButton.appendChild(iconWrapper);
|
|
2570
2927
|
tabButton.appendChild(document.createTextNode(tab.label));
|
|
2571
2928
|
tabButtons.set(tab.id, tabButton);
|
|
2572
|
-
|
|
2929
|
+
tabStrip.appendChild(tabButton);
|
|
2930
|
+
const overflowItem = renderer_button({
|
|
2931
|
+
className: `${styles_tabs_module.overflowItem} ${isActive ? styles_tabs_module.overflowItemActive : ''} ${isDisabled ? styles_tabs_module.overflowItemDisabled : ''}`,
|
|
2932
|
+
role: 'menuitemradio',
|
|
2933
|
+
ariaChecked: isActive ? 'true' : 'false',
|
|
2934
|
+
disabled: isDisabled,
|
|
2935
|
+
onClick: ()=>{
|
|
2936
|
+
if (!isDisabled) {
|
|
2937
|
+
setActiveTab(tab.id);
|
|
2938
|
+
onTabChange(tab.id);
|
|
2939
|
+
closeOverflowMenu();
|
|
2940
|
+
tabButtons.get(tab.id)?.focus();
|
|
2941
|
+
}
|
|
2942
|
+
},
|
|
2943
|
+
onKeyDown: (e)=>handleOverflowKeyDown(e, tab.id)
|
|
2944
|
+
});
|
|
2945
|
+
const overflowItemIcon = renderer_div({
|
|
2946
|
+
className: styles_tabs_module.overflowItemIcon
|
|
2947
|
+
});
|
|
2948
|
+
overflowItemIcon.appendChild(createSvgElement(tab.icon, {
|
|
2949
|
+
width: 14,
|
|
2950
|
+
height: 14
|
|
2951
|
+
}));
|
|
2952
|
+
overflowItem.appendChild(overflowItemIcon);
|
|
2953
|
+
overflowItem.appendChild(document.createTextNode(tab.label));
|
|
2954
|
+
overflowButtons.set(tab.id, overflowItem);
|
|
2955
|
+
overflowMenu.appendChild(overflowItem);
|
|
2573
2956
|
}
|
|
2574
|
-
function
|
|
2575
|
-
const
|
|
2576
|
-
|
|
2957
|
+
function applyActiveState(tab) {
|
|
2958
|
+
for (const [tabId, tabButton] of tabButtons){
|
|
2959
|
+
const isActive = tabId === tab;
|
|
2960
|
+
if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
|
|
2961
|
+
tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
|
|
2962
|
+
tabButton.tabIndex = isActive ? 0 : -1;
|
|
2963
|
+
}
|
|
2964
|
+
for (const [tabId, overflowItem] of overflowButtons){
|
|
2965
|
+
const isActive = tabId === tab;
|
|
2966
|
+
if (styles_tabs_module.overflowItemActive) overflowItem.classList.toggle(styles_tabs_module.overflowItemActive, isActive);
|
|
2967
|
+
overflowItem.setAttribute('aria-checked', isActive ? 'true' : 'false');
|
|
2968
|
+
}
|
|
2969
|
+
}
|
|
2970
|
+
function updateVisibleTabs() {
|
|
2971
|
+
const allTabIds = TABS.map((t)=>t.id);
|
|
2972
|
+
const iabEnabled = !disabledTabs.includes('iab');
|
|
2973
|
+
const preferredSecondTab = iabEnabled ? 'iab' : 'consents';
|
|
2974
|
+
const overflowSecondTab = iabEnabled ? 'consents' : 'iab';
|
|
2975
|
+
const showOverflowSecondTabInStrip = activeTab === overflowSecondTab;
|
|
2976
|
+
const stripSecondTab = showOverflowSecondTabInStrip ? overflowSecondTab : preferredSecondTab;
|
|
2977
|
+
const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
|
|
2978
|
+
const layoutTabIds = [
|
|
2979
|
+
'location',
|
|
2980
|
+
stripSecondTab,
|
|
2981
|
+
"scripts",
|
|
2982
|
+
'actions',
|
|
2983
|
+
'events',
|
|
2984
|
+
forcedOverflowTab
|
|
2985
|
+
];
|
|
2986
|
+
const forcedOverflowTabIds = new Set();
|
|
2987
|
+
forcedOverflowTabIds.add(forcedOverflowTab);
|
|
2988
|
+
for (const [index, tabId] of layoutTabIds.entries()){
|
|
2989
|
+
const tabButton = tabButtons.get(tabId);
|
|
2990
|
+
if (tabButton) tabButton.style.order = String(index);
|
|
2991
|
+
const overflowItem = overflowButtons.get(tabId);
|
|
2992
|
+
if (overflowItem) overflowItem.style.order = String(index);
|
|
2993
|
+
}
|
|
2994
|
+
for (const tabId of allTabIds){
|
|
2995
|
+
const tabButton = tabButtons.get(tabId);
|
|
2996
|
+
if (tabButton && styles_tabs_module.tabHidden) tabButton.classList.remove(styles_tabs_module.tabHidden);
|
|
2997
|
+
}
|
|
2998
|
+
if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
|
|
2999
|
+
const stripGap = Number.parseFloat(getComputedStyle(tabStrip).gap || '0');
|
|
3000
|
+
const calculateVisibleTabs = (availableWidth)=>{
|
|
3001
|
+
if (availableWidth <= 0) return [];
|
|
3002
|
+
const nextVisible = [];
|
|
3003
|
+
let usedWidth = 0;
|
|
3004
|
+
for (const tabId of layoutTabIds){
|
|
3005
|
+
if (forcedOverflowTabIds.has(tabId)) continue;
|
|
3006
|
+
const tabButton = tabButtons.get(tabId);
|
|
3007
|
+
if (!tabButton) continue;
|
|
3008
|
+
const width = tabButton.getBoundingClientRect().width;
|
|
3009
|
+
const nextUsed = 0 === nextVisible.length ? width : usedWidth + stripGap + width;
|
|
3010
|
+
if (nextUsed <= availableWidth) {
|
|
3011
|
+
nextVisible.push(tabId);
|
|
3012
|
+
usedWidth = nextUsed;
|
|
3013
|
+
} else break;
|
|
3014
|
+
}
|
|
3015
|
+
return nextVisible;
|
|
3016
|
+
};
|
|
3017
|
+
const measureStripWidth = ()=>tabStrip.getBoundingClientRect().width;
|
|
3018
|
+
const showOverflowContainer = ()=>{
|
|
3019
|
+
if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
|
|
3020
|
+
};
|
|
3021
|
+
const hideOverflowContainer = ()=>{
|
|
3022
|
+
if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.add(styles_tabs_module.overflowContainerHidden);
|
|
3023
|
+
};
|
|
3024
|
+
const measureVisibleWidth = (tabIds)=>{
|
|
3025
|
+
let width = 0;
|
|
3026
|
+
for (const [index, tabId] of tabIds.entries()){
|
|
3027
|
+
const tabButton = tabButtons.get(tabId);
|
|
3028
|
+
if (tabButton) {
|
|
3029
|
+
width += tabButton.getBoundingClientRect().width;
|
|
3030
|
+
if (index > 0) width += stripGap;
|
|
3031
|
+
}
|
|
3032
|
+
}
|
|
3033
|
+
return width;
|
|
3034
|
+
};
|
|
3035
|
+
if (0 === forcedOverflowTabIds.size) {
|
|
3036
|
+
hideOverflowContainer();
|
|
3037
|
+
const visibleWithoutOverflow = calculateVisibleTabs(measureStripWidth());
|
|
3038
|
+
if (visibleWithoutOverflow.length === layoutTabIds.length) visibleTabIds = visibleWithoutOverflow;
|
|
3039
|
+
else {
|
|
3040
|
+
showOverflowContainer();
|
|
3041
|
+
visibleTabIds = calculateVisibleTabs(measureStripWidth());
|
|
3042
|
+
}
|
|
3043
|
+
} else {
|
|
3044
|
+
showOverflowContainer();
|
|
3045
|
+
const withOverflow = calculateVisibleTabs(measureStripWidth());
|
|
3046
|
+
visibleTabIds = withOverflow.length > 0 ? withOverflow : [
|
|
3047
|
+
activeTab
|
|
3048
|
+
];
|
|
3049
|
+
}
|
|
3050
|
+
if (!visibleTabIds.includes(activeTab) && !disabledTabs.includes(activeTab)) if (visibleTabIds.length > 0) visibleTabIds[visibleTabIds.length - 1] = activeTab;
|
|
3051
|
+
else visibleTabIds = [
|
|
3052
|
+
activeTab
|
|
3053
|
+
];
|
|
3054
|
+
visibleTabIds = [
|
|
3055
|
+
...new Set(visibleTabIds)
|
|
3056
|
+
];
|
|
3057
|
+
const maxStripWidth = measureStripWidth();
|
|
3058
|
+
while(visibleTabIds.length > 1 && measureVisibleWidth(visibleTabIds) > maxStripWidth + 0.5){
|
|
3059
|
+
let removeIndex = visibleTabIds.length - 1;
|
|
3060
|
+
if (visibleTabIds[removeIndex] === activeTab) removeIndex = Math.max(0, removeIndex - 1);
|
|
3061
|
+
visibleTabIds.splice(removeIndex, 1);
|
|
3062
|
+
}
|
|
3063
|
+
hiddenTabIds = layoutTabIds.filter((tabId)=>!visibleTabIds.includes(tabId) || forcedOverflowTabIds.has(tabId) && tabId !== activeTab);
|
|
3064
|
+
for (const tabId of allTabIds){
|
|
3065
|
+
const tabButton = tabButtons.get(tabId);
|
|
3066
|
+
if (tabButton) {
|
|
3067
|
+
if (styles_tabs_module.tabHidden) tabButton.classList.toggle(styles_tabs_module.tabHidden, hiddenTabIds.includes(tabId));
|
|
3068
|
+
}
|
|
3069
|
+
}
|
|
3070
|
+
for (const tabId of allTabIds){
|
|
3071
|
+
const overflowItem = overflowButtons.get(tabId);
|
|
3072
|
+
if (overflowItem) {
|
|
3073
|
+
if (styles_tabs_module.overflowItemHidden) overflowItem.classList.toggle(styles_tabs_module.overflowItemHidden, !hiddenTabIds.includes(tabId));
|
|
3074
|
+
}
|
|
3075
|
+
}
|
|
3076
|
+
if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.toggle(styles_tabs_module.overflowContainerHidden, 0 === hiddenTabIds.length);
|
|
3077
|
+
if (0 === hiddenTabIds.length) closeOverflowMenu();
|
|
3078
|
+
}
|
|
3079
|
+
function focusFirstEnabledOverflowItem() {
|
|
3080
|
+
const firstEnabled = hiddenTabIds.find((tabId)=>!disabledTabs.includes(tabId));
|
|
3081
|
+
if (firstEnabled) overflowButtons.get(firstEnabled)?.focus();
|
|
3082
|
+
}
|
|
3083
|
+
function openOverflowMenu() {
|
|
3084
|
+
if (isOverflowMenuOpen || 0 === hiddenTabIds.length) return;
|
|
3085
|
+
isOverflowMenuOpen = true;
|
|
3086
|
+
overflowMenu.dataset.state = 'open';
|
|
3087
|
+
overflowButton.setAttribute('aria-expanded', 'true');
|
|
3088
|
+
document.addEventListener('click', handleOutsideClick);
|
|
3089
|
+
document.addEventListener('keydown', handleEscapeKey);
|
|
3090
|
+
}
|
|
3091
|
+
function closeOverflowMenu() {
|
|
3092
|
+
if (!isOverflowMenuOpen) return;
|
|
3093
|
+
isOverflowMenuOpen = false;
|
|
3094
|
+
overflowMenu.dataset.state = 'closed';
|
|
3095
|
+
overflowButton.setAttribute('aria-expanded', 'false');
|
|
3096
|
+
document.removeEventListener('click', handleOutsideClick);
|
|
3097
|
+
document.removeEventListener('keydown', handleEscapeKey);
|
|
3098
|
+
}
|
|
3099
|
+
function toggleOverflowMenu() {
|
|
3100
|
+
if (isOverflowMenuOpen) closeOverflowMenu();
|
|
3101
|
+
else openOverflowMenu();
|
|
3102
|
+
}
|
|
3103
|
+
function handleOutsideClick(e) {
|
|
3104
|
+
if (!overflowContainer.contains(e.target)) closeOverflowMenu();
|
|
3105
|
+
}
|
|
3106
|
+
function handleEscapeKey(e) {
|
|
3107
|
+
if ('Escape' === e.key) closeOverflowMenu();
|
|
3108
|
+
}
|
|
3109
|
+
function handleKeyDown(e, currentTab) {
|
|
3110
|
+
const enabledTabIds = visibleTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
|
|
2577
3111
|
const currentIndex = enabledTabIds.indexOf(currentTab);
|
|
2578
3112
|
let newIndex = currentIndex;
|
|
2579
3113
|
switch(e.key){
|
|
@@ -2600,23 +3134,152 @@ function tabs_createTabs(options) {
|
|
|
2600
3134
|
tabButtons.get(newTab)?.focus();
|
|
2601
3135
|
}
|
|
2602
3136
|
}
|
|
3137
|
+
function handleOverflowKeyDown(e, currentTab) {
|
|
3138
|
+
const enabledTabIds = hiddenTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
|
|
3139
|
+
const currentIndex = enabledTabIds.indexOf(currentTab);
|
|
3140
|
+
if ('Escape' === e.key) {
|
|
3141
|
+
e.preventDefault();
|
|
3142
|
+
closeOverflowMenu();
|
|
3143
|
+
overflowButton.focus();
|
|
3144
|
+
return;
|
|
3145
|
+
}
|
|
3146
|
+
let newIndex = currentIndex;
|
|
3147
|
+
switch(e.key){
|
|
3148
|
+
case 'ArrowDown':
|
|
3149
|
+
newIndex = (currentIndex + 1) % enabledTabIds.length;
|
|
3150
|
+
break;
|
|
3151
|
+
case 'ArrowUp':
|
|
3152
|
+
newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
|
|
3153
|
+
break;
|
|
3154
|
+
default:
|
|
3155
|
+
return;
|
|
3156
|
+
}
|
|
3157
|
+
e.preventDefault();
|
|
3158
|
+
const newTab = enabledTabIds[newIndex];
|
|
3159
|
+
if (newTab) overflowButtons.get(newTab)?.focus();
|
|
3160
|
+
}
|
|
2603
3161
|
function setActiveTab(tab) {
|
|
2604
3162
|
activeTab = tab;
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
|
|
2608
|
-
tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
|
|
2609
|
-
tabButton.tabIndex = isActive ? 0 : -1;
|
|
2610
|
-
}
|
|
3163
|
+
applyActiveState(tab);
|
|
3164
|
+
updateVisibleTabs();
|
|
2611
3165
|
}
|
|
3166
|
+
const handleWindowResize = ()=>{
|
|
3167
|
+
updateVisibleTabs();
|
|
3168
|
+
};
|
|
3169
|
+
let resizeObserver = null;
|
|
3170
|
+
if ('undefined' != typeof ResizeObserver) {
|
|
3171
|
+
resizeObserver = new ResizeObserver(()=>{
|
|
3172
|
+
updateVisibleTabs();
|
|
3173
|
+
});
|
|
3174
|
+
resizeObserver.observe(tabList);
|
|
3175
|
+
} else window.addEventListener('resize', handleWindowResize);
|
|
3176
|
+
applyActiveState(activeTab);
|
|
3177
|
+
requestAnimationFrame(()=>{
|
|
3178
|
+
updateVisibleTabs();
|
|
3179
|
+
});
|
|
2612
3180
|
return {
|
|
2613
3181
|
element: tabList,
|
|
2614
3182
|
setActiveTab,
|
|
2615
3183
|
destroy: ()=>{
|
|
3184
|
+
closeOverflowMenu();
|
|
3185
|
+
if (resizeObserver) {
|
|
3186
|
+
resizeObserver.disconnect();
|
|
3187
|
+
resizeObserver = null;
|
|
3188
|
+
} else window.removeEventListener('resize', handleWindowResize);
|
|
2616
3189
|
tabButtons.clear();
|
|
3190
|
+
overflowButtons.clear();
|
|
2617
3191
|
}
|
|
2618
3192
|
};
|
|
2619
3193
|
}
|
|
3194
|
+
function debug_bundle_createDebugBundle(payload) {
|
|
3195
|
+
const { namespace, devToolsState, connection, recentEvents, storeState } = payload;
|
|
3196
|
+
const bundle = {
|
|
3197
|
+
generatedAt: new Date().toISOString(),
|
|
3198
|
+
namespace,
|
|
3199
|
+
devToolsState,
|
|
3200
|
+
connection,
|
|
3201
|
+
recentEvents,
|
|
3202
|
+
storeState,
|
|
3203
|
+
overrides: storeState?.overrides ?? null,
|
|
3204
|
+
iab: storeState?.iab ? {
|
|
3205
|
+
tcString: (storeState?.iab).tcString ?? null,
|
|
3206
|
+
purposeCount: Object.keys((storeState?.iab).purposeConsents ?? {}).length,
|
|
3207
|
+
vendorCount: Object.keys((storeState?.iab).vendorConsents ?? {}).length
|
|
3208
|
+
} : null
|
|
3209
|
+
};
|
|
3210
|
+
return JSON.stringify(bundle, null, 2);
|
|
3211
|
+
}
|
|
3212
|
+
function debug_bundle_sanitizeStoreState(state) {
|
|
3213
|
+
if (!state) return null;
|
|
3214
|
+
try {
|
|
3215
|
+
return JSON.parse(JSON.stringify(state, (_key, value)=>'function' == typeof value ? void 0 : value));
|
|
3216
|
+
} catch {
|
|
3217
|
+
return {
|
|
3218
|
+
error: 'Unable to serialize store state'
|
|
3219
|
+
};
|
|
3220
|
+
}
|
|
3221
|
+
}
|
|
3222
|
+
function debug_bundle_downloadDebugBundle(content) {
|
|
3223
|
+
const blob = new Blob([
|
|
3224
|
+
content
|
|
3225
|
+
], {
|
|
3226
|
+
type: 'application/json'
|
|
3227
|
+
});
|
|
3228
|
+
const url = URL.createObjectURL(blob);
|
|
3229
|
+
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
|
3230
|
+
const anchor = document.createElement('a');
|
|
3231
|
+
anchor.href = url;
|
|
3232
|
+
anchor.download = `c15t-debug-bundle-${timestamp}.json`;
|
|
3233
|
+
anchor.click();
|
|
3234
|
+
URL.revokeObjectURL(url);
|
|
3235
|
+
}
|
|
3236
|
+
const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
|
|
3237
|
+
function normalizeStringValue(value) {
|
|
3238
|
+
if ('string' != typeof value) return;
|
|
3239
|
+
const normalized = value.trim();
|
|
3240
|
+
return normalized.length > 0 ? normalized : void 0;
|
|
3241
|
+
}
|
|
3242
|
+
function normalizeBooleanValue(value) {
|
|
3243
|
+
return 'boolean' == typeof value ? value : void 0;
|
|
3244
|
+
}
|
|
3245
|
+
function normalizeOverrides(value) {
|
|
3246
|
+
if (!value || 'object' != typeof value) return null;
|
|
3247
|
+
const source = value;
|
|
3248
|
+
const overrides = {
|
|
3249
|
+
country: normalizeStringValue(source.country),
|
|
3250
|
+
region: normalizeStringValue(source.region),
|
|
3251
|
+
language: normalizeStringValue(source.language),
|
|
3252
|
+
gpc: normalizeBooleanValue(source.gpc)
|
|
3253
|
+
};
|
|
3254
|
+
return hasPersistedOverrides(overrides) ? overrides : null;
|
|
3255
|
+
}
|
|
3256
|
+
function hasPersistedOverrides(overrides) {
|
|
3257
|
+
return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
|
|
3258
|
+
}
|
|
3259
|
+
function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
3260
|
+
if ('undefined' == typeof window) return null;
|
|
3261
|
+
try {
|
|
3262
|
+
const stored = localStorage.getItem(storageKey);
|
|
3263
|
+
if (!stored) return null;
|
|
3264
|
+
const parsed = JSON.parse(stored);
|
|
3265
|
+
return normalizeOverrides(parsed);
|
|
3266
|
+
} catch {
|
|
3267
|
+
return null;
|
|
3268
|
+
}
|
|
3269
|
+
}
|
|
3270
|
+
function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
3271
|
+
if ('undefined' == typeof window) return;
|
|
3272
|
+
try {
|
|
3273
|
+
if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
|
|
3274
|
+
localStorage.setItem(storageKey, JSON.stringify(overrides));
|
|
3275
|
+
} catch {}
|
|
3276
|
+
}
|
|
3277
|
+
function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
3278
|
+
if ('undefined' == typeof window) return;
|
|
3279
|
+
try {
|
|
3280
|
+
localStorage.removeItem(storageKey);
|
|
3281
|
+
} catch {}
|
|
3282
|
+
}
|
|
2620
3283
|
var components_module = __webpack_require__("../../node_modules/.bun/@rsbuild+core@1.6.12/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/styles/components.module.css");
|
|
2621
3284
|
var components_module_options = {};
|
|
2622
3285
|
components_module_options.styleTagTransform = styleTagTransform_default();
|
|
@@ -2653,7 +3316,7 @@ function createBadge(options) {
|
|
|
2653
3316
|
info: styles_components_module.badgeInfo,
|
|
2654
3317
|
neutral: styles_components_module.badgeNeutral
|
|
2655
3318
|
}[variant];
|
|
2656
|
-
return
|
|
3319
|
+
return renderer_span({
|
|
2657
3320
|
className: `${styles_components_module.badge} ${variantClass}`,
|
|
2658
3321
|
text
|
|
2659
3322
|
});
|
|
@@ -2684,31 +3347,19 @@ function createButton(options) {
|
|
|
2684
3347
|
btn.appendChild(document.createTextNode(text));
|
|
2685
3348
|
return btn;
|
|
2686
3349
|
}
|
|
2687
|
-
function
|
|
2688
|
-
const {
|
|
2689
|
-
const
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
]
|
|
2701
|
-
});
|
|
2702
|
-
const actionsContainer = renderer_div({
|
|
2703
|
-
className: styles_components_module.listItemActions,
|
|
2704
|
-
children: actions
|
|
2705
|
-
});
|
|
2706
|
-
return renderer_div({
|
|
2707
|
-
className: styles_components_module.listItem,
|
|
2708
|
-
children: [
|
|
2709
|
-
content,
|
|
2710
|
-
actionsContainer
|
|
2711
|
-
]
|
|
3350
|
+
function createInput(options) {
|
|
3351
|
+
const { value, placeholder, ariaLabel, small = false, onInput } = options;
|
|
3352
|
+
const sizeClass = small ? styles_components_module.inputSmall : '';
|
|
3353
|
+
return input({
|
|
3354
|
+
className: `${styles_components_module.input} ${sizeClass}`.trim(),
|
|
3355
|
+
type: 'text',
|
|
3356
|
+
value,
|
|
3357
|
+
placeholder,
|
|
3358
|
+
ariaLabel,
|
|
3359
|
+
onInput: (event)=>{
|
|
3360
|
+
const target = event.target;
|
|
3361
|
+
onInput?.(target?.value ?? '');
|
|
3362
|
+
}
|
|
2712
3363
|
});
|
|
2713
3364
|
}
|
|
2714
3365
|
function createSection(options) {
|
|
@@ -2716,7 +3367,7 @@ function createSection(options) {
|
|
|
2716
3367
|
const header = renderer_div({
|
|
2717
3368
|
className: styles_components_module.sectionHeader,
|
|
2718
3369
|
children: [
|
|
2719
|
-
|
|
3370
|
+
renderer_span({
|
|
2720
3371
|
className: styles_components_module.sectionTitle,
|
|
2721
3372
|
text: title
|
|
2722
3373
|
}),
|
|
@@ -2736,11 +3387,11 @@ function createInfoRow(options) {
|
|
|
2736
3387
|
return renderer_div({
|
|
2737
3388
|
className: styles_components_module.infoRow,
|
|
2738
3389
|
children: [
|
|
2739
|
-
|
|
3390
|
+
renderer_span({
|
|
2740
3391
|
className: styles_components_module.infoLabel,
|
|
2741
3392
|
text: label
|
|
2742
3393
|
}),
|
|
2743
|
-
|
|
3394
|
+
renderer_span({
|
|
2744
3395
|
className: styles_components_module.infoValue,
|
|
2745
3396
|
text: value
|
|
2746
3397
|
})
|
|
@@ -2760,7 +3411,7 @@ function createEmptyState(options) {
|
|
|
2760
3411
|
}));
|
|
2761
3412
|
children.push(iconWrapper);
|
|
2762
3413
|
}
|
|
2763
|
-
children.push(
|
|
3414
|
+
children.push(renderer_span({
|
|
2764
3415
|
className: styles_components_module.emptyStateText,
|
|
2765
3416
|
text
|
|
2766
3417
|
}));
|
|
@@ -2780,7 +3431,7 @@ function createGrid(options) {
|
|
|
2780
3431
|
function createGridCard(options) {
|
|
2781
3432
|
const { title, action } = options;
|
|
2782
3433
|
const children = [
|
|
2783
|
-
|
|
3434
|
+
renderer_span({
|
|
2784
3435
|
className: styles_components_module.gridCardTitle,
|
|
2785
3436
|
text: title
|
|
2786
3437
|
})
|
|
@@ -2791,6 +3442,18 @@ function createGridCard(options) {
|
|
|
2791
3442
|
children
|
|
2792
3443
|
});
|
|
2793
3444
|
}
|
|
3445
|
+
function createDisconnectedState(message = 'Store not connected') {
|
|
3446
|
+
return renderer_div({
|
|
3447
|
+
className: styles_components_module.disconnectedState,
|
|
3448
|
+
style: {
|
|
3449
|
+
padding: '24px',
|
|
3450
|
+
textAlign: 'center',
|
|
3451
|
+
color: 'var(--c15t-text-muted)',
|
|
3452
|
+
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3453
|
+
},
|
|
3454
|
+
text: message
|
|
3455
|
+
});
|
|
3456
|
+
}
|
|
2794
3457
|
const REFRESH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
2795
3458
|
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
|
|
2796
3459
|
<path d="M21 3v5h-5"></path>
|
|
@@ -2818,19 +3481,11 @@ const TERMINAL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
|
|
|
2818
3481
|
<polyline points="4 17 10 11 4 5"></polyline>
|
|
2819
3482
|
<line x1="12" y1="19" x2="20" y2="19"></line>
|
|
2820
3483
|
</svg>`;
|
|
2821
|
-
function
|
|
2822
|
-
const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState } = options;
|
|
3484
|
+
function renderActionsPanel(container, options) {
|
|
3485
|
+
const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState, onExportDebugBundle } = options;
|
|
2823
3486
|
clearElement(container);
|
|
2824
3487
|
const state = getState();
|
|
2825
|
-
if (!state) return void container.appendChild(
|
|
2826
|
-
style: {
|
|
2827
|
-
padding: '24px',
|
|
2828
|
-
textAlign: 'center',
|
|
2829
|
-
color: 'var(--c15t-text-muted)',
|
|
2830
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
2831
|
-
},
|
|
2832
|
-
text: 'Store not connected'
|
|
2833
|
-
}));
|
|
3488
|
+
if (!state) return void container.appendChild(createDisconnectedState());
|
|
2834
3489
|
const actionCards = [
|
|
2835
3490
|
createActionCard({
|
|
2836
3491
|
icon: actions_EYE_ICON,
|
|
@@ -2851,6 +3506,12 @@ function actions_renderActionsPanel(container, options) {
|
|
|
2851
3506
|
icon: COPY_ICON,
|
|
2852
3507
|
label: 'Copy State',
|
|
2853
3508
|
onClick: onCopyState
|
|
3509
|
+
}),
|
|
3510
|
+
createActionCard({
|
|
3511
|
+
icon: REFRESH_ICON,
|
|
3512
|
+
label: 'Export Debug',
|
|
3513
|
+
onClick: ()=>onExportDebugBundle?.(),
|
|
3514
|
+
disabled: !onExportDebugBundle
|
|
2854
3515
|
})
|
|
2855
3516
|
];
|
|
2856
3517
|
const grid = createGrid({
|
|
@@ -2888,7 +3549,7 @@ function actions_renderActionsPanel(container, options) {
|
|
|
2888
3549
|
},
|
|
2889
3550
|
children: [
|
|
2890
3551
|
createIconWrapper(TERMINAL_ICON, 14),
|
|
2891
|
-
|
|
3552
|
+
renderer_span({
|
|
2892
3553
|
style: {
|
|
2893
3554
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
2894
3555
|
fontWeight: '600',
|
|
@@ -2911,10 +3572,10 @@ function actions_renderActionsPanel(container, options) {
|
|
|
2911
3572
|
color: 'var(--c15t-text-muted)'
|
|
2912
3573
|
},
|
|
2913
3574
|
children: [
|
|
2914
|
-
|
|
3575
|
+
renderer_span({
|
|
2915
3576
|
text: `window.${getNamespace(state)}.getState()`
|
|
2916
3577
|
}),
|
|
2917
|
-
|
|
3578
|
+
renderer_span({
|
|
2918
3579
|
text: 'window.__c15tDevTools.open()'
|
|
2919
3580
|
})
|
|
2920
3581
|
]
|
|
@@ -2924,7 +3585,7 @@ function actions_renderActionsPanel(container, options) {
|
|
|
2924
3585
|
container.appendChild(consoleSection);
|
|
2925
3586
|
}
|
|
2926
3587
|
function createActionCard(options) {
|
|
2927
|
-
const { icon, label, onClick } = options;
|
|
3588
|
+
const { icon, label, onClick, disabled = false } = options;
|
|
2928
3589
|
const card = renderer_div({
|
|
2929
3590
|
className: styles_components_module.gridCard ?? '',
|
|
2930
3591
|
style: {
|
|
@@ -2935,11 +3596,12 @@ function createActionCard(options) {
|
|
|
2935
3596
|
gap: '6px',
|
|
2936
3597
|
padding: '16px 8px',
|
|
2937
3598
|
cursor: 'pointer',
|
|
2938
|
-
transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)'
|
|
3599
|
+
transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)',
|
|
3600
|
+
opacity: disabled ? '0.55' : '1'
|
|
2939
3601
|
},
|
|
2940
3602
|
children: [
|
|
2941
3603
|
createIconWrapper(icon, 20),
|
|
2942
|
-
|
|
3604
|
+
renderer_span({
|
|
2943
3605
|
style: {
|
|
2944
3606
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
2945
3607
|
fontWeight: '500',
|
|
@@ -2950,13 +3612,15 @@ function createActionCard(options) {
|
|
|
2950
3612
|
})
|
|
2951
3613
|
]
|
|
2952
3614
|
});
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
card.
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
card.
|
|
2959
|
-
|
|
3615
|
+
if (!disabled) {
|
|
3616
|
+
card.addEventListener('click', onClick);
|
|
3617
|
+
card.addEventListener('mouseenter', ()=>{
|
|
3618
|
+
card.style.backgroundColor = 'var(--c15t-surface-hover)';
|
|
3619
|
+
});
|
|
3620
|
+
card.addEventListener('mouseleave', ()=>{
|
|
3621
|
+
card.style.backgroundColor = '';
|
|
3622
|
+
});
|
|
3623
|
+
}
|
|
2960
3624
|
return card;
|
|
2961
3625
|
}
|
|
2962
3626
|
function createIconWrapper(icon, size) {
|
|
@@ -2977,19 +3641,12 @@ function createIconWrapper(icon, size) {
|
|
|
2977
3641
|
function getNamespace(state) {
|
|
2978
3642
|
return state.config?.meta?.namespace || 'c15tStore';
|
|
2979
3643
|
}
|
|
2980
|
-
|
|
3644
|
+
const consentSearchByContainer = new WeakMap();
|
|
3645
|
+
function renderConsentsPanel(container, options) {
|
|
2981
3646
|
const { getState, onConsentChange, onSave, onAcceptAll, onRejectAll, onReset } = options;
|
|
2982
3647
|
clearElement(container);
|
|
2983
3648
|
const state = getState();
|
|
2984
|
-
if (!state) return void container.appendChild(
|
|
2985
|
-
style: {
|
|
2986
|
-
padding: '24px',
|
|
2987
|
-
textAlign: 'center',
|
|
2988
|
-
color: 'var(--c15t-text-muted)',
|
|
2989
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
2990
|
-
},
|
|
2991
|
-
text: 'Store not connected'
|
|
2992
|
-
}));
|
|
3649
|
+
if (!state) return void container.appendChild(createDisconnectedState());
|
|
2993
3650
|
const isIabMode = 'iab' === state.model;
|
|
2994
3651
|
const savedConsents = state.consents || {};
|
|
2995
3652
|
const selectedConsents = state.selectedConsents || {};
|
|
@@ -3003,15 +3660,40 @@ function consents_renderConsentsPanel(container, options) {
|
|
|
3003
3660
|
ct.name,
|
|
3004
3661
|
ct
|
|
3005
3662
|
]));
|
|
3663
|
+
const searchQuery = consentSearchByContainer.get(container) ?? '';
|
|
3006
3664
|
const consentEntries = Object.entries(displayConsents);
|
|
3007
|
-
|
|
3665
|
+
const filteredConsentEntries = consentEntries.filter(([name])=>{
|
|
3666
|
+
if (!searchQuery) return true;
|
|
3667
|
+
const consentType = consentTypeMap.get(name);
|
|
3668
|
+
const displayName = consentType?.name || name;
|
|
3669
|
+
return `${name} ${displayName}`.toLowerCase().includes(searchQuery);
|
|
3670
|
+
});
|
|
3671
|
+
const showSearchInput = consentEntries.length > 4;
|
|
3672
|
+
if (showSearchInput) container.appendChild(renderer_div({
|
|
3673
|
+
style: {
|
|
3674
|
+
padding: '8px 0 10px'
|
|
3675
|
+
},
|
|
3676
|
+
children: [
|
|
3677
|
+
createInput({
|
|
3678
|
+
value: searchQuery,
|
|
3679
|
+
placeholder: 'Filter consents…',
|
|
3680
|
+
ariaLabel: 'Filter consents',
|
|
3681
|
+
small: true,
|
|
3682
|
+
onInput: (value)=>{
|
|
3683
|
+
consentSearchByContainer.set(container, value.trim().toLowerCase());
|
|
3684
|
+
renderConsentsPanel(container, options);
|
|
3685
|
+
}
|
|
3686
|
+
})
|
|
3687
|
+
]
|
|
3688
|
+
}));
|
|
3689
|
+
if (0 === filteredConsentEntries.length) container.appendChild(renderer_div({
|
|
3008
3690
|
style: {
|
|
3009
3691
|
padding: '24px',
|
|
3010
3692
|
textAlign: 'center',
|
|
3011
3693
|
color: 'var(--c15t-devtools-text-muted)',
|
|
3012
3694
|
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3013
3695
|
},
|
|
3014
|
-
text: 'No consents configured'
|
|
3696
|
+
text: 0 === consentEntries.length ? 'No consents configured' : 'No matching consents'
|
|
3015
3697
|
}));
|
|
3016
3698
|
else {
|
|
3017
3699
|
if (isIabMode) {
|
|
@@ -3029,7 +3711,7 @@ function consents_renderConsentsPanel(container, options) {
|
|
|
3029
3711
|
container.appendChild(iabNotice);
|
|
3030
3712
|
}
|
|
3031
3713
|
const gridCards = [];
|
|
3032
|
-
for (const [name, value] of
|
|
3714
|
+
for (const [name, value] of filteredConsentEntries){
|
|
3033
3715
|
const consentType = consentTypeMap.get(name);
|
|
3034
3716
|
const isNecessary = 'necessary' === name;
|
|
3035
3717
|
const displayName = consentType?.name || name;
|
|
@@ -3119,7 +3801,7 @@ function consents_renderConsentsPanel(container, options) {
|
|
|
3119
3801
|
gap: '8px'
|
|
3120
3802
|
},
|
|
3121
3803
|
children: [
|
|
3122
|
-
|
|
3804
|
+
renderer_span({
|
|
3123
3805
|
style: {
|
|
3124
3806
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
3125
3807
|
color: 'var(--c15t-devtools-badge-warning)'
|
|
@@ -3133,7 +3815,7 @@ function consents_renderConsentsPanel(container, options) {
|
|
|
3133
3815
|
onClick: onSave
|
|
3134
3816
|
})
|
|
3135
3817
|
]
|
|
3136
|
-
}) :
|
|
3818
|
+
}) : renderer_span({
|
|
3137
3819
|
style: {
|
|
3138
3820
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
3139
3821
|
color: 'var(--c15t-text-muted)'
|
|
@@ -3147,15 +3829,26 @@ function consents_renderConsentsPanel(container, options) {
|
|
|
3147
3829
|
function formatConsentName(name) {
|
|
3148
3830
|
return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
|
|
3149
3831
|
}
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3832
|
+
const panelStateByContainer = new WeakMap();
|
|
3833
|
+
function getPanelState(container) {
|
|
3834
|
+
const existing = panelStateByContainer.get(container);
|
|
3835
|
+
if (existing) return existing;
|
|
3836
|
+
const initialState = {
|
|
3837
|
+
activeFilter: 'all',
|
|
3838
|
+
selectedEventId: null,
|
|
3839
|
+
searchQuery: ''
|
|
3840
|
+
};
|
|
3841
|
+
panelStateByContainer.set(container, initialState);
|
|
3842
|
+
return initialState;
|
|
3843
|
+
}
|
|
3844
|
+
function renderEventsPanel(container, options) {
|
|
3153
3845
|
const { getEvents, onClear } = options;
|
|
3846
|
+
const panelState = getPanelState(container);
|
|
3154
3847
|
clearElement(container);
|
|
3155
3848
|
const allEvents = getEvents();
|
|
3156
|
-
const events = allEvents.filter((event)=>matchesFilter(event, activeFilter));
|
|
3157
|
-
if (!events.some((event)=>event.id === selectedEventId)) selectedEventId = events[0]?.id ?? null;
|
|
3158
|
-
const selectedEvent = events.find((event)=>event.id === selectedEventId) ?? null;
|
|
3849
|
+
const events = allEvents.filter((event)=>matchesFilter(event, panelState.activeFilter)).filter((event)=>matchesSearch(event, panelState.searchQuery));
|
|
3850
|
+
if (!events.some((event)=>event.id === panelState.selectedEventId)) panelState.selectedEventId = events[0]?.id ?? null;
|
|
3851
|
+
const selectedEvent = events.find((event)=>event.id === panelState.selectedEventId) ?? null;
|
|
3159
3852
|
const header = renderer_div({
|
|
3160
3853
|
style: {
|
|
3161
3854
|
display: 'flex',
|
|
@@ -3165,7 +3858,7 @@ function events_renderEventsPanel(container, options) {
|
|
|
3165
3858
|
gap: '8px'
|
|
3166
3859
|
},
|
|
3167
3860
|
children: [
|
|
3168
|
-
|
|
3861
|
+
renderer_span({
|
|
3169
3862
|
style: {
|
|
3170
3863
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
3171
3864
|
fontWeight: '600',
|
|
@@ -3191,8 +3884,8 @@ function events_renderEventsPanel(container, options) {
|
|
|
3191
3884
|
small: true,
|
|
3192
3885
|
onClick: ()=>{
|
|
3193
3886
|
onClear();
|
|
3194
|
-
selectedEventId = null;
|
|
3195
|
-
|
|
3887
|
+
panelState.selectedEventId = null;
|
|
3888
|
+
renderEventsPanel(container, options);
|
|
3196
3889
|
}
|
|
3197
3890
|
})
|
|
3198
3891
|
]
|
|
@@ -3207,12 +3900,30 @@ function events_renderEventsPanel(container, options) {
|
|
|
3207
3900
|
gap: '6px',
|
|
3208
3901
|
padding: '0 16px 8px'
|
|
3209
3902
|
},
|
|
3210
|
-
children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === activeFilter, ()=>{
|
|
3211
|
-
activeFilter = filter;
|
|
3212
|
-
selectedEventId = null;
|
|
3213
|
-
|
|
3903
|
+
children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === panelState.activeFilter, ()=>{
|
|
3904
|
+
panelState.activeFilter = filter;
|
|
3905
|
+
panelState.selectedEventId = null;
|
|
3906
|
+
renderEventsPanel(container, options);
|
|
3214
3907
|
}))
|
|
3215
3908
|
}));
|
|
3909
|
+
container.appendChild(renderer_div({
|
|
3910
|
+
style: {
|
|
3911
|
+
padding: '0 16px 8px'
|
|
3912
|
+
},
|
|
3913
|
+
children: [
|
|
3914
|
+
createInput({
|
|
3915
|
+
value: panelState.searchQuery,
|
|
3916
|
+
placeholder: 'Search events…',
|
|
3917
|
+
ariaLabel: 'Search events',
|
|
3918
|
+
small: true,
|
|
3919
|
+
onInput: (value)=>{
|
|
3920
|
+
panelState.searchQuery = value.trim().toLowerCase();
|
|
3921
|
+
panelState.selectedEventId = null;
|
|
3922
|
+
renderEventsPanel(container, options);
|
|
3923
|
+
}
|
|
3924
|
+
})
|
|
3925
|
+
]
|
|
3926
|
+
}));
|
|
3216
3927
|
const eventList = renderer_div({
|
|
3217
3928
|
style: {
|
|
3218
3929
|
display: 'flex',
|
|
@@ -3232,9 +3943,9 @@ function events_renderEventsPanel(container, options) {
|
|
|
3232
3943
|
},
|
|
3233
3944
|
text: 'No events match this filter'
|
|
3234
3945
|
}));
|
|
3235
|
-
else for (const event of events)eventList.appendChild(createEventItem(event, event.id === selectedEventId, ()=>{
|
|
3236
|
-
selectedEventId = event.id;
|
|
3237
|
-
|
|
3946
|
+
else for (const event of events)eventList.appendChild(createEventItem(event, event.id === panelState.selectedEventId, ()=>{
|
|
3947
|
+
panelState.selectedEventId = event.id;
|
|
3948
|
+
renderEventsPanel(container, options);
|
|
3238
3949
|
}));
|
|
3239
3950
|
container.appendChild(eventList);
|
|
3240
3951
|
container.appendChild(createPayloadSection(selectedEvent));
|
|
@@ -3261,6 +3972,11 @@ function matchesFilter(event, filter) {
|
|
|
3261
3972
|
if ('network' === filter) return 'network' === event.type;
|
|
3262
3973
|
return 'iab' === event.type;
|
|
3263
3974
|
}
|
|
3975
|
+
function matchesSearch(event, query) {
|
|
3976
|
+
if (!query) return true;
|
|
3977
|
+
const haystack = `${event.type} ${event.message} ${JSON.stringify(event.data ?? {})}`;
|
|
3978
|
+
return haystack.toLowerCase().includes(query);
|
|
3979
|
+
}
|
|
3264
3980
|
function createPayloadSection(event) {
|
|
3265
3981
|
const payload = event?.data ? JSON.stringify(event.data, null, 2) : null;
|
|
3266
3982
|
return renderer_div({
|
|
@@ -3313,7 +4029,7 @@ function createEventItem(event, selected, onSelect) {
|
|
|
3313
4029
|
},
|
|
3314
4030
|
onClick: onSelect,
|
|
3315
4031
|
children: [
|
|
3316
|
-
|
|
4032
|
+
renderer_span({
|
|
3317
4033
|
style: {
|
|
3318
4034
|
color,
|
|
3319
4035
|
fontSize: '8px',
|
|
@@ -3321,7 +4037,7 @@ function createEventItem(event, selected, onSelect) {
|
|
|
3321
4037
|
},
|
|
3322
4038
|
text: icon
|
|
3323
4039
|
}),
|
|
3324
|
-
|
|
4040
|
+
renderer_span({
|
|
3325
4041
|
style: {
|
|
3326
4042
|
color: 'var(--c15t-text-muted)',
|
|
3327
4043
|
fontFamily: 'monospace',
|
|
@@ -3330,7 +4046,7 @@ function createEventItem(event, selected, onSelect) {
|
|
|
3330
4046
|
},
|
|
3331
4047
|
text: time
|
|
3332
4048
|
}),
|
|
3333
|
-
|
|
4049
|
+
renderer_span({
|
|
3334
4050
|
style: {
|
|
3335
4051
|
color: 'var(--c15t-text)',
|
|
3336
4052
|
flex: '1'
|
|
@@ -3398,38 +4114,15 @@ function getEventColor(type) {
|
|
|
3398
4114
|
return 'var(--c15t-text-muted)';
|
|
3399
4115
|
}
|
|
3400
4116
|
}
|
|
3401
|
-
|
|
4117
|
+
const iabSearchByContainer = new WeakMap();
|
|
4118
|
+
function renderIabPanel(container, options) {
|
|
3402
4119
|
const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
|
|
3403
4120
|
clearElement(container);
|
|
3404
4121
|
const state = getState();
|
|
3405
|
-
if (!state) return void container.appendChild(
|
|
3406
|
-
|
|
3407
|
-
padding: '24px',
|
|
3408
|
-
textAlign: 'center',
|
|
3409
|
-
color: 'var(--c15t-text-muted)',
|
|
3410
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3411
|
-
},
|
|
3412
|
-
text: 'Store not connected'
|
|
3413
|
-
}));
|
|
3414
|
-
if ('iab' !== state.model) return void container.appendChild(renderer_div({
|
|
3415
|
-
style: {
|
|
3416
|
-
padding: '24px',
|
|
3417
|
-
textAlign: 'center',
|
|
3418
|
-
color: 'var(--c15t-text-muted)',
|
|
3419
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3420
|
-
},
|
|
3421
|
-
text: 'IAB TCF mode is not configured'
|
|
3422
|
-
}));
|
|
4122
|
+
if (!state) return void container.appendChild(createDisconnectedState());
|
|
4123
|
+
if ('iab' !== state.model) return void container.appendChild(createDisconnectedState('IAB TCF mode is not configured'));
|
|
3423
4124
|
const iabState = state.iab;
|
|
3424
|
-
if (!iabState) return void container.appendChild(
|
|
3425
|
-
style: {
|
|
3426
|
-
padding: '24px',
|
|
3427
|
-
textAlign: 'center',
|
|
3428
|
-
color: 'var(--c15t-text-muted)',
|
|
3429
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3430
|
-
},
|
|
3431
|
-
text: 'IAB state not available'
|
|
3432
|
-
}));
|
|
4125
|
+
if (!iabState) return void container.appendChild(createDisconnectedState('IAB state not available'));
|
|
3433
4126
|
const tcString = iabState.tcString;
|
|
3434
4127
|
const tcStringSection = createSection({
|
|
3435
4128
|
title: 'TC String',
|
|
@@ -3461,9 +4154,30 @@ function iab_renderIabPanel(container, options) {
|
|
|
3461
4154
|
});
|
|
3462
4155
|
container.appendChild(tcStringSection);
|
|
3463
4156
|
const gvl = iabState.gvl;
|
|
4157
|
+
const searchQuery = iabSearchByContainer.get(container) ?? '';
|
|
4158
|
+
container.appendChild(createSection({
|
|
4159
|
+
title: 'Filter',
|
|
4160
|
+
children: [
|
|
4161
|
+
createInput({
|
|
4162
|
+
value: searchQuery,
|
|
4163
|
+
placeholder: 'Filter purposes or vendors…',
|
|
4164
|
+
ariaLabel: 'Filter IAB purposes and vendors',
|
|
4165
|
+
small: true,
|
|
4166
|
+
onInput: (value)=>{
|
|
4167
|
+
iabSearchByContainer.set(container, value.trim().toLowerCase());
|
|
4168
|
+
renderIabPanel(container, options);
|
|
4169
|
+
}
|
|
4170
|
+
})
|
|
4171
|
+
]
|
|
4172
|
+
}));
|
|
3464
4173
|
const purposeConsents = iabState.purposeConsents || {};
|
|
3465
4174
|
const purposes = gvl?.purposes || {};
|
|
3466
|
-
const purposeEntries = Object.entries(purposeConsents)
|
|
4175
|
+
const purposeEntries = Object.entries(purposeConsents).filter(([purposeId])=>{
|
|
4176
|
+
if (!searchQuery) return true;
|
|
4177
|
+
const purposeInfo = purposes[purposeId];
|
|
4178
|
+
const purposeName = purposeInfo?.name || `Purpose ${purposeId}`;
|
|
4179
|
+
return `${purposeId} ${purposeName}`.toLowerCase().includes(searchQuery);
|
|
4180
|
+
});
|
|
3467
4181
|
if (purposeEntries.length > 0) {
|
|
3468
4182
|
const purposeList = renderer_div({
|
|
3469
4183
|
style: {
|
|
@@ -3491,7 +4205,12 @@ function iab_renderIabPanel(container, options) {
|
|
|
3491
4205
|
}
|
|
3492
4206
|
const specialFeatureOptIns = iabState.specialFeatureOptIns || {};
|
|
3493
4207
|
const specialFeatures = gvl?.specialFeatures || {};
|
|
3494
|
-
const specialFeatureEntries = Object.entries(specialFeatureOptIns)
|
|
4208
|
+
const specialFeatureEntries = Object.entries(specialFeatureOptIns).filter(([featureId])=>{
|
|
4209
|
+
if (!searchQuery) return true;
|
|
4210
|
+
const featureInfo = specialFeatures[featureId];
|
|
4211
|
+
const featureName = featureInfo?.name || `Special Feature ${featureId}`;
|
|
4212
|
+
return `${featureId} ${featureName}`.toLowerCase().includes(searchQuery);
|
|
4213
|
+
});
|
|
3495
4214
|
if (specialFeatureEntries.length > 0) {
|
|
3496
4215
|
const specialFeatureList = renderer_div({
|
|
3497
4216
|
style: {
|
|
@@ -3519,7 +4238,12 @@ function iab_renderIabPanel(container, options) {
|
|
|
3519
4238
|
}
|
|
3520
4239
|
const vendorConsents = iabState.vendorConsents || {};
|
|
3521
4240
|
const vendors = gvl?.vendors || {};
|
|
3522
|
-
const vendorEntries = Object.entries(vendorConsents)
|
|
4241
|
+
const vendorEntries = Object.entries(vendorConsents).filter(([vendorId])=>{
|
|
4242
|
+
if (!searchQuery) return true;
|
|
4243
|
+
const vendorInfo = vendors[vendorId];
|
|
4244
|
+
const vendorName = vendorInfo?.name || `Vendor ${vendorId}`;
|
|
4245
|
+
return `${vendorId} ${vendorName}`.toLowerCase().includes(searchQuery);
|
|
4246
|
+
});
|
|
3523
4247
|
const iabVendors = [];
|
|
3524
4248
|
const customVendors = [];
|
|
3525
4249
|
for (const [vendorId, consent] of vendorEntries){
|
|
@@ -3645,7 +4369,7 @@ function createPurposeRow(id, name, consent, onChange, ariaKind = 'purpose') {
|
|
|
3645
4369
|
borderBottom: '1px solid var(--c15t-border)'
|
|
3646
4370
|
},
|
|
3647
4371
|
children: [
|
|
3648
|
-
|
|
4372
|
+
renderer_span({
|
|
3649
4373
|
style: {
|
|
3650
4374
|
color: 'var(--c15t-text)',
|
|
3651
4375
|
overflow: 'hidden',
|
|
@@ -3699,7 +4423,7 @@ function createVendorRow(id, name, consent, type, onChange) {
|
|
|
3699
4423
|
marginRight: '8px'
|
|
3700
4424
|
},
|
|
3701
4425
|
children: [
|
|
3702
|
-
'custom' === type ?
|
|
4426
|
+
'custom' === type ? renderer_span({
|
|
3703
4427
|
style: {
|
|
3704
4428
|
fontSize: '9px',
|
|
3705
4429
|
padding: '1px 4px',
|
|
@@ -3710,7 +4434,7 @@ function createVendorRow(id, name, consent, type, onChange) {
|
|
|
3710
4434
|
},
|
|
3711
4435
|
text: 'CUSTOM'
|
|
3712
4436
|
}) : null,
|
|
3713
|
-
|
|
4437
|
+
renderer_span({
|
|
3714
4438
|
style: {
|
|
3715
4439
|
color: 'var(--c15t-text)',
|
|
3716
4440
|
overflow: 'hidden',
|
|
@@ -3738,19 +4462,11 @@ function truncateText(text, maxLength) {
|
|
|
3738
4462
|
if (text.length <= maxLength) return text;
|
|
3739
4463
|
return `${text.slice(0, maxLength - 3)}...`;
|
|
3740
4464
|
}
|
|
3741
|
-
function
|
|
4465
|
+
function renderLocationPanel(container, options) {
|
|
3742
4466
|
const { getState, onApplyOverrides, onClearOverrides } = options;
|
|
3743
4467
|
clearElement(container);
|
|
3744
4468
|
const state = getState();
|
|
3745
|
-
if (!state) return void container.appendChild(
|
|
3746
|
-
style: {
|
|
3747
|
-
padding: '24px',
|
|
3748
|
-
textAlign: 'center',
|
|
3749
|
-
color: 'var(--c15t-text-muted)',
|
|
3750
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
3751
|
-
},
|
|
3752
|
-
text: 'Store not connected'
|
|
3753
|
-
}));
|
|
4469
|
+
if (!state) return void container.appendChild(createDisconnectedState());
|
|
3754
4470
|
const locationInfo = state.locationInfo;
|
|
3755
4471
|
const overrides = state.overrides;
|
|
3756
4472
|
const translationConfig = state.translationConfig;
|
|
@@ -3790,7 +4506,7 @@ function location_renderLocationPanel(container, options) {
|
|
|
3790
4506
|
selectOptions: GPC_OPTIONS,
|
|
3791
4507
|
value: initialDraft.gpc
|
|
3792
4508
|
});
|
|
3793
|
-
const formStatus =
|
|
4509
|
+
const formStatus = renderer_span({
|
|
3794
4510
|
className: styles_components_module.overrideStatus,
|
|
3795
4511
|
text: 'In sync'
|
|
3796
4512
|
});
|
|
@@ -3836,7 +4552,7 @@ function location_renderLocationPanel(container, options) {
|
|
|
3836
4552
|
title: 'Override Settings',
|
|
3837
4553
|
children: [
|
|
3838
4554
|
overrideFieldsGrid,
|
|
3839
|
-
|
|
4555
|
+
renderer_span({
|
|
3840
4556
|
className: styles_components_module.overrideHint,
|
|
3841
4557
|
text: 'GPC override only affects opt-out or unregulated jurisdictions.'
|
|
3842
4558
|
}),
|
|
@@ -3924,7 +4640,7 @@ function createOverrideInput(options) {
|
|
|
3924
4640
|
element: renderer_div({
|
|
3925
4641
|
className: styles_components_module.overrideField,
|
|
3926
4642
|
children: [
|
|
3927
|
-
|
|
4643
|
+
renderer_span({
|
|
3928
4644
|
className: styles_components_module.overrideLabel,
|
|
3929
4645
|
text: label
|
|
3930
4646
|
}),
|
|
@@ -3945,7 +4661,7 @@ function createOverrideSelect(options) {
|
|
|
3945
4661
|
element: renderer_div({
|
|
3946
4662
|
className: styles_components_module.overrideField,
|
|
3947
4663
|
children: [
|
|
3948
|
-
|
|
4664
|
+
renderer_span({
|
|
3949
4665
|
className: styles_components_module.overrideLabel,
|
|
3950
4666
|
text: label
|
|
3951
4667
|
}),
|
|
@@ -4156,14 +4872,14 @@ function createCompactInfoCard(label, value) {
|
|
|
4156
4872
|
gap: '1px'
|
|
4157
4873
|
},
|
|
4158
4874
|
children: [
|
|
4159
|
-
|
|
4875
|
+
renderer_span({
|
|
4160
4876
|
style: {
|
|
4161
4877
|
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
4162
4878
|
color: 'var(--c15t-text-muted)'
|
|
4163
4879
|
},
|
|
4164
4880
|
text: label
|
|
4165
4881
|
}),
|
|
4166
|
-
|
|
4882
|
+
renderer_span({
|
|
4167
4883
|
style: {
|
|
4168
4884
|
fontSize: 'var(--c15t-font-size-sm)',
|
|
4169
4885
|
fontWeight: '500',
|
|
@@ -4339,21 +5055,21 @@ function createResourceRow(resource, variant, onDismiss) {
|
|
|
4339
5055
|
borderBottom: '1px solid var(--c15t-border)'
|
|
4340
5056
|
},
|
|
4341
5057
|
children: [
|
|
4342
|
-
|
|
5058
|
+
renderer_span({
|
|
4343
5059
|
style: {
|
|
4344
5060
|
color: iconColor,
|
|
4345
5061
|
flexShrink: '0'
|
|
4346
5062
|
},
|
|
4347
5063
|
text: icon
|
|
4348
5064
|
}),
|
|
4349
|
-
|
|
5065
|
+
renderer_span({
|
|
4350
5066
|
style: {
|
|
4351
5067
|
color: 'var(--c15t-text-muted)',
|
|
4352
5068
|
flexShrink: '0'
|
|
4353
5069
|
},
|
|
4354
5070
|
text: `${resource.type}:`
|
|
4355
5071
|
}),
|
|
4356
|
-
|
|
5072
|
+
renderer_span({
|
|
4357
5073
|
style: {
|
|
4358
5074
|
fontWeight: '500',
|
|
4359
5075
|
color: 'var(--c15t-text)',
|
|
@@ -4399,23 +5115,37 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
|
|
|
4399
5115
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
4400
5116
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
4401
5117
|
</svg>`;
|
|
4402
|
-
|
|
5118
|
+
const scriptsSearchByContainer = new WeakMap();
|
|
5119
|
+
function renderScriptsPanel(container, options) {
|
|
4403
5120
|
const { getState, getEvents } = options;
|
|
4404
5121
|
clearElement(container);
|
|
4405
5122
|
const state = getState();
|
|
4406
|
-
if (!state) return void container.appendChild(
|
|
4407
|
-
style: {
|
|
4408
|
-
padding: '24px',
|
|
4409
|
-
textAlign: 'center',
|
|
4410
|
-
color: 'var(--c15t-text-muted)',
|
|
4411
|
-
fontSize: 'var(--c15t-devtools-font-size-sm)'
|
|
4412
|
-
},
|
|
4413
|
-
text: 'Store not connected'
|
|
4414
|
-
}));
|
|
5123
|
+
if (!state) return void container.appendChild(createDisconnectedState());
|
|
4415
5124
|
const scripts = state.scripts || [];
|
|
4416
5125
|
const loadedScripts = state.loadedScripts || {};
|
|
4417
5126
|
const networkBlocker = state.networkBlocker;
|
|
4418
5127
|
const events = getEvents?.() ?? [];
|
|
5128
|
+
const searchQuery = scriptsSearchByContainer.get(container) ?? '';
|
|
5129
|
+
const filteredScripts = scripts.filter((script)=>{
|
|
5130
|
+
if (!searchQuery) return true;
|
|
5131
|
+
const category = 'string' == typeof script.category ? script.category : JSON.stringify(script.category);
|
|
5132
|
+
return `${script.id} ${category}`.toLowerCase().includes(searchQuery);
|
|
5133
|
+
});
|
|
5134
|
+
if (scripts.length > 4) container.appendChild(createSection({
|
|
5135
|
+
title: 'Filter',
|
|
5136
|
+
children: [
|
|
5137
|
+
createInput({
|
|
5138
|
+
value: searchQuery,
|
|
5139
|
+
placeholder: "Filter scripts…",
|
|
5140
|
+
ariaLabel: "Filter scripts",
|
|
5141
|
+
small: true,
|
|
5142
|
+
onInput: (value)=>{
|
|
5143
|
+
scriptsSearchByContainer.set(container, value.trim().toLowerCase());
|
|
5144
|
+
renderScriptsPanel(container, options);
|
|
5145
|
+
}
|
|
5146
|
+
})
|
|
5147
|
+
]
|
|
5148
|
+
}));
|
|
4419
5149
|
if (0 === scripts.length) {
|
|
4420
5150
|
const scriptsSection = createSection({
|
|
4421
5151
|
title: 'Configured Scripts',
|
|
@@ -4432,10 +5162,19 @@ function scripts_renderScriptsPanel(container, options) {
|
|
|
4432
5162
|
style: {
|
|
4433
5163
|
display: 'flex',
|
|
4434
5164
|
flexDirection: 'column',
|
|
4435
|
-
|
|
5165
|
+
borderTop: '1px solid var(--c15t-border)',
|
|
5166
|
+
borderBottom: '1px solid var(--c15t-border)'
|
|
4436
5167
|
}
|
|
4437
5168
|
});
|
|
4438
|
-
|
|
5169
|
+
if (0 === filteredScripts.length) scriptsList.appendChild(renderer_div({
|
|
5170
|
+
style: {
|
|
5171
|
+
padding: '10px 0',
|
|
5172
|
+
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
5173
|
+
color: 'var(--c15t-text-muted)'
|
|
5174
|
+
},
|
|
5175
|
+
text: "No matching scripts"
|
|
5176
|
+
}));
|
|
5177
|
+
for (const script of filteredScripts){
|
|
4439
5178
|
const scriptId = script.id;
|
|
4440
5179
|
const isLoaded = true === loadedScripts[scriptId];
|
|
4441
5180
|
const category = script.category;
|
|
@@ -4459,21 +5198,68 @@ function scripts_renderScriptsPanel(container, options) {
|
|
|
4459
5198
|
text: status.charAt(0).toUpperCase() + status.slice(1),
|
|
4460
5199
|
variant: statusVariant
|
|
4461
5200
|
});
|
|
4462
|
-
const
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
|
|
4476
|
-
|
|
5201
|
+
const row = renderer_div({
|
|
5202
|
+
style: {
|
|
5203
|
+
display: 'flex',
|
|
5204
|
+
alignItems: 'center',
|
|
5205
|
+
justifyContent: 'space-between',
|
|
5206
|
+
gap: '8px',
|
|
5207
|
+
padding: '8px 0',
|
|
5208
|
+
borderBottom: '1px solid var(--c15t-border)'
|
|
5209
|
+
},
|
|
5210
|
+
children: [
|
|
5211
|
+
renderer_div({
|
|
5212
|
+
style: {
|
|
5213
|
+
display: 'flex',
|
|
5214
|
+
flexDirection: 'column',
|
|
5215
|
+
gap: '2px',
|
|
5216
|
+
minWidth: '0',
|
|
5217
|
+
flex: '1'
|
|
5218
|
+
},
|
|
5219
|
+
children: [
|
|
5220
|
+
renderer_div({
|
|
5221
|
+
style: {
|
|
5222
|
+
fontSize: 'var(--c15t-font-size-sm)',
|
|
5223
|
+
fontWeight: '500',
|
|
5224
|
+
color: 'var(--c15t-text)',
|
|
5225
|
+
overflow: 'hidden',
|
|
5226
|
+
textOverflow: 'ellipsis',
|
|
5227
|
+
whiteSpace: 'nowrap'
|
|
5228
|
+
},
|
|
5229
|
+
text: scriptId
|
|
5230
|
+
}),
|
|
5231
|
+
renderer_div({
|
|
5232
|
+
style: {
|
|
5233
|
+
fontSize: 'var(--c15t-devtools-font-size-xs)',
|
|
5234
|
+
color: 'var(--c15t-text-muted)',
|
|
5235
|
+
overflow: 'hidden',
|
|
5236
|
+
textOverflow: 'ellipsis',
|
|
5237
|
+
whiteSpace: 'nowrap'
|
|
5238
|
+
},
|
|
5239
|
+
text: `Category: ${categoryDisplay}`
|
|
5240
|
+
})
|
|
5241
|
+
]
|
|
5242
|
+
}),
|
|
5243
|
+
renderer_div({
|
|
5244
|
+
style: {
|
|
5245
|
+
flexShrink: '0'
|
|
5246
|
+
},
|
|
5247
|
+
children: [
|
|
5248
|
+
badge
|
|
5249
|
+
]
|
|
5250
|
+
})
|
|
5251
|
+
]
|
|
5252
|
+
});
|
|
5253
|
+
scriptsList.appendChild(row);
|
|
5254
|
+
}
|
|
5255
|
+
const lastRow = scriptsList.lastElementChild;
|
|
5256
|
+
if (lastRow) lastRow.style.borderBottom = 'none';
|
|
5257
|
+
const scriptsSection = createSection({
|
|
5258
|
+
title: `Configured Scripts (${filteredScripts.length}/${scripts.length})`,
|
|
5259
|
+
children: [
|
|
5260
|
+
scriptsList
|
|
5261
|
+
]
|
|
5262
|
+
});
|
|
4477
5263
|
container.appendChild(scriptsSection);
|
|
4478
5264
|
}
|
|
4479
5265
|
const networkSection = createSection({
|
|
@@ -4611,53 +5397,6 @@ function scripts_truncateText(text, maxLength) {
|
|
|
4611
5397
|
if (text.length <= maxLength) return text;
|
|
4612
5398
|
return `${text.slice(0, maxLength - 3)}...`;
|
|
4613
5399
|
}
|
|
4614
|
-
const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
|
|
4615
|
-
function normalizeStringValue(value) {
|
|
4616
|
-
if ('string' != typeof value) return;
|
|
4617
|
-
const normalized = value.trim();
|
|
4618
|
-
return normalized.length > 0 ? normalized : void 0;
|
|
4619
|
-
}
|
|
4620
|
-
function normalizeBooleanValue(value) {
|
|
4621
|
-
return 'boolean' == typeof value ? value : void 0;
|
|
4622
|
-
}
|
|
4623
|
-
function normalizeOverrides(value) {
|
|
4624
|
-
if (!value || 'object' != typeof value) return null;
|
|
4625
|
-
const source = value;
|
|
4626
|
-
const overrides = {
|
|
4627
|
-
country: normalizeStringValue(source.country),
|
|
4628
|
-
region: normalizeStringValue(source.region),
|
|
4629
|
-
language: normalizeStringValue(source.language),
|
|
4630
|
-
gpc: normalizeBooleanValue(source.gpc)
|
|
4631
|
-
};
|
|
4632
|
-
return hasPersistedOverrides(overrides) ? overrides : null;
|
|
4633
|
-
}
|
|
4634
|
-
function hasPersistedOverrides(overrides) {
|
|
4635
|
-
return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
|
|
4636
|
-
}
|
|
4637
|
-
function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
4638
|
-
if ('undefined' == typeof window) return null;
|
|
4639
|
-
try {
|
|
4640
|
-
const stored = localStorage.getItem(storageKey);
|
|
4641
|
-
if (!stored) return null;
|
|
4642
|
-
const parsed = JSON.parse(stored);
|
|
4643
|
-
return normalizeOverrides(parsed);
|
|
4644
|
-
} catch {
|
|
4645
|
-
return null;
|
|
4646
|
-
}
|
|
4647
|
-
}
|
|
4648
|
-
function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
4649
|
-
if ('undefined' == typeof window) return;
|
|
4650
|
-
try {
|
|
4651
|
-
if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
|
|
4652
|
-
localStorage.setItem(storageKey, JSON.stringify(overrides));
|
|
4653
|
-
} catch {}
|
|
4654
|
-
}
|
|
4655
|
-
function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
|
|
4656
|
-
if ('undefined' == typeof window) return;
|
|
4657
|
-
try {
|
|
4658
|
-
localStorage.removeItem(storageKey);
|
|
4659
|
-
} catch {}
|
|
4660
|
-
}
|
|
4661
5400
|
const STORAGE_KEYS = {
|
|
4662
5401
|
C15T: 'c15t',
|
|
4663
5402
|
PENDING_SYNC: 'c15t:pending-consent-sync',
|
|
@@ -4683,7 +5422,7 @@ function clearAllLocalStorage() {
|
|
|
4683
5422
|
localStorage.removeItem(STORAGE_KEYS.EUCONSENT);
|
|
4684
5423
|
} catch {}
|
|
4685
5424
|
}
|
|
4686
|
-
async function
|
|
5425
|
+
async function resetAllConsents(store, stateManager) {
|
|
4687
5426
|
const storeState = store.getState();
|
|
4688
5427
|
storeState.resetConsents();
|
|
4689
5428
|
clearAllCookies();
|
|
@@ -4694,7 +5433,222 @@ async function reset_consents_resetAllConsents(store, stateManager) {
|
|
|
4694
5433
|
message: 'All consents reset (storage cleared)'
|
|
4695
5434
|
});
|
|
4696
5435
|
}
|
|
5436
|
+
function panel_renderer_createPanelRenderer(config) {
|
|
5437
|
+
const { storeConnector, stateManager, enableEventLogging = true, onPersistOverrides, onClearPersistedOverrides, onCopyState, onExportDebugBundle } = config;
|
|
5438
|
+
const getStoreState = ()=>storeConnector.getState();
|
|
5439
|
+
const logEvent = (type, message, data)=>{
|
|
5440
|
+
if (enableEventLogging) stateManager.addEvent({
|
|
5441
|
+
type,
|
|
5442
|
+
message,
|
|
5443
|
+
data
|
|
5444
|
+
});
|
|
5445
|
+
};
|
|
5446
|
+
const resetConsents = async ()=>{
|
|
5447
|
+
const store = storeConnector.getStore();
|
|
5448
|
+
if (store) await resetAllConsents(store, enableEventLogging ? stateManager : void 0);
|
|
5449
|
+
};
|
|
5450
|
+
const renderPanel = (container, tab)=>{
|
|
5451
|
+
switch(tab){
|
|
5452
|
+
case 'consents':
|
|
5453
|
+
renderConsentsPanel(container, {
|
|
5454
|
+
getState: getStoreState,
|
|
5455
|
+
onConsentChange: (name, value)=>{
|
|
5456
|
+
const store = storeConnector.getStore();
|
|
5457
|
+
if (store) {
|
|
5458
|
+
const consentName = String(name);
|
|
5459
|
+
store.getState().setSelectedConsent(consentName, value);
|
|
5460
|
+
logEvent('info', `${consentName} toggled to ${value} (not saved)`, {
|
|
5461
|
+
name: consentName,
|
|
5462
|
+
value
|
|
5463
|
+
});
|
|
5464
|
+
}
|
|
5465
|
+
},
|
|
5466
|
+
onSave: ()=>{
|
|
5467
|
+
const store = storeConnector.getStore();
|
|
5468
|
+
if (store) {
|
|
5469
|
+
store.getState().saveConsents('custom');
|
|
5470
|
+
logEvent('consent_save', 'Saved consent preferences');
|
|
5471
|
+
}
|
|
5472
|
+
},
|
|
5473
|
+
onAcceptAll: ()=>{
|
|
5474
|
+
const store = storeConnector.getStore();
|
|
5475
|
+
if (store) {
|
|
5476
|
+
store.getState().saveConsents('all');
|
|
5477
|
+
logEvent('consent_save', 'Accepted all consents');
|
|
5478
|
+
}
|
|
5479
|
+
},
|
|
5480
|
+
onRejectAll: ()=>{
|
|
5481
|
+
const store = storeConnector.getStore();
|
|
5482
|
+
if (store) {
|
|
5483
|
+
store.getState().saveConsents('necessary');
|
|
5484
|
+
logEvent('consent_save', 'Rejected all optional consents');
|
|
5485
|
+
}
|
|
5486
|
+
},
|
|
5487
|
+
onReset: resetConsents
|
|
5488
|
+
});
|
|
5489
|
+
break;
|
|
5490
|
+
case 'location':
|
|
5491
|
+
renderLocationPanel(container, {
|
|
5492
|
+
getState: getStoreState,
|
|
5493
|
+
onApplyOverrides: async (overrides)=>{
|
|
5494
|
+
const store = storeConnector.getStore();
|
|
5495
|
+
if (store) {
|
|
5496
|
+
await store.getState().setOverrides({
|
|
5497
|
+
country: overrides.country,
|
|
5498
|
+
region: overrides.region,
|
|
5499
|
+
language: overrides.language,
|
|
5500
|
+
gpc: overrides.gpc
|
|
5501
|
+
});
|
|
5502
|
+
logEvent('info', 'Overrides updated', {
|
|
5503
|
+
country: overrides.country,
|
|
5504
|
+
region: overrides.region,
|
|
5505
|
+
language: overrides.language,
|
|
5506
|
+
gpc: overrides.gpc
|
|
5507
|
+
});
|
|
5508
|
+
onPersistOverrides?.({
|
|
5509
|
+
country: overrides.country,
|
|
5510
|
+
region: overrides.region,
|
|
5511
|
+
language: overrides.language,
|
|
5512
|
+
gpc: overrides.gpc
|
|
5513
|
+
});
|
|
5514
|
+
}
|
|
5515
|
+
},
|
|
5516
|
+
onClearOverrides: async ()=>{
|
|
5517
|
+
const store = storeConnector.getStore();
|
|
5518
|
+
if (store) {
|
|
5519
|
+
await store.getState().setOverrides({
|
|
5520
|
+
country: void 0,
|
|
5521
|
+
region: void 0,
|
|
5522
|
+
language: void 0,
|
|
5523
|
+
gpc: void 0
|
|
5524
|
+
});
|
|
5525
|
+
logEvent('info', 'Overrides cleared');
|
|
5526
|
+
onClearPersistedOverrides?.();
|
|
5527
|
+
}
|
|
5528
|
+
}
|
|
5529
|
+
});
|
|
5530
|
+
break;
|
|
5531
|
+
case "scripts":
|
|
5532
|
+
renderScriptsPanel(container, {
|
|
5533
|
+
getState: getStoreState,
|
|
5534
|
+
getEvents: ()=>stateManager.getState().eventLog
|
|
5535
|
+
});
|
|
5536
|
+
break;
|
|
5537
|
+
case 'iab':
|
|
5538
|
+
renderIabPanel(container, {
|
|
5539
|
+
getState: getStoreState,
|
|
5540
|
+
onSetPurposeConsent: (purposeId, value)=>{
|
|
5541
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5542
|
+
if (!iab) return;
|
|
5543
|
+
iab.setPurposeConsent(purposeId, value);
|
|
5544
|
+
logEvent('iab', `IAB purpose ${purposeId} set to ${value}`);
|
|
5545
|
+
},
|
|
5546
|
+
onSetVendorConsent: (vendorId, value)=>{
|
|
5547
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5548
|
+
if (!iab) return;
|
|
5549
|
+
iab.setVendorConsent(vendorId, value);
|
|
5550
|
+
logEvent('iab', `IAB vendor ${vendorId} set to ${value}`);
|
|
5551
|
+
},
|
|
5552
|
+
onSetSpecialFeatureOptIn: (featureId, value)=>{
|
|
5553
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5554
|
+
if (!iab) return;
|
|
5555
|
+
iab.setSpecialFeatureOptIn(featureId, value);
|
|
5556
|
+
logEvent('iab', `IAB feature ${featureId} set to ${value}`);
|
|
5557
|
+
},
|
|
5558
|
+
onAcceptAll: ()=>{
|
|
5559
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5560
|
+
if (!iab) return;
|
|
5561
|
+
iab.acceptAll();
|
|
5562
|
+
logEvent('iab', 'IAB accept all selected');
|
|
5563
|
+
},
|
|
5564
|
+
onRejectAll: ()=>{
|
|
5565
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5566
|
+
if (!iab) return;
|
|
5567
|
+
iab.rejectAll();
|
|
5568
|
+
logEvent('iab', 'IAB reject all selected');
|
|
5569
|
+
},
|
|
5570
|
+
onSave: ()=>{
|
|
5571
|
+
const iab = storeConnector.getStore()?.getState().iab;
|
|
5572
|
+
if (!iab) return;
|
|
5573
|
+
iab.save().then(()=>logEvent('iab', 'IAB preferences saved')).catch((error)=>{
|
|
5574
|
+
logEvent('error', `Failed to save IAB preferences: ${String(error)}`);
|
|
5575
|
+
});
|
|
5576
|
+
},
|
|
5577
|
+
onReset: resetConsents
|
|
5578
|
+
});
|
|
5579
|
+
break;
|
|
5580
|
+
case 'events':
|
|
5581
|
+
renderEventsPanel(container, {
|
|
5582
|
+
getEvents: ()=>stateManager.getState().eventLog,
|
|
5583
|
+
onClear: ()=>{
|
|
5584
|
+
stateManager.clearEventLog();
|
|
5585
|
+
logEvent('info', 'Event log cleared');
|
|
5586
|
+
}
|
|
5587
|
+
});
|
|
5588
|
+
break;
|
|
5589
|
+
case 'actions':
|
|
5590
|
+
renderActionsPanel(container, {
|
|
5591
|
+
getState: getStoreState,
|
|
5592
|
+
onResetConsents: resetConsents,
|
|
5593
|
+
onRefetchBanner: async ()=>{
|
|
5594
|
+
const store = storeConnector.getStore();
|
|
5595
|
+
if (store) {
|
|
5596
|
+
await store.getState().initConsentManager();
|
|
5597
|
+
logEvent('info', 'Banner data refetched');
|
|
5598
|
+
}
|
|
5599
|
+
},
|
|
5600
|
+
onShowBanner: ()=>{
|
|
5601
|
+
const store = storeConnector.getStore();
|
|
5602
|
+
if (store) {
|
|
5603
|
+
store.getState().setActiveUI('banner', {
|
|
5604
|
+
force: true
|
|
5605
|
+
});
|
|
5606
|
+
logEvent('info', 'Banner shown');
|
|
5607
|
+
}
|
|
5608
|
+
},
|
|
5609
|
+
onOpenPreferences: ()=>{
|
|
5610
|
+
const store = storeConnector.getStore();
|
|
5611
|
+
if (store) {
|
|
5612
|
+
store.getState().setActiveUI('dialog');
|
|
5613
|
+
logEvent('info', 'Preferences dialog opened');
|
|
5614
|
+
}
|
|
5615
|
+
},
|
|
5616
|
+
onCopyState: ()=>{
|
|
5617
|
+
const state = getStoreState();
|
|
5618
|
+
if (state) if (onCopyState) {
|
|
5619
|
+
const result = onCopyState(state);
|
|
5620
|
+
if (result instanceof Promise) result.then((ok)=>{
|
|
5621
|
+
logEvent(ok ? 'info' : 'error', ok ? 'State copied to clipboard' : 'Failed to copy state');
|
|
5622
|
+
}).catch(()=>{
|
|
5623
|
+
logEvent('error', 'Failed to copy state');
|
|
5624
|
+
});
|
|
5625
|
+
else logEvent(result ? 'info' : 'error', result ? 'State copied to clipboard' : 'Failed to copy state');
|
|
5626
|
+
} else navigator.clipboard.writeText(JSON.stringify(state, null, 2)).then(()=>{
|
|
5627
|
+
logEvent('info', 'State copied to clipboard');
|
|
5628
|
+
}).catch(()=>{
|
|
5629
|
+
logEvent('error', 'Failed to copy state');
|
|
5630
|
+
});
|
|
5631
|
+
},
|
|
5632
|
+
onExportDebugBundle: onExportDebugBundle ? ()=>{
|
|
5633
|
+
try {
|
|
5634
|
+
onExportDebugBundle();
|
|
5635
|
+
logEvent('info', 'Debug bundle exported');
|
|
5636
|
+
} catch {
|
|
5637
|
+
logEvent('error', 'Failed to export debug bundle');
|
|
5638
|
+
}
|
|
5639
|
+
} : void 0
|
|
5640
|
+
});
|
|
5641
|
+
break;
|
|
5642
|
+
}
|
|
5643
|
+
};
|
|
5644
|
+
return {
|
|
5645
|
+
renderPanel,
|
|
5646
|
+
getStoreState,
|
|
5647
|
+
resetConsents
|
|
5648
|
+
};
|
|
5649
|
+
}
|
|
4697
5650
|
const STORAGE_KEY = 'c15t-devtools-events';
|
|
5651
|
+
const ACTIVE_TAB_STORAGE_KEY = 'c15t-devtools-active-tab';
|
|
4698
5652
|
function loadPersistedEvents() {
|
|
4699
5653
|
if ('undefined' == typeof window) return [];
|
|
4700
5654
|
try {
|
|
@@ -4709,11 +5663,29 @@ function persistEvents(events) {
|
|
|
4709
5663
|
sessionStorage.setItem(STORAGE_KEY, JSON.stringify(events));
|
|
4710
5664
|
} catch {}
|
|
4711
5665
|
}
|
|
5666
|
+
function isDevToolsTab(value) {
|
|
5667
|
+
return 'consents' === value || 'location' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
|
|
5668
|
+
}
|
|
5669
|
+
function loadPersistedActiveTab() {
|
|
5670
|
+
if ('undefined' == typeof window) return null;
|
|
5671
|
+
try {
|
|
5672
|
+
const stored = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
|
|
5673
|
+
if (isDevToolsTab(stored)) return stored;
|
|
5674
|
+
} catch {}
|
|
5675
|
+
return null;
|
|
5676
|
+
}
|
|
5677
|
+
function persistActiveTab(tab) {
|
|
5678
|
+
if ('undefined' == typeof window) return;
|
|
5679
|
+
try {
|
|
5680
|
+
localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, tab);
|
|
5681
|
+
} catch {}
|
|
5682
|
+
}
|
|
4712
5683
|
function state_manager_createStateManager(initialState = {}) {
|
|
4713
5684
|
const persistedEvents = loadPersistedEvents();
|
|
5685
|
+
const persistedActiveTab = loadPersistedActiveTab();
|
|
4714
5686
|
let state = {
|
|
4715
5687
|
isOpen: false,
|
|
4716
|
-
activeTab: 'location',
|
|
5688
|
+
activeTab: persistedActiveTab ?? 'location',
|
|
4717
5689
|
position: 'bottom-right',
|
|
4718
5690
|
isConnected: false,
|
|
4719
5691
|
eventLog: persistedEvents,
|
|
@@ -4754,6 +5726,7 @@ function state_manager_createStateManager(initialState = {}) {
|
|
|
4754
5726
|
setState({
|
|
4755
5727
|
activeTab: tab
|
|
4756
5728
|
});
|
|
5729
|
+
persistActiveTab(tab);
|
|
4757
5730
|
},
|
|
4758
5731
|
setPosition: (position)=>{
|
|
4759
5732
|
setState({
|
|
@@ -4799,22 +5772,52 @@ function store_connector_createStoreConnector(options = {}) {
|
|
|
4799
5772
|
let reconnectAttempts = 0;
|
|
4800
5773
|
let hasNotifiedDisconnect = false;
|
|
4801
5774
|
const listeners = new Set();
|
|
5775
|
+
const diagnosticsListeners = new Set();
|
|
5776
|
+
let diagnostics = {
|
|
5777
|
+
namespace,
|
|
5778
|
+
reconnectAttempts: 0,
|
|
5779
|
+
nextRetryInMs: null,
|
|
5780
|
+
lastError: null,
|
|
5781
|
+
isPolling: false,
|
|
5782
|
+
disconnectNotified: false
|
|
5783
|
+
};
|
|
4802
5784
|
const INITIAL_RETRY_DELAY_MS = 100;
|
|
4803
5785
|
const MAX_RETRY_DELAY_MS = 2000;
|
|
4804
5786
|
const DISCONNECT_NOTIFY_ATTEMPTS = 5;
|
|
5787
|
+
function updateDiagnostics(partial, notify = true) {
|
|
5788
|
+
diagnostics = {
|
|
5789
|
+
...diagnostics,
|
|
5790
|
+
...partial
|
|
5791
|
+
};
|
|
5792
|
+
if (!notify) return;
|
|
5793
|
+
for (const listener of diagnosticsListeners)listener(diagnostics);
|
|
5794
|
+
}
|
|
4805
5795
|
function clearReconnectTimer() {
|
|
4806
5796
|
if (reconnectTimeout) {
|
|
4807
5797
|
clearTimeout(reconnectTimeout);
|
|
4808
5798
|
reconnectTimeout = null;
|
|
5799
|
+
updateDiagnostics({
|
|
5800
|
+
isPolling: false,
|
|
5801
|
+
nextRetryInMs: null
|
|
5802
|
+
});
|
|
4809
5803
|
}
|
|
4810
5804
|
}
|
|
4811
5805
|
function resetReconnectState() {
|
|
4812
5806
|
reconnectAttempts = 0;
|
|
4813
5807
|
hasNotifiedDisconnect = false;
|
|
5808
|
+
updateDiagnostics({
|
|
5809
|
+
reconnectAttempts: 0,
|
|
5810
|
+
nextRetryInMs: null,
|
|
5811
|
+
lastError: null,
|
|
5812
|
+
disconnectNotified: false
|
|
5813
|
+
});
|
|
4814
5814
|
}
|
|
4815
5815
|
function notifyDisconnectedOnce() {
|
|
4816
5816
|
if (hasNotifiedDisconnect) return;
|
|
4817
5817
|
hasNotifiedDisconnect = true;
|
|
5818
|
+
updateDiagnostics({
|
|
5819
|
+
disconnectNotified: true
|
|
5820
|
+
});
|
|
4818
5821
|
onDisconnect?.();
|
|
4819
5822
|
}
|
|
4820
5823
|
function tryConnect() {
|
|
@@ -4835,16 +5838,31 @@ function store_connector_createStoreConnector(options = {}) {
|
|
|
4835
5838
|
onConnect?.(currentState, store);
|
|
4836
5839
|
clearReconnectTimer();
|
|
4837
5840
|
resetReconnectState();
|
|
5841
|
+
updateDiagnostics({
|
|
5842
|
+
lastError: null
|
|
5843
|
+
});
|
|
4838
5844
|
return true;
|
|
4839
5845
|
}
|
|
5846
|
+
updateDiagnostics({
|
|
5847
|
+
lastError: `Store "${namespace}" not found on window`
|
|
5848
|
+
});
|
|
4840
5849
|
return false;
|
|
4841
5850
|
}
|
|
4842
5851
|
function scheduleReconnect(immediate = false) {
|
|
4843
5852
|
if (store || reconnectTimeout) return;
|
|
4844
5853
|
const delay = immediate ? 0 : Math.min(INITIAL_RETRY_DELAY_MS * 2 ** Math.min(reconnectAttempts, 5), MAX_RETRY_DELAY_MS);
|
|
5854
|
+
updateDiagnostics({
|
|
5855
|
+
isPolling: true,
|
|
5856
|
+
nextRetryInMs: delay,
|
|
5857
|
+
reconnectAttempts
|
|
5858
|
+
});
|
|
4845
5859
|
reconnectTimeout = setTimeout(()=>{
|
|
4846
5860
|
reconnectTimeout = null;
|
|
4847
5861
|
reconnectAttempts++;
|
|
5862
|
+
updateDiagnostics({
|
|
5863
|
+
reconnectAttempts,
|
|
5864
|
+
nextRetryInMs: null
|
|
5865
|
+
});
|
|
4848
5866
|
if (tryConnect()) return;
|
|
4849
5867
|
if (reconnectAttempts >= DISCONNECT_NOTIFY_ATTEMPTS) notifyDisconnectedOnce();
|
|
4850
5868
|
scheduleReconnect();
|
|
@@ -4866,6 +5884,14 @@ function store_connector_createStoreConnector(options = {}) {
|
|
|
4866
5884
|
listeners.delete(listener);
|
|
4867
5885
|
};
|
|
4868
5886
|
},
|
|
5887
|
+
getDiagnostics: ()=>diagnostics,
|
|
5888
|
+
subscribeDiagnostics: (listener)=>{
|
|
5889
|
+
diagnosticsListeners.add(listener);
|
|
5890
|
+
listener(diagnostics);
|
|
5891
|
+
return ()=>{
|
|
5892
|
+
diagnosticsListeners.delete(listener);
|
|
5893
|
+
};
|
|
5894
|
+
},
|
|
4869
5895
|
retryConnection: ()=>{
|
|
4870
5896
|
if (store) return;
|
|
4871
5897
|
resetReconnectState();
|
|
@@ -4879,6 +5905,134 @@ function store_connector_createStoreConnector(options = {}) {
|
|
|
4879
5905
|
}
|
|
4880
5906
|
store = null;
|
|
4881
5907
|
listeners.clear();
|
|
5908
|
+
diagnosticsListeners.clear();
|
|
5909
|
+
}
|
|
5910
|
+
};
|
|
5911
|
+
}
|
|
5912
|
+
const REGISTRY_KEY = '__c15tDevToolsInstrumentationRegistry';
|
|
5913
|
+
let fallbackRegistry = null;
|
|
5914
|
+
function getRegistry() {
|
|
5915
|
+
if ('undefined' == typeof window) {
|
|
5916
|
+
if (!fallbackRegistry) fallbackRegistry = new Map();
|
|
5917
|
+
return fallbackRegistry;
|
|
5918
|
+
}
|
|
5919
|
+
const host = window;
|
|
5920
|
+
const existing = host[REGISTRY_KEY];
|
|
5921
|
+
if (existing) return existing;
|
|
5922
|
+
const registry = new Map();
|
|
5923
|
+
host[REGISTRY_KEY] = registry;
|
|
5924
|
+
return registry;
|
|
5925
|
+
}
|
|
5926
|
+
function getBlockedRequestMessage(payload) {
|
|
5927
|
+
const data = payload;
|
|
5928
|
+
const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
|
|
5929
|
+
const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
|
|
5930
|
+
return `Network blocked: ${method} ${url}`;
|
|
5931
|
+
}
|
|
5932
|
+
function emitEvent(entry, event) {
|
|
5933
|
+
for (const listener of entry.listeners)listener(event);
|
|
5934
|
+
}
|
|
5935
|
+
function ensureNetworkBlockerWrapped(entry) {
|
|
5936
|
+
const blocker = entry.store.getState().networkBlocker;
|
|
5937
|
+
if (!blocker) return;
|
|
5938
|
+
if (blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) return;
|
|
5939
|
+
entry.originalNetworkBlockedCallback = blocker.onRequestBlocked;
|
|
5940
|
+
entry.wrappedNetworkBlockedCallback = (payload)=>{
|
|
5941
|
+
emitEvent(entry, {
|
|
5942
|
+
type: 'network',
|
|
5943
|
+
message: getBlockedRequestMessage(payload),
|
|
5944
|
+
data: payload
|
|
5945
|
+
});
|
|
5946
|
+
if ('function' == typeof entry.originalNetworkBlockedCallback) entry.originalNetworkBlockedCallback(payload);
|
|
5947
|
+
};
|
|
5948
|
+
entry.store.getState().setNetworkBlocker({
|
|
5949
|
+
...blocker,
|
|
5950
|
+
onRequestBlocked: entry.wrappedNetworkBlockedCallback
|
|
5951
|
+
});
|
|
5952
|
+
}
|
|
5953
|
+
function restoreInstrumentation(entry) {
|
|
5954
|
+
entry.stopWatchingStore?.();
|
|
5955
|
+
entry.stopWatchingStore = null;
|
|
5956
|
+
const state = entry.store.getState();
|
|
5957
|
+
state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
|
|
5958
|
+
state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
|
|
5959
|
+
state.setCallback('onError', entry.originalCallbacks.onError);
|
|
5960
|
+
state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
|
|
5961
|
+
const blocker = state.networkBlocker;
|
|
5962
|
+
if (blocker && blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) state.setNetworkBlocker({
|
|
5963
|
+
...blocker,
|
|
5964
|
+
onRequestBlocked: entry.originalNetworkBlockedCallback
|
|
5965
|
+
});
|
|
5966
|
+
entry.wrappedNetworkBlockedCallback = null;
|
|
5967
|
+
}
|
|
5968
|
+
function createInstrumentationEntry(store) {
|
|
5969
|
+
const entry = {
|
|
5970
|
+
store,
|
|
5971
|
+
listeners: new Set(),
|
|
5972
|
+
originalCallbacks: {
|
|
5973
|
+
...store.getState().callbacks
|
|
5974
|
+
},
|
|
5975
|
+
originalNetworkBlockedCallback: store.getState().networkBlocker?.onRequestBlocked,
|
|
5976
|
+
wrappedNetworkBlockedCallback: null,
|
|
5977
|
+
stopWatchingStore: null
|
|
5978
|
+
};
|
|
5979
|
+
store.getState().setCallback('onBannerFetched', (payload)=>{
|
|
5980
|
+
const jurisdiction = payload.jurisdiction;
|
|
5981
|
+
emitEvent(entry, {
|
|
5982
|
+
type: 'info',
|
|
5983
|
+
message: `Banner fetched: ${String(jurisdiction)}`,
|
|
5984
|
+
data: payload
|
|
5985
|
+
});
|
|
5986
|
+
if ('function' == typeof entry.originalCallbacks.onBannerFetched) entry.originalCallbacks.onBannerFetched(payload);
|
|
5987
|
+
});
|
|
5988
|
+
store.getState().setCallback('onConsentSet', (payload)=>{
|
|
5989
|
+
emitEvent(entry, {
|
|
5990
|
+
type: 'consent_set',
|
|
5991
|
+
message: 'Consent preferences updated',
|
|
5992
|
+
data: payload
|
|
5993
|
+
});
|
|
5994
|
+
if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
|
|
5995
|
+
});
|
|
5996
|
+
store.getState().setCallback('onError', (payload)=>{
|
|
5997
|
+
const errorMessage = payload.error;
|
|
5998
|
+
emitEvent(entry, {
|
|
5999
|
+
type: 'error',
|
|
6000
|
+
message: `Error: ${String(errorMessage)}`,
|
|
6001
|
+
data: payload
|
|
6002
|
+
});
|
|
6003
|
+
if ('function' == typeof entry.originalCallbacks.onError) entry.originalCallbacks.onError(payload);
|
|
6004
|
+
});
|
|
6005
|
+
store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
|
|
6006
|
+
emitEvent(entry, {
|
|
6007
|
+
type: 'info',
|
|
6008
|
+
message: 'Consent revocation - page will reload',
|
|
6009
|
+
data: payload
|
|
6010
|
+
});
|
|
6011
|
+
if ('function' == typeof entry.originalCallbacks.onBeforeConsentRevocationReload) entry.originalCallbacks.onBeforeConsentRevocationReload(payload);
|
|
6012
|
+
});
|
|
6013
|
+
ensureNetworkBlockerWrapped(entry);
|
|
6014
|
+
entry.stopWatchingStore = store.subscribe(()=>{
|
|
6015
|
+
ensureNetworkBlockerWrapped(entry);
|
|
6016
|
+
});
|
|
6017
|
+
return entry;
|
|
6018
|
+
}
|
|
6019
|
+
function store_instrumentation_registerStoreInstrumentation(options) {
|
|
6020
|
+
const { namespace, store, onEvent } = options;
|
|
6021
|
+
const registry = getRegistry();
|
|
6022
|
+
let entry = registry.get(namespace);
|
|
6023
|
+
if (!entry || entry.store !== store) {
|
|
6024
|
+
if (entry) restoreInstrumentation(entry);
|
|
6025
|
+
entry = createInstrumentationEntry(store);
|
|
6026
|
+
registry.set(namespace, entry);
|
|
6027
|
+
}
|
|
6028
|
+
entry.listeners.add(onEvent);
|
|
6029
|
+
return ()=>{
|
|
6030
|
+
const current = registry.get(namespace);
|
|
6031
|
+
if (!current) return;
|
|
6032
|
+
current.listeners.delete(onEvent);
|
|
6033
|
+
if (0 === current.listeners.size) {
|
|
6034
|
+
restoreInstrumentation(current);
|
|
6035
|
+
registry.delete(namespace);
|
|
4882
6036
|
}
|
|
4883
6037
|
};
|
|
4884
6038
|
}
|
|
@@ -4905,12 +6059,6 @@ function normalizeOverridesForPersistence(overrides) {
|
|
|
4905
6059
|
function persistedOverridesEqual(a, b) {
|
|
4906
6060
|
return a.country === b.country && a.region === b.region && a.language === b.language && a.gpc === b.gpc;
|
|
4907
6061
|
}
|
|
4908
|
-
function getBlockedRequestMessage(payload) {
|
|
4909
|
-
const data = payload;
|
|
4910
|
-
const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
|
|
4911
|
-
const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
|
|
4912
|
-
return `Network blocked: ${method} ${url}`;
|
|
4913
|
-
}
|
|
4914
6062
|
function prefersReducedMotion() {
|
|
4915
6063
|
return 'undefined' != typeof window && 'function' == typeof window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
4916
6064
|
}
|
|
@@ -4971,74 +6119,43 @@ function createPanelHeightAnimator() {
|
|
|
4971
6119
|
destroy: clearAnimationState
|
|
4972
6120
|
};
|
|
4973
6121
|
}
|
|
6122
|
+
function createStateCopy(state) {
|
|
6123
|
+
return {
|
|
6124
|
+
consents: state.consents,
|
|
6125
|
+
selectedConsents: state.selectedConsents,
|
|
6126
|
+
consentInfo: state.consentInfo,
|
|
6127
|
+
locationInfo: state.locationInfo,
|
|
6128
|
+
model: state.model,
|
|
6129
|
+
overrides: state.overrides,
|
|
6130
|
+
scripts: state.scripts?.map((script)=>({
|
|
6131
|
+
id: script.id
|
|
6132
|
+
})),
|
|
6133
|
+
loadedScripts: state.loadedScripts
|
|
6134
|
+
};
|
|
6135
|
+
}
|
|
4974
6136
|
function createDevTools(options = {}) {
|
|
4975
6137
|
const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
|
|
4976
6138
|
const stateManager = state_manager_createStateManager({
|
|
4977
6139
|
position,
|
|
4978
6140
|
isOpen: defaultOpen
|
|
4979
6141
|
});
|
|
4980
|
-
let
|
|
4981
|
-
let originalNetworkBlockedCallback;
|
|
4982
|
-
let hasWrappedNetworkBlockerCallback = false;
|
|
6142
|
+
let detachInstrumentation = null;
|
|
4983
6143
|
const storeConnector = store_connector_createStoreConnector({
|
|
4984
6144
|
namespace,
|
|
4985
|
-
onConnect: (
|
|
6145
|
+
onConnect: (_state, store)=>{
|
|
6146
|
+
detachInstrumentation?.();
|
|
6147
|
+
detachInstrumentation = store_instrumentation_registerStoreInstrumentation({
|
|
6148
|
+
namespace,
|
|
6149
|
+
store,
|
|
6150
|
+
onEvent: (event)=>{
|
|
6151
|
+
stateManager.addEvent(event);
|
|
6152
|
+
}
|
|
6153
|
+
});
|
|
4986
6154
|
stateManager.setConnected(true);
|
|
4987
6155
|
stateManager.addEvent({
|
|
4988
6156
|
type: 'info',
|
|
4989
6157
|
message: 'Connected to c15tStore'
|
|
4990
6158
|
});
|
|
4991
|
-
originalCallbacks = {
|
|
4992
|
-
...state.callbacks
|
|
4993
|
-
};
|
|
4994
|
-
store.getState().setCallback('onBannerFetched', (payload)=>{
|
|
4995
|
-
stateManager.addEvent({
|
|
4996
|
-
type: 'info',
|
|
4997
|
-
message: `Banner fetched: ${String(payload.jurisdiction)}`,
|
|
4998
|
-
data: payload
|
|
4999
|
-
});
|
|
5000
|
-
if ('function' == typeof originalCallbacks.onBannerFetched) originalCallbacks.onBannerFetched(payload);
|
|
5001
|
-
});
|
|
5002
|
-
store.getState().setCallback('onConsentSet', (payload)=>{
|
|
5003
|
-
stateManager.addEvent({
|
|
5004
|
-
type: 'consent_set',
|
|
5005
|
-
message: 'Consent preferences updated',
|
|
5006
|
-
data: payload
|
|
5007
|
-
});
|
|
5008
|
-
if ('function' == typeof originalCallbacks.onConsentSet) originalCallbacks.onConsentSet(payload);
|
|
5009
|
-
});
|
|
5010
|
-
store.getState().setCallback('onError', (payload)=>{
|
|
5011
|
-
stateManager.addEvent({
|
|
5012
|
-
type: 'error',
|
|
5013
|
-
message: `Error: ${payload.error}`,
|
|
5014
|
-
data: payload
|
|
5015
|
-
});
|
|
5016
|
-
if ('function' == typeof originalCallbacks.onError) originalCallbacks.onError(payload);
|
|
5017
|
-
});
|
|
5018
|
-
store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
|
|
5019
|
-
stateManager.addEvent({
|
|
5020
|
-
type: 'info',
|
|
5021
|
-
message: 'Consent revocation - page will reload',
|
|
5022
|
-
data: payload
|
|
5023
|
-
});
|
|
5024
|
-
if ('function' == typeof originalCallbacks.onBeforeConsentRevocationReload) originalCallbacks.onBeforeConsentRevocationReload(payload);
|
|
5025
|
-
});
|
|
5026
|
-
const currentNetworkBlocker = store.getState().networkBlocker;
|
|
5027
|
-
if (currentNetworkBlocker && !hasWrappedNetworkBlockerCallback) {
|
|
5028
|
-
originalNetworkBlockedCallback = currentNetworkBlocker.onRequestBlocked;
|
|
5029
|
-
hasWrappedNetworkBlockerCallback = true;
|
|
5030
|
-
store.getState().setNetworkBlocker({
|
|
5031
|
-
...currentNetworkBlocker,
|
|
5032
|
-
onRequestBlocked: (payload)=>{
|
|
5033
|
-
stateManager.addEvent({
|
|
5034
|
-
type: 'network',
|
|
5035
|
-
message: getBlockedRequestMessage(payload),
|
|
5036
|
-
data: payload
|
|
5037
|
-
});
|
|
5038
|
-
if ('function' == typeof originalNetworkBlockedCallback) originalNetworkBlockedCallback(payload);
|
|
5039
|
-
}
|
|
5040
|
-
});
|
|
5041
|
-
}
|
|
5042
6159
|
const persistedOverrides = override_storage_loadPersistedOverrides();
|
|
5043
6160
|
if (persistedOverrides) {
|
|
5044
6161
|
const currentOverrides = normalizeOverridesForPersistence(store.getState().overrides);
|
|
@@ -5068,6 +6185,8 @@ function createDevTools(options = {}) {
|
|
|
5068
6185
|
},
|
|
5069
6186
|
onDisconnect: ()=>{
|
|
5070
6187
|
stateManager.setConnected(false);
|
|
6188
|
+
detachInstrumentation?.();
|
|
6189
|
+
detachInstrumentation = null;
|
|
5071
6190
|
stateManager.addEvent({
|
|
5072
6191
|
type: 'error',
|
|
5073
6192
|
message: 'Disconnected from c15tStore'
|
|
@@ -5075,6 +6194,31 @@ function createDevTools(options = {}) {
|
|
|
5075
6194
|
},
|
|
5076
6195
|
onStateChange: ()=>{}
|
|
5077
6196
|
});
|
|
6197
|
+
const panelRenderer = panel_renderer_createPanelRenderer({
|
|
6198
|
+
storeConnector,
|
|
6199
|
+
stateManager,
|
|
6200
|
+
enableEventLogging: true,
|
|
6201
|
+
onPersistOverrides: override_storage_persistOverrides,
|
|
6202
|
+
onClearPersistedOverrides: override_storage_clearPersistedOverrides,
|
|
6203
|
+
onCopyState: async (state)=>{
|
|
6204
|
+
try {
|
|
6205
|
+
await navigator.clipboard.writeText(JSON.stringify(createStateCopy(state), null, 2));
|
|
6206
|
+
return true;
|
|
6207
|
+
} catch {
|
|
6208
|
+
return false;
|
|
6209
|
+
}
|
|
6210
|
+
},
|
|
6211
|
+
onExportDebugBundle: ()=>{
|
|
6212
|
+
const bundle = debug_bundle_createDebugBundle({
|
|
6213
|
+
namespace,
|
|
6214
|
+
devToolsState: stateManager.getState(),
|
|
6215
|
+
connection: storeConnector.getDiagnostics(),
|
|
6216
|
+
recentEvents: stateManager.getState().eventLog.slice(0, 100),
|
|
6217
|
+
storeState: debug_bundle_sanitizeStoreState(storeConnector.getState())
|
|
6218
|
+
});
|
|
6219
|
+
debug_bundle_downloadDebugBundle(bundle);
|
|
6220
|
+
}
|
|
6221
|
+
});
|
|
5078
6222
|
let tabsInstance = null;
|
|
5079
6223
|
const panelHeightAnimator = createPanelHeightAnimator();
|
|
5080
6224
|
const panelInstance = createPanel({
|
|
@@ -5082,19 +6226,24 @@ function createDevTools(options = {}) {
|
|
|
5082
6226
|
storeConnector,
|
|
5083
6227
|
namespace,
|
|
5084
6228
|
onRenderContent: (container)=>{
|
|
5085
|
-
renderContent(container
|
|
6229
|
+
renderContent(container);
|
|
5086
6230
|
}
|
|
5087
6231
|
});
|
|
5088
|
-
function renderContent(container
|
|
6232
|
+
function renderContent(container) {
|
|
5089
6233
|
const panel = container.parentElement;
|
|
5090
6234
|
const previousPanelHeight = panel?.getBoundingClientRect().height ?? 0;
|
|
5091
6235
|
clearElement(container);
|
|
5092
6236
|
const storeState = storeConnector.getState();
|
|
5093
6237
|
const disabledTabs = [];
|
|
5094
6238
|
if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
|
|
6239
|
+
let currentActiveTab = stateManager.getState().activeTab;
|
|
6240
|
+
if (disabledTabs.includes(currentActiveTab)) {
|
|
6241
|
+
stateManager.setActiveTab('consents');
|
|
6242
|
+
currentActiveTab = 'consents';
|
|
6243
|
+
}
|
|
5095
6244
|
if (tabsInstance) tabsInstance.destroy();
|
|
5096
6245
|
tabsInstance = tabs_createTabs({
|
|
5097
|
-
activeTab:
|
|
6246
|
+
activeTab: currentActiveTab,
|
|
5098
6247
|
onTabChange: (tab)=>{
|
|
5099
6248
|
stateManager.setActiveTab(tab);
|
|
5100
6249
|
},
|
|
@@ -5109,284 +6258,9 @@ function createDevTools(options = {}) {
|
|
|
5109
6258
|
}
|
|
5110
6259
|
});
|
|
5111
6260
|
container.appendChild(panelContent);
|
|
5112
|
-
|
|
5113
|
-
const getStoreState = ()=>storeConnector.getState();
|
|
5114
|
-
switch(state.activeTab){
|
|
5115
|
-
case 'consents':
|
|
5116
|
-
consents_renderConsentsPanel(panelContent, {
|
|
5117
|
-
getState: getStoreState,
|
|
5118
|
-
onConsentChange: (name, value)=>{
|
|
5119
|
-
const store = storeConnector.getStore();
|
|
5120
|
-
if (store) {
|
|
5121
|
-
const consentName = String(name);
|
|
5122
|
-
store.getState().setSelectedConsent(consentName, value);
|
|
5123
|
-
stateManager.addEvent({
|
|
5124
|
-
type: 'info',
|
|
5125
|
-
message: `${consentName} toggled to ${value} (not saved)`,
|
|
5126
|
-
data: {
|
|
5127
|
-
name: consentName,
|
|
5128
|
-
value
|
|
5129
|
-
}
|
|
5130
|
-
});
|
|
5131
|
-
}
|
|
5132
|
-
},
|
|
5133
|
-
onSave: ()=>{
|
|
5134
|
-
const store = storeConnector.getStore();
|
|
5135
|
-
if (store) {
|
|
5136
|
-
store.getState().saveConsents('custom');
|
|
5137
|
-
stateManager.addEvent({
|
|
5138
|
-
type: 'consent_save',
|
|
5139
|
-
message: 'Saved consent preferences'
|
|
5140
|
-
});
|
|
5141
|
-
}
|
|
5142
|
-
},
|
|
5143
|
-
onAcceptAll: ()=>{
|
|
5144
|
-
const store = storeConnector.getStore();
|
|
5145
|
-
if (store) {
|
|
5146
|
-
store.getState().saveConsents('all');
|
|
5147
|
-
stateManager.addEvent({
|
|
5148
|
-
type: 'consent_save',
|
|
5149
|
-
message: 'Accepted all consents'
|
|
5150
|
-
});
|
|
5151
|
-
}
|
|
5152
|
-
},
|
|
5153
|
-
onRejectAll: ()=>{
|
|
5154
|
-
const store = storeConnector.getStore();
|
|
5155
|
-
if (store) {
|
|
5156
|
-
store.getState().saveConsents('necessary');
|
|
5157
|
-
stateManager.addEvent({
|
|
5158
|
-
type: 'consent_save',
|
|
5159
|
-
message: 'Rejected all optional consents'
|
|
5160
|
-
});
|
|
5161
|
-
}
|
|
5162
|
-
},
|
|
5163
|
-
onReset: async ()=>{
|
|
5164
|
-
const store = storeConnector.getStore();
|
|
5165
|
-
if (store) await reset_consents_resetAllConsents(store, stateManager);
|
|
5166
|
-
}
|
|
5167
|
-
});
|
|
5168
|
-
break;
|
|
5169
|
-
case 'location':
|
|
5170
|
-
location_renderLocationPanel(panelContent, {
|
|
5171
|
-
getState: getStoreState,
|
|
5172
|
-
onApplyOverrides: async (overrides)=>{
|
|
5173
|
-
const store = storeConnector.getStore();
|
|
5174
|
-
if (store) {
|
|
5175
|
-
await store.getState().setOverrides({
|
|
5176
|
-
country: overrides.country,
|
|
5177
|
-
region: overrides.region,
|
|
5178
|
-
language: overrides.language,
|
|
5179
|
-
gpc: overrides.gpc
|
|
5180
|
-
});
|
|
5181
|
-
override_storage_persistOverrides({
|
|
5182
|
-
country: overrides.country,
|
|
5183
|
-
region: overrides.region,
|
|
5184
|
-
language: overrides.language,
|
|
5185
|
-
gpc: overrides.gpc
|
|
5186
|
-
});
|
|
5187
|
-
stateManager.addEvent({
|
|
5188
|
-
type: 'info',
|
|
5189
|
-
message: 'Overrides updated',
|
|
5190
|
-
data: {
|
|
5191
|
-
country: overrides.country,
|
|
5192
|
-
region: overrides.region,
|
|
5193
|
-
language: overrides.language,
|
|
5194
|
-
gpc: overrides.gpc
|
|
5195
|
-
}
|
|
5196
|
-
});
|
|
5197
|
-
}
|
|
5198
|
-
},
|
|
5199
|
-
onClearOverrides: async ()=>{
|
|
5200
|
-
const store = storeConnector.getStore();
|
|
5201
|
-
if (store) {
|
|
5202
|
-
await store.getState().setOverrides({
|
|
5203
|
-
country: void 0,
|
|
5204
|
-
region: void 0,
|
|
5205
|
-
language: void 0,
|
|
5206
|
-
gpc: void 0
|
|
5207
|
-
});
|
|
5208
|
-
override_storage_clearPersistedOverrides();
|
|
5209
|
-
stateManager.addEvent({
|
|
5210
|
-
type: 'info',
|
|
5211
|
-
message: 'Overrides cleared'
|
|
5212
|
-
});
|
|
5213
|
-
}
|
|
5214
|
-
}
|
|
5215
|
-
});
|
|
5216
|
-
break;
|
|
5217
|
-
case "scripts":
|
|
5218
|
-
scripts_renderScriptsPanel(panelContent, {
|
|
5219
|
-
getState: getStoreState,
|
|
5220
|
-
getEvents: ()=>stateManager.getState().eventLog
|
|
5221
|
-
});
|
|
5222
|
-
break;
|
|
5223
|
-
case 'iab':
|
|
5224
|
-
iab_renderIabPanel(panelContent, {
|
|
5225
|
-
getState: getStoreState,
|
|
5226
|
-
onSetPurposeConsent: (purposeId, value)=>{
|
|
5227
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5228
|
-
if (!iab) return;
|
|
5229
|
-
iab.setPurposeConsent(purposeId, value);
|
|
5230
|
-
stateManager.addEvent({
|
|
5231
|
-
type: 'iab',
|
|
5232
|
-
message: `IAB purpose ${purposeId} set to ${value}`,
|
|
5233
|
-
data: {
|
|
5234
|
-
purposeId,
|
|
5235
|
-
value
|
|
5236
|
-
}
|
|
5237
|
-
});
|
|
5238
|
-
},
|
|
5239
|
-
onSetVendorConsent: (vendorId, value)=>{
|
|
5240
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5241
|
-
if (!iab) return;
|
|
5242
|
-
iab.setVendorConsent(vendorId, value);
|
|
5243
|
-
stateManager.addEvent({
|
|
5244
|
-
type: 'iab',
|
|
5245
|
-
message: `IAB vendor ${vendorId} set to ${value}`,
|
|
5246
|
-
data: {
|
|
5247
|
-
vendorId,
|
|
5248
|
-
value
|
|
5249
|
-
}
|
|
5250
|
-
});
|
|
5251
|
-
},
|
|
5252
|
-
onSetSpecialFeatureOptIn: (featureId, value)=>{
|
|
5253
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5254
|
-
if (!iab) return;
|
|
5255
|
-
iab.setSpecialFeatureOptIn(featureId, value);
|
|
5256
|
-
stateManager.addEvent({
|
|
5257
|
-
type: 'iab',
|
|
5258
|
-
message: `IAB feature ${featureId} set to ${value}`,
|
|
5259
|
-
data: {
|
|
5260
|
-
featureId,
|
|
5261
|
-
value
|
|
5262
|
-
}
|
|
5263
|
-
});
|
|
5264
|
-
},
|
|
5265
|
-
onAcceptAll: ()=>{
|
|
5266
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5267
|
-
if (!iab) return;
|
|
5268
|
-
iab.acceptAll();
|
|
5269
|
-
stateManager.addEvent({
|
|
5270
|
-
type: 'iab',
|
|
5271
|
-
message: 'IAB accept all selected'
|
|
5272
|
-
});
|
|
5273
|
-
},
|
|
5274
|
-
onRejectAll: ()=>{
|
|
5275
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5276
|
-
if (!iab) return;
|
|
5277
|
-
iab.rejectAll();
|
|
5278
|
-
stateManager.addEvent({
|
|
5279
|
-
type: 'iab',
|
|
5280
|
-
message: 'IAB reject all selected'
|
|
5281
|
-
});
|
|
5282
|
-
},
|
|
5283
|
-
onSave: ()=>{
|
|
5284
|
-
const iab = storeConnector.getStore()?.getState().iab;
|
|
5285
|
-
if (!iab) return;
|
|
5286
|
-
iab.save().then(()=>{
|
|
5287
|
-
stateManager.addEvent({
|
|
5288
|
-
type: 'iab',
|
|
5289
|
-
message: 'IAB preferences saved'
|
|
5290
|
-
});
|
|
5291
|
-
}).catch((error)=>{
|
|
5292
|
-
stateManager.addEvent({
|
|
5293
|
-
type: 'error',
|
|
5294
|
-
message: `Failed to save IAB preferences: ${String(error)}`
|
|
5295
|
-
});
|
|
5296
|
-
});
|
|
5297
|
-
},
|
|
5298
|
-
onReset: async ()=>{
|
|
5299
|
-
const store = storeConnector.getStore();
|
|
5300
|
-
if (store) await reset_consents_resetAllConsents(store, stateManager);
|
|
5301
|
-
}
|
|
5302
|
-
});
|
|
5303
|
-
break;
|
|
5304
|
-
case 'events':
|
|
5305
|
-
events_renderEventsPanel(panelContent, {
|
|
5306
|
-
getEvents: ()=>stateManager.getState().eventLog,
|
|
5307
|
-
onClear: ()=>{
|
|
5308
|
-
stateManager.clearEventLog();
|
|
5309
|
-
stateManager.addEvent({
|
|
5310
|
-
type: 'info',
|
|
5311
|
-
message: 'Event log cleared'
|
|
5312
|
-
});
|
|
5313
|
-
}
|
|
5314
|
-
});
|
|
5315
|
-
break;
|
|
5316
|
-
case 'actions':
|
|
5317
|
-
actions_renderActionsPanel(panelContent, {
|
|
5318
|
-
getState: getStoreState,
|
|
5319
|
-
onResetConsents: async ()=>{
|
|
5320
|
-
const store = storeConnector.getStore();
|
|
5321
|
-
if (store) await reset_consents_resetAllConsents(store, stateManager);
|
|
5322
|
-
},
|
|
5323
|
-
onRefetchBanner: async ()=>{
|
|
5324
|
-
const store = storeConnector.getStore();
|
|
5325
|
-
if (store) {
|
|
5326
|
-
await store.getState().initConsentManager();
|
|
5327
|
-
stateManager.addEvent({
|
|
5328
|
-
type: 'info',
|
|
5329
|
-
message: 'Banner data refetched'
|
|
5330
|
-
});
|
|
5331
|
-
}
|
|
5332
|
-
},
|
|
5333
|
-
onShowBanner: ()=>{
|
|
5334
|
-
const store = storeConnector.getStore();
|
|
5335
|
-
if (store) {
|
|
5336
|
-
store.getState().setActiveUI('banner', {
|
|
5337
|
-
force: true
|
|
5338
|
-
});
|
|
5339
|
-
stateManager.addEvent({
|
|
5340
|
-
type: 'info',
|
|
5341
|
-
message: 'Banner shown'
|
|
5342
|
-
});
|
|
5343
|
-
}
|
|
5344
|
-
},
|
|
5345
|
-
onOpenPreferences: ()=>{
|
|
5346
|
-
const store = storeConnector.getStore();
|
|
5347
|
-
if (store) {
|
|
5348
|
-
store.getState().setActiveUI('dialog');
|
|
5349
|
-
stateManager.addEvent({
|
|
5350
|
-
type: 'info',
|
|
5351
|
-
message: 'Preference center opened'
|
|
5352
|
-
});
|
|
5353
|
-
}
|
|
5354
|
-
},
|
|
5355
|
-
onCopyState: ()=>{
|
|
5356
|
-
const state = storeConnector.getState();
|
|
5357
|
-
if (state) {
|
|
5358
|
-
const stateCopy = {
|
|
5359
|
-
consents: state.consents,
|
|
5360
|
-
consentInfo: state.consentInfo,
|
|
5361
|
-
locationInfo: state.locationInfo,
|
|
5362
|
-
model: state.model,
|
|
5363
|
-
overrides: state.overrides,
|
|
5364
|
-
scripts: state.scripts?.map((s)=>({
|
|
5365
|
-
id: s.id
|
|
5366
|
-
})),
|
|
5367
|
-
loadedScripts: state.loadedScripts
|
|
5368
|
-
};
|
|
5369
|
-
navigator.clipboard.writeText(JSON.stringify(stateCopy, null, 2)).then(()=>{
|
|
5370
|
-
stateManager.addEvent({
|
|
5371
|
-
type: 'info',
|
|
5372
|
-
message: 'State copied to clipboard'
|
|
5373
|
-
});
|
|
5374
|
-
}).catch(()=>{
|
|
5375
|
-
stateManager.addEvent({
|
|
5376
|
-
type: 'error',
|
|
5377
|
-
message: 'Failed to copy state'
|
|
5378
|
-
});
|
|
5379
|
-
});
|
|
5380
|
-
}
|
|
5381
|
-
}
|
|
5382
|
-
});
|
|
5383
|
-
break;
|
|
5384
|
-
}
|
|
6261
|
+
panelRenderer.renderPanel(panelContent, currentActiveTab);
|
|
5385
6262
|
if (panel) panelHeightAnimator.animate(panel, previousPanelHeight);
|
|
5386
6263
|
}
|
|
5387
|
-
storeConnector.subscribe(()=>{
|
|
5388
|
-
panelInstance.update();
|
|
5389
|
-
});
|
|
5390
6264
|
const instance = {
|
|
5391
6265
|
open: ()=>stateManager.setOpen(true),
|
|
5392
6266
|
close: ()=>stateManager.setOpen(false),
|
|
@@ -5400,20 +6274,8 @@ function createDevTools(options = {}) {
|
|
|
5400
6274
|
};
|
|
5401
6275
|
},
|
|
5402
6276
|
destroy: ()=>{
|
|
5403
|
-
|
|
5404
|
-
|
|
5405
|
-
store.getState().setCallback('onBannerFetched', originalCallbacks.onBannerFetched);
|
|
5406
|
-
store.getState().setCallback('onConsentSet', originalCallbacks.onConsentSet);
|
|
5407
|
-
store.getState().setCallback('onError', originalCallbacks.onError);
|
|
5408
|
-
store.getState().setCallback('onBeforeConsentRevocationReload', originalCallbacks.onBeforeConsentRevocationReload);
|
|
5409
|
-
if (hasWrappedNetworkBlockerCallback) {
|
|
5410
|
-
const currentNetworkBlocker = store.getState().networkBlocker;
|
|
5411
|
-
if (currentNetworkBlocker) store.getState().setNetworkBlocker({
|
|
5412
|
-
...currentNetworkBlocker,
|
|
5413
|
-
onRequestBlocked: originalNetworkBlockedCallback
|
|
5414
|
-
});
|
|
5415
|
-
}
|
|
5416
|
-
}
|
|
6277
|
+
detachInstrumentation?.();
|
|
6278
|
+
detachInstrumentation = null;
|
|
5417
6279
|
panelHeightAnimator.destroy();
|
|
5418
6280
|
tabsInstance?.destroy();
|
|
5419
6281
|
panelInstance.destroy();
|