OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2014 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="import" href="/tracing/base/event.html"> | 8 <link rel="import" href="/tracing/base/event.html"> |
9 <link rel="import" href="/tracing/base/utils.html"> | 9 <link rel="import" href="/tracing/base/utils.html"> |
10 <link rel="import" href="/tracing/ui/base/ui.html"> | 10 <link rel="import" href="/tracing/ui/base/ui.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="overlay-template"> | 13 <template id="overlay-template"> |
14 <style> | 14 <style> |
15 overlay-mask { | 15 overlay-mask { |
16 left: 0; | 16 left: 0; |
17 padding: 8px; | 17 padding: 8px; |
18 position: absolute; | 18 position: absolute; |
19 top: 0; | 19 top: 0; |
20 z-index: 1000; | 20 z-index: 1000; |
21 font-family: sans-serif; | 21 font-family: sans-serif; |
22 -webkit-justify-content: center; | 22 -webkit-justify-content: center; |
23 background: rgba(0, 0, 0, 0.8); | 23 background: rgba(0, 0, 0, 0.8); |
24 display: -webkit-flex; | 24 display: flex; |
25 height: 100%; | 25 height: 100%; |
26 left: 0; | 26 left: 0; |
27 position: fixed; | 27 position: fixed; |
28 top: 0; | 28 top: 0; |
29 width: 100%; | 29 width: 100%; |
30 } | 30 } |
31 overlay-mask:focus { | 31 overlay-mask:focus { |
32 outline: none; | 32 outline: none; |
33 } | 33 } |
34 overlay-vertical-centering-container { | 34 overlay-vertical-centering-container { |
35 -webkit-justify-content: center; | 35 -webkit-justify-content: center; |
36 -webkit-flex-direction: column; | 36 flex-direction: column; |
37 display: -webkit-flex; | 37 display: flex; |
38 } | 38 } |
39 overlay-frame { | 39 overlay-frame { |
40 z-index: 1100; | 40 z-index: 1100; |
41 background: rgb(255, 255, 255); | 41 background: rgb(255, 255, 255); |
42 border: 1px solid #ccc; | 42 border: 1px solid #ccc; |
43 margin: 75px; | 43 margin: 75px; |
44 display: -webkit-flex; | 44 display: flex; |
45 -webkit-flex-direction: column; | 45 flex-direction: column; |
46 min-height: 0; | 46 min-height: 0; |
47 } | 47 } |
48 title-bar { | 48 title-bar { |
49 -webkit-align-items: center; | 49 -webkit-align-items: center; |
50 -webkit-flex-direction: row; | 50 flex-direction: row; |
51 border-bottom: 1px solid #ccc; | 51 border-bottom: 1px solid #ccc; |
52 background-color: #ddd; | 52 background-color: #ddd; |
53 display: -webkit-flex; | 53 display: flex; |
54 padding: 5px; | 54 padding: 5px; |
55 -webkit-flex: 0 0 auto; | 55 flex: 0 0 auto; |
56 } | 56 } |
57 title { | 57 title { |
58 display: inline; | 58 display: inline; |
59 font-weight: bold; | 59 font-weight: bold; |
60 -webkit-box-flex: 1; | 60 flex: 1 1 auto; |
61 -webkit-flex: 1 1 auto; | |
62 } | 61 } |
63 close-button { | 62 close-button { |
64 -webkit-align-self: flex-end; | 63 -webkit-align-self: flex-end; |
65 border: 1px solid #eee; | 64 border: 1px solid #eee; |
66 background-color: #999; | 65 background-color: #999; |
67 font-size: 10pt; | 66 font-size: 10pt; |
68 font-weight: bold; | 67 font-weight: bold; |
69 padding: 2px; | 68 padding: 2px; |
70 text-align: center; | 69 text-align: center; |
71 width: 16px; | 70 width: 16px; |
72 } | 71 } |
73 close-button:hover { | 72 close-button:hover { |
74 background-color: #ddd; | 73 background-color: #ddd; |
75 border-color: black; | 74 border-color: black; |
76 cursor: pointer; | 75 cursor: pointer; |
77 } | 76 } |
78 overlay-content { | 77 overlay-content { |
79 display: -webkit-flex; | 78 display: flex; |
80 -webkit-flex: 1 1 auto; | 79 flex: 1 1 auto; |
81 -webkit-flex-direction: column; | 80 flex-direction: column; |
82 overflow-y: auto; | 81 overflow-y: auto; |
83 padding: 10px; | 82 padding: 10px; |
84 min-width: 300px; | 83 min-width: 300px; |
85 min-height: 0; | 84 min-height: 0; |
86 } | 85 } |
87 button-bar { | 86 button-bar { |
88 -webkit-align-items: baseline; | 87 -webkit-align-items: baseline; |
89 border-top: 1px solid #ccc; | 88 border-top: 1px solid #ccc; |
90 display: -webkit-flex; | 89 display: flex; |
91 -webkit-flex: 0 0 auto; | 90 flex: 0 0 auto; |
92 -webkit-flex-direction: row-reverse; | 91 flex-direction: row-reverse; |
93 padding: 4px; | 92 padding: 4px; |
94 } | 93 } |
95 </style> | 94 </style> |
96 | 95 |
97 <overlay-mask> | 96 <overlay-mask> |
98 <overlay-vertical-centering-container> | 97 <overlay-vertical-centering-container> |
99 <overlay-frame> | 98 <overlay-frame> |
100 <title-bar> | 99 <title-bar> |
101 <title></title> | 100 <title></title> |
102 <close-button>✕</close-button> | 101 <close-button>✕</close-button> |
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
343 Polymer.dom(o.buttons).appendChild(b); | 342 Polymer.dom(o.buttons).appendChild(b); |
344 o.visible = true; | 343 o.visible = true; |
345 return o; | 344 return o; |
346 }; | 345 }; |
347 | 346 |
348 return { | 347 return { |
349 Overlay, | 348 Overlay, |
350 }; | 349 }; |
351 }); | 350 }); |
352 </script> | 351 </script> |
OLD | NEW |