viewer.html in stackprof-0.2.11

- old
+ new

@@ -3,13 +3,36 @@
 <title>flamegraph</title>
 <style>
   body {
     margin: 0;
     padding: 0;
-    font-family: Monaco, "Liberation Mono", Courier, monospace;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     font-size: 10pt;
   }
+  .overview-container {
+    position: relative;
+  }
+  .overview {
+    cursor: col-resize;
+  }
+  .overview-viewport-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1;
+    height: 1;
+    background-color: rgba(0, 0, 0, 0.25);
+    transform-origin: top left;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+  .moving {
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
   .info {
     display: block;
     height: 40px;
     margin: 3px 6px;
     margin-right: 206px;
@@ -34,44 +57,27 @@
   }
   .legend > div .name {
     max-width: 70%;
     word-wrap: break-word;
   }
-  .legend:hover + .flamegraph .flames:not(.highlighted) {
-    opacity: 0.25;
-  }
-  .legend:hover ~ .zoom .flames:not(.highlighted) {
-    opacity: 0.25;
-  }
-  .brush .extent {
-    stroke: #999;
-    fill-opacity: .125;
-    shape-rendering: crispEdges;
-  }
-  .label {
-    white-space: nowrap;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    padding-left: 1px;
-  }
 </style>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"></script>
 <script src="flamegraph.js"></script>
 </head>
 <body>
   <div class="legend"></div>
-  <div class="flamegraph"></div>
+  <div class="overview-container">
+    <canvas class="overview"></canvas>
+    <div class="overview-viewport-overlay"></div>
+  </div>
   <div class="info">
     <div style="float: right; text-align: right">
       <div class="samples"></div>
       <div class="exclusive"></div>
     </div>
     <div class="frame"></div>
     <div class="file"></div>
   </div>
-  <div class="zoom"></div>
+  <canvas class="flamegraph"></canvas>
   <script type="text/javascript">
     var queryDict = {}
     location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = decodeURIComponent(item.split("=")[1])})
 
     if (queryDict.data) {