Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please remove external fonts #367

Closed
IzzySoft opened this issue Oct 2, 2018 · 19 comments
Closed

Please remove external fonts #367

IzzySoft opened this issue Oct 2, 2018 · 19 comments
Assignees
Milestone

Comments

@IzzySoft
Copy link

IzzySoft commented Oct 2, 2018

Installed Version: 2.3.8 DEV Environment: undefined

Current Behaviour

SOX uses a "remote font" for the item in the MetaCollider™ toolbar ("soxSettingsButton"). I refuse to enable remote fonts, as according to uBlock Origin some are loaded from Google, others from FontAwesome (couldn't find a reference in your code, though – so that could be from some SE code) – which makes it look strange (a box for "unknown character"). Just found it with FF's "inspect element": the font used is "Font Awesome 5 Free".

Could you use a local font source for that, to make the script more privacy-friendly (remove a possible tracker)? Same issue for the "jump to top" floating button, btw.


SOX Errors logged to the browser console -- F12 (if available)


Steps to reproduce


Features Enabled

["Appearance-addAuthorNameToInboxNotifications","Appearance-alignBadgesByClass","Appearance-answerTagsSearch","Appearance-colorAnswerer","Appearance-dragBounty","Appearance-highlightQuestions","Appearance-isQuestionHot","Appearance-localTimestamps","Appearance-markEmployees","Appearance-metaChatBlogStackExchangeButton","Appearance-scrollToTop","Appearance-spoilerTip","Appearance-standOutDupeCloseMigrated","Appearance-tabularReviewerStats","Appearance-topAnswers","Appearance-unspoil","Appearance-addTimelineAndRevisionLinks","Appearance-showTagWikiLinkOnTagPopup","Comments-commentReplies","Comments-confirmNavigateAway","Comments-copyCommentsLink","Comments-moveBounty","Comments-showCommentScores","Comments-hiddenCommentsIndicator","Comments-onlyShowCommentActionsOnHover","Editing-editComment","Editing-editReasonTooltip","Editing-findAndReplace","Editing-titleEditDiff","Editing-inlineEditorEverywhere","Editing-pasteImagesDirectly","Flags-flagOutcomeTime","Flags-flagPercentages","Flags-flagPercentageBar","Sidebar-hideCommunityBulletin","Sidebar-hideJustHotMetaPosts","Sidebar-hideHireMe","Sidebar-hideLoveThisSite","Sidebar-linkedToFrom","Chat-chatEasyAccess","Chat-replyToOwnChatMessages","Chat-renameChat","Voting-betterCSS","Voting-stickyVoteButtons","Voting-disableVoteButtons","Extras-alwaysShowImageUploadLinkBox","Extras-linkedPostsInline","Extras-parseCrossSiteLinks","Extras-quickAuthorInfo","Extras-sortByBountyAmount","Extras-warnNotLoggedIn","Extras-showMetaReviewCount","Extras-copyCode","Extras-dailyReviewBar","Extras-showQuestionStateInSuggestedEditReviewQueue"]
@shu8
Copy link
Member

shu8 commented Nov 4, 2018

So I looked into this and couldn't find anything with as simple attribution terms as font awesome. As far as I can tell, we don't need to do anything extra currently with font awesome, as we just use the CSS file they give us. It would get complicated to need to add some attribution text along with each icon we use if we use another source, and most other places seem to have fairly strict requirements for the way attribution should be given.

I'm going to leave this open in case anyone has thoughts (/tell me I'm wrong because I'm not too confident about the attribution stuff!) on what we could do, as it would be pretty nice to store these icons as an SVG in the CSS or the sox.common.js file. However, Font Awesome also has its advantages in that if we ever need to add an icon it's almost definitely going to be available (and it's super easy to use) so unfortunately I don't think I'm going to move away from it unless there's another similar good alternative!

@IzzySoft
Copy link
Author

IzzySoft commented Nov 5, 2018

You got me wrong. I didn't ask about attribution – but about not using "external fonts" if possible. They act like trackers. Which is why uBlock Origin by default disables them.

@shu8
Copy link
Member

shu8 commented Nov 5, 2018 via email

@IzzySoft
Copy link
Author

IzzySoft commented Nov 5, 2018

Language Barrier 😃 That wouldn't solve the "remote font" issue. Well, no idea what would be the most privacy friendly "remote font" source … So maybe we put this issue on ice until we find the answer. Works without enabling remote fonts, though it looks a bit weird then 😉

Just wondered what Github uses: it's inline SVGs (e.g. the icons on the editor). Might be an option as well, and would even load faster (I sometimes see pages stall on contacting FontAwesome or other external resources).

@shu8
Copy link
Member

shu8 commented Nov 6, 2018

Inline SVGs would be perfect! However I can't find a place to actually get the SVGs to use that have a similar attribution policy!

@IzzySoft
Copy link
Author

IzzySoft commented Nov 6, 2018

How many characters/symbols do you need? Maybe someone could simply create them, e.g. by a given screenshot/hand-drawing? E.g. the "scroll-to-top" should be easy enough, just 4 strokes. Not that I could volunteer (I'm not good at graphics), just naming options.

@shu8
Copy link
Member

shu8 commented Nov 9, 2018

@IzzySoft I think it'd be:

  • the cogs icon
  • the wrench icon used within the sox settings dialog itself
  • the 3 icons at the bottom of the dialog (export, import, access token key)
  • the search icon in the settings dialog
  • the checkbox in the settings dialog
  • the scroll to top icon

(possible more I haven't thought of)

So it wouldn't be an easy task 😝. If you know of any websites that do SVG icons please let me know! I really would like to have the icons contained within SOX if there was a site that wouldn't make it too much harder!

@IzzySoft
Copy link
Author

Unfortunately I don't know such a site. But most of what you listed should be pretty generic, so maybe things like the wrench or a search icon can already be found as SVG. Trouble might be to find a "matching set" …

Pointer: CC search (so yes, definitely a bunch of search glasses are there in SVG format 😉)

@j-f1
Copy link
Contributor

j-f1 commented Nov 10, 2018

Font Awesome 5 includes SVG icons.

@IzzySoft
Copy link
Author

@j-f1 they still want you to load them via Javascript from their site – which is what this issue asks to avoid. Not just for privacy reasons (to avoid tracking), but also for performance. If you load stuff from too many external sources (i.e. more than none 😉) you always run the risk one of them will stall loading the page. And I see this quite often on SE for FontAwesome and some other CDNs.

@j-f1
Copy link
Contributor

j-f1 commented Nov 10, 2018

@IzzySoft There’s an option to download all the SVGs.

@IzzySoft
Copy link
Author

Ah, that's good then – provided one is free to use them and "credits" in the source header are sufficient.

shu8 added a commit that referenced this issue Jun 19, 2019
This is part of #367 to remove external fonts. The aim is to stop using
FontAwesome and instead only include the icons SOX uses.

Advantages:

- 'remote fonts' like FontAwesome aren't needed, so some
extensions/content blockers like uBlock Origin won't block the icons
from appearing
- a slight bandwidth usage improvement. Remote fonts load many more
icons than SOX needs, so maintaining a single sprite file would mean we
only load the ones we need
shu8 added a commit that referenced this issue Jun 19, 2019
This is part of #367 to remove external fonts. The aim is to stop using
FontAwesome and instead only include the icons SOX uses.

These icons are from Google's Material Icons:
https://material.io/tools/icons/

Advantages:

- 'remote fonts' like FontAwesome aren't needed, so some
extensions/content blockers like uBlock Origin won't block the icons
from appearing
- a slight bandwidth usage improvement. Remote fonts load many more
icons than SOX needs, so maintaining a single sprite file would mean we
only load the ones we need
@shu8 shu8 self-assigned this Jun 20, 2019
@shu8
Copy link
Member

shu8 commented Jun 20, 2019

@IzzySoft I'm not sure if you're still using SOX, but I've had a go at doing this, and just pushed changes in dev 2.5.9 that uses a local set of icons.

SOX shouldn't be loading FontAwesome at all anymore. Please give it a shot if you want! :)

@IzzySoft
Copy link
Author

Sure I still use it – and thanks! Just updated – and now the icon is invisible in the MultiCollider™ (black on black? no; but even if I change or disable the fill attribute, it stays invisible) showed up, though it took a little (see end of this comment). While waiting for it (and thinking it won't show up), I found two errors in the console:

  • TypeError: sox.Stack.using is not a function in sox.common.js:38:7 (first stack trace below)
  • SOX: SOX Error: error Bad Request in sox.common.js:38:7 (second stack trace below)

stack trace 1:

sox.error file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/sox.common.js:38:7
    init file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/sox.user.js:171:13
    sox.ready/< file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/sox.common.js:79:11
    l file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:29373
    a/</c< file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:29677

stack trace 2:

sox.error file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/sox.common.js:38:7
    error file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/sox.common.js:286:11
    u file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:27452
    fireWith file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:28202
    k file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:77674
    n/< file:///home/some_user/.waterfox/1234567.default/gm_scripts/Stack_Overflow_Extras_(SOX)/jquery-3.3.1.min.js:2:79907

Say what, please? Now that I'm finished copy-pasting those details over, the cog/wheel icon shows up in the MultiCollider™? Wow… OK, so it works now nevertheless 🤣

Thanks a lot! Not sure what those errors refer to then, so I leave them in here.

@shu8
Copy link
Member

shu8 commented Jun 20, 2019

Great! Glad it's working :)

I can see where the first error is coming from, and it is unrelated to this, probably one specific feature. I'll have a look and try getting that fixed (it's an FF-only bug as far as I can tell!)

For the second one, it does seem unrelated as well, but is definitely a bug. It seems like there's some API call that's failing and sending a bad response. Please could you check the 'network' tab in the dev tools window (should be next to 'console') and look for any requests that are in red? That should (hopefully) help me narrow down which feature is failing!

Alternatively, are there any feature names in red in the SOX settings dialog? If a SOX feature fails to load, the entry in the settings dialog should also turn red!

@shu8 shu8 added this to the v2.6.0 milestone Jun 20, 2019
@IzzySoft
Copy link
Author

No red ones. And I doubt it's one of those still blocked (i.e. not explicitly whitelisted) in uMatrix: no reason why you would call out to googletagservices.com, quantserve.com, scorecardresearch.com … wait, there's one 400 response from https://api.stackexchange.com/2.2/questions/63251/linked?filter=!-MOiNm40Dv9qWI4dBqjO5FBS8p*ODCWqP&order=desc&sort=creation&site=softwarerecs.stackexchange.com&key=lL1S1jr2m*DRwOvXMPp26g((&access_token=false – and calling that manually it gives a 403 stating "keyis not valid for passedaccess_token, token not found." in its response JSON.

Before you ask: yes, logged in I am. Several items in SOX configuration are disabled – and it seems my access token got invalidated. I didn't yet request a new one in case you want me to check something else – if you don't, I would try that and see if the second error disappears. Of course that would make it harder testing how a "fixed version" behaves in this context; I'm pretty sure it's related to the token.

@shu8
Copy link
Member

shu8 commented Jun 21, 2019

Thanks for looking into it! Yeah it will be an access token issue then.

Annoyingly, I had added some logic in a while ago to detect an access token going wrong. Could you check to see if there's a Access token invalid! Opening window to get new one line in the console after you "enable debugging" in the SOX settings dialog?

You should have got an alert saying Your access token is no longer valid. A window has been opened to request a new one. too, but it doesn't seem like you did? :/

@IzzySoft
Copy link
Author

There isn't. Just the relevant items are grayed out and give the hint "you must get an access token to enable this feature" on mouse-over.

Oh, in the console, sorry… wait a sec… funny. Not a single error in the console anymore (when on profile page). Let me check another page… OK, on a question page the errors are still shown. But still no "Access token invalid…" hint. Not even with debugging enabled, sorry.

And no alert either, no.

Shall I simply request a new token – or "stand by" for some more debugging? I don't mind either way. Just let me know when you want to "give it up" 😉

@shu8
Copy link
Member

shu8 commented Jun 21, 2019

Urgh, that's annoying. I think you can just request a new token for now 😛

I will try debugging this soon, but unfortunately won't have time in the next few days!

@shu8 shu8 closed this as completed Jun 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants