Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Panel to Display Props for DevTools Nodes #2803

Merged
merged 11 commits into from
Aug 13, 2022
Merged

Add Panel to Display Props for DevTools Nodes #2803

merged 11 commits into from
Aug 13, 2022

Conversation

noi5e
Copy link
Contributor

@noi5e noi5e commented Aug 9, 2022

Click on a node in DevTools, display its properties in a panel on the righthand side:

DevTools.Props.Panel.mov

Developer Tools Web Extension Planning Issue: #2127

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 9, 2022
@vercel
Copy link

vercel bot commented Aug 9, 2022 •
edited
Loading

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

Name Status Preview Updated
lexical ✅ Ready (Inspect) Visit Preview Aug 11, 2022 at 7:39PM (UTC)
lexical-playground ✅ Ready (Inspect) Visit Preview Aug 11, 2022 at 7:39PM (UTC)

@noi5e noi5e closed this Aug 9, 2022
@noi5e noi5e reopened this Aug 9, 2022
thegreatercurve
thegreatercurve approved these changes Aug 10, 2022
View reviewed changes
Copy link
Contributor

@thegreatercurve thegreatercurve left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this! Thanks @noi5e.

(Some small syntax changes but nothing blocking).

packages/lexical-devtools/src/panel/components/InspectedElementProp/index.tsx Outdated Show resolved Hide resolved
packages/lexical-devtools/src/panel/components/InspectedElementProp/index.tsx Outdated Show resolved Hide resolved
packages/lexical-devtools/src/panel/components/InspectedElementView/index.tsx Outdated Show resolved Hide resolved
packages/lexical-devtools/src/panel/components/TreeNode/index.tsx Outdated Show resolved Hide resolved
packages/lexical-devtools/types.ts Outdated Show resolved Hide resolved
packages/lexical-devtools/src/panel/components/App/index.tsx Outdated Show resolved Hide resolved
@noi5e
Copy link
Contributor Author

noi5e commented Aug 11, 2022

@thegreatercurve This is merge ready! Took care of all the comments, the CI failure seems unrelated.

@thegreatercurve thegreatercurve merged commit 1fffd46 into facebook:main Aug 13, 2022
@noi5e noi5e deleted the slide-out-panel branch August 15, 2022 01:29
@GermanJablo
Copy link
Contributor

GermanJablo commented Aug 15, 2022 •
edited
Loading

It looks incredible!

I wanted to test how it would work with nested editors, but I realized that it doesn't show me image nodes. Do they appear to you?
image

@noi5e
Copy link
Contributor Author

noi5e commented Aug 15, 2022

It looks incredible!

Thanks!

I wanted to test how it would work with nested editors, but I realized that it doesn't show me image nodes. Do they appear to you?

Yes, I'm aware of this, but image nodes currently break DevTools. I think the fix for that should be fairly simple, but haven't looked into it yet.

Also it currently only registers one editor instance per page (the first in document.querySelectorAll).

thegreatercurve pushed a commit that referenced this pull request Nov 25, 2022
@noi5e @thegreatercurve
Add Panel to Display Props for DevTools Nodes (#2803)
f18e1f1 
* move devtools code to injected script

* correct typescript errors

* add CSS for slideout panel

* print prop keys + values in InspectedElementView

* add css variables for colors

* create InspectedElementProp component for onClick inspection

* correct TS errors

* correct TS error

* delete NodeClick and NodeHover handler types

* rename InspectedElementProperty to InspectedElementRow

* incorporate PR review
@thegreatercurve thegreatercurve mentioned this pull request Nov 25, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thegreatercurve thegreatercurve thegreatercurve approved these changes

@trueadm trueadm Awaiting requested review from trueadm

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson is a code owner

@tylerjbainbridge tylerjbainbridge Awaiting requested review from tylerjbainbridge

Assignees
No one assigned
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@noi5e @GermanJablo @thegreatercurve @facebook-github-bot