| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/base/base.html"> |
| <link rel="import" href="/base/ui/table.html"> |
| <link rel="import" href="/base/units/time_duration_span.html"> |
| <link rel="import" href="/base/units/time_stamp_span.html"> |
| |
| <polymer-element name='tr-c-a-selection-summary-table'> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| } |
| #table { |
| flex: 1 1 auto; |
| align-self: stretch; |
| } |
| </style> |
| <tr-b-ui-table id="table"> |
| </tr-b-ui-table> |
| </div> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| created: function() { |
| this.selection_ = new tr.b.Range(); |
| }, |
| |
| ready: function() { |
| this.$.table.showHeader = false; |
| this.$.table.tableColumns = [ |
| { |
| title: 'Name', |
| value: function(row) { return row.title; }, |
| width: '350px' |
| }, |
| { |
| title: 'Value', |
| width: '100%', |
| value: function(row) { |
| return row.value; |
| } |
| } |
| ]; |
| }, |
| |
| get selection() { |
| return this.selection_; |
| }, |
| |
| set selection(selection) { |
| this.selection_ = selection; |
| this.updateContents_(); |
| }, |
| |
| updateContents_: function() { |
| var selection = this.selection_; |
| var rows = []; |
| var hasRange; |
| if (this.selection_ && (!selection.bounds.isEmpty)) |
| hasRange = true; |
| else |
| hasRange = false; |
| |
| rows.push({ |
| title: 'Selection start', |
| value: hasRange ? |
| tr.b.units.createTimeStampSpan(selection.bounds.min) : '<empty>' |
| }); |
| rows.push({ |
| title: 'Selection extent', |
| value: hasRange ? |
| tr.b.units.createTimeSpan(selection.bounds.range) : '<empty>' |
| }); |
| |
| this.$.table.tableRows = rows; |
| this.$.table.rebuild(); |
| } |
| }); |
| </script> |
| </polymer-element> |
