| 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 |
|---|
Chromium Code Reviews
Issue 2995833002:
Switch dashboard to new flexbox. (Closed)
