Collapsible `@var` groups in style configuration

[DankestFke]

I don't know if this is duplicate but i tried searching the whole enhancement label issues

If you take a look on these userstyles:
YouTube Button Remover

uTube+

These styles are using dropdown or textbox to mark the configurations below as a group, I find these are good for organizations. But,

what if we can have an accordion for user to expand and collapse the section?
In my opinion, we can just turn an empty @var/@advanced dropdown into a section, or we can add @section {} (second one might makes it nest-able)

[tophf]

@eight04, WDYT?

[eight04]

See also: #1370

I think grouping variables is a good idea. But nesting can be too much for a small dialog.

Some suggestions:

1. Make it simple e.g. add @secion [Section title] and it will group everything underneath until the next @section.
2. Backward compatible. Users may lose the group but they won't lose the options.
3. Forward compatible. In case we want to implement complicate, nested groups.
4. Since it works with @var, it might be better to use @vargroup or something like that.

Bonus:

1. In my experience, sometimes I add child options to a checkbox so they are disabled until the parent is checked.

---

How about adding a @vargroup [level] [title] directive? Let level default to 0 and can be omitted. Title can also be omitted if we want to support my use case in bonus (1). We will also need @vargroupend if we want to end the group before the next @vargroup.

We will also have to add an array structure to store the order of var/vargroup in usercss-meta.

---

Also we should ping those usercss authors if they are on Github.

[tophf]

@section sounds simpler than @vargroup, but what about @var group <title> where title is mandatory (can be an empty string "") so we can end the group by a nameless @var group?

[DankestFke]

Make it simple e.g. add @Secion [Section title] and it will group everything underneath until the next @section.

What if someone don't want to group it under between both sections?

In my experience, sometimes I add child options to a checkbox so they are disabled until the parent is checked.

This will need the user to verify themselves if the parent is checked and I find it super annoying because sometimes I wouldn't know unless I hard checking it

[eight04]

@section sounds simpler than @vargroup, but what about @var group <title> where title is mandatory (can be an empty string "") so we can end the group by a nameless @var group?

That will be backward incompatible. Style mangers which don't support @var group will get an Unknown @var type error and won't be able to install the style.

I think this feature is not that important to introduce a breaking change.

---

What if someone don't want to group it under between both sections?

Therefore we need a @vargroupend to mark the end of the group.

---

Ping usercss authors: @pabli24 @sapondanaisriwan