DevTools: Navigate TabbedPane with arrow keys

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

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 25 matching lines @@
     super(true);
     this.registerRequiredCSS('ui/tabbedPane.css');
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
     this.contentElement.tabIndex = -1;
     this._headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
     this._headerContentsElement = this._headerElement.createChild('div', 'tabbed-pane-header-contents');
     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');
     /** @type {!Array.<!UI.TabbedPaneTab>} */
     this._tabs = [];
     /** @type {!Array.<!UI.TabbedPaneTab>} */
     this._tabsHistory = [];
     /** @type {!Map<string, !UI.TabbedPaneTab>} */
     this._tabsById = new Map();
     this._currentTabLocked = false;
@@ skipping 480 matching lines @@
    */
   _hideTabElement(tab) {
     this._tabsElement.removeChild(tab.tabElement);
     tab._shown = false;
   }
 
   _createDropDownButton() {
     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;
   }
 
   /**
    * @param {!Event} event
    */
   _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)
         continue;
       menu.appendCheckboxItem(tab.title, this._dropDownMenuItemSelected.bind(this, tab), this._tabsHistory[0] === tab);
     }
     menu.show();
   }
 
   /**
@@ skipping 182 matching lines @@
       return;
 
     this._hideTab(this._currentTab);
     delete this._currentTab;
   }
 
   /**
    * @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);
     this._updateTabSlider();
   }
 
   _updateTabSlider() {
     if (!this._currentTab || !this._sliderEnabled)
       return;
     var left = 0;
     for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i] && this._tabs[i]._shown; i++)
       left += this._tabs[i]._measuredWidth;
     var sliderWidth = this._currentTab._shown ? this._currentTab._measuredWidth : this._dropDownButton.offsetWidth;
     var scaleFactor = window.devicePixelRatio >= 1.5 ? ' scaleY(0.75)' : '';
     this._tabSlider.style.transform = 'translateX(' + left + 'px)' + scaleFactor;
     this._tabSlider.style.width = sliderWidth + 'px';
 
     if (this._tabSlider.parentElement !== this._headerContentsElement)
       this._headerContentsElement.appendChild(this._tabSlider);
   }
 
   /**
    * @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();
   }
 
   /**
    * @override
    * @return {!Array.<!Element>}
    */
   elementsToRestoreScrollPositionsFor() {
@@ skipping 41 matching lines @@
   }
 
   /**
    * @param {boolean} allow
    * @param {boolean=} automatic
    */
   setAllowTabReorder(allow, automatic) {
     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} */
 UI.TabbedPane.Events = {
   TabSelected: Symbol('TabSelected'),
   TabClosed: Symbol('TabClosed'),
   TabOrderChanged: Symbol('TabOrderChanged')
 };
 
 /**
@@ skipping 365 matching lines @@
    * @param {!Array.<string>} ids
    */
   closeTabs(tabbedPane, ids) {},
 
   /**
    * @param {string} tabId
    * @param {!UI.ContextMenu} contextMenu
    */
   onContextMenu(tabId, contextMenu) {}
 };