custom background for NTP

[rebron]

Description

On the new tab page, expose settings to allow users to customize the new tab page with colors, gradients, Brave wallpapers, or their own images that they upload.

Design and UX

Prototype link: https://www.figma.com/proto/FMuS3IZbzqzQTyRHz42Oix/Desktop-NTP?node-id=1016%3A90&viewport=607%2C480%2C0.1668190062046051&scaling=min-zoom&page-id=1016%3A89

The new feature includes a set of solid colors for users to choose from:

The new feature includes a set of gradients for users to choose from:

Sponsored images toggle

The sponsored images toggle is at the top level under Customize Dashboard > Background images. Users are able to have sponsored images on/off independently of whether they have their own uploaded background, a Brave background, solid color, or gradient background selected. When the user has Brave Ads off, it will prompt them to "Start using Rewards".

Once clicked, the Rewards onboarding tutorial will show.

When the user visits the sponsored images toggle again, the "Start using Rewards" button will be hidden and it will inform them that they are earning tokens for seeing sponsored images.

Dark theme

Dark theme is supported:

Assets

Figma: https://www.figma.com/file/FMuS3IZbzqzQTyRHz42Oix/?node-id=900%3A32768

Some interaction states are not included in the above Figma file because they use our shared Brave button and toggle components. Refer to the component documentation.

• Buttons: https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/Platform-UI-Brave-desktop?node-id=1011%3A0
• Toggles: https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/Platform-UI-Brave-desktop?node-id=1051%3A128

Sub tasks

• Use custom images for background
• Use custom solid/gradient colors for background
• Improve sponsored images toggle option
• Support multiple custom images uploading and shuffle randomly(Add support for multiple custom images for NTP background images #25761)

[bsclifton]

If we share a design here, we can probably close out #5838 and #11962 as duplicates

Main tracking issue for NTP requests can be found here: #353

[karenkliu]

Designs added!

[StefanLobbenmeier]

You did not mention chrome plugins that provide a custom background in your description, is that intentionally not included or will that automatically work with one of the options anyway?

[edkazcarlson]

Are the figma links not working for anyone else? I get file not found errors when I try to access them

[StefanLobbenmeier]

I also get

File not found

Either this file doesn’t exist or you don’t have permission to view it. Ask the file owner to verify the link and/or update permissions.

[ghost]

I also can't access the figma links.

[Whatever2810]

Till when is it supposed to arrive ??

[saaries]

Still waiting for this NTP feature :)

[AstroEngineeer]

Still waiting for this NTP feature :)

Ya, me too :)

[soumya997]

waiting for this NTP feature. I hope it will be available soon.

[DrainBamage33]

When is it expected to be released?

[Uriegas]

@DrainBamage33 I think is today: https://brave.com/latest/

[maxicarlos08]

@DrainBamage33 I think is today: https://brave.com/latest/

On the latest brave nightly release (v1.32.39), this does not seem to be implemented...

[anujkmr953]

any progress?

[petemill]

As an aside, I see in the design we have an ability to select a specific brave background and turn off the "random" backgrounds. @rebron @aguscruiz what should we do if the user has chosen one of Brave's current packaged backgrounds specifically and then we update the package of backgrounds. At that point we will no longer have the previous set of jpgs locally on the user's machine. Should we, e.g. revert to showing random brave backgrounds from the new set?

[mjesusdev]

I think the other option, the user can select a picture album with the options (when spend 10 min, automatic select other one). What are you think? 🤔

[rebron]

As an aside, I see in the design we have an ability to select a specific brave background and turn off the "random" backgrounds. @rebron @aguscruiz what should we do if the user has chosen one of Brave's current packaged backgrounds specifically and then we update the package of backgrounds. At that point we will no longer have the previous set of jpgs locally on the user's machine. Should we, e.g. revert to showing random brave backgrounds from the new set?

This becomes troublesome. Easy to say revert to showing random Brave backgrounds but the ideal is to keep their selected image. Is there a way to save that selected background locally? Otherwise, I don't know if we give users the ability to choose a selected background image without storing it.

[sangwoo108]

Is there a way to save that selected background locally?

Yeah, I believe it's possible. If we can keep brave backgrounds not to have expiring date, we can copy and keep the selected background as long as a user wants. Then brave background component can be updated without hurting it.

[sangwoo108]

Is there a way to save that selected background locally?

Yeah, I believe it's possible. If we can keep brave backgrounds not to have expiring date, we can copy and keep the selected background as long as a user wants. Then brave background component can be updated without hurting it.

I was looking into this, but unfortunately, things were more difficult than I expected. Not only the image, but also the metadata should be backed up. So, I would prefer the easy way: revert to random background, but I think it's up to you, @rebron . What do you think? Just like we talked today, reverting it to random background and giving users the raw files so that they can use it as custom background is enough?

cc. @simonhong

[rebron]

Revert to random background image and we can post older images on community that folks can upload as they please.

[sangwoo108]

Can we consider "Showing reward onboarding tutorial on NTP, not bubble anchored to reward button toolbar" as another task? As we have a reward widget and I guess that also should show reward tutorial on NTP too? I think we can wire the new button on the Sponsored image to trigger the bubble just like the reward widget does.

[sangwoo108]

Hi, @rebron @aguscruiz ! I'm looking around our code to plan Support multiple custom images uploading and shuffle randomly. I wonder how many custom images can be added. Do you have a specific number in your mind?

---

max number is fixed to be 24

[rebron]

Closing as complete with #25761 done.