Dev: Sources

This commit is contained in:
surunzi
2016-05-09 11:54:48 +08:00
parent 6f2b4b31c9
commit 18e2ff8910
8 changed files with 166 additions and 66 deletions

View File

@@ -24,11 +24,12 @@ export default class Console extends Tool
overrideConsole()
{
var log = this._log,
origConsole = {},
winConsole = window.console;
function override(name)
{
var origin = winConsole[name];
var origin = origConsole[name] = winConsole[name];
winConsole[name] = function ()
{
@@ -38,9 +39,9 @@ export default class Console extends Tool
};
}
var methods = ['log', 'error', 'info', 'warn', 'dir', 'time', 'timeEnd', 'clear'];
CONSOLE_METHOD.forEach((name) => override(name));
methods.forEach((name) => override(name));
this._origConsole = origConsole;
return this;
}
@@ -61,7 +62,15 @@ export default class Console extends Tool
{
super.destroy();
window.onerror = this._origOnerror;
var origOnerror = this._origOnerror;
if (origOnerror) window.onerror = origOnerror;
var origConsole = this._origConsole;
if (origConsole)
{
var winConsole = window.console;
CONSOLE_METHOD.forEach((name) => winConsole[name] = origConsole[name]);
}
}
_appendTpl()
{
@@ -150,3 +159,5 @@ export default class Console extends Tool
}
}
const CONSOLE_METHOD = ['log', 'error', 'info', 'warn', 'dir', 'time', 'timeEnd', 'clear'];

View File

@@ -10,10 +10,12 @@ function activeEruda(flag)
window.localStorage.setItem('active-eruda', flag);
}
export default class DevTools
export default class DevTools extends util.Emitter
{
constructor($parent)
{
super();
this._$parent = $parent;
this._isShow = false;
this._opacity = 1;
@@ -53,7 +55,7 @@ export default class DevTools
var name = tool.name;
this._$tools.append('<div class="eruda-' + name + ' eruda-tool"></div>');
tool.init(this._$tools.find('.eruda-' + name));
tool.init(this._$tools.find('.eruda-' + name), this);
tool.active = false;
this._tools[name] = tool;
@@ -96,8 +98,12 @@ export default class DevTools
var tool = tools[name];
if (!tool) return;
var lastTool = {};
util.each(tools, (tool) =>
{
if (tool.active) lastTool = tool;
tool.active = false;
tool.hide();
});
@@ -107,6 +113,8 @@ export default class DevTools
this._navBar.activeTool(name);
this.emit('showTool', name, lastTool);
return this;
}
_initConfig()

View File

@@ -3,26 +3,6 @@ import util from '../lib/util'
require('./Resources.scss');
function getState(type, len)
{
if (type === 'localStore' || len === 0) return '';
var warn = 0, danger = 0;
switch (type)
{
case 'cookie': warn = 30; danger = 60; break;
case 'script': warn = 5; danger = 10; break;
case 'stylesheet': warn = 4; danger = 8; break;
case 'image': warn = 50; danger = 100; break;
}
if (len >= danger) return 'eruda-danger';
if (len >= warn) return 'eruda-warn';
return 'eruda-ok';
}
export default class Resources extends Tool
{
constructor()
@@ -36,10 +16,12 @@ export default class Resources extends Tool
this._imageData = [];
this._tpl = require('./Resources.hbs');
}
init($el)
init($el, parent)
{
super.init($el);
this._parent = parent;
this.refresh();
this._bindEvent();
}
@@ -155,6 +137,8 @@ export default class Resources extends Tool
{
var self = this;
var parent = this._parent;
this._$el.on('click', '.refresh-local-storage', () =>
{
this.refreshLocalStorage()._render();
@@ -179,9 +163,37 @@ export default class Resources extends Tool
util.cookie.remove(key);
self.refreshCookie()._render();
});
}).on('click', '.css-link', linkFactory('css'))
.on('click', '.js-link', linkFactory('js'));
util.orientation.on('change', () => this._render());
function linkFactory(type)
{
return function (e)
{
var url = util.$(this).attr('href');
if (!isCrossOrig(url))
{
e.preventDefault();
return util.get(url, (err, data) =>
{
if (err) return;
var sources = parent.get('sources');
sources.set({
type: type,
val: data
});
parent.showTool('sources');
});
}
};
}
}
_render()
{
@@ -213,4 +225,31 @@ export default class Resources extends Tool
$li.css({height: $li.get(0).offsetWidth});
}, 150);
}
}
function getState(type, len)
{
if (type === 'localStore' || len === 0) return '';
var warn = 0, danger = 0;
switch (type)
{
case 'cookie': warn = 30; danger = 60; break;
case 'script': warn = 5; danger = 10; break;
case 'stylesheet': warn = 4; danger = 8; break;
case 'image': warn = 50; danger = 100; break;
}
if (len >= danger) return 'eruda-danger';
if (len >= warn) return 'eruda-warn';
return 'eruda-ok';
}
var origin = window.location.origin;
function isCrossOrig(url)
{
return !util.startWith(url, origin);
}

