Add kbd backlight color icon to kbd brightness slider

Add another icon to the right of the slider to indicate rgb kbd colors
are available. The icon's background color reflects the color option provided from personalization hub. Clicking on the icon will open the
hub.

Rainbow background for the icon will be added in a subsequent CL.

Screenshot: https://screenshot.googleplex.com/8rp74K7D3Uztz4F

BUG=b/233380015
TEST=Manually

Cq-Include-Trybots: luci.chrome.try:linux-chromeos-chrome
Change-Id: I2bede615ba4551f7e28bb03a548a56a0be75d1e5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3653302
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Jason Thai <jasontt@chromium.org>
Reviewed-by: Sam McNally <sammc@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1007194}

ash/ash_strings.grd

@@ -5002,7 +5002,9 @@ New install
       <message name="IDS_ASH_KEYBOARD_BACKLIGHT_COLOR_EDUCATION_NUDGE_TEXT" desc="The body text suggesting that the user can change the keyboard backlight color">
         You can change the color of your keyboard backlight in Settings > <ph name="APP_TITLE">$1<ex>Wallpaper &amp; style</ex></ph>
       </message>
-
+      <message name="IDS_ASH_STATUS_TRAY_KEYBOARD_BACKLIGHT_ACCESSIBLE_NAME" desc="The accessible text for the brightness slider keyboard backlight icon.">
+        Keyboard backlight color
+      </message>
     </messages>
   </release>
 </grit>

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_KEYBOARD_BACKLIGHT_ACCESSIBLE_NAME.png.sha1

@@ -0,0 +1 @@
+e41f88180a76eb9cc121b1008a2657e8ea29cda3

ash/resources/vector_icons/BUILD.gn

@@ -442,6 +442,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "unified_menu_expand.icon",
     "unified_menu_info.icon",
     "unified_menu_keyboard.icon",
+    "unified_menu_keyboard_backlight.icon",
     "unified_menu_keyboard_brightness.icon",
     "unified_menu_locale.icon",
     "unified_menu_lock.icon",

ash/resources/vector_icons/unified_menu_keyboard_backlight.icon

@@ -0,0 +1,51 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 3, 10,
+CUBIC_TO, 3, 13.86f, 6.14f, 17, 10, 17,
+CUBIC_TO, 10.97f, 17, 11.75f, 16.22f, 11.75f, 15.25f,
+CUBIC_TO, 11.75f, 14.82f, 11.59f, 14.41f, 11.3f, 14.08f,
+CUBIC_TO, 11.25f, 14.01f, 11.21f, 13.93f, 11.21f, 13.85f,
+CUBIC_TO, 11.21f, 13.65f, 11.36f, 13.5f, 11.56f, 13.5f,
+H_LINE_TO, 12.8f,
+CUBIC_TO, 15.12f, 13.5f, 17, 11.62f, 17, 9.3f,
+CUBIC_TO, 17, 5.83f, 13.86f, 3, 10, 3,
+CUBIC_TO, 6.14f, 3, 3, 6.14f, 3, 10,
+CLOSE,
+MOVE_TO, 5, 10,
+CUBIC_TO, 5, 7.24f, 7.24f, 5, 10, 5,
+CUBIC_TO, 12.76f, 5, 15, 6.96f, 15, 9.38f,
+CUBIC_TO, 15, 10.76f, 14, 12, 12, 12,
+H_LINE_TO, 11,
+CUBIC_TO, 10.14f, 12, 9.33f, 12.58f, 9.33f, 13.44f,
+CUBIC_TO, 9.33f, 13.81f, 9.47f, 14.18f, 9.73f, 14.47f,
+CUBIC_TO, 9.76f, 14.51f, 9.81f, 14.59f, 9.81f, 14.69f,
+CUBIC_TO, 9.81f, 14.86f, 9.68f, 15, 9.5f, 15,
+CUBIC_TO, 6.74f, 15, 5, 12.76f, 5, 10,
+CLOSE,
+MOVE_TO, 7, 12,
+CUBIC_TO, 7.55f, 12, 8, 11.55f, 8, 11,
+CUBIC_TO, 8, 10.45f, 7.55f, 10, 7, 10,
+CUBIC_TO, 6.45f, 10, 6, 10.45f, 6, 11,
+CUBIC_TO, 6, 11.55f, 6.45f, 12, 7, 12,
+CLOSE,
+MOVE_TO, 8.7f, 8,
+CUBIC_TO, 8.7f, 8.55f, 8.25f, 9, 7.7f, 9,
+CUBIC_TO, 7.15f, 9, 6.7f, 8.55f, 6.7f, 8,
+CUBIC_TO, 6.7f, 7.45f, 7.15f, 7, 7.7f, 7,
+CUBIC_TO, 8.25f, 7, 8.7f, 7.45f, 8.7f, 8,
+CLOSE,
+MOVE_TO, 10.7f, 8,
+CUBIC_TO, 11.25f, 8, 11.7f, 7.55f, 11.7f, 7,
+CUBIC_TO, 11.7f, 6.45f, 11.25f, 6, 10.7f, 6,
+CUBIC_TO, 10.15f, 6, 9.7f, 6.45f, 9.7f, 7,
+CUBIC_TO, 9.7f, 7.55f, 10.15f, 8, 10.7f, 8,
+CLOSE,
+MOVE_TO, 14, 9,
+CUBIC_TO, 14, 9.55f, 13.55f, 10, 13, 10,
+CUBIC_TO, 12.45f, 10, 12, 9.55f, 12, 9,
+CUBIC_TO, 12, 8.45f, 12.45f, 8, 13, 8,
+CUBIC_TO, 13.55f, 8, 14, 8.45f, 14, 9,
+CLOSE

