WebUI: Replace getElements & getChildren

[skomerko]

This PR further reduces Mootools usage.

[Chocobo1]

Won't this be fragile? Also it looks like it will get grandchildren too.

[skomerko]

Ah, totally forgot about subcategories - will fix to get only direct children.

Won't this be fragile?

AFAIK it's fine to use querySelectorAll/static collections to remove elements (unless you meant something else??) Loop won't break because collection is static.

[Chocobo1]

Won't this be fragile?

AFAIK it's fine to use querySelectorAll/static collections to remove elements (unless you meant something else??) Loop won't break because collection is static.

I was concerned about it limits itself to li elements. Previously the code would not care about the type of elements, just direct children. Or do you think it make sense to target specific type of children elements?

[Chocobo1]

Also would it be wrong if you used Element.children property? It is a live HTMLCollection but it shouldn't matter when we only call destroy() on each element. I mean, the live collection iterator shouldn't be invalidated with this kind of operation, unless destroy() is doing more than expected...

[skomerko]

1. We can do something like this:

for (const category of [...categoryList.children])

2. but we can't do this:

for (const category of categoryList.children)

I mean, the live collection iterator shouldn't be invalidated with this kind of operation, unless destroy() is doing more than expected...

destroy() detaches child from the parent and that causes children collection to be updated. For example, this is what happens if we add category in second case (it's all mangled):

I was concerned about it limits itself to li elements. Previously the code would not care about the type of elements, just direct children. Or do you think it make sense to target specific type of children elements?

No, I think you are right in that it should be generic. Should I change everything to use 1)? Or maybe keep querySelectorAll and do something like this container.querySelectorAll(":scope > *")? Which one do you prefer?

[Chocobo1]

destroy() detaches child from the parent and that causes children collection to be updated. For example, this is what happens if we add category in second case (it's all mangled):

Thanks for confirming!

Which one do you prefer?

I would go with the first option.
Also, it could be written like this to make it one line: Array.from().forEach();