[GM3][Panorama] Add ColorSchemeMode button to CustomizeChromeSidePanel

This adds the CustomizeColorSchemeMode selector to the Customize Chrome
Side Panel. It is only visible when the Chrome 2023 Refresh flag for
WebUI is turned on.

Screenshots:
With flag enabled: http://screenshot/7meLQFzidyn45Lc
With flag disabled: http://screenshot/AuxjCMhASUJaBnT

Bug: 1445804
Change-Id: I4509b91920c5c229784aa71909410fe806a33edd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4590461
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>
Commit-Queue: Riley Tatum <rtatum@google.com>
Reviewed-by: Emily Stark <estark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1154113}

chrome/browser/chrome_browser_interface_binders.cc

@@ -193,6 +193,7 @@
 #include "components/page_image_service/mojom/page_image_service.mojom.h"
 #include "components/search/ntp_features.h"
 #include "ui/webui/resources/cr_components/color_change_listener/color_change_listener.mojom.h"
+#include "ui/webui/resources/cr_components/customize_color_scheme_mode/customize_color_scheme_mode.mojom.h"
 #include "ui/webui/resources/cr_components/customize_themes/customize_themes.mojom.h"
 #include "ui/webui/resources/cr_components/help_bubble/help_bubble.mojom.h"
 #include "ui/webui/resources/cr_components/history_clusters/history_clusters.mojom.h"
@@ -1055,6 +1056,11 @@ void PopulateChromeWebUIFrameBinders(
   RegisterWebUIControllerInterfaceBinder<suggest_internals::mojom::PageHandler,
                                          SuggestInternalsUI>(map);
 
+  RegisterWebUIControllerInterfaceBinder<
+      customize_color_scheme_mode::mojom::
+          CustomizeColorSchemeModeHandlerFactory,
+      CustomizeChromeUI>(map);
+
   RegisterWebUIControllerInterfaceBinder<
       customize_themes::mojom::CustomizeThemesHandlerFactory, NewTabPageUI
 #if !BUILDFLAG(IS_CHROMEOS_ASH)

chrome/browser/resources/side_panel/customize_chrome/appearance.html

@@ -1,4 +1,4 @@
-<style include="cr-hidden-style cr-icons">
+<style include="cr-hidden-style cr-icons sp-shared-style">
   #editThemeButton {
     margin: 0 16px 24px;
     width: calc(100% - 32px);
@@ -34,6 +34,22 @@
   managed-dialog {
     --cr-dialog-width: min(calc(100% - 32px), 512px);
   }
+
+  customize-color-scheme-mode,
+  .sp-hr {
+    display: none;
+    margin: 0 16px 16px;
+    width: calc(100% - 32px);
+  }
+
+  :host-context([chrome-refresh-2023]) customize-color-scheme-mode,
+  :host-context([chrome-refresh-2023]) .sp-hr {
+    display: block;
+  }
+
+  :host-context([chrome-refresh-2023]) #editThemeButton {
+    margin-bottom: 16px;
+  }
 </style>
 <customize-chrome-theme-snapshot id="themeSnapshot"
     hidden$="[[!showFirstPartyThemeView_]]">
@@ -48,6 +64,10 @@
   <div id="imageIcon" class="cr-icon" slot="prefix-icon"></div>
   $i18n{changeTheme}
 </cr-button>
+<hr class="sp-hr" hidden$="[[!showFirstPartyThemeView_]]">
+<customize-color-scheme-mode
+    hidden$="[[!showFirstPartyThemeView_]]">
+</customize-color-scheme-mode>
 <customize-chrome-colors id="chromeColors"
     hidden$="[[!showFirstPartyThemeView_]]">
 </customize-chrome-colors>

chrome/browser/resources/side_panel/customize_chrome/appearance.ts

@@ -6,6 +6,7 @@ import './colors.js';
 import './theme_snapshot.js';
 import './hover_button.js';
 import './strings.m.js'; // Required by <managed-dialog>.
+import 'chrome://resources/cr_components/customize_color_scheme_mode/customize_color_scheme_mode.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_hidden_style.css.js';
 import 'chrome://resources/cr_elements/cr_icons.css.js';

chrome/browser/ui/webui/side_panel/customize_chrome/customize_chrome_ui.cc

@@ -13,6 +13,7 @@
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/search/background/ntp_custom_background_service_factory.h"
 #include "chrome/browser/signin/identity_manager_factory.h"
+#include "chrome/browser/ui/webui/cr_components/customize_color_scheme_mode/customize_color_scheme_mode_handler.h"
 #include "chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.h"
 #include "chrome/browser/ui/webui/sanitized_image_source.h"
 #include "chrome/browser/ui/webui/side_panel/customize_chrome/customize_chrome_page_handler.h"
@@ -162,6 +163,17 @@ void CustomizeChromeUI::BindInterface(
   help_bubble_handler_factory_receiver_.Bind(std::move(pending_receiver));
 }
 
