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