Remove dependency on fontawesome

[jech]

Testing on a fairly slow link (cable Internet), I've found that Galene's load time is 2s, which is way too long for my taste.

Most of the delay is due to the loading of fontawesome, which consists of 124kB of font data and 64kB of CSS. It would be good to either avoid depending on Fontawesome altogether, or to subset the font.

[jjsarton]

The load time depend from download, upload rate and the ping time your load time from 2s suggest that the download ratw will probably be around 5 to 6 Mbits per second. With a connection 2.7/.26 Mbps, 78 ms Ping I get approximately 4.4s.
We can offer a subset of font-awesome or have svg images wich can be inline within the html file. This may offer a little bit less load time.

[not-not-the-imp]

If the removal is going to take a while, could Font Awesome be at least updated to the latest available?

Existing V6.0.0 contains issues.
I've attached a screenshot too

I've updated to the v6.7.2 and the errors are gone on Firefox.

[jech]

Upgraded in c465157. But that does not solve the download time — if anyone knows how to subset fontawesome, or at least get rid of the CSS, I'll be grateful for your help.

[not-not-the-imp]

I don't know much about webfont and I had a quick look without success.

It seems my browser loaded the follwoing:

58.22kB   /third-party/fontawesome/css/fontawesome.min.css 
2.01kB     /third-party/fontawesome/css/solid.min.css
2.02kB     /third-party/fontawesome/css/regular.min.css
159.65kB /third-party/fontawesome/webfonts/fa-solid-900.woff2

I was able to get away with not loading regular.min.css in the galene.html.
I guess it might be due to the config of my browser than anything else, not sure.

Next up I looked at fa-solid-900.woff2 it being the biggest file.
grepping into the various file, it seems we only need 17 glyphs [1] out of all of them.

With relative success I managed to remove the glyph within fa-solid-900.woff2 with FontForge.
I can remove glyphs (a pain to do manually), and then generate a new font (it complains about errors, but seems to work).

I automated the process with pyftsubset [2].
I then realised there were other glyphs missing [3], but eventually got a 2.4K file instead of 155K.

I have no errors in the webconsole and no missing icon I can find.
I've only tested desktop firefox on Linux so far.

Let me know if you want me to do a similar process for the other fonts (brands, regular and v4).
I cannot drop the woff2 file(s) here, but I can do a PR.

[1]

fa-align-left
fa-clone
fa-comment-alt icon-chat
fa-ellipsis-v
fa-exchange-alt
fa-expand
fa-frown
fa-microphone
fa-microphone-slash
fa-play
fa-share-square
fa-sign-out-alt
fa-stop
fa-times
fa-user
fa-volume-mute
fa-volume-up

[2]

pyftsubset fa-solid-900.ttf  \
--unicodes=U+f036,U+F24D,U+F27A,U+F142,U+F362,U+F424,U+2639,U+F130,U+F131,U+F04B,U+F045,U+F2F5,U+F04d,U+00d7,U+F007,U+F6a9,U+F028,U+F00D,U+F14D,U+F111,U+F030,U+F065 \
--output-file=fa_small.woff2 \
--flavor=woff2

[3]
The green dot, the camera and the full screen one.

[jech]

That's excellent news.

I can do a PR

Please. I suggest you structure it as two commits, one that adds your script (please create a new directory called scripts), and one that actually adds the subsetted fonts.

Now the next question: can we do without the CSS?

[til]

I think it would be worthwhile to explore the inline SVG approach a bit further – in my experience it's quite common nowadays and has mostly replaced the icon font approach. Fontawesome provides single icon SVG downloads, so it's easy to copy and paste only those that are used. It would remove the need for fontawesome CSS and font files altogether.

I've prepared a proof-of-concept PR which replaces 2 of the 17 icons listed above, align-left and ellipsis-v: #251

The aesthetics of the HTML source code suffers a little bit, but it's bearable imho. More importantly, it would involve some effort to port all 17 icons of Galene to inline SVG: case by case CSS and some Javascript and sometimes a bit of the DOM needs to be adapted, for example for the logic that swaps the mute/unmute icons. I'm happy to contribute some work but cannot promise that I'll be able to do all of it – if someone wants to team up on this (@jjsarton, @not-not-the-imp?), I'm happy to e.g. give access to my fork or collaborate in another way.

[jech]

I think it would be worthwhile to explore the inline SVG approach a bit further

I'm not fundamentally opposed, but I'm a little concerned about further maintenance. Since the approach requires manually inserting the SVG glyphs into the file, it will require some non-trivial expertise to add further glyphs in the future.

I suspect that the approach suggested by @non-the-imp is more convenient: there's a script in the Galene sources that subsets fontawesome, in order to add a new glyph one just edits the script and runs the subsetting procedure again.

[til]

From my subjective outside contributor point of view, I would find it more convenient being able to just copy and paste SVG into HTML instead of having to run a script with the need to set up its Python dependencies first.

To make adding new inline icons less non-trivial, there could be an instruction along the lines of

To add a new icon to the UI, choose an icon from the free fontawesome set at https://fontawesome.com/search?ic=free, switch to the SVG tab, copy the full SVG code including the licensing comment, and paste it into the target HTML file of Galene. If necessary, add CSS to assign it size and color.

(Not sure where best to put it though)