customization: Update dialog change button

Change the edit cr-icon-button to regular cr-button and move it to the bottom left of the dialog. Screenshots: initial state: https://screenshot.googleplex.com/6ntbFDgXo3CUkSq key combination view state: https://screenshot.googleplex.com/9VeUJA84HzRW4kk Bug: b/241965717 Test: Verified UI manually Change-Id: Ib2d86f193e60533a914527510e48658d34759a9c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5096456 Reviewed-by: Wes Okuhara <wesokuhara@google.com> Reviewed-by: David Padlipsky <dpad@google.com> Commit-Queue: Yuhan Yang <yyhyyh@google.com> Cr-Commit-Position: refs/heads/main@{#1236494}
qweri0p · Dec 12, 2023 · f8ec54c · f8ec54c
1 parent 0222b01
commit f8ec54c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 14 deletions.
diff --git a/chrome/app/os_settings_strings.grdp b/chrome/app/os_settings_strings.grdp
@@ -2820,6 +2820,9 @@ Press an assigned switch or key to remove assignment.
   <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_CHANGE" desc="Label of change button on dialogs in customize device buttons pages.">
+    Change
+  </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/chrome/app/os_settings_strings_grdp/IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CHANGE.png.sha1 b/chrome/app/os_settings_strings_grdp/IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CHANGE.png.sha1
@@ -0,0 +1 @@
+ad2e40375a43a66d949ac408a58956103309f535
diff --git a/chrome/browser/resources/ash/settings/device_page/input_device_settings_shared.css b/chrome/browser/resources/ash/settings/device_page/input_device_settings_shared.css
@@ -44,9 +44,9 @@
 }
 
 cr-dialog [slot='button-container'] {
-  padding: 0 32px 28px 32px;
   display: flex;
-  gap: 8px;
+  justify-content: space-between;
+  padding: 0 32px 28px 32px;
 }
 
 cr-dialog [slot='body'] {
@@ -57,7 +57,8 @@ cr-dialog [slot='title'] {
   padding: 32px 32px 0 32px;
 }
 
-cr-dialog #cancelButton {
+cr-dialog #cancelButton,
+cr-dialog #editButton {
   background-color: var(--cros-bg-color);
   border: solid 1px var(--cros-button-stroke-color-secondary);
 }

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
@@ -20,6 +20,11 @@
     text-align: center;
     padding-bottom: 24px;
   }
+
+  .right-button-group {
+    display: flex;
+    gap: 8px;
+  }
 </style>
 <cr-dialog id="keyCombinationInputDialog">
   <div slot="title">$i18n{keyCombinationDialogTitle}</div>
@@ -32,24 +37,23 @@
           shortcut-input-provider="[[getShortcutProvider()]]"
           show-separator="true">
       </shortcut-input>
-      <template is="dom-if" if="[[shouldShowEditButton_(isCapturing)]]">
-        <div class="edit-icon-container">
-          <cr-icon-button class="edit-button"
-              iron-icon="os-settings:edit"
-              on-click="onEditButtonClicked_">
-          </cr-icon-button>
-        </div>
-      </template>
     </div>
   </div>
   <div slot="button-container">
-    <div>
+    <div class="left-button-group">
+      <template is="dom-if" if="[[shouldShowEditButton_(isCapturing)]]">
+        <cr-button class="edit-button"
+            id="editButton"
+            on-click="onEditButtonClicked_">
+          $i18n{buttonRemappingDialogChangeLabel}
+        </cr-button>
+      </template>
+    </div>
+    <div class="right-button-group">
       <cr-button id="cancelButton"
           on-click="cancelDialogClicked_">
         $i18n{buttonRemappingDialogCancelLabel}
       </cr-button>
-    </div>
-    <div>
       <cr-button id="saveButton" class="action-button"
           on-click="saveDialogClicked_"
           disabled$="[[shouldDisableSaveButton_(inputKeyEvent)]]">

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
@@ -1756,6 +1756,8 @@ void DeviceSection::AddCustomizeButtonsPageStrings(
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_RENAMING_DIALOG_INPUT_LABEL},
       {"buttonRemappingDialogCancelLabel",
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CANCEL},
+      {"buttonRemappingDialogChangeLabel",
+       IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_CHANGE},
       {"buttonRemappingDialogDescription",
        IDS_SETTINGS_CUSTOMIZE_BUTTONS_DIALOG_DESCRIPTION},
       {"buttonRemappingDialogSaveLabel",