Add history toolbar (just scaffolding); show files at point in time.

services/web/app/views/project/editor.pug

@@ -57,9 +57,12 @@ block content
 				include ./editor/share
 				!= moduleIncludes("publish:body", locals)
 
+				include ./editor/history/toolbarV2.pug
+
 				main#ide-body(
 					ng-cloak,
 					role="main",
+					ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }",
 					layout="main",
 					ng-hide="state.loading",
 					resize-on="layout:chat:resize",

services/web/app/views/project/editor/history-file-tree.pug

@@ -1,11 +1,8 @@
-aside.file-tree.file-tree-history.full-size(
+aside.file-tree.full-size(
 	ng-controller="HistoryV2FileTreeController"
 	ng-if="ui.view == 'history' && history.isV2"
 )
-	.toolbar.toolbar-filetree
-		span Modified files
-
-	.file-tree-inner
+	.history-file-tree-inner
 		history-file-tree(
 			file-tree="currentFileTree"
 			selected-pathname="history.selection.pathname"

services/web/app/views/project/editor/history.pug

@@ -44,7 +44,7 @@ div#history(ng-show="ui.view == 'history'")
 	include ./history/entriesListV2
 
 	include ./history/diffPanelV1
-	include ./history/diffPanelV2
+	include ./history/previewPanelV2
 
 script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
 	.modal-header

services/web/app/views/project/editor/history/diffPanelV2.pug → services/web/app/views/project/editor/history/previewPanelV2.pug

@@ -1,4 +1,7 @@
-.diff-panel.full-size(ng-if="history.isV2", ng-controller="HistoryV2DiffController")
+.diff-panel.full-size(
+	ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE"
+	ng-controller="HistoryV2DiffController"
+)
 	.diff(
 		ng-if="!!history.diff && !history.diff.loading && !history.diff.error",
 		ng-class="{ 'diff-binary': history.diff.binary }"
@@ -47,4 +50,19 @@
 		i.fa.fa-spin.fa-refresh
 		|   #{translate("loading")}...
 	.error-panel(ng-show="history.diff.error")
-		.alert.alert-danger #{translate("generic_something_went_wrong")}
+		.alert.alert-danger #{translate("generic_something_went_wrong")}
+
+.point-in-time-panel.full-size(
+	ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
+)
+	.point-in-time-editor-container(
+		ng-if="!!history.selectedFile"
+	)
+		.hide-ace-cursor(
+			ace-editor="history-pointintime",
+			theme="settings.theme",
+			font-size="settings.fontSize",
+			text="history.selectedFile.text",
+			read-only="true",
+			resize-on="layout:main:resize",
+		)

services/web/app/views/project/editor/history/toolbarV2.pug

@@ -0,0 +1,4 @@
+.history-toolbar(
+	ng-if="ui.view == 'history' && history.isV2"
+) Browsing project as of 
+	time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}

services/web/public/coffee/ide/history/HistoryV2Manager.coffee

@@ -15,7 +15,8 @@ define [
 	class HistoryManager
 		constructor: (@ide, @$scope) ->
 			@reset()
-			
+			@$scope.HistoryViewModes = HistoryViewModes
+
 			@$scope.toggleHistory = () =>
 				if @$scope.ui.view == "history"
 					@hide()
@@ -57,7 +58,8 @@ define [
 					}
 				}
 				files: []
-				diff: null
+				diff: null # When history.viewMode == HistoryViewModes.COMPARE
+				selectedFile: null # When history.viewMode == HistoryViewModes.POINT_IN_TIME
 			}
 
 		restoreFile: (version, pathname) ->
@@ -132,7 +134,8 @@ define [
 			@ide.$http
 				.get(url)
 				.then (response) =>
-					{ data } = response
+					@$scope.history.selectedFile =
+						text : response.data.diff[0].u
 				.catch () ->
 
 		reloadDiff: () ->

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

@@ -73,9 +73,13 @@
 
 #ide-body {
 	.full-size;
-	top: 40px;
+	top: @ide-body-top-offset;
+	&.ide-history-open {
+		top: @ide-body-top-offset + @editor-toolbar-height;
+	}
 }
 
+
 #editor, #editor-rich-text {
 	.full-size;
 }

services/web/public/stylesheets/app/editor/history-v2.less

@@ -1,3 +1,17 @@
+.history-toolbar {
+	position: absolute;
+	width: 100%;
+	top: @ide-body-top-offset;
+	height: @editor-toolbar-height;
+	line-height: @editor-toolbar-height;
+	background-color: @editor-toolbar-bg;
+	z-index: 1;
+	color: #FFF;
+	padding-left: (@line-height-computed / 2);
+}
+	.history-toolbar-time {
+		font-weight: bold;
+	}
 .history-entries {
 	font-size: @history-base-font-size;
 	color: @history-base-color;
@@ -64,7 +78,10 @@
 				}
 			}
 
-.history-file-tree {
+.history-file-tree-inner {
+	.full-size;
+	overflow-y: auto;
+	background-color: @file-tree-bg;
 }
 	.history-file-entity-wrapper {
 		color: #FFF;

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

@@ -40,7 +40,8 @@
 			}
 	}
 
-	.diff-panel {
+	.diff-panel,
+	.point-in-time-panel {
 		.full-size;
 		margin-right: @changesListWidth;
 	}
@@ -59,11 +60,7 @@
 			.full-size;
 			top: 40px;
 		}
-		.hide-ace-cursor {
-			.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
-				display: none;
-			}
-		}
+
 		.diff-deleted {
 			padding: @line-height-computed;
 		}
@@ -305,6 +302,12 @@
 	padding-top: 15px;
 }
 
+.hide-ace-cursor {
+	.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
+		display: none;
+	}
+}
+
 .editor-dark {
 	#history {
 		aside.change-list {

services/web/public/stylesheets/core/_common-variables.less

@@ -888,6 +888,7 @@
 @footer-padding                : 2em;
 
 // Editor header
+@ide-body-top-offset             : 40px;
 @toolbar-header-bg-color         : transparent;
 @toolbar-header-shadow           : 0 0 2px #ccc;
 @toolbar-btn-color               : @link-color;