Skip to content

Commit

Permalink
Merge pull request #6 from nikrolls/line-numbers
Browse files Browse the repository at this point in the history
Added line numbers
  • Loading branch information
nicole-ashley authored May 2, 2017

Verified

This commit was signed with the committer’s verified signature.
ruebot Nick Ruest
2 parents 4bb4fd5 + 42d6a9c commit c9797a7
Showing 46 changed files with 444 additions and 50 deletions.
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -6,10 +6,12 @@
"author": "Nik Rolls <nik@rolls.cc>",
"license": "MIT",
"dependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"css-loader": "^0.28.0",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
@@ -18,8 +20,10 @@
"gulp-uglify": "^2.1.2",
"gulp-zip": "^4.0.0",
"node-sass": "^4.5.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"text-loader": "^0.0.1",
"to-string-loader": "^1.1.5",
"vinyl-named": "^1.1.0",
"webpack": "^2.4.1",
"webpack-stream": "^3.2.0"
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('autoprefixer')(),
require('cssnano')()
]
};
1 change: 0 additions & 1 deletion src/js/content.js
Original file line number Diff line number Diff line change
@@ -118,7 +118,6 @@ function insertFormatOptionBar() {
function ready() {
// First, check if it's plain text and exit if not
const plainText = getTextFromTextOnlyDocument();
console.log(plainText);
if (!plainText || plainText.length > 3000000) {
port.disconnect();
return;
31 changes: 21 additions & 10 deletions src/js/lib/dom-builder.js
Original file line number Diff line number Diff line change
@@ -11,33 +11,39 @@ const TOKEN_TYPES = {
NULL: 'NULL',
};

let lineNumber;

export function jsonObjectToHTML(obj, jsonpFunctionName) {
// Format object (using recursive keyValueOrValue builder)
lineNumber = jsonpFunctionName === null ? 1 : 2;
const rootKeyValueOrValue = getKeyValueOrValueDom(obj, false);

// The whole DOM is now built.

// Set class on root node to identify it
rootKeyValueOrValue.classList.add('rootKeyValueOrValue');

const gutterWidth = 1 + (lineNumber.toString().length * 0.5) + 'rem';
const gutter = document.createElement('div');
gutter.id = 'gutter';
gutter.style.width = gutterWidth;

// Make div#formattedJson and append the root keyValueOrValue
const divFormattedJson = document.createElement('div');
divFormattedJson.id = 'formattedJson';
divFormattedJson.style.marginLeft = gutterWidth;
divFormattedJson.appendChild(rootKeyValueOrValue);

// Convert it to an HTML string (shame about this step, but necessary for passing it through to the content page)
let returnHTML = divFormattedJson.outerHTML;

// Top and tail with JSONP padding if necessary
if (jsonpFunctionName !== null) {
returnHTML =
`<div id="jsonpOpener">${jsonpFunctionName} (</div>
${returnHTML}
<div id="jsonpCloser">)</div>`;
divFormattedJson.innerHTML =
`<div id="jsonpOpener" line-number="1">${jsonpFunctionName}(</div>
${divFormattedJson.innerHTML}
<div id="jsonpCloser" line-number="${lineNumber}">)</div>`;
}

// Return the HTML
return returnHTML;
return gutter.outerHTML + divFormattedJson.outerHTML;
}

// Core recursive DOM-building function
@@ -62,6 +68,7 @@ function getKeyValueOrValueDom(value, keyName) {

// Root node for this keyValueOrValue
const keyValueOrValue = templates.keyValueOrValue();
keyValueOrValue.setAttribute('line-number', lineNumber++);

// Add an 'expander' first (if this is object/array with non-zero size)
if (type === TOKEN_TYPES.OBJECT || type === TOKEN_TYPES.ARRAY) {
@@ -147,7 +154,9 @@ function getKeyValueOrValueDom(value, keyName) {
}

// Add closing brace
keyValueOrValue.appendChild(templates.closingBrace());
const closingBrace = templates.closingBrace();
closingBrace.setAttribute('line-number', lineNumber++);
keyValueOrValue.appendChild(closingBrace);
break;

case TOKEN_TYPES.ARRAY:
@@ -174,7 +183,9 @@ function getKeyValueOrValueDom(value, keyName) {
keyValueOrValue.appendChild(blockInner);
}
// Add closing bracket
keyValueOrValue.appendChild(templates.closingBracket());
const closingBracket = templates.closingBracket();
closingBracket.setAttribute('line-number', lineNumber++);
keyValueOrValue.appendChild(closingBracket);
break;

case TOKEN_TYPES.BOOL:
8 changes: 4 additions & 4 deletions src/js/lib/themes.js
Original file line number Diff line number Diff line change
@@ -45,10 +45,10 @@ export const themes = {
type: 'Light',
styles: require('../../sass/themes/katzen-milch.scss')
},
kurior: {
name: 'Kurior',
kuroir: {
name: 'Kuroir',
type: 'Light',
styles: require('../../sass/themes/kurior.scss')
styles: require('../../sass/themes/kuroir.scss')
},
solarizedLight: {
name: 'Solarized Light',
@@ -161,7 +161,7 @@ export const themes = {
styles: require('../../sass/themes/tomorrow-night-blue.scss')
},
tomorrowNightBright: {
name: 'Tomorrow Night Blue',
name: 'Tomorrow Night Bright',
type: 'Dark',
styles: require('../../sass/themes/tomorrow-night-bright.scss')
},
40 changes: 26 additions & 14 deletions src/sass/content.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
user-select: text;
overflow-x: hidden;
overflow-y: scroll !important;
margin: 0;
position: relative;
@@ -91,18 +92,22 @@ body {

#jsonpOpener,
#jsonpCloser {
padding: 0.25rem 0 0 0.5rem;
color: black;
margin-bottom: -0.4rem;
margin-left: -1rem;
}

#jsonpCloser {
margin-top: 0;
#gutter {
position: absolute;
user-select: none;
left: 0;
height: 100%;
}

#formattedJson {
padding-left: 1.75rem;
position: relative;
padding-left: 1.45rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
word-wrap: break-word;
}

pre {
@@ -114,7 +119,15 @@ pre {
display: block;
padding-left: 1.25rem;
margin-left: -1.25rem;
position: relative;
}

:not(.collapsed) > [line-number] {
&:before {
content: attr(line-number);
position: absolute;
right: calc(100% + 0.6rem);
margin-top: 0.1rem;
}
}

.collapsed {
@@ -140,19 +153,18 @@ pre {
}

.expander {
display: block;
position: absolute;
width: 1.25rem;
height: 1.15rem;
left: 0.3rem;
float: left;
margin-left: -1.05rem;
margin-right: 0.25rem;
font-size: 24px;
z-index: 5;
opacity: 0.15;
cursor: pointer;

&:before {
display: block;
display: inline;
content: '';
user-select: none;
}

.collapsed > &:before {
@@ -182,7 +194,7 @@ pre {
/* SYNTAX HIGHLIGHTING */

#formattedJson, #jsonpOpener, #jsonpCloser, pre {
font: 13px/1.15rem monospace;
font: 13px/1.1rem monospace;
}

.string {
4 changes: 4 additions & 0 deletions src/sass/themes/_base.scss
Original file line number Diff line number Diff line change
@@ -14,4 +14,8 @@ body {}

.brace {}

#gutter {}

[line-number]:before {}

.collapsed:after {}
18 changes: 15 additions & 3 deletions src/sass/themes/ambiance.scss
Original file line number Diff line number Diff line change
@@ -8,25 +8,37 @@ body {
}

.key {
color: #9999cc;
color: #99c;
}

.number {
color: #78Cf8a;
color: #78cf8a;
}

.string {
color: #8f9d6a;
}

.bool, .null {
color: #cf7Ea9;
color: #cf7ea9;
}

.brace {
color: #24c2c7;
}

#gutter {
background-color: #3d3d3d;
background-image: linear-gradient(to right, #3d3d3d, #333);
background-repeat: repeat-x;
border-right: 1px solid #4d4d4d;
}

[line-number]:before {
text-shadow: 0 1px 1px #4d4d4d;
color: #222;
}

.collapsed:after {
font-style: italic;
color: #555;
12 changes: 11 additions & 1 deletion src/sass/themes/chaos.scss
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ body {
}

.key {
color: #997744;
color: #974;
}

.number {
@@ -29,6 +29,16 @@ body {
color: $foreground;
}

#gutter {
background: #141414;
border-right: 1px solid #282828;

}

[line-number]:before {
color: #595959;
}

.collapsed:after {
font-style: italic;
color: #555;
8 changes: 8 additions & 0 deletions src/sass/themes/chrome.scss
Original file line number Diff line number Diff line change
@@ -29,6 +29,14 @@ body {
color: $foreground;
}

#gutter {
background: #ebebeb;
}

[line-number]:before {
color: #333;
}

.collapsed:after {
color: #236e24;
}
8 changes: 8 additions & 0 deletions src/sass/themes/clouds-midnight.scss
Original file line number Diff line number Diff line change
@@ -29,6 +29,14 @@ body {
color: $foreground;
}

#gutter {
background: #232323;
}

[line-number]:before {
color: $foreground;
}

.collapsed:after {
color: #3c403b;
}
8 changes: 8 additions & 0 deletions src/sass/themes/clouds.scss
Original file line number Diff line number Diff line change
@@ -29,6 +29,14 @@ body {
color: $foreground;
}

#gutter {
background: #ebebeb;
}

[line-number]:before {
color: #333;
}

.collapsed:after {
color: #bcc8ba;
}
10 changes: 9 additions & 1 deletion src/sass/themes/cobalt.scss
Original file line number Diff line number Diff line change
@@ -25,7 +25,15 @@ body {
color: $foreground;
}

#gutter {
background: #011e3a;
}

[line-number]:before {
color: #8091a0;
}

.collapsed:after {
font-style: italic;
color: #0088ff;
color: #08f;
}
8 changes: 8 additions & 0 deletions src/sass/themes/crimson-editor.scss
Original file line number Diff line number Diff line change
@@ -29,6 +29,14 @@ body {
color: $foreground;
}

#gutter {
background: #ebebeb;
}

[line-number]:before {
color: #333;
}

.collapsed:after {
color: #4c886b;
}
8 changes: 8 additions & 0 deletions src/sass/themes/dawn.scss
Original file line number Diff line number Diff line change
@@ -25,6 +25,14 @@ body {
color: $foreground;
}

#gutter {
background: #ebebeb;
}

[line-number]:before {
color: #333;
}

.collapsed:after {
font-style: italic;
color: #5a525f
Loading

0 comments on commit c9797a7

Please sign in to comment.