diff --git a/src/Network/Network.es6 b/src/Network/Network.es6
index aabc192..a5014f5 100644
--- a/src/Network/Network.es6
+++ b/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;
diff --git a/src/Network/Network.hbs b/src/Network/Network.hbs
index 0338f81..c76eb9b 100644
--- a/src/Network/Network.hbs
+++ b/src/Network/Network.hbs
@@ -43,19 +43,28 @@
{{/if}}
-{{#if requests}}
-
XMLHttpRequest
+{{#if displayReq}}
+
- {{#each requests}}
- -
- {{name}}
- {{status}}
- {{method}}
- {{subType}}
- {{size}}
- {{displayTime}}
- {{url}}
-
- {{/each}}
+ {{#if requests}}
+ {{#each requests}}
+ -
+ {{name}}
+ {{status}}
+ {{method}}
+ {{subType}}
+ {{size}}
+ {{displayTime}}
+ {{url}}
+
+ {{/each}}
+ {{else}}
+ - Empty
+ {{/if}}
{{/if}}
diff --git a/src/Network/Network.scss b/src/Network/Network.scss
index e230c93..9572e48 100644
--- a/src/Network/Network.scss
+++ b/src/Network/Network.scss
@@ -46,6 +46,7 @@
}
}
.title {
+ @include right-circle-btn();
background: $gray;
padding: $padding;
color: #fff;
diff --git a/src/Resources/Resources.es6 b/src/Resources/Resources.es6
index dcf91d2..c5536d2 100644
--- a/src/Resources/Resources.es6
+++ b/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),
diff --git a/src/Resources/Resources.hbs b/src/Resources/Resources.hbs
index ce7964e..933670f 100644
--- a/src/Resources/Resources.hbs
+++ b/src/Resources/Resources.hbs
@@ -4,6 +4,9 @@
+
+
+
@@ -31,6 +34,9 @@
+
+
+
@@ -58,6 +64,9 @@
+
+
+
diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss
index b5b6093..9302fd7 100644
--- a/src/Resources/Resources.scss
+++ b/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;
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
index f86f4da..ebdd8ca 100644
--- a/src/Sources/Sources.scss
+++ b/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;
}
}
diff --git a/src/style/mixin.scss b/src/style/mixin.scss
index 836f679..d291e91 100644
--- a/src/style/mixin.scss
+++ b/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;
+ }
+ }
}
\ No newline at end of file