diff --git a/src/Console/Console.es6 b/src/Console/Console.es6 index 493d46d..b3b0f6c 100644 --- a/src/Console/Console.es6 +++ b/src/Console/Console.es6 @@ -197,9 +197,9 @@ export default class Console extends Tool var settings = this._parent.get('settings'); settings.text('Console') - .add(cfg, 'catchGlobalErr', 'Catch Global Errors') - .add(cfg, 'overrideConsole', 'Override Console') - .add(cfg, 'displayIfErr', 'Auto Display If Error Occurs') + .switch(cfg, 'catchGlobalErr', 'Catch Global Errors') + .switch(cfg, 'overrideConsole', 'Override Console') + .switch(cfg, 'displayIfErr', 'Auto Display If Error Occurs') .separator() } } diff --git a/src/Console/Console.scss b/src/Console/Console.scss index fafde1c..72c6af2 100644 --- a/src/Console/Console.scss +++ b/src/Console/Console.scss @@ -18,7 +18,7 @@ top: 1px; transition: color $anim-duration; &:active { - color: $gray-light; + color: $gray-dark; } } .icon-ban { diff --git a/src/Console/Log.scss b/src/Console/Log.scss index 2e032b5..64c0485 100644 --- a/src/Console/Log.scss +++ b/src/Console/Log.scss @@ -37,7 +37,7 @@ color: $blue; } .icon-times-circle { - color: $red-dark; + color: $red; } .icon-exclamation-triangle { color: $yellow-dark; @@ -79,22 +79,22 @@ } } &.error { - background: #fff0f0; - color: #f00; - border-top: 1px solid #ffd7d7; - border-bottom: 1px solid #ffd7d7; + background: $red-light; + color: $red; + border-top: 1px solid $red; + border-bottom: 1px solid $red; .stack { - color: #000; + color: $gray-dark; padding-left: 1.2em; } .times { - background: #f00; + background: $red; } } &.warn { background: #fffbe6; - border-top: 1px solid #fff5c2; - border-bottom: 1px solid #fff5c2; + border-top: 1px solid $yellow; + border-bottom: 1px solid $yellow; } &.info { color: $blue; diff --git a/src/DevTools/NavBar.es6 b/src/DevTools/NavBar.es6 index 8782c41..b109fa4 100644 --- a/src/DevTools/NavBar.es6 +++ b/src/DevTools/NavBar.es6 @@ -19,7 +19,7 @@ export default class NavBar extends util.Emitter add(name) { this._len++; - this._$ul.prepend(`
  • ${name}
    • `); + this._$ul.prepend(`
  • ${name}
    • `); this._resetWidth(); } remove(name) diff --git a/src/DevTools/NavBar.scss b/src/DevTools/NavBar.scss index cdbe4d7..7ac0f72 100644 --- a/src/DevTools/NavBar.scss +++ b/src/DevTools/NavBar.scss @@ -23,9 +23,11 @@ $item-width: 69px; font-size: $font-size-s; text-align: center; text-transform: capitalize; - transition: all $anim-duration; + transition: background $anim-duration; + &:active { + background: $blue-dark; + } &.active { - color: #fff; background: $blue-light; } } diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 496192b..62714d7 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -249,7 +249,7 @@ export default class Elements extends Tool var settings = this._parent.get('settings'); settings.text('Elements') - .add(cfg, 'overrideEventTarget', 'Catch Event Listeners') + .switch(cfg, 'overrideEventTarget', 'Catch Event Listeners') .separator(); } } @@ -326,6 +326,7 @@ function formatChildNodes(nodes) { ret.push({ text: formatElName(child), + isEl: true, idx: i }); } diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs index eeb6260..5b465ca 100644 --- a/src/Elements/Elements.hbs +++ b/src/Elements/Elements.hbs @@ -4,7 +4,7 @@ {{#if children}} {{/if}} @@ -31,7 +31,7 @@ {{#if computedStyle}}
    -

    Computed Style

    +

    Computed Style

    diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index ae740ad..100db09 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -11,9 +11,12 @@ } .breadcrumb { background: #fff; - padding: $padding; margin-bottom: 10px; word-break: break-all; + padding: $padding; + font-size: $font-size-l; + min-height: 40px; + border-bottom: 1px solid $gray-light; } .section { h2 { @@ -21,6 +24,10 @@ padding: $padding; color: #fff; font-size: $font-size; + transition: background $anim-duration; + &.active-effect:active { + background: $blue-dark; + } } margin-bottom: 10px; } @@ -33,6 +40,17 @@ padding: $padding; border-top: 1px solid $gray-light; white-space: nowrap; + transition: background $anim-duration, color $anim-duration; + span { + transition: color $anim-duration; + } + &.active-effect:active { + background: $blue; + color: #fff; + span { + color: #fff; + } + } } } .attributes { @@ -76,7 +94,7 @@ padding: 5px 10px; &.key { white-space: nowrap; - color: $red-dark; + color: $red; } } } @@ -96,7 +114,7 @@ padding-left: 2em; word-break: break-all; span { - color: $red-dark; + color: $red; } } &:last-child { @@ -148,7 +166,12 @@ line-height: 40px; width: 20%; display: inline-block; - &:active, &.active { + transition: background $anim-duration, color $anim-duration; + &:active { + background: $blue; + color: #fff; + } + &.active { color: $blue; } } diff --git a/src/Features/Features.es6 b/src/Features/Features.es6 index 5a810a1..efd0538 100644 --- a/src/Features/Features.es6 +++ b/src/Features/Features.es6 @@ -32,20 +32,22 @@ export default class Features extends Tool modernizr.testRunner(); + let i = 0, + featureNum = featureNames.length; + util.each(featureNames, (feature) => { if (specialNames[feature]) feature = specialNames[feature]; feature = feature.replace(/\//g, ''); - modernizr.on(feature, (result) => this._add(feature, result)); + modernizr.on(feature, result => + { + this._features[feature] = result; + i++; + if (i === featureNum) this._render(); + }); }); } - _add(name, result) - { - this._features[name] = result; - - this._render(); - } _render() { this._$el.html(this._tpl({features: this._features})); diff --git a/src/Features/Features.hbs b/src/Features/Features.hbs index 4ed61e4..1658236 100644 --- a/src/Features/Features.hbs +++ b/src/Features/Features.hbs @@ -1,10 +1,10 @@ -Go to HTML5 Test \ No newline at end of file +Go to HTML5 Test \ No newline at end of file diff --git a/src/Features/Features.scss b/src/Features/Features.scss index b490f10..2d5bb1e 100644 --- a/src/Features/Features.scss +++ b/src/Features/Features.scss @@ -1,9 +1,9 @@ @import "../style/variable"; +@import "../style/mixin"; .dev-tools { .tools { .features { - overflow-y: auto; - -webkit-overflow-scrolling: touch; + @include overflow-auto(y); ul { margin-top: 5px; li { @@ -11,6 +11,7 @@ float: left; padding: 5px; .inner-wrapper { + @include overflow-auto(x); box-shadow: $box-shadow; font-size: 12px; text-decoration: underline; @@ -20,11 +21,16 @@ border-radius: 4px; text-align: center; background: $red; - overflow-x: auto; - -webkit-overflow-scrolling: touch; + transition: background $anim-duration; + &:active { + background: $red-dark; + } &.ok { background: #fff; color: $gray; + &:active { + background: $gray-light; + } } } } @@ -42,6 +48,10 @@ text-decoration: none; text-align: center; margin-top: 10px; + transition: background $anim-duration; + &:active { + background: $blue-dark; + } } } } } \ No newline at end of file diff --git a/src/Network/Network.es6 b/src/Network/Network.es6 index 8fea510..d85d199 100644 --- a/src/Network/Network.es6 +++ b/src/Network/Network.es6 @@ -118,6 +118,8 @@ export default class Network extends Tool target.time = target.time - target.startTime; target.displayTime = formatTime(target.time); + if (target.done && (target.status < 200 || target >= 300)) target.hasErr = true; + this._render(); } _bindEvent() @@ -306,9 +308,9 @@ export default class Network extends Tool var settings = this._parent.get('settings'); settings.text('Network') - .add(cfg, 'overrideXhr', 'Catch Xhr Requests') - .add(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing') - .add(cfg, 'disablePerformance', 'Disable Performance Timing') + .switch(cfg, 'overrideXhr', 'Catch Xhr Requests') + .switch(cfg, 'hideXhrResource', 'Hide Xhr Resource Timing') + .switch(cfg, 'disablePerformance', 'Disable Performance Timing') .separator(); } _render() @@ -319,7 +321,7 @@ export default class Network extends Tool var renderData = {entries: this._resourceTimingData}; - if (util.keys(this._requests).length > 0) + if (!util.isEmpty(this._requests)) { renderData.requests = this._requests; } diff --git a/src/Network/Network.hbs b/src/Network/Network.hbs index 8532148..381cbc4 100644 --- a/src/Network/Network.hbs +++ b/src/Network/Network.hbs @@ -45,7 +45,7 @@ {{#if requests}} {{/each}} @@ -40,7 +40,7 @@ {{/each}} @@ -67,7 +67,7 @@ {{/each}} diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index 463bc83..2b6c4b3 100644 --- a/src/Resources/Resources.scss +++ b/src/Resources/Resources.scss @@ -39,8 +39,9 @@ border-radius: 50%; font-size: 12px; cursor: pointer; + transition: color $anim-duration; &:active { - color: $gray-light; + color: $gray-dark; } } } @@ -82,9 +83,13 @@ padding: 10px; word-break: break-all; .icon-trash { - color: $red-dark; + color: $red; display: inline-block; padding: 5px; + transition: color $anim-duration; + &:active { + color: $red-dark; + } } &.key { white-space: nowrap; diff --git a/src/Settings/Settings.es6 b/src/Settings/Settings.es6 index b61185c..4e8929f 100644 --- a/src/Settings/Settings.es6 +++ b/src/Settings/Settings.es6 @@ -19,7 +19,7 @@ export default class Settings extends Tool this._bindEvent(); } - add(config, key, desc) + switch(config, key, desc) { this._settings.push({ config: config, diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss index 145b031..3371379 100644 --- a/src/Snippets/Snippets.scss +++ b/src/Snippets/Snippets.scss @@ -20,6 +20,7 @@ .btn { background: $red; cursor: pointer; + transition: background $anim-duration; } .btn:active { background: $red-dark; diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 9c75131..6601c9c 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -155,7 +155,8 @@ export default class Sources extends Tool { var val = this._data.val; - val.hasResTxt = (val.resTxt.trim() !== ''); + if (val.resTxt.trim() === '') delete val.resTxt; + if (util.isEmpty(val.resHeaders)) delete val.resHeaders; this._renderHtml(this._httpTpl(this._data.val)); } diff --git a/src/Sources/http.hbs b/src/Sources/http.hbs index 9fc0bba..c93f50d 100644 --- a/src/Sources/http.hbs +++ b/src/Sources/http.hbs @@ -7,16 +7,22 @@

    Response Headers

    {{key}} {{val}} - +
    {{key}} {{val}} - +
    {{key}} {{val}} - +
    - {{#each resHeaders}} + {{#if resHeaders}} + {{#each resHeaders}} + + + + + {{/each}} + {{else}} - - + - {{/each}} + {{/if}}
    {{@key}}{{.}}
    {{@key}}{{.}}Empty
    - {{#if hasResTxt}} + {{#if resTxt}} 
    {{resTxt}}
    {{/if}}
    \ No newline at end of file diff --git a/src/index.es6 b/src/index.es6 index 7398fb9..a067c84 100644 --- a/src/index.es6 +++ b/src/index.es6 @@ -87,11 +87,11 @@ module.exports = { devTools.add(settings); settings.separator() - .add(this._entryBtn.config, 'rememberPos', 'Remember Entry Button Position') + .switch(this._entryBtn.config, 'rememberPos', 'Remember Entry Button Position') .separator() - .add(devTools.config, 'activeEruda', 'Always Activated') - .add(devTools.config, 'transparent', 'Transparent') - .add(devTools.config, 'halfScreen', 'Half Screen Size') + .switch(devTools.config, 'activeEruda', 'Always Activated') + .switch(devTools.config, 'transparent', 'Transparent') + .switch(devTools.config, 'halfScreen', 'Half Screen Size') .separator(); }, _initTools() diff --git a/src/lib/util.js b/src/lib/util.js index ffc1dc4..2238bc4 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -530,26 +530,27 @@ module.exports = (function () return exports; })({}); - /* ------------------------------ isArr ------------------------------ */ + /* ------------------------------ isArgs ------------------------------ */ - var isArr = _.isArr = (function (exports) + var isArgs = _.isArgs = (function (exports) { - /* Check if value is an `Array` object. + /* Check if value is classified as an arguments object. * - * |Name |Type |Desc | - * |-------------------------------------------------| - * |val |* |The value to check | - * |return|boolean|True if value is an `Array` object| + * |Name |Type |Desc | + * |---------------------------------------------------| + * |value |* |Value to check | + * |return|boolean|True if value is an arguments object| * * ```javascript - * isArr([]); // -> true - * isArr({}); // -> false + * (function () { + * isArgs(arguments); // -> true + * })(); * ``` */ - exports = Array.isArray || function (val) + exports = function (val) { - return objToStr(val) === '[object Array]'; + return objToStr(val) === '[object Arguments]'; }; return exports; @@ -909,6 +910,31 @@ module.exports = (function () return exports; })({}); + /* ------------------------------ isArr ------------------------------ */ + + var isArr = _.isArr = (function (exports) + { + /* Check if value is an `Array` object. + * + * |Name |Type |Desc | + * |-------------------------------------------------| + * |val |* |The value to check | + * |return|boolean|True if value is an `Array` object| + * + * ```javascript + * isArr([]); // -> true + * isArr({}); // -> false + * ``` + */ + + exports = Array.isArray || function (val) + { + return objToStr(val) === '[object Array]'; + }; + + return exports; + })({}); + /* ------------------------------ isBool ------------------------------ */ var isBool = _.isBool = (function (exports) @@ -998,6 +1024,38 @@ module.exports = (function () return exports; })({}); + /* ------------------------------ isEmpty ------------------------------ */ + + var isEmpty = _.isEmpty = (function (exports) + { + /* Check if value is an empty object or array. + * + * |Name |Type |Desc | + * |-------------------------------------| + * |val |* |Value to check | + * |return|boolean|True if value is empty| + * + * ```javascript + * isEmpty([]); // -> true + * isEmpty({}); // -> true + * ``` + */ + + exports = function (val) + { + if (val == null) return true; + + if (isArrLike(val) && (isArr(val) || isStr(val) || isArgs(val))) + { + return val.length === 0; + } + + return keys(val).length === 0; + }; + + return exports; + })({}); + /* ------------------------------ isErr ------------------------------ */ var isErr = _.isErr = (function (exports) diff --git a/src/style/variable.scss b/src/style/variable.scss index 91f2ac4..b48b8d8 100644 --- a/src/style/variable.scss +++ b/src/style/variable.scss @@ -12,11 +12,14 @@ $anim-duration: .3s; // https://www.google.com/design/spec/style/color.html#color-color-palette $blue: #2196f3; $blue-light: #90caf9; +$blue-dark: #1565c0; $gray: #707d8b; $gray-light: #eceffe; $gray-dark: #263238; $red: #f44336; -$red-dark: #f73c37; +$red-light: #ffebee; +$red-dark: #b71c1c; $green: #009688; -$yellow: #ff9800; -$yellow-dark: #ff9900; \ No newline at end of file +$yellow: #ffc107; +$yellow-light: #ffecb3; +$yellow-dark: #ff6f00; \ No newline at end of file