[tracing] Add keyboard navigation to the tab view

tracing/tracing/ui/base/tab_view.html

Index: tracing/tracing/ui/base/tab_view.html
diff --git a/tracing/tracing/ui/base/tab_view.html b/tracing/tracing/ui/base/tab_view.html
index 08a15c61d1e1eb8b34faa41a0a8ef5a2a5e20b2b..776f6d5c75a4eea144585febbcbf3e24a02ee409 100644
--- a/tracing/tracing/ui/base/tab_view.html
+++ b/tracing/tracing/ui/base/tab_view.html
@@ -60,6 +60,11 @@ and limit users to having one option selected at a time.
         font-weight: bold;
       }
 
+      #tabs:focus input[type=radio]:checked ~ label {
+        outline: dotted 1px #8e8e8e;
+        outline-offset: -2px;
+      }
+
       #tabs input[type=radio]:checked ~ label {
         background-color: white;
         border: 1px solid #8e8e8e;
@@ -110,10 +115,20 @@ Polymer({
     },
     tabsHidden: {
       type: Boolean,
-      value: false
+      value: false,
+      observer: 'tabsHiddenChanged_'
+    },
+    focusable_: {

[petrcermak, 2016/09/27 13:33:06]

I don't think there's any value in adding a private 'focusable_' attribute here.
After all, you don't actually use it anywhere. You just set it in
updateFocusability_. Please remove it.

[hjd, 2016/09/28 10:05:57]

Done.

+      type: Boolean,
+      value: false,
     }
   },
 
+  ready: function() {
+    this.$.tabs.addEventListener('keydown', this.onKeyDown_.bind(this), true);
+    this.updateFocusability_();
+  },
+
   set label(newLabel) {
     this.set('label_', newLabel);
   },
@@ -144,6 +159,7 @@ Polymer({
   clearSubViews: function() {
     this.splice('subViews_', 0, this.subViews_.length);
     this.selectedSubView = undefined;
+    this.updateFocusability_();
   },
 
   addSubView: function(subView) {
@@ -151,6 +167,7 @@ Polymer({
       this.selectedSubView = subView;
 
     this.push('subViews_', subView);
+    this.updateFocusability_();
   },
 
   resetSubViews: function(subViews) {
@@ -163,6 +180,7 @@ Polymer({
     else {
       this.selectedSubView = undefined;
     }
+    this.updateFocusability_();
   },
 
   onTabChanged_: function(event) {
@@ -173,6 +191,54 @@ Polymer({
     return this.selectedSubView_ === subView;
   },
 
+  tabsHiddenChanged_: function() {
+    this.updateFocusability_();
+  },
+
+  onKeyDown_: function(e) {
+    if (this.tabsHidden || !this.selectedSubView_)
+      return;
+
+    var currentIndex = this.subViews_.indexOf(this.selectedSubView_);
+    var nextIndex = undefined;
+    switch (e.keyCode) {
+      // Arrow left.
+      case 37:
+        nextIndex = currentIndex - 1;
+        break;
+      // Arrow right.
+      case 39:
+        nextIndex = currentIndex + 1;
+        break;
+    }
+
+    if (nextIndex === undefined)
+      return;
+
+    var tab = Polymer.dom(this.root).querySelectorAll('#tabs tab')[nextIndex];
+    if (tab)
+      tab.firstElementChild.click();

[petrcermak, 2016/09/27 13:33:06]

Could you try doing .checked = true? It would be better than simulating a click,
in my opinion. If that doesn't work, then let's keep it as is ;-)

[petrcermak, 2016/09/27 13:33:06]

To prepare for the structure of the tab changing in the future, let's use
querySelector instead:

tab.querySelector('input').click();

[hjd, 2016/09/28 10:05:57]

Done.

[hjd, 2016/09/28 10:05:57]

I tried it but it didn't seem to work :( I'll leave it as is.

+
+    e.stopPropagation();
+    e.preventDefault();
+  },
+
+  shouldBeFocusable_: function() {
+    return !this.tabsHidden && this.subViews_.length > 0;
+  },
+
+  updateFocusability_: function() {
+    var focusableNow = this.shouldBeFocusable_();

[petrcermak, 2016/09/27 13:33:06]

as explained in one of my previous comments, I think you should simplify this:

if (this.shouldBeFocusable_()) {
  ...
} else {
  ...
}

[hjd, 2016/09/28 10:05:57]

Done.

+    if (this.get('focusable_') === focusableNow)

[petrcermak, 2016/09/27 13:33:06]

BTW, you could just do `this.focusable_` here and `this.focusable_ =
focusableNow` below (however, I wouldn't do that).

[hjd, 2016/09/28 10:05:57]

Acknowledged.

+      return;
+    this.set('focusable_', focusableNow);
+    if (focusableNow) {
+      Polymer.dom(this.$.tabs).setAttribute('tabindex', 0);
+    } else {
+      Polymer.dom(this.$.tabs).removeAttribute('tabindex');
+    }
+  },
+
   computeRadioId_: function(subView) {
     // We can't just use the tagName as the radio's ID because there are
     // instances where a single subview type can handle multiple event types,