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 |