Updated web UI.

Clockwork/Web/public/assets/javascripts/app.js

@@ -1,3 +1,14 @@
-let Clockwork = angular.module('Clockwork', [])
+let Clockwork = angular.module('Clockwork', [ 'chart.js', 'ngclipboard' ])
+	.config([ '$compileProvider', ($compileProvider) => {
+		$compileProvider.debugInfoEnabled(false)
+		$compileProvider.commentDirectivesEnabled(false)
+	} ])
+	.factory('filter', [ '$timeout', ($timeout) => {
+		return {
+			create (tags, mapValue) { return new Filter(tags, mapValue, $timeout) }
+		}
+	} ])
+	.factory('profiler', [ 'requests', requests => new Profiler(requests) ])
 	.factory('requests', () => new Requests)
 	.factory('updateNotification', () => new UpdateNotification)
+	.filter('profilerMetric', [ 'profiler', profiler => profiler.metricFilter() ])

Clockwork/Web/public/assets/javascripts/authentication.js

@@ -0,0 +1,42 @@
+class Authentication
+{
+	constructor ($scope, $q, requests) {
+		this.$scope = $scope
+		this.$q = $q
+		this.requests = requests
+	}
+
+	attempt () {
+		let data = { username: this.username, password: this.password }
+
+		this.username = this.password = ''
+		this.failed = false
+
+		return this.requests.client('POST', `${this.requests.remoteUrl}auth`, data).then(data => {
+			this.shown = false
+
+			this.requests.setAuthenticationToken(data.token)
+
+			this.requests.items.forEach(request => {
+				if (request.error && request.error.error == 'requires-authentication') {
+					return this.requests.loadId(request.id)
+				}
+			})
+
+			this.accept()
+		}).catch(e => {
+			this.failed = true
+		})
+	}
+
+	request (message, requires) {
+		this.shown = true
+		this.requires = requires
+		this.message = message
+
+		return this.$q((accept, reject) => {
+			this.accept = accept
+			this.reject = reject
+		})
+	}
+}

Clockwork/Web/public/assets/javascripts/chrome/background.js

