DevTools: Navigate TabbedPane with arrow keys

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

Index: third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
index a578b774e1ce12d82f7b5394b17dde3d361e68e0..61057821b32b4ea9c91f86c5b696daa1a6760aed 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
@@ -43,6 +43,7 @@ UI.TabbedPane = class extends UI.VBox {
     this._tabSlider = createElementWithClass('div', 'tabbed-pane-tab-slider');
     this._tabsElement = this._headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
     this._tabsElement.setAttribute('role', 'tablist');
+    this._tabsElement.addEventListener('keydown', this._keyDown.bind(this), false);
     this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
     this._contentElement.setAttribute('role', 'tabpanel');
     this._contentElement.createChild('content');
@@ -543,6 +544,7 @@ UI.TabbedPane = class extends UI.VBox {
     var dropDownContainer = createElementWithClass('div', 'tabbed-pane-header-tabs-drop-down-container');
     var chevronIcon = UI.Icon.create('largeicon-chevron', 'chevron-icon');
     dropDownContainer.appendChild(chevronIcon);
+    dropDownContainer.addEventListener('click', this._onDropDownMouseDown.bind(this));

[aboxhall, 2017/04/12 07:25:06]

Do we need to make sure we don't run all this code again when a mouse user
releases the mouse button and the click event fires?

[einbinder, 2017/04/17 21:46:39]

The ContextMenu consumes the mousedown event if it is shown, so the click event
isn't fired.

[aboxhall, 2017/04/17 23:03:36]

Oh right :)

     dropDownContainer.addEventListener('mousedown', this._onDropDownMouseDown.bind(this));
     return dropDownContainer;
   }
@@ -553,7 +555,15 @@ UI.TabbedPane = class extends UI.VBox {
   _onDropDownMouseDown(event) {
     if (event.which !== 1)
       return;
-    var menu = new UI.ContextMenu(event);
+    var x = event.x;
+    var y = event.y;
+    // This wasn't a mouse event, manually set the position

[aboxhall, 2017/04/12 07:25:06]

Can we just do this normally? It doesn't seem like there's much to gain from
getting the exact mouse position within that tiny click target anyway. 

[einbinder, 2017/04/17 21:46:39]

Done.

+    if (!x && !y) {
+      var rect = this._dropDownButton.getBoundingClientRect();
+      x = (rect.left + rect.right) / 2;
+      y = (rect.top + rect.bottom) / 2;
+    }
+    var menu = new UI.ContextMenu(event, false, x, y);
     for (var i = 0; i < this._tabs.length; ++i) {
       var tab = this._tabs[i];
       if (tab._shown)
@@ -756,6 +766,7 @@ UI.TabbedPane = class extends UI.VBox {
    * @param {!UI.TabbedPaneTab} tab
    */
   _showTab(tab) {
+    tab.tabElement.tabIndex = 0;
     tab.tabElement.classList.add('selected');
     UI.ARIAUtils.setSelected(tab.tabElement, true);
     tab.view.show(this.element);
@@ -781,6 +792,7 @@ UI.TabbedPane = class extends UI.VBox {
    * @param {!UI.TabbedPaneTab} tab
    */
   _hideTab(tab) {
+    tab.tabElement.tabIndex = -1;

[aboxhall, 2017/04/12 07:25:06]

Can just remove the tabIndex attribute instead (preferable, since that makes it
completely unfocusable - moot in this case since it's detached but better
practice in general)

[einbinder, 2017/04/17 21:46:39]

Done.

     tab.tabElement.classList.remove('selected');
     tab.tabElement.setAttribute('aria-selected', 'false');
     tab.view.detach();
@@ -842,6 +854,38 @@ UI.TabbedPane = class extends UI.VBox {
     this._allowTabReorder = allow;
     this._automaticReorder = automatic;
   }
+
+  /**
+   * @param {!Event} event
+   */
+  _keyDown(event) {
+    if (!this._currentTab)
+      return;
+    var nextTab = null;

[aboxhall, 2017/04/12 07:25:06]

s/nextTab/nextTabElement/ ?

[einbinder, 2017/04/17 21:46:39]

Done.

+    switch (event.keyCode) {
+      case UI.KeyboardShortcut.Keys.Up.code:
+      case UI.KeyboardShortcut.Keys.Left.code:
+        nextTab = this._currentTab.tabElement.previousElementSibling;
+        if (!nextTab && !this._dropDownButton.parentElement)
+          nextTab = this._currentTab.tabElement.parentElement.lastElementChild;
+        break;
+      case UI.KeyboardShortcut.Keys.Down.code:
+      case UI.KeyboardShortcut.Keys.Right.code:
+        nextTab = this._currentTab.tabElement.nextElementSibling;
+        if (!nextTab && !this._dropDownButton.parentElement)
+          nextTab = this._currentTab.tabElement.parentElement.firstElementChild;
+        break;
+      default:
+        return;
+    }
+    if (!nextTab) {
+      this._dropDownButton.click();

[aboxhall, 2017/04/12 07:25:06]

This is pretty counter-intuitive - maybe extract the code in
_onDropDownMouseDown() into something like "showRemainingTabs()" (or whatever)
and just call that?

[einbinder, 2017/04/17 21:46:39]

I need the event to construct the ContextMenu. I tried to untangle Events and
ContextMenus but it proved difficult.

[aboxhall, 2017/04/17 23:03:36]

Ah, I see. Yeah it's a bit of a hack using a context menu here really but it
would be a ton of work to unwind.

+      return;
+    }
+    var tab = this._tabs.find(tab => tab.tabElement === nextTab);
+    this.selectTab(tab.id, true);
+    nextTab.focus();
+  }
 };
 
 /** @enum {symbol} */