<!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>