webui: toggle all rule match logic at once

[williballenthin]

I'd like to propose a simplification to the UI that will reduce the number of controls displayed and clicks that a user needs to do. It will also help focus attention on a single rule match at time, which can help the page from feeling overwhelming.

Mockup (multiple pages here): https://www.tldraw.com/ro/3xqHSWNIKia10RQwkSOzU?v=0,0,1567,1265&p=page

With the current implementation, there are a lot of clicks needed to expand the logic for a rule match. As a user, if I want to see the details of a rule match, given that the rules aren't typically very large (up to a dozen lines), I just want to see all the logic, not hunt through all the levels of the logic tree. Therefore, I don't think we should have the ability to hide portions of a rule's logic. Instead, as a rule match is inspecting, we should toggle showing all/none of it.

It's also important to know where the rule matches occurred (#2189). So, when there are multiple matches for a rule, its ok to only show one match's worth of logic at a time.

Implementation-wise, I think this means that the rule logic can be rendered as nested ul lists (with appropriate padding/margins), rather than needing an interactive javascript tree widget. The lines within the rule logic can also be spaced more closely together, increasing the visual density and better indicating how data is grouped.

When no rules are shown:

When a rule with a single match is shown:

(commentary)

When a rule with multiple matches is shown:

(commentary)

[s-ff]

I implemented changes in regards to this. Can you check now?

[williballenthin]

looking really good, thank you @s-ff!

[s-ff]

This is completed.