| <!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="/extras/chrome/cc/picture.html"> |
| <link rel="import" href="/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 window.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 file = window.location.hash.substr(1); |
| var filename = '/skp_data/' + file; |
| loadSkp(filename, createViewFromSkp); |
| } |
| |
| function onLoad() { |
| debuggerEl = new tr.ui.e.chrome.cc.PictureDebugger(); |
| document.querySelector('.view').appendChild(debuggerEl); |
| |
| getAsync('/json/examples/skp', 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> |