Handle non-renderable content better

[Mr0grog]

When we are comparing non-text content that we know the browser can’t render inline (e.g. an Excel .xlsx file, but not a PDF), we should provide a better experience by displaying some basic information about the file, like the type, size, hash, and a download or “view raw file” (or something along those lines) button.

Right now, we simply try and display the raw file contents if it’s not diff-able HTML, which can result in a file trying to auto-download in the browser and, afterward, a blank space in the comparison window. This is a pretty terrible experience! For example, this Excel file: https://monitoring.envirodatagov.org/page/3e7554b3-abb2-466e-b4f2-cf9ba73c3cea/d3053a25-61e6-4c90-ade0-545bad84f199..855d922c-a4b4-4890-b4ba-9187295352c0

The original goal was that we would develop a specialized diff or view for all kinds of file types, and that would solve this problem. But: we’ll never handle everything, and we also don’t have the developer resources to easily expand on what we’ve got in the near term, either. We need something better for media types we don’t [yet] support.

How this currently works:

• diff-types.js has a map of media types to relevant diff/view types.
• ChangeView looks up relevant diff types from that map for the media type(s) being compared.
• DiffView chooses the actual view to render based on the chosen diff type.
• …which will generally be either RawVersion or SideBySideRawVersions.

We should probably have new FilePreview and SideBySideFilePreview views to use in cases where we don’t know we can actually render the file inline. Constants for them will need to be added to diff-types.js and mapped to the views in ChangeView.

[Mr0grog]

Some currently renderable types that don’t need this behavior:

• PDF (application/pdf)
• Audio/video, e.g. .mp4 (I’m surprised to discover we are tracking some of these!)
• JSON (application/json)