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 154 matching lines @@
   }
 
   /**
    * @param {string} id
    * @param {boolean=} userGesture
    */
   closeTab(id, userGesture) {
     this.closeTabs([id], userGesture);
   }
 
+
   /**
    * @param {!Array.<string>} ids
    * @param {boolean=} userGesture
    */
   closeTabs(ids, userGesture) {
     var focused = this.hasFocus();
     for (var i = 0; i < ids.length; ++i)
       this._innerCloseTab(ids[i], userGesture);
     this._updateTabElements();
     if (this._tabsHistory.length)
@@ skipping 69 matching lines @@
         break;
       }
     }
     if (index === -1)
       return [];
     return this._tabs.slice(index + 1).map(function(tab) {
       return tab.id;
     });
   }
 
+  _viewHasFocus() {
+    if (this.visibleView)
+      return this.visibleView.hasFocus();
+    return this.contentElement === this.contentElement.getComponentRoot().activeElement;
+  }
+
   /**
    * @param {string} id
    * @param {boolean=} userGesture
    * @return {boolean}
    */
   selectTab(id, userGesture) {
     if (this._currentTabLocked)
       return false;
-    var focused = this.hasFocus();
+    var focused = this._viewHasFocus();
     var tab = this._tabsById.get(id);
     if (!tab)
       return false;
     if (this._currentTab && this._currentTab.id === id)
       return true;
 
     this.suspendInvalidations();
     this._hideCurrentTab();
     this._showTab(tab);
     this.resumeInvalidations();
@@ skipping 208 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));
     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 rect = this._dropDownButton.getBoundingClientRect();
+    var menu = new UI.ContextMenu(event, false, rect.left, rect.bottom);
     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.removeAttribute('tabIndex');
     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 nextTabElement = null;
+    switch (event.keyCode) {
+      case UI.KeyboardShortcut.Keys.Up.code:
+      case UI.KeyboardShortcut.Keys.Left.code:
+        nextTabElement = this._currentTab.tabElement.previousElementSibling;

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

Sorry for not noticing this the first time around, but this looks potentially
brittle. Obviously though, I don't know the code as well as you. Would it make
sense to do this in terms of `this._tabs` instead? i.e. wrap around the array,
check if the "next" tab is showing, if not, click the drop down?

[einbinder, 2017/04/18 18:45:22]

It would be nicer to use this._tabs, but this._tabs doesn't correspond to the
DOM order. Depending on the last tab shown, or if the user drags and drops tab
elements, the DOM order can be out of sync with this._tabs.

+        if (!nextTabElement && !this._dropDownButton.parentElement)
+          nextTabElement = this._currentTab.tabElement.parentElement.lastElementChild;
+        break;
+      case UI.KeyboardShortcut.Keys.Down.code:
+      case UI.KeyboardShortcut.Keys.Right.code:
+        nextTabElement = this._currentTab.tabElement.nextElementSibling;
+        if (!nextTabElement && !this._dropDownButton.parentElement)
+          nextTabElement = this._currentTab.tabElement.parentElement.firstElementChild;
+        break;
+      case UI.KeyboardShortcut.Keys.Enter.code:
+      case UI.KeyboardShortcut.Keys.Space.code:
+        this._currentTab.view.focus();
+        return;
+      default:
+        return;
+    }
+    if (!nextTabElement) {
+      this._dropDownButton.click();
+      return;
+    }
+    var tab = this._tabs.find(tab => tab.tabElement === nextTabElement);
+    this.selectTab(tab.id, true);
+    nextTabElement.focus();

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

Why not make focusing the tab part of selectTab()? If it got selected from a
mouse click it'll be focused anyway, right?

[einbinder, 2017/04/18 18:45:21]

selectTab is also called for things like Ctrl+] shortcut, when the current tab
is closed, or when a view is revealed.

+  }
 };
 
 /** @enum {symbol} */
 UI.TabbedPane.Events = {
   TabSelected: Symbol('TabSelected'),
   TabClosed: Symbol('TabClosed'),
   TabOrderChanged: Symbol('TabOrderChanged')
 };
 
 /**
@@ skipping 164 matching lines @@
     tabElement.__iconElement = iconContainer;
   }
 
   /**
    * @param {boolean} measuring
    * @return {!Element}
    */
   _createTabElement(measuring) {
     var tabElement = createElementWithClass('div', 'tabbed-pane-header-tab');
     tabElement.id = 'tab-' + this._id;
-    tabElement.tabIndex = -1;
     UI.ARIAUtils.markAsTab(tabElement);
     UI.ARIAUtils.setSelected(tabElement, false);
     tabElement.selectTabForTest = this._tabbedPane.selectTab.bind(this._tabbedPane, this.id, true);
 
     var titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-title');
     titleElement.textContent = this.title;
     titleElement.title = this.tooltip || '';
     this._createIconElement(tabElement, titleElement, measuring);
     if (!measuring)
       this._titleElement = titleElement;
@@ skipping 180 matching lines @@
    * @param {!Array.<string>} ids
    */
   closeTabs(tabbedPane, ids) {},
 
   /**
    * @param {string} tabId
    * @param {!UI.ContextMenu} contextMenu
    */
   onContextMenu(tabId, contextMenu) {}
 };