History WebUI: Allow users to use arrow keys to navigate menu

Bug: 1110405
Change-Id: I6de7525fa89373a5d2be46028865cef06b9508f4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2454393
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#815309}

chrome/browser/resources/history/BUILD.gn

@@ -190,6 +190,7 @@ js_library("side_bar") {
     "//third_party/polymer/v3_0/components-chromium/iron-selector:iron-selector",
     "//third_party/polymer/v3_0/components-chromium/paper-ripple:paper-ripple",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_menu_selector:cr_menu_selector",
     "//ui/webui/resources/js:load_time_data.m",
   ]
 }

chrome/browser/resources/history/side_bar.html

     <style include="shared-style cr-icons">
       :host {
         display: flex;
+        flex-direction: column;
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
@@ -94,36 +95,40 @@
       }
     </style>
 
-    <iron-selector id="menu" selected="{{selectedPage}}"
-        selectable=".page-item" attr-for-selected="path"
-        on-iron-activate="onSelectorActivate_">
-      <a href="/" class="page-item" path="history" on-click="onItemClick_">
-        $i18n{historyMenuItem}
-        <paper-ripple></paper-ripple>
-      </a>
-      <a href="/syncedTabs" class="page-item" path="syncedTabs"
-          on-click="onItemClick_">
-        $i18n{openTabsMenuItem}
-        <paper-ripple></paper-ripple>
-      </a>
-      <div class="separator"></div>
-      <a id="clear-browsing-data"
-          href="chrome://settings/clearBrowserData"
-          on-click="onClearBrowsingDataTap_"
-          disabled$="[[guestSession_]]"
-          tabindex$="[[computeClearBrowsingDataTabIndex_(guestSession_)]]">
-        $i18n{clearBrowsingData}
-        <div class="cr-icon icon-external"></div>
-        <paper-ripple id="cbd-ripple"></paper-ripple>
-      </a>
-      <div id="spacer"></div>
-      <div id="footer" hidden="[[!showFooter_]]">
+    <cr-menu-selector>
+      <iron-selector id="menu" selected="{{selectedPage}}"
+          selectable=".page-item" attr-for-selected="path"
+          on-iron-activate="onSelectorActivate_">
+        <a role="menuitem" href="/" class="page-item" path="history"
+            on-click="onItemClick_">
+          $i18n{historyMenuItem}
+          <paper-ripple></paper-ripple>
+        </a>
+        <a role="menuitem" href="/syncedTabs" class="page-item"
+            path="syncedTabs" on-click="onItemClick_">
+          $i18n{openTabsMenuItem}
+          <paper-ripple></paper-ripple>
+        </a>
         <div class="separator"></div>
-        <managed-footnote></managed-footnote>
-        <div id="google-account-footer"
-             hidden="[[!footerInfo.otherFormsOfHistory]]">
-          <iron-icon icon="cr:info-outline"></iron-icon>
-          <div>$i18nRaw{sidebarFooter}</div>
-        </div>
+        <a role="menuitem" id="clear-browsing-data"
+            href="chrome://settings/clearBrowserData"
+            on-click="onClearBrowsingDataTap_"
+            disabled$="[[guestSession_]]"
+            tabindex$="[[computeClearBrowsingDataTabIndex_(guestSession_)]]">
+          $i18n{clearBrowsingData}
+          <div class="cr-icon icon-external"></div>
+          <paper-ripple id="cbd-ripple"></paper-ripple>
+        </a>
+      </iron-selector>
+    </cr-menu-selector>
+
+    <div id="spacer"></div>
+    <div id="footer" hidden="[[!showFooter_]]">
+      <div class="separator"></div>
+      <managed-footnote></managed-footnote>
+      <div id="google-account-footer"
+          hidden="[[!footerInfo.otherFormsOfHistory]]">
+        <iron-icon icon="cr:info-outline"></iron-icon>
+        <div>$i18nRaw{sidebarFooter}</div>
       </div>
-    </iron-selector>
+    </div>
\ No newline at end of file

chrome/browser/resources/history/side_bar.js

@@ -2,22 +2,25 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import 'chrome://resources/cr_components/managed_footnote/managed_footnote.m.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
+import 'chrome://resources/cr_elements/cr_menu_selector/cr_menu_selector.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {IronA11yKeysBehavior} from 'chrome://resources/polymer/v3_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import 'chrome://resources/polymer/v3_0/paper-ripple/paper-ripple.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/typography.js';
-import {BrowserService} from './browser_service.js';
 import './shared_style.js';
 import './strings.js';
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {IronA11yKeysBehavior} from 'chrome://resources/polymer/v3_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {BrowserService} from './browser_service.js';
+
 /**
  * @typedef {{
  *   managed: boolean,