OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright 2016 The Chromium Authors. All rights reserved. | 3 Copyright 2016 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 The chart-container element represents one chart and all related functionality, | 8 The chart-container element represents one chart and all related functionality, |
9 including a legend listing different traces that can be plotted on the same | 9 including a legend listing different traces that can be plotted on the same |
10 chart, a revision range selecting mini-chart at the bottom, and all of the alert | 10 chart, a revision range selecting mini-chart at the bottom, and all of the alert |
(...skipping 18 matching lines...) Expand all Loading... |
29 <link rel="import" href="/tracing/base/sinebow_color_generator.html"> | 29 <link rel="import" href="/tracing/base/sinebow_color_generator.html"> |
30 <link rel="import" href="/tracing/base/utils.html"> | 30 <link rel="import" href="/tracing/base/utils.html"> |
31 | 31 |
32 <dom-module name="chart-container"> | 32 <dom-module name="chart-container"> |
33 | 33 |
34 <template> | 34 <template> |
35 <style include="iron-flex iron-flex-alignment iron-flex-factors"> | 35 <style include="iron-flex iron-flex-alignment iron-flex-factors"> |
36 #container { | 36 #container { |
37 width: 100%; | 37 width: 100%; |
38 display: flex; | 38 display: flex; |
39 display: -webkit-flex; | |
40 flex-direction: column; | 39 flex-direction: column; |
41 -webkit-flex-direction: column; | |
42 align-items: center; | 40 align-items: center; |
43 -webkit-align-items: center; | |
44 position: relative; | 41 position: relative; |
45 min-width: 845px; /* Minimum width of plot plus width of chart-legend. */ | 42 min-width: 845px; /* Minimum width of plot plus width of chart-legend. */ |
46 } | 43 } |
47 | 44 |
48 #container[compact] { | 45 #container[compact] { |
49 min-width: 670px; /* Minimum width of plot plus width of compacted chart-
legend. */ | 46 min-width: 670px; /* Minimum width of plot plus width of compacted chart-
legend. */ |
50 } | 47 } |
51 | 48 |
52 #horizontal { | 49 #horizontal { |
53 display: flex; | 50 display: flex; |
54 display: -webkit-flex; | |
55 width: 100%; | 51 width: 100%; |
56 position: relative; | 52 position: relative; |
57 } | 53 } |
58 | 54 |
59 #chart-yaxis-label { | 55 #chart-yaxis-label { |
60 transform: rotate(-90deg) translate(-50%); | 56 transform: rotate(-90deg) translate(-50%); |
61 -webkit-transform: rotate(-90deg) translate(-50%); | 57 -webkit-transform: rotate(-90deg) translate(-50%); |
62 transform-origin: 0 0; | 58 transform-origin: 0 0; |
63 -webkit-transform-origin: 0 0; | 59 -webkit-transform-origin: 0 0; |
64 top: 50%; | 60 top: 50%; |
65 position: absolute; | 61 position: absolute; |
66 padding-top: 5px; | 62 padding-top: 5px; |
67 background-color: white; | 63 background-color: white; |
68 z-index: 1000; | 64 z-index: 1000; |
69 } | 65 } |
70 | 66 |
71 #plots-container { | 67 #plots-container { |
72 -webkit-flex-grow: 1; | |
73 flex-grow: 1; | 68 flex-grow: 1; |
74 display: -webkit-flex; | 69 display: flex; |
75 flex-direction: column; | 70 flex-direction: column; |
76 -webkit-flex-direction: column; | |
77 } | 71 } |
78 | 72 |
79 #plot { | 73 #plot { |
80 -webkit-flex-grow: 1; | |
81 flex-grow: 1; | 74 flex-grow: 1; |
82 height: 240px; | 75 height: 240px; |
83 min-width: 500px; | 76 min-width: 500px; |
84 } | 77 } |
85 | 78 |
86 #slider { | 79 #slider { |
87 width: 100%; | 80 width: 100%; |
88 height: 60px; | 81 height: 60px; |
89 } | 82 } |
90 | 83 |
(...skipping 13 matching lines...) Expand all Loading... |
104 margin-left: -15px; | 97 margin-left: -15px; |
105 } | 98 } |
106 | 99 |
107 #loading-div { | 100 #loading-div { |
108 position: relative; | 101 position: relative; |
109 top: 0; | 102 top: 0; |
110 left: 0; | 103 left: 0; |
111 width: 100%; | 104 width: 100%; |
112 height: 100%; | 105 height: 100%; |
113 display: flex; | 106 display: flex; |
114 display: -webkit-flex; | |
115 align-items: center; | 107 align-items: center; |
116 -webkit-align-items: center; | |
117 justify-content: center; | 108 justify-content: center; |
118 -webkit-justify-content: center; | |
119 } | 109 } |
120 | 110 |
121 #alert-icon-container { | 111 #alert-icon-container { |
122 width: 0px; | 112 width: 0px; |
123 height: 0px; | 113 height: 0px; |
124 left: 0px; | 114 left: 0px; |
125 top: 0px; | 115 top: 0px; |
126 position: relative; | 116 position: relative; |
127 } | 117 } |
128 | 118 |
(...skipping 2609 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2738 queryParts.push(name + '=' + encodedValue); | 2728 queryParts.push(name + '=' + encodedValue); |
2739 } | 2729 } |
2740 | 2730 |
2741 const url = window.location.origin + '/report?' + queryParts.join('&')
; | 2731 const url = window.location.origin + '/report?' + queryParts.join('&')
; |
2742 this.fire('openReportPage', {url}); | 2732 this.fire('openReportPage', {url}); |
2743 }, | 2733 }, |
2744 }); | 2734 }); |
2745 })(); | 2735 })(); |
2746 </script> | 2736 </script> |
2747 </dom-module> | 2737 </dom-module> |
OLD | NEW |