| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright 2015 The Chromium Authors. All rights reserved. | 3 Copyright 2015 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. | 5 found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 | 7 |
| 8 <link rel="import" href="/tracing/ui/base/deep_utils.html"> | 8 <link rel="import" href="/tracing/ui/base/deep_utils.html"> |
| 9 <link rel="import" href="/tracing/value/numeric.html"> | 9 <link rel="import" href="/tracing/value/numeric.html"> |
| 10 <link rel="import" href="/tracing/value/unit.html"> | 10 <link rel="import" href="/tracing/value/unit.html"> |
| (...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 121 font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Ti
mes, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; | 121 font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Ti
mes, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort; |
| 122 font-size: 13pt; | 122 font-size: 13pt; |
| 123 } | 123 } |
| 124 </style> | 124 </style> |
| 125 <span id="sparkline"></span> | 125 <span id="sparkline"></span> |
| 126 <span id="significance"></span> | 126 <span id="significance"></span> |
| 127 <span id="content"></span> | 127 <span id="content"></span> |
| 128 <span id="warning" style="display:none">⚠</span> | 128 <span id="warning" style="display:none">⚠</span> |
| 129 </template> | 129 </template> |
| 130 </dom-module> | 130 </dom-module> |
| 131 <script> | 131 <script> |
| 132 'use strict'; | 132 'use strict'; |
| 133 | 133 |
| 134 Polymer({ | 134 Polymer({ |
| 135 is: 'tr-v-ui-scalar-span', | 135 is: 'tr-v-ui-scalar-span', |
| 136 | 136 |
| 137 created: function() { | 137 created: function() { |
| 138 this.value_ = undefined; | 138 this.value_ = undefined; |
| 139 this.unit_ = undefined; | 139 this.unit_ = undefined; |
| 140 this.context_ = undefined; | 140 this.context_ = undefined; |
| 141 | 141 |
| 142 this.warning_ = undefined; | 142 this.warning_ = undefined; |
| (...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 288 changeClass = 'worse'; | 288 changeClass = 'worse'; |
| 289 emoji = tr.v.ui.Emoji.CONFOUNDED_FACE; | 289 emoji = tr.v.ui.Emoji.CONFOUNDED_FACE; |
| 290 title = 'regression'; | 290 title = 'regression'; |
| 291 } else { | 291 } else { |
| 292 title = 'no change'; | 292 title = 'no change'; |
| 293 } | 293 } |
| 294 | 294 |
| 295 // Set the content class separately from the significance class so that | 295 // Set the content class separately from the significance class so that |
| 296 // NEUTRAL_FACE is always a neutral color. | 296 // NEUTRAL_FACE is always a neutral color. |
| 297 if (changeClass) | 297 if (changeClass) |
| 298 this.$.content.classList.add(changeClass); | 298 Polymer.dom(this.$.content).classList.add(changeClass); |
| 299 | 299 |
| 300 switch (this.significance) { | 300 switch (this.significance) { |
| 301 case tr.v.Significance.DONT_CARE: | 301 case tr.v.Significance.DONT_CARE: |
| 302 emoji = ''; | 302 emoji = ''; |
| 303 changeClass = ''; | 303 changeClass = ''; |
| 304 break; | 304 break; |
| 305 | 305 |
| 306 case tr.v.Significance.INSIGNIFICANT: | 306 case tr.v.Significance.INSIGNIFICANT: |
| 307 changeClass = ''; | 307 changeClass = ''; |
| 308 emoji = tr.v.ui.Emoji.NEUTRAL_FACE; | 308 emoji = tr.v.ui.Emoji.NEUTRAL_FACE; |
| 309 if (better || worse) | 309 if (better || worse) |
| 310 title = 'insignificant ' + title; | 310 title = 'insignificant ' + title; |
| 311 break; | 311 break; |
| 312 | 312 |
| 313 case tr.v.Significance.SIGNIFICANT: | 313 case tr.v.Significance.SIGNIFICANT: |
| 314 if (!better && !worse) | 314 if (!better && !worse) |
| 315 throw new Error('How can no change be significant?'); | 315 throw new Error('How can no change be significant?'); |
| 316 | 316 |
| 317 title = 'significant ' + title; | 317 title = 'significant ' + title; |
| 318 break; | 318 break; |
| 319 } | 319 } |
| 320 | 320 |
| 321 this.$.significance.textContent = emoji; | 321 Polymer.dom(this.$.significance).textContent = emoji; |
| 322 this.$.significance.title = title; | 322 this.$.significance.title = title; |
| 323 this.$.content.title = title; | 323 this.$.content.title = title; |
| 324 if (changeClass) | 324 if (changeClass) |
| 325 this.$.significance.classList.add(changeClass); | 325 Polymer.dom(this.$.significance).classList.add(changeClass); |
| 326 }, | 326 }, |
| 327 | 327 |
| 328 get warning() { | 328 get warning() { |
| 329 return this.warning_; | 329 return this.warning_; |
| 330 }, | 330 }, |
| 331 | 331 |
| 332 set warning(warning) { | 332 set warning(warning) { |
| 333 this.warning_ = warning; | 333 this.warning_ = warning; |
| 334 var warningEl = this.$.warning; | 334 var warningEl = this.$.warning; |
| 335 if (this.warning_) { | 335 if (this.warning_) { |
| (...skipping 25 matching lines...) Expand all Loading... |
| 361 | 361 |
| 362 set duration(duration) { | 362 set duration(duration) { |
| 363 if (duration instanceof tr.b.u.TimeDuration) { | 363 if (duration instanceof tr.b.u.TimeDuration) { |
| 364 this.value = duration; | 364 this.value = duration; |
| 365 return; | 365 return; |
| 366 } | 366 } |
| 367 this.setValueAndUnit(duration, tr.b.u.Units.timeDurationInMs); | 367 this.setValueAndUnit(duration, tr.b.u.Units.timeDurationInMs); |
| 368 } | 368 } |
| 369 }); | 369 }); |
| 370 </script> | 370 </script> |
| OLD | NEW |