@c15t/dev-tools 2.0.0-rc.6 → 2.0.0

package/README.md

@@ -184,4 +184,4 @@ You can also force dark mode:
 
 ## License
 
-GPL-3.0-only
+Apache-2.0

package/dist/379.js

@@ -1,3 +1,4 @@
+import { subscribeToScriptDebugEvents } from "c15t";
 import { __webpack_require__ } from "./0~rslib-runtime.js";
 __webpack_require__.add({
     "../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].oneOf[2].use[2]!./src/styles/animations.module.css" (module, __webpack_exports__, __webpack_require__) {
@@ -2293,7 +2294,6 @@ function getPreferenceCenterOpener(namespace = 'c15tStore') {
     }
     return null;
 }
-const version = '2.0.0-rc.6';
 const DEVTOOLS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 445" aria-label="c15t">
   <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"/>
 </svg>`;
@@ -2710,7 +2710,7 @@ function createPanel(options) {
             }
         }));
         footerElement.appendChild(renderer_span({
-            text: `v${version}`
+            text: "v2.0.0"
         }));
     }
     function renderErrorState(container) {
@@ -4015,7 +4015,8 @@ const EVENT_FILTERS = [
     'error',
     'consent',
     'network',
-    'iab'
+    'iab',
+    "script"
 ];
 function createFilterButton(filter, active, onClick) {
     return createButton({
@@ -4030,6 +4031,7 @@ function matchesFilter(event, filter) {
     if ('error' === filter) return 'error' === event.type;
     if ('consent' === filter) return 'consent_set' === event.type || 'consent_save' === event.type || 'consent_reset' === event.type;
     if ('network' === filter) return 'network' === event.type;
+    if ("script" === filter) return "script" === event.type;
     return 'iab' === event.type;
 }
 function matchesSearch(event, query) {
@@ -4153,6 +4155,8 @@ function getEventIcon(type) {
             return '◉';
         case 'iab':
             return '◆';
+        case "script":
+            return '⌘';
         default:
             return '○';
     }
@@ -4170,6 +4174,8 @@ function getEventColor(type) {
             return 'var(--c15t-devtools-badge-warning, #f59e0b)';
         case 'iab':
             return 'var(--c15t-devtools-badge-info, #3b82f6)';
+        case "script":
+            return 'var(--c15t-devtools-badge-info, #14b8a6)';
         default:
             return 'var(--c15t-text-muted)';
     }
@@ -5470,6 +5476,20 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
   <polyline points="8 6 2 12 8 18"></polyline>
 </svg>`;
 const scriptsSearchByContainer = new WeakMap();
+const expandedScriptsByContainer = new WeakMap();
+const CHEVRON_DOWN_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">
+  <polyline points="6 9 12 15 18 9"></polyline>
+</svg>`;
+const CHEVRON_RIGHT_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">
+  <polyline points="9 18 15 12 9 6"></polyline>
+</svg>`;
+function getExpandedScripts(container) {
+    const existing = expandedScriptsByContainer.get(container);
+    if (existing) return existing;
+    const expanded = new Set();
+    expandedScriptsByContainer.set(container, expanded);
+    return expanded;
+}
 function renderScriptsPanel(container, options) {
     const { getState, getEvents } = options;
     clearElement(container);
@@ -5531,6 +5551,10 @@ function renderScriptsPanel(container, options) {
         for (const script of filteredScripts){
             const scriptId = script.id;
             const isLoaded = true === loadedScripts[scriptId];
+            const scriptEvents = getScriptActivityEvents(events, scriptId);
+            const latestActivity = scriptEvents[scriptEvents.length - 1];
+            const expandedScripts = getExpandedScripts(container);
+            const isExpanded = expandedScripts.has(scriptId);
             const category = script.category;
             const categoryDisplay = 'string' == typeof category ? category : JSON.stringify(category);
             let status = 'pending';
@@ -5552,7 +5576,7 @@ function renderScriptsPanel(container, options) {
                 text: status.charAt(0).toUpperCase() + status.slice(1),
                 variant: statusVariant
             });
-            const row = renderer_div({
+            const header = renderer_div({
                 style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -5591,19 +5615,57 @@ function renderScriptsPanel(container, options) {
                                     whiteSpace: 'nowrap'
                                 },
                                 text: `Category: ${categoryDisplay}`
-                            })
+                            }),
+                            ...latestActivity && scriptEvents.length > 0 ? [
+                                renderer_div({
+                                    style: {
+                                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                        color: 'var(--c15t-text-muted)',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    text: `Activity: ${latestActivity.message} (${scriptEvents.length} event${1 === scriptEvents.length ? '' : 's'})`
+                                })
+                            ] : []
                         ]
                     }),
                     renderer_div({
                         style: {
-                            flexShrink: '0'
+                            flexShrink: '0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px'
                         },
                         children: [
-                            badge
+                            badge,
+                            ...scriptEvents.length > 0 ? [
+                                createAccordionToggle({
+                                    scriptId,
+                                    isExpanded,
+                                    onToggle: ()=>{
+                                        if (isExpanded) expandedScripts.delete(scriptId);
+                                        else expandedScripts.add(scriptId);
+                                        renderScriptsPanel(container, options);
+                                    }
+                                })
+                            ] : []
                         ]
                     })
                 ]
             });
