Skip to content

Commit 8de31fc

Browse files
author
Andrew Start
committed
Added the code for viewing source files.
1 parent 877bffa commit 8de31fc

File tree

4 files changed

+115
-8
lines changed

4 files changed

+115
-8
lines changed

bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"underscore": "~1.7.0",
1313
"node-webkit-app": "*",
1414
"sortable": "farhadi/html5sortable",
15-
"default": "https://github.com/SpringRoll/SpringRollTemplate.git"
15+
"default": "https://github.com/SpringRoll/SpringRollTemplate.git",
16+
"sunlight": "https://github.com/CloudKidStudio/sunlight.git#master"
1617
}
1718
}

project.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@
2222
"components/bootstrap/less/bootstrap.less",
2323
"components/bootstrap-confirmation/bootstrap-confirmation.js",
2424
"components/underscore/underscore.js",
25-
"components/wavesurfer.js/build/wavesurfer.min.js"
25+
"components/wavesurfer.js/build/wavesurfer.min.js",
26+
"components/sunlight/build/dist/sunlight-min.js",
27+
"components/sunlight/build/dist/lang/sunlight.javascript-min.js",
28+
"components/sunlight/build/dist/themes/sunlight.default.css"
2629
],
2730
"librariesDebug": [
2831
"components/jquery/dist/jquery.js",
@@ -36,7 +39,10 @@
3639
"components/bootstrap/less/bootstrap.less",
3740
"components/bootstrap-confirmation/bootstrap-confirmation.js",
3841
"components/underscore/underscore.js",
39-
"components/wavesurfer.js/build/wavesurfer.min.js"
42+
"components/wavesurfer.js/build/wavesurfer.min.js",
43+
"components/sunlight/build/dist/sunlight-min.js",
44+
"components/sunlight/build/dist/lang/sunlight.javascript-min.js",
45+
"components/sunlight/build/dist/themes/sunlight.default.css"
4046
],
4147
"modules": {
4248
"shared": [

src/springroll/remote/RemoteTrace.js

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
{
154154
this._onMessage(JSON.stringify({
155155
time: 7,
156-
level: "GENERAL",
156+
level: "ERROR",
157157
message: ["I am a message with an %o object", {foo:"bar", blah:true}],
158158
stack: [
159159
{
@@ -168,8 +168,8 @@
168168
},
169169
{
170170
function: "this.testStack",
171-
file: "http://localhost:8080/assets/js/../../../src/springroll/remote/RemoteTrace.js",
172-
lineLocation: "154:10"
171+
file: "http://andrew.cloudkid.net/Tools/SpringRollStudio/src/springroll/remote/RemoteTrace.js",
172+
lineLocation: "152:18"
173173
}
174174
]
175175
}));
@@ -218,10 +218,11 @@
218218
};
219219
}
220220

221+
//block object toggles from affecting stack visibility toggles
221222
output.on("click", ".message", function(e)
222223
{
223224
var target = $(e.target);
224-
//block object toggles from affecting stack visibility toggles
225+
//only need to block object toggles, as they are part of the message
225226
if(target.hasClass("objectToggle") || target.parent().hasClass("objectToggle"))
226227
{
227228
//stop the event
@@ -232,6 +233,84 @@
232233
$(targetId).collapse("toggle");
233234
}
234235
});
236+
237+
//http://sunlightjs.com/docs.html
238+
239+
//get clicks on any link to a page in the stack view
240+
output.on("click", ".stackLink", function(e)
241+
{
242+
//TODO: Remove
243+
if(RELEASE)
244+
return;
245+
var target = $(e.target);
246+
var location = target.data("location");
247+
var colonIndex = location.indexOf(":");
248+
var line = parseInt(colonIndex > 0 ? location.substring(0, colonIndex) : location),
249+
column = colonIndex > 0 ? parseInt(location.substring(colonIndex + 1)) : 0;
250+
$.ajax({
251+
url : target.data("file"),
252+
dataType: "text",
253+
success : function (data) {
254+
//make a text box to display the JS file
255+
//TODO: Actual location for this
256+
//Note: Sunlight makes a <div> with a class of "sunlight-container" where
257+
//the pre created by this code is placed
258+
$("#frame").prepend($("<pre class='sunlight-highlight-javascript' contentEditable='true'></pre>").text(data));
259+
//format Javascript syntax
260+
Sunlight.highlightAll();
261+
var codeBlock = $(".sunlight-javascript");
262+
//select the line/column
263+
//figure out how many characters in that line/column is
264+
var text = codeBlock.text(),
265+
characterCount = 0,
266+
lastNewLine = 0;
267+
for(var lineIndex = 1; lineIndex < line; ++lineIndex)
268+
{
269+
//get the newline character at the end of line #lineIndex
270+
lastNewLine = text.indexOf("\n", lastNewLine + 1);
271+
characterCount = lastNewLine;
272+
}
273+
characterCount += column;
274+
275+
//figure out which node has the character we are looking for
276+
//the parsed document is filled with <span> elements for syntax
277+
//highlighting
278+
var childNodes = codeBlock[0].childNodes;
279+
for(var i = 0, length = childNodes.length; i < length; ++i)
280+
{
281+
var node = childNodes[i];
282+
//anything that's not a text node is a span with text inside
283+
if(node.nodeType != 3)
284+
node = node.childNodes[0];
285+
//get the amount of text inside the text node
286+
characterCount -= node.length;
287+
//if we've run out of our character count, that's the node that we want
288+
if(characterCount <= 0)
289+
{
290+
var scroller = $(".sunlight-code-container");
291+
//get the position of the text node relative to the scroller
292+
//the text has to be wrapped in a span first, as TextNodes don't
293+
//have offsetTop
294+
var nodePos = $(node).wrap("<span></span>").parent().offset().top -
295+
codeBlock.offset().top;
296+
//center the text in the scrolling window
297+
scroller.scrollTop(Math.max(nodePos - scroller.height() * 0.5, 0));
298+
//remove the text wrapping that we added
299+
$(node).unwrap();
300+
301+
//put the text caret in the correct location
302+
var range = document.createRange(),
303+
sel = window.getSelection();
304+
range.setStart(node, -characterCount + 1);
305+
range.collapse(true);
306+
sel.removeAllRanges();
307+
sel.addRange(range);
308+
break;
309+
}
310+
}
311+
}
312+
});
313+
});
235314
};
236315

