commit c2ef83ec4b8ba8a680b84b598df8097e94e2226a
parent ecfd420667a415fc31d65dbf41a12f33801acd0d
Author: Maxx Crawford <mcrawford@mozilla.com>
Date: Wed, 1 Oct 2025 14:03:14 +0000
Bug 1991678 - Add remote data support (images, custom text strings) to WallpaperFeatureHighlight component r=home-newtab-reviewers,nbarrett
Differential Revision: https://phabricator.services.mozilla.com/D266910
Diffstat:
4 files changed, 102 insertions(+), 40 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/WallpaperFeatureHighlight.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/WallpaperFeatureHighlight.jsx
@@ -33,7 +33,9 @@ export function WallpaperFeatureHighlight({
const { messageData } = useSelector(state => state.Messages);
return (
- <div className="wallpaper-feature-highlight">
+ <div
+ className={`wallpaper-feature-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`}
+ >
<FeatureHighlight
position={position}
data-l10n-id="feature-highlight-wallpaper"
@@ -41,23 +43,62 @@ export function WallpaperFeatureHighlight({
dispatch={dispatch}
message={
<div className="wallpaper-feature-highlight-content">
- <img
- src="chrome://newtab/content/data/content/assets/custom-wp-highlight.png"
- alt=""
- width="320"
- height="195"
- />
- <p className="title" data-l10n-id={messageData.content.title} />
- <p
- className="subtitle"
- data-l10n-id={messageData.content.subtitle}
- />
- <span className="button-wrapper">
- <moz-button
- type="default"
- onClick={() => onToggleClick("open-customize-menu")}
- data-l10n-id={messageData.content.cta}
+ <picture className="follow-section-button-highlight-image">
+ <source
+ srcSet={
+ messageData.content?.darkModeImageURL ||
+ "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg"
+ }
+ media="(prefers-color-scheme: dark)"
+ />
+ <source
+ srcSet={
+ messageData.content?.imageURL ||
+ "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg"
+ }
+ media="(prefers-color-scheme: light)"
+ />
+ <img width="320" height="195" alt="" />
+ </picture>
+ {messageData.content?.cardTitle ? (
+ <p className="title">{messageData.content.cardTitle}</p>
+ ) : (
+ <p
+ className="title"
+ data-l10n-id={
+ messageData.content.title ||
+ "newtab-new-user-custom-wallpaper-title"
+ }
/>
+ )}
+ {messageData.content?.cardMessage ? (
+ <p className="subtitle">{messageData.content.cardMessage}</p>
+ ) : (
+ <p
+ className="subtitle"
+ data-l10n-id={
+ messageData.content.subtitle ||
+ "newtab-new-user-custom-wallpaper-subtitle"
+ }
+ />
+ )}
+ <span className="button-wrapper">
+ {messageData.content?.cardCta ? (
+ <moz-button
+ type="default"
+ onClick={() => onToggleClick("open-customize-menu")}
+ label={messageData.content.cardCta}
+ />
+ ) : (
+ <moz-button
+ type="default"
+ onClick={() => onToggleClick("open-customize-menu")}
+ data-l10n-id={
+ messageData.content.cta ||
+ "newtab-new-user-custom-wallpaper-cta"
+ }
+ />
+ )}
</span>
</div>
}
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss
@@ -71,18 +71,23 @@
pointer-events: none;
}
- // The "Dismiss" button in the top right corner of the highlight needs to be
- // in the corner of the wallpaper image
+ // The "Dismiss" button in the top right corner of the highlight needs to be in front of the image
> moz-button {
- margin-inline-start: calc(-1 * var(--space-xlarge));
+ position: absolute;
+ inset-inline-end: var(--space-large);
+ inset-block-start: var(--space-large);
}
+ }
- @media (prefers-color-scheme: dark) {
- // override colour so that it is visible on the image
- > moz-button {
- --dark-icon-color: var(--color-gray-70);
+ // Custom override for dismiss-contrast
+ &.is-inverted-dark-dismiss-button {
+ .feature-highlight-modal {
+ @media (prefers-color-scheme: dark) {
- background-color: var(--dark-icon-color);
+ // override color so that it is visible on the image
+ > moz-button {
+ --button-icon-fill: var(--color-gray-70);
+ }
}
}
}
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -8544,12 +8544,13 @@ dialog::after {
pointer-events: none;
}
.wallpaper-feature-highlight .feature-highlight .feature-highlight-modal > moz-button {
- margin-inline-start: calc(-1 * var(--space-xlarge));
+ position: absolute;
+ inset-inline-end: var(--space-large);
+ inset-block-start: var(--space-large);
}
@media (prefers-color-scheme: dark) {
- .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal > moz-button {
- --dark-icon-color: var(--color-gray-70);
- background-color: var(--dark-icon-color);
+ .wallpaper-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button {
+ --button-icon-fill: var(--color-gray-70);
}
}
diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -16213,7 +16213,7 @@ function WallpaperFeatureHighlight({
messageData
} = (0,external_ReactRedux_namespaceObject.useSelector)(state => state.Messages);
return /*#__PURE__*/external_React_default().createElement("div", {
- className: "wallpaper-feature-highlight"
+ className: `wallpaper-feature-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`
}, /*#__PURE__*/external_React_default().createElement(FeatureHighlight, {
position: position,
"data-l10n-id": "feature-highlight-wallpaper",
@@ -16221,23 +16221,38 @@ function WallpaperFeatureHighlight({
dispatch: dispatch,
message: /*#__PURE__*/external_React_default().createElement("div", {
className: "wallpaper-feature-highlight-content"
- }, /*#__PURE__*/external_React_default().createElement("img", {
- src: "chrome://newtab/content/data/content/assets/custom-wp-highlight.png",
- alt: "",
+ }, /*#__PURE__*/external_React_default().createElement("picture", {
+ className: "follow-section-button-highlight-image"
+ }, /*#__PURE__*/external_React_default().createElement("source", {
+ srcSet: messageData.content?.darkModeImageURL || "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg",
+ media: "(prefers-color-scheme: dark)"
+ }), /*#__PURE__*/external_React_default().createElement("source", {
+ srcSet: messageData.content?.imageURL || "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg",
+ media: "(prefers-color-scheme: light)"
+ }), /*#__PURE__*/external_React_default().createElement("img", {
width: "320",
- height: "195"
- }), /*#__PURE__*/external_React_default().createElement("p", {
+ height: "195",
+ alt: ""
+ })), messageData.content?.cardTitle ? /*#__PURE__*/external_React_default().createElement("p", {
+ className: "title"
+ }, messageData.content.cardTitle) : /*#__PURE__*/external_React_default().createElement("p", {
className: "title",
- "data-l10n-id": messageData.content.title
- }), /*#__PURE__*/external_React_default().createElement("p", {
+ "data-l10n-id": messageData.content.title || "newtab-new-user-custom-wallpaper-title"
+ }), messageData.content?.cardMessage ? /*#__PURE__*/external_React_default().createElement("p", {
+ className: "subtitle"
+ }, messageData.content.cardMessage) : /*#__PURE__*/external_React_default().createElement("p", {
className: "subtitle",
- "data-l10n-id": messageData.content.subtitle
+ "data-l10n-id": messageData.content.subtitle || "newtab-new-user-custom-wallpaper-subtitle"
}), /*#__PURE__*/external_React_default().createElement("span", {
className: "button-wrapper"
- }, /*#__PURE__*/external_React_default().createElement("moz-button", {
+ }, messageData.content?.cardCta ? /*#__PURE__*/external_React_default().createElement("moz-button", {
+ type: "default",
+ onClick: () => onToggleClick("open-customize-menu"),
+ label: messageData.content.cardCta
+ }) : /*#__PURE__*/external_React_default().createElement("moz-button", {
type: "default",
onClick: () => onToggleClick("open-customize-menu"),
- "data-l10n-id": messageData.content.cta
+ "data-l10n-id": messageData.content.cta || "newtab-new-user-custom-wallpaper-cta"
}))),
toggle: /*#__PURE__*/external_React_default().createElement("div", {
className: "icon icon-help"
