fix(devtools): send full parser result from content script to query panel

Author: smeijer

devtools/src/content-script/contentScript.js

@@ -6,7 +6,6 @@ import { getAllPossibleQueries } from '../../../src/lib';
 import inject from './lib/inject';
 import { setup } from '../window/testing-library';
 import onDocReady from './lib/onDocReady';
-import cssPath from '../../../src/lib/cssPath';
 
 function init() {
   inject('../window/testing-library.js');
@@ -25,15 +24,12 @@ function init() {
 
     const suggestion = Object.values(queries).find(Boolean);
 
-    Bridge.sendMessage(
-      'SELECT_NODE',
-      {
-        suggestion,
-        queries,
-        cssPath: cssPath(node, true).toString(),
-      },
-      'devtools',
-    );
+    const result = parser.parse({
+      rootNode: document.body,
+      query: suggestion?.snippet || '',
+    });
+
+    Bridge.sendMessage('SELECT_NODE', result, 'devtools');
   }
 
   Bridge.onMessage('PARSE_QUERY', function ({ data }) {

devtools/src/devtools/pane.js

@@ -10,7 +10,7 @@ function Panel() {
 
   useEffect(() => {
     Bridge.onMessage('SELECT_NODE', ({ data }) => {
-      setResult({ elements: [data] });
+      setResult(data);
     });
   }, [setResult]);
 

devtools/src/devtools/panel.js

@@ -12,8 +12,8 @@ function Panel() {
 
   useEffect(() => {
     Bridge.onMessage('SELECT_NODE', ({ data }) => {
-      setResult({ elements: [data] });
-      editor.current.setValue(data.suggestion?.snippet || '');
+      setResult(data);
+      editor.current.setValue(data.query);
     });
   }, [setResult]);