UI

Author: longtian

common/jquery.droppable.js

@@ -15,8 +15,8 @@
 
         if (!STYLING_EVENTS_BINDED) {
             $(window).on('dragenter', function () {
-                $("." + DROPPABLE_CLASSNAME).css({
-                    background: "orange"
+                $("." + DROPPABLE_CLASSNAME).addClass("active").css({
+                    height: $(window).innerHeight()
                 });
             });
             STYLING_EVENTS_BINDED = true;

common/styles.css

@@ -2,13 +2,23 @@
     border: 1px solid lightgray;
 }
 
-#drop {
+.droppable {
+    position: absolute;
+    top: 0;
+    height: 500px;
+    width: 100%;
+    display: none;
     text-align: center;
     z-index: 1;
     font-size: 1.5em;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
     margin: -2px 0 10px;
+    line-height: 500px;
+}
+
+.droppable.active {
+    display: block;
+    background: orange;
+    color: white;
 }
 
 body {

cpuprofile_topology/index.html

@@ -11,6 +11,7 @@
     <script src="../common/jquery.droppable.js"></script>
     <script src="../common/track_progress.js"></script>
     <link rel="stylesheet" href="../common/styles.css"/>
+    <link rel="stylesheet" href="//apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.css"/>
     <script>
         var _hmt = _hmt || [];
         (function () {
@@ -38,9 +39,7 @@
                 if (data.head) {
                     if (data.samples) {
                         draw(data);
-                        $("#drop").css({
-                            background: "white"
-                        })
+                        $("#drop").removeClass('active')
                         $("#drop").text(file.name + " " + (Math.floor(file.size / 1024) + " KB"));
 
                         _hmt && _hmt.push(['_trackEvent', "events", 'draw_success', file.name, file.size]);
@@ -51,6 +50,7 @@
                     throw new Error("格式不支持");
                 }
             } catch (e) {
+                $("#drop").removeClass('active')
                 alert(e.message);
                 _hmt && _hmt.push(['_trackEvent', "events", 'draw_error', file.name, file.size]);
             }
@@ -198,7 +198,7 @@
 
         var options = {
             width: "95%",
-            height: (window.innerHeight - $("#drop").outerHeight() - $("#control").outerHeight() - 40) + "px",
+            height: (window.innerHeight - $("#control").outerHeight() - 40) + "px",
             layout: {
                 hierarchical: {
                     enabled: true
@@ -243,15 +243,16 @@
 </script>
 <div id="control">
     <form>
-        <button id="prev">prev</button>
-        <button id="next">next</button>
+        <button id="prev"><i class="fa fa-step-backward"></i></button>
+        <button id="next"><i class="fa fa-step-forward"></i></button>
         <span id="time_text"></span>
         <input id="time" type="range" step="1" style="width: 98%"/>
     </form>
     <footer>
-        2015 MIT License <a target="_blank"
-                            href="https://github.com/wyvernnot/javascript_performance_measurement/tree/gh-pages/cpuprofile_topology">OneProfile
-        on Github</a>
+        <a target="_blank"
+           href="https://github.com/wyvernnot/javascript_performance_measurement/tree/gh-pages/cpuprofile_topology">
+            <i class="fa fa-github"></i>
+        </a>
     </footer>
 </div>
 

heap_snapshot/index.html

@@ -8,9 +8,14 @@
     <link rel="stylesheet" href="../common/styles.css"/>
     <link rel="stylesheet" href="//apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.css"/>
     <style>
-        #root {
-            height: 600px;
-            border: 1px solid;
+        @media (max-width: 414px) {
+            label span {
+                display: none;
+            }
+
+            input[type=file] {
+                display: none;
+            }
         }
     </style>
     <script>
@@ -28,36 +33,39 @@
     把 .heapsnapshot 文件拖到这里<br/>
 </div>
 <div>
-    鼠标模式：
+    <label>
+        <span>鼠标模式：</span>
+    </label>
     <label>
         <input type="radio" name="mode" checked>
         默认
     </label>
 
     <label>
         <input type="radio" name="mode" value="from">
-        <i class="fa fa-expand"></i>起点
+        <i class="fa fa-expand"></i><span>起点</span>
     </label>
 
     <label>
         <input type="radio" name="mode" value="to">
-        <i class="fa fa-compress"></i>汇入
+        <i class="fa fa-compress"></i><span>汇入</span>
     </label>
 
     <label>
         <input type="radio" name="mode" value="fix">
-        <i class="fa fa-anchor"></i>固定
+        <i class="fa fa-anchor"></i><span>固定</span>
     </label>
 
     <label>
         <input type="radio" name="mode" value="unchain">
-        <i class="fa fa-chain-broken"></i>断开
+        <i class="fa fa-chain-broken"></i><span>断开</span>
     </label>
 
     <label>
         <input type="radio" name="mode" value="remove">
-        <i class="fa fa-trash-o"></i>删除
+        <i class="fa fa-trash-o"></i><span>删除</span>
     </label>
+    <input id="file" type="file">
 </div>
 <div id="root"></div>
 <footer>
@@ -77,21 +85,17 @@
             var data = JSON.parse(result);
             if (data.snapshot) {
                 draw(data);
-
-                $("#drop")
-                        .css({
-                            background: "white"
-                        })
-                        .text(file.name + " " + (Math.floor(file.size / 1024) + " KB"));
+                $("#drop").removeClass('active');
+                $("#drop").text(file.name + " " + (Math.floor(file.size / 1024) + " KB"));
 
                 _hmt && _hmt.push(['_trackEvent', "events", 'draw_success', file.name, file.size]);
 
             } else {
                 throw new Error("格式不支持");
             }
         } catch (e) {
+            $("#drop").removeClass('active');
             alert(e.message);
-
             _hmt && _hmt.push(['_trackEvent', "events", 'draw_error']);
         }
     })
@@ -256,6 +260,7 @@
          * weak: "6"
          */
         var options = {
+            height: ($(window).innerHeight() - 80) + "px",
             nodes: {
                 size: 10,
                 shape: "dot"
@@ -393,6 +398,24 @@
             });
         }
 
+        $('#file')[0].addEventListener('change', function () {
+
+            var reader = new FileReader();
+            var file = this.files[0];
+
+            reader.onload = function () {
+                try {
+                    var data = JSON.parse(reader.result);
+                    draw(data);
+                } catch (e) {
+                    alert(e.message);
+                }
+
+            };
+
+            reader.readAsText(file);
+        })
+
     }
 
 </script>