237316
// Reference to the prototype
@@ -577,8 +656,12 @@
577656
stackLinkText = stackLinkText.substring(stackLinkText.lastIndexOf("/") + 1);
578657
stackLinkText += ":" + stack[i].lineLocation;
579658
var line = $("<div class='line'></div>");
659+
var stackLink = $("<span class='stackLink'></span>")
660+
.text(stackLinkText)
661+
.attr("data-file", stack[i].file)
662+
.attr("data-location", stack[i].lineLocation);
580663
line.text(stack[i].function)
581-
.append($("<span class='stackLink'></span>").text(stackLinkText));
664+
.append(stackLink);
582665
group.append(line);
583666
}
584667
log.append(group);

src/springroll/remote/less/trace.less

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,4 +145,21 @@
145145
.error {color: #D33682;}
146146
.stack .line:hover { background:#ddd; }
147147
}
148+
}
149+
150+
.sunlight-code-container {
151+
overflow-y: auto;
152+
height: 500px;
153+
border-width: 1px;
154+
border-style: solid;
155+
}
156+
157+
.sunlight-highlight-javascript {
158+
//no standard <pre> padding because that messes with the line numbers
159+
padding: 0px;
160+
}
161+
162+
.sunlight-container {
163+
//display fully on top of the other remote trace ui
164+
z-index: 4;
148165
}

0 commit comments

Comments
 (0)