Function update

packages/dev/style-macro-chrome-plugin/src/devtool.js:181–241

()

  };

  let update = () => {
    debugLog('Starting update...');
    chrome.devtools.inspectedWindow.eval('$0.getAttribute("class")', className => {
      debugLog('Got className:', className);

      // Handle the async operations outside the eval callback
      (async () => {
        if (typeof className !== 'string') {
          sidebar.setObject({});
          return;
        }

        let staticMacroHashes = [...className.matchAll(/-macro-static-([^\s]+)/g)].map(m => m[1]);
        let dynamicMacroHashes = [...className.matchAll(/-macro-dynamic-([^\s]+)/g)].map(m => m[1]);
        debugLog('Static macro hashes:', staticMacroHashes);
        debugLog('Dynamic macro hashes:', dynamicMacroHashes);

        // Get macro data: static from CSS custom properties on $0, dynamic from element's window.__styleMacroDynamic__.map
        debugLog(
          'Waiting for',
          staticMacroHashes.length,
          'static +',
          dynamicMacroHashes.length,
          'dynamic macros...'
        );
        let [staticResults, dynamicResults] = await Promise.all([
          getMacroDataStaticBatch(staticMacroHashes),
          getMacroDataDynamicBatch(dynamicMacroHashes)
        ]);
        let results = [...staticResults, ...dynamicResults];
        debugLog('Results:', results);

        // Filter out null results (missing data)
        results = results.filter(r => r != null);
        debugLog('Filtered results:', results);

        if (results.length === 0) {
          sidebar.setObject({});
        } else if (results.length === 1) {
          sidebar.setObject(results[0].style ?? {}, results[0].loc);
        } else {
          let seenProperties = new Set();
          for (let i = results.length - 1; i >= 0; i--) {
            for (let key in results[i].style) {
              if (seenProperties.has(key)) {
                delete results[i].style[key];
              } else {
                seenProperties.add(key);
              }
            }
          }

          let res = {};
          for (let result of results) {
            res[result.loc] = result.style;
          }
          sidebar.setObject(res);
        }