[tracing] Make tab-view rerender after reset/clear

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 0818c83f91fcfb2346fb5841296fc4361fa5d561..2e59f25077b1b0b552ad302976887f467c967563 100644
--- a/tracing/tracing/ui/base/tab_view.html
+++ b/tracing/tracing/ui/base/tab_view.html
@@ -78,16 +78,16 @@ and limit users to having one option selected at a time.
     </style>
     <div id='tabs' hidden="[[tabsHidden]]">

[charliea (OOO until 10-5), 2017/01/24 01:01:04]

nit: consistently use " over '

It does indeed look common:
https://cs.corp.google.com/search/?q=p:github+f:%5Ecatapult-project/catapult/...
versus
https://cs.corp.google.com/search/?q=p:github+f:%5Ecatapult-project/catapult/...

[hjd, 2017/01/24 09:30:25]

Done.

       <label id=selection_description>[[label_]]</label>
-      <template is=dom-repeat items=[[subViews_]]>
+      <template is=dom-repeat items=[[wrappedSubViews_]]>
         <tab>
-          <input type=radio name=tabs id$=[[computeRadioId_(item)]]
+          <input type=radio name=tabs id$="[[computeRadioId_(item.subView)]]"
               on-change='onTabChanged_'
-              checked$='[[isChecked_(item)]]' />
-          <label for$=[[computeRadioId_(item)]]>
-            <template is=dom-if if=[[item.tabIcon]]>
-              <span style$='[[item.tabIcon.style]]'>[[item.tabIcon.text]]</span>
+              checked$="[[isChecked_(item.subView, selectedSubView_)]]" />
+          <label for$="[[computeRadioId_(item.subView)]]">
+            <template is=dom-if if="[[item.subView.tabIcon]]">
+              <span style$="[[item.subView.tabIcon.style]]">[[item.subView.tabIcon.text]]</span>
             </template>
-            [[item.tabLabel]]
+            [[item.subView.tabLabel]]
           </label>
         </tab>
       </template>
@@ -113,6 +113,10 @@ Polymer({
       type: Array,
       value: () => []
     },
+    wrappedSubViews_: {
+      type: Array,
+      computed: 'computeWrappedSubViews_(subViews_, subViews_.splices)',
+    },
     tabsHidden: {
       type: Boolean,
       value: false,
@@ -138,6 +142,7 @@ Polymer({
   },
 
   set selectedSubView(subView) {
+    console.log('set selectedSubView', subView);

[charliea (OOO until 10-5), 2017/01/24 01:01:04]

nit: don't want console.logs in production code

[hjd, 2017/01/24 09:30:25]

oops, I thought I removed that. Thanks!

     if (subView === this.selectedSubView_)
       return;
 
@@ -191,7 +196,7 @@ Polymer({
   },
 
   onTabChanged_: function(event) {
-    this.selectedSubView = event.model.item;
+    this.selectedSubView = event.model.item.subView;
   },
 
   isChecked_: function(subView) {
@@ -264,6 +269,13 @@ Polymer({
     // uniquify this ID by appending the tab's label with all spaces replaced
     // by dashes (because spaces aren't allowed in HTML IDs).
     return subView.tagName + '-' + subView.tabLabel.replace(/ /g, '-');
-  }
+  },
+
+  computeWrappedSubViews_: function(subViews_) {
+    return subViews_.map((subView) => {
+      return { subView: subView };

[charliea (OOO until 10-5), 2017/01/24 01:01:04]

This can just be 

return { subView };

This matches the airbnb style guide that we're moving towards bettter
(https://github.com/airbnb/javascript#es6-object-concise)

[hjd, 2017/01/24 09:30:25]

Yeah I keep forgetting :( Done.

+    });
+  },
+
 });
 </script>