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

Override font-family-modern font weight (fetch method) #233

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

marcustyphoon
Copy link
Collaborator

@marcustyphoon marcustyphoon commented Jan 31, 2025

Description

As in #231, this overrides the unusual 350 font weight used by Tumblr on elements with the --font-family-modern font face when we're changing what font that variable refers to, preventing overly thin font rendering in certain scenarios. This, however, creates the selectors live in real time.

This is done with a module that exports a style element which it will update to include the selectors from any Tumblr stylesheets in the document head that set font-family: var(--font-family-modern) and font-weight: 350. A mutation observer is used to detect the addition of new link elements, like when opening the post editor or navigating to communities, and their target css files are fetched and parsed to find matching rules using the (clunky, imo) browser native CSSOM API.

Resolves #223.

Obsoletes #232, which solved the problem in a broadly similar way but tried to read the sheet property of the link elements themselves. That ran into CORS issues, requiring the creation of some otherwise-duplicate link elements with crossorigin=anonymous and required the script to be injected into the page context (only in Firefox, I would guess, but I didn't test chromium). It also conferred no real efficiency benefit because the direct fetch used in this PR hits the service worker cache anyway, so it's free.

Note that this intentionally doesn't include rules which are inside a media query, of which there are two (both making changes exclusive to the mobile layout, neither of which I could actually observe). If needed, we could definitely add this functionality (marcustyphoon@2f586b9 translated to CSSOM).

Testing steps

  • Load the extension without this PR and set the font override to Helvetica Neue. Observe unusually thin text in the search box, on activity items, and on the communities settings page. (I observed this on MacOS in Firefox with Helvetica Neue, American Typewriter, and Gill Sans.)
  • Load the extension with this PR and set the font override to Helvetica Neue. Confirm that text is no longer thin.
  • Set the font override to "default." Confirm that no change is made to the Favorit Modern font weight.
  • Set the font override to "custom" and don't type anything in the box. Confirm that no change is made to the Favorit Modern font weight.
  • Load the extension in Firefox with this PR and set the font override to Helvetica Neue. Confirm that changes to the stylesheet (e.g. font-weight: bold) are instantly applied to the page (when the file is saved if using web-ext run, or when the extension is reloaded from another tab). This is a proxy for Firefox autoupdate testing; see Fix static styles failing to update XKit-Rewritten#1619.

@marcustyphoon marcustyphoon marked this pull request as ready for review February 1, 2025 09:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant