[settings] Add a color picker to manage profile page

This CL adds a cr-customize-themes element to
chrome://settings/manageProfile page behind a feature flag. This CL
focuses on the native side and it doesn't include necessary style
changes which will be included in future CLs. When the UI is ready, this
element will be put under the "NewProfilePicker" feature.

In order to use a cr-customize-themes component in WebUI, a
WebUIController class must enable mojo bindings and implement
customize_themes::mojom::CustomizeThemesHandlerFactory interface.
This CL applies these necessary changes to SettingsUI.

Screenshot with the feature flag enabled:
https://drive.google.com/file/d/1W1NITMHGbzHRzq1LeClp96Mh98B2MNGv/view?usp=sharing

Bug: 1129186
Change-Id: I18ead20f57e3bb0486e4821a946ea4e0aff3a242
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2414301
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Mustafa Emre Acer <meacer@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809749}

chrome/browser/chrome_browser_interface_binders.cc

@@ -120,6 +120,7 @@
 #include "chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.h"
 #include "chrome/browser/ui/webui/read_later/read_later.mojom.h"
 #include "chrome/browser/ui/webui/read_later/read_later_ui.h"
+#include "chrome/browser/ui/webui/settings/settings_ui.h"
 #include "chrome/browser/ui/webui/tab_search/tab_search.mojom.h"
 #include "chrome/browser/ui/webui/tab_search/tab_search_ui.h"
 #include "chrome/common/caption.mojom.h"
@@ -609,7 +610,7 @@ void PopulateChromeWebUIFrameBinders(
       customize_themes::mojom::CustomizeThemesHandlerFactory, NewTabPageUI
 #if !defined(OS_CHROMEOS)
       ,
-      ProfilePickerUI
+      ProfilePickerUI, settings::SettingsUI
 #endif  // !defined(OS_CHROMEOS)
       >(map);
 

chrome/browser/resources/settings/BUILD.gn

@@ -33,7 +33,11 @@ if (optimize_webui) {
       ":unpak",
       "../../../../ui/webui/resources:preprocess",
     ]
-    excludes = [ "chrome://resources/js/cr.m.js" ]
+    excludes = [
+      "chrome://resources/js/cr.m.js",
+      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
+      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+    ]
   }
 
   unpak("unpak") {

chrome/browser/resources/settings/people_page/BUILD.gn

@@ -153,6 +153,7 @@ if (!is_chromeos) {
       "..:route",
       "..:router.m",
       "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+      "//ui/webui/resources/cr_components/customize_themes",
     ]
   }
 

chrome/browser/resources/settings/people_page/manage_profile.html

@@ -3,7 +3,7 @@
         --cr-input-error-display: none;
       }
 
-      #selector {
+      #avatarSelector {
         margin: 16px 48px;
       }
     </style>
@@ -27,6 +27,10 @@
         </cr-toggle>
       </div>
     </template>
-    <cr-profile-avatar-selector id="selector" avatars="[[availableIcons]]"
+    <template is="dom-if" if="[[isCustomizeThemesVisible_]]">
+      <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
+      </cr-customize-themes>
+    </template>
+    <cr-profile-avatar-selector id="avatarSelector" avatars="[[availableIcons]]"
         selected-avatar="{{profileAvatar_}}" ignore-modified-key-events>
     </cr-profile-avatar-selector>

chrome/browser/resources/settings/people_page/manage_profile.js

@@ -10,6 +10,7 @@
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/shadow.js';
 import '../settings_shared_css.m.js';
@@ -76,6 +77,15 @@ Polymer({
      */
     isProfileShortcutSettingVisible_: Boolean,
 
+    /**
+     * True if the customize themes feature is enabled.
+     * @private
+     */
+    isCustomizeThemesVisible_: {
+      type: Boolean,
+      value: () => loadTimeData.getBoolean('profileThemeSelectorEnabled')
+    },
+
     /**
      * TODO(dpapad): Move this back to the HTML file when the Polymer2 version
      * of the code is deleted. Because of "\" being a special character in a JS

chrome/browser/ui/ui_features.cc

@@ -42,6 +42,11 @@ const base::Feature kNewTabstripAnimation{"NewTabstripAnimation",
 const base::Feature kPermissionChip{"PermissionChip",
                                     base::FEATURE_DISABLED_BY_DEFAULT};
 
+// Enables the theme selector in the manage profile settings.
+// https://crbug.com/1129186
+const base::Feature kProfileThemeSelectorInSettings{
+    "ProfileThemeSelectorInSettings", base::FEATURE_DISABLED_BY_DEFAULT};
+
 // Enables a more prominent active tab title in dark mode to aid with
 // accessibility.
 const base::Feature kProminentDarkModeActiveTabTitle{

chrome/browser/ui/ui_features.h

@@ -34,6 +34,8 @@ extern const base::Feature kNewTabstripAnimation;
 
 extern const base::Feature kPermissionChip;
 
+extern const base::Feature kProfileThemeSelectorInSettings;
+
 extern const base::Feature kProminentDarkModeActiveTabTitle;
 
 extern const base::Feature kReadLater;

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -1189,6 +1189,12 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
      IDS_SETTINGS_SYNC_DISCONNECT_DELETE_PROFILE_WARNING_WITH_COUNTS_PLURAL},
     {"deleteProfileWarningWithoutCounts",
      IDS_SETTINGS_SYNC_DISCONNECT_DELETE_PROFILE_WARNING_WITHOUT_COUNTS},
+
+    // 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},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);
 

chrome/browser/ui/webui/settings/settings_ui.cc

@@ -118,6 +118,7 @@
 #include "ui/base/ui_base_features.h"
 #else  // !defined(OS_CHROMEOS)
 #include "chrome/browser/signin/account_consistency_mode_manager.h"
+#include "chrome/browser/ui/webui/customize_themes/chrome_customize_themes_handler.h"
 #include "chrome/browser/ui/webui/settings/settings_default_browser_handler.h"
 #include "chrome/browser/ui/webui/settings/settings_manage_profile_handler.h"
 #include "chrome/browser/ui/webui/settings/system_handler.h"
@@ -155,7 +156,13 @@ web_app::AppRegistrar& GetRegistrarForProfile(Profile* profile) {
 }
 
 SettingsUI::SettingsUI(content::WebUI* web_ui)
-    : content::WebUIController(web_ui),
+    :
+#if !defined(OS_CHROMEOS)
+      ui::MojoWebUIController(web_ui, /*enable_chrome_send=*/true),
+      customize_themes_factory_receiver_(this),
+#else  // !defined(OS_CHROMEOS)
+      content::WebUIController(web_ui),
+#endif
       webui_load_timer_(web_ui->GetWebContents(),
                         "Settings.LoadDocumentTime.MD",
                         "Settings.LoadCompletedTime.MD") {
@@ -311,7 +318,11 @@ SettingsUI::SettingsUI(content::WebUI* web_ui)
 
   // This is the browser settings page.
   html_source->AddBoolean("isOSSettings", false);
-#endif
+#else   // defined(OS_CHROMEOS)
+  html_source->AddBoolean(
+      "profileThemeSelectorEnabled",
+      base::FeatureList::IsEnabled(features::kProfileThemeSelectorInSettings));
+#endif  // !defined(OS_CHROMEOS)
 
   AddSettingsPageUIHandler(std::make_unique<AboutHandler>(profile));
   AddSettingsPageUIHandler(std::make_unique<ResetSettingsHandler>(profile));
@@ -430,7 +441,16 @@ void SettingsUI::InitBrowserSettingsWebUIHandlers() {
   web_ui()->AddMessageHandler(
       std::make_unique<chromeos::settings::AndroidAppsHandler>(profile));
 }
-#endif  // defined(OS_CHROMEOS)
+#else   // defined(OS_CHROMEOS)
+void SettingsUI::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));
+}
+#endif  // !defined(OS_CHROMEOS)
 
 void SettingsUI::AddSettingsPageUIHandler(
     std::unique_ptr<content::WebUIMessageHandler> handler) {
@@ -448,4 +468,18 @@ void SettingsUI::TryShowHatsSurveyWithTimeout() {
   }
 }
 
+#if !defined(OS_CHROMEOS)
+void SettingsUI::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()));
+}
+#endif  // !defined(OS_CHROMEOS)
+
+WEB_UI_CONTROLLER_TYPE_IMPL(SettingsUI)
+
 }  // namespace settings

chrome/browser/ui/webui/settings/settings_ui.h

@@ -6,10 +6,19 @@
 #define CHROME_BROWSER_UI_WEBUI_SETTINGS_SETTINGS_UI_H_
 
 #include "base/macros.h"
+#include "build/build_config.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/webui/webui_load_timer.h"
 #include "content/public/browser/web_ui_controller.h"
 
+#if !defined(OS_CHROMEOS)
+#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"
+#endif  // !defined(OS_CHROMEOS)
+
 namespace content {
 class WebUIMessageHandler;
 }  // namespace content
@@ -18,10 +27,23 @@ namespace user_prefs {
 class PrefRegistrySyncable;
 }
 
+#if !defined(OS_CHROMEOS)
+class ChromeCustomizeThemesHandler;
+#endif  // !defined(OS_CHROMEOS)
+
 namespace settings {
 
 // The WebUI handler for chrome://settings.
-class SettingsUI : public content::WebUIController {
+class SettingsUI :
+#if !defined(OS_CHROMEOS)
+    // chrome://settings/manageProfile which only exists on !OS_CHROMEOS
+    // requires mojo bindings.
+    public ui::MojoWebUIController,
+    public customize_themes::mojom::CustomizeThemesHandlerFactory
+#else   // !defined(OS_CHROMEOS)
+    public content::WebUIController
+#endif  // defined(OS_CHROMEOS)
+{
  public:
   static void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry);
 
@@ -32,7 +54,14 @@ class SettingsUI : public content::WebUIController {
   // Initializes the WebUI message handlers for CrOS-specific settings that are
   // still shown in the browser settings UI.
   void InitBrowserSettingsWebUIHandlers();
-#endif  // defined(OS_CHROMEOS)
+#else   // defined(OS_CHROMEOS)
+  // 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);
+#endif  // !defined(OS_CHROMEOS)
 
  private:
   void AddSettingsPageUIHandler(
@@ -41,8 +70,23 @@ class SettingsUI : public content::WebUIController {
   // Makes a request to show a HaTS survey.
   void TryShowHatsSurveyWithTimeout();
 
+#if !defined(OS_CHROMEOS)
+  // 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_;
+#endif  // !defined(OS_CHROMEOS)
+
   WebuiLoadTimer webui_load_timer_;
 
+  WEB_UI_CONTROLLER_TYPE_DECL();
+
   DISALLOW_COPY_AND_ASSIGN(SettingsUI);
 };
 

chrome/test/data/webui/settings/people_page_manage_profile_test.js

@@ -81,11 +81,7 @@ suite('ManageProfileTests', function() {
     browserProxy = new TestManageProfileBrowserProxy();
     ManageProfileBrowserProxyImpl.instance_ = browserProxy;
     PolymerTest.clearBody();
-    manageProfile = document.createElement('settings-manage-profile');
-    manageProfile.profileIconUrl = 'fake-icon-1.png';
-    manageProfile.profileName = 'Initial Fake Name';
-    manageProfile.syncStatus = {supervisedUser: false, childUser: false};
-    document.body.appendChild(manageProfile);
+    manageProfile = createManageProfileElement();
     Router.getInstance().navigateTo(routes.MANAGE_PROFILE);
   });
 
@@ -93,6 +89,16 @@ suite('ManageProfileTests', function() {
     manageProfile.remove();
   });
 
+  function createManageProfileElement() {
+    const manageProfileElement =
+        document.createElement('settings-manage-profile');
+    manageProfileElement.profileIconUrl = 'fake-icon-1.png';
+    manageProfileElement.profileName = 'Initial Fake Name';
+    manageProfileElement.syncStatus = {supervisedUser: false, childUser: false};
+    document.body.appendChild(manageProfileElement);
+    return manageProfileElement;
+  }
+
   // Tests that the manage profile subpage
   //  - gets and receives all the available icons
   //  - can select a new icon
@@ -101,8 +107,9 @@ suite('ManageProfileTests', function() {
     return browserProxy.whenCalled('getAvailableIcons')
         .then(function() {
           flush();
-          items = manageProfile.$.selector.$['avatar-grid'].querySelectorAll(
-              '.avatar');
+          items =
+              manageProfile.$.avatarSelector.$['avatar-grid'].querySelectorAll(
+                  '.avatar');
 
           assertFalse(!!manageProfile.profileAvatar);
           assertEquals(3, items.length);
@@ -167,6 +174,27 @@ suite('ManageProfileTests', function() {
     const hasShortcutToggle = manageProfile.$$('#hasShortcutToggle');
     assertFalse(!!hasShortcutToggle);
   });
+
+
+  // Tests that the theme selector is hidden if profile colors feature is
+  // disabled.
+  test('ProfileThemeSelectorHidden', function() {
+    assertFalse(!!manageProfile.$$('#themeSelector'));
+  });
+
+  // Tests that the theme selector is visible if profile colors feature is
+  // enabled.
+  test('ProfileThemeSelectorVisible', function() {
+    // Recreate a manage profile element with overridden loadTimeData.
+    PolymerTest.clearBody();
+    loadTimeData.overrideValues({
+      profileThemeSelectorEnabled: true,
+    });
+    manageProfile = createManageProfileElement();
+    flush();
+
+    assertTrue(!!manageProfile.$$('#themeSelector'));
+  });
 });
 
 suite('ManageProfileTestsProfileShortcutsEnabled', function() {