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