- A fresh perspective, one letter at a time.
- Make a statement.And let the details speak.
+ The quick brown fox jumps over the lazy dog. 0123456789
+ Bold text for emphasis.Italic text for a different voice.
`
: nothing}
@@ -251,10 +261,10 @@ function specimen() {
function categoryControls() {
return html`
-
A font for every kind of text.
+
Serif & sans-serif
- Give serif and sans-serif text their own character. Leave either on
- the default to use your regular typeface.
+ Choose by the page’s original text category, or use your regular
+ typeface.
@@ -323,7 +333,7 @@ function categoryControls() {
const font = "${fontName(s.monospace.family)}";
-// Make code feel like home.
Replacement is off by default. Icons and exceptions stay protected, and
@@ -334,15 +344,13 @@ const font = "${fontName(s.monospace.family)}";
function typography() {
return html`${hero(
"Make yourself at font.",
- "Give the whole web a typeface that feels like you. Keep the structure. Change the character.",
+ "Choose the fonts you read on the web. Changes apply to open pages automatically.",
)}
-
Fontify the web
-
- Apply your fonts on every site, except your exceptions.
-
- ${["The everyday", "The emphasis", "The expression"][i]}
-
+
${["Regular", "Bold", "Italic"][i]}
- ${specimen()} ${categoryControls()}
-
+ ${specimen()}
+
@@ -418,14 +426,15 @@ function typography() {
uses the serif or sans-serif family selected above, with its selected
style weight. Bold italics use the italic profile.
-
`;
+
+ ${categoryControls()}`;
}
function popupView() {
const excluded =
activeSite && s.exceptions.sites.some((p) => matchesSite(activeSite, p));
return html`${hero(
- "Your web.\nYour type.",
- "A small change. A whole new feeling.",
+ "Your fonts, on this page.",
+ "Choose a typeface or pause Fontify below.",
)}
@@ -435,7 +444,7 @@ function popupView() {
${status?.count
? `${status.count} text elements restyled`
: status?.failures
- ? "A font could not load — see settings"
+ ? "A font could not load. Check settings."
: activeSite
? excluded
? "This site is an exception"
@@ -476,7 +485,7 @@ function popupView() {
Browser settings, stores and other protected pages cannot be restyled.
`}
@@ -987,9 +987,8 @@ async function clearCache() {
}
function preferences() {
return html`${hero(
- "Just how you like it.",
- "A quieter web, a brighter interface, or a fresh start. You’re in control.",
- "✳",
+ "Preferences",
+ "Set the theme, manage font downloads, and back up your settings.",
)}
Appearance & downloads
@@ -1039,7 +1038,7 @@ function preferences() {
-
Your settings, to go.
+
Backup & reset
Back up your settings, overrides, exceptions and custom font files.
Downloads from Google are excluded.
@@ -1078,7 +1077,7 @@ function preferences() {
-
Made for your eyes. By XDan.
+
About Fontify
Fontify 1.1.0 · MIT licensed · Built with matraic’s M3E components.
@@ -1155,7 +1154,8 @@ function pickerDialog() {
- ${catalogue.length.toLocaleString()} Google families. Yours included.
+ ${catalogue.length.toLocaleString()} Google Fonts families, plus your
+ uploaded fonts.
THIS WEBSITE
@@ -490,7 +490,8 @@ function popupView() {
() => api.runtime.openOptionsPage(),
"filled",
)}
-
`;
+
+ ${specimen()}`;
}
async function upload(event) {
const files = [...event.target.files];
From 1efd6d349205e278fac91550cdd4b6d20d99339f Mon Sep 17 00:00:00 2001
From: XDan <109234186+XDanfr@users.noreply.github.com>
Date: Mon, 12 Oct 2026 21:59:36 +0100
Subject: [PATCH 3/7] Apply fonts across Fontify and add expressive navigation
with reliable popup sizing
---
THIRD_PARTY_NOTICES.md | 2 +
anti-slop/delivery-2026-10-12.md | 27 ++-
public/symbols/LICENSE | 202 ++++++++++++++++++++++
public/symbols/block-0.svg | 1 +
public/symbols/block-1.svg | 1 +
public/symbols/collections_bookmark-0.svg | 1 +
public/symbols/collections_bookmark-1.svg | 1 +
public/symbols/settings-0.svg | 1 +
public/symbols/settings-1.svg | 1 +
public/symbols/text_fields-0.svg | 1 +
public/symbols/text_fields-1.svg | 1 +
public/symbols/tune-0.svg | 1 +
public/symbols/tune-1.svg | 1 +
public/ui.css | 165 ++++++++++++++----
src/ui.js | 72 +++++++-
tests/browser.mjs | 140 ++++++++++++++-
16 files changed, 572 insertions(+), 46 deletions(-)
create mode 100644 public/symbols/LICENSE
create mode 100644 public/symbols/block-0.svg
create mode 100644 public/symbols/block-1.svg
create mode 100644 public/symbols/collections_bookmark-0.svg
create mode 100644 public/symbols/collections_bookmark-1.svg
create mode 100644 public/symbols/settings-0.svg
create mode 100644 public/symbols/settings-1.svg
create mode 100644 public/symbols/text_fields-0.svg
create mode 100644 public/symbols/text_fields-1.svg
create mode 100644 public/symbols/tune-0.svg
create mode 100644 public/symbols/tune-1.svg
diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index 0b35ada..a18c264 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -5,3 +5,5 @@ Fontify is MIT licensed. It uses @m3e/web (MIT, copyright 2025–2026 matraic),
The Google Fonts catalogue contains family names and metadata retrieved from Google's public metadata endpoint. Individual font files retain their own licences; selected Google fonts are downloaded at runtime, not redistributed in this repository. Outfit is bundled for the interface under SIL Open Font License 1.1; see public/fonts/OFL.txt.
Custom fonts are supplied by the user and stored only on their device. Users should have permission to use their uploaded fonts.
+
+Sidebar symbols are Google's Material Symbols Rounded, weight 700, in outlined and filled variants, from https://github.com/google/material-design-icons. They are bundled under Apache License 2.0; see public/symbols/LICENSE.
diff --git a/anti-slop/delivery-2026-10-12.md b/anti-slop/delivery-2026-10-12.md
index 96c56c0..460e482 100644
--- a/anti-slop/delivery-2026-10-12.md
+++ b/anti-slop/delivery-2026-10-12.md
@@ -1,10 +1,15 @@
# Fontify Anti Slop delivery
-Applied the Anti Slop plugin in during mode. Direction comes from Fontify's existing Outfit typography, lavender M3E tonal palette, expressive selected shapes, and browser-extension workflow. ENERGY 2 / RHYTHM 2 / MOTION 1.
+Applied the Anti Slop plugin in during mode. Direction comes from Fontify's existing lavender M3E tonal palette, expressive selected shapes, and browser-extension workflow, plus the owner's request for interface-wide font application, a wider popup, a larger sidebar, thick rounded icons, and micro-interaction morphs. Outfit remains the loading/error fallback. ENERGY 2 / RHYTHM 2 / MOTION 2.
## Changes and reasons
-- Retain Outfit, the existing icon, and M3E components: these are Fontify's established identity.
+- Retain Outfit as the fallback, the existing app icon, and M3E components: these are Fontify's established identity.
+- Apply the selected sans-serif/default profile across the interface, including native inputs and M3E shadow-root labels; apply the bold and italic profiles to their text styles: the extension itself now demonstrates the saved choices. Fonts apply after loading, with Outfit as a fallback on failure.
+- Increase the desktop sidebar from 195px to 260px, with 76px navigation rows and 30px symbols: the controls are easier to read and target.
+- Bundle Google's Material Symbols Rounded at weight 700 in outlined/filled pairs: typography, library, exclusion, tuning, and settings symbols describe each section, keep their shape when the interface font changes, and meet the owner's explicit icon direction.
+- Morph navigation/icon corners and crossfade outlined/filled selection states; soften button/filter/icon press shapes and animate the picker entrance: short motion communicates actions and hierarchy. M3E expressive motion is enabled; reduced-motion preferences remove the added motion. Background colours switch immediately to avoid low-contrast transitional pairings.
+- Set native toolbar popup width explicitly to 520px, while ordinary-tab previews remain responsive: viewport-relative width caused the native Chrome popup to shrink to 25px in a reproduced test. The actual toolbar popup now measures 520px, with quick settings visible before the specimen.
- Retain lavender as the primary accent: it marks selected controls and the working font specimen.
- Remove repeated slogan eyebrows and decorative hero blobs: settings titles should identify the task, and the specimen should demonstrate the fonts.
- Keep the typography page's existing pun: it gives Fontify a recognisable voice without obscuring the functional navigation labels.
@@ -23,7 +28,7 @@ Applied the Anti Slop plugin in during mode. Direction comes from Fontify's exis
- Add a persistent startup error and retry action: a failed catalogue load no longer leaves a loading screen with a disappearing toast.
- Ignore outdated asynchronous preview results and clear recovered errors: a slow previous selection cannot overwrite a later specimen.
-No new visual assets, navigation destinations, dependencies, or settings-schema changes.
+No new logo, navigation destinations, dependencies, or settings-schema changes. Requested sidebar symbols are bundled with Google's Apache-2.0 licence and attribution.
## Validation
@@ -31,7 +36,10 @@ No new visual assets, navigation destinations, dependencies, or settings-schema
- `npm run build`: Chrome and Firefox builds passed.
- `npm run lint:firefox`: 0 errors, 0 notices, 1 existing `UNSAFE_VAR_ASSIGNMENT` warning from Lit's bundled template parser, already documented in README.md.
- `npm run test:browser`: passed using Playwright 1.55.1 and Chromium 140 with the actual unpacked extension. Google font responses use a deterministic bundled-font fixture, so these tests validate loading and application behaviour rather than the visual appearance of each remote family.
-- Every settings section checked in light and dark at 1240, 768, 390, and 320px. Document overflow, rendered text contrast using the WCAG luminance formula, and control target height assertions passed. The popup also passed light/dark checks at 320px.
+- Every settings section checked in light and dark at 1240, 768, 390, and 320px. Document overflow, rendered text contrast using the WCAG luminance formula, and control target height assertions passed. The popup tab preview also passed light/dark checks at 320px and was captured at 520px.
+- Actual native Chromium toolbar popup opened through `chrome.action.openPopup`; its DevTools target measured 520px body/viewport width, no horizontal overflow, and All settings within the visible height. This validates native sizing separately from opening popup.html in a tab.
+- Selecting independent Bungee/Lora/Roboto regular/bold/italic profiles changes computed interface font families, including inputs, section headings, and M3E shadow-root labels. This checks propagation while keeping deterministic font data in the integration suite.
+- All ten local outlined/filled SVG variants fetch successfully. Reduced-motion emulation reports no picker animation and zero navigation-icon transition duration.
- Screenshots recorded for all 40 settings/theme/width combinations and the popup. Desktop typography, narrow typography/preferences, and popup captures were visually inspected.
- Keyboard tests verify initial editor focus, nested picker/editor Escape handling, restored trigger focus, and focus remaining in the popup dialog while tabbing. Source review confirms native focus outlines and M3E strong-focus remain enabled.
- Firefox interactive behaviour and physical mobile keyboards were not tested. Firefox validation is build/lint only. The builds remain unsigned development packages.
@@ -53,6 +61,7 @@ No new visual assets, navigation destinations, dependencies, or settings-schema
- Export produces a JSON backup; Import restores it after confirmation; Reset clears settings while retaining uploaded fonts.
- Popup Pause here and Resume here update the site's exception. All settings opens the options page.
- Failed catalogue startup shows a persistent error; Try again recovers the interface.
+- Interface-wide fonts change with the profiles; real native toolbar sizing is 520px; icon states load locally; added animations are disabled with reduced motion.
- Runtime page-error collection is empty. Existing external Source & feedback and M3E links retain their real destinations and explicit new-tab arrows; no new links were introduced.
## Delivery gate
@@ -65,7 +74,7 @@ Each PASS below is limited to the Chromium runtime, source review, and build/lin
- R-03 PASS: overflow and 44px target assertions pass at the four recorded widths in both themes.
- R-17 PASS: catalogue totals, result counts, and file sizes derive from real stored data.
- R-18 PASS: no testimonial or avatar content exists in the interface.
-- R-23 PASS: existing assets and navigation reused; no new visual asset created.
+- R-23 PASS: existing app assets and navigation reused; owner's requested rounded symbols bundled with their licence.
- R-24 PASS: all five navigation controls open existing settings views.
- R-25 PASS: rendered text passes computed WCAG AA contrast in the recorded views/themes and picker filters.
- R-26 PASS: shared control actions exercised in the interaction record; no placeholder controls added.
@@ -82,7 +91,7 @@ Each PASS below is limited to the Chromium runtime, source review, and build/lin
### Purpose gate
- R-01 PASS: existing lavender tonal tokens retained for state and specimen hierarchy; no gradients/glows added.
-- R-04 PASS: Aa/Ff denote typography; exception, override, settings, theme, and favourite marks denote real actions.
+- R-04 PASS: Material Symbols Rounded text_fields, collections_bookmark, block, tune, and settings identify their sections; theme and favourite marks denote real actions.
- R-06 PASS: Outfit retained for established identity; labels now use normal case without wide tracking.
- R-07 PASS: no background grid or ornamental texture.
- R-08 PASS: existing external/new-tab arrows retained for destination behaviour; no new decorative arrows.
@@ -91,12 +100,12 @@ Each PASS below is limited to the Chromium runtime, source review, and build/lin
- R-12 PASS: shadows limited to the modal layer and transient status message.
- R-13 PASS: no glow treatment.
- R-14 PASS: equivalent profile cards remain comparable; category controls, specimen, settings rows, and library lists use distinct layouts for their tasks.
-- R-19 PASS: no new animation; existing state transitions and reduced-motion handling retained.
+- R-19 PASS: short selection/press morphs and picker entrance communicate actual interaction; no looping animation; reduced-motion assertions pass.
- R-22 PASS: no illustrations created.
### Liveliness
-- Dials PASS: ENERGY 2 / RHYTHM 2 / MOTION 1 declared and maintained.
+- Dials PASS: ENERGY 2 / RHYTHM 2 / MOTION 2 declared and maintained.
- Focal point PASS: the working specimen anchors typography; other screens use task titles and the relevant action/list.
- Whitespace PASS: settings groups, profile controls, specimen, and explanation use distinct spacing levels.
- Accent PASS: lavender identifies selection, primary actions, and the specimen.
@@ -114,7 +123,7 @@ Each PASS below is limited to the Chromium runtime, source review, and build/lin
- R-11 PASS: profile cards, grouping panels, controls, and asymmetric selected shapes have distinct radii.
- R-15 PASS: library action now says Choose regular font; other actions name their behaviour.
- R-16 PASS: vague promotional UI copy replaced by specific setting descriptions.
-- R-20 PASS: existing Fontify icon, Outfit, lavender M3E palette, and typography specimen retain the product identity.
+- R-20 PASS: existing Fontify icon, Outfit fallback, lavender M3E palette, and typography specimen retain identity while the interface demonstrates the user's font choices.
- R-21 PASS: existing light/dark/system controls remain functional; system toggle corrected.
- R-29 PASS: existing coherent M3E tonal palette retained without additional core colours.
- R-30 PASS: no unrelated product's visual design copied.
diff --git a/public/symbols/LICENSE b/public/symbols/LICENSE
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/public/symbols/LICENSE
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/public/symbols/block-0.svg b/public/symbols/block-0.svg
new file mode 100644
index 0000000..a5e0afb
--- /dev/null
+++ b/public/symbols/block-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/block-1.svg b/public/symbols/block-1.svg
new file mode 100644
index 0000000..a5e0afb
--- /dev/null
+++ b/public/symbols/block-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/collections_bookmark-0.svg b/public/symbols/collections_bookmark-0.svg
new file mode 100644
index 0000000..d31dcaa
--- /dev/null
+++ b/public/symbols/collections_bookmark-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/collections_bookmark-1.svg b/public/symbols/collections_bookmark-1.svg
new file mode 100644
index 0000000..b3d5979
--- /dev/null
+++ b/public/symbols/collections_bookmark-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/settings-0.svg b/public/symbols/settings-0.svg
new file mode 100644
index 0000000..5f611c5
--- /dev/null
+++ b/public/symbols/settings-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/settings-1.svg b/public/symbols/settings-1.svg
new file mode 100644
index 0000000..0a59084
--- /dev/null
+++ b/public/symbols/settings-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/text_fields-0.svg b/public/symbols/text_fields-0.svg
new file mode 100644
index 0000000..5cd2463
--- /dev/null
+++ b/public/symbols/text_fields-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/text_fields-1.svg b/public/symbols/text_fields-1.svg
new file mode 100644
index 0000000..5cd2463
--- /dev/null
+++ b/public/symbols/text_fields-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/tune-0.svg b/public/symbols/tune-0.svg
new file mode 100644
index 0000000..4b10702
--- /dev/null
+++ b/public/symbols/tune-0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/symbols/tune-1.svg b/public/symbols/tune-1.svg
new file mode 100644
index 0000000..4b10702
--- /dev/null
+++ b/public/symbols/tune-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/ui.css b/public/ui.css
index 8f2ca10..f9ce77e 100644
--- a/public/ui.css
+++ b/public/ui.css
@@ -5,8 +5,9 @@
font-display: swap;
}
:root {
- font-family: Outfit, system-ui, sans-serif;
- font-synthesis: none;
+ font-family: var(--fontify-regular-family, Outfit, system-ui, sans-serif);
+ font-weight: var(--fontify-regular-weight, 400);
+ font-synthesis: weight style;
color-scheme: dark;
background: #141217;
color: #ece6f0;
@@ -26,7 +27,23 @@ textarea {
button {
cursor: pointer;
}
+h1,
+h2,
+h3,
+strong,
+b {
+ font-family: var(--fontify-bold-family, inherit);
+ font-weight: var(--fontify-bold-weight, 700);
+}
+em,
+i {
+ font-family: var(--fontify-italic-family, inherit);
+ font-weight: var(--fontify-italic-weight, 400);
+}
m3e-theme {
+ font-family: var(--fontify-regular-family, Outfit, system-ui, sans-serif);
+ font-weight: var(--fontify-regular-weight, 400);
+ --m3e-button-label-text-font-weight: var(--fontify-regular-weight, 400);
--m3e-button-container-height: 44px;
--m3e-icon-button-container-height: 44px;
--m3e-icon-button-container-width: 44px;
@@ -61,18 +78,18 @@ p {
}
h1 {
font-size: clamp(38px, 5vw, 58px);
- font-weight: 650;
+ font-weight: var(--fontify-bold-weight, 700);
letter-spacing: -2px;
line-height: 1.08;
}
h2 {
font-size: 24px;
letter-spacing: -0.6px;
- font-weight: 600;
+ font-weight: var(--fontify-bold-weight, 700);
}
h3 {
font-size: 19px;
- font-weight: 550;
+ font-weight: var(--fontify-bold-weight, 700);
}
.muted {
color: var(--md-sys-color-on-surface-variant);
@@ -84,7 +101,7 @@ h3 {
color: var(--md-sys-color-on-surface-variant);
}
.shell {
- max-width: 1240px;
+ max-width: 1360px;
margin: auto;
padding: 30px 40px;
}
@@ -121,8 +138,8 @@ h3 {
}
.layout {
display: grid;
- grid-template-columns: 195px 1fr;
- gap: 38px;
+ grid-template-columns: 260px minmax(0, 1fr);
+ gap: 40px;
}
.layout > *,
.two-col > *,
@@ -142,32 +159,79 @@ m3e-button {
.nav {
display: flex;
flex-direction: column;
- gap: 7px;
+ gap: 10px;
}
.nav button {
- min-height: 44px;
+ min-height: 76px;
display: flex;
align-items: center;
- gap: 13px;
- padding: 16px 18px;
+ gap: 14px;
+ padding: 12px 16px;
+ font-size: 17px;
text-align: left;
background: transparent;
border: 0;
color: var(--md-sys-color-on-surface-variant);
border-radius: 24px;
transition:
- background 150ms,
- border-radius 150ms;
+ border-radius 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
+ translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav button[aria-current="page"] {
background: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
- font-weight: 600;
- border-radius: 28px 12px 28px 28px;
+ font-family: var(--fontify-bold-family, inherit);
+ font-weight: var(--fontify-bold-weight, 700);
+ border-radius: 32px 16px 32px 32px;
}
-.nav button:hover {
+.nav button:hover:not([aria-current="page"]) {
background: var(--md-sys-color-surface-container-high);
}
+.nav button:active {
+ border-radius: 18px;
+}
+.nav-icon {
+ width: 48px;
+ height: 48px;
+ display: grid;
+ place-items: center;
+ flex: none;
+ border-radius: 16px;
+ transition:
+ border-radius 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
+ transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.symbol {
+ grid-area: 1 / 1;
+ display: block;
+ width: 30px;
+ height: 30px;
+ background: currentColor;
+ mask: var(--symbol) center / contain no-repeat;
+ transition: opacity 180ms;
+}
+.symbol-filled {
+ opacity: 0;
+}
+.nav button[aria-current="page"] .nav-icon {
+ border-radius: 24px;
+ background: var(--md-sys-color-primary-container);
+ color: var(--md-sys-color-on-primary-container);
+}
+.nav button[aria-current="page"] .symbol-filled {
+ opacity: 1;
+}
+.nav button[aria-current="page"] .symbol-outline {
+ opacity: 0;
+}
+.nav button:hover .nav-icon {
+ transform: scale(1.08);
+ border-radius: 24px;
+}
+.nav button:active .nav-icon {
+ transform: scale(0.94);
+ border-radius: 14px;
+}
.nav-note {
padding: 22px 16px;
margin-top: 30px;
@@ -223,6 +287,7 @@ m3e-button {
color: var(--md-sys-color-on-secondary-container);
text-align: left;
gap: 8px;
+ transition: border-radius 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.font-choice span {
overflow: hidden;
@@ -230,7 +295,12 @@ m3e-button {
white-space: nowrap;
}
.font-choice:hover {
- filter: brightness(1.07);
+ border-radius: 24px;
+ background: var(--md-sys-color-primary-container);
+ color: var(--md-sys-color-on-primary-container);
+}
+.font-choice:active {
+ border-radius: 12px;
}
label {
display: block;
@@ -299,9 +369,7 @@ textarea {
.preview small {
display: block;
margin-top: 20px;
- font:
- 12px Outfit,
- sans-serif;
+ font-size: 12px;
}
.settings-row {
display: flex;
@@ -460,6 +528,7 @@ textarea {
flex-direction: column;
overflow: hidden;
box-shadow: 0 12px 50px #0003;
+ animation: picker-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.picker-head {
padding: 24px 24px 16px;
@@ -482,6 +551,10 @@ textarea {
padding: 8px 13px;
font-size: 12px;
min-height: 44px;
+ transition: border-radius 220ms;
+}
+.chip:active {
+ border-radius: 12px;
}
.chip[aria-pressed="true"] {
background: var(--md-sys-color-secondary-container);
@@ -534,6 +607,13 @@ textarea {
width: 44px;
height: 44px;
font-size: 19px;
+ transition: border-radius 220ms;
+}
+.icon-btn:hover {
+ border-radius: 15px;
+}
+.icon-btn:active {
+ border-radius: 10px;
}
.icon-btn.active {
background: var(--md-sys-color-primary-container);
@@ -549,14 +629,17 @@ textarea {
gap: 12px;
}
.popup {
- width: min(390px, 100vw);
+ width: min(520px, 100vw);
min-height: 540px;
}
+.toolbar-popup {
+ width: 520px;
+}
.popup m3e-theme {
min-height: 540px;
}
.popup .shell {
- padding: 22px;
+ padding: 24px;
}
.popup .topbar {
margin-bottom: 22px;
@@ -565,14 +648,14 @@ textarea {
font-size: 26px;
}
.popup h1 {
- font-size: 39px;
- letter-spacing: -1.5px;
+ font-size: 30px;
+ letter-spacing: -0.8px;
}
.popup .hero {
- margin-bottom: 20px;
+ margin-bottom: 16px;
}
.popup .hero .muted {
- font-size: 13px;
+ font-size: 14px;
margin-top: 8px;
}
.popup .panel {
@@ -580,7 +663,7 @@ textarea {
border-radius: 22px;
}
.popup .preview {
- padding: 22px;
+ padding: 20px;
margin: 15px 0;
}
.popup .preview h2 {
@@ -590,6 +673,10 @@ textarea {
.popup .preview p {
font-size: 14px;
}
+.popup .preview strong,
+.popup .preview em {
+ margin-top: 8px;
+}
.popup .preview small {
margin-top: 12px;
}
@@ -668,6 +755,7 @@ textarea {
.nav button {
flex: none;
padding: 12px 16px;
+ min-height: 64px;
}
.nav-note {
display: none;
@@ -713,6 +801,15 @@ textarea {
padding: 12px 10px;
font-size: 13px;
}
+ .nav-icon {
+ width: 36px;
+ height: 36px;
+ border-radius: 14px;
+ }
+ .symbol {
+ width: 26px;
+ height: 26px;
+ }
.shell {
padding: 20px 16px;
}
@@ -771,7 +868,17 @@ textarea {
font-size: 29px;
}
.popup h1 {
- font-size: 32px;
+ font-size: 28px;
+ }
+}
+@keyframes picker-enter {
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
diff --git a/src/ui.js b/src/ui.js
index ab67fea..45e5e89 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -8,6 +8,10 @@ import { normalise, DEFAULTS, matchesSite, alias, fontKey } from "./model.js";
import { customList, importFont, fontDB, loadFace } from "./fonts.js";
const popup = document.body.dataset.page === "popup";
document.body.classList.toggle("popup", popup);
+document.body.classList.toggle(
+ "toolbar-popup",
+ popup && api.extension.getViews({ type: "popup" }).includes(window),
+);
const app = document.getElementById("app");
let s = normalise(),
catalogue = [],
@@ -37,12 +41,24 @@ const loaded = new Set();
let pickerTrigger;
let editTrigger;
const nav = [
- ["typography", "Aa", "Typography"],
- ["library", "Ff", "Font library"],
- ["exceptions", "⊘", "Exceptions"],
- ["rules", "↳", "Overrides"],
- ["preferences", "⚙", "Preferences"],
+ ["typography", "text_fields", "Typography"],
+ ["library", "collections_bookmark", "Font library"],
+ ["exceptions", "block", "Exceptions"],
+ ["rules", "tune", "Overrides"],
+ ["preferences", "settings", "Preferences"],
];
+function navIcon(name) {
+ return html`
+
+
+ `;
+}
function tell(message) {
toast = message;
clearTimeout(toastTimer);
@@ -1282,10 +1298,51 @@ async function previewResult(font, button) {
}
}
let previewRun = 0;
+async function applyInterfaceFonts(run) {
+ const family = s.sansSerif.family || s.regular.family;
+ const profiles = [
+ [
+ "regular",
+ family,
+ s.sansSerif.family ? s.sansSerif.weight : s.regular.weight,
+ "normal",
+ ],
+ ["bold", s.bold.family || family, s.bold.weight, "normal"],
+ ["italic", s.italic.family || family, s.italic.weight, "italic"],
+ ];
+ const results = await Promise.allSettled(
+ profiles.map(async ([, family, weight, style]) => {
+ const key = fontKey(family, weight, style);
+ if (!loaded.has(key)) {
+ await loadFace({ family, weight, style });
+ loaded.add(key);
+ }
+ }),
+ );
+ if (run !== previewRun) return "";
+ profiles.forEach(([slot, family, weight], index) => {
+ const available = results[index].status === "fulfilled";
+ document.documentElement.style.setProperty(
+ `--fontify-${slot}-family`,
+ available
+ ? `"${alias(family)}", Outfit, system-ui, sans-serif`
+ : "Outfit, system-ui, sans-serif",
+ );
+ document.documentElement.style.setProperty(
+ `--fontify-${slot}-weight`,
+ String(weight),
+ );
+ });
+ return (
+ results.find((result) => result.status === "rejected")?.reason?.message ||
+ ""
+ );
+}
async function preview() {
if (!ready) return;
const run = ++previewRun;
- let errorMessage = "";
+ let errorMessage = await applyInterfaceFonts(run);
+ if (run !== previewRun) return;
for (const slot of [
"regular",
"bold",
@@ -1343,6 +1400,7 @@ function draw() {
html`
@@ -1371,7 +1429,7 @@ function draw() {
void preview();
}}
>
- ${icon}${label}
+ ${navIcon(icon)}${label}
`,
)}
diff --git a/tests/browser.mjs b/tests/browser.mjs
index 0ce4321..1d9aa8e 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -445,7 +445,7 @@ try {
);
const popup = await context.newPage();
popup.on("pageerror", (e) => errors.push(e.message));
- await popup.setViewportSize({ width: 390, height: 660 });
+ await popup.setViewportSize({ width: 520, height: 660 });
await popup.goto(`chrome-extension://${id}/popup.html`);
await popup.getByRole("button", { name: "All settings ↗" }).waitFor();
await popup.screenshot({
@@ -741,6 +741,144 @@ try {
await failedOptions
.getByRole("heading", { name: "Make yourself at font." })
.waitFor();
+ await options
+ .getByRole("button", { name: "Typography", exact: true })
+ .click();
+ for (const [slot, family] of [
+ ["regular", "Bungee"],
+ ["bold", "Lora"],
+ ["italic", "Roboto"],
+ ]) {
+ await options
+ .getByRole("button", { name: `Choose ${slot} font`, exact: true })
+ .click();
+ await options.getByRole("searchbox", { name: "Search fonts" }).fill(family);
+ await options
+ .locator(".font-result .choose")
+ .filter({
+ has: options.locator("b", { hasText: new RegExp(`^${family}$`) }),
+ })
+ .click();
+ }
+ await options.waitForFunction(() => {
+ const family = (selector) =>
+ getComputedStyle(document.querySelector(selector)).fontFamily;
+ return (
+ family(".hero .muted").includes("Fontify_42_75_6e_67_65_65") &&
+ family("h1").includes("Fontify_4c_6f_72_61") &&
+ family("#sample-italic").includes("Fontify_52_6f_62_6f_74_6f") &&
+ family('input[type="range"]').includes("Fontify_42_75_6e_67_65_65")
+ );
+ });
+ await options
+ .getByRole("button", { name: "Font library", exact: true })
+ .click();
+ await options.waitForFunction(() =>
+ getComputedStyle(
+ document.querySelector("m3e-button").shadowRoot.querySelector(".label"),
+ ).fontFamily.includes("Fontify_42_75_6e_67_65_65"),
+ );
+ const symbols = await options
+ .locator(".nav-icon .symbol")
+ .evaluateAll(async (elements) =>
+ Promise.all(
+ elements.map(async (el) => {
+ const url =
+ getComputedStyle(el).maskImage.match(/url\("?([^"\)]+)/)[1];
+ const response = await fetch(url);
+ return response.ok && (await response.text()).startsWith(" getComputedStyle(el).animationName),
+ "none",
+ );
+ await options.keyboard.press("Escape");
+ assert.equal(
+ await options
+ .locator(".nav-icon")
+ .first()
+ .evaluate((el) => getComputedStyle(el).transitionDuration),
+ "0s",
+ );
+ // Toolbar sizing is different from opening popup.html in an ordinary tab.
+ await worker.evaluate(() => chrome.action.openPopup());
+ const browserSession = await context.browser().newBrowserCDPSession();
+ const { targetInfos } = await browserSession.send("Target.getTargets");
+ const nativeTarget = targetInfos.find(
+ (target) =>
+ !target.attached && target.url === `chrome-extension://${id}/popup.html`,
+ );
+ assert(nativeTarget, "Native toolbar popup must open");
+ const { sessionId } = await browserSession.send("Target.attachToTarget", {
+ targetId: nativeTarget.targetId,
+ flatten: false,
+ });
+ const resultPromise = new Promise((resolve, reject) => {
+ const timer = setTimeout(
+ () => reject(new Error("Native popup metrics timed out")),
+ 10000,
+ );
+ const handler = (event) => {
+ const message = JSON.parse(event.message);
+ if (event.sessionId === sessionId && message.id === 1) {
+ clearTimeout(timer);
+ browserSession.off("Target.receivedMessageFromTarget", handler);
+ resolve(message);
+ }
+ };
+ browserSession.on("Target.receivedMessageFromTarget", handler);
+ });
+ await browserSession.send("Target.sendMessageToTarget", {
+ sessionId,
+ message: JSON.stringify({
+ id: 1,
+ method: "Runtime.evaluate",
+ params: {
+ returnByValue: true,
+ awaitPromise: true,
+ expression: `new Promise((resolve) => {
+ const check = () => {
+ const settings = [...document.querySelectorAll('m3e-button')].find(el => el.textContent.includes('All settings'));
+ if (!settings) return setTimeout(check, 50);
+ resolve({ width: innerWidth, body: document.body.getBoundingClientRect().width,
+ height: innerHeight, toolbar: document.body.classList.contains('toolbar-popup'),
+ settingsBottom: settings.getBoundingClientRect().bottom,
+ overflow: document.documentElement.scrollWidth > innerWidth });
+ }; check();
+ })`,
+ },
+ }),
+ });
+ const native = (await resultPromise).result.result.value;
+ assert.equal(native.width, 520);
+ assert.equal(native.body, 520);
+ assert(native.toolbar && !native.overflow);
+ assert(
+ native.settingsBottom <= native.height,
+ "Quick settings must remain visible in the native popup",
+ );
+ await browserSession.send("Target.closeTarget", {
+ targetId: nativeTarget.targetId,
+ });
+ await browserSession.detach();
assert.deepEqual(errors, []);
console.log(
"PASS: extension behaviour; uploads and restoration; overrides, exceptions and pause; backups and reset; picker search, filters and favourites; dialog keyboard focus; system theme toggle; startup recovery; light/dark contrast, target sizes and overflow at 1240/768/390/320px.",
From 072273470ac7ee0f34a08a855036fe172c1cbc3a Mon Sep 17 00:00:00 2001
From: XDan <109234186+XDanfr@users.noreply.github.com>
Date: Mon, 12 Oct 2026 22:36:23 +0100
Subject: [PATCH 4/7] Prepare Fontify 1.1.1 release notes, review source and
stable CI screenshots
---
.github/workflows/build.yml | 16 +++++++++++++++-
README.md | 15 ++++++++-------
docs/RELEASING.md | 12 ++++++++----
docs/releases/v1.1.1.md | 30 ++++++++++++++++++++++++++++++
package-lock.json | 4 ++--
package.json | 2 +-
scripts/build.mjs | 5 ++++-
src/ui.js | 3 ++-
tests/browser.mjs | 4 +++-
9 files changed, 73 insertions(+), 18 deletions(-)
create mode 100644 docs/releases/v1.1.1.md
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 55e7d07..90904dd 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -17,6 +17,12 @@ jobs:
node-version: "22"
cache: npm
- run: npm ci
+ - name: Validate release tag and notes
+ if: startsWith(github.ref, 'refs/tags/v')
+ env:
+ RELEASE_TAG: ${{ github.ref_name }}
+ run: |
+ node --input-type=module -e 'import { readFileSync, accessSync } from "node:fs"; const { version } = JSON.parse(readFileSync("package.json")); if (process.env.RELEASE_TAG !== `v${version}`) throw new Error("Tag does not match package version"); accessSync(`docs/releases/${process.env.RELEASE_TAG}.md`);'
- run: npm test
- run: npm run build
- run: npm run lint:firefox
@@ -34,6 +40,11 @@ jobs:
echo "CHROME_KEY_PATH=$RUNNER_TEMP/fontify.pem" >> "$GITHUB_ENV"
fi
- run: npm run package
+ - name: Package human-readable review source
+ if: startsWith(github.ref, 'refs/tags/v')
+ run: |
+ VERSION=$(node -p "require('./package.json').version")
+ git archive --format=zip --output="artifacts/fontify-$VERSION-source.zip" HEAD src public scripts data tests docs package.json package-lock.json README.md LICENSE THIRD_PARTY_NOTICES.md
- name: Sign Firefox XPI for unlisted distribution
if: startsWith(github.ref, 'refs/tags/v')
env:
@@ -42,7 +53,8 @@ jobs:
shell: bash
run: |
if [ -n "$AMO_JWT_ISSUER" ] && [ -n "$AMO_JWT_SECRET" ]; then
- npx web-ext sign --source-dir dist/firefox --artifacts-dir artifacts/signed --channel unlisted --api-key "$AMO_JWT_ISSUER" --api-secret "$AMO_JWT_SECRET"
+ VERSION=$(node -p "require('./package.json').version")
+ npx web-ext sign --source-dir dist/firefox --artifacts-dir artifacts/signed --channel unlisted --upload-source-code "artifacts/fontify-$VERSION-source.zip" --api-key "$AMO_JWT_ISSUER" --api-secret "$AMO_JWT_SECRET"
else
echo 'AMO credentials are not configured. The unsigned XPI is available for development.'
fi
@@ -68,6 +80,7 @@ jobs:
permissions:
contents: write
steps:
+ - uses: actions/checkout@v4
- uses: actions/download-artifact@v4
with:
name: fontify-packages
@@ -75,6 +88,7 @@ jobs:
- uses: softprops/action-gh-release@v2
with:
generate_release_notes: true
+ body_path: docs/releases/${{ github.ref_name }}.md
files: |
packages/*.zip
packages/*.crx
diff --git a/README.md b/README.md
index 505ce4a..4e8c882 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Download the latest **fontify-packages** artifact from [Actions](https://github.
### Chrome / Chromium
-1. Extract `fontify-1.1.0-chrome.zip`.
+1. Extract `fontify-1.1.1-chrome.zip`.
2. Open `chrome://extensions` and enable **Developer mode**.
3. Choose **Load unpacked** and select the folder containing `manifest.json`.
4. Refresh any already-open websites once after installation. Later settings changes apply live.
@@ -42,7 +42,7 @@ A CRX3 package is also built. A self-signed CRX is useful for compatible develop
### Firefox
-1. Extract `fontify-1.1.0-firefox.zip`.
+1. Extract `fontify-1.1.1-firefox.zip`.
2. Open `about:debugging#/runtime/this-firefox`.
3. Choose **Load Temporary Add-on** and select `manifest.json`.
4. Refresh already-open websites once after installation.
@@ -69,10 +69,11 @@ Output:
| -------------------------------------- | ------------------------------------------------------ |
| `dist/chrome/` | Unpacked Chromium MV3 build; service worker background |
| `dist/firefox/` | Firefox MV3 build; event-page background |
-| `artifacts/fontify-1.1.0-chrome.zip` | Chrome development/store upload package |
-| `artifacts/fontify-1.1.0-firefox.zip` | Firefox source package |
-| `artifacts/fontify-1.1.0.crx` | Self-signed CRX3 |
-| `artifacts/fontify-1.1.0-unsigned.xpi` | Unsigned Firefox development package |
+| `artifacts/fontify-1.1.1-chrome.zip` | Chrome development/store upload package |
+| `artifacts/fontify-1.1.1-firefox.zip` | Firefox extension package |
+| `artifacts/fontify-1.1.1.crx` | Self-signed CRX3 |
+| `artifacts/fontify-1.1.1-unsigned.xpi` | Unsigned Firefox development package |
+| `artifacts/fontify-1.1.1-source.zip` | Human-readable source for release review |
`npm run catalogue:update` refreshes the Google Fonts metadata snapshot. Catalogue access is never needed during an ordinary build. Fonts themselves download on demand through the background extension context and are cached in IndexedDB. All executable code and UI assets are bundled locally.
@@ -82,7 +83,7 @@ Mozilla's linter currently reports one `UNSAFE_VAR_ASSIGNMENT` warning in the bu
## Automated builds and signing
-Every push to `main` and every pull request builds, tests, validates, packages, and uploads artifacts. Tags matching `v*` also create GitHub Releases.
+Every push to `main` and every pull request builds, tests, validates, packages, and uploads artifacts. Tags matching `v*` also sign an unlisted Firefox XPI when credentials are configured and publish GitHub release assets. Unlisted signing does not publish a Mozilla Add-ons store listing. See the [1.1.1 release notes](docs/releases/v1.1.1.md).
Optional repository **Actions secrets**:
diff --git a/docs/RELEASING.md b/docs/RELEASING.md
index c75697d..dac7b18 100644
--- a/docs/RELEASING.md
+++ b/docs/RELEASING.md
@@ -18,18 +18,22 @@ The key signs a CRX3; it does not grant a Chrome Web Store signature. For public
1. Create Mozilla Add-ons API credentials in your AMO developer account.
2. Add the key as `AMO_JWT_ISSUER` and the secret as `AMO_JWT_SECRET` in repository Actions secrets.
3. The Firefox manifest uses the extension ID `fontify@xdan.cc`. The domain migration changes the add-on identity: sign and distribute it as a new add-on, since it cannot update installations using the previous ID. Keep the new ID stable for subsequent releases.
-4. On a version tag, the workflow runs `web-ext sign --channel unlisted`. A signed XPI is included in the artifact and Release.
+4. On a version tag, the workflow runs `web-ext sign --channel unlisted` with a human-readable review-source ZIP. A signed XPI is included in the artifact and Release. This signs for distribution outside the Mozilla Add-ons store and does not create a public store listing.
Without credentials, the workflow succeeds with an explicitly named **unsigned** XPI. A signing failure with configured credentials fails the build so an unsigned package is never mistaken for a signed one. Mozilla may require source review; provide this repository and its locked dependency/build instructions. Automated unlisted signing does not create a public AMO listing.
## Cut a version
1. Update `package.json` and `package-lock.json` using `npm version --no-git-tag-version`.
-2. Update visible version text in `src/ui.js` and any versioned examples in the README.
+2. Update versioned examples in the README and add `docs/releases/v.md`. The interface version is injected automatically from package.json during the build.
3. Run unit tests, both builds, Firefox lint and Chromium integration tests.
4. Commit the version update.
-5. Tag the corresponding commit, for example `git tag v1.1.0`, and push that tag.
-6. Verify that the build and Release contain the expected version and signing results.
+5. Merge the verified changes to main, then tag that commit, for example `git tag v1.1.1`, and push the tag. Creating a GitHub release with a new tag on that commit also triggers the tag workflow.
+6. Verify that the build and Release contain the expected version and signing results. The workflow rejects a tag that differs from the package version or has no matching release-notes file.
+
+Tags trigger signing and release uploads automatically; a normal workflow_dispatch on main only produces development packages. To retry a tagged signing run, rerun that run after inspecting its failure rather than dispatching the workflow on main. Never publish a listed Mozilla version as part of this workflow.
+
+The review-source archive uses an explicit list of application directories and metadata files. Local notes, unrelated root files, dependency installations, artifacts, and private keys are excluded.
Do not reuse a Firefox version after it has been submitted to AMO. Do not expose signing secrets to forked pull requests; the workflow does not read credentials in PR runs.
diff --git a/docs/releases/v1.1.1.md b/docs/releases/v1.1.1.md
new file mode 100644
index 0000000..6b3ba29
--- /dev/null
+++ b/docs/releases/v1.1.1.md
@@ -0,0 +1,30 @@
+# Fontify 1.1.1
+
+Fontify now shows your font choices throughout its own interface, with a wider popup and clearer Material 3 Expressive navigation.
+
+## Changes
+
+- Apply the selected default or sans-serif font throughout settings and the popup. Bold and italic text use their saved profiles; fonts that cannot load fall back to Outfit.
+- Widen the native toolbar popup to 520px and keep site pause/resume and All settings above the preview. Fix the viewport-relative sizing that could shrink the popup.
+- Enlarge the sidebar and use thick Material Symbols Rounded with outlined and filled selection states.
+- Add short selection and press shape changes, icon transitions, and a picker entrance. Respect reduced-motion preferences.
+- Replace vague settings copy with clear action names, and use a pangram, numerals, bold, and italic text in the preview. Profile-card glyphs now show their selected fonts.
+- Improve narrow layouts, touch targets, and text contrast in light and dark themes.
+- Keep keyboard focus inside dialogs and restore it to the opening control after closing. Correct the theme button when following the system theme.
+- Show a persistent retry action if startup fails, and prevent older font requests from overwriting newer previews.
+
+Existing settings, uploaded fonts, exceptions, and overrides remain compatible. No new extension permissions or runtime dependencies.
+
+## Downloads
+
+Chrome: extract the Chrome ZIP and load its folder from chrome://extensions. The CRX3 is signed with the configured repository key; it is not a Chrome Web Store signature.
+
+Firefox: use the signed XPI from this release when available. The explicitly named unsigned XPI is for temporary development installation. Signing uses Mozilla's unlisted channel; this release does not create a public Mozilla Add-ons listing.
+
+The source ZIP contains the human-readable application, tests, locked dependencies, and build instructions. Signing keys are excluded from downloads.
+
+## Validation
+
+Eight unit tests, Chrome and Firefox builds, Firefox lint, and the real Chromium extension integration suite. The suite covers font propagation into the extension interface, uploads, exceptions, overrides, pause/restoration, backups, reset, keyboard focus, theme controls, startup recovery, local symbols, reduced motion, and native popup sizing.
+
+Layout, text contrast, and control targets are checked at 1240, 768, 390, and 320px in both themes. Firefox lint retains the previously documented Lit dependency warning; Firefox interactive behaviour and physical mobile keyboards were not tested.
diff --git a/package-lock.json b/package-lock.json
index 1a6b8d3..dbe41ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "fontify",
- "version": "1.1.0",
+ "version": "1.1.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "fontify",
- "version": "1.1.0",
+ "version": "1.1.1",
"license": "MIT",
"dependencies": {
"@m3e/web": "2.8.2",
diff --git a/package.json b/package.json
index 7b811e7..59e6fbe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "fontify",
- "version": "1.1.0",
+ "version": "1.1.1",
"private": true,
"type": "module",
"description": "Your web, your type. Expressive font control for Chrome and Firefox.",
diff --git a/scripts/build.mjs b/scripts/build.mjs
index ef22708..7f573a9 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -44,7 +44,10 @@ for (const browser of ["chrome", "firefox"]) {
await build({
entryPoints: ["src/background.js", "src/content.js", "src/ui.js"],
bundle: true,
- define: { GOOGLE_FONT_CATEGORIES: JSON.stringify(categories) },
+ define: {
+ GOOGLE_FONT_CATEGORIES: JSON.stringify(categories),
+ FONTIFY_VERSION: JSON.stringify(version),
+ },
outdir,
format: "iife",
target: ["chrome120", "firefox140"],
diff --git a/src/ui.js b/src/ui.js
index 45e5e89..6dce70e 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1096,7 +1096,8 @@ function preferences() {
About Fontify
- Fontify 1.1.0 · MIT licensed · Built with matraic’s M3E components.
+ Fontify ${FONTIFY_VERSION} · MIT licensed · Built with matraic’s M3E
+ components.
No analytics. No accounts. No browsing history stored. Your settings and
diff --git a/tests/browser.mjs b/tests/browser.mjs
index 1d9aa8e..319a6ef 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -109,6 +109,7 @@ try {
args: [
`--disable-extensions-except=${extension}`,
`--load-extension=${extension}`,
+ "--window-size=1240,1000",
"--no-sandbox",
],
viewport: { width: 1240, height: 1000 },
@@ -559,7 +560,8 @@ try {
await checkTargets(options);
await options.screenshot({
path: `test-results/${name.toLowerCase().replaceAll(" ", "-")}-${theme}-${width}.png`,
- fullPage: true,
+ fullPage: false,
+ animations: "disabled",
});
}
}
From 6f63e13c5e3e088db9993b2222e3c1cf8767e0ae Mon Sep 17 00:00:00 2001
From: XDan <109234186+XDanfr@users.noreply.github.com>
Date: Mon, 12 Oct 2026 22:40:17 +0100
Subject: [PATCH 5/7] Capture extension screenshots from the foreground tab
---
tests/browser.mjs | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)
diff --git a/tests/browser.mjs b/tests/browser.mjs
index 319a6ef..1629832 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -20,6 +20,10 @@ const profile = await mkdtemp(join(tmpdir(), "fontify-test-"));
const extension = resolve("dist/chrome");
let context;
const errors = [];
+async function capture(page, options) {
+ await page.bringToFront();
+ await page.screenshot({ ...options, animations: "disabled" });
+}
async function checkContrast(page) {
await page.evaluate(
() =>
@@ -298,7 +302,7 @@ try {
assert.equal(italicOnly.faces[0].weight, "400");
assert.equal(italicOnly.faces[0].style, "italic");
await mkdir("test-results", { recursive: true });
- await options.screenshot({
+ await capture(options, {
path: "test-results/options-dark.png",
fullPage: true,
});
@@ -308,7 +312,7 @@ try {
await options.waitForFunction(
() => document.querySelector("m3e-theme").scheme === "light",
);
- await options.screenshot({
+ await capture(options, {
path: "test-results/options-light.png",
fullPage: true,
});
@@ -449,7 +453,7 @@ try {
await popup.setViewportSize({ width: 520, height: 660 });
await popup.goto(`chrome-extension://${id}/popup.html`);
await popup.getByRole("button", { name: "All settings ↗" }).waitFor();
- await popup.screenshot({
+ await capture(popup, {
path: "test-results/popup-light.png",
fullPage: true,
});
@@ -558,7 +562,7 @@ try {
);
await checkContrast(options);
await checkTargets(options);
- await options.screenshot({
+ await capture(options, {
path: `test-results/${name.toLowerCase().replaceAll(" ", "-")}-${theme}-${width}.png`,
fullPage: false,
animations: "disabled",
@@ -687,7 +691,7 @@ try {
);
await checkContrast(popup);
await checkTargets(popup);
- await popup.screenshot({
+ await capture(popup, {
path: `test-results/popup-${theme}-320.png`,
fullPage: true,
});
From 2fc02f5734119524fdf3ef42371a19cd9a259ce6 Mon Sep 17 00:00:00 2001
From: XDan <109234186+XDanfr@users.noreply.github.com>
Date: Mon, 12 Oct 2026 22:44:58 +0100
Subject: [PATCH 6/7] Measure native popup content independently of platform
scrollbars
---
anti-slop/delivery-2026-10-12.md | 2 +-
tests/browser.mjs | 5 +++--
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/anti-slop/delivery-2026-10-12.md b/anti-slop/delivery-2026-10-12.md
index 460e482..556584f 100644
--- a/anti-slop/delivery-2026-10-12.md
+++ b/anti-slop/delivery-2026-10-12.md
@@ -37,7 +37,7 @@ No new logo, navigation destinations, dependencies, or settings-schema changes.
- `npm run lint:firefox`: 0 errors, 0 notices, 1 existing `UNSAFE_VAR_ASSIGNMENT` warning from Lit's bundled template parser, already documented in README.md.
- `npm run test:browser`: passed using Playwright 1.55.1 and Chromium 140 with the actual unpacked extension. Google font responses use a deterministic bundled-font fixture, so these tests validate loading and application behaviour rather than the visual appearance of each remote family.
- Every settings section checked in light and dark at 1240, 768, 390, and 320px. Document overflow, rendered text contrast using the WCAG luminance formula, and control target height assertions passed. The popup tab preview also passed light/dark checks at 320px and was captured at 520px.
-- Actual native Chromium toolbar popup opened through `chrome.action.openPopup`; its DevTools target measured 520px body/viewport width, no horizontal overflow, and All settings within the visible height. This validates native sizing separately from opening popup.html in a tab.
+- Actual native Chromium toolbar popup opened through `chrome.action.openPopup`; its DevTools target measured 520px body/content width, no horizontal overflow, and All settings within the visible height. Native viewport width can also include platform scrollbar space. This validates native sizing separately from opening popup.html in a tab.
- Selecting independent Bungee/Lora/Roboto regular/bold/italic profiles changes computed interface font families, including inputs, section headings, and M3E shadow-root labels. This checks propagation while keeping deterministic font data in the integration suite.
- All ten local outlined/filled SVG variants fetch successfully. Reduced-motion emulation reports no picker animation and zero navigation-icon transition duration.
- Screenshots recorded for all 40 settings/theme/width combinations and the popup. Desktop typography, narrow typography/preferences, and popup captures were visually inspected.
diff --git a/tests/browser.mjs b/tests/browser.mjs
index 1629832..bd5e767 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -864,7 +864,7 @@ try {
const check = () => {
const settings = [...document.querySelectorAll('m3e-button')].find(el => el.textContent.includes('All settings'));
if (!settings) return setTimeout(check, 50);
- resolve({ width: innerWidth, body: document.body.getBoundingClientRect().width,
+ resolve({ width: innerWidth, contentWidth: document.documentElement.clientWidth, body: document.body.getBoundingClientRect().width,
height: innerHeight, toolbar: document.body.classList.contains('toolbar-popup'),
settingsBottom: settings.getBoundingClientRect().bottom,
overflow: document.documentElement.scrollWidth > innerWidth });
@@ -874,7 +874,8 @@ try {
}),
});
const native = (await resultPromise).result.result.value;
- assert.equal(native.width, 520);
+ assert.equal(native.contentWidth, 520);
+ assert(native.width >= native.contentWidth);
assert.equal(native.body, 520);
assert(native.toolbar && !native.overflow);
assert(
From 5940b57ff008e9c5be0c6f6697813bf6bebe0a09 Mon Sep 17 00:00:00 2001
From: XDan <109234186+XDanfr@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:08:51 +0100
Subject: [PATCH 7/7] Test native popup body width across platform frame sizes
---
tests/browser.mjs | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/tests/browser.mjs b/tests/browser.mjs
index bd5e767..600e147 100644
--- a/tests/browser.mjs
+++ b/tests/browser.mjs
@@ -874,9 +874,12 @@ try {
}),
});
const native = (await resultPromise).result.result.value;
- assert.equal(native.contentWidth, 520);
- assert(native.width >= native.contentWidth);
+ console.log("Native toolbar dimensions:", native);
assert.equal(native.body, 520);
+ assert(
+ native.width >= native.body,
+ "The native viewport must fit the requested popup width",
+ );
assert(native.toolbar && !native.overflow);
assert(
native.settingsBottom <= native.height,