Added a trace connection help popup.

It gives you the "-javaagent..." command that you have to add to the
traced app's command line in order to trace. The path is slightly
auto-generated, assuming the user is running CodePulse from the
packaged+embedded version, and that they haven't moved the agent jar
around.

Author: dylemma

codepulse/src/main/resources/toserve/pages/traces/trace-recording-controls.css

@@ -212,6 +212,35 @@
  	background-color: #DEDEDE;
  }
 
+ #connection-help-link {
+ 	display: block;
+ 	font-size: small;
+ }
+
+ #connection-help-popup {
+ 	position: fixed;
+ 	top: 59px;
+ 	right: 240px;
+ 	width: 450px;
+
+ 	background-color: lightgray;
+ 	border: 1px solid;
+ 	padding: 1em 1em .5em;
+ }
+
+ #connection-help-popup code {
+ 	display: block;
+ 	padding: .5em;
+ 	overflow-x: scroll;
+ }
+
+ #connection-help-popup .dismissal {
+ 	display: block;
+ 	margin-top: 5px;
+ 	text-align: right;
+ 	font-size: small;
+ 	cursor: pointer;
+ }
 
 /****************************\
 | Recording "Coverage" Badge |

codepulse/src/main/resources/toserve/pages/traces/trace-recording-controls.js

@@ -523,6 +523,15 @@
 			TraceAPI.requestEnd() 
 		})
 
+		// Set up the connection help link
+		var connectionHelpPopup = $('#connection-help-popup')
+		$('#connection-help-link').click(function(){
+			connectionHelpPopup.show()
+		})
+		connectionHelpPopup.find('.dismissal').click(function(){
+			connectionHelpPopup.hide()
+		})
+
 	})	
 
 }(this));

codepulse/src/main/scala/com/secdec/codepulse/tracer/snippet/TraceWidgetry.scala

@@ -28,6 +28,7 @@ import java.text.SimpleDateFormat
 import java.util.Date
 import com.secdec.codepulse.tracer
 import com.secdec.codepulse.tracer.TraceManager
+import java.io.File
 
 class TraceWidgetry(manager: TraceManager, target: TracingTarget) extends DispatchSnippet {
 
@@ -77,6 +78,20 @@ class TraceWidgetry(manager: TraceManager, target: TracingTarget) extends Dispat
 			"exportlink" -> { (xml: NodeSeq) =>
 				val href = tracer.traceAPIServer.Paths.Export.toHref(target)
 				<a data-downloader={ href } data-filename={ s"${data.metadata.name}.pulse" }>{ runBinding(xml) }</a>
+			},
+			"agentcommand" -> { (xml: NodeSeq) =>
+				// embedded versions will be running in "some/install/dir/backend", and
+				// the agent jar will be located at "some/install/dir/agent.jar"
+				val agentPath = new File("../agent.jar").getCanonicalPath
+
+				val hqAddress = "localhost"
+				val hqPort = com.secdec.codepulse.userSettings.tracePort
+
+				val cmd = s"-javaagent:$agentPath=$hqAddress:$hqPort"
+
+				// if `cmd` has spaces, wrap it in "quotes"
+				val cmdWrapped = if (cmd.contains(" ")) '"' + cmd + '"' else cmd
+				Text(cmdWrapped)
 			})
 
 		cometTemplate +: runBinding(template)

codepulse/src/main/webapp/templates-hidden/trace-recording-controls.html

@@ -59,12 +59,29 @@
 		</div>
 		<div class="control-button" data-role="connection-waiting">
 			Waiting for a trace connection...
+
+			<a id="connection-help-link">
+				<i class="fa fa-question-circle"></i>
+				How do I make a trace connection?
+			</a>
 		</div>
 		<div class="control-button big" data-role="end-trace">
 			End Trace
 		</div>
 	</div>
 
+	<div id="connection-help-popup" style="display: none;">
+		<p>
+			To make a new trace connection, run your Java-based program with the following addition
+			to the Java command line:
+		</p>
+		<code class="lift:TraceWidgetry">
+			<trace:agentcommand></trace:agentcommand>
+			<!-- -javaagent:bytefrog-tracer.jar=localhost:8765 -->
+		</code>
+		<a class="dismissal">dismiss</a>
+	</div>
+
 	<h1>Treemap Legend</h1>
 	<div class="recordingsLegend">
 		<div class="legend-entry clearfix">