[polymer] Rewrite the analysis tab view

tracing/tracing/ui/base/tab_view_test.html

Index: tracing/tracing/ui/base/tab_view_test.html
diff --git a/tracing/tracing/ui/base/tab_view_test.html b/tracing/tracing/ui/base/tab_view_test.html
index cb79ba7b38c72516e9f866bcee54df034ddd6bbb..90422044df740392d4e6d9155d210a0e7c048e52 100644
--- a/tracing/tracing/ui/base/tab_view_test.html
+++ b/tracing/tracing/ui/base/tab_view_test.html
@@ -5,321 +5,124 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
+<link rel="import" href="/tracing/core/test_utils.html">
+<link rel="import" href="/tracing/model/event_set.html">
+<link rel="import" href="/tracing/model/model.html">
+<link rel="import" href="/tracing/model/power_series.html">
+<link rel="import" href="/tracing/ui/analysis/alert_sub_view.html">
+<link rel="import" href="/tracing/ui/analysis/multi_power_sample_sub_view.html">
 <link rel="import" href="/tracing/ui/base/tab_view.html">
 
-<template id="tab-view-test-template">
-  <tr-ui-a-tab-view>
-    <p tab-label="Existing Label"> Tab with label already set </p>
-    <p> Tab Content with no label </p>
-    <p selected="selected" tab-label="Should be selected">
-      Already selected tab
-    </p>
-    <p selected="selected" tab-label="Should not be selected">
-      Second already selected tab
-    </p>
-  </tr-ui-a-tab-view>
-</template>
+<dom-module id='tr-ui-b-tab-view-test-non-sub-view'>
+  <template>
+    <div></div>
+  </template>
+</dom-module>
 <script>
 'use strict';
 
