Insights: fix broken re-rendering of Insights

This CL makes a change to how we render Insights in the sidebar. We
found that if you have two traces, and the ordering of the Insights in
the sidebar changes, you could end up with a completely broken sidebar.
In the logs, this would appear as the code passing the LCP Breakdown
model into the Cache insight, for example.

Tracking this down, I think it is down to how Lit deals with trying to
re-render efficiently. Now we are rendering a series of
devtools-widgets, rather than the component itself, it would not always
destroy and re-order the list.

Looking at
https://lit.dev/docs/templates/lists/#when-to-use-map-or-repeat, it
states:

> If the DOM nodes have state that isn't controlled by a template
> expression, use the repeat directive.

The introduction of the repeat() directive here, even though we have
just one item in the array, provides a way for us to put an explicit key
to the node. In this case, the key is the model (each trace has unique
model references) and Lit supports using an object here. Doing this
means we relate the DOM to the exact model that backs it and avoids any
chance of Lit trying to reuse elements and causing a breakage.

Bug: 498621626
Change-Id: I1f23bba7fd3ad818632c0f6484085ebd318d1659
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7817996
Commit-Queue: Alina Varkki <alinavarkki@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alina Varkki <alinavarkki@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>