commit 57b9fada00cb994129d6dcc99780ac52643369bf
author Joel Einbinder <einbinder@chromium.org> Fri Feb 08 23:31:35 2019
committer Commit Bot <commit-bot@chromium.org> Fri Feb 08 23:31:35 2019
tree 3be674b992058239c86bd44253b4f9ed8e6ea9d0
parent cb28fa5e88175e8384208ed0bd0b270425a1f1da

DevTools: Make the dock side controller keyboard navigable

https://i.imgur.com/HP6fuOT.png

Bug: 907703
Change-Id: I08b11e488fbf0a237858f03917290f66d4ef47ff
Reviewed-on: https://chromium-review.googlesource.com/c/1450753
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#630536}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cb6d45c7e2f0741491fb07a0f20bd50c7e1f05ce

front_end/main/Main.js

diff --git a/front_end/main/Main.js b/front_end/main/Main.js
index ea1a21d..bab894d 100644
--- a/front_end/main/Main.js
+++ b/front_end/main/Main.js
@@ -489,6 +489,7 @@
   _handleContextMenu(contextMenu) {
     if (Components.dockController.canDock()) {
       const dockItemElement = createElementWithClass('div', 'flex-centered flex-auto');
+      dockItemElement.tabIndex = -1;
       const titleElement = dockItemElement.createChild('span', 'flex-auto');
       titleElement.textContent = Common.UIString('Dock side');
       const toggleDockSideShorcuts = UI.shortcutRegistry.shortcutDescriptorsForAction('main.toggle-dock');
@@ -507,13 +508,13 @@
       right.addEventListener(UI.ToolbarButton.Events.MouseDown, event => event.data.consume());
       left.addEventListener(UI.ToolbarButton.Events.MouseDown, event => event.data.consume());
       undock.addEventListener(
-          UI.ToolbarButton.Events.MouseUp, setDockSide.bind(null, Components.DockController.State.Undocked));
+          UI.ToolbarButton.Events.Click, setDockSide.bind(null, Components.DockController.State.Undocked));
       bottom.addEventListener(
-          UI.ToolbarButton.Events.MouseUp, setDockSide.bind(null, Components.DockController.State.DockedToBottom));
+          UI.ToolbarButton.Events.Click, setDockSide.bind(null, Components.DockController.State.DockedToBottom));
       right.addEventListener(
-          UI.ToolbarButton.Events.MouseUp, setDockSide.bind(null, Components.DockController.State.DockedToRight));
+          UI.ToolbarButton.Events.Click, setDockSide.bind(null, Components.DockController.State.DockedToRight));
       left.addEventListener(
-          UI.ToolbarButton.Events.MouseUp, setDockSide.bind(null, Components.DockController.State.DockedToLeft));
+          UI.ToolbarButton.Events.Click, setDockSide.bind(null, Components.DockController.State.DockedToLeft));
       undock.setToggled(Components.dockController.dockSide() === Components.DockController.State.Undocked);
       bottom.setToggled(Components.dockController.dockSide() === Components.DockController.State.DockedToBottom);
       right.setToggled(Components.dockController.dockSide() === Components.DockController.State.DockedToRight);
@@ -522,6 +523,22 @@
       dockItemToolbar.appendToolbarItem(left);
       dockItemToolbar.appendToolbarItem(bottom);
       dockItemToolbar.appendToolbarItem(right);
+      dockItemElement.addEventListener('keydown', event => {
+        let dir = 0;
+        if (event.key === 'ArrowLeft')
+          dir = -1;
+        else if (event.key === 'ArrowRight')
+          dir = 1;
+        else
+          return;
+
+        const buttons = [undock, left, bottom, right];
+        let index = buttons.findIndex(button => button.element.hasFocus());
+        index = Number.constrain(index + dir, 0, buttons.length - 1);
+
+        buttons[index].element.focus();
+        event.consume(true);
+      });
       contextMenu.headerSection().appendCustomItem(dockItemElement);
     }