ash/rgb_keyboard/rgb_keyboard_util.cc

@@ -4,13 +4,38 @@
 
 #include "ash/rgb_keyboard/rgb_keyboard_util.h"
 
+#include "ash/public/cpp/wallpaper/wallpaper_types.h"
+#include "ash/shell.h"
+#include "ash/wallpaper/wallpaper_controller_impl.h"
 #include "ash/webui/personalization_app/mojom/personalization_app.mojom.h"
+#include "ui/gfx/color_analysis.h"
 
 namespace ash {
 
 SkColor ConvertBacklightColorToSkColor(
     personalization_app::mojom::BacklightColor backlight_color) {
   switch (backlight_color) {
+    case personalization_app::mojom::BacklightColor::kWallpaper: {
+      auto* wallpaper_controller = Shell::Get()->wallpaper_controller();
+      DCHECK(wallpaper_controller);
+      // Attempt to get the prominent colors by using different |LumaRange| and
+      // |SaturationRange|. Depending on the combination of these values and the
+      // current wallpaper, the |color| may be invalid.
+      SkColor color = wallpaper_controller->GetProminentColor(
+          color_utils::ColorProfile(color_utils::LumaRange::NORMAL,
+                                    color_utils::SaturationRange::VIBRANT));
+      if (color == kInvalidWallpaperColor) {
+        color = wallpaper_controller->GetProminentColor(
+            color_utils::ColorProfile(color_utils::LumaRange::LIGHT,
+                                      color_utils::SaturationRange::VIBRANT));
+      }
+      if (color == kInvalidWallpaperColor) {
+        color = wallpaper_controller->GetProminentColor(
+            color_utils::ColorProfile(color_utils::LumaRange::DARK,
+                                      color_utils::SaturationRange::VIBRANT));
+      }
+      return color;
+    }
     case personalization_app::mojom::BacklightColor::kWhite:
       return SkColorSetRGB(/*r=*/255, /*g=*/255, /*b=*/210);
     case personalization_app::mojom::BacklightColor::kRed:
@@ -30,4 +55,36 @@ SkColor ConvertBacklightColorToSkColor(
   }
 }
 
+SkColor ConvertBacklightColorToIconBackgroundColor(
+    personalization_app::mojom::BacklightColor backlight_color) {
+  switch (backlight_color) {
+    case personalization_app::mojom::BacklightColor::kWhite:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kWhiteColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kRed:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kRedColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kYellow:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kYellowColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kGreen:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kGreenColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kBlue:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kBlueColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kIndigo:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kIndigoColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kPurple:
+      return SkColorSetA(
+          static_cast<SkColor>(personalization_app::mojom::kPurpleColor), 0xFF);
+    case personalization_app::mojom::BacklightColor::kWallpaper:
+      return ConvertBacklightColorToSkColor(
+          personalization_app::mojom::BacklightColor::kWallpaper);
+    default:
+      return kInvalidColor;
+  }
+}
+
 }  // namespace ash

ash/rgb_keyboard/rgb_keyboard_util.h

@@ -18,6 +18,15 @@ inline constexpr SkColor kInvalidColor = SK_ColorTRANSPARENT;
 ASH_EXPORT SkColor ConvertBacklightColorToSkColor(
     personalization_app::mojom::BacklightColor backlight_color);
 
+// Util method to convert the |BacklightColor| enum to a |SkColor| that is used
+// as the background color for the rgb icon displayed in the system's keyboard
+// brightness slider. The color is different from the color returned by
+// |ConvertBacklightColorToSkColor| and matches the color displayed in the
+// personalization hub as the actual rgb keyboard colors appear to be visually
+// darker than what the UX wants to show to users.
+SkColor ConvertBacklightColorToIconBackgroundColor(
+    personalization_app::mojom::BacklightColor backlight_color);
+
 }  // namespace ash
 
 #endif  // ASH_RGB_KEYBOARD_RGB_KEYBOARD_UTIL_H_

