[signin] Add color picker to profile customization bubble

Screenshot: https://screenshot.googleplex.com/9ni7vN3NVGAAcGf.png

Bug: 1130945
Change-Id: I9aeafecd92ca17ed492aa00d6e86b0f4fced9716
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2445483
Auto-Submit: David Roger <droger@chromium.org>
Commit-Queue: Mustafa Emre Acer <meacer@chromium.org>
Reviewed-by: Mustafa Emre Acer <meacer@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814282}

chrome/browser/chrome_browser_interface_binders.cc

@@ -136,6 +136,7 @@
 #endif
 
 #if !defined(OS_CHROMEOS) && !defined(OS_ANDROID)
+#include "chrome/browser/ui/webui/signin/profile_customization_ui.h"
 #include "chrome/browser/ui/webui/signin/profile_picker_ui.h"
 #include "ui/webui/resources/cr_components/customize_themes/customize_themes.mojom.h"
 #endif  // !defined(OS_ANDROID) && !defined(OS_CHROMEOS)
@@ -610,7 +611,7 @@ void PopulateChromeWebUIFrameBinders(
       customize_themes::mojom::CustomizeThemesHandlerFactory, NewTabPageUI
 #if !defined(OS_CHROMEOS)
       ,
-      ProfilePickerUI, settings::SettingsUI
+      ProfileCustomizationUI, ProfilePickerUI, settings::SettingsUI
 #endif  // !defined(OS_CHROMEOS)
       >(map);
 

chrome/browser/resources/signin/profile_customization/BUILD.gn

@@ -17,6 +17,7 @@ js_library("profile_customization_app") {
   deps = [
     ":profile_customization_browser_proxy",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_components/customize_themes",
   ]
 }
 

chrome/browser/resources/signin/profile_customization/profile_customization_app.html

 <div>$i18n{profileCustomizationPickThemeTitle}</div>
+
+<cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
+</cr-customize-themes>
+
 <cr-button id="doneButton" on-click="onDoneCustomizationClicked_">
   $i18n{profileCustomizationDoneLabel}
 </cr-button>

chrome/browser/resources/signin/profile_customization/profile_customization_app.js

@@ -4,6 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import './strings.m.js';
+import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

chrome/browser/ui/webui/signin/profile_customization_ui.cc

@@ -5,6 +5,7 @@
 #include "chrome/browser/ui/webui/signin/profile_customization_ui.h"
 
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/customize_themes/chrome_customize_themes_handler.h"
 #include "chrome/browser/ui/webui/signin/profile_customization_handler.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/webui_url_constants.h"
@@ -17,7 +18,8 @@
 #include "ui/resources/grit/webui_resources.h"
 
 ProfileCustomizationUI::ProfileCustomizationUI(content::WebUI* web_ui)
-    : content::WebUIController(web_ui) {
+    : ui::MojoWebUIController(web_ui, /*enable_chrome_send=*/true),
+      customize_themes_factory_receiver_(this) {
   content::WebUIDataSource* source = content::WebUIDataSource::Create(
       chrome::kChromeUIProfileCustomizationHost);
   source->SetDefaultResource(IDR_PROFILE_CUSTOMIZATION_HTML);
@@ -34,6 +36,12 @@ ProfileCustomizationUI::ProfileCustomizationUI(content::WebUI* web_ui)
        IDS_PROFILE_CUSTOMIZATION_DONE_BUTTON_LABEL},
       {"profileCustomizationPickThemeTitle",
        IDS_PROFILE_CUSTOMIZATION_PICK_THEME_TITLE},
+
+      // Color picker strings:
+      {"colorPickerLabel", IDS_NTP_CUSTOMIZE_COLOR_PICKER_LABEL},
+      {"defaultThemeLabel", IDS_NTP_CUSTOMIZE_DEFAULT_LABEL},
+      {"thirdPartyThemeDescription", IDS_NTP_CUSTOMIZE_3PT_THEME_DESC},
+      {"uninstallThirdPartyThemeButton", IDS_NTP_CUSTOMIZE_3PT_THEME_UNINSTALL},
   };
   webui::AddLocalizedStringsBulk(source, kLocalizedStrings);
 
@@ -55,4 +63,23 @@ void ProfileCustomizationUI::Initialize(base::OnceClosure done_closure) {
       std::make_unique<ProfileCustomizationHandler>(std::move(done_closure)));
 }
 
