// Copyright 2025 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import '../../ui/kit/kit.js'; import * as Common from '../../core/common/common.js'; import * as Host from '../../core/host/host.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as Badges from '../../models/badges/badges.js'; import * as Buttons from '../../ui/components/buttons/buttons.js'; import * as UIHelpers from '../../ui/helpers/helpers.js'; import * as uiI18n from '../../ui/i18n/i18n.js'; import * as UI from '../../ui/legacy/legacy.js'; import * as Lit from '../../ui/lit/lit.js'; import {type LitTemplate, nothing} from '../../ui/lit/lit.js'; import * as VisualLogging from '../../ui/visual_logging/visual_logging.js'; import badgeNotificationStyles from './badgeNotification.css.js'; import * as GdpSignUpDialog from './GdpSignUpDialog.js'; const {html, render} = Lit; const UIStrings = { /** * @description Title for close button */ close: 'Close', /** * @description Activity based badge award notification text * @example {Badge Title} PH1 */ activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It’s been added to your Developer Profile.', /** * @description Action title for navigating to the badge settings in Google Developer Profile section */ manageSettings: 'Manage settings', /** * @description Action title for opening the Google Developer Program profile page of the user in a new tab */ viewProfile: 'View profile', /** * @description Starter badge award notification text when the user has a Google Developer Program profile but did not enable receiving badges in DevTools yet * @example {Badge Title} PH1 * @example {Google Developer Program link} PH2 */ starterBadgeAwardMessageSettingDisabled: 'You earned the {PH1} badge for the {PH2}! Turn on badges to claim it.', /** * @description Starter badge award notification text when the user does not have a Google Developer Program profile. * @example {Badge Title} PH1 * @example {Google Developer Program link} PH2 */ starterBadgeAwardMessageNoGdpProfile: 'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.', /** * @description Action title for dismissing the badge notification. */ noThanks: 'No thanks', /** * @description Action title for enabling the "Receive badges" setting */ receiveBadges: 'Turn on badges', /** * @description Action title for creating a Google Developer Program profle */ createProfile: 'Create profile', } as const; const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); const i18nFormatStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_); const lockedString = i18n.i18n.lockedString; const LEFT_OFFSET = 5; const BOTTOM_OFFSET = 5; const AUTO_CLOSE_TIME_IN_MS = 30000; export interface BadgeNotificationAction { label: string; jslogContext: string; title?: string; onClick: () => void; } export interface BadgeNotificationProperties { message: LitTemplate; jslogContext: string; imageUri: string; actions: BadgeNotificationAction[]; isStarterBadge: boolean; } export interface ViewInput extends BadgeNotificationProperties { onDismissClick: () => void; } // clang-format off const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => { const actionButtons = input.actions.map(property => { return html` property.onClick()} jslog=${VisualLogging.action(property.jslogContext).track({click: true})} .variant=${Buttons.Button.Variant.TEXT} .title=${property.title ?? ''} .inverseColorTheme=${true} >${property.label}`; }); const crossButton = html``; render(html`

${input.message}

${crossButton}

${actionButtons}

