Opened 17 months ago

Last modified 9 months ago

#18439 assigned bug

Gerrit site not showing icons anymore

Reported by: humdinger Owned by: nephele
Priority: normal Milestone: Unscheduled
Component: Kits/Web Kit Version: R1/beta4
Keywords: Cc:
Blocked By: Blocking: #18787
Platform: All

Description

Probably since an update to our Gerrit site early June 2023, the icons are missing and only text like "arrow_drop_down" is shown instead. Still works with Web (Epiphany), not with WebPositive.

Putting the noto-emoji icons from https://fonts.google.com/noto/specimen/Noto+Emoji into /boot/system/non-packaged/data/fonts/ttf didn't solve the issue.

Attachments (3)

remove-icon-ligatures.js (3.6 KB ) - added by madmax 16 months ago.
Gerrit js plugin to replace icon names with their corresponding characters
webpositive_gerrit_page.jpeg (343.0 KB ) - added by cocobean 9 months ago.
Haiku's Gerrit page rendering using WebPositive_618.1.10 on HaikuR1B4_x64
WebPositive_Gerrit_material-icons_cocobean.jpeg (386.3 KB ) - added by cocobean 9 months ago.
Haiku's Gerrit page rendering using WebPositive_618.1.10 on HaikuR1B4_x64 w/material-icons.woff v1.13.12

Download all attachments as: .zip

Change History (18)

comment:1 by pulkomandy, 17 months ago

I think you need FontAwesome rather than Noto Emoji. It is recognizable because it uses a hack based on ligatures to replace words like "arrow_drop_down" with icons, whereas Noto Emoji only provides Unicode Emojis (so if it was missing, it would show invalid characters or empty squares "mojibake").

Also, in nightlies, font downloading is supported, and I don't think there are plans to backport this in beta4 app_server. So, this should work out of the box in nightlies, and there is nothing more to do in this ticket.

comment:2 by humdinger, 17 months ago

Guess it's time to move on from beta4... back to the bleeding edge.

comment:3 by nephele, 17 months ago

I'd say we should definetely ship whatever we need, and not rely on foreign ressources that can track users by their downloads. So that'd either be patching gerrit to behave normally or include that font.

comment:4 by madmax, 17 months ago

The fonts are served from the gerrit instance itself, so no tracking.

The font is Material Symbols Outlined, and it abuses ligatures so that, for example, the text arrow_drop_down is rendered as one glyph with the drop down arrow. So no luck in nightlies either: #17414.

by madmax, 16 months ago

Attachment: remove-icon-ligatures.js added

Gerrit js plugin to replace icon names with their corresponding characters

comment:5 by madmax, 16 months ago

We can have an ugly workaround from within gerrit. It would only work for our instance, of course.

Dropping the attached file in ${GERRIT_SITE}/plugins injects js that watches the content for icons and replaces the texts with the private characters. The font is a variable type served as woff2, so we also need a version in a format we support. I tried putting that into ${GERRIT_SITE}/static, but it is served as text/html and rejected by the browser, so I'm pointing to my own server. If accepted feel free to keep it as is or to download the font and serve it from somewhere more appropriate.

comment:6 by nephele, 15 months ago

The script seems fine. Why do you need to ship a font though? wouldn't it be enough to use equivalent already existing emoji we have via noto emoji already?

For example drop down would be ⏷ play would be ▶️ Etc.

If you want i'd start replacing some of them with apropriate emoji, commenting out the other ones and we'd add new ones later as they are needed?

comment:7 by pulkomandy, 9 months ago

Blocking: 18787 added

comment:8 by pulkomandy, 9 months ago

The plugin is now deployed, for reference I used this command:

ssh -l pulkomandy review.haiku-os.org gerrit plugin install -n remove-icon-ligatures.js - < ./remove-icon-ligatures.js

I'm not sure if I need to make some changes to the infrastructure repository to make this persistent?

Last edited 9 months ago by pulkomandy (previous) (diff)

comment:9 by cocobean, 9 months ago

Current noto fonts package (2014) resolved some of the font rendering issue for Gerrit - the drop down arrows are small boxes - but the basic text is rendering a lot better (no longer distorted text (i.e. more conformant)).

comment:10 by pulkomandy, 9 months ago

It's completely unrelated to the Noto font, I just deployed Madmax's Gerrit plugin to replace the ligature based font with another solution.

comment:11 by cocobean, 9 months ago

Ok. I still see an issue with woff2 font handling when using WebPositive dealing with Material Symbols and Icons on Haiku x64 (hrev56578+95). Gerrit's web page rendering seems fine when using Dooble web browser.

Last edited 9 months ago by cocobean (previous) (diff)

comment:12 by humdinger, 9 months ago

Looks fine to me...

What's "woff and woff2 font handling"? Got a screenshot?

by cocobean, 9 months ago

Haiku's Gerrit page rendering using WebPositive_618.1.10 on HaikuR1B4_x64

comment:13 by cocobean, 9 months ago

Web Open Font Format v2 (compressed Opentype/TrueType fonts w/metadata (including symbols/icons/CSS). You mentioned something is working fine for you now (i.e. WebPositive ?!?). I attached the picture which shows the WebPositive/HaikuWebKit 618.1.10 rendering issue with "right arrow" symbol in the Owners/Review column. ALso, the 'green' (+1, +2) or rejected (-1) code-review checkboxes and the 'orange-colored unresolved comments' symbol in the Status column.

There were some remaining issues with Cascading Style Sheets with WebPositive/HaikuWebKit.

Last edited 9 months ago by cocobean (previous) (diff)

comment:14 by madmax, 9 months ago

Again nothing to do with what you are saying.

App-private fonts is a new feature only available in nightlies, you'll have to wait for beta5. As a workaround, you can download the font and install it system-wide, putting it in ~/config/non-packaged/data/fonts will do. You can get it here.

comment:15 by cocobean, 9 months ago

Thanks, madmax. Using material-icons v1.13.12, I installed material-icons.woff2. Failed. I installed material-icons.woff. Passed - all icons, symbols, and text rendering on Gerrit looks conformant now on Haiku R1B4 x64 (hrev56578+95) using WebPositive (HaikuWebKit 1.9.11 (WebKit 618.1.10)).

by cocobean, 9 months ago

Haiku's Gerrit page rendering using WebPositive_618.1.10 on HaikuR1B4_x64 w/material-icons.woff v1.13.12

Note: See TracTickets for help on using tickets.