Current results ui has slow/broken scrolling on long test lists

[whesse]

When the current results UI shows a list of 10,000 tests or more, scrolling using the scroll bar is janky and hangs the web client.

This is due to issue flutter/flutter#52207 . A long ListView in Flutter cannot have variable-sized items without creating all the items in the list to find the scroll length and scroll position. This is fixed by specifying the vertical size of all items with an itemExtent or prototypeItem argument to the ListView constructor, giving the common size for all items.

This bug was reported in #143 by a user.

Potential fixes are to move the expansion of a test item to show all the configurations and links for that test to a popup, side panel, top panel, or overlay. This UI might be less usable than the current expander button on an item.

If the expension is an overlay, it will cover over other test names, and perhaps two tests won't be expandable at the same time. Dismissing the popup will also require either a dismiss button, a click, or hitting the escape key.

Putting the details in a top panel has the advantage that the test list won't be covered over, just smaller, but the case that
the top panel needs scrolling will need to be handled too.

I propose having some UI discussions with other team members and Flutter UI team, then carrying out this fix.

[whesse]

An alternative solution is enabled by the landing of flutter/flutter#131393
A cheaper way of providing the size of each list item can be provided by a list item extent builder function, so Flutter doesn't need to construct and lay out the widgets for all items in the list. Will try this approach first.

[whesse]

I propose the following design: Test details (which configurations have which status, with links) will be in a top panel that is vertically above the scrollable list of tests. It will expand, but leave a certain vertical space available for the test list.

There will be a provider from the test results panel, that will expose the test results, the list of expanded tests, and a boolean on a test to say whether it is expanded or not. It will accept requests to expand or dismiss a test, by index, and will provide a stream of events (maybe with no contents) that marks changes to its state. The test list and expansion panel will both subscribe to this provider. The provider can also connect to the fetcher.

[whesse]

I now think that a different solution is best: The list of tests should be a pageable list, not just a single long scrollable list.

That is how most Google UIs work, such as the GCP web UIs, and the LUCI console (milo).
The material design spec for data tables specifies exactly this behavior:
https://m2.material.io/components/data-tables#anatomy

Flutter material has the PaginatedDataTable class for exactly this purpose.

The LUCI console has text "Page Size: 20 50 100 200. PREVIOUS PAGE. NEXT PAGE" at the bottom of each page of build results for a builder.