[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..8bc1856b7d4b9a79a008ca6b8349a3e3a9a809fa 100644
--- a/tracing/tracing/ui/base/tab_view.html
+++ b/tracing/tracing/ui/base/tab_view.html
@@ -76,23 +76,23 @@ and limit users to having one option selected at a time.
         overflow: auto;
       }
     </style>
-    <div id='tabs' hidden="[[tabsHidden]]">
+    <div id=tabs hidden="[[tabsHidden]]">
       <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)]]
-              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>
+          <input type=radio name=tabs id$="[[computeRadioId_(item.subView)]]"
+              on-change="onTabChanged_"
+              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>
     </div>
-    <div id='subView'></div>
+    <div id="subView"></div>
     <content>
     </content>
   </template>
@@ -113,6 +113,10 @@ Polymer({
       type: Array,
       value: () => []
     },
+    wrappedSubViews_: {
+      type: Array,
+      computed: 'computeWrappedSubViews_(subViews_, subViews_.splices)',
+    },
     tabsHidden: {
       type: Boolean,
       value: false,
@@ -191,7 +195,7 @@ Polymer({
   },
 
   onTabChanged_: function(event) {
-    this.selectedSubView = event.model.item;
+    this.selectedSubView = event.model.item.subView;
   },
 
   isChecked_: function(subView) {
@@ -264,6 +268,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) => {

[charliea (OOO until 10-5), 2017/01/25 21:41:41]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/A...
seems to suggest that you should be able to do:

return subViews_.map(subView => ({subView}));

(the parentheses outside of the {subView} indicate that the braces indicate an
object literal and not the scope of the function)

+      return { subView };
+    });
+  },
+
 });
 </script>