View File

@@ -63,7 +63,7 @@
{{#if scriptData}}
{{#each scriptData}}
<li>
<a href="{{this}}" target="_blank">{{this}}</a>
<a href="{{this}}" target="_blank" class="js-link">{{this}}</a>
</li>
{{/each}}
{{else}}
@@ -82,7 +82,7 @@
{{#if stylesheetData}}
{{#each stylesheetData}}
<li>
<a href="{{this}}" target="_blank">{{this}}</a>
<a href="{{this}}" target="_blank" class="css-link">{{this}}</a>
</li>
{{/each}}
{{else}}

View File

@@ -15,9 +15,12 @@ export default class Sources extends Tool
this._loadTpl();
}
init($el)
init($el, parent)
{
super.init($el);
this._parent = parent;
this._bindEvent();
}
set(data)
{
@@ -42,7 +45,7 @@ export default class Sources extends Tool
return this._render();
}
get(location.href, (err, data) =>
util.get(location.href, (err, data) =>
{
if (err) return;
@@ -50,6 +53,13 @@ export default class Sources extends Tool
this._reset();
});
}
_bindEvent()
{
this._parent.on('showTool', (name, lastTool) =>
{
if (name !== this.name && lastTool.name === this.name) this._reset();
});
}
_loadTpl()
{
this._codeTpl = require('./code.hbs');
@@ -72,43 +82,27 @@ export default class Sources extends Tool
{
var data = this._data;
var code = '';
var code = data.val;
switch (data.type)
// If source code too big, don't process it.
if (data.val.length < 100000)
{
case 'html':
code = beautify.html(data.val);
break;
case 'css':
code = beautify.css(data.val);
break;
case 'js':
code = beautify(data.val);
break;
}
switch (data.type)
{
case 'html':
code = beautify.html(code);
break;
case 'css':
code = beautify.css(code);
break;
case 'js':
code = beautify(code);
break;
}
code = highlight(code, data.type);
code = highlight(code, data.type);
}
this._$el.html(this._codeTpl({code: code}));
}
}
function get(url, cb)
{
var xhr = new window.XMLHttpRequest();
xhr.onload = function ()
{
var status = xhr.status;
if ((status >= 200 && status < 300) || status === 304)
{
cb(null, xhr.responseText);
}
};
xhr.onerror = function () { cb(xhr) };
xhr.open('GET', url);
xhr.send();
}

View File

@@ -2,9 +2,11 @@
.dev-tools { .tools {
.sources {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.code {
padding: $common-padding;
overflow-x: scroll;
overflow-x: auto;
min-height: 100%;
}
}

View File

@@ -457,6 +457,33 @@ module.exports = (function ()
return exports;
})({});
/* ------------------------------ get ------------------------------ */
var get = _.get = (function (exports)
{
function exports(url, cb)
{
var xhr = new window.XMLHttpRequest();
xhr.onload = function ()
{
var status = xhr.status;
if ((status >= 200 && status < 300) || status === 304)
{
cb(null, xhr.responseText);
}
};
xhr.onerror = function () { cb(xhr) };
xhr.open('GET', url);
xhr.send();
}
return exports;
})({});
/* ------------------------------ identity ------------------------------ */
var identity = _.identity = (function (exports)