From 6a6aca81eeeca82f515ec268212028ea4e51bad9 Mon Sep 17 00:00:00 2001 From: surunzi Date: Tue, 31 May 2016 12:22:38 +0800 Subject: [PATCH] Add: Clear all button --- src/Network/Network.es6 | 36 ++++++++++++++++----------- src/Network/Network.hbs | 35 +++++++++++++++++---------- src/Network/Network.scss | 1 + src/Resources/Resources.es6 | 19 +++++++++++++++ src/Resources/Resources.hbs | 9 +++++++ src/Resources/Resources.scss | 47 +++++++++++++----------------------- src/Sources/Sources.scss | 5 ++-- src/style/mixin.scss | 21 ++++++++++++++++ 8 files changed, 114 insertions(+), 59 deletions(-) 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}} +
+ XMLHttpRequest +
+ +
+
{{/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