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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 Copyright (c) 2012 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 i18n-values="dir:textdirection;">
   9 <title>Interactive Timeline Tests</title>
  10 <script src="/src/base.js"></script>
  11 </head>
  12 <body>
  13   <div class="test" src="../test_data/trivial_trace.json" create-detached=1>
  14   </div>
  15
  16   <div class="test" src="../test_data/trivial_trace.json">
  17   </div>
  18
  19   <div class="test" src="../test_data/simple_trace.json">
  20   </div>
  21
  22   <div class="test" src="../test_data/instance_counters.json">
  23   </div>
  24
  25   <div class="test" src="../test_data/tall_trace.json">
  26   </div>
  27
  28   <div class="test" src="../test_data/big_trace.json">
  29   </div>
  30
  31   <div class="test" src="../test_data/huge_trace.json">
  32   </div>
  33
  34   <div class="test" src="../test_data/lthi_cats.json">
  35   </div>
  36
  37   <div class="test" src="../test_data/main_thread_has_unclosed_slices.json">
  38   </div>
  39
  40   <div class="test" src="../test_data/async_begin_end.json">
  41   </div>
  42
  43   <div class="test" src="../test_data/android_systrace.html">
  44   </div>
  45
  46   <div class="test" src="../test_data/v8.log">
  47   </div>
  48
  49   <script>
  50     base.require('about_tracing.profiling_view'); /* For deps */
  51     base.require('cc');
  52   </script>
  53   <script>
  54   function getAsync(url, cb) {
  55     var req = new XMLHttpRequest();
  56     req.open('GET', url, true);
  57     req.onreadystatechange = function(aEvt) {
  58       if (req.readyState == 4) {
  59         window.setTimeout(function() {
  60           if (req.status == 200) {
  61             cb(req.responseText);
  62           } else {
  63             console.log('Failed to load ' + url);
  64           }
  65         }, 0);
  66       }
  67     };
  68     req.send(null);
  69   }
  70
  71   function load(parentEl) {
  72     var src = parentEl.getAttribute('src');
  73     if (document.location.hash && document.location.hash.substring(1) != src) {
  74       parentEl.hidden = true;
  75       return;
  76     }
  77     parentEl.hidden = false;
  78     parentEl.textContent = '';
  79     var titleEl = document.createElement('h3');
  80     var linkEl = document.createElement('a');
  81     linkEl.textContent = src;
  82     linkEl.href = '#' + src;
  83     titleEl.appendChild(linkEl);
  84
  85     var containerEl = document.createElement('div');
  86     containerEl.tabIndex = 0;
  87     containerEl.style.border = '1px solid red';
  88     containerEl.style.display = '-webkit-box';
  89     containerEl.style.maxHeight = '600px';
  90
  91     var timelineViewEl = document.createElement('div');
  92     ui.decorate(timelineViewEl, tracing.TimelineView);
  93     timelineViewEl.focusElement = containerEl;
  94     timelineViewEl.viewTitle = src;
  95
  96     parentEl.appendChild(titleEl);
  97     parentEl.appendChild(containerEl);
  98
  99     // Creating attached vs detached stress tests the canvas- and viewport-
 100     // setup code.
 101     var create_detached = parentEl.getAttribute('create-attached') == 1;
 102     function createTraceModel(data) {
 103       timelineViewEl.model = new tracing.TraceModel(data);
 104       if (!create_detached)
 105         containerEl.appendChild(timelineViewEl);
 106     }
 107     if (create_detached)
 108       containerEl.appendChild(timelineViewEl);
 109     getAsync(src, createTraceModel);
 110   }
 111
 112   function onLoad() {
 113     Array.prototype.forEach.call(document.querySelectorAll('.test'),
 114                                  load);
 115   }
 116   document.addEventListener('DOMContentLoaded', onLoad);
 117
 118   window.addEventListener('hashchange', onLoad);
 119   </script>
 120 </body>
 121 </html>