Implement Gradient background for NTP

browser/ntp_background/ntp_background_prefs.cc

@@ -22,27 +22,25 @@ constexpr char kRandomKey[] = "random";
 constexpr char kSelectedValueKey[] = "selected_value";
 
 const char* TypeToString(NTPBackgroundPrefs::Type type) {
+  // See class description for details.
   switch (type) {
     case NTPBackgroundPrefs::Type::kBrave:
       return "brave";
     case NTPBackgroundPrefs::Type::kCustomImage:
       return "custom_image";
-    case NTPBackgroundPrefs::Type::kSolidColor:
-      return "solid_color";
-    case NTPBackgroundPrefs::Type::kGradientColor:
-      return "gradient_color";
+    case NTPBackgroundPrefs::Type::kColor:
+      return "color";
   }
 }
 
 NTPBackgroundPrefs::Type StringToType(const std::string& type_string) {
+  // See class description for details.
   if (type_string == "brave")
     return NTPBackgroundPrefs::Type::kBrave;
   if (type_string == "custom_image")
     return NTPBackgroundPrefs::Type::kCustomImage;
-  if (type_string == "solid_color")
-    return NTPBackgroundPrefs::Type::kSolidColor;
-  if (type_string == "gradient_color")
-    return NTPBackgroundPrefs::Type::kGradientColor;
+  if (type_string == "solid_color" || type_string == "color")
+    return NTPBackgroundPrefs::Type::kColor;
 
   NOTREACHED();
   return NTPBackgroundPrefs::Type::kBrave;
@@ -97,12 +95,8 @@ bool NTPBackgroundPrefs::IsCustomImageType() const {
   return GetType() == Type::kCustomImage;
 }
 
-bool NTPBackgroundPrefs::IsSolidColorType() const {
-  return GetType() == Type::kSolidColor;
-}
-
-bool NTPBackgroundPrefs::IsGradientColorType() const {
-  return GetType() == Type::kGradientColor;
+bool NTPBackgroundPrefs::IsColorType() const {
+  return GetType() == Type::kColor;
 }
 
 bool NTPBackgroundPrefs::ShouldUseRandomValue() const {
@@ -125,8 +119,7 @@ absl::variant<GURL, std::string> NTPBackgroundPrefs::GetSelectedValue() const {
   const auto* selected_value = value->FindString(kSelectedValueKey);
   DCHECK(selected_value);
 
-  if (auto type = GetType();
-      type == Type::kSolidColor || type == Type::kGradientColor)
+  if (IsColorType())
     return *selected_value;
 
   return GURL(*selected_value);

browser/ntp_background/ntp_background_prefs.h

@@ -22,12 +22,25 @@ class PrefService;
 // The data is stored in following format:
 //
 //  kNTPBackground: {
-//     type: ‘brave’ | ‘custom_image’ | ‘solid_color’ | ‘gradient_olor’
+//     type: ‘brave’ | ‘custom_image’ | 'color' | ‘solid_color’
 //     random: bool  // indicates that we should pick one every time
 //                      from |selected_type| collection
 //     selected_value?: string  // url or css value
 // }
 //
+//  Types:
+//   'brave': mapped to Type::kBrave. Default backgrounds provided by us.
+//            |selected_value| is empty.
+//
+//   'custom_image': mapped to |Type::kCustomImage.| custom image uploaded by
+//                   user. |selected_value| is url of the image.
+//
+//   'color' | 'solid_color': mapped to |Type::kColor|. |selected_value| is css
+//                            value or either one of 'gradient' or ' solid' in
+//                            case |ShouldUseRandomValue()| is true. Value name
+//                            is kept as 'solid_color' for backward
+//                            compatibility.
+//
 class NTPBackgroundPrefs final {
  public:
   static constexpr char kDeprecatedPrefName[] =
@@ -37,8 +50,7 @@ class NTPBackgroundPrefs final {
   enum class Type {
     kBrave,  // Images that we supply.
     kCustomImage,
-    kSolidColor,
-    kGradientColor
+    kColor,
   };
 
   explicit NTPBackgroundPrefs(PrefService* service);
@@ -56,8 +68,7 @@ class NTPBackgroundPrefs final {
   void SetType(Type type);
   bool IsBraveType() const;
   bool IsCustomImageType() const;
-  bool IsSolidColorType() const;
-  bool IsGradientColorType() const;
+  bool IsColorType() const;
 
   // Returns true when we should pick one item of selected type every time NTP
   // opens.

browser/ntp_background/ntp_background_prefs_unittest.cc

@@ -35,11 +35,8 @@ TEST_F(NTPBackgroundPrefsTest, TypeAccessor) {
   background_prefs_.SetType(NTPBackgroundPrefs::Type::kCustomImage);
   EXPECT_TRUE(background_prefs_.IsCustomImageType());
 
-  background_prefs_.SetType(NTPBackgroundPrefs::Type::kSolidColor);
-  EXPECT_TRUE(background_prefs_.IsSolidColorType());
-
-  background_prefs_.SetType(NTPBackgroundPrefs::Type::kGradientColor);
-  EXPECT_TRUE(background_prefs_.IsGradientColorType());
+  background_prefs_.SetType(NTPBackgroundPrefs::Type::kColor);
+  EXPECT_TRUE(background_prefs_.IsColorType());
 }
 
 TEST_F(NTPBackgroundPrefsTest, MigrationTest) {
@@ -75,13 +72,9 @@ TEST_F(NTPBackgroundPrefsTest, SelectedValue) {
   selected_value = background_prefs_.GetSelectedValue();
   EXPECT_TRUE(absl::holds_alternative<GURL>(selected_value));
 
-  background_prefs_.SetType(NTPBackgroundPrefs::Type::kSolidColor);
+  background_prefs_.SetType(NTPBackgroundPrefs::Type::kColor);
   background_prefs_.SetSelectedValue("red");
   selected_value = background_prefs_.GetSelectedValue();
   EXPECT_TRUE(absl::holds_alternative<std::string>(selected_value));
   EXPECT_TRUE(absl::get<std::string>(selected_value) == "red");
-
-  background_prefs_.SetType(NTPBackgroundPrefs::Type::kGradientColor);
-  selected_value = background_prefs_.GetSelectedValue();
-  EXPECT_TRUE(absl::holds_alternative<std::string>(selected_value));
 }

browser/ntp_background/ntp_custom_background_images_service_delegate.cc

@@ -39,12 +39,12 @@ base::FilePath NTPCustomBackgroundImagesServiceDelegate::
       ntp_background_images::kSanitizedImageFileName);
 }
 
-bool NTPCustomBackgroundImagesServiceDelegate::IsSolidColorBackgroundEnabled() {
-  return NTPBackgroundPrefs(profile_->GetPrefs()).IsSolidColorType();
+bool NTPCustomBackgroundImagesServiceDelegate::IsColorBackgroundEnabled() {
+  return NTPBackgroundPrefs(profile_->GetPrefs()).IsColorType();
 }
 
-std::string NTPCustomBackgroundImagesServiceDelegate::GetSolidColor() {
-  if (!IsSolidColorBackgroundEnabled())
+std::string NTPCustomBackgroundImagesServiceDelegate::GetColor() {
+  if (!IsColorBackgroundEnabled())
     return {};
 
   auto selected_value =

browser/ntp_background/ntp_custom_background_images_service_delegate.h

@@ -27,8 +27,8 @@ class NTPCustomBackgroundImagesServiceDelegate
   // NTPCustomBackgroundImagesService::Delegate overrides:
   bool IsCustomImageBackgroundEnabled() override;
   base::FilePath GetCustomBackgroundImageLocalFilePath() override;
-  bool IsSolidColorBackgroundEnabled() override;
-  std::string GetSolidColor() override;
+  bool IsColorBackgroundEnabled() override;
+  std::string GetColor() override;
 
   raw_ptr<Profile> profile_ = nullptr;
 };

browser/ui/webui/brave_webui_source.cc

@@ -172,6 +172,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "backgroundImageTitle", IDS_BRAVE_NEW_TAB_BACKGROUND_IMAGE },
         { "settingsNavigateBack", IDS_BRAVE_NEW_TAB_SETTINGS_BACK },
         { "solidColorTitle", IDS_BRAVE_NEW_TAB_SOLID_COLOR},
+        { "gradientColorTitle", IDS_BRAVE_NEW_TAB_GRADIENT_COLOR},
 
         // search promotion
         { "searchPromotionNTPPopupTitle1", IDS_BRAVE_NEW_TAB_SEARCH_PROMOTION_POPUP_TITLE_1},  // NOLINT

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.cc

@@ -141,7 +141,7 @@ void BraveNewTabPageHandler::UseBraveBackground() {
   // Call ntp custom background images service.
   NTPBackgroundPrefs(profile_->GetPrefs())
       .SetType(NTPBackgroundPrefs::Type::kBrave);
-  OnCustomBackgroundImageUpdated();
+  OnCustomBackgroundUpdated();
   DeleteSanitizedImageFile();
 }
 
@@ -185,12 +185,12 @@ void BraveNewTabPageHandler::OnSearchPromotionDismissed() {
   NotifySearchPromotionDisabledIfNeeded();
 }
 
-void BraveNewTabPageHandler::UseSolidColorBackground(const std::string& color) {
+void BraveNewTabPageHandler::UseColorBackground(const std::string& color) {
   auto background_pref = NTPBackgroundPrefs(profile_->GetPrefs());
-  background_pref.SetType(NTPBackgroundPrefs::Type::kSolidColor);
+  background_pref.SetType(NTPBackgroundPrefs::Type::kColor);
   background_pref.SetSelectedValue(color);
 
-  OnCustomBackgroundImageUpdated();
+  OnCustomBackgroundUpdated();
   DeleteSanitizedImageFile();
 }
 
@@ -202,11 +202,11 @@ bool BraveNewTabPageHandler::IsCustomBackgroundImageEnabled() const {
   return NTPBackgroundPrefs(prefs).IsCustomImageType();
 }
 
-bool BraveNewTabPageHandler::IsSolidColorBackgroundEnabled() const {
-  return NTPBackgroundPrefs(profile_->GetPrefs()).IsSolidColorType();
+bool BraveNewTabPageHandler::IsColorBackgroundEnabled() const {
+  return NTPBackgroundPrefs(profile_->GetPrefs()).IsColorType();
 }
 
-void BraveNewTabPageHandler::OnCustomBackgroundImageUpdated() {
+void BraveNewTabPageHandler::OnCustomBackgroundUpdated() {
   brave_new_tab_page::mojom::CustomBackgroundPtr value =
       brave_new_tab_page::mojom::CustomBackground::New();
   // Pass empty struct when custom background is disabled.
@@ -216,11 +216,11 @@ void BraveNewTabPageHandler::OnCustomBackgroundImageUpdated() {
     std::string time_string = std::to_string(base::Time::Now().ToTimeT());
     std::string local_string(ntp_background_images::kCustomWallpaperURL);
     value->url = GURL(local_string + "?ts=" + time_string);
-  } else if (IsSolidColorBackgroundEnabled()) {
+  } else if (IsColorBackgroundEnabled()) {
     auto selected_value =
         NTPBackgroundPrefs(profile_->GetPrefs()).GetSelectedValue();
     DCHECK(absl::holds_alternative<std::string>(selected_value));
-    value->solid_color = absl::get<std::string>(selected_value);
+    value->color = absl::get<std::string>(selected_value);
   }
 
   page_->OnBackgroundUpdated(std::move(value));
@@ -301,7 +301,7 @@ void BraveNewTabPageHandler::OnSavedEncodedImage(bool success) {
 
   NTPBackgroundPrefs(profile_->GetPrefs())
       .SetType(NTPBackgroundPrefs::Type::kCustomImage);
-  OnCustomBackgroundImageUpdated();
+  OnCustomBackgroundUpdated();
 }
 
 void BraveNewTabPageHandler::DeleteSanitizedImageFile() {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.h

@@ -64,10 +64,10 @@ class BraveNewTabPageHandler : public brave_new_tab_page::mojom::PageHandler,
   void DismissBraveSearchPromotion() override;
   void IsSearchPromotionEnabled(
       IsSearchPromotionEnabledCallback callback) override;
-  void UseSolidColorBackground(const std::string& color) override;
+  void UseColorBackground(const std::string& color) override;
 
   // Observe NTPCustomBackgroundImagesService.
-  void OnCustomBackgroundImageUpdated();
+  void OnCustomBackgroundUpdated();
 
   // SelectFileDialog::Listener overrides:
   void FileSelected(const base::FilePath& path,
@@ -80,7 +80,7 @@ class BraveNewTabPageHandler : public brave_new_tab_page::mojom::PageHandler,
   void OnTemplateURLServiceShuttingDown() override;
 
   bool IsCustomBackgroundImageEnabled() const;
-  bool IsSolidColorBackgroundEnabled() const;
+  bool IsColorBackgroundEnabled() const;
   image_fetcher::ImageDecoder* GetImageDecoder();
   void ConvertSelectedImageFileAndSave(const base::FilePath& image_file);
   void OnGotImageFile(absl::optional<std::string> input);

components/brave_new_tab_ui/brave_new_tab_page.mojom

@@ -9,7 +9,7 @@ import "url/mojom/url.mojom";
 
 struct CustomBackground {
   url.mojom.Url url;
-  string solid_color;
+  string color;
 };
 
 // Used by the WebUI page to bootstrap bidirectional communication.
@@ -25,10 +25,11 @@ interface PageHandler {
   // Choose custom background from local file system.
   ChooseLocalCustomBackground();
   UseBraveBackground();
+  UseColorBackground(string color);
+
   TryBraveSearchPromotion(string input, bool open_new_tab);
   DismissBraveSearchPromotion();
   IsSearchPromotionEnabled() => (bool enabled);
-  UseSolidColorBackground(string color);
 };
 
 // WebUI-side handler for requests from the browser.

components/brave_new_tab_ui/components/default/page/index.tsx

@@ -20,7 +20,7 @@ interface HasImageProps {
   hasImage: boolean
   imageHasLoaded: boolean
   imageSrc?: string
-  solidColorForBackground?: string
+  colorForBackground?: string
 }
 
 type AppProps = {
@@ -313,15 +313,8 @@ function getPageBackground (p: HasImageProps) {
       right: 0;
       display: block;
       transition: opacity .5s ease-in-out;
-      ${p => !p.hasImage && !p.solidColorForBackground && css`
-        background: linear-gradient(
-            to bottom right,
-            #4D54D1,
-            #A51C7B 50%,
-            #EE4A37 100%);
-      `};
-      ${p => !p.hasImage && p.solidColorForBackground && css`
-        background: ${p.solidColorForBackground};
+      ${p => !p.hasImage && css`
+        background: ${p.colorForBackground || 'linear-gradient(to bottom right, #4D54D1, #A51C7B 50%, #EE4A37 100%);'}
       `};
       ${p => p.hasImage && p.imageSrc && css`
         opacity: var(--bg-opacity);

components/brave_new_tab_ui/components/default/settings/index.ts

@@ -602,8 +602,8 @@ interface SelectionProps {
   selected: boolean
 }
 
-interface SolidColorBackgroundProps {
-  color: string
+interface ColoredBackgroundProps {
+  colorValue: string
 }
 
 interface ImageBackgroundProps {
@@ -659,13 +659,13 @@ export const StyledCustomBackgroundOptionImage = styled('div')<SelectionProps &
   background-image: url(${p => p.image})
 `
 
-export const StyledCustomBackgroundOptionSolidColor = styled('div')<SelectionProps & SolidColorBackgroundProps>`
+export const StyledCustomBackgroundOptionColor = styled('div')<SelectionProps & ColoredBackgroundProps>`
   width: 100%;
   height: 100%;
   ${p => p.selected
     ? css`border-radius: 8px;`
     : css`border-radius: 10px;`}
-  background-color: ${p => p.color};
+  background: ${p => p.colorValue};
 `
 
 export const StyledUploadLabel = styled('div')<{}>`

components/brave_new_tab_ui/containers/app.tsx

@@ -71,8 +71,8 @@ function DefaultPage (props: Props) {
           getNTPBrowserAPI().pageHandler.useBraveBackground()
         }
       }}
-      setSolidColorBackground={(color: string) =>
-        getNTPBrowserAPI().pageHandler.useSolidColorBackground(color)
+      setColorBackground={(color: string) =>
+        getNTPBrowserAPI().pageHandler.useColorBackground(color)
       }
     />
   )

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -74,7 +74,7 @@ interface Props {
   saveBrandedWallpaperOptIn: (value: boolean) => void
   saveSetAllStackWidgets: (value: boolean) => void
   useCustomBackgroundImage: (useCustom: boolean) => void
-  setSolidColorBackground: (color: string) => void
+  setColorBackground: (color: string) => void
 }
 
 interface State {
@@ -1152,7 +1152,7 @@ class NewTabPage extends React.Component<Props, State> {
     const isShowingBrandedWallpaper = !!newTabData.brandedWallpaper
     // Custom background that user uploaded doesn't display its info in footer.
     const hasWallpaperInfo = newTabData.backgroundWallpaper?.type === 'image' && !!newTabData.backgroundWallpaper.author && !!newTabData.backgroundWallpaper.link
-    const solidColorForBackground = newTabData.backgroundWallpaper?.type === 'solidColor' ? newTabData.backgroundWallpaper.wallpaperSolidColor : undefined
+    const colorForBackground = newTabData.backgroundWallpaper?.type === 'color' ? newTabData.backgroundWallpaper.wallpaperColor : undefined
 
     let cryptoContent = this.renderCryptoContent()
     const showAddNewSiteMenuItem = newTabData.customLinksNum < MAX_GRID_SIZE
@@ -1177,15 +1177,15 @@ class NewTabPage extends React.Component<Props, State> {
         hasImage={hasImage}
         imageSrc={this.imageSource}
         imageHasLoaded={this.state.backgroundHasLoaded}
-        solidColorForBackground={solidColorForBackground}
-        data-show-news-prompt={((this.state.backgroundHasLoaded || solidColorForBackground) && this.state.isPromptingBraveToday) ? true : undefined}>
+        colorForBackground={colorForBackground}
+        data-show-news-prompt={((this.state.backgroundHasLoaded || colorForBackground) && this.state.isPromptingBraveToday) ? true : undefined}>
         <Page.Page
             hasImage={hasImage}
             imageSrc={this.imageSource}
             imageHasLoaded={this.state.backgroundHasLoaded}
             showClock={showClock}
             showStats={showStats}
-            solidColorForBackground={solidColorForBackground}
+            colorForBackground={colorForBackground}
             showRewards={!!cryptoContent}
             showBraveTalk={newTabData.showBraveTalk && newTabData.braveTalkSupported}
             showBinance={newTabData.showBinance}
@@ -1324,7 +1324,7 @@ class NewTabPage extends React.Component<Props, State> {
           setMostVisitedSettings={this.setMostVisitedSettings}
           toggleBrandedWallpaperOptIn={this.toggleShowBrandedWallpaper}
           useCustomBackgroundImage={this.props.useCustomBackgroundImage}
-          setSolidColorBackground={this.props.setSolidColorBackground}
+          setColorBackground={this.props.setColorBackground}
           showBackgroundImage={newTabData.showBackgroundImage}
           showClock={newTabData.showClock}
           clockFormat={newTabData.clockFormat}