ash/system/keyboard_brightness/keyboard_backlight_color_controller.cc

@@ -18,7 +18,6 @@
 #include "components/prefs/pref_registry_simple.h"
 #include "components/prefs/pref_service.h"
 #include "third_party/skia/include/core/SkColor.h"
-#include "ui/gfx/color_analysis.h"
 
 namespace ash {
 
@@ -52,16 +51,7 @@ void KeyboardBacklightColorController::SetBacklightColor(
   DCHECK(rgb_keyboard_manager);
   DVLOG(3) << __func__ << " backlight_color=" << backlight_color;
   switch (backlight_color) {
-    case personalization_app::mojom::BacklightColor::kWallpaper: {
-      auto* wallpaper_controller = Shell::Get()->wallpaper_controller();
-      DCHECK(wallpaper_controller);
-      SkColor color = wallpaper_controller->GetProminentColor(
-          color_utils::ColorProfile(color_utils::LumaRange::NORMAL,
-                                    color_utils::SaturationRange::VIBRANT));
-      rgb_keyboard_manager->SetStaticBackgroundColor(
-          SkColorGetR(color), SkColorGetG(color), SkColorGetB(color));
-      break;
-    }
+    case personalization_app::mojom::BacklightColor::kWallpaper:
     case personalization_app::mojom::BacklightColor::kWhite:
     case personalization_app::mojom::BacklightColor::kRed:
     case personalization_app::mojom::BacklightColor::kYellow:

ash/system/keyboard_brightness/unified_keyboard_brightness_slider_controller.cc

@@ -4,15 +4,31 @@
 
 #include "ash/system/keyboard_brightness/unified_keyboard_brightness_slider_controller.h"
 
+#include <memory>
+
+#include "ash/constants/ash_features.h"
+#include "ash/public/cpp/new_window_delegate.h"
 #include "ash/resources/vector_icons/vector_icons.h"
+#include "ash/rgb_keyboard/rgb_keyboard_manager.h"
+#include "ash/rgb_keyboard/rgb_keyboard_util.h"
+#include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/system/keyboard_brightness/keyboard_backlight_color_controller.h"
 #include "ash/system/unified/unified_system_tray_model.h"
+#include "ash/webui/personalization_app/mojom/personalization_app.mojom-forward.h"
+#include "base/bind.h"
+#include "base/memory/weak_ptr.h"
 #include "chromeos/dbus/power/power_manager_client.h"
 
 namespace ash {
 
 namespace {
 
+// Only applicable when rgb keyboard is supported.
+const SkColor keyboardBrightnessIconBackgroundColor =
+    SkColorSetRGB(138, 180, 248);
+
 class UnifiedKeyboardBrightnessView : public UnifiedSliderView,
                                       public UnifiedSystemTrayModel::Observer {
  public:
@@ -25,6 +41,12 @@ class UnifiedKeyboardBrightnessView : public UnifiedSliderView,
                           IDS_ASH_STATUS_TRAY_BRIGHTNESS,
                           true /* readonly*/),
         model_(model) {
+    if (features::IsRgbKeyboardEnabled() &&
+        Shell::Get()->rgb_keyboard_manager()->IsRgbKeyboardSupported() &&
+        features::IsPersonalizationHubEnabled()) {
+      button()->SetBackgroundColor(keyboardBrightnessIconBackgroundColor);
+      AddChildView(CreateKeyboardBacklightColorButton());
+    }
     model_->AddObserver(this);
     OnKeyboardBrightnessChanged(
         power_manager::BacklightBrightnessChange_Cause_OTHER);
@@ -45,7 +67,33 @@ class UnifiedKeyboardBrightnessView : public UnifiedSliderView,
   }
 
  private:
+  std::unique_ptr<views::ImageButton> CreateKeyboardBacklightColorButton() {
+    auto button = std::make_unique<IconButton>(
+        base::BindRepeating(
+            &UnifiedKeyboardBrightnessView::OnKeyboardBacklightColorIconPressed,
+            weak_factory_.GetWeakPtr()),
+        IconButton::Type::kSmall, &kUnifiedMenuKeyboardBacklightIcon,
+        IDS_ASH_STATUS_TRAY_KEYBOARD_BACKLIGHT_ACCESSIBLE_NAME);
+    button->SetBackgroundColor(ConvertBacklightColorToIconBackgroundColor(
+        Shell::Get()
+            ->keyboard_backlight_color_controller()
+            ->GetBacklightColor()));
+    button->SetBorder(views::CreateRoundedRectBorder(
+        /*thickness=*/4, /*corner_radius=*/16,
+        AshColorProvider::Get()->GetContentLayerColor(
+            AshColorProvider::ContentLayerType::kSeparatorColor)));
+    return button;
+  }
+
+  void OnKeyboardBacklightColorIconPressed() {
+    NewWindowDelegate* primary_delegate = NewWindowDelegate::GetPrimary();
+    primary_delegate->OpenPersonalizationHub();
+    return;
+  }
+
   UnifiedSystemTrayModel* const model_;
+
+  base::WeakPtrFactory<UnifiedKeyboardBrightnessView> weak_factory_{this};
 };
 
 }  // namespace

ash/webui/personalization_app/mojom/personalization_app.mojom

@@ -546,6 +546,15 @@ enum BacklightColor {
   kRainbow = 100,
 };
 
+// Hex values of the colors displayed in the rgb keyboard section.
+const uint32 kWhiteColor = 0xFFFFFF;
+const uint32 kRedColor = 0xF28B82;
+const uint32 kYellowColor = 0xFDD663;
+const uint32 kGreenColor = 0x81C995;
+const uint32 kBlueColor = 0x78D9EC;
+const uint32 kIndigoColor = 0x8AB4F8;
+const uint32 kPurpleColor = 0xC58AF9;
+
 // Receives information whenever there are keyboard backlight related changes
 // such as backlight colors.
 interface KeyboardBacklightObserver {

ash/webui/personalization_app/resources/trusted/keyboard_backlight/keyboard_backlight_element.ts

@@ -13,7 +13,7 @@ import {IronA11yKeysElement} from 'chrome://resources/polymer/v3_0/iron-a11y-key
 import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 
 import {isSelectionEvent} from '../../common/utils.js';
-import {BacklightColor} from '../personalization_app.mojom-webui.js';
+import {BacklightColor, BLUE_COLOR, GREEN_COLOR, INDIGO_COLOR, PURPLE_COLOR, RED_COLOR, WHITE_COLOR, YELLOW_COLOR} from '../personalization_app.mojom-webui.js';
 import {WithPersonalizationStore} from '../personalization_store.js';
 
 import {setBacklightColor} from './keyboard_backlight_controller.js';
@@ -101,13 +101,34 @@ export class KeyboardBacklight extends WithPersonalizationStore {
 
   private computePresetColors_(): Record<string, ColorInfo> {
     return {
-      'whiteColor': {hexVal: '#FFFFFF', enumVal: BacklightColor.kWhite},
-      'redColor': {hexVal: '#F28B82', enumVal: BacklightColor.kRed},
-      'yellowColor': {hexVal: '#FDD663', enumVal: BacklightColor.kYellow},
-      'greenColor': {hexVal: '#81C995', enumVal: BacklightColor.kGreen},
-      'blueColor': {hexVal: '#78D9EC', enumVal: BacklightColor.kBlue},
-      'indigoColor': {hexVal: '#8AB4F8', enumVal: BacklightColor.kIndigo},
-      'purpleColor': {hexVal: '#C58AF9', enumVal: BacklightColor.kPurple},
+      'whiteColor': {
+        hexVal: `#${WHITE_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kWhite,
+      },
+      'redColor': {
+        hexVal: `#${RED_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kRed,
+      },
+      'yellowColor': {
+        hexVal: `#${YELLOW_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kYellow,
+      },
+      'greenColor': {
+        hexVal: `#${GREEN_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kGreen,
+      },
+      'blueColor': {
+        hexVal: `#${BLUE_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kBlue,
+      },
+      'indigoColor': {
+        hexVal: `#${INDIGO_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kIndigo,
+      },
+      'purpleColor': {
+        hexVal: `#${PURPLE_COLOR.toString(16)}`,
+        enumVal: BacklightColor.kPurple,
+      },
     };
   }