1<!DOCTYPE html>
2<html>
3<!--
4Copyright (c) 2013 The Chromium Authors. All rights reserved.
5Use of this source code is governed by a BSD-style license that can be
6found in the LICENSE file.
7-->
8<head>
9<title>Skia Debugger</title>
10<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11
12<script src="/components/webcomponentsjs/webcomponents.js"></script>
13
14<link rel="import" href="/components/polymer/polymer.html">
15<link rel="import" href="/tracing/base/base64.html">
16<link rel="import" href="/tracing/extras/chrome/cc/picture.html">
17<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_debugger.html">
18
19<script src="string_convert.js"></script>
20<style>
21  picture-ops-list-view {
22    height: 500px;
23    overflow-y: auto;
24  }
25</style>
26</head>
27<body>
28  <div class="header">
29    <select id="skp_file"></select>
30  </div>
31
32  <div class="view"></div>
33  <script>
34  'use strict';
35
36  var debuggerEl;
37
38  function getPicture(skp64) {
39    if (!tr.e.cc.PictureSnapshot.CanGetInfo()) {
40      console.error(tr.e.cc.PictureSnapshot.HowToEnablePictureDebugging());
41
42      var infoBar = document.createElement('tr-ui-b-info-bar');
43      var view = document.querySelector('.view');
44
45      view.removeChild(debuggerEl);
46      debuggerEl = undefined;
47
48      view.appendChild(infoBar);
49
50      infoBar.message = tr.e.cc.PictureSnapshot.HowToEnablePictureDebugging();
51      infoBar.visible = true;
52      return undefined;
53    }
54
55    var size = chrome.skiaBenchmarking.getInfo(skp64);
56    if (size === undefined)
57      throw new Error('Unable to get picture information');
58
59    return new tr.e.cc.Picture(skp64,
60        tr.Rect.fromXYWH(0, 0, size.width, size.height),
61        tr.Rect.fromXYWH(0, 0, size.width, size.height));
62  }
63
64  function utf8_to_b64(str) {
65    return tr.b.Base64.btoa(unescape(encodeURIComponent(str)));
66  }
67
68  function loadSkp(filename, onSkpLoaded) {
69    getAsync(filename, function(arr) {
70      var view = new Uint8Array(arr);
71      var data = base64EncArr(view, 1);
72      onSkpLoaded(filename, data);
73    },'arraybuffer');
74  }
75  function YloadSkp(filename, onSkpLoaded) {
76    getAsync(filename, function(data) {
77      var data64 = utf8_to_b64(data);
78      onSkpLoaded(filename, data64);
79    });
80  }
81
82  function getAsync(url, callback, opt_responseType) {
83    var req = new XMLHttpRequest();
84    if (opt_responseType)
85      req.responseType = opt_responseType;
86    req.open('GET', url, true);
87    req.onreadystatechange = function(aEvt) {
88      if (req.readyState === 4) {
89        window.setTimeout(function() {
90          if (req.status === 200) {
91            if (opt_responseType === undefined)
92              callback(req.responseText);
93            else
94              callback(req.response);
95          } else {
96            console.log('Failed to load ' + url);
97          }
98        }, 0);
99      }
100    };
101    req.send(null);
102  }
103
104  function createViewFromSkp(filename, skp) {
105    var p = getPicture(skp);
106    if (p === undefined)
107      return;
108    debuggerEl.picture = p;
109  }
110
111  function onSelectionChange() {
112    var select = document.querySelector('#skp_file');
113    window.location.hash = '#' + select[select.selectedIndex].value;
114  }
115
116  function onHashChange() {
117    var file = window.location.hash.substr(1);
118    var select = document.querySelector('#skp_file');
119    if (select[select.selectedIndex].value != file) {
120      for (var i = 0; i < select.children.length; i++) {
121        if (select.children[i].value == file) {
122          select.selectedIndex = i;
123          break;
124        }
125      }
126    }
127    reload();
128  }
129
130  function cleanFilename(file) {
131    function upcase(letter) {
132      return ' ' + letter.toUpperCase();
133    }
134    return file.replace(/_/g, ' ')
135               .replace(/\.[^\.]*$/, '')
136               .replace(/ ([a-z])/g, upcase)
137               .replace(/^[a-z]/, upcase);
138  }
139
140  function reload() {
141    var filename = window.location.hash.substr(1);
142    loadSkp(filename, createViewFromSkp);
143  }
144
145  function onLoad() {
146    debuggerEl = new tr.ui.e.chrome.cc.PictureDebugger();
147    document.querySelector('.view').appendChild(debuggerEl);
148
149    getAsync('/skp_data/__file_list__', function(data) {
150      var select = document.querySelector('#skp_file');
151      var files = JSON.parse(data);
152
153      for (var i = 0; i < files.length; ++i) {
154        var opt = document.createElement('option');
155        opt.value = files[i];
156        opt.textContent = cleanFilename(files[i]);
157        select.appendChild(opt);
158      }
159      select.selectedIndex = 0;
160      select.onchange = onSelectionChange;
161
162      if (!window.location.hash) {
163        // This will trigger an onHashChange so no need to reload directly.
164        window.location.hash = '#' + select[select.selectedIndex].value;
165      } else {
166        onHashChange();
167      }
168    });
169  }
170
171  window.addEventListener('hashchange', onHashChange);
172  window.addEventListener('load', onLoad);
173  </script>
174</body>
175</html>
176