`, target); }; // clang-format on type View = typeof DEFAULT_VIEW; function revealBadgeSettings(): void { void Common.Revealer.reveal(Common.Settings.moduleSetting('receive-gdp-badges')); } export class BadgeNotification extends UI.Widget.Widget { jslogContext = ''; message: LitTemplate = nothing; imageUri = ''; actions: BadgeNotificationAction[] = []; isStarterBadge = false; #autoCloseTimeout?: number; #view: View; constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) { super(element); this.#view = view; // eslint-disable-next-line this.contentElement.role = 'alert'; this.markAsRoot(); } async present(badge: Badges.Badge, reason: Badges.BadgeTriggerReason): Promise { switch (reason) { case Badges.BadgeTriggerReason.AWARD: this.#presentActivityBasedBadge(badge); return; case Badges.BadgeTriggerReason.STARTER_BADGE_SETTINGS_NUDGE: this.#presentStarterBadgeSettingsNudge(badge); return; case Badges.BadgeTriggerReason.STARTER_BADGE_PROFILE_NUDGE: this.#presentStarterBadgeProfileNudge(badge); return; } } #positionNotification(): void { const boundingRect = this.contentElement.getBoundingClientRect(); const container = UI.UIUtils.getDevToolsBoundingElement(); this.contentElement.positionAt( LEFT_OFFSET, container.clientHeight - boundingRect.height - BOTTOM_OFFSET, container); } #show(properties: BadgeNotificationProperties): void { this.message = properties.message; this.imageUri = properties.imageUri; this.actions = properties.actions; this.isStarterBadge = properties.isStarterBadge; this.jslogContext = properties.jslogContext; this.requestUpdate(); this.show(document.body); void this.updateComplete.then(() => { this.#positionNotification(); }); if (this.#autoCloseTimeout) { window.clearTimeout(this.#autoCloseTimeout); } this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS); } #presentStarterBadgeSettingsNudge(badge: Badges.Badge): void { this.#show({ message: i18nFormatStringTemplate(UIStrings.starterBadgeAwardMessageSettingDisabled, { PH1: badge.title, PH2: html`${ lockedString('Google Developer Program')}` }), jslogContext: badge.jslogContext, actions: [ { label: i18nString(UIStrings.noThanks), jslogContext: 'no-thanks', onClick: () => { this.#onDismissClick(); }, }, { label: i18nString(UIStrings.receiveBadges), jslogContext: 'receive-badges', onClick: () => { this.detach(); revealBadgeSettings(); } } ], imageUri: badge.imageUri, isStarterBadge: true, }); } #presentStarterBadgeProfileNudge(badge: Badges.Badge): void { this.#show({ message: i18nFormatStringTemplate(UIStrings.starterBadgeAwardMessageNoGdpProfile, { PH1: badge.title, PH2: html`${lockedString('Google Developer Program')}` }), jslogContext: badge.jslogContext, actions: [ { label: i18nString(UIStrings.noThanks), jslogContext: 'no-thanks', onClick: () => { this.#onDismissClick(); }, }, { label: i18nString(UIStrings.createProfile), jslogContext: 'create-profile', onClick: () => { this.detach(); GdpSignUpDialog.GdpSignUpDialog.show({ // We want to consider cancelling from the starter badge as a "snooze" for starter badge. onCancel: () => Badges.UserBadges.instance().snoozeStarterBadge(), }); } } ], imageUri: badge.imageUri, isStarterBadge: true, }); } #presentActivityBasedBadge(badge: Badges.Badge): void { this.#show({ message: i18nFormatStringTemplate(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}), jslogContext: badge.jslogContext, actions: [ { label: i18nString(UIStrings.manageSettings), jslogContext: 'manage-settings', onClick: () => { this.detach(); revealBadgeSettings(); }, }, { label: i18nString(UIStrings.viewProfile), jslogContext: 'view-profile', onClick: () => { UIHelpers.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK); } } ], imageUri: badge.imageUri, isStarterBadge: badge.isStarterBadge, }); } override onDetach(): void { window.clearTimeout(this.#autoCloseTimeout); } #onDismissClick = (): void => { this.detach(); if (this.isStarterBadge) { Badges.UserBadges.instance().dismissStarterBadge(); } }; #onAutoClose = (): void => { this.detach(); if (this.isStarterBadge) { Badges.UserBadges.instance().snoozeStarterBadge(); } }; override wasShown(): void { super.wasShown(); this.requestUpdate(); } override performUpdate(): void { const viewInput: ViewInput = { message: this.message, imageUri: this.imageUri, actions: this.actions, isStarterBadge: this.isStarterBadge, onDismissClick: this.#onDismissClick, jslogContext: this.jslogContext, }; this.#view(viewInput, undefined, this.contentElement); } }