Files

T

mimi 6659ab109f Bug 2043436 - Create split and full bleed bottom layout for Menu Message surface r=omc-reviewers,mconley,sachung

Adds the full bleed and split layout to the MenuMessage component as well as some Nova pref gated styling changes. See [figma](https://www.figma.com/design/SV1adf7TyYonXaARzknNHG/Nova---Continuous-Onboarding?node-id=2-7721&m=dev).

The [PXI panel messaging](https://experimenter.services.mozilla.com/nimbus/account-adoption-pxi-menu-rollout-v2/summary/) is hosted in a Nimbus Rollout and I'll create a [new rollout](https://experimenter.services.mozilla.com/nimbus/account-adoption-pxi-menu-rollout-fx153/summary/) once the changes have landed.

The set to default messaging is hosted in Nimbus and in-tree. The in-tree set to default message has two messages, the existing one and gated behind the Nova pref being disabled and the new one which is gated behind the Nova pref being enabled. The Nimbus rollout will end in Fx152 release so there won't be any updates there and I'll end the rollout. (edit: Nimbus variant has ended as of last week).

Differential Revision: https://phabricator.services.mozilla.com/D303218

2026-06-16 23:37:15 +00:00

4.0 KiB

Raw Blame History

MenuMessage

MenuMessage displays a contextual call-to-action card inside Firefox's panel menus: the App Menu (hamburger) and the PXI Menu (Firefox Accounts avatar panel).

Surfaces

Surface	`testingTriggerContext`	Supported `messageType`
App Menu	`app_menu`	`fxa_cta`, `default_cta`
PXI Menu	`pxi_menu`	`fxa_cta` only

Message Types

fxa_cta: Firefox Accounts sign-in prompt. Hidden for signed-in users unless allowWhenSignedIn: true. Available in both the App Menu and PXI Menu.
default_cta: General CTA. App Menu only. Always shown regardless of sign-in state.

Layouts

column (default): Illustration above text with a button stack below. Set imagePosition: "bottom" to render the illustration full-bleed at the bottom of the card instead.
row: Text on the left, button and illustration on the right.
simple: Single row with primary text and button only — no image, secondary text or close button.
split: Two-column layout (illustration and copy). Use imagePosition "start" or "end" to swap which side the illustration sits on and "bottom" to have it aligned block-end. Default is "end".

Previewing the layout options and configurations can be done through ./mach storybook or through about:asrouter, as seen below. See the MenuMessage Schema for the available configuration options.

Using ASRouter devtools:

Set browser.newtabpage.activity-stream.asrouter.devtoolsEnabled to true in about:config
Go to about:asrouter
Select panel as the provider and find messages with "template": "menu_message"
Click Show — the testingTriggerContext field on the message determines which menu surface is simulated (app_menu or fxa_cta).
Paste custom JSON in the text area and click Modify to preview changes

Example JSON

{
    "id": "EXAMPLE_PXI_MENU_SPLIT_LAYOUT",
    "template": "menu_message",
    "content": {
        "layout": "split",
        "messageType": "fxa_cta",
        "primaryText": {
            "string_id": "fxa-menu-message-sync-devices-primary-text"
        },
        "secondaryText": {
            "string_id": "fxa-menu-message-sync-devices-secondary-text2"
        },
        "primaryActionText": {
            "string_id": "fxa-menu-message-sign-in-button"
        },
        "imageURL": "chrome://browser/content/asrouter/assets/kit-peek.svg",
        "imageVerticalBottomOffset": -8,
        "imagePosition": "bottom",
        "imageWidth": 95,
        "primaryAction": {
            "type": "FXA_SIGNIN_FLOW",
            "data": {
                "where": "tab",
                "autoClose": false
            }
        },
        "closeAction": {
            "type": "BLOCK_MESSAGE",
            "data": {
                "id": "EXAMPLE_PXI_MENU_SPLIT_LAYOUT"
            }
        }
    },
    "trigger": {
        "id": "menuOpened"
    },
    "testingTriggerContext": "pxi_menu",
    "groups": [],
}

Schema

MenuMessage.schema.json

4.0 KiB Raw Blame History