From 3d4a976422f4fc5ed29ec0233a86ddaa03064e19 Mon Sep 17 00:00:00 2001 From: surunzi Date: Sun, 1 Jan 2017 19:50:43 +0800 Subject: [PATCH] Add: Sources code line number --- doc/TOOL_API.md | 7 ++++ src/Resources/Resources.es6 | 4 +-- src/Sources/Sources.es6 | 69 ++++++++++++++++++++++++++++++------- src/Sources/Sources.scss | 27 +++++++++++++-- src/Sources/code.hbs | 25 +++++++++++++- src/Sources/raw.hbs | 4 ++- src/lib/getAbstract.es6 | 1 - src/style/style.scss | 1 + 8 files changed, 118 insertions(+), 20 deletions(-) diff --git a/doc/TOOL_API.md b/doc/TOOL_API.md index c1d09bb..13ae656 100644 --- a/doc/TOOL_API.md +++ b/doc/TOOL_API.md @@ -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 diff --git a/src/Resources/Resources.es6 b/src/Resources/Resources.es6 index d4147cc..c0c0a3f 100644 --- a/src/Resources/Resources.es6 +++ b/src/Resources/Resources.es6 @@ -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 @@ -395,4 +395,4 @@ function delCookie(key) } } -var sliceStr = (str, len) => str.length < len ? str : str.slice(0, len) + '...'; \ No newline at end of file +var sliceStr = (str, len) => str.length < len ? str : str.slice(0, len) + '...'; diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 89f00b0..557e846 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -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 ' '; + + 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) {} @@ -232,4 +277,4 @@ export default class Sources extends Tool // Need setTimeout to make it work setTimeout(() => this._$el.get(0).scrollTop = 0, 0); } -} \ No newline at end of file +} diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index de7528f..55d5668 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -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(); @@ -72,4 +93,4 @@ height: 100%; } } -} } \ No newline at end of file +} } diff --git a/src/Sources/code.hbs b/src/Sources/code.hbs index c07fca8..3127aa9 100644 --- a/src/Sources/code.hbs +++ b/src/Sources/code.hbs @@ -1 +1,24 @@ -
{{{code}}}
\ No newline at end of file +{{#if showLineNum}} +
+ + + + + + + +
+ {{#each code}} +
{{@key}}
+ {{/each}} + 		+ {{#each code}} + 
{{{.}}}
+ {{/each}} +
+
+{{else}} +
+ 
{{{code}}}
+
+{{/if}} diff --git a/src/Sources/raw.hbs b/src/Sources/raw.hbs index 9714d45..d4dd605 100644 --- a/src/Sources/raw.hbs +++ b/src/Sources/raw.hbs @@ -1 +1,3 @@ -
{{val}}
\ No newline at end of file +
+
{{val}}
+
diff --git a/src/lib/getAbstract.es6 b/src/lib/getAbstract.es6 index 131b6fc..4e0af28 100644 --- a/src/lib/getAbstract.es6 +++ b/src/lib/getAbstract.es6 @@ -24,7 +24,6 @@ export default function getAbstract(obj, { doStringify = level === 0; let keyWrapper = '', - fnWrapper = '', numWrapper = '', nullWrapper = '', strWrapper = '', diff --git a/src/style/style.scss b/src/style/style.scss index 98e9a46..e55af76 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -19,6 +19,7 @@ pointer-events: all; user-select: none; -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: none; } ul { list-style: none;