By adding 'content-visibility: auto;' we were able to see an 8x
improvement on rendering time and a 25x improvement on paint times for
first load. We may need to do some work to bring similar gains to
non-Chrome useragents.
This patch reworks the mobile breakpoint to allow whitespace wrapping of
code snippets and does away with horizontal scroll. Overall, the
usability and intuitiveness is much better, though readability of the
code itself takes a hit.
In addition, we added the ability to download an icon as a PNG thanks to
the svg2png-converter library. PNGs adopt the current preview weight and
color, and are sized at 256x256.
While phosphor-icons uses an icon font implementation, we won't be able
to provide the duotone weight in that library. We now indicate lack of
support by disabling the code snippet and copy button.
When the debounced search query changes, scroll to the top of the grid
if the query is not the empty string. This has the same smooth behavior
as the scroll buttons, which is not currently available on WebKit.
When search returns no results, the empty-list state now adopts the
current color theme and animates in. The IconGrid also takes up a
minimum of 80vh vertical space, whether the list is populated or empty.
Code snippets can now be navigated to be keyboard. Additionally,
focusing this way or by single-clicking will select the entire snippet
contents by default, then after a 50ms delay, allow for normal text
selection. This is a better experience for copying, especially on
mobile.
This is now in compliance with the spec, using a single color with
opacity to render open/hovered/active GridItems and InfoPanels. We also
properly show background on open GridItems.
This patch extracts InfoPanel from IconGridItem, adds style tweaks to
match the spec, and in general reduces prop-drilling by tapping into
recoil state for most config, and making use of IconContext to style
member icons where appropriate :)
