| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Skia Correctness Server</title> |
| |
| {{template "header.html" .}} |
| |
| <style type="text/css" media="screen"> |
| test-summary-sk { |
| display: block; |
| margin-top: 0.5em; |
| } |
| html /deep/ .header { |
| width: 25em; |
| } |
| html /deep/ .header.short { |
| width: 5em; |
| } |
| corpus-chooser-sk { |
| display: block; |
| } |
| #search { |
| display: block; |
| } |
| .headToggle { |
| font-size: 20px; |
| } |
| .headToggle paper-toggle-button { |
| margin-right: 2em; |
| } |
| #commitdialog { |
| right: 1em; |
| bottom: 1em; |
| } |
| #core { |
| margin-top: 2em; |
| } |
| |
| .blameHeader { |
| padding-top: 0.7em; |
| padding-right: 0.57em; |
| padding-bottom: 0.7em; |
| padding-left: 0.57em; |
| color: #1F78B4; |
| text-transform: uppercase; |
| } |
| |
| #help { |
| position: absolute; |
| top: 9px; |
| right: 10px; |
| } |
| |
| #help.hidden { |
| display: none; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <scaffold-sk responsiveWidth="700px"> |
| {{template "titlebar.html" .}} |
| <div id=help class=hidden> |
| <table> |
| <tr><th colspan=2>Keyboard Shortcuts</th></tr> |
| <tr><th>J</th><td>Next</td></tr> |
| <tr><th>K</th><td>Prev</td></tr> |
| <tr><th>W</th><td>Zoom</td></tr> |
| <tr><th>A</th><td>Postive</td></tr> |
| <tr><th>S</th><td>Negative</td></tr> |
| <tr><th>D</th><td>Untriaged</td></tr> |
| </table> |
| </div> |
| <div vertical layout id=core> |
| <div horizontal layout center> |
| <paper-button id=search> |
| <core-icon icon=search></core-icon> |
| </paper-button> |
| <div class=headToggle> |
| Head <paper-toggle-button id=head checked></paper-toggle-button> |
| Unt Only <paper-toggle-button id=untonly checked></paper-toggle-button> |
| Details <paper-toggle-button id=details></paper-toggle-button> |
| </div> |
| </div> |
| <query-dialog-sk id=query src="_/paramset"></query-dialog-sk> |
| |
| <sort-sk target=summaries> |
| <paper-button class=header data-key="name" data-alpha=true>Name</paper-button> |
| <!-- <paper-button class="header short" data-key="diameter">Diam</paper-button> --> |
| <paper-button class="header short" >Grid</paper-button> |
| <paper-button class="header short" data-key="pos">Pos</paper-button> |
| <paper-button class="header short" data-key="neg">Neg</paper-button> |
| <paper-button class="header short" data-key="untriaged">Unt</paper-button> |
| <paper-button class="header short" data-key="num">Total</paper-button> |
| <span class="blameHeader"> |
| Blame |
| </span> |
| </sort-sk> |
| <div id="summaries"></div> |
| <paper-spinner active></paper-spinner> |
| <paper-toast duration=10000></paper-toast> |
| <paper-action-dialog id=commitdialog core-transition-bottom heading="Commit(s)" autoCloseDisabled layered=false> |
| <commits-sk id=commitinfo></commits-sk> |
| <paper-button affirmative>Close</paper-button> |
| </paper-action-dialog> |
| <zoom-sk id=zoomer llabel="Closest Triaged" rlabel="Untriaged"></zoom-sk> |
| </div> |
| |
| </scaffold-sk> |
| |
| <script type="text/javascript" charset="utf-8"> |
| (function() { |
| var summaries = []; |
| var page = {}; |
| |
| // The current state of the page. |
| page.state = { |
| query: "source_type=gm", |
| include: false, |
| head: true, |
| untonly: true, |
| details: false, |
| limit: 7, |
| triage: false, |
| } |
| |
| // Is the zoom dialog displayed? |
| var zooming = false; |
| |
| $$$('#zoomer').addEventListener('zoom-closed', function() { |
| zooming = false; |
| }); |
| |
| function displaySummaries(corpus) { |
| $$$('paper-toast').dismiss(); |
| var container = $$$('#summaries'); |
| sk.clearChildren(container); |
| var n = 0; |
| var limitExceeded = false; |
| summaries.forEach(function(c, i) { |
| if (page.state.untonly && c.untriaged == 0) { |
| return |
| } |
| |
| var s = document.createElement('test-summary-sk'); |
| s.query = encodeURIComponent(page.state.query); |
| s.include = page.state.include; |
| s.head = page.state.head; |
| if (i<page.state.limit) { |
| s.details = page.state.details; |
| } else { |
| s.details = false; |
| limitExceeded = true; |
| } |
| s.limit = page.state.limit; |
| s.triage = page.state.triage; |
| s.summary = c; |
| container.appendChild(s); |
| n+=1; |
| }); |
| if (n==0) { |
| $$$('paper-toast').text = "No tests matched your query."; |
| $$$('paper-toast').show(); |
| } |
| if (limitExceeded && page.state.details) { |
| $$$('paper-toast').text = "Too many tests to expand all of them. Try filtering down the number of tests."; |
| $$$('paper-toast').show(); |
| } |
| $$$('paper-spinner').active = false; |
| } |
| |
| |
| function loadList() { |
| $$$('paper-toast').dismiss(); |
| sk.clearChildren($$$('#summaries')); |
| $$$('paper-spinner').active = true; |
| $$$('#head').checked = page.state.head; |
| $$$('#details').checked = page.state.details; |
| sk.get('_/list?'+sk.query.fromObject(page.state)).then(JSON.parse).then(function(json) { |
| summaries = json; |
| displaySummaries(); |
| }).catch(function(e) { |
| $$$('paper-toast').text = e; |
| $$$('paper-toast').show(); |
| }); |
| } |
| |
| // Open up the zoom dialog on the focused digest. |
| // |
| // ele (optional) - The test-summary-details-sk that should |
| // be zoomed. If ele isn't provided then the one with keyboard |
| // focus is used. |
| function zoom(ele) { |
| if (!ele) { |
| var summary = $$$('test-summary-sk'); |
| ele = summary.findFocus(); |
| if (ele == null) { |
| return |
| } |
| } |
| details = { |
| topImgUrl: "/img/images/" + ele.digest + ".png", |
| leftImgUrl: "/img/images/" + ele.dataset.closest + ".png", |
| diffImgUrl: "/img/diffs/" + ele.dataset.diffdigests + ".png", |
| }; |
| $$$('#zoomer', this.shadowRoot).setDetails(details); |
| $$$('#zoomer', this.shadowRoot).open(); |
| zooming = true; |
| } |
| |
| function enableKeyboardShortcuts() { |
| // Allow keyboard navigation for fast triaging. |
| document.body.addEventListener('keydown', function(e){ |
| if (!page.state.triage || zooming) { |
| return |
| } |
| var details = $$$('test-summary-sk'); |
| var c = String.fromCharCode(e.keyCode); |
| switch (c) { |
| case "J": |
| details.focusNext(); |
| break; |
| case "K": |
| details.focusPrev(); |
| break; |
| case "A": |
| details.markFocus("positive"); |
| break; |
| case "S": |
| details.markFocus("negative"); |
| break; |
| case "D": |
| details.markFocus("untriaged"); |
| break; |
| case "W": |
| zoom(); |
| break; |
| } |
| }); |
| } |
| |
| // Map state to/from the URL. |
| sk.stateReflector(page, loadList); |
| |
| sk.WebComponentsReady.then(function(){ |
| enableKeyboardShortcuts(); |
| |
| $$$('#search').addEventListener('click', function() { |
| $$$('#query').query = page.state.query; |
| $$$('#query').include = page.state.include; |
| $$$('#query').open(); |
| }); |
| |
| $$$('#query').addEventListener('closed', function(e) { |
| page.state.query = e.detail.query; |
| page.state.include = e.detail.useIgnored; |
| loadList(); |
| }); |
| |
| $$$('#head').addEventListener('change', function() { |
| page.state.head = $$$('#head').checked; |
| loadList(); |
| }); |
| |
| $$$('#untonly').addEventListener('change', function() { |
| page.state.untonly = $$$('#untonly').checked; |
| displaySummaries(); |
| }); |
| |
| $$$('#details').addEventListener('change', function() { |
| page.state.details = $$$('#details').checked; |
| displaySummaries(); |
| }); |
| |
| $$$('#summaries').addEventListener('commit-selected', function(e) { |
| $$$('#commitinfo').setCommitInfo(e.detail); |
| $$$('#commitdialog').open(); |
| }); |
| |
| $$$('#summaries').addEventListener('triage', function(e) { |
| sk.post('_/triage', JSON.stringify(e.detail)).then(function() { |
| }).catch(function(e) { |
| $$$('paper-toast').text = e; |
| $$$('paper-toast').show(); |
| }); |
| }); |
| |
| $$$('#summaries').addEventListener('zoom-clicked', function(e) { |
| zoom(e.detail); |
| }); |
| |
| $$$('#help').classList.toggle('hidden', !page.state.triage); |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
