report: metric filter refactor to JS and adornments

[paulirish]

some (potential) followups from #11732

JS refactor: After connor raised the question, I tried out the JS approach to see. I'm fine with either, so if folks prefer the JS style, wfm.

adornments idea: the data side of it was annoying enough to split into this. The UI bit seems interesting, no strong feelings, tbh.

demo: https://lighthouse-git-adorn-googlechrome.vercel.app/english/

[connorjclark]

In both demo reports, selecting "CLS" removes any relevant audits from the "Passed Audits" section. Ideally that entire section would be hidden while in this state. Same for "Opportunities". Can that be done with just CSS? Probably, because it's not just CSS, you're dynamically writing whatever CSS you want with JS.

For this PR's demo, something weird is happening when you toggle to CLS and then back to All–there is then nothing left in "Passed Audits".

I still think that JS is simpler to understand than dynamically generated CSS.

[paulirish]

selecting "CLS" removes any relevant audits from the "Passed Audits" section. Ideally that entire section would be hidden while in this state.

yeah i was skipping that functionality when this was CSS only. now that it's JS-driven i can add it.

For this PR's demo, something weird is happening when you toggle to CLS and then back to All–there is then nothing left in "Passed Audits".

good catch. i'll fix that.