[RPP] Add border to radio buttons and switch a few keys in the shortcuts dialog

Bug: 313757601
Change-Id: I30f8aa9394e7489baef2509901a65c6320802c14
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6037605
Auto-Submit: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Nancy Li <[email protected]>

Author: AlinaVarkki

front_end/panels/timeline/TimelinePanel.ts

@@ -1146,12 +1146,15 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     return [
-      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Scroll'], ['Shift', 'up/down']]},
-      {title: i18nString(UIStrings.timelineZoomInOut), bindings: [['Cmd', 'Scroll'], ['W/S'], ['+/-']]},
+      {title: i18nString(UIStrings.timelineScrollUpDown), bindings: [['Scroll'], ['Shift', '↑/↓']]},
+      {
+        title: i18nString(UIStrings.timelineZoomInOut),
+        bindings: [[Host.Platform.isMac() ? '⌘' : 'Ctrl', 'Scroll'], ['W/S'], ['+/-']],
+      },
       {title: i18nString(UIStrings.timelineFastZoomInOut), bindings: [['Shift', 'W/S'], ['Shift', '+/-']]},
       {
         title: i18nString(UIStrings.timelinePanLeftRight),
-        bindings: [['A/D'], ['Shift', 'Scroll'], ['Shift', 'left/right']],
+        bindings: [['A/D'], ['Shift', 'Scroll'], ['Shift', '←/→']],
       },
     ];
   }

front_end/ui/components/dialogs/shortcutDialog.css

@@ -70,8 +70,9 @@
 .nav-radio-buttons {
   display: flex;
   flex-direction: column;
-  padding: 0 var(--sys-size-8);
+  padding: 0 var(--sys-size-8) var(--sys-size-4) var(--sys-size-8);
   gap: var(--sys-size-3);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .keybinds-key {