Select component from dom tree #476
Conversation
|
I see those PRs as complementary, why not having them both? |
|
@Akryum |
|
@Akryum Should be ready to review now Rebased, updated to use new |
|
|
|
Looks good to me! |
|
I thought the right click extra item was enough, but displaying the name of the component is also really nice! |
Well, the browser offers both options. 😄 |
| showOverlay(rect) | ||
| let content = '' | ||
| const name = getInstanceName(instance) | ||
| name && (content = `<span style="opacity: .6;"><</span>${name}<span style="opacity: .6;">></span>`) |
There was a problem hiding this comment.
I would replace this with
if (name) {
content = ...
showOverlay(...)
}since it doesn't look like it's displaying anything otherwise
There was a problem hiding this comment.
It can still show the component boundaries even if the component doesn't have a name (most certainly using an old version of vue-loader or vue).
src/backend/utils.js
Outdated
| @@ -0,0 +1,6 @@ | |||
| export function searchComponent (el) { | |||
There was a problem hiding this comment.
I think we could have a more explicit name like findClosestWrappingComponent
There was a problem hiding this comment.
We don't find the root component, we find the closest component that contains the element.
There was a problem hiding this comment.
yes, sorry, I updated the comment right away 😆
|
@yyx990803 I think I'm done with this PR 😄 |
|
|
| export const UP = 38 | ||
| export const RIGHT = 39 | ||
| export const DOWN = 40 | ||
| export const S = 83 |
There was a problem hiding this comment.
Do you also type in Dvorak? 😆
Using Keycodes doesn't work across keyboards for letters
There was a problem hiding this comment.
Why? I just tried in Dvorak to be sure and it's working fine... 😕
There was a problem hiding this comment.
You're completely right. I had recently a problem with keycodes but it's something a bit different, it only happens with the digits row
Inspired by the react developer tools and of course Chromes developer tools.
This PR adds functionality for selecting a component from the dom tree.
Instead of just highlighting elements it highlights components themselves if the hovered element is not a Vue component it'll select the parent component.
The component tree will expand if the selected component is minimized.
Edit:
Just saw Zzuligy's PR.
While I think that its cool that he's using the developer tools selector I still feel that our PR's have some major differences. Eg. that my version will allow the feature to also function in Safari and Firefox.
I've messages Zzuligy to hear how he feels.