| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2013 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2013 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="stylesheet" href="/tracing/ui/extras/chrome/cc/picture_ops_chart_view
.css"> | |
| 9 | |
| 10 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> | 8 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> |
| 11 | 9 |
| 12 <script> | 10 <script> |
| 13 'use strict'; | 11 'use strict'; |
| 14 | 12 |
| 15 tr.exportTo('tr.ui.e.chrome.cc', function() { | 13 tr.exportTo('tr.ui.e.chrome.cc', function() { |
| 16 const BAR_PADDING = 1; | 14 const BAR_PADDING = 1; |
| 17 const BAR_WIDTH = 5; | 15 const BAR_WIDTH = 5; |
| 18 const CHART_PADDING_LEFT = 65; | 16 const CHART_PADDING_LEFT = 65; |
| 19 const CHART_PADDING_RIGHT = 30; | 17 const CHART_PADDING_RIGHT = 30; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 34 * | 32 * |
| 35 * @constructor | 33 * @constructor |
| 36 */ | 34 */ |
| 37 const PictureOpsChartView = | 35 const PictureOpsChartView = |
| 38 tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-chart-view'); | 36 tr.ui.b.define('tr-ui-e-chrome-cc-picture-ops-chart-view'); |
| 39 | 37 |
| 40 PictureOpsChartView.prototype = { | 38 PictureOpsChartView.prototype = { |
| 41 __proto__: HTMLDivElement.prototype, | 39 __proto__: HTMLDivElement.prototype, |
| 42 | 40 |
| 43 decorate() { | 41 decorate() { |
| 42 this.style.display = 'block'; |
| 43 this.style.height = '180px'; |
| 44 this.style.margin = 0; |
| 45 this.style.padding = 0; |
| 46 this.style.position = 'relative'; |
| 47 |
| 44 this.picture_ = undefined; | 48 this.picture_ = undefined; |
| 45 this.pictureOps_ = undefined; | 49 this.pictureOps_ = undefined; |
| 46 this.opCosts_ = undefined; | 50 this.opCosts_ = undefined; |
| 47 | 51 |
| 48 this.chartScale_ = window.devicePixelRatio; | 52 this.chartScale_ = window.devicePixelRatio; |
| 49 | 53 |
| 50 this.chart_ = document.createElement('canvas'); | 54 this.chart_ = document.createElement('canvas'); |
| 51 this.chartCtx_ = this.chart_.getContext('2d'); | 55 this.chartCtx_ = this.chart_.getContext('2d'); |
| 52 Polymer.dom(this).appendChild(this.chart_); | 56 Polymer.dom(this).appendChild(this.chart_); |
| 53 | 57 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 64 this.chart_.addEventListener('click', this.onClick_.bind(this)); | 68 this.chart_.addEventListener('click', this.onClick_.bind(this)); |
| 65 this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this)); | 69 this.chart_.addEventListener('mousemove', this.onMouseMove_.bind(this)); |
| 66 | 70 |
| 67 this.usePercentileScale_ = false; | 71 this.usePercentileScale_ = false; |
| 68 this.usePercentileScaleCheckbox_ = tr.ui.b.createCheckBox( | 72 this.usePercentileScaleCheckbox_ = tr.ui.b.createCheckBox( |
| 69 this, 'usePercentileScale', | 73 this, 'usePercentileScale', |
| 70 'PictureOpsChartView.usePercentileScale', false, | 74 'PictureOpsChartView.usePercentileScale', false, |
| 71 'Limit to 95%-ile'); | 75 'Limit to 95%-ile'); |
| 72 Polymer.dom(this.usePercentileScaleCheckbox_).classList.add( | 76 Polymer.dom(this.usePercentileScaleCheckbox_).classList.add( |
| 73 'use-percentile-scale'); | 77 'use-percentile-scale'); |
| 78 this.usePercentileScaleCheckbox_.style.position = 'absolute'; |
| 79 this.usePercentileScaleCheckbox_.style.left = 0; |
| 80 this.usePercentileScaleCheckbox_.style.top = 0; |
| 74 Polymer.dom(this).appendChild(this.usePercentileScaleCheckbox_); | 81 Polymer.dom(this).appendChild(this.usePercentileScaleCheckbox_); |
| 75 }, | 82 }, |
| 76 | 83 |
| 77 get dimensionsHaveChanged() { | 84 get dimensionsHaveChanged() { |
| 78 return this.dimensionsHaveChanged_; | 85 return this.dimensionsHaveChanged_; |
| 79 }, | 86 }, |
| 80 | 87 |
| 81 set dimensionsHaveChanged(dimensionsHaveChanged) { | 88 set dimensionsHaveChanged(dimensionsHaveChanged) { |
| 82 this.dimensionsHaveChanged_ = dimensionsHaveChanged; | 89 this.dimensionsHaveChanged_ = dimensionsHaveChanged; |
| 83 }, | 90 }, |
| (...skipping 399 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 483 this.chartCtx_.fillText('No timing data available.', | 490 this.chartCtx_.fillText('No timing data available.', |
| 484 this.chartWidth_ * 0.5, this.chartHeight_ * 0.5); | 491 this.chartWidth_ * 0.5, this.chartHeight_ * 0.5); |
| 485 } | 492 } |
| 486 }; | 493 }; |
| 487 | 494 |
| 488 return { | 495 return { |
| 489 PictureOpsChartView, | 496 PictureOpsChartView, |
| 490 }; | 497 }; |
| 491 }); | 498 }); |
| 492 </script> | 499 </script> |
| OLD | NEW |