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