| Index: tools/telemetry/telemetry/core/platform/profiler/perf_vis/perf-vis-template.html
|
| diff --git a/tools/telemetry/telemetry/core/platform/profiler/perf_vis/perf-vis-template.html b/tools/telemetry/telemetry/core/platform/profiler/perf_vis/perf-vis-template.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..f578f79008e65b163cd7827ff0a7ea0224453ff7
|
| --- /dev/null
|
| +++ b/tools/telemetry/telemetry/core/platform/profiler/perf_vis/perf-vis-template.html
|
| @@ -0,0 +1,143 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| + <head>
|
| + <meta charset="utf-8">
|
| + <title><page-title></title>
|
| + <style type="text/css">
|
| + body {
|
| + font-family: 'Open Sans', sans-serif;
|
| + font-size: 12px;
|
| + font-weight: 400;
|
| + background-color: #fff;
|
| + padding: 0;
|
| + margin: 5;
|
| + }
|
| +
|
| + .left {
|
| + width: 810px;
|
| + position: absolute;
|
| + left: 0;
|
| + top: 0;
|
| + height: 820px;
|
| + margin: 5;
|
| + }
|
| + .right {
|
| + min-height: 810px;
|
| + margin-left: 810px;
|
| + margin: 5;
|
| + }
|
| +
|
| + #main {
|
| + }
|
| +
|
| + #sequence {
|
| + width: auto;
|
| + height: 400px;
|
| + }
|
| +
|
| + #legend {
|
| + padding: 10px 0 0 3px;
|
| + }
|
| +
|
| + #chart {
|
| + position: relative;
|
| + }
|
| +
|
| + #chart path {
|
| + stroke: #fff;
|
| + position:absolute;
|
| + left:0px;
|
| + top:0px;
|
| + height:800px;
|
| + width:800px;
|
| + }
|
| +
|
| + #sidebar {
|
| + position:absolute;
|
| + left:10px;
|
| + top:10px;
|
| + }
|
| +
|
| + #explanation {
|
| + position: absolute;
|
| + top: 370px;
|
| + left: 355px;
|
| + width: 100px;
|
| + height: 100px;
|
| + text-align: center;
|
| + vertical-align:middle;
|
| + color: #666;
|
| + z-index: -1;
|
| + }
|
| +
|
| + #percentage {
|
| + font-size: 1.5em;
|
| + }
|
| +
|
| + #sequence text, #legend text {
|
| + font-weight: 600;
|
| + fill: #fff;
|
| + }
|
| +
|
| + #callees {
|
| + position: relative;
|
| + width: auto;
|
| + height: auto;
|
| + z-index: 1;
|
| + }
|
| +
|
| + <jquery.dataTables.css>
|
| +
|
| + table.dataTable tbody td {
|
| + height:16px;
|
| + font-weight:bold;
|
| + padding: 1px 5px;
|
| + }
|
| +
|
| + table.dataTable tbody th {
|
| + height:16px;
|
| + font-weight:bold;
|
| + padding: 1px 5px;
|
| + }
|
| +
|
| + a:link {text-decoration:none;}
|
| + a:hover {text-decoration:underline;}
|
| +
|
| + .dataTables_wrapper .dataTables_filter {
|
| + width: 50%;
|
| + float: left;
|
| + text-align: left;
|
| + }
|
| +
|
| + </style>
|
| + <link rel="stylesheet" type="text/css"
|
| + href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
|
| + </head>
|
| + <body>
|
| + <div id="center_area" class="left">
|
| + <div id="chart"></div>
|
| + <div id="sidebar">
|
| + <div id="legend"></div>
|
| + </div>
|
| + <div id="explanation" style="visibility: hidden;">
|
| + <span id="percentage"></span><br/>
|
| + </div>
|
| + </div>
|
| + <div id="right_panel" class="right">
|
| + <div id="merging"></div>
|
| + <div id="sequence"></div>
|
| + <div id="callees">
|
| + <table id="example" class="display" cellspacing="0" width="auto" />
|
| + <table id="bottom-up" class="display" cellspacing="0" width="auto" />
|
| + </div>
|
| + </div>
|
| + </body>
|
| + <script type="text/javascript">
|
| + <jquery-1.11.0.min.js>
|
| + <jquery.dataTables.min.js>
|
| + <sammy-latest.min.js>
|
| + <d3.v3.min.js>
|
| + var json = <data_json>;
|
| + <perf-vis.js>
|
| + </script>
|
| +</html>
|
|
|