search

Matsuuu / web-component-devtools

Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers
https://matsuuu.github.io/web-component-devtools/
MIT License
132 stars 3 forks source link

[Feature Request]: Add "Scroll into view" functionality #21

Closed shaal closed 3 years ago

shaal commented 3 years ago

Which browser are you using? Edge Chromium

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] I can scroll through a long webcomponents list easily, but I want to see where and how it appears on the website and I need to manually scroll the web page and find it.

Describe the solution you'd like A clear and concise description of what you want to happen. Similar to how in the browser's DevTools, I can go to "Elements" tab, right-click on an element, and choose "Scroll into view", I would like to add that option when I look in WCDT, image I wish I could right-click an element (or have a button next to it?) that has that functionality, and instead of manually find the component on the page somewhere, it will scroll the page so I can see it right there.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Matsuuu commented 3 years ago

Thanks for the suggestion!

Funnily enough, the original version of WCDT had this functionality built in by default, but I removed it before shipping the first version :D

I'll have to look into a nice UI/UX way of implementing this but will definitely do this for the next update!

I'll look into creating a right-click menu for the devtools in which I can put this kind of stuff into!

shaal commented 3 years ago

👍

Matsuuu commented 3 years ago

https://github.com/Matsuuu/web-component-devtools/commit/f3b07bf4be51eb6e69cfcc3fc2677549e3e20040 Implemented here. Will maybe work on some UX.

What do you think, should it also select the target element in the devtools?

Matsuuu commented 3 years ago

Tested around and made it so that it also selects the list item when you decide to scroll to it. Felt like the best UX.

This will ship in v0.1.6. Will close this for now