Sort of out styling of log entries

services/web/app/views/project/editor/pdf.jade

@@ -1,21 +1,57 @@
 div.full-size(ng-controller="PdfController")
 	.toolbar.toolbar-tall
-		a.btn.btn-primary(
-			href
+		a.btn.btn-info(
+			href,
+			ng-disabled="pdf.compiling",
+			ng-click="recompile()"
 		)
-			i.fa.fa-refresh
-			|  Recompile
-		a(
+			i.fa.fa-refresh(
+				ng-class="{'fa-spin': pdf.compiling }"
+			)
+			|   
+			span(ng-show="!pdf.compiling") Recompile
+			span(ng-show="pdf.compiling") Compiling...
+		a.log-btn(
 			href
+			ng-click="toggleLogs()"
+			ng-class="{ 'active': pdf.view == 'logs' }"
 			tooltip="Logs"
 			tooltip-placement="bottom"
 		)
 			i.fa.fa-file-text-o
+			span.label.label-danger(ng-show="pdf.logEntries.errors.length > 0")
+				| {{ pdf.logEntries.errors.length }}
+			span.label.label-warning(ng-show="pdf.logEntries.warnings.length > 0")
+				| {{ pdf.logEntries.warnings.length }}
 
-	.pdf-viewer
-		div(
+	.pdf-viewer(ng-show="pdf.url && pdf.view == 'pdf'")
+		div(	
 			pdfjs
 			pdf-src="pdf.url"
 			key="project_id"
 			resize-on="layout:main:resize,layout:pdf:resize"
-		)
+		)
+
+	.logs(ng-show="pdf.view == 'logs'")
+		div(ng-repeat="entry in pdf.logEntries.all")
+			.alert(
+				ng-class="{\
+					'alert-danger':  entry.level == 'error',\
+					'alert-warning': entry.level == 'warning',\
+					'alert-info':    entry.level == 'typesetting'\
+				}"
+			)
+				span.line-no
+					span(ng-show="entry.file") {{ entry.file }}
+					span(ng-show="entry.line") , line {{ entry.line }}
+				p.entry-message(ng-show="entry.message") {{ entry.message }}
+				p.entry-content(ng-show="entry.content") {{ entry.content }}
+
+		p
+			.pull-right
+				a.btn.btn-default.btn-sm(href) Other logs & files
+				|  
+				a.btn.btn-default.btn-sm(href, tooltip="Clear cached files", tooltip-placement="top")
+					i.fa.fa-trash-o
+			a.btn.btn-info.btn-sm(href) View Raw Logs
+

services/web/public/coffee/app/ide/pdf/PdfManager.coffee

@@ -3,4 +3,6 @@ define [
 	"ide/pdf/directives/pdfJs"
 ], () ->
 	class PdfManager
-		constructor: (@ide, @$scope) ->
+		constructor: (@ide, @$scope) ->
+
+		# All the logic actually happens in the controller

services/web/public/coffee/app/ide/pdf/controllers/PdfController.coffee

@@ -1,7 +1,73 @@
 define [
 	"base"
-], (App) ->
-	App.controller "PdfController", ["$scope", ($scope) ->
+	"libs/latex-log-parser"
+], (App, LogParser) ->
+	App.controller "PdfController", ["$scope", "$http", ($scope, $http) ->
 		$scope.pdf =
-			url: "/ScalaByExample.pdf"
+			url: null # Pdf Url
+			view: null # 'pdf' 'logs'
+			error: false # Server error
+			timeout: false # Server timed out
+			failure: false # PDF failed to compile
+			compiling: false
+			logEntries: []
+
+		sendCompileRequest = (options = {}) ->
+			url = "/project/#{$scope.project_id}/compile"
+			if options.isAutoCompile
+				url += "?auto_compile=true"
+			return $http.post url, {
+				rootDoc_id: options.rootDocOverride_id or null
+				_csrf: window.csrfToken
+			}
+
+		parseCompileResponse = (response) ->
+			# Reset everything
+			$scope.pdf.error    = false
+			$scope.pdf.timedout = false
+			$scope.pdf.failure  = false
+			$scope.pdf.url      = null
+
+			if response.status == "timedout"
+				$scope.pdf.timedout = true
+			else if response.status == "autocompile-backoff"
+				# Nothing to do
+			else if response.status == "failure"
+				$scope.pdf.failure = true
+				fetchLogs()
+			else if response.status == "success"
+				$scope.pdf.url = "/project/#{$scope.project_id}/output/output.pdf?cache_bust=#{Date.now()}"
+				fetchLogs()
+
+		fetchLogs = () ->
+			$http.get "/project/#{$scope.project_id}/output/output.log"
+				.success (log) ->
+					logEntries = LogParser.parse(log, ignoreDuplicates: true)
+					$scope.pdf.logEntries = logEntries
+					$scope.pdf.logEntries.all = logEntries.errors.concat(logEntries.warnings).concat(logEntries.typesetting)
+					for entry in logEntries.all
+						entry.file = entry.file.replace(/^(.*)\/compiles\/[0-9a-f]{24}\/(\.\/)?/, "")
+						entry.file = entry.file.replace(/^\/compile\//, "")
+					console.log "LOG", logEntries
+
+		$scope.recompile = () ->
+			console.log "Recompiling"
+			return if $scope.pdf.compiling
+			$scope.pdf.compiling = true
+			sendCompileRequest()
+				.success (data) ->
+					$scope.pdf.compiling = false
+					parseCompileResponse(data)
+				.error () ->
+					$scope.pdf.compiling = false
+					$scope.pdf.error = true
+
+		$scope.toggleLogs = () ->
+			if $scope.pdf.view == "pdf"
+				$scope.pdf.view = "logs"
+			else
+				$scope.pdf.view = "pdf"
+
+		$scope.showPdf = () ->
+			$scope.pdf.view = "pdf"
 	]

services/web/public/stylesheets/app/editor/pdf.less

@@ -1,6 +1,9 @@
-.pdf-viewer {
+.pdf-viewer, .logs {
 	.full-size;
-	top: 48px;
+	top: 58px;
+}
+
+.pdf-viewer {
 	.pdfjs-viewer {
 		.full-size;
 		background-color: @gray-lighter;
@@ -54,4 +57,36 @@
 		}
 	}
 }
+
+.log-btn {
+	.label {
+		margin-left: .4em;
+		padding: .2em .4em .3em;
+		vertical-align: text-bottom;
+		line-height: inherit;
+	}
+}
+
+.logs {
+	padding: @line-height-computed / 2;
+	overflow: auto;
+	.alert {
+		font-size: 0.9rem;
+		margin-bottom: @line-height-computed / 2;
+		.line-no {
+			float: right;
+			color: @gray;
+			font-weight: 700;
+		}
+		.entry-message {
+			font-weight: 700;
+			//font-family: @font-family-monospace;
+		}
+		.entry-content {
+			white-space: pre-wrap;
+			font-size: 0.8rem;
+			//font-family: @font-family-monospace;
+		}
+	}
+}
 				

services/web/public/stylesheets/app/editor/toolbar.less

@@ -5,10 +5,18 @@
 	a:not(.btn) {
 		display: inline-block;
 		color: @gray-light;
-		padding: 6px 12px 8px;
+		padding: 5px 12px 6px;
+		margin: 0;
+		border-radius: @border-radius-small;
 		&:hover {
 			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 			color: @gray-dark;
+			text-decoration: none;
+		}
+		&.active, &:active {
+			color: white;
+			background-color: @link-color;
+			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
 		}
 	}
 
@@ -62,13 +70,11 @@
 	}
 
 	&.toolbar-tall {
-		height: 48px;
-		a.btn {
+		height: 58px;
+		padding-top: 10px;
+		a {
 			margin-left: (@line-height-computed / 2);
-		}
-		a:not(.btn) {
-			padding-top: 10px;
-			margin-left: 4px;
+			padding: 4px 10px 5px;
 		}
 	}
 }