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 <link rel="import" href="/tracing/core/filter.html"> | 7 <link rel="import" href="/tracing/core/filter.html"> |
8 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> | 8 <link rel="import" href="/tracing/ui/base/dom_helpers.html"> |
9 <link rel="import" href="/tracing/ui/base/info_bar_group.html"> | 9 <link rel="import" href="/tracing/ui/base/info_bar_group.html"> |
10 <link rel="import" href="/tracing/ui/base/overlay.html"> | 10 <link rel="import" href="/tracing/ui/base/overlay.html"> |
11 <link rel="import" href="/tracing/ui/base/utils.html"> | 11 <link rel="import" href="/tracing/ui/base/utils.html"> |
12 | 12 |
13 <template id="record-selection-dialog-template"> | 13 <template id="record-selection-dialog-template"> |
14 <style> | 14 <style> |
15 .categories-column-view { | 15 .categories-column-view { |
16 display: -webkit-flex; | 16 display: flex; |
17 -webkit-flex-direction: column; | 17 flex-direction: column; |
18 font-family: sans-serif; | 18 font-family: sans-serif; |
19 max-width: 640px; | 19 max-width: 640px; |
20 min-height: 0; | 20 min-height: 0; |
21 min-width: 0; | 21 min-width: 0; |
22 opacity: 1; | 22 opacity: 1; |
23 transition: max-height 1s ease, max-width 1s ease, opacity 1s ease; | 23 transition: max-height 1s ease, max-width 1s ease, opacity 1s ease; |
24 will-change: opacity; | 24 will-change: opacity; |
25 } | 25 } |
26 | 26 |
27 .categories-column-view-hidden { | 27 .categories-column-view-hidden { |
28 max-height: 0; | 28 max-height: 0; |
29 max-width: 0; | 29 max-width: 0; |
30 opacity: 0; | 30 opacity: 0; |
31 overflow: hidden; | 31 overflow: hidden; |
32 display: none; | 32 display: none; |
33 } | 33 } |
34 | 34 |
35 .categories-selection { | 35 .categories-selection { |
36 display: -webkit-flex; | 36 display: flex; |
37 -webkit-flex-direction: row; | 37 flex-direction: row; |
38 } | 38 } |
39 | 39 |
40 .category-presets { | 40 .category-presets { |
41 padding: 4px; | 41 padding: 4px; |
42 } | 42 } |
43 | 43 |
44 .category-description { | 44 .category-description { |
45 color: #aaa; | 45 color: #aaa; |
46 font-size: small; | 46 font-size: small; |
47 max-height: 1em; | 47 max-height: 1em; |
48 opacity: 1; | 48 opacity: 1; |
49 padding-left: 4px; | 49 padding-left: 4px; |
50 padding-right: 4px; | 50 padding-right: 4px; |
51 text-align: right; | 51 text-align: right; |
52 transition: max-height 1s ease, opacity 1s ease; | 52 transition: max-height 1s ease, opacity 1s ease; |
53 will-change: opacity; | 53 will-change: opacity; |
54 } | 54 } |
55 | 55 |
56 .category-description-hidden { | 56 .category-description-hidden { |
57 max-height: 0; | 57 max-height: 0; |
58 opacity: 0; | 58 opacity: 0; |
59 } | 59 } |
60 | 60 |
61 .default-enabled-categories, | 61 .default-enabled-categories, |
62 .default-disabled-categories { | 62 .default-disabled-categories { |
63 -webkit-flex: 1 1 auto; | 63 flex: 1 1 auto; |
64 display: -webkit-flex; | 64 display: flex; |
65 -webkit-flex-direction: column; | 65 flex-direction: column; |
66 padding: 4px; | 66 padding: 4px; |
67 width: 300px; | 67 width: 300px; |
68 } | 68 } |
69 | 69 |
70 .default-enabled-categories > div, | 70 .default-enabled-categories > div, |
71 .default-disabled-categories > div { | 71 .default-disabled-categories > div { |
72 padding: 4px; | 72 padding: 4px; |
73 } | 73 } |
74 | 74 |
75 .tracing-modes { | 75 .tracing-modes { |
76 -webkit-flex: 1 0 auto; | 76 flex: 1 0 auto; |
77 display: -webkit-flex; | 77 display: flex; |
78 -webkit-flex-direction: reverse; | 78 flex-direction: reverse; |
79 padding: 4px; | 79 padding: 4px; |
80 border-bottom: 2px solid #ddd; | 80 border-bottom: 2px solid #ddd; |
81 border-top: 2px solid #ddd; | 81 border-top: 2px solid #ddd; |
82 } | 82 } |
83 | 83 |
84 .default-disabled-categories { | 84 .default-disabled-categories { |
85 border-left: 2px solid #ddd; | 85 border-left: 2px solid #ddd; |
86 } | 86 } |
87 | 87 |
88 .warning-default-disabled-categories { | 88 .warning-default-disabled-categories { |
89 display: inline-block; | 89 display: inline-block; |
90 font-weight: bold; | 90 font-weight: bold; |
91 text-align: center; | 91 text-align: center; |
92 color: #BD2E2E; | 92 color: #BD2E2E; |
93 width: 2.0ex; | 93 width: 2.0ex; |
94 height: 2.0ex; | 94 height: 2.0ex; |
95 border-radius: 2.0ex; | 95 border-radius: 2.0ex; |
96 border: 1px solid #BD2E2E; | 96 border: 1px solid #BD2E2E; |
97 } | 97 } |
98 | 98 |
99 .categories { | 99 .categories { |
100 font-size: 80%; | 100 font-size: 80%; |
101 padding: 10px; | 101 padding: 10px; |
102 -webkit-flex: 1 1 auto; | 102 flex: 1 1 auto; |
103 } | 103 } |
104 | 104 |
105 .group-selectors { | 105 .group-selectors { |
106 font-size: 80%; | 106 font-size: 80%; |
107 border-bottom: 1px solid #ddd; | 107 border-bottom: 1px solid #ddd; |
108 padding-bottom: 6px; | 108 padding-bottom: 6px; |
109 -webkit-flex: 0 0 auto; | 109 flex: 0 0 auto; |
110 } | 110 } |
111 | 111 |
112 .group-selectors button { | 112 .group-selectors button { |
113 padding: 1px; | 113 padding: 1px; |
114 } | 114 } |
115 | 115 |
116 .record-selection-dialog .labeled-option-group { | 116 .record-selection-dialog .labeled-option-group { |
117 -webkit-flex: 0 0 auto; | 117 flex: 0 0 auto; |
118 -webkit-flex-direction: column; | 118 flex-direction: column; |
119 display: -webkit-flex; | 119 display: flex; |
120 } | 120 } |
121 | 121 |
122 .record-selection-dialog .labeled-option { | 122 .record-selection-dialog .labeled-option { |
123 border-top: 5px solid white; | 123 border-top: 5px solid white; |
124 border-bottom: 5px solid white; | 124 border-bottom: 5px solid white; |
125 } | 125 } |
126 | 126 |
127 .record-selection-dialog .edit-categories { | 127 .record-selection-dialog .edit-categories { |
128 padding-left: 6px; | 128 padding-left: 6px; |
129 } | 129 } |
(...skipping 549 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
679 } | 679 } |
680 warningLink.onclick = onClickHandler.bind(this); | 680 warningLink.onclick = onClickHandler.bind(this); |
681 } | 681 } |
682 }; | 682 }; |
683 | 683 |
684 return { | 684 return { |
685 RecordSelectionDialog, | 685 RecordSelectionDialog, |
686 }; | 686 }; |
687 }); | 687 }); |
688 </script> | 688 </script> |
OLD | NEW |