<!DOCTYPE html>
<html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<title>Skia Debugger</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/tracing/base/base64.html">
<link rel="import" href="/tracing/extras/chrome/cc/picture.html">
<link rel="import" href="/tracing/ui/extras/chrome/cc/picture_debugger.html">
<script src="string_convert.js"></script>
<style>
picture-ops-list-view {
height: 500px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="header">
<select id="skp_file"></select>
</div>
<div class="view"></div>
<script>
'use strict';
var debuggerEl;
function getPicture(skp64) {
if (!tr.e.cc.PictureSnapshot.CanGetInfo()) {
console.error(tr.e.cc.PictureSnapshot.HowToEnablePictureDebugging());
var infoBar = document.createElement('tr-ui-b-info-bar');
var view = document.querySelector('.view');
view.removeChild(debuggerEl);
debuggerEl = undefined;
view.appendChild(infoBar);
infoBar.message = tr.e.cc.PictureSnapshot.HowToEnablePictureDebugging();
infoBar.visible = true;
return undefined;
}
var size = chrome.skiaBenchmarking.getInfo(skp64);
if (size === undefined)
throw new Error('Unable to get picture information');
return new tr.e.cc.Picture(skp64,
tr.Rect.fromXYWH(0, 0, size.width, size.height),
tr.Rect.fromXYWH(0, 0, size.width, size.height));
}
function utf8_to_b64(str) {
return tr.b.Base64.btoa(unescape(encodeURIComponent(str)));
}
function loadSkp(filename, onSkpLoaded) {
getAsync(filename, function(arr) {
var view = new Uint8Array(arr);
var data = base64EncArr(view, 1);
onSkpLoaded(filename, data);
},'arraybuffer');
}
function YloadSkp(filename, onSkpLoaded) {
getAsync(filename, function(data) {
var data64 = utf8_to_b64(data);
onSkpLoaded(filename, data64);
});
}
function getAsync(url, callback, opt_responseType) {
var req = new XMLHttpRequest();
if (opt_responseType)
req.responseType = opt_responseType;
req.open('GET', url, true);
req.onreadystatechange = function(aEvt) {
if (req.readyState === 4) {
window.setTimeout(function() {
if (req.status === 200) {
if (opt_responseType === undefined)
callback(req.responseText);
else
callback(req.response);
} else {
console.log('Failed to load ' + url);
}
}, 0);
}
};
req.send(null);
}
function createViewFromSkp(filename, skp) {
var p = getPicture(skp);
if (p === undefined)
return;
debuggerEl.picture = p;
}
function onSelectionChange() {
var select = document.querySelector('#skp_file');
window.location.hash = '#' + select[select.selectedIndex].value;
}
function onHashChange() {
var file = window.location.hash.substr(1);
var select = document.querySelector('#skp_file');
if (select[select.selectedIndex].value != file) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].value == file) {
select.selectedIndex = i;
break;
}
}
}
reload();
}
function cleanFilename(file) {
function upcase(letter) {
return ' ' + letter.toUpperCase();
}
return file.replace(/_/g, ' ')
.replace(/\.[^\.]*$/, '')
.replace(/ ([a-z])/g, upcase)
.replace(/^[a-z]/, upcase);
}
function reload() {
var filename = window.location.hash.substr(1);
loadSkp(filename, createViewFromSkp);
}
function onLoad() {
debuggerEl = new tr.ui.e.chrome.cc.PictureDebugger();
document.querySelector('.view').appendChild(debuggerEl);
getAsync('/skp_data/__file_list__', function(data) {
var select = document.querySelector('#skp_file');
var files = JSON.parse(data);
for (var i = 0; i < files.length; ++i) {
var opt = document.createElement('option');
opt.value = files[i];
opt.textContent = cleanFilename(files[i]);
select.appendChild(opt);
}
select.selectedIndex = 0;
select.onchange = onSelectionChange;
if (!window.location.hash) {
// This will trigger an onHashChange so no need to reload directly.
window.location.hash = '#' + select[select.selectedIndex].value;
} else {
onHashChange();
}
});
}
window.addEventListener('hashchange', onHashChange);
window.addEventListener('load', onLoad);
</script>
</body>
</html>