[Desktop] Add widget promotion and management UX

[bbondy]

The below is credit to @karenkliu 👍

Description

Currently, we show new widgets by default in the widget stack. However, this is not a sustainable long-term approach because our widget stack only supports 5 cards. We've also received some pushback from users who were unhappy about cards showing up by default. As we add more users, the widgets which would be useful to different users differ.

Implement a consistent UX approach for new future widgets in the widget stack that works for a broader audience by giving users more control over the widgets in their widget stack.

User flows

All users see a promotional tooltip for a new widget when it becomes available.

• Existing users see it on opening a new tab page after updating Brave.
• New users who happen to install Brave on the day the new widget comes out sees the promotional tooltip on their second opened new tab page.

If widget stack is full, users will need to hide a widget first to make room and add a new one.

Default open widgets

Brave is under contract for 6 widgets. The contracts specify that these 6 widgets take up the default slots that show to all users as soon as they become available. However, when the contracts end the widgets will disappear from users’ new tab page unless they’ve had meaningful interaction. All new contracts after these 6 widgets will appear to users via the promo tooltip.

No more default open widgets will be sold after the first 6 widgets. Instead, we will sell the promo tooltip, the “featured” widget in the widget gallery, and “NEW” widgets in the widget gallery. Thus, the widget stack will eventually transition to a UX in which users add widgets they’re interested in as they become available rather than continuously removing widgets they are not interested in.

Refer to product spec for roll out plan for each widget.

Promo tooltip reappearance

The tooltip is visible on every new tab page to all users for a minimum total of 5 seconds. This timer ensures that the promo tooltip appears on every new tab page opened until it has been visible to the user for a minimum total of 5 seconds, to account for situations in which the user is opening new tab pages very quickly without paying attention to the content within.

After that, the tooltip reappears:
2 days after initial timer runs out
7 days after initial timer runs out

In cases where there are multiple new widgets, the promo tooltip for the next widget waits for the first widget’s 5s timer to run out before being shown. Promo tooltips for different widgets can be run concurrently in regions that don’t overlap.

“NEW” label

Default open widgets

“NEW” label shows next to the widget title only for the first 6 widgets. If the user clicks on the label disappears; otherwise it stays for 72 hours.

“Edit cards” button

“NEW” label stays on the “Edit cards” button until the user visits the widget gallery.

Featured widget

“NEW” label stays on the featured widget in the widget gallery for the whole time.

Widget in widget gallery

"NEW" label stays on new widgets in the gallery until the next Brave release.

End-of-life widgets

There may be a situation in which a widget contract ended, stayed on the user’s new tab page because they interacted with it in a meaningful way, but is no longer supported by Brave or the widget owner. In this case, the widget is removed from the widget gallery and Brave shows a simple message which encourages them to remove the widget from their new tab page:

Assets

Refer to Figma for design specs, keyboarding, responsiveness, hover treatment, and dark theme: https://www.figma.com/file/0pOzvvueMoeaCxKaVoU59Z/Widget-discovery?node-id=270%3A13332

[karenkliu]

this issue blocked by #9455

[karenkliu]

Designs and assets added!

[karenkliu]

Since we implemented part of this, I updated the issue with the v2 stuff that's left.