1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<style>
cr-tab-box {
--tabs-background-color: white;
}
.uma-callout {
font-style: italic;
}
th {
text-align: start;
}
.uma-header-type {
min-width: 100px;
}
.uma-header-hash {
min-width: 300px;
}
.uma-header-timestamp {
min-width: 140px;
}
.uma-header-size {
min-width: 70px;
}
.uma-header-status {
min-width: 500px;
}
.uma-log-events {
width: 100%;
}
.uma-log-events-peek {
display: flex;
}
.uma-log-events-peek:hover {
background-color: #eee;
cursor: pointer;
}
.uma-log-events pre {
display: none;
margin: 0;
}
.uma-log-events-expanded pre {
display: block;
max-height: 100px;
min-height: 20px;
overflow-y: scroll;
}
.uma-log-events .expand-or-collapse-icon {
content: url(chrome://resources/images/icon_expand_more.svg);
margin-inline-start: auto;
width: 15px;
}
.uma-log-events-expanded .expand-or-collapse-icon {
content: url(chrome://resources/images/icon_expand_less.svg);
}
tbody tr:nth-child(odd) {
background: rgb(239, 243, 255);
}
#export-uma-logs {
margin-top: 10px;
}
</style>
<cr-tab-box>
<div slot="tab">UMA</div>
<div slot="panel">
<h2>UMA Summary</h2>
<table>
<tbody id="uma-summary-body"></tbody>
</table>
<h2>Logs</h2>
<div id="uma-table-caption" class="uma-callout"></div>
<div class="uma-callout">Proto data is available by exporting.</div>
<table>
<thead>
<tr>
<th class="uma-header-type">Type</th>
<th class="uma-header-hash">Hash</th>
<th class="uma-header-timestamp">Closed Timestamp</th>
<th class="uma-header-size">Size</th>
<th class="uma-header-status">Status</th>
</tr>
</thead>
<tbody id="uma-logs-body"></tbody>
</table>
<button id="export-uma-logs">Export logs</button>
</div>
<div slot="tab">Variations</div>
<div slot="panel">
<h2>Variations Summary</h2>
<table>
<tbody id="variations-summary-body"></tbody>
</table>
</div>
<div slot="tab">Field Trials</div>
<div slot="panel">
<h2>Field Trials Summary</h2>
<field-trials-app></field-trials-app>
</div>
</cr-tab-box>
<template id="uma-log-row-template">
<tr>
<td><!-- Type --></td>
<td><!-- Hash --></td>
<td><!-- Closed Timestamp --></td>
<td><!-- Size --></td>
<td>
<!-- Status -->
<div class="uma-log-events">
<div class="uma-log-events-peek">
<span class="uma-log-events-peek-text"></span>
<span class="expand-or-collapse-icon"></span>
</div>
<pre class="uma-log-events-text"></pre>
</div>
</td>
</tr>
</template>
<template id="summary-row-template">
<tr>
<td><!-- Key --></td>
<td><!-- Value --></td>
</tr>
</template>
|