@@ -5,23 +5,27 @@ api.runtime.onMessage.addListener((message, sender, callback) => {
 	if (message.action == 'getJSON') {
 		let xhr = new XMLHttpRequest()
 
-		xhr.open('GET', message.url, true)
+		xhr.open(message.method || 'GET', message.url, true)
 
 		xhr.onreadystatechange = function() {
 			if (xhr.readyState != 4) return
 
-			let data
-
-			if (xhr.status != 200) {
+			if (xhr.status != 200 && xhr.status != 403) {
 				return callback({ error: 'Server returned an error response.' })
 			}
 
+			let data
+
 			try {
 				data = JSON.parse(xhr.responseText)
 			} catch (e) {
 				return callback({ error: 'Server returned an invalid JSON.' })
 			}
 
+			if (xhr.status == 403) {
+				return callback({ error: 'requires-authentication', message: data.message, requires: data.requires })
+			}
+
 			if (! Object.keys(data).length) {
 				return callback({ error: 'Server returned an empty metadata.' })
 			}
@@ -33,7 +37,12 @@ api.runtime.onMessage.addListener((message, sender, callback) => {
 			xhr.setRequestHeader(headerName, message.headers[headerName])
 		})
 
-		xhr.send()
+		let formData = new FormData
+		Object.keys(message.data).forEach(key => formData.append(key, message.data[key]))
+
+		xhr.send(formData)
+	} else if (message.action == 'getTabUrl') {
+		api.tabs.get(message.tabId, tab => callback(tab.url))
 	} else if (message.action == 'getLastClockworkRequestInTab') {
 		callback(lastClockworkRequestPerTab[message.tabId])
 	}

Clockwork/Web/public/assets/javascripts/directives/load-more-requests.js

@@ -1,5 +1,5 @@
 Clockwork.directive('loadMoreRequests', function ($parse) {
 	return function (scope, element, attrs) {
-		$(element).scrollTop($('.load-more').height() + 1)
+		element[0].scrollTop = document.querySelector('.load-more').offsetHeight + 1
 	}
 })

Clockwork/Web/public/assets/javascripts/directives/pretty-print.js

@@ -6,33 +6,27 @@ Clockwork.directive('prettyPrint', function ($parse) {
 		scope: { data: '=data' },
 		link: function (scope, element, attrs) {
 			let data = scope.data
-			let jason
+			let rendered = document.createElement('div')
 
 			if (data === true) {
-				data = '<i>true</i>'
+				rendered.innerHTML = '<i>true</i>'
 			} else if (data === false) {
-				data = '<i>false</i>'
+				rendered.innerHTML = '<i>false</i>'
 			} else if (data === undefined) {
-				data = '<i>undefined</i>'
+				rendered.innerHTML = '<i>undefined</i>'
 			} else if (data === null) {
-				data = '<i>null</i>'
-			} else if (typeof data !== 'number') {
+				rendered.innerHTML = '<i>null</i>'
+			} else if (typeof data === 'number') {
+				rendered.innerText = data
+			} else {
 				try {
-					jason = new PrettyJason(data)
+					rendered.append((new PrettyJason(data)).generateHtml())
 				} catch (e) {
-					data = $('<div>').text(data).html()
+					rendered.innerText = data
 				}
 			}
 
-			var $el = $('<div></div>');
-
-			if (jason) {
-				$el.append(jason.generateHtml())
-			} else {
-				$el.html(data)
-			}
-
-			element.replaceWith($el)
+			element.replaceWith(rendered)
 		}
 	}
 })

Clockwork/Web/public/assets/javascripts/directives/scroll-to-new.js

@@ -1,10 +1,10 @@
 Clockwork.directive('scrollToNew', function ($parse) {
 	return function(scope, element, attrs) {
 		if (scope.showIncomingRequests && scope.$last) {
-			var $container = $(element).parents('.requests-container').first()
-			var $parent = $(element).parent()
+			let container = document.querySelector('.requests-container')
+			let parent = element[0].parentNode
 
-			$container.scrollTop($parent.height())
+			container.scrollTop = parent.offsetHeight
 		}
 	}
 })

Clockwork/Web/public/assets/javascripts/directives/shortened-text.js

@@ -1,8 +1,8 @@
 Clockwork.directive('shortenedText', function () {
 	return {
 		link: function (scope, element, attrs) {
-			$(element).on('click', function () {
-				$(this).html($(this).attr('shortened-text'))
+			element[0].addEventListener('click', ev => {
+				element[0].innerHTML = element[0].getAttribute('shortened-text')
 			})
 		}
 	}

Clockwork/Web/public/assets/javascripts/directives/stack-trace.js

@@ -0,0 +1,21 @@
+Clockwork.directive('stackTrace', function ($parse) {
+	return {
+		restrict: 'E',
+		transclude: false,
+		scope: { trace: '=trace', shortPath: '=shortPath', fullPath: '=fullPath' },
+		templateUrl: 'assets/partials/stack-trace.html',
+		controller: function ($scope, $element) {
+			$scope.showPopover = false
+
+			$scope.togglePopover = function () {
+				$scope.showPopover = ! $scope.showPopover
+
+				let popoverContainerEl = $element[0].querySelector('.popover-container')
+				let popoverEl = $element[0].querySelector('.popover')
+				if (window.innerWidth - popoverContainerEl.getBoundingClientRect().left < 300) {
+					popoverEl.classList.add('right-aligned')
+				}
+			}
+		}
+	}
+})

Clockwork/Web/public/assets/javascripts/directives/tabs.js

@@ -1,18 +1,33 @@
 Clockwork.directive('tabs', function ($parse) {
 	return {
 		link: function (scope, element, attrs) {
-			$(element).find('[tab-name]').on('click', function () {
-				let tabs = $(this).parents('[tabs]')
-				let tabName = $(this).attr('tab-name')
+			let tabs = element[0]
+			let namespace = tabs.getAttribute('tabs')
+			let namespacePrefix = namespace ? `${namespace}.` : ''
 
-				tabs.find('[tab-name]').removeClass('active')
-				$(this).addClass('active')
+			let attributeStartsWith = (attribute, prefix) => {
+				return (element) => element.getAttribute(attribute).startsWith(prefix)
+			}
 
-				tabs.find('[tab-content]').hide()
-				tabs.find('[tab-content="' + tabName + '"]').show()
-			})
+			let showTab = (tabEl) => {
+				let tabName = tabEl.getAttribute('tab-name')
 
-			$(element).find('[tab-name].active').click()
+				if (! tabEl.getAttribute('tab-name')) return
+
+				if (namespace && ! tabName.startsWith(namespacePrefix)) return
+
+				tabs.querySelectorAll(`[tab-name^="${namespacePrefix}"]`)
+					.forEach(el => el.classList.remove('active'))
+				tabEl.classList.add('active')
+
+				tabs.querySelectorAll(`[tab-content^="${namespacePrefix}"]`)
+					.forEach(el => el.style.display = 'none')
+				tabs.querySelector(`[tab-content="${tabName}"]`).style.display = 'block'
+			}
+
+			tabs.addEventListener('click', ev => showTab(ev.target))
+
+			showTab(tabs.querySelector(`[tab-name^="${namespacePrefix}"].active`))
 		}
 	}
 })