| <!DOCTYPE html> |
| <!-- |
| Copyright 2015 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="/tracing/ui/base/deep_utils.html"> |
| <link rel="import" href="/tracing/ui/base/polymer_utils.html"> |
| <link rel="import" href="/tracing/base/units/units.html"> |
| <link rel="import" href="/tracing/base/units/scalar.html"> |
| |
| <script> |
| 'use strict'; |
| tr.exportTo('tr.ui.units', function() { |
| function createScalarSpan(value, opt_config) { |
| if (value === undefined) |
| return ''; |
| var config = opt_config || {}; |
| var ownerDocument = config.ownerDocument || document; |
| var span = ownerDocument.createElement('tr-ui-u-scalar-span'); |
| span.value = value; |
| return span; |
| } |
| |
| tr.b.u.Units.addEventListener('display-mode-changed', function(e) { |
| var subclassNames = tr.ui.b.getPolymerElementsThatSubclass( |
| 'tr-ui-u-scalar-span'); |
| var isSubclass = {}; |
| subclassNames.forEach(function(n) { |
| isSubclass[n.toUpperCase()] = true; |
| }); |
| |
| var m = tr.b.findDeepElementsMatchingPredicate( |
| document.body, |
| function(el) { |
| return isSubclass[el.tagName]; |
| }); |
| m.forEach(function(el) { |
| el.updateContent_(); |
| }); |
| }); |
| |
| return { |
| createScalarSpan: createScalarSpan |
| }; |
| }); |
| </script> |
| |
| <polymer-element name="tr-ui-u-scalar-span"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: relative; |
| } |
| #content.right-align { |
| text-align: right; |
| position: relative; |
| display: block; |
| } |
| #sparkline { |
| width: 0%; |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| display: none; |
| height: 100%; |
| background-color: hsla(216, 100%, 94.5%, .75); |
| border-left: 1px solid hsl(216, 100%, 89%); |
| box-sizing: border-box; |
| } |
| #warning { |
| margin-left: 4px; |
| font-size: 66%; |
| } |
| </style> |
| <span id="sparkline"></span> |
| <span id="content"></span> |
| <span id="warning" style="display:none">⚠</span> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| ready: function() { |
| this.value_ = undefined; |
| this.unit_ = undefined; |
| |
| this.warning_ = undefined; |
| this.percentage_ = undefined; |
| this.isDelta_ = false; |
| }, |
| |
| set contentTextDecoration(deco) { |
| this.$.content.style.textDecoration = deco; |
| }, |
| |
| get value() { |
| return this.value_; |
| }, |
| |
| set value(value) { |
| if (value instanceof tr.b.u.Scalar) { |
| this.value_ = value.value; |
| this.unit_ = value.unit; |
| } else { |
| this.value_ = value; |
| } |
| this.updateContent_(); |
| }, |
| |
| get unit() { |
| return this.unit_; |
| }, |
| |
| set unit(unit) { |
| this.unit_ = unit; |
| this.updateContent_(); |
| }, |
| |
| setValueAndUnit: function(value, unit) { |
| this.value_ = value; |
| this.unit_ = unit; |
| this.updateContent_(); |
| }, |
| |
| get percentage() { |
| return this.percentage_; |
| }, |
| |
| set percentage(percentage) { |
| this.percentage_ = percentage; |
| this.updateSparkline_(); |
| }, |
| |
| get rightAlign() { |
| return this.$.content.classList.contains('right-align'); |
| }, |
| |
| set rightAlign(rightAlign) { |
| if (rightAlign) |
| this.$.content.classList.add('right-align'); |
| else |
| this.$.content.classList.remove('right-align'); |
| }, |
| |
| get isDelta() { |
| return this.isDelta_; |
| }, |
| |
| set isDelta(isDelta) { |
| this.isDelta_ = isDelta; |
| this.updateContent_(); |
| }, |
| |
| updateSparkline_: function() { |
| if (this.percentage_ === undefined) { |
| this.$.sparkline.style.display = 'none'; |
| this.$.sparkline.style.width = '0'; |
| } else { |
| this.$.sparkline.style.display = 'block'; |
| this.$.sparkline.style.width = (this.percentage_ * 100) + '%'; |
| } |
| }, |
| |
| updateContent_: function() { |
| if (this.unit_ === undefined) { |
| this.$.content.textContent = ''; |
| return; |
| } |
| var content = this.unit_.format(this.value); |
| if (this.isDelta_) { |
| if (this.value > 0) { |
| // Positive delta. |
| content = '+' + content; |
| } else if (this.value === 0) { |
| // Zero delta. |
| var PLUS_MINUS_SIGN = String.fromCharCode(177); |
| content = PLUS_MINUS_SIGN + content; |
| } |
| // No need for this.value < 0 case (negative sign is alwas shown). |
| } |
| this.$.content.textContent = content; |
| }, |
| |
| get warning() { |
| return this.warning_; |
| }, |
| |
| set warning(warning) { |
| this.warning_ = warning; |
| var warningEl = this.$.warning; |
| if (this.warning_) { |
| warningEl.title = warning; |
| warningEl.style.display = ''; |
| } else { |
| warningEl.title = ''; |
| warningEl.style.display = 'none'; |
| } |
| } |
| }); |
| </script> |
| </polymer-element> |
