OLD | NEW |
1 <link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> | 1 <link href="chrome://resources/polymer/polymer/polymer.html" rel="import"> |
2 <link href="chrome://resources/polymer/core-toolbar/core-toolbar.html" rel="impo
rt"> | 2 <link href="chrome://resources/polymer/core-toolbar/core-toolbar.html" rel="impo
rt"> |
3 <link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html"
rel="import"> | 3 <link href="chrome://resources/polymer/paper-icon-button/paper-icon-button.html"
rel="import"> |
4 <link href="chrome://resources/polymer/core-icons/communication-icons.html" rel=
"import"> | 4 <link href="chrome://resources/polymer/core-icons/communication-icons.html" rel=
"import"> |
| 5 <link href="log-buffer.html" rel="import"> |
5 | 6 |
6 <polymer-element name="log-panel" layout vertical> | 7 <polymer-element name="log-panel" layout vertical> |
7 <template> | 8 <template> |
8 <style> | 9 <style> |
9 core-toolbar { | 10 core-toolbar { |
10 background-color: #069BDE; | 11 background-color: #069BDE; |
11 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); | 12 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); |
12 height: 48px; | 13 height: 48px; |
13 margin: 0; | 14 margin: 0; |
14 } | 15 } |
15 | 16 |
16 core-toolbar paper-icon-button { | 17 core-toolbar paper-icon-button { |
17 padding: 0; | 18 padding: 0; |
18 } | 19 } |
19 | 20 |
20 #list { | 21 #list { |
21 overflow: auto; | 22 overflow: auto; |
22 } | 23 } |
23 | 24 |
24 .list-item { | 25 .list-item { |
25 border-bottom: 1px solid rgba(0, 0, 0, 0.12); | 26 border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
26 font-family: monospace; | 27 font-family: monospace; |
27 font-size: 12px; | 28 font-size: 12px; |
28 padding: 15px 30px; | 29 padding: 15px 30px; |
29 } | 30 } |
30 | 31 |
| 32 .list-item[severity="1"] { |
| 33 background-color: #fffcef; |
| 34 color: #312200; |
| 35 } |
| 36 |
| 37 .list-item[severity="2"] { |
| 38 background-color: #fff1f1; |
| 39 color: #ef0000; |
| 40 } |
| 41 |
31 .item-metadata { | 42 .item-metadata { |
32 color: rgb(153, 153, 153); | 43 color: #888888; |
33 font-size: 10px; | 44 font-size: 10px; |
34 } | 45 } |
35 | 46 |
36 .item-log { | 47 .item-log { |
37 margin: 0; | 48 margin: 0; |
38 overflow: hidden; | 49 overflow: hidden; |
39 } | 50 } |
40 | 51 |
41 .list-item:hover .item-log { | 52 .list-item:hover .item-log { |
42 overflow: auto; | 53 overflow: auto; |
43 text-overflow: clip; | 54 text-overflow: clip; |
44 } | 55 } |
45 </style> | 56 </style> |
46 | 57 |
47 <core-toolbar layout horizontal end-justified center | 58 <core-toolbar layout horizontal end-justified center |
48 on-click="{{clearLogs}}"> | 59 on-click="{{clearLogs_}}"> |
49 <paper-icon-button icon="communication:clear-all"></paper-icon-button> | 60 <paper-icon-button icon="communication:clear-all"></paper-icon-button> |
50 </core-toolbar> | 61 </core-toolbar> |
51 | 62 |
| 63 <log-buffer id='logBuffer' logs="{{logs}}"></log-buffer> |
52 <div id="list" flex> | 64 <div id="list" flex> |
53 <template repeat="{{log in logs}}"> | 65 <template repeat="{{log in logs}}"> |
54 <div class="list-item {{ {selected: log.selected} | tokenList }}" | 66 <div class="list-item {{ {selected: log.selected} | tokenList }}" |
55 on-click={{itemClick}}> | 67 on-click={{itemClick}} severity="{{log.severity}}"> |
56 <div class="item-metadata" layout horizontal> | 68 <div class="item-metadata" layout horizontal> |
57 <div>14:23:50</div> | 69 <div>{{log.time}}</div> |
58 <div flex></div> | 70 <div flex></div> |
59 <div>proximity_auth_class.cc:123</div> | 71 <div>{{stripPath_(log.file)}}:{{log.line}}</div> |
60 </div> | 72 </div> |
61 <pre class="item-log" flex>{{log.text}}</pre> | 73 <pre class="item-log" flex>{{log.text}}</pre> |
62 </div> | 74 </div> |
63 </template> | 75 </template> |
64 </div> | 76 </div> |
65 </template> | 77 </template> |
66 <script src="log-panel.js"></script> | 78 <script src="log-panel.js"></script> |
67 </polymer-element> | 79 </polymer-element> |
OLD | NEW |