+void ProfileCustomizationUI::BindInterface(
+    mojo::PendingReceiver<
+        customize_themes::mojom::CustomizeThemesHandlerFactory>
+        pending_receiver) {
+  if (customize_themes_factory_receiver_.is_bound())
+    customize_themes_factory_receiver_.reset();
+  customize_themes_factory_receiver_.Bind(std::move(pending_receiver));
+}
+
+void ProfileCustomizationUI::CreateCustomizeThemesHandler(
+    mojo::PendingRemote<customize_themes::mojom::CustomizeThemesClient>
+        pending_client,
+    mojo::PendingReceiver<customize_themes::mojom::CustomizeThemesHandler>
+        pending_handler) {
+  customize_themes_handler_ = std::make_unique<ChromeCustomizeThemesHandler>(
+      std::move(pending_client), std::move(pending_handler),
+      web_ui()->GetWebContents(), Profile::FromWebUI(web_ui()));
+}
+
 WEB_UI_CONTROLLER_TYPE_IMPL(ProfileCustomizationUI)

chrome/browser/ui/webui/signin/profile_customization_ui.h

@@ -5,15 +5,23 @@
 #ifndef CHROME_BROWSER_UI_WEBUI_SIGNIN_PROFILE_CUSTOMIZATION_UI_H_
 #define CHROME_BROWSER_UI_WEBUI_SIGNIN_PROFILE_CUSTOMIZATION_UI_H_
 
-#include "content/public/browser/web_ui_controller.h"
-
 #include "base/callback.h"
+#include "mojo/public/cpp/bindings/pending_receiver.h"
+#include "mojo/public/cpp/bindings/pending_remote.h"
+#include "mojo/public/cpp/bindings/receiver.h"
+#include "ui/webui/mojo_web_ui_controller.h"
+#include "ui/webui/resources/cr_components/customize_themes/customize_themes.mojom.h"
 
 namespace content {
 class WebUI;
 }
 
-class ProfileCustomizationUI : public content::WebUIController {
+class ChromeCustomizeThemesHandler;
+
+// This WebUI uses mojo for the color picker element.
+class ProfileCustomizationUI
+    : public ui::MojoWebUIController,
+      public customize_themes::mojom::CustomizeThemesHandlerFactory {
  public:
   explicit ProfileCustomizationUI(content::WebUI* web_ui);
   ~ProfileCustomizationUI() override;
@@ -24,7 +32,25 @@ class ProfileCustomizationUI : public content::WebUIController {
   // Initializes the ProfileCustomizationUI.
   void Initialize(base::OnceClosure done_closure);
 
+  // Instantiates the implementor of the
+  // customize_themes::mojom::CustomizeThemesHandlerFactory mojo interface
+  // passing the pending receiver that will be internally bound.
+  void BindInterface(mojo::PendingReceiver<
+                     customize_themes::mojom::CustomizeThemesHandlerFactory>
+                         pending_receiver);
+
  private:
+  // customize_themes::mojom::CustomizeThemesHandlerFactory:
+  void CreateCustomizeThemesHandler(
+      mojo::PendingRemote<customize_themes::mojom::CustomizeThemesClient>
+          pending_client,
+      mojo::PendingReceiver<customize_themes::mojom::CustomizeThemesHandler>
+          pending_handler) override;
+
+  std::unique_ptr<ChromeCustomizeThemesHandler> customize_themes_handler_;
+  mojo::Receiver<customize_themes::mojom::CustomizeThemesHandlerFactory>
+      customize_themes_factory_receiver_;
+
   WEB_UI_CONTROLLER_TYPE_DECL();
 };
 

chrome/test/data/webui/signin/profile_customization_test.js

@@ -33,4 +33,8 @@ suite('ProfileCustomizationTest', function() {
     app.$$('#doneButton').click();
     return browserProxy.whenCalled('done');
   });
+
+  test('ThemeSelector', function() {
+    assertTrue(!!app.$$('#themeSelector'));
+  });
 });