+            const details = isExpanded && scriptEvents.length > 0 ? createScriptActivityDetails(scriptEvents) : null;
+            const row = renderer_div({
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    borderBottom: '1px solid var(--c15t-border)'
+                },
+                children: [
+                    header,
+                    details
+                ]
+            });
             scriptsList.appendChild(row);
         }
         const lastRow = scriptsList.lastElementChild;
@@ -5740,13 +5802,172 @@ function getEventUrl(event) {
     return 'string' == typeof url ? url : event.message;
 }
 function formatEventTime(timestamp) {
-    return new Date(timestamp).toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit'
+    const date = new Date(timestamp);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+    return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+}
+function getScriptActivityEvents(events, scriptId) {
+    return events.filter((event)=>{
+        if ("script" !== event.type) return false;
+        const data = event.data;
+        if (data?.scriptId !== scriptId) return false;
+        return data?.scope === 'lifecycle' || data?.scope === 'phase';
+    }).sort((left, right)=>left.timestamp - right.timestamp);
+}
+function createAccordionToggle(options) {
+    const { scriptId, isExpanded, onToggle } = options;
+    const toggle = renderer_button({
+        ariaLabel: `${isExpanded ? 'Collapse' : 'Expand'} ${scriptId} activity`,
+        ariaExpanded: isExpanded ? 'true' : 'false',
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '24px',
+            height: '24px',
+            padding: '0',
+            border: '1px solid var(--c15t-border)',
+            borderRadius: '6px',
+            background: 'transparent',
+            color: 'var(--c15t-text-muted)',
+            cursor: 'pointer',
+            flexShrink: '0'
+        },
+        onClick: onToggle
+    });
+    toggle.innerHTML = isExpanded ? CHEVRON_DOWN_ICON : CHEVRON_RIGHT_ICON;
+    return toggle;
+}
+function createScriptActivityDetails(events) {
+    const groupedEvents = groupScriptActivityEvents(events.slice(-8));
+    return renderer_div({
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '6px',
+            padding: '0 0 10px 0',
+            marginLeft: '0'
+        },
+        children: groupedEvents.map(([groupName, groupEvents])=>createScriptActivityGroup(groupName, groupEvents))
     });
 }
+function createScriptActivityGroup(groupName, events) {
+    return renderer_div({
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px'
+        },
+        children: [
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                    fontWeight: '600',
+                    color: 'var(--c15t-text)',
+                    textTransform: 'none'
+                },
+                text: groupName
+            }),
+            ...events.map((event)=>createScriptActivityRow(event))
+        ]
+    });
+}
+function createScriptActivityRow(event) {
+    const data = event.data ?? {};
+    const scope = 'string' == typeof data.scope ? data.scope : void 0;
+    const phase = 'string' == typeof data.phase ? data.phase : void 0;
+    const stepType = 'string' == typeof data.stepType ? data.stepType : void 0;
+    const metadata = [
+        scope,
+        phase,
+        stepType
+    ].filter(Boolean).join(' / ');
+    return renderer_div({
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            padding: '6px 10px',
+            marginLeft: '0',
+            borderLeft: '2px solid var(--c15t-border)',
+            backgroundColor: 'var(--c15t-devtools-surface-secondary, rgba(127,127,127,0.06))',
+            borderRadius: '0 8px 8px 0'
+        },
+        children: [
+            renderer_div({
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '8px'
+                },
+                children: [
+                    renderer_span({
+                        style: {
+                            fontSize: 'var(--c15t-devtools-font-size-xs)',
+                            fontWeight: '600',
+                            color: 'var(--c15t-text)'
+                        },
+                        text: event.message
+                    }),
+                    renderer_span({
+                        style: {
+                            fontSize: 'var(--c15t-devtools-font-size-xs)',
+                            color: 'var(--c15t-text-muted)',
+                            flexShrink: '0'
+                        },
+                        text: formatEventTime(event.timestamp)
+                    })
+                ]
+            }),
+            ...metadata ? [
+                renderer_span({
+                    style: {
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        color: 'var(--c15t-text-muted)'
+                    },
+                    text: metadata
+                })
+            ] : []
+        ]
+    });
+}
+function groupScriptActivityEvents(events) {
+    const groups = new Map();
+    for (const event of events){
+        const groupName = getScriptActivityGroupName(event);
+        const existing = groups.get(groupName);
+        if (existing) existing.push(event);
+        else groups.set(groupName, [
+            event
+        ]);
+    }
+    const orderedGroupNames = [
+        'onBeforeLoad',
+        'onLoad',
+        'onConsentChange',
+        'other'
+    ];
+    return orderedGroupNames.map((groupName)=>{
+        const groupEvents = groups.get(groupName);
+        return groupEvents ? [
+            groupName,
+            groupEvents
+        ] : null;
+    }).filter((group)=>null !== group);
+}
+function getScriptActivityGroupName(event) {
+    const data = event.data ?? {};
+    if ('string' == typeof data.callback) return data.callback;
+    const phase = 'string' == typeof data.phase ? data.phase : '';
+    if ('bootstrap' === phase || 'consent-default' === phase || 'setup' === phase || 'onBeforeLoadGranted' === phase || 'onBeforeLoadDenied' === phase) return 'onBeforeLoad';
+    if ('afterLoad' === phase || 'onLoadGranted' === phase || 'onLoadDenied' === phase) return 'onLoad';
+    if ('consent-update' === phase || 'onConsentChange' === phase || 'onConsentGranted' === phase || 'onConsentDenied' === phase) return 'onConsentChange';
+    return 'other';
+}
 function scripts_truncateText(text, maxLength) {
     if (text.length <= maxLength) return text;
     return `${text.slice(0, maxLength - 3)}...`;
@@ -6324,6 +6545,7 @@ function restoreInstrumentation(entry) {
     const state = entry.store.getState();
     state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
     state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
+    state.setCallback('onConsentChanged', entry.originalCallbacks.onConsentChanged);
     state.setCallback('onError', entry.originalCallbacks.onError);
     state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
     const blocker = state.networkBlocker;
@@ -6361,6 +6583,14 @@ function createInstrumentationEntry(store) {
         });
         if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
     });
+    store.getState().setCallback('onConsentChanged', (payload)=>{
+        emitEvent(entry, {
+            type: 'consent_save',
+            message: 'Consent preferences changed',
+            data: payload
+        });
+        if ('function' == typeof entry.originalCallbacks.onConsentChanged) entry.originalCallbacks.onConsentChanged(payload);
+    });
     store.getState().setCallback('onError', (payload)=>{
         const errorMessage = payload.error;
         emitEvent(entry, {
@@ -6501,6 +6731,25 @@ function createStateCopy(state) {
         loadedScripts: state.loadedScripts
     };
 }
+function scriptDebugEventToLogEntry(event) {
+    return {
+        type: "script",
+        message: event.message,
+        data: {
+            ...event.data ?? {},
+            source: event.source,
+            scope: event.scope,
+            action: event.action,
+            scriptId: event.scriptId,
+            elementId: event.elementId,
+            hasConsent: event.hasConsent,
+            callback: event.callback,
+            phase: event.phase,
+            stepType: event.stepType,
+            stepIndex: event.stepIndex
+        }
+    };
+}
 function createDevTools(options = {}) {
     const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
     const stateManager = createStateManager({
@@ -6508,6 +6757,7 @@ function createDevTools(options = {}) {
         isOpen: defaultOpen
     });
     let detachInstrumentation = null;
+    let detachScriptDebug = null;
     const storeConnector = createStoreConnector({
         namespace,
         onConnect: (_state, store)=>{
@@ -6519,6 +6769,10 @@ function createDevTools(options = {}) {
                     stateManager.addEvent(event);
                 }
             });
+            detachScriptDebug?.();
+            detachScriptDebug = subscribeToScriptDebugEvents((event)=>{
+                stateManager.addEvent(scriptDebugEventToLogEntry(event));
+            });
             stateManager.setConnected(true);
             stateManager.addEvent({
                 type: 'info',
@@ -6555,6 +6809,8 @@ function createDevTools(options = {}) {
             stateManager.setConnected(false);
             detachInstrumentation?.();
             detachInstrumentation = null;
+            detachScriptDebug?.();
+            detachScriptDebug = null;
             stateManager.addEvent({
                 type: 'error',
                 message: 'Disconnected from c15tStore'
@@ -6644,6 +6900,8 @@ function createDevTools(options = {}) {
         destroy: ()=>{
             detachInstrumentation?.();
             detachInstrumentation = null;
+            detachScriptDebug?.();
+            detachScriptDebug = null;
             panelHeightAnimator.destroy();
             tabsInstance?.destroy();
             panelInstance.destroy();
@@ -6658,6 +6916,7 @@ function createDevTools(options = {}) {
 function createDevToolsPanel(options) {
     const { namespace = 'c15tStore' } = options;
     let detachInstrumentation = null;
+    let detachScriptDebug = null;
     const stateManager = createStateManager({
         isOpen: true
     });
@@ -6670,6 +6929,10 @@ function createDevToolsPanel(options) {
                 store,
                 onEvent: (event)=>stateManager.addEvent(event)
             });
+            detachScriptDebug?.();
+            detachScriptDebug = subscribeToScriptDebugEvents((event)=>{
+                stateManager.addEvent(scriptDebugEventToLogEntry(event));
+            });
             stateManager.setConnected(true);
             const persistedOverrides = loadPersistedOverrides();
             if (persistedOverrides) {
@@ -6686,6 +6949,8 @@ function createDevToolsPanel(options) {
             stateManager.setConnected(false);
             detachInstrumentation?.();
             detachInstrumentation = null;
+            detachScriptDebug?.();
+            detachScriptDebug = null;
         }
     });
     const panelRenderer = createPanelRenderer({
@@ -6778,6 +7043,8 @@ function createDevToolsPanel(options) {
         destroy: ()=>{
             detachInstrumentation?.();
             detachInstrumentation = null;
+            detachScriptDebug?.();
+            detachScriptDebug = null;
             unsubscribe();
             tabsInstance?.destroy();
             storeConnector.destroy();