src/third_party/trace-viewer/examples/skia_debugger.html

   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 <script src="/tvcm/__init__.js"></script>
  11 <script src="string_convert.js"></script>
  12 <style>
  13   picture-ops-list-view {
  14     height: 500px;
  15     overflow-y: auto;
  16   }
  17 </style>
  18 </head>
  19 <body>
  20   <div class="header">
  21     <select id="skp_file"></select>
  22   </div>
  23
  24   <div class="view"></div>
  25
  26   <script>
  27   tvcm.require('cc.picture');
  28   tvcm.require('cc.picture_debugger');
  29   </script>
  30   <script>
  31   'use strict';
  32
  33   var debuggerEl;
  34
  35   function getPicture(skp64) {
  36     if (!cc.PictureSnapshot.CanGetInfo()) {
  37       console.error(cc.PictureSnapshot.HowToEnablePictureDebugging());
  38
  39       var infoBar = new tvcm.ui.InfoBar();
  40       var view = document.querySelector('.view');
  41
  42       view.removeChild(debuggerEl);
  43       debuggerEl = undefined;
  44
  45       view.appendChild(infoBar);
  46
  47       infoBar.message = cc.PictureSnapshot.HowToEnablePictureDebugging();
  48       infoBar.visible = true;
  49       return undefined;
  50     }
  51
  52     var size = chrome.skiaBenchmarking.getInfo(skp64);
  53     if (size === undefined)
  54       throw new Error('Unable to get picture information');
  55
  56     return new cc.Picture(skp64,
  57         tvcm.Rect.fromXYWH(0, 0, size.width, size.height),
  58         tvcm.Rect.fromXYWH(0, 0, size.width, size.height));
  59   };
  60
  61   function utf8_to_b64( str ) {
  62     return window.btoa(unescape(encodeURIComponent( str )));
  63   }
  64
  65   function loadSkp(filename, onSkpLoaded) {
  66     getAsync(filename, function(arr) {
  67       var view = new Uint8Array(arr);
  68       var data = base64EncArr(view, 1);
  69       onSkpLoaded(filename, data);
  70     },'arraybuffer');
  71   }
  72   function YloadSkp(filename, onSkpLoaded) {
  73     getAsync(filename, function(data) {
  74       var data64 = utf8_to_b64(data);
  75       onSkpLoaded(filename, data64);
  76     });
  77   }
  78
  79   function getAsync(url, callback, opt_responseType) {
  80     var req = new XMLHttpRequest();
  81     if (opt_responseType)
  82       req.responseType = opt_responseType;
  83     req.open('GET', url, true);
  84     req.onreadystatechange = function(aEvt) {
  85       if (req.readyState === 4) {
  86         window.setTimeout(function() {
  87           if (req.status === 200) {
  88             if (opt_responseType === undefined)
  89               callback(req.responseText);
  90             else
  91               callback(req.response);
  92           } else {
  93             console.log('Failed to load ' + url);
  94           }
  95         }, 0);
  96       }
  97     };
  98     req.send(null);
  99   }
 100
 101   function createViewFromSkp(filename, skp) {
 102     var p = getPicture(skp);
 103     if (p === undefined)
 104       return;
 105     debuggerEl.picture = p;
 106   }
 107
 108   function onSelectionChange() {
 109     var select = document.querySelector('#skp_file');
 110     window.location.hash = '#' + select[select.selectedIndex].value;
 111   }
 112
 113   function onHashChange() {
 114     var file = window.location.hash.substr(1);
 115     var select = document.querySelector('#skp_file');
 116     if (select[select.selectedIndex].value != file) {
 117       for (var i = 0; i < select.children.length; i++) {
 118         if (select.children[i].value == file) {
 119           select.selectedIndex = i;
 120           break;
 121         }
 122       }
 123     }
 124     reload();
 125   }
 126
 127   function cleanFilename(file) {
 128     function upcase(letter) {
 129       return ' ' + letter.toUpperCase();
 130     }
 131     return file.replace(/_/g, ' ')
 132                .replace(/\.[^\.]*$/, '')
 133                .replace(/ ([a-z])/g, upcase)
 134                .replace(/^[a-z]/, upcase);
 135   }
 136
 137   function reload() {
 138     var file = window.location.hash.substr(1);
 139     var filename = '/skp_data/' + file;
 140     loadSkp(filename, createViewFromSkp);
 141   }
 142
 143   function onLoad() {
 144     debuggerEl = new cc.PictureDebugger()
 145     document.querySelector('.view').appendChild(debuggerEl);
 146
 147     getAsync('/json/examples/skp', 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>