Add: Sources code line number

This commit is contained in:
surunzi
2017-01-01 19:50:43 +08:00
parent a5066f20f7
commit 3d4a976422
8 changed files with 118 additions and 20 deletions

View File

@@ -100,6 +100,13 @@ LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.
View json, html, js, css and http request detail.
### Config
|Name |Type |Desc |
|-----------|-------|-----------------|
|showLineNum|boolean|Show Line Numbers|
|formatCode |boolean|Beautify Code |
## Info
Display special information, could be used for displaying user info to track

View File

@@ -275,7 +275,7 @@ export default class Resources extends Tool
}
_initConfig()
{
var cfg = this.config = config.create('eruda-resources');
let cfg = this.config = config.create('eruda-resources');
cfg.set(util.defaults(cfg.get(), {
hideErudaSetting: true

View File

@@ -3,6 +3,7 @@ import util from '../lib/util'
import beautify from 'js-beautify'
import highlight from '../lib/highlight.es6'
import JsonViewer from '../lib/JsonViewer.es6'
import config from '../lib/config.es6'
export default class Sources extends Tool
{
@@ -13,6 +14,8 @@ export default class Sources extends Tool
util.evalCss(require('./Sources.scss'));
this.name = 'sources';
this._showLineNum = true;
this._formatCode = true;
this._loadTpl();
}
@@ -22,6 +25,7 @@ export default class Sources extends Tool
this._parent = parent;
this._bindEvent();
this._initConfig();
}
set(type, val)
{
@@ -29,9 +33,9 @@ export default class Sources extends Tool
{
this._isFetchingData = true;
var img = new Image();
let img = new Image();
var self = this;
let self = this;
img.onload = function ()
{
@@ -110,7 +114,7 @@ export default class Sources extends Tool
this._$el.on('click', '.eruda-http .eruda-response', () =>
{
var data = this._data.val,
let data = this._data.val,
resTxt = data.resTxt;
switch (data.subType)
@@ -135,11 +139,38 @@ export default class Sources extends Tool
this._rawTpl = require('./raw.hbs');
this._iframeTpl = require('./iframe.hbs');
}
_initConfig()
{
let cfg = this.config = config.create('eruda-sources');
cfg.set(util.defaults(cfg.get(), {
'showLineNum': true,
'formatCode': true
}));
if (!cfg.get('showLineNum')) this._showLineNum = false;
if (!cfg.get('formatCode')) this._formatCode = false;
cfg.on('change', (key, val) =>
{
switch (key)
{
case 'showLineNum': this._showLineNum = val; return;
case 'formatCode': this._formatCode = val; return;
}
});
var settings = this._parent.get('settings');
settings.text('Sources')
.switch(cfg, 'showLineNum', 'Show Line Numbers')
.switch(cfg, 'formatCode', 'Beautify Code')
.separator();
}
_render()
{
this._isInit = true;
var data = this._data;
let data = this._data;
switch (data.type)
{
@@ -165,7 +196,7 @@ export default class Sources extends Tool
}
_renderHttp()
{
var val = this._data.val;
let val = this._data.val;
if (val.resTxt.trim() === '') delete val.resTxt;
if (util.isEmpty(val.resHeaders)) delete val.resHeaders;
@@ -174,12 +205,12 @@ export default class Sources extends Tool
}
_renderCode()
{
var data = this._data;
let data = this._data;
var code = data.val;
let code = data.val;
// If source code too big, don't process it.
if (data.val.length < 100000)
if (data.val.length < 100000 && this._formatCode)
{
switch (data.type)
{
@@ -200,16 +231,30 @@ export default class Sources extends Tool
code = util.escape(code);
}
this._renderHtml(this._codeTpl({code: code}));
if (this._showLineNum)
{
code = code.split('\n').map(line =>
{
if (util.trim(line) === '') return '&nbsp;';
return line;
});
}
this._renderHtml(this._codeTpl({
code,
showLineNum: this._showLineNum
}));
}
_renderJson()
{
// Using cache will keep binding json events to the same elements.
this._renderHtml(this._jsonTpl(), false);
var val = this._data.val;
let val = this._data.val;
try {
try
{
if (util.isStr(val)) val = JSON.parse(val);
/* eslint-disable no-empty */
} catch (e) {}

View File

@@ -4,16 +4,37 @@
.dev-tools { .tools {
.sources {
@include overflow-auto(y);
.code, .raw {
.code-wrapper, .raw-wrapper {
@include overflow-auto(x);
width: 100%;
background: #fff;
padding: $padding;
min-height: 100%;
}
.raw {
padding: $padding;
}
.code {
font-family: $font-family-code;
font-size: $font-size-s;
}
pre.code {
padding: $padding;
}
table.code {
border-collapse: collapse;
.gutter {
background: $gray-light;
color: $gray;
}
.line-num {
border-right: 1px solid $gray;
padding: 0 3px 0 5px;
text-align: right;
}
.code-line {
padding: 0 4px;
}
}
.image {
.breadcrumb {
@include breadcrumb();

View File

@@ -1 +1,24 @@
{{#if showLineNum}}
<div class="eruda-code-wrapper">
<table class="eruda-code">
<tbody>
<tr>
<td class="eruda-gutter">
{{#each code}}
<div class="eruda-line-num">{{@key}}</div>
{{/each}}
</td>
<td class="eruda-content">
{{#each code}}
<pre class="eruda-code-line">{{{.}}}</pre>
{{/each}}
</td>
</tr>
</tbody>
</table>
</div>
{{else}}
<div class="eruda-code-wrapper">
<pre class="eruda-code">{{{code}}}</pre>
</div>
{{/if}}

View File

@@ -1 +1,3 @@
<div class="eruda-raw-wrapper">
<div class="eruda-raw">{{val}}</div>
</div>

View File

@@ -24,7 +24,6 @@ export default function getAbstract(obj, {
doStringify = level === 0;
let keyWrapper = '<span style="color: #a71d5d;">',
fnWrapper = '<span style="color: #a71d5d;">',
numWrapper = '<span style="color: #0086b3;">',
nullWrapper = '<span style="color: #0086b3;">',
strWrapper = '<span style="color: #183691;">',

View File

@@ -19,6 +19,7 @@
pointer-events: all;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
}
ul {
list-style: none;