-tr.b.unittest.testSuite(function() {
-  var THIS_DOC = document._currentScript.ownerDocument;
-
-  test('instantiate', function() {
-
-    var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
-        ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' +
-        'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' +
-        'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
-        'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
-        'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
-        'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
-        'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
-        'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
-        'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
-        'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
-        'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
-        'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
-        'a ipsum. Suspendisse potenti.';
-
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '500px';
-    tabViewContainer.style.height = '200px';
-
-    var tabView = new TracingAnalysisTabView();
-
-    var firstTab = document.createElement('div');
-    Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
-    Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
-
-    var secondTab = document.createElement('div');
-    Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
-    Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
+var tr_ui_b_tab_view_test_non_sub_view_behavior = {};
 
-    var thirdTab = document.createElement('div');
-    Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
-    Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
-
-    Polymer.dom(tabView).appendChild(firstTab);
-    Polymer.dom(tabView).appendChild(secondTab);
-    Polymer.dom(tabView).appendChild(thirdTab);
-    Polymer.dom(tabViewContainer).appendChild(tabView);
-
-    this.addHTMLOutput(tabViewContainer);
-
-    Polymer.dom(thirdTab).setAttribute('tab-label', 'Something Different');
-
-    var button = document.createElement('button');
-    Polymer.dom(button).textContent = 'Change label';
+Polymer({
+  is: 'tr-ui-b-tab-view-test-non-sub-view',
+  behaviors: [tr_ui_b_tab_view_test_non_sub_view_behavior]
+});
 
-    button.addEventListener('click', function() {
-      Polymer.dom(thirdTab).setAttribute('tab-label', 'Label Changed');
+tr.b.unittest.testSuite(function() {
+  function createPowerSampleSubView() {
+    var model = tr.c.TestUtils.newModel(function(m) {
+      m.device.powerSeries = new tr.model.PowerSeries(m.device);
+
+      m.device.vSyncTimestamps = [0];
+      m.device.powerSeries.addPowerSample(1, 1);
+      m.device.powerSeries.addPowerSample(2, 2);
+      m.device.powerSeries.addPowerSample(3, 3);
+      m.device.powerSeries.addPowerSample(4, 2);
     });
 
-    tabView.selectedTab = secondTab;
-    this.addHTMLOutput(button);
+    var subView = document.createElement('tr-ui-a-multi-power-sample-sub-view');
+    subView.selection = new tr.model.EventSet(model.device.powerSeries.samples);
+    subView.tabLabel = 'Power samples';
+    return subView;
+  }
+
+  function createAlertSubView() {
+    var slice = tr.c.TestUtils.newSliceEx(
+        {title: 'b', start: 0, duration: 0.002});
+    var alertInfo = new tr.model.EventInfo(
+        'Alert 1', 'Critical alert',
+        [{
+          label: 'Example',
+          textContent: 'Example page',
+          href: 'http://www.example.com'
+        }]);
+
+    var alert = new tr.model.Alert(alertInfo, 5, [slice]);
+    var subView = document.createElement('tr-ui-a-alert-sub-view');
+    subView.selection = new tr.model.EventSet(alert);
+    subView.tabLabel = 'Alerts';
+
+    return subView;
+  }
+
+  test('instantiate_noTabs', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
+    tabView.label = 'No items selected.';
+    this.addHTMLOutput(tabView);
   });
 
-
-  test('instantiateWithTabHeading', function() {
-    var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
-        ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' +
-        'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' +
-        'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
-        'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
-        'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
-        'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
-        'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
-        'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
-        'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
-        'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
-        'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
-        'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
-        'a ipsum. Suspendisse potenti.';
-
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '500px';
-    tabViewContainer.style.height = '200px';
-
-    var tabView = new TracingAnalysisTabView();
-    tabView.tabStripHeadingText = 'Hello world:';
-
-    var firstTab = document.createElement('div');
-    Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
-    Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
-
-    var secondTab = document.createElement('div');
-    Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
-    Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
-
-    var thirdTab = document.createElement('div');
-    Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
-    Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
-
-    Polymer.dom(tabView).appendChild(firstTab);
-    Polymer.dom(tabView).appendChild(secondTab);
-    Polymer.dom(tabView).appendChild(thirdTab);
-    Polymer.dom(tabViewContainer).appendChild(tabView);
-
-    this.addHTMLOutput(tabViewContainer);
-    tabView.selectedTab = secondTab;
+  test('instantiate_oneTab', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
+    tabView.label = '1 item selected.';
+    tabView.addSubView(createPowerSampleSubView());
+    this.addHTMLOutput(tabView);
   });
 
-  test('instantiateChildrenAlreadyInside', function() {
-    var tabViewTemplate = Polymer.dom(THIS_DOC)
-        .querySelector('#tab-view-test-template');
-    // var tabView = tabViewTemplate.createInstance();
-    var tabView = THIS_DOC.importNode(tabViewTemplate.content, true);
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '400px';
-    tabViewContainer.style.height = '200px';
-
-    Polymer.dom(tabViewContainer).appendChild(tabView);
-
-    this.addHTMLOutput(tabViewContainer);
-
+  test('instantiate_twoTabs', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
+    tabView.label = '3 items selected.';
+    tabView.addSubView(createPowerSampleSubView());
+    tabView.addSubView(createAlertSubView());
+    this.addHTMLOutput(tabView);
   });
 
-  test('programaticallySetSelectedTab', function() {
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '500px';
-    tabViewContainer.style.height = '200px';
-
-    var tabView = new TracingAnalysisTabView();
-
-    var t1 = document.createElement('div');
-    var t2 = document.createElement('div');
-    var t3 = document.createElement('div');
-
-    Polymer.dom(tabView).appendChild(t1);
-    Polymer.dom(tabView).appendChild(t2);
-    Polymer.dom(tabView).appendChild(t3);
-
-    assert.isUndefined(tabView.selectedTab);
-    tabView.selectedTab = t1;
+  test('addSubView_throwsWithNonHtmlElement', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
 
-    assert.isTrue(t1.hasAttribute('selected'));
-    assert.isFalse(t2.hasAttribute('selected'));
-    assert.isFalse(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t1, tabView.selectedTab));
-
-    tabView.selectedTab = t2;
-    assert.isFalse(t1.hasAttribute('selected'));
-    assert.isTrue(t2.hasAttribute('selected'));
-    assert.isFalse(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t2, tabView.selectedTab));
-
-    tabView.selectedTab = t3;
-    assert.isFalse(t1.hasAttribute('selected'));
-    assert.isFalse(t2.hasAttribute('selected'));
-    assert.isTrue(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t3, tabView.selectedTab));
-
-    t1.selected = true;
-    assert.isTrue(t1.hasAttribute('selected'));
-    assert.isFalse(t2.hasAttribute('selected'));
-    assert.isFalse(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t1, tabView.selectedTab));
-
-    // Make sure just randomly setting a tab as not selected does not
-    // break the existing selection.
-    t2.selected = false;
-    t3.selected = false;
-    assert.isTrue(t1.hasAttribute('selected'));
-    assert.isFalse(t2.hasAttribute('selected'));
-    assert.isFalse(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t1, tabView.selectedTab));
-
-    t3.selected = true;
-    assert.isFalse(t1.hasAttribute('selected'));
-    assert.isFalse(t2.hasAttribute('selected'));
-    assert.isTrue(t3.hasAttribute('selected'));
-    assert.isTrue(Object.is(t3, tabView.selectedTab));
-
-    Polymer.dom(tabViewContainer).appendChild(tabView);
-
-    this.addHTMLOutput(tabViewContainer);
+    assert.throws(function() {
+      tabView.addSubView(1);
+    }, 'Sub-view being added must be a registered Polymer element with the ' +
+        'sub-view behavior');
   });
 
-  /**
-   * This test checks that if an element has a selected property already set,
-   * before being attached to the tabView, it still gets selected if the
-   * property is true, after it gets attached.
-   */
-  test('instantiateSetSelectedTabAlreadySet', function() {
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '500px';
-    tabViewContainer.style.height = '200px';
+  test('addSubView_throwsWithNonPolymerHtmlElement', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
 
-    var tabView = new TracingAnalysisTabView();
-
-    var t1 = document.createElement('div');
-    Polymer.dom(t1).textContent = 'This text should BE visible.';
-    var t2 = document.createElement('div');
-    Polymer.dom(t2).textContent = 'This text should NOT be visible.';
-    var t3 = document.createElement('div');
-    Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
-
-    t1.selected = true;
-    t2.selected = false;
-    t3.selected = false;
-
-    Polymer.dom(tabView).appendChild(t1);
-    Polymer.dom(tabView).appendChild(t2);
-    Polymer.dom(tabView).appendChild(t3);
-
-    Polymer.dom(t1).setAttribute('tab-label', 'This should be selected');
-    Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
-    Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
-
-    Polymer.dom(tabViewContainer).appendChild(tabView);
-
-    this.addHTMLOutput(tabViewContainer);
+    assert.throws(function() {
+      tabView.addSubView(document.createElement('p'));
+    }, 'Sub-view being added must be a registered Polymer element with the ' +
+        'sub-view behavior');
   });
 
-  test('selectingInvalidTabWorks', function() {
-    var tabView = new TracingAnalysisTabView();
-    var t1 = document.createElement('div');
-    var t2 = document.createElement('div');
-    var t3 = document.createElement('div');
-    var invalidChild = document.createElement('div');
-
-    Polymer.dom(tabView).appendChild(t1);
-    Polymer.dom(tabView).appendChild(t2);
-    Polymer.dom(tabView).appendChild(t3);
+  test('addSubView_throwsWithNonAnalysisViewPolymerElement', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
 
-    tabView.selectedTab = t1;
-
-    assert.equal(tabView.selectedTab, t1);
-
-    // Make sure that selecting an invalid tab does not break the current
-    // selection.
-    tabView.selectedTab = invalidChild;
-    assert.equal(t1, tabView.selectedTab);
-
-    // Also make sure the invalidChild does not influence the tab view when
-    // it has a selected property set.
-    invalidChild.selected = true;
-    tabView.selectedTab = invalidChild;
-    assert.equal(t1, tabView.selectedTab);
+    assert.throws(function() {
+      tabView.addSubView(
+          document.createElement('tr-ui-b-tab-view-test-non-sub-view'));
+    }, 'Sub-view being added must be a registered Polymer element with the ' +
+        'sub-view behavior');
   });
 
-  test('changeTabCausesEvent', function() {
-    var tabView = new TracingAnalysisTabView();
-    var t1 = document.createElement('div');
-    var t2 = document.createElement('div');
-    var invalidChild = document.createElement('div');
-
-    Polymer.dom(tabView).appendChild(t1);
-    Polymer.dom(tabView).appendChild(t2);
-
-    var numChangeEvents = 0;
-    tabView.addEventListener('selected-tab-change', function() {
-        numChangeEvents++;
-    });
-    tabView.selectedTab = t1;
-    assert.equal(numChangeEvents, 1);
-    tabView.selectedTab = t1;
-    assert.equal(numChangeEvents, 1);
-    tabView.selectedTab = t2;
-    assert.equal(numChangeEvents, 2);
-    tabView.selectedTab = undefined;
-    assert.equal(numChangeEvents, 3);
-    Polymer.dom.flush();
-  });
-
-  /**
-   * This test makes sure that removing the selected tab does not select
-   * any other tab.
-   */
-  test('instantiateRemovingSelectedTab', function() {
-    var tabViewContainer = document.createElement('div');
-    tabViewContainer.style.width = '500px';
-    tabViewContainer.style.height = '200px';
-
-    var tabView = new TracingAnalysisTabView();
-
-    var t1 = document.createElement('div');
-    Polymer.dom(t1).textContent = 'This text should BE visible.';
-    var t2 = document.createElement('div');
-    Polymer.dom(t2).textContent = 'This text should NOT be visible.';
-    var t3 = document.createElement('div');
-    Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
-
-    Polymer.dom(tabView).appendChild(t1);
-    Polymer.dom(tabView).appendChild(t2);
-    Polymer.dom(tabView).appendChild(t3);
-
-    Polymer.dom(t1).setAttribute('tab-label', 'This should not exist');
-    Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
-    Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
-
-    tabView.selectedTab = t1;
-    Polymer.dom(tabView).removeChild(t1);
+  test('clearSubViews_selectedSubViewNullAfter', function() {
+    var tabView = document.createElement('tr-ui-a-tab-view');
+    tabView.label = '3 items selected.';
+    tabView.addSubView(createPowerSampleSubView());
+    tabView.addSubView(createAlertSubView());
 
-    Polymer.dom(tabViewContainer).appendChild(tabView);
+    tabView.clearSubViews();
 
-    this.addHTMLOutput(tabViewContainer);
+    assert.isUndefined(tabView.selectedSubView);
   });
 });
 </script>