Dev: Collapse performance timing

src/Network/Network.es6

@@ -13,12 +13,28 @@ export default class Network extends Tool
 
         this._tpl = require('./Network.hbs');
     }
+    init($el)
+    {
+        super.init($el);
+
+        this._bindEvent();
+    }
     show()
     {
         super.show();
 
         this._getPerformanceTimingData();
     }
+    _bindEvent()
+    {
+        var $el = this._$el;
+
+        $el.on('click', '.eruda-expand', function ()
+        {
+            util.$(this).hide();
+            $el.find('.eruda-performance-timing-detail').show();
+        });
+    }
     _getPerformanceTimingData()
     {
         var performance = window.webkitPerformance || window.performance,

src/Network/Network.hbs

@@ -9,7 +9,8 @@
 </div>
 
 <div class="eruda-performance-timing-data">
-    <table>
+    <div class="eruda-expand">Expand</div>
+    <table class="eruda-performance-timing-detail">
         <thead>
             <tr>
                 <th>Name</th>

src/Network/Network.scss

@@ -28,11 +28,24 @@
         }
         .performance-timing-data {
             padding: 0 10px 10px;
-
+            text-align: center;
+            .expand {
+                display: inline-block;
+                background: #fff;
+                border: 1px solid $blue;
+                width: 150px;
+                height: 30px;
+                font-size: 12px;
+                line-height: 30px;
+                box-shadow: $box-shadow;
+                margin: 0 auto;
+            }
             table {
                 width: 100%;
+                display: none;
                 background: #fff;
                 border-collapse: collapse;
+                text-align: left;
                 th {
                     background: $gray;
                     text-align: left;