11cb0ef41Sopenharmony_ci<!DOCTYPE html>
21cb0ef41Sopenharmony_ci<!-- Copyright 2020 the V8 project authors. All rights reserved.
31cb0ef41Sopenharmony_ciUse of this source code is governed by a BSD-style license that can be
41cb0ef41Sopenharmony_cifound in the LICENSE file. -->
51cb0ef41Sopenharmony_ci
61cb0ef41Sopenharmony_ci<html lang="en">
71cb0ef41Sopenharmony_ci
81cb0ef41Sopenharmony_ci<head>
91cb0ef41Sopenharmony_ci  <meta charset="UTF-8">
101cb0ef41Sopenharmony_ci  <title>V8 Zone Statistics</title>
111cb0ef41Sopenharmony_ci  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
121cb0ef41Sopenharmony_ci  <script
131cb0ef41Sopenharmony_ci          src="https://www.gstatic.com/charts/loader.js"></script>
141cb0ef41Sopenharmony_ci  <script
151cb0ef41Sopenharmony_ci          src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.js"
161cb0ef41Sopenharmony_ci          integrity1="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
171cb0ef41Sopenharmony_ci          crossorigin="anonymous"></script>
181cb0ef41Sopenharmony_ci
191cb0ef41Sopenharmony_ci  <script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.js"
201cb0ef41Sopenharmony_ci          crossorigin="anonymous"></script>
211cb0ef41Sopenharmony_ci  <script src="helper.js"></script>
221cb0ef41Sopenharmony_ci
231cb0ef41Sopenharmony_ci  <script type="module" src="details-selection.js"></script>
241cb0ef41Sopenharmony_ci  <script type="module" src="global-timeline.js"></script>
251cb0ef41Sopenharmony_ci  <script type="module" src="trace-file-reader.js"></script>
261cb0ef41Sopenharmony_ci
271cb0ef41Sopenharmony_ci  <style>
281cb0ef41Sopenharmony_cibody {
291cb0ef41Sopenharmony_ci  font-family: 'Roboto', sans-serif;
301cb0ef41Sopenharmony_ci  margin-left: 5%;
311cb0ef41Sopenharmony_ci  margin-right: 5%;
321cb0ef41Sopenharmony_ci}
331cb0ef41Sopenharmony_ci
341cb0ef41Sopenharmony_ci  </style>
351cb0ef41Sopenharmony_ci  <script>
361cb0ef41Sopenharmony_ci'use strict';
371cb0ef41Sopenharmony_ci
381cb0ef41Sopenharmony_cigoogle.charts.load('current', {'packages':['line', 'corechart', 'bar']});
391cb0ef41Sopenharmony_ci
401cb0ef41Sopenharmony_cifunction $(id) { return document.querySelector(id); }
411cb0ef41Sopenharmony_ci
421cb0ef41Sopenharmony_cifunction removeAllChildren(node) {
431cb0ef41Sopenharmony_ci  while (node.firstChild) {
441cb0ef41Sopenharmony_ci    node.removeChild(node.firstChild);
451cb0ef41Sopenharmony_ci  }
461cb0ef41Sopenharmony_ci}
471cb0ef41Sopenharmony_ci
481cb0ef41Sopenharmony_cilet state = Object.create(null);
491cb0ef41Sopenharmony_ci
501cb0ef41Sopenharmony_cifunction globalDataChanged(e) {
511cb0ef41Sopenharmony_ci  state.data = e.detail;
521cb0ef41Sopenharmony_ci  // Emit one entry with the whole model for debugging purposes.
531cb0ef41Sopenharmony_ci  console.log(state.data);
541cb0ef41Sopenharmony_ci  state.selection = null;
551cb0ef41Sopenharmony_ci  $('#global-timeline').selection = state.selection;
561cb0ef41Sopenharmony_ci  $('#global-timeline').data = state.data;
571cb0ef41Sopenharmony_ci  $('#details-selection').data = state.data;
581cb0ef41Sopenharmony_ci}
591cb0ef41Sopenharmony_ci
601cb0ef41Sopenharmony_cifunction globalSelectionChangedA(e) {
611cb0ef41Sopenharmony_ci  state.selection = e.detail;
621cb0ef41Sopenharmony_ci  console.log(state.selection);
631cb0ef41Sopenharmony_ci  $('#global-timeline').selection = state.selection;
641cb0ef41Sopenharmony_ci}
651cb0ef41Sopenharmony_ci
661cb0ef41Sopenharmony_ci  </script>
671cb0ef41Sopenharmony_ci</head>
681cb0ef41Sopenharmony_ci
691cb0ef41Sopenharmony_ci<body>
701cb0ef41Sopenharmony_ci  <h1>V8 Zone memory usage statistics</h1>
711cb0ef41Sopenharmony_ci  <trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
721cb0ef41Sopenharmony_ci
731cb0ef41Sopenharmony_ci  <details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
741cb0ef41Sopenharmony_ci  <global-timeline id="global-timeline"></global-timeline>
751cb0ef41Sopenharmony_ci
761cb0ef41Sopenharmony_ci  <p>Visualize zone usage profile and statistics that have been gathered using</p>
771cb0ef41Sopenharmony_ci  <ul>
781cb0ef41Sopenharmony_ci    <li><code>--trace-zone-stats</code> on V8</li>
791cb0ef41Sopenharmony_ci    <li>
801cb0ef41Sopenharmony_ci      <a
811cb0ef41Sopenharmony_ci        href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
821cb0ef41Sopenharmony_ci        tracing infrastructure</a> collecting data for the category
831cb0ef41Sopenharmony_ci      <code>v8.zone_stats</code>.
841cb0ef41Sopenharmony_ci    </li>
851cb0ef41Sopenharmony_ci  </ul>
861cb0ef41Sopenharmony_ci  <p>
871cb0ef41Sopenharmony_ci    Note that the visualizer needs to run on a web server due to HTML imports
881cb0ef41Sopenharmony_ci    requiring <a
891cb0ef41Sopenharmony_ci         href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
901cb0ef41Sopenharmony_ci  </p>
911cb0ef41Sopenharmony_ci</body>
921cb0ef41Sopenharmony_ci
931cb0ef41Sopenharmony_ci</html>
94