src/tools/deep_memory_profiler/visualizer/index.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright 2013 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <meta charset="utf-8">
   8 <link rel="stylesheet" href="static/third_party/jqTree/jqtree.css">
   9 <link rel="stylesheet" href="static/index.css">
  10
  11 <script src="static/third_party/flot/jquery.min.js"></script>
  12 <script src="static/third_party/flot/jquery.flot.min.js"></script>
  13 <script src="static/third_party/flot/jquery.flot.stack.min.js"></script>
  14 <script src="static/third_party/jqTree/tree.jquery.js"></script>
  15 <script src="static/utility.js"></script>
  16 <script src="static/profiler.js"></script>
  17 <script src="static/graph-view.js"></script>
  18 <script src="static/dropdown-view.js"></script>
  19 <script src="static/menu-view.js"></script>
  20 <script>
  21 $(function() {
  22   {% if json is defined and template is defined %}
  23     // Create model.
  24     var profiler = new Profiler({{ json|safe }}, {{ template|safe }});
  25     // Create views subscribing model events.
  26     var graphView = new GraphView(profiler);
  27     var dropdownView = new DropdownView(profiler);
  28     var menuView = new MenuView(profiler);
  29
  30     // initialize categories according to roots information.
  31     profiler.reparse();
  32
  33     // Share feature only appears in server version, so it should be written
  34     // here where the unique file different against local version, rather than
  35     // written as a view which is shared with local version.
  36     $('#share-btn').click(function() {
  37       // Get run_id and current breakdown template and send them to server.
  38       // Post data will be decoded weirdly at app engine side if content isn't
  39       // encoded.
  40       var req_data = {
  41         run_id: profiler.getRunId(),
  42         content: JSON.stringify(profiler.getTemplate())
  43       };
  44
  45       $.ajax({
  46         type: 'POST',
  47         url: '/share',
  48         data: req_data,
  49         success: function(url) {
  50           $('.url').val(url);
  51           $('.url').select();
  52         }
  53       });
  54     });
  55   {% endif %}
  56 });
  57 </script>
  58
  59 <body>
  60   <h1>Deep Memory Profiler Visualizer</h1>
  61   <div>
  62     <form enctype="multipart/form-data" action="{{ upload_url }}" method="post">
  63       <input type="file" name="file"/>
  64       <input class="btn" type="submit" value="Upload"/>
  65     </form>
  66     <p class="error-message">
  67       {{ upload_msg }}
  68     </p>
  69   </div>
  70   <div>
  71     <button class="btn" id="share-btn">Share</button>
  72     <input type="text" class="url">
  73   </div>
  74   <div id="view-div">
  75     <div id="graph-div"></div>
  76     <div id="info-div">
  77       <div id="subs-dropdown"></div>
  78       <div id="category-menu"></div>
  79     </div>
  80   </div>
  81 </body>