Consider replacing FontAwesome glyphs with PNGs

[eloquence]

Description

The Journalist Interface uses FontAwesome for various icons in the UI, which are rendered as Unicode placeholder glyphs is FontAwesome is not present, which is the case in Tor Browser's "Safest" security setting:

The current implementation is based on the reasoning that it's not necessary to use Tor Browser in "Safest" mode in the Journalist Interface, given defense in depth against unauthorized use (2FA login, authorization token). However, we do ask users to use "Safest" to visit the Source Interface, and journalists may make the assumption that they should do so for the Journalist Interface as well (we have little evidence one way or the other).

To avoid unexpected breakage, it seems reasonable to replace these glyphs with static PNG assets, rendered a high enough resolution to scale well on HiDPI displays.

[eloquence]

Note that even if we do deprecate the Journalist Interface in favor of the SecureDrop Client, some uses of FontAwesome glyphs remain in the admin portion of the web UI.

[DrGFreeman]

Hi @eloquence, this is something I can definitely take care of.

[ninavizz]

@DrGFreeman I would personally like to see the visual language between the Web UI and the new SD Client mirrored as often as possible; to that end, there is a cleaner Download icon we're using, there. It's SVG is here: freedomofpress/securedrop-ux#17 (comment)

@eloquence How do you and @emkll feel about having the existing download icon in the JUI replaced with the cleaner version from the Client?

[ninavizz]

...following-up on the above, I replaced the docs, messages, and download icons to cleaner variants that imho work better in the tiiny footprints, than the existing glyphs. Pending approval from what others think, I'd be happy to provide PNGs. Yes, my typography is a tad borked, attempting to replicate how TorBrowser renders fonts w/o Javascript.

[eloquence]

👍 Thanks @ninavizz :). Since we're replacing these glyphs with PNGs anyway, I'm favor of the specific choices presented in the screenshot above; they're both clear and aesthetically pleasing.

[ninavizz]

Cool! I went ahead and created new PNGs for them, and the rest of the fa-glyphs I could find in the JUI.

@DrGFreeman So... all the sizes of the font-awesome glyphs, were strange and random; presumably because their "font size" was something consistent and not random, yet they all rendered at different random sizes. Likewise, the text-fonts in the JUI all render a bit odd, so it was a little hard to get consistent(ish) sizing in replicating the existing footprints with PNGs. And yes, I was more generous with padding in how they're placed in the mockup.

Hoping it's not too much trouble doing this—and thank you again, for volunteering to give it a go! :)

All the PNGs I created, are 3x the size of what they are at 100%; which is to budget for image degradation on HDPI monitors.
The individual PNG files are in the attached ZIP archive. The only remaining glyphs I could find in the JUI, were for the list of all sources, and the individual source view.

There are a few other glyphs in the Admin interface, and because that's a different codebase I didn't touch them, here. Did you want to include that in a PR as well? Happy to make replacement PNGs for its bell, pencil, and refresh glyphs, if so.

Old: docs/messages = 9x12
New: docs = "files" = 17x17
New: msgs = "mssgs" = 17x17

Old: reply fa-reply = 16x16
New: reply = 19x19

Old: fa-envelope, fa-envelope-open = 16x16
New: envelope-closed, envelope-open = 18x18

Old: download = 13x13
New: doanload = 16x16

Old: star = 14x13
New: star =

Old: unstar = 14x13
New: unstar = 16x16

Old: trash = 11x13
New: trash = 13x16

JUI_Iconz.zip

[DrGFreeman]

Thanks @ninavizz! I'll start replacing the FontAwesome icons with the PNGs you provided. I'll use a constant height for now and we can adjust individual icons later.

Below is the list of unique FA icons I found with a search of the code base. On the right, I put the matching icons from those you provided. As you mentioned, there are other icons which do not have corresponding icons in your file. For those, I'll convert the FA icons to PNG and use those in the layout. If you'd like to change some of these as well, just let me know.

fa-bell -> fa-bell
fa-check -> fa-check
fa-chevron-right -> fa-chevron-right
fa-download -> download_3x
fa-edit -> fa-edit
fa-envelope -> envelope-closed_3x
fa-envelope-open -> envelope-closed_3x
fa-file-alt -> mssgs_3x.png
fa-file-archive -> Files_3x
fa-info-circle -> fa-info-circle
fa-pencil-alt -> fa-pencil-alt
fa-plus -> fa-plus
fa-reply -> reply_3x
fa-star -> star-3x
fa-star-half -> unstar-3x
fa-sync -> fa-sync
fa-trash-alt -> trash_3x

Here's where these icons are used:

journalist_templates/admin_add_user.html:fa-plus
journalist_templates/admin.html:fa-edit
journalist_templates/admin.html:fa-pencil-alt
journalist_templates/admin.html:fa-plus
journalist_templates/admin.html:fa-trash-alt
journalist_templates/col.html:fa-check
journalist_templates/col.html:fa-chevron-right
journalist_templates/col.html:fa-download
journalist_templates/col.html:fa-envelope
journalist_templates/col.html:fa-envelope-open
journalist_templates/col.html:fa-file-alt
journalist_templates/col.html:fa-file-archive
journalist_templates/col.html:fa-reply
journalist_templates/col.html:fa-trash-alt
journalist_templates/config.html:fa-bell
journalist_templates/config.html:fa-pencil-alt
journalist_templates/edit_account.html:fa-sync
journalist_templates/flag.html:fa-info-circle
journalist_templates/index.html:fa-download
journalist_templates/index.html:fa-star
journalist_templates/index.html:fa-star-half
journalist_templates/index.html:fa-trash-alt
journalist_templates/_source_row.html:fa-download
journalist_templates/_source_row.html:fa-file-alt
journalist_templates/_source_row.html:fa-file-archive
journalist_templates/_source_row.html:fa-star

[ninavizz]

So great @DrGFreeman, TY!! Yeah, the glyphs that are most commonly exposed to users, that also render poorly at such a small size, were my only real priority for replacement for simpler glyphs.

All of the replacement glyphs, I sourced from Google's material.io icons library. So, wherever attributions are mentioned in the code, a happy FOSS attribution to it should be included as well. Attribution probably does not require use of the "G" word, probably just "icons sourced from material.io are under an apache 2 blah blah license" is adequate.

The bell, plus, check, chevron, edit, info, and bang icons, all render pretty cleanly—or are only exposed on rare occasion to admins, so if you are able to create PNGs from them, I would love that so much. If you need a hand, please (as always) just give a shoutout, happy to lend a hand. Again, I appreciate you taking on this PR, so much. Teamwork is the bestwork. :)

[DrGFreeman]

Thanks @ninavizz. I used the link you provided to get the star icon svg in order to make colored versions for when sources are starred/unstarred.

This is what it looks like in Tor Browser with "Safest" setting:

I'll keep working through the other pages and submit a PR when all pages are completed.

Regarding attribution, I don't know where this would go, in the source code itself? Maybe @eloquence would know?

[ninavizz]

Dang it my friend, you are FAST!! That looks AWESOME! Thank you! The only nits I'd have, are if the vertical alignment between the icons and the text could be a little better—but I suspect that's a much bigger thing than your most excellent PR, so no worries. Wow. Really stoked to see this done, @DrGFreeman. Death to tofu-glyphs, woo! :)