diff --git a/browser/components/genai/LinkPreview.sys.mjs b/browser/components/genai/LinkPreview.sys.mjs index e38d354532f5..33ee76b997d3 100644 --- a/browser/components/genai/LinkPreview.sys.mjs +++ b/browser/components/genai/LinkPreview.sys.mjs @@ -80,7 +80,7 @@ XPCOMUtils.defineLazyPreferenceGetter( lazy, "onboardingHoverLinkMs", "browser.ml.linkPreview.onboardingHoverLinkMs", - 500 + 1000 ); XPCOMUtils.defineLazyPreferenceGetter( lazy, @@ -507,26 +507,39 @@ export const LinkPreview = { * @param {string} url - The URL of the link to be previewed. */ async renderOnboardingPanel(win, url) { + // Short-circuit if onboarding is no longer eligible - prevents race condition + // where onboarding might start rendering after showOnboarding status has changed + if (!this.showOnboarding) { + return; + } + // Append the current time to onboarding times. Services.prefs.setStringPref("browser.ml.linkPreview.onboardingTimes", [ ...lazy.onboardingTimes, Date.now(), ]); - // Telemetry for onboarding card view - Glean.genaiLinkpreview.onboardingCard.record({ action: "view" }); - - // Now show the preview as an "onboarding" source - const panel = this.initOrResetPreviewPanel(win, "onboarding"); - const doc = win.document; const onboardingCard = doc.createElement("link-preview-card-onboarding"); onboardingCard.style.width = "100%"; + onboardingCard.onboardingType = lazy.longPress ? "longPress" : "shiftKey"; + + // Telemetry for onboarding card view + Glean.genaiLinkpreview.onboardingCard.record({ + action: "view", + type: onboardingCard.onboardingType, + }); + + // Now show the preview as an "onboarding" source + const panel = this.initOrResetPreviewPanel(win, "onboarding"); + panel.onboardingType = onboardingCard.onboardingType; + onboardingCard.addEventListener( "LinkPreviewCard:onboardingComplete", () => { Glean.genaiLinkpreview.onboardingCard.record({ action: "try_it_now", + type: onboardingCard.onboardingType, }); this.renderLinkPreviewPanel(win, url, "onboarding"); } @@ -588,6 +601,7 @@ export const LinkPreview = { if (panel.cardType === "onboarding") { Glean.genaiLinkpreview.onboardingCard.record({ action: "close", + type: panel.onboardingType, }); } else if (panel.cardType === "linkpreview") { Glean.genaiLinkpreview.cardClose.record({ diff --git a/browser/components/genai/assets/onboarding-link-preview-image-longpress.svg b/browser/components/genai/assets/onboarding-link-preview-image-longpress.svg new file mode 100644 index 000000000000..943ff28dac31 --- /dev/null +++ b/browser/components/genai/assets/onboarding-link-preview-image-longpress.svg @@ -0,0 +1,31 @@ + + diff --git a/browser/components/genai/assets/onboarding-link-preview-image-shift.svg b/browser/components/genai/assets/onboarding-link-preview-image-shift.svg new file mode 100644 index 000000000000..ec77981d812e --- /dev/null +++ b/browser/components/genai/assets/onboarding-link-preview-image-shift.svg @@ -0,0 +1,23 @@ + + diff --git a/browser/components/genai/assets/onboarding-link-preview-image.svg b/browser/components/genai/assets/onboarding-link-preview-image.svg deleted file mode 100644 index 4cbb8059fc97..000000000000 --- a/browser/components/genai/assets/onboarding-link-preview-image.svg +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/browser/components/genai/content/link-preview-card-onboarding.mjs b/browser/components/genai/content/link-preview-card-onboarding.mjs index 15970a6f0b77..cc550937e90a 100644 --- a/browser/components/genai/content/link-preview-card-onboarding.mjs +++ b/browser/components/genai/content/link-preview-card-onboarding.mjs @@ -16,6 +16,17 @@ window.MozXULElement.insertFTLIfNeeded("preview/linkPreview.ftl"); * @augments MozLitElement */ class LinkPreviewCardOnboarding extends MozLitElement { + static get properties() { + return { + onboardingType: { type: String }, + }; + } + + constructor() { + super(); + this.onboardingType = "shiftKey"; + } + /** * Handles click on the "Try it now" button. * @@ -40,6 +51,20 @@ class LinkPreviewCardOnboarding extends MozLitElement { * @returns {import('lit').TemplateResult} The rendered HTML template. */ render() { + const titleL10nId = + this.onboardingType === "longPress" + ? "link-preview-onboarding-title-long-press" + : "link-preview-onboarding-title-shift"; + const descriptionL10nId = + this.onboardingType === "longPress" + ? "link-preview-onboarding-description-long-press" + : "link-preview-onboarding-description-shift"; + + const imageSrc = + this.onboardingType === "longPress" + ? "chrome://browser/content/genai/assets/onboarding-link-preview-image-longpress.svg" + : "chrome://browser/content/genai/assets/onboarding-link-preview-image-shift.svg"; + return html`