Highlight DOM Nodes onHover of Lexical DevTools Node

[noi5e]

Highlight.DevTools.Nodes.mov

---

Developer Tools Web Extension Planning Issue: #2127

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Sep 3, 2022 at 4:44AM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Sep 3, 2022 at 4:44AM (UTC)

[noi5e]

I realized a bit late that a lot of the stuff in devtools.js can be moved into content.js. Particularly the parts that don't depend on the editor object, but are just declaring functions and variables in the window scope.

This would be ideal since they would be linted as TS in content.ts, and they wouldn't be run in an eval.

I can either move it in this PR with another commit, or early in the next PR.

[noi5e]

I realized a bit late that a lot of the stuff in devtools.js can be moved into content.js.

Actually forget about it, I spent the last couple of days working on this, but I can't get around the fact that content.js cannot document.querySelector the editorDOMNode. This is because content scripts have limited access to the DOM.

I don't think I'll be able to get around having the highlight/dehighlighting code within devtools.

@thegreatercurve This is otherwise ready to merge!

[noi5e]

I don't think I'll be able to get around having the highlight/dehighlighting code within devtools.

I've been experimenting with some of the approaches in this StackOverflow post.

Some of it seems promising. In particular, I think the way to go in the future will be to have the content script inject something via document.createElement('script'). React DevTools takes this approach while still making limited use of inspectedWindow.eval().

I tried to get this approach running yesterday, but for some reason it doesn't quite work yet. I think it has something to do with timing, like the script is being injected before the DOM finishes loading. I'll keep experimenting for now, but I think whatever changes I make should be the subject of a new PR.

[thegreatercurve]

Try defer loading of the script by setting async to be true on the script, or add an event listener on the window for after the document has fully loaded.

[noi5e]

Try defer loading of the script by setting async to be true on the script, or add an event listener on the window for after the document has fully loaded.

Nice, I tried some of these. I went with another workaround where the DevTools app sends a message, requesting to load the editorState the moment the DevTools panel is opened in the browser console. Seems to work fine.

The good news is that I got all of the code out of the eval() statement and into an injected script, and it works great. I'll bundle the changes into another PR right after this one is merged.

[acywatson]

should 1.2 be a constant somewhere?

[noi5e]

Okay, it's using CSS variables now...

This is a little weird, not sure if this is best practice, but I'm using getComputedStyle here to read the CSS variable from the DOM in TreeView:

const monospaceWidth = getComputedStyle(
    document.documentElement,
  ).getPropertyValue('--monospace-character-width');

In order to pass it to TreeNode here:

const leftIndent = depth * parseFloat(monospaceWidth) + 'em';

[noi5e]

This is merge ready if the fix here is okay, tests are mostly passing except for some unrelated stuff.

Once this is merged, I'll open a PR for the changes mentioned here.