customization: Finalize UI for key combination dialog

Screenshot: screenshot/3QJwjmVhsxphk9G Bug: b/241965717 Change-Id: Iccab5ba426bf440365cb8e5cf46821dd01857ed8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4978460 Reviewed-by: Yuhan Yang <yyhyyh@google.com> Commit-Queue: David Padlipsky <dpad@google.com> Reviewed-by: Wes Okuhara <wesokuhara@google.com> Cr-Commit-Position: refs/heads/main@{#1216388}
Denger-Network · Oct 27, 2023 · 1702abd · 1702abd
1 parent b0b4606
commit 1702abd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/chrome/app/os_settings_strings.grdp b/chrome/app/os_settings_strings.grdp
@@ -2808,6 +2808,9 @@ Press an assigned switch or key to remove assignment.
   <message name="IDS_SETTINGS_CUSTOMIZE_BUTTONS_RENAMING_DIALOG_TITLE" desc="Title of the button renaming dialog in customize device buttons page.">
     Change button name
   </message>
+  <message name="IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_DESCRIPTION" desc="Description of dialog that allows the user to input shortcuts that will be used as the action on a button.">
+    Press 1-4 modifier keys (ctrl, alt, shift, search, or launcher) and 1 more key. You can also select a single key.
+  </message>
   <message name="IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CANCEL" desc="Label of cancel button on dialogs in customize device buttons pages.">
     Cancel
   </message>

diff --git a/...e/app/os_settings_strings_grdp/IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_DESCRIPTION.png.sha1 b/...e/app/os_settings_strings_grdp/IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_DESCRIPTION.png.sha1
@@ -0,0 +1 @@
+884095a31026e0d408c9a2322ee65ac3fdd26cbf
diff --git a/chrome/browser/resources/ash/settings/device_page/key_combination_input_dialog.html b/chrome/browser/resources/ash/settings/device_page/key_combination_input_dialog.html
@@ -1,20 +1,31 @@
 <style include="settings-shared input-device-settings-shared">
-    #shortcut-input-container {
+  :host {
+    --cr-dialog-width: 416px;
+  }
+
+  #shortcut-input-container {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    margin:0;
+    padding: 20px 0px;
   }
 
   #shortcut-input-container:focus {
     outline: none;
   }
+
+  #dialogDescription {
+    margin: 0;
+    text-align: center;
+    padding-bottom: 24px;
+  }
 </style>
 <cr-dialog id="keyCombinationInputDialog">
   <div slot="title">$i18n{keyCombinationDialogTitle}</div>
   <div slot="body">
-    <div id="keyCombinationSubsection">
-      <!-- Display button remapping name for placeholder only. -->
-      [[buttonRemapping_.name]]
+    <div id="dialogDescription">
+      $i18n{buttonRemappingDialogDescription}
     </div>
     <div id="shortcut-input-container" class="flex-row" tabindex="-1">
       <shortcut-input id="shortcutInput"

diff --git a/chrome/browser/ui/webui/ash/settings/pages/device/device_section.cc b/chrome/browser/ui/webui/ash/settings/pages/device/device_section.cc
@@ -1717,6 +1717,8 @@ void DeviceSection::AddCustomizeButtonsPageStrings(
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_RENAMING_DIALOG_INPUT_LABEL},
       {"buttonRemappingDialogCancelLabel",
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CANCEL},
+      {"buttonRemappingDialogDescription",
+       IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_DESCRIPTION},
       {"buttonRemappingDialogSaveLabel",
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_SAVE},
       {"buttonRemappingDropdownAriaLabel",