Home | History | Annotate | Download | only in examples 
      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 Copyright (c) 2011 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>Simple Embedded Viewer</title>
     10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     11 
     12 <script src="/components/webcomponentsjs/webcomponents.js"></script>
     13 
     14 <link rel="import" href="/base/xhr.html">
     15 <link rel="import" href="/components/polymer/polymer.html">
     16 <link rel="import" href="/extras/full_config.html">
     17 <link rel="import" href="/ui/timeline_view.html">
     18 
     19 <style>
     20   html,
     21   body {
     22     height: 100%;
     23   }
     24 
     25   body {
     26     -webkit-flex-direction: column;
     27     display: -webkit-flex;
     28     margin: 0;
     29     padding: 0;
     30   }
     31 
     32   body > tr-ui-timeline-view {
     33     -webkit-flex: 1 1 auto;
     34     min-height: 0;
     35   }
     36   body > tr-ui-timeline-view:focus {
     37     outline: none;
     38   }
     39 </style>
     40 </head>
     41 <body>
     42   <tr-ui-timeline-view>
     43     <track-view-container id='track_view_container'></track-view-container>
     44   </tr-ui-timeline-view>
     45 
     46   <script>
     47   'use strict';
     48 
     49   var timelineViewEl;
     50   var selectEl;
     51 
     52   function loadTraces(filenames, onTracesLoaded) {
     53     var traces = [];
     54     for (var i = 0; i < filenames.length; i++) {
     55       traces.push(undefined);
     56     }
     57     var numTracesPending = filenames.length;
     58 
     59     filenames.forEach(function(filename, i) {
     60       getAsync(filename, function(trace) {
     61         traces[i] = trace;
     62         numTracesPending--;
     63         if (numTracesPending == 0)
     64           onTracesLoaded(filenames, traces);
     65       });
     66     });
     67   }
     68 
     69 
     70   function getAsync(url, cb) {
     71     tr.b.getAsync(url).then(cb);
     72   }
     73 
     74   function createViewFromTraces(filenames, traces) {
     75     var m = new tr.Model();
     76     var p = m.importTracesWithProgressDialog(traces, true);
     77     p.then(
     78       function() {
     79         timelineViewEl.model = m;
     80         timelineViewEl.updateDocumentFavicon();
     81         timelineViewEl.globalMode = true;
     82         timelineViewEl.viewTitle = '';
     83       },
     84       function(err) {
     85         var overlay = new tr.ui.b.Overlay();
     86         overlay.textContent = tr.b.normalizeException(err).message;
     87         overlay.title = 'Import error';
     88         overlay.visible = true;
     89       });
     90   }
     91 
     92   function onSelectionChange() {
     93     window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
     94   }
     95 
     96   function onHashChange() {
     97     var file = window.location.hash.substr(1);
     98     if (selectEl[selectEl.selectedIndex].value != file) {
     99       for (var i = 0; i < selectEl.children.length; i++) {
    100         if (selectEl.children[i].value === file) {
    101           selectEl.selectedIndex = i;
    102           break;
    103         }
    104       }
    105     }
    106     reload();
    107   }
    108 
    109   function cleanFilename(file) {
    110     var m = /\/test_data\/(.+)/.exec(file);
    111     var rest = m[1];
    112 
    113     function upcase(letter) {
    114       return ' ' + letter.toUpperCase();
    115     }
    116 
    117     return rest.replace(/_/g, ' ')
    118                .replace(/\.[^\.]*$/, '')
    119                .replace(/ ([a-z])/g, upcase)
    120                .replace(/^[a-z]/, upcase);
    121   }
    122 
    123   function reload() {
    124     loadTraces([window.location.hash.substr(1)], createViewFromTraces);
    125   }
    126 
    127   window.addEventListener('hashchange', onHashChange);
    128 
    129   function onLoad() {
    130     timelineViewEl = document.querySelector('tr-ui-timeline-view');
    131     timelineViewEl.globalMode = true;
    132 
    133     selectEl = document.createElement('select');
    134     timelineViewEl.leftControls.appendChild(selectEl);
    135 
    136     getAsync('/json/examples', function(data) {
    137       var files = JSON.parse(data);
    138       files = files.map(function(rest) {
    139         return '/test_data/' + rest;
    140       });
    141 
    142       for (var i = 0; i < files.length; ++i) {
    143         var opt = document.createElement('option');
    144         opt.value = files[i];
    145         opt.textContent = cleanFilename(files[i]);
    146         selectEl.appendChild(opt);
    147       }
    148       selectEl.selectedIndex = 0;
    149       selectEl.onchange = onSelectionChange;
    150 
    151       if (!window.location.hash) {
    152         // This will trigger an onHashChange so no need to reload directly.
    153         window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
    154       } else {
    155         onHashChange();
    156       }
    157     });
    158   }
    159   window.addEventListener('load', onLoad);
    160   </script>
    161 </body>
    162 </html>
    163