summaryrefslogtreecommitdiff
path: root/chromium/third_party/trace-viewer/examples/multi_timeline.html
blob: 23c6e8dcc9f7b4f4a5b8a0390ac39b958c76e83a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE HTML>
<html>
<!--
Copyright (c) 2012 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head i18n-values="dir:textdirection;">
<title>Interactive Timeline Tests</title>
<script src="/src/base.js"></script>
</head>
<body>
  <div class="test" src="../test_data/trivial_trace.json" create-detached=1>
  </div>

  <div class="test" src="../test_data/trivial_trace.json">
  </div>

  <div class="test" src="../test_data/simple_trace.json">
  </div>

  <div class="test" src="../test_data/instance_counters.json">
  </div>

  <div class="test" src="../test_data/tall_trace.json">
  </div>

  <div class="test" src="../test_data/big_trace.json">
  </div>

  <div class="test" src="../test_data/huge_trace.json">
  </div>

  <div class="test" src="../test_data/lthi_cats.json">
  </div>

  <div class="test" src="../test_data/main_thread_has_unclosed_slices.json">
  </div>

  <div class="test" src="../test_data/async_begin_end.json">
  </div>

  <div class="test" src="../test_data/android_systrace.html">
  </div>

  <div class="test" src="../test_data/v8.log">
  </div>

  <script>
    base.require('about_tracing.profiling_view'); /* For deps */
    base.require('cc');
  </script>
  <script>
  function getAsync(url, cb) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function(aEvt) {
      if (req.readyState == 4) {
        window.setTimeout(function() {
          if (req.status == 200) {
            cb(req.responseText);
          } else {
            console.log('Failed to load ' + url);
          }
        }, 0);
      }
    };
    req.send(null);
  }

  function load(parentEl) {
    var src = parentEl.getAttribute('src');
    if (document.location.hash && document.location.hash.substring(1) != src) {
      parentEl.hidden = true;
      return;
    }
    parentEl.hidden = false;
    parentEl.textContent = '';
    var titleEl = document.createElement('h3');
    var linkEl = document.createElement('a');
    linkEl.textContent = src;
    linkEl.href = '#' + src;
    titleEl.appendChild(linkEl);

    var containerEl = document.createElement('div');
    containerEl.tabIndex = 0;
    containerEl.style.border = '1px solid red';
    containerEl.style.display = '-webkit-box';
    containerEl.style.maxHeight = '600px';

    var timelineViewEl = document.createElement('div');
    ui.decorate(timelineViewEl, tracing.TimelineView);
    timelineViewEl.focusElement = containerEl;
    timelineViewEl.viewTitle = src;

    parentEl.appendChild(titleEl);
    parentEl.appendChild(containerEl);

    // Creating attached vs detached stress tests the canvas- and viewport-
    // setup code.
    var create_detached = parentEl.getAttribute('create-attached') == 1;
    function createTraceModel(data) {
      timelineViewEl.model = new tracing.TraceModel(data);
      if (!create_detached)
        containerEl.appendChild(timelineViewEl);
    }
    if (create_detached)
      containerEl.appendChild(timelineViewEl);
    getAsync(src, createTraceModel);
  }

  function onLoad() {
    Array.prototype.forEach.call(document.querySelectorAll('.test'),
                                 load);
  }
  document.addEventListener('DOMContentLoaded', onLoad);

  window.addEventListener('hashchange', onLoad);
  </script>
</body>
</html>