[Logging] Support collapsing console.table log messages

[lostintangent]

Repro steps:

1. Run the sticker app's homepage (or click here)
2. Open up the Glimpse client
3. Select the request that corresponds to the /browse route
4. Click the Collapse All button in the top right of the log list

Expected: For the console.table-based logs to also collapse, since they take up a decent amount of vertical space. Actual: Table logs don't appear to be collapsable like other multi-line logs.

Since a call to console.table could take an arbitrarily large number of "rows", it would be great to be able to collapse these just like any other log type, in order to provide a consistent and scalable UX for the log list.

[nikmd23]

We are working through the UX for this very feature.

[chetsangnil]

Here's the updated version for collapsing table!

[nebrius]

Note: this is currently blocked until https://github.com/Glimpse/Glimpse.Client/issues/290 is completed.

[nikmd23]

What do the numbers in the headers mean?

[chetsangnil]

Those numbers represent number of items in each column. They give users a sense of how large of the data set contained in the table. This is particularly useful when # of entries are not the same for each column (shouldn't happen often but when it does, this will be a very important info to show).

[nikmd23]

I know this is going to sound crazy, but it's actually a pretty difficult thing to figure out if a cell "contains data" or not. Sometimes empty strings ('') are meaningful for developers. Sometimes nulls {null) is meaningful.

To keep things accurate, and to stick with the spirit of the design, we should probably just tell the developer how many rows there are. That doesn't mean we'd have to change this design, but it would mean the numbers would always be the same.

[nikmd23]

👍

[nikmd23]

This is now available in Glimpse for Node 0.16.4. Please see our announcement issue for more information.