Add: Clear all button

src/Network/Network.es6

@@ -15,10 +15,11 @@ export default class Network extends Tool
         this._performanceTimingData = [];
         this._performanceTiming = {};
         this._resourceTimingData = [];
-        this._performance = window.webkitPerformance || window.performance;
         this._requests = {};
-
         this._tpl = require('./Network.hbs');
+
+        var performance = this._performance = window.webkitPerformance || window.performance;
+        this._hasResourceTiming = performance && util.isFn(performance.getEntries);
     }
     init($el, parent)
     {
@@ -151,6 +152,10 @@ export default class Network extends Tool
             {
                 showSources('img', data.url);
             }
+        }).on('click', '.eruda-clear-xhr', function ()
+        {
+            self._requests = {};
+            self._render();
         });
 
         function showSources(type, data)
@@ -259,14 +264,12 @@ export default class Network extends Tool
     }
     _getResourceTimingData()
     {
-        var performance = this._performance;
-        if (!performance || !util.isFn(performance.getEntries)) return;
+        if (!this._hasResourceTiming) return;
 
-        var entries = performance.getEntries();
+        var entries = this._performance.getEntries(),
+            hideXhr = this.config.get('hideXhrResource'),
+            data = [];
 
-        var data = [];
-
-        var hideXhr = this.config.get('hideXhrResource');
         entries.forEach(entry =>
         {
             if (hideXhr && entry.initiatorType === 'xmlhttprequest') return;
@@ -303,25 +306,30 @@ export default class Network extends Tool
 
         var settings = this._parent.get('settings');
         settings.text('Network')
-                .switch(cfg, 'overrideXhr', 'Catch Xhr Requests')
-                .switch(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing')
-                .switch(cfg, 'disablePerformance', 'Disable Performance Timing')
+                .switch(cfg, 'overrideXhr', 'Catch Xhr Requests');
+
+        if (this._hasResourceTiming) settings.switch(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing');
+
+        settings.switch(cfg, 'disablePerformance', 'Disable Performance Timing')
                 .separator();
     }
     _render()
     {
         if (!this.active) return;
 
+        var cfg = this.config;
+
         this._getResourceTimingData();
 
         var renderData = {entries: this._resourceTimingData};
 
-        if (!util.isEmpty(this._requests))
+        if (cfg.get('overrideXhr'))
         {
-            renderData.requests = this._requests;
+            renderData.displayReq = true;
+            if (!util.isEmpty(this._requests)) renderData.requests = this._requests;
         }
 
-        if (!this.config.get('disablePerformance'))
+        if (!cfg.get('disablePerformance'))
         {
             this._getPerformanceTimingData();
             renderData.data = this._performanceTimingData;

src/Network/Network.hbs

@@ -43,19 +43,28 @@
     </ul>
 {{/if}}
 
-{{#if requests}}
-    <div class="eruda-title">XMLHttpRequest</div>
+{{#if displayReq}}
+    <div class="eruda-title">
+        XMLHttpRequest
+        <div class="eruda-btn eruda-clear-xhr" ontouchstart>
+            <span class="eruda-icon-ban"></span>
+        </div>
+    </div>
     <ul class="eruda-requests">
-        {{#each requests}}
-            <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
-                <span>{{name}}</span>
-                <span>{{status}}</span>
-                <span>{{method}}</span>
-                <span>{{subType}}</span>
-                <span>{{size}}</span>
-                <span>{{displayTime}}</span>
-                <span class="eruda-blue">{{url}}</span>
-            </li>
-        {{/each}}
+        {{#if requests}}
+            {{#each requests}}
+                <li class="eruda-request {{#if hasErr}}eruda-error{{/if}}" data-id="{{@key}}">
+                    <span>{{name}}</span>
+                    <span>{{status}}</span>
+                    <span>{{method}}</span>
+                    <span>{{subType}}</span>
+                    <span>{{size}}</span>
+                    <span>{{displayTime}}</span>
+                    <span class="eruda-blue">{{url}}</span>
+                </li>
+            {{/each}}
+        {{else}}
+            <li><span>Empty</span></li>
+        {{/if}}
     </ul>
 {{/if}}

src/Network/Network.scss

@@ -46,6 +46,7 @@
             }
         }
         .title {
+            @include right-circle-btn();
             background: $gray;
             padding: $padding;
             color: #fff;

src/Resources/Resources.es6

@@ -180,6 +180,25 @@ export default class Resources extends Tool
                delCookie(key);
                self.refreshCookie()._render();
            })
+           .on('click', '.eruda-clear-storage', function ()
+           {
+               var type = util.$(this).data('type');
+
+               if (type === 'local')
+               {
+                   util.each(self._localStoreData, val => localStorage.removeItem(val.key));
+                   self.refreshLocalStorage()._render();
+               } else
+               {
+                   util.each(self._sessionStoreData, val => sessionStorage.removeItem(val.key));
+                   self.refreshSessionStorage()._render();
+               }
+           })
+           .on('click', '.eruda-clear-cookie', () =>
+           {
+               util.each(this._cookieData, val => delCookie(val.key));
+               this.refreshCookie()._render();
+           })
            .on('click', '.eruda-storage-val', function ()
            {
                var $this = util.$(this),

src/Resources/Resources.hbs

@@ -4,6 +4,9 @@
         <div class="eruda-btn refresh-local-storage" ontouchstart>
             <span class="eruda-icon-repeat"></span>
         </div>
+        <div class="eruda-btn eruda-clear-storage" data-type="local" ontouchstart>
+            <span class="eruda-icon-ban"></span>
+        </div>
     </h2>
     <table>
         <tbody>
@@ -31,6 +34,9 @@
         <div class="eruda-btn refresh-session-storage" ontouchstart>
             <span class="eruda-icon-repeat"></span>
         </div>
+        <div class="eruda-btn eruda-clear-storage" data-type="session" ontouchstart>
+            <span class="eruda-icon-ban"></span>
+        </div>
     </h2>
     <table>
         <tbody>
@@ -58,6 +64,9 @@
         <div class="eruda-btn refresh-cookie" ontouchstart>
             <span class="eruda-icon-repeat"></span>
         </div>
+        <div class="eruda-btn eruda-clear-cookie" ontouchstart>
+            <span class="eruda-icon-ban"></span>
+        </div>
     </h2>
     <table>
         <tbody>

src/Resources/Resources.scss

@@ -13,10 +13,10 @@
             overflow: hidden;
         }
         .title {
-            padding: 10px;
+            @include right-circle-btn();
+            padding: $padding;
             color: #fff;
             background: $blue;
-            font-size: 14px;
             &.ok {
                 background: $green;
             }
@@ -26,24 +26,6 @@
             &.danger {
                 background: $red;
             }
-            .btn {
-                float: right;
-                margin-right: 2px;
-                display: inline-block;
-                background: #fff;
-                color: $gray;
-                text-align: center;
-                width: 18px;
-                height: 18px;
-                line-height: 18px;
-                border-radius: 50%;
-                font-size: 12px;
-                cursor: pointer;
-                transition: color $anim-duration;
-                &:active {
-                    color: $gray-dark;
-                }
-            }
         }
         .link-list {
             li {
@@ -78,23 +60,28 @@
             td {
                 padding: 10px;
                 word-break: break-all;
-                .icon-trash {
-                    color: $red;
-                    display: inline-block;
-                    padding: 5px;
-                    transition: color $anim-duration;
-                    &:active {
-                        color: $red-dark;
-                    }
-                }
                 &.key {
                     @include overflow-auto(x);
                     white-space: nowrap;
                     max-width: 120px;
                 }
                 &.control {
+                    padding: 0;
+                    font-size: 0;
                     width: 40px;
-                    text-align: center;
+                    .icon-trash {
+                        color: $red;
+                        font-size: $font-size;
+                        display: inline-block;
+                        width: 40px;
+                        height: 40px;
+                        text-align: center;
+                        line-height: 40px;
+                        transition: color $anim-duration;
+                        &:active {
+                            color: $red-dark;
+                        }
+                    }
                 }
             }
             background: #fff;

src/Sources/Sources.scss

@@ -37,12 +37,12 @@
                     background: $blue;
                     padding: $padding;
                     color: #fff;
-                    font-size: 16px;
+                    font-size: $font-size;
                 }
                 margin-bottom: 10px;
                 table {
                     td {
-                        font-size: 14px;
+                        font-size: $font-size-s;
                         padding: 5px 10px;
                     }
                     .key {
@@ -54,6 +54,7 @@
                 @include overflow-auto(x);
                 background: #fff;
                 padding: $padding;
+                font-size: $font-size-s;
                 margin-bottom: 10px;
             }
         }

src/style/mixin.scss

@@ -35,4 +35,25 @@
         display: block;
         clear: both;
     }
+}
+
+@mixin right-circle-btn {
+    .btn {
+        margin-left: 10px;
+        float: right;
+        display: inline-block;
+        background: #fff;
+        color: $gray;
+        text-align: center;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        border-radius: 50%;
+        font-size: 12px;
+        cursor: pointer;
+        transition: color $anim-duration;
+        &:active {
+            color: $gray-dark;
+        }
+    }
 }