diff --git a/package.json b/package.json index 6b475d5..26a994b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eruda", - "version": "0.3.2", + "version": "0.3.3", "description": "Console for mobile JavaScript", "main": "dist/eruda.js", "scripts": { diff --git a/src/Elements/BottomBar.hbs b/src/Elements/BottomBar.hbs index 879ec43..4f9ea71 100644 --- a/src/Elements/BottomBar.hbs +++ b/src/Elements/BottomBar.hbs @@ -1,6 +1,7 @@
\ No newline at end of file diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 4e71379..6369d1e 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -1,6 +1,7 @@ import Tool from '../DevTools/Tool.es6' import CssStore from './CssStore.es6' import Highlight from './Highlight.es6' +import Select from './Select.es6' import util from '../lib/util' require('./Elements.scss'); @@ -25,9 +26,10 @@ export default class Elements extends Tool this._$showArea = $el.find('.eruda-show-area'); $el.append(require('./BottomBar.hbs')()); - this._bindEvent(); this._htmlEl = document.documentElement; this._initHighlight(); + this._initSelect(); + this._bindEvent(); this._setEl(this._htmlEl); } show() @@ -49,7 +51,9 @@ export default class Elements extends Tool } _bindEvent() { - var self = this; + var self = this, + parent = this._parent, + select = this._select; this._$el.on('click', '.eruda-child', function () { @@ -88,14 +92,26 @@ export default class Elements extends Tool var $bottomBar = this._$el.find('.eruda-bottom-bar'); - $bottomBar.on('click', '.back', () => this._back()) - .on('click', '.refresh', () => this._render()) - .on('click', '.highlight', function () + $bottomBar.on('click', '.eruda-back', () => this._back()) + .on('click', '.eruda-refresh', () => this._render()) + .on('click', '.eruda-highlight', () => this._toggleHighlight()) + .on('click', '.eruda-select', () => { - util.$(this).toggleClass('eruda-active'); - self._toggleHighlight() + parent.hide(); + if (this._highlightElement) this._toggleHighlight(); + this._render(); + + this._select.enable(); }) - .on('click', '.reset', () => this._setEl(this._htmlEl)); + .on('click', '.eruda-reset', () => this._setEl(this._htmlEl)); + + select.on('select', (target) => + { + parent.show(); + + if (!this._highlightElement) this._toggleHighlight(); + this._setEl(target); + }); } _toggleAllComputedStyle() { @@ -107,8 +123,13 @@ export default class Elements extends Tool { this._highlight = new Highlight(this._parent.$parent); } + _initSelect() + { + this._select = new Select(); + } _toggleHighlight() { + this._$el.find('.eruda-highlight').toggleClass('eruda-active'); this._highlightElement = !this._highlightElement; this._render(); @@ -202,7 +223,7 @@ function formatElName(data) if (name === 'id' || name === 'class' || name === 'style') return; - ret += ` ' ${name}="${attr.value}"`; + ret += ` ${name}="${attr.value}"`; }); return ret; diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 index b7a6dfe..4d238a1 100644 --- a/src/Elements/Highlight.es6 +++ b/src/Elements/Highlight.es6 @@ -4,9 +4,9 @@ require('./Highlight.scss'); export default class Highlight { - constructor($container) + constructor($parent) { - this._appendTpl($container); + this._appendTpl($parent); } setEl(el) { @@ -86,9 +86,9 @@ export default class Highlight height: bh - pt - pb }); } - _appendTpl($container) + _appendTpl($parent) { - $container.append(require('./Highlight.hbs')()); + $parent.append(require('./Highlight.hbs')()); this._$el = util.$('.eruda-elements-highlight'); this._$margin = this._$el.find('.eruda-margin'); diff --git a/src/Elements/Select.es6 b/src/Elements/Select.es6 new file mode 100644 index 0000000..5b91692 --- /dev/null +++ b/src/Elements/Select.es6 @@ -0,0 +1,32 @@ +import util from '../lib/util' + +export default class Select extends util.Emitter +{ + constructor() + { + super(); + + var self = this; + + this._listener = function (e) + { + self.disable().emit('select', e.target); + + return false; + }; + } + enable() + { + document.body.addEventListener('click', this._listener, true); + + return this; + } + disable() + { + document.body.removeEventListener('click', this._listener, true); + + return this; + } +} + +const CLASS_NAME = 'eruda-elements-select'; \ No newline at end of file diff --git a/src/Network/Request.es6 b/src/Network/Request.es6 index 4b8f88a..d634286 100644 --- a/src/Network/Request.es6 +++ b/src/Network/Request.es6 @@ -89,6 +89,8 @@ function getType(contentType) function formatSize(size) { + if (!util.isNum(size)) size = 0; + if (size < 1024) return size + 'B'; return (size / 1024).toFixed(1) + 'KB'; diff --git a/src/Resources/Resources.es6 b/src/Resources/Resources.es6 index 3249623..54a8927 100644 --- a/src/Resources/Resources.es6 +++ b/src/Resources/Resources.es6 @@ -135,49 +135,45 @@ export default class Resources extends Tool } _bindEvent() { - var self = this; + var self = this, + $el = this._$el, + parent = this._parent; - var parent = this._parent; + $el.on('click', '.refresh-local-storage', () => this.refreshLocalStorage()._render()) + .on('click', '.refresh-cookie', () => this.refreshCookie()._render()) + .on('click', '.refresh-script', () => this.refreshScript()._render()) + .on('click', '.refresh-image', () => this.refreshImage()._render()) + .on('click', '.delete-local-storage', function (e) + { + var key = util.$(this).data('key'); - this._$el.on('click', '.refresh-local-storage', () => - { - this.refreshLocalStorage()._render(); - }).on('click', '.refresh-cookie', () => - { - this.refreshCookie()._render(); - }).on('click', '.refresh-script', () => - { - this.refreshScript()._render(); - }).on('click', '.refresh-image', () => - { - this.refreshImage()._render(); - }).on('click', '.delete-local-storage', function (e) - { - var key = util.$(this).data('key'); + localStorage.removeItem(key); + self.refreshLocalStorage()._render(); + }) + .on('click', '.delete-cookie', function () + { + var key = util.$(this).data('key'); - localStorage.removeItem(key); - self.refreshLocalStorage()._render(); - }).on('click', '.delete-cookie', function () - { - var key = util.$(this).data('key'); + util.cookie.remove(key); + self.refreshCookie()._render(); + }) + .on('click', '.eruda-local-storage-val', function () + { + var key = util.$(this).data('key'), + val = localStorage.getItem(key); - util.cookie.remove(key); - self.refreshCookie()._render(); - }).on('click', '.eruda-local-storage-val', function () - { - var key = util.$(this).data('key'), - val = localStorage.getItem(key); + try { + showSources('json', JSON.parse(val)); + } catch(e) {} + }) + .on('click', '.img-link', function () + { + var src = util.$(this).attr('src'); - try { - showSources('json', JSON.parse(val)); - } catch(e) {} - }).on('click', '.img-link', function () - { - var src = util.$(this).attr('src'); - - showSources('img', src); - }).on('click', '.css-link', linkFactory('css')) - .on('click', '.js-link', linkFactory('js')); + showSources('img', src); + }) + .on('click', '.css-link', linkFactory('css')) + .on('click', '.js-link', linkFactory('js')); util.orientation.on('change', () => this._render()); diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index 2652d34..42c1ee0 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -46,6 +46,9 @@ font-size: 14px; padding: 5px 10px; } + .key { + white-space: nowrap; + } } } .response { diff --git a/src/Sources/http.hbs b/src/Sources/http.hbs index 24d6104..5816bdc 100644 --- a/src/Sources/http.hbs +++ b/src/Sources/http.hbs @@ -6,7 +6,7 @@ {{#each resHeaders}}