+void CustomizeChromeUI::BindInterface(
+    mojo::PendingReceiver<customize_color_scheme_mode::mojom::
+                              CustomizeColorSchemeModeHandlerFactory>
+        pending_receiver) {
+  if (customize_color_scheme_mode_handler_factory_receiver_.is_bound()) {
+    customize_color_scheme_mode_handler_factory_receiver_.reset();
+  }
+  customize_color_scheme_mode_handler_factory_receiver_.Bind(
+      std::move(pending_receiver));
+}
+
 void CustomizeChromeUI::BindInterface(
     mojo::PendingReceiver<color_change_listener::mojom::PageHandler>
         pending_receiver) {
@@ -196,3 +208,15 @@ void CustomizeChromeUI::CreateHelpBubbleHandler(
           CustomizeChromeUI::kChromeThemeElementId,
           CustomizeChromeUI::kChromeThemeBackElementId});
 }
+
+void CustomizeChromeUI::CreateCustomizeColorSchemeModeHandler(
+    mojo::PendingRemote<
+        customize_color_scheme_mode::mojom::CustomizeColorSchemeModeClient>
+        client,
+    mojo::PendingReceiver<
+        customize_color_scheme_mode::mojom::CustomizeColorSchemeModeHandler>
+        handler) {
+  customize_color_scheme_mode_handler_ =
+      std::make_unique<CustomizeColorSchemeModeHandler>(
+          std::move(client), std::move(handler), profile_);
+}

chrome/browser/ui/webui/side_panel/customize_chrome/customize_chrome_ui.h

@@ -19,6 +19,7 @@
 #include "third_party/abseil-cpp/absl/types/optional.h"
 #include "ui/webui/color_change_listener/color_change_handler.h"
 #include "ui/webui/mojo_bubble_web_ui_controller.h"
+#include "ui/webui/resources/cr_components/customize_color_scheme_mode/customize_color_scheme_mode.mojom.h"
 #include "ui/webui/resources/cr_components/help_bubble/help_bubble.mojom.h"
 
 namespace content {
@@ -29,6 +30,7 @@ class CustomizeChromePageHandler;
 class CartHandler;
 class Profile;
 class HelpBubbleHandler;
+class CustomizeColorSchemeModeHandler;
 
 namespace ui {
 class ColorChangeHandler;
@@ -38,6 +40,8 @@ class ColorChangeHandler;
 class CustomizeChromeUI
     : public ui::MojoBubbleWebUIController,
       public help_bubble::mojom::HelpBubbleHandlerFactory,
+      public customize_color_scheme_mode::mojom::
+          CustomizeColorSchemeModeHandlerFactory,
       public side_panel::mojom::CustomizeChromePageHandlerFactory {
  public:
   explicit CustomizeChromeUI(content::WebUI* web_ui);
@@ -77,6 +81,11 @@ class CustomizeChromeUI
       mojo::PendingReceiver<color_change_listener::mojom::PageHandler>
           pending_receiver);
 
+  void BindInterface(
+      mojo::PendingReceiver<customize_color_scheme_mode::mojom::
+                                CustomizeColorSchemeModeHandlerFactory>
+          pending_receiver);
+
  private:
   // side_panel::mojom::CustomizeChromePageHandlerFactory
   void CreatePageHandler(
@@ -90,6 +99,15 @@ class CustomizeChromeUI
       mojo::PendingReceiver<help_bubble::mojom::HelpBubbleHandler> handler)
       override;
 
+  // customize_color_scheme_mode::mojom::CustomizeColorSchemeModeHandlerFactory:
+  void CreateCustomizeColorSchemeModeHandler(
+      mojo::PendingRemote<
+          customize_color_scheme_mode::mojom::CustomizeColorSchemeModeClient>
+          client,
+      mojo::PendingReceiver<
+          customize_color_scheme_mode::mojom::CustomizeColorSchemeModeHandler>
+          handler) override;
+
   std::unique_ptr<CustomizeChromePageHandler> customize_chrome_page_handler_;
   std::unique_ptr<CartHandler> cart_handler_;
   raw_ptr<Profile> profile_;
@@ -105,6 +123,11 @@ class CustomizeChromeUI
   mojo::Receiver<help_bubble::mojom::HelpBubbleHandlerFactory>
       help_bubble_handler_factory_receiver_{this};
   std::unique_ptr<ui::ColorChangeHandler> color_provider_handler_;
+  std::unique_ptr<CustomizeColorSchemeModeHandler>
+      customize_color_scheme_mode_handler_;
+  mojo::Receiver<customize_color_scheme_mode::mojom::
+                     CustomizeColorSchemeModeHandlerFactory>
+      customize_color_scheme_mode_handler_factory_receiver_{this};
 
   base::WeakPtrFactory<CustomizeChromeUI> weak_ptr_factory_{this};