From 9dae85f11abc11596f53ea0af6c9e4b82faf6c1c Mon Sep 17 00:00:00 2001 From: Christos Bacharakis Date: Sun, 18 Oct 2026 21:36:38 +0000 Subject: [PATCH 1/2] Add a notice that the preview shows the pre-Nova Firefox UI Firefox shipped a new design, but the Firefox Color preview still renders the previous UI. Add a short, always-visible notice above the preview so people know their theme may look slightly different in Firefox, with a link to the Extension Workshop themes docs. --- src/lib/constants.js | 3 +++ src/web/lib/components/App/index.js | 2 ++ src/web/lib/components/App/index.scss | 2 +- .../PreviewNotice/PreviewNotice-test.js | 22 +++++++++++++++ src/web/lib/components/PreviewNotice/index.js | 24 +++++++++++++++++ .../lib/components/PreviewNotice/index.scss | 27 +++++++++++++++++++ 6 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 src/web/lib/components/PreviewNotice/PreviewNotice-test.js create mode 100644 src/web/lib/components/PreviewNotice/index.js create mode 100644 src/web/lib/components/PreviewNotice/index.scss diff --git a/src/lib/constants.js b/src/lib/constants.js index e0accb42..f9a9ab03 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -4,6 +4,9 @@ export const DOWNLOAD_FIREFOX_URL = `https://www.mozilla.org/firefox/new/?utm_ca process.env.DOWNLOAD_FIREFOX_UTM_SOURCE }`; +export const THEME_DOCS_URL = + "https://extensionworkshop.com/documentation/themes/"; + export const CUSTOM_BACKGROUND_MAXIMUM_LENGTH = 3; export const CUSTOM_BACKGROUND_MAXIMUM_SIZE = 1000000; diff --git a/src/web/lib/components/App/index.js b/src/web/lib/components/App/index.js index b27ad290..7058e55b 100755 --- a/src/web/lib/components/App/index.js +++ b/src/web/lib/components/App/index.js @@ -14,6 +14,7 @@ import ExportThemeDialog from "../ExportThemeDialog"; import TermsPrivacyModal from "../TermsPrivacyModal"; import Onboarding from "../Onboarding"; import Banner from "../Banner"; +import PreviewNotice from "../PreviewNotice"; import ThemeBuilder from "../ThemeBuilder"; import Browser from "../Browser"; import { getCustomImages } from "../../../../lib/utils"; @@ -122,6 +123,7 @@ export const AppComponent = props => { {shouldOfferPendingTheme && } {} +
{ + it("renders without exploding", () => { + expect(shallow().length).to.equal(1); + }); + + it("links to the theme documentation", () => { + const wrapper = shallow(); + expect(wrapper.find("a.preview-notice__link").prop("href")).to.equal( + THEME_DOCS_URL + ); + }); +}); diff --git a/src/web/lib/components/PreviewNotice/index.js b/src/web/lib/components/PreviewNotice/index.js new file mode 100644 index 00000000..80ab2c49 --- /dev/null +++ b/src/web/lib/components/PreviewNotice/index.js @@ -0,0 +1,24 @@ +import React from "react"; + +import { THEME_DOCS_URL } from "../../../../lib/constants"; + +import "./index.scss"; + +export const PreviewNotice = () => ( +
+

+ Firefox has a new look. This preview still shows the previous design, so + your theme may look slightly different in Firefox.{" "} + + Learn more about themes + +

+
+); + +export default PreviewNotice; diff --git a/src/web/lib/components/PreviewNotice/index.scss b/src/web/lib/components/PreviewNotice/index.scss new file mode 100644 index 00000000..f22efbe2 --- /dev/null +++ b/src/web/lib/components/PreviewNotice/index.scss @@ -0,0 +1,27 @@ +@import "../../common.scss"; + +.preview-notice { + align-self: start; + background-color: var(--blue-50-a30); + border-radius: 4px; + margin: 0 auto; + max-width: 1080px; + padding: 10px 16px; + position: relative; + width: calc(100% - 40px); + z-index: 1; +} + +.preview-notice__text { + color: var(--grey-90); + font-size: 14px; + line-height: 20px; + margin: 0; + text-align: center; +} + +.preview-notice__link { + color: var(--blue-70); + font-weight: 600; + text-decoration: underline; +} From 12a2bf2c24de1a29dfbcae286972588fb73a0a29 Mon Sep 17 00:00:00 2001 From: Christos Bacharakis Date: Sun, 18 Oct 2026 17:25:20 -0500 Subject: [PATCH 2/2] Point the preview notice at the Nova blog post and fix dark-theme contrast Update the notice copy to name Nova and link to the add-ons blog post about what changes for Firefox themes. Give the notice a solid white background so it stays readable on dark themes. --- src/lib/constants.js | 4 ++-- .../lib/components/PreviewNotice/PreviewNotice-test.js | 6 +++--- src/web/lib/components/PreviewNotice/index.js | 10 +++++----- src/web/lib/components/PreviewNotice/index.scss | 4 +++- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/lib/constants.js b/src/lib/constants.js index f9a9ab03..5d8beb93 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -4,8 +4,8 @@ export const DOWNLOAD_FIREFOX_URL = `https://www.mozilla.org/firefox/new/?utm_ca process.env.DOWNLOAD_FIREFOX_UTM_SOURCE }`; -export const THEME_DOCS_URL = - "https://extensionworkshop.com/documentation/themes/"; +export const NOVA_BLOG_POST_URL = + "https://blog.mozilla.org/addons/2026/09/29/nova-is-here-what-changes-for-your-firefox-theme/"; export const CUSTOM_BACKGROUND_MAXIMUM_LENGTH = 3; diff --git a/src/web/lib/components/PreviewNotice/PreviewNotice-test.js b/src/web/lib/components/PreviewNotice/PreviewNotice-test.js index f472a93a..f0e171f3 100644 --- a/src/web/lib/components/PreviewNotice/PreviewNotice-test.js +++ b/src/web/lib/components/PreviewNotice/PreviewNotice-test.js @@ -4,7 +4,7 @@ import { shallow, configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; import { PreviewNotice } from "./index"; -import { THEME_DOCS_URL } from "../../../../lib/constants"; +import { NOVA_BLOG_POST_URL } from "../../../../lib/constants"; configure({ adapter: new Adapter() }); @@ -13,10 +13,10 @@ describe("PreviewNotice", () => { expect(shallow().length).to.equal(1); }); - it("links to the theme documentation", () => { + it("links to the Nova blog post", () => { const wrapper = shallow(); expect(wrapper.find("a.preview-notice__link").prop("href")).to.equal( - THEME_DOCS_URL + NOVA_BLOG_POST_URL ); }); }); diff --git a/src/web/lib/components/PreviewNotice/index.js b/src/web/lib/components/PreviewNotice/index.js index 80ab2c49..2b6d03fb 100644 --- a/src/web/lib/components/PreviewNotice/index.js +++ b/src/web/lib/components/PreviewNotice/index.js @@ -1,21 +1,21 @@ import React from "react"; -import { THEME_DOCS_URL } from "../../../../lib/constants"; +import { NOVA_BLOG_POST_URL } from "../../../../lib/constants"; import "./index.scss"; export const PreviewNotice = () => (

- Firefox has a new look. This preview still shows the previous design, so - your theme may look slightly different in Firefox.{" "} + Firefox has a new look called Nova. Firefox Color still shows the previous + design, so your theme may look slightly different in Firefox.{" "} - Learn more about themes + Learn more about Nova and the new changes

diff --git a/src/web/lib/components/PreviewNotice/index.scss b/src/web/lib/components/PreviewNotice/index.scss index f22efbe2..49a08b0a 100644 --- a/src/web/lib/components/PreviewNotice/index.scss +++ b/src/web/lib/components/PreviewNotice/index.scss @@ -2,8 +2,10 @@ .preview-notice { align-self: start; - background-color: var(--blue-50-a30); + background-color: var(--white-100); + border-left: 4px solid var(--blue-50); border-radius: 4px; + box-shadow: 0 1px 4px var(--grey-90-a10); margin: 0 auto; max-width: 1080px; padding: 10px 16px;