@adaptabletools/adaptable 24.0.0-canary.9 → 24.0.1

package/src/setupDevTools.js

@@ -7,7 +7,6 @@ import { formatColumnInspectorPinning, formatColumnInspectorSizing, } from './Vi
 import { getVariableColor } from './Utilities/Helpers/StyleHelper';
 import { isSummaryColorLabel, parseSummaryLabelValueString, } from './View/Wizard/SummaryColorTag';
 import { debug } from '@infinite-table/infinite-react';
-import { colorSchemeDark, colorSchemeLight, themeQuartz } from 'ag-grid-enterprise';
 import { warnOnce } from './agGrid/AdaptableLogger';
 let DEV_TOOLS_LISTENING_STARTED = false;
 let DEV_TOOLS_READY = false;
@@ -181,12 +180,7 @@ function ensureLogIntentListening() {
         });
     });
 }
-function ensureDevToolsReady() {
-    if (DEV_TOOLS_READY) {
-        return;
-    }
-    DEV_TOOLS_READY = true;
-    console.log('Adaptable DevTools is listening for messages!');
+function announceInstancesToDevTools() {
     for (const [adaptableId, registration] of INSTANCE_REGISTRATIONS) {
         if (registration.instance?.isDestroyed) {
             continue;
@@ -195,6 +189,25 @@ function ensureDevToolsReady() {
         postStateChangeMessage(adaptableId, { api: registration.api });
     }
 }
+function ensureDevToolsReady() {
+    if (DEV_TOOLS_READY) {
+        return;
+    }
+    DEV_TOOLS_READY = true;
+    console.log('Adaptable DevTools is listening for messages!');
+    announceInstancesToDevTools();
+}
+const SEEN_CONTENT_SCRIPT_IDS = new Set();
+function handleRegisterMessage(payload, devToolsWasReady) {
+    const contentScriptId = payload?.contentScriptId;
+    if (typeof contentScriptId !== 'string' || SEEN_CONTENT_SCRIPT_IDS.has(contentScriptId)) {
+        return;
+    }
+    SEEN_CONTENT_SCRIPT_IDS.add(contentScriptId);
+    if (devToolsWasReady) {
+        announceInstancesToDevTools();
+    }
+}
 function handleGetColumnInfoMessage(payload) {
     const adaptableId = payload?.adaptableId;
     if (!adaptableId) {
@@ -237,182 +250,41 @@ function clearInlineAbVars(el) {
         }
     }
 }
-let themeAliasMaps = null;
-let themeAliasSheetCount = -1;
-function collectThemeAliases() {
-    const sheetCount = document.styleSheets.length;
-    if (themeAliasMaps && themeAliasSheetCount === sheetCount) {
-        return themeAliasMaps;
-    }
-    const root = new Map();
-    const dark = new Map();
-    const visit = (rules) => {
-        for (let index = 0; index < rules.length; index++) {
-            const rule = rules[index];
-            const group = rule;
-            if (group.cssRules) {
-                visit(group.cssRules);
-            }
-            const styleRule = rule;
-            if (!styleRule.style || !styleRule.selectorText) {
-                continue;
-            }
-            const selector = styleRule.selectorText;
-            const isDark = selector.includes('ab--theme-dark');
-            const isRoot = selector.includes(':root') ||
-                selector.includes('ab--theme-light') ||
-                /(^|[^\w-])html([^\w-]|$)/.test(selector);
-            if (!isDark && !isRoot) {
-                continue;
-            }
-            const target = isDark ? dark : root;
-            for (let i = 0; i < styleRule.style.length; i++) {
-                const prop = styleRule.style[i];
-                if (!prop?.startsWith('--')) {
-                    continue;
-                }
-                const value = styleRule.style.getPropertyValue(prop).trim();
-                if (value.includes('var(')) {
-                    target.set(prop, value);
-                }
-            }
-        }
-    };
-    for (let index = 0; index < document.styleSheets.length; index++) {
-        const sheet = document.styleSheets[index];
-        try {
-            visit(sheet.cssRules);
-        }
-        catch {
-        }
-    }
-    themeAliasMaps = { root, dark };
-    themeAliasSheetCount = sheetCount;
-    return themeAliasMaps;
-}
-let darkThemeProbe = null;
-function themeDefaultStyle(variant) {
-    if (variant === 'light') {
-        return getComputedStyle(document.documentElement);
-    }
-    if (!darkThemeProbe) {
-        darkThemeProbe = document.createElement('div');
-        darkThemeProbe.className = 'ab--theme-dark';
-        darkThemeProbe.setAttribute('data-ab-devtools-theme-probe', '');
-        darkThemeProbe.style.cssText =
-            'position:absolute;width:0;height:0;overflow:hidden;pointer-events:none';
-        document.body.appendChild(darkThemeProbe);
-    }
-    return getComputedStyle(darkThemeProbe);
-}
-function installLiveAliases(el, variant) {
-    const { root, dark } = collectThemeAliases();
-    const defaults = themeDefaultStyle(variant);
-    const aliases = variant === 'dark' ? new Map([...root, ...dark]) : root;
-    for (const [name, raw] of aliases) {
-        const inline = el.style.getPropertyValue(name).trim();
-        const fallback = defaults.getPropertyValue(name).trim();
-        if (!inline || inline === raw || inline === fallback) {
-            el.style.setProperty(name, raw);
-        }
-    }
-}
-function clearDocumentThemePreview() {
-    clearInlineAbVars(document.documentElement);
-}
-function getInstanceThemeElements(adaptableId) {
-    const instance = getRegistration(adaptableId)?.instance;
-    if (!instance) {
-        return [];
-    }
-    const elements = [
-        instance.getAdaptableContainerElement(),
-        instance.getAgGridContainerElement(),
-    ].filter((el) => el instanceof HTMLElement);
-    return [...new Set(elements)];
-}
-const originalAgGridThemes = new Map();
-function applyAgGridPreviewTheme(adaptableId, variant) {
-    const instance = getRegistration(adaptableId)?.instance;
-    const gridApi = instance?.agGridAdapter.getAgGridApi();
-    if (!instance || instance.isDestroyed || !gridApi || gridApi.isDestroyed()) {
-        return;
-    }
-    if (instance.agGridThemeAdapter.getAgGridThemeMode() === 'legacy') {
-        return;
-    }
-    if (!originalAgGridThemes.has(adaptableId)) {
-        originalAgGridThemes.set(adaptableId, gridApi.getGridOption('theme'));
-    }
-    const original = originalAgGridThemes.get(adaptableId);
-    const base = original && original !== 'legacy' && typeof original.withPart === 'function'
-        ? original
-        : themeQuartz;
-    gridApi.setGridOption('theme', base.withPart(variant === 'dark' ? colorSchemeDark : colorSchemeLight));
-}
-function syncAgGridPreviewThemes(activeId, variant) {
-    applyAgGridPreviewTheme(activeId, variant);
+function clearThemePreview() {
+    const root = document.documentElement;
+    clearInlineAbVars(root);
+    root.removeAttribute(THEME_PREVIEW_ATTR);
 }
-function applyThemeVars(el, payload) {
-    clearInlineAbVars(el);
-    for (const [name, value] of Object.entries(payload.light)) {
-        if (value != null && value !== '') {
-            el.style.setProperty(name, String(value));
-        }
+function clearThemePreviewNotMatching(variant) {
+    const previewVariant = document.documentElement.getAttribute(THEME_PREVIEW_ATTR);
+    if (previewVariant && previewVariant !== variant) {
+        clearThemePreview();
     }
-    if (payload.variant === 'dark') {
-        for (const [name, value] of Object.entries(payload.dark)) {
-            if (value != null && value !== '') {
-                el.style.setProperty(name, String(value));
-            }
-        }
-        el.classList.add('ab--theme-dark');
-    }
-    else if (el.getAttribute(THEME_PREVIEW_ATTR) === 'dark') {
-        el.classList.remove('ab--theme-dark');
-    }
-    el.setAttribute(THEME_PREVIEW_ATTR, payload.variant);
-    installLiveAliases(el, payload.variant);
 }
 function handleThemeVarChangeMessage(payload) {
-    const { name, value, adaptableId } = payload ?? {};
-    if (!name || !adaptableId) {
+    const { name, value } = payload ?? {};
+    if (!name) {
         return;
     }
-    const targets = getInstanceThemeElements(adaptableId);
-    if (targets.length === 0) {
-        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
-        return;
-    }
-    const variant = payload.variant === 'dark' ? 'dark' : 'light';
-    clearDocumentThemePreview();
-    for (const el of targets) {
-        if (!el.hasAttribute(THEME_PREVIEW_ATTR)) {
-            el.setAttribute(THEME_PREVIEW_ATTR, variant);
-        }
-        installLiveAliases(el, variant);
-        el.style.setProperty(name, String(value ?? ''));
+    const root = document.documentElement;
+    if (!root.hasAttribute(THEME_PREVIEW_ATTR)) {
+        root.setAttribute(THEME_PREVIEW_ATTR, payload.variant === 'dark' ? 'dark' : 'light');
     }
+    root.style.setProperty(name, String(value ?? ''));
 }
 function handleApplyThemeMessage(payload) {
     if (!payload || (payload.variant !== 'light' && payload.variant !== 'dark')) {
         return;
     }
-    const { adaptableId } = payload;
-    if (!adaptableId) {
-        console.warn('Adaptable DevTools: apply-theme message missing adaptableId');
-        return;
-    }
-    const targets = getInstanceThemeElements(adaptableId);
-    if (targets.length === 0) {
-        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
-        return;
-    }
-    clearDocumentThemePreview();
-    for (const el of targets) {
-        applyThemeVars(el, payload);
+    const root = document.documentElement;
+    clearInlineAbVars(root);
+    const values = payload.variant === 'dark' ? { ...payload.light, ...payload.dark } : payload.light;
+    for (const [name, value] of Object.entries(values)) {
+        if (value != null && value !== '') {
+            root.style.setProperty(name, String(value));
+        }
     }
-    syncAgGridPreviewThemes(adaptableId, payload.variant);
+    root.setAttribute(THEME_PREVIEW_ATTR, payload.variant);
 }
 function handleLoadVariantMessage(payload) {
     const { adaptableId, variant } = payload ?? {};
@@ -583,6 +455,9 @@ function viewItemLabel(item) {
 function serializeViewItems(items) {
     const rows = [];
     for (const item of items) {
+        if (!item) {
+            continue;
+        }
         const variant = item.tagVariant === 'default' ? undefined : item.tagVariant;
         const italic = item.tagClassName?.includes('italic') ? true : undefined;
         const tags = (item.values ?? [])
@@ -900,8 +775,10 @@ export function listenForDevTools(adaptableInstance) {
             if (!isMessageFromDevToolsContentScript(event.data)) {
                 return;
             }
+            const devToolsWasReady = DEV_TOOLS_READY;
             ensureDevToolsReady();
             const handlers = {
+                register: (payload) => handleRegisterMessage(payload, devToolsWasReady),
                 'restore-state': handleRestoreStateMessage,
                 'open-settings-panel': handleOpenSettingsPanelMessage,
                 'get-column-info': handleGetColumnInfoMessage,
@@ -919,6 +796,48 @@ export function listenForDevTools(adaptableInstance) {
     }
     registerAdaptableInstanceInDevTools(adaptableOptions.adaptableId, api, adaptableInstance);
 }
+function readAppThemeVars() {
+    const root = document.documentElement;
+    const hadLight = root.classList.contains('ab--theme-light');
+    const hadDark = root.classList.contains('ab--theme-dark');
+    const previewStyle = root.hasAttribute(THEME_PREVIEW_ATTR) ? root.style.cssText : null;
+    if (previewStyle != null) {
+        clearInlineAbVars(root);
+    }
+    const readVariant = (variant) => {
+        root.classList.toggle('ab--theme-light', variant === 'light');
+        root.classList.toggle('ab--theme-dark', variant === 'dark');
+        const style = getComputedStyle(root);
+        const values = {};
+        for (let i = 0; i < style.length; i++) {
+            const name = style[i];
+            if (name.startsWith('--ab-')) {
+                values[name] = style.getPropertyValue(name).trim();
+            }
+        }
+        return values;
+    };
+    try {
+        return { light: readVariant('light'), dark: readVariant('dark') };
+    }
+    finally {
+        root.classList.toggle('ab--theme-light', hadLight);
+        root.classList.toggle('ab--theme-dark', hadDark);
+        if (previewStyle != null) {
+            root.style.cssText = previewStyle;
+        }
+    }
+}
+function getThemeVariant(api) {
+    const themeName = api.themeApi.getCurrentTheme();
+    if (themeName === 'os') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    const variant = api.themeApi.internalApi.isSystemTheme(themeName)
+        ? themeName
+        : api.themeApi.getCurrentThemeObject()?.Variant;
+    return variant === 'dark' ? 'dark' : 'light';
+}
 function postMountMessage(adaptableId, api) {
     window.postMessage(buildMessageForExtension({
         type: 'mount',
@@ -927,6 +846,8 @@ function postMountMessage(adaptableId, api) {
         agGridVersion: AG_GRID_VERSION,
         ...buildInstanceSummary(api),
         settingsPanelNavigation: resolveVisibleSettingsPanelNavigationGroups(api),
+        appThemeVars: readAppThemeVars(),
+        themeVariant: getThemeVariant(api),
     }));
 }
 function cancelScheduledGridRuntimeUpdate(adaptableId) {
@@ -955,6 +876,7 @@ function postStateChangeMessage(adaptableId, options) {
         actionName: options?.actionName,
         ...buildInstanceSummary(api),
         settingsPanelNavigation: resolveVisibleSettingsPanelNavigationGroups(api),
+        themeVariant: getThemeVariant(api),
     }));
     if (options?.api) {
         scheduleGridRuntimeUpdate(adaptableId, options.api);
@@ -1021,6 +943,8 @@ function buildMessageForExtension(params) {
                 userName: payload?.userName,
                 primaryKey: payload?.primaryKey,
                 settingsPanelNavigation: payload?.settingsPanelNavigation,
+                appThemeVars: payload?.appThemeVars,
+                themeVariant: payload?.themeVariant,
             },
         };
     }
@@ -1049,6 +973,7 @@ function buildMessageForExtension(params) {
                 userName: payload?.userName,
                 primaryKey: payload?.primaryKey,
                 settingsPanelNavigation: payload?.settingsPanelNavigation,
+                themeVariant: payload?.themeVariant,
             },
         };
     }
@@ -1077,16 +1002,27 @@ function registerAdaptableInstanceInDevTools(adaptableId, api, adaptableInstance
         actions: [],
         unsubscribe: () => { },
     };
+    let themeVariant = getThemeVariant(api);
+    const onThemeVariantMaybeChanged = () => {
+        const nextVariant = getThemeVariant(api);
+        if (nextVariant === themeVariant) {
+            return;
+        }
+        themeVariant = nextVariant;
+        clearThemePreviewNotMatching(nextVariant);
+    };
     const onStateChange = (info) => {
         if (isTransientReduxAction(info.actionName)) {
             return;
         }
+        onThemeVariantMaybeChanged();
         recordAction(registration, info.actionName);
         if (DEV_TOOLS_READY) {
             postStateChangeMessage(adaptableId, { actionName: info.actionName, api });
         }
     };
     const onStateReloaded = () => {
+        onThemeVariantMaybeChanged();
         recordAction(registration, 'AdaptableStateReloaded');
         if (DEV_TOOLS_READY) {
             postStateChangeMessage(adaptableId, { actionName: 'AdaptableStateReloaded', api });