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 <[email protected]>
Reviewed-by: Erik Luo <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#630536}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cb6d45c7e2f0741491fb07a0f20bd50c7e1f05ce
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);
}