History file tree integration with the backend.

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

@@ -1,17 +1,46 @@
-aside.file-tree.file-tree-history(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }", ng-show="ui.view == 'history' && history.isV2").full-size
+aside.file-tree.file-tree-history.full-size(
+	ng-controller="HistoryV2FileTreeController"
+	ng-if="ui.view == 'history' && history.isV2"
+)
 	.toolbar.toolbar-filetree
 		span Modified files
 
 	.file-tree-inner
-		ul.list-unstyled.file-tree-list
-			li(
-				ng-repeat="(pathname, doc) in history.selection.docs"
-				ng-class="{ 'selected': history.selection.pathname == pathname }"
+		history-file-tree(
+			file-tree="currentFileTree"
+			selected-pathname="history.selection.pathname"
+			on-selected-file-change="handleFileSelection(file)"
 		)
-				.entity
-					.entity-name.entity-name-history(
-						ng-click="history.selection.pathname = pathname",
-						ng-class="{ 'deleted': !!doc.deletedAtV }"
+
+script(type="text/ng-template", id="historyFileTreeTpl")
+	.history-file-tree
+		history-file-entity(
+			ng-repeat="fileEntity in $ctrl.fileTree"
+			file-entity="fileEntity"
+		)
+
+script(type="text/ng-template", id="historyFileEntityTpl")
+	.history-file-entity-wrapper
+		a.history-file-entity-link(
+			href
+			ng-click="$ctrl.handleClick()"
+			ng-class="{ 'history-file-entity-link-selected': $ctrl.isSelected }"
+		)
+			span.history-file-entity-name
+				i.history-file-entity-icon.history-file-entity-icon-folder-state.fa.fa-fw(
+					ng-class="{\
+						'fa-chevron-down': ($ctrl.fileEntity.type === 'folder' && $ctrl.isOpen),\
+						'fa-chevron-right': ($ctrl.fileEntity.type === 'folder' && !$ctrl.isOpen)\
+					}"
+				)
+				i.history-file-entity-icon.fa(
+					ng-class="$ctrl.iconClass"
+				)
+				| {{ ::$ctrl.fileEntity.name }}
+		div(
+			ng-show="$ctrl.isOpen"
+		)
+			history-file-entity(
+				ng-repeat="childEntity in $ctrl.fileEntity.children"
+				file-entity="childEntity"
 			)
-						i.fa.fa-fw.fa-pencil
-						span  {{ pathname }}

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

@@ -12,7 +12,6 @@ aside.change-list(
 		on-entry-select="handleEntrySelect(selectedEntry)"
 	)
 
-
 script(type="text/ng-template", id="historyEntriesListTpl")
 	.history-entries(
 		infinite-scroll="$ctrl.loadEntries()"
@@ -87,17 +86,17 @@ script(type="text/ng-template", id="historyEntryTpl")
 					li.history-entry-metadata-user(ng-repeat="update_user in ::$ctrl.entry.meta.users")
 						span.name(
 							ng-if="::update_user && update_user.id != $ctrl.currentUser.id"
-							ng-style="::{'color': 'hsl({{ update_user.hue }}, 70%, 50%)'}"
+							ng-style="$ctrl.getUserCSSStyle(update_user);"
 						) {{ ::$ctrl.displayName(update_user) }} 
 						span.name(
 							ng-if="::update_user && update_user.id == $ctrl.currentUser.id"
-							ng-style="::{'color': 'hsl({{ update_user.hue }}, 70%, 50%)'}"
+							ng-style="$ctrl.getUserCSSStyle(update_user);"
 						) You
 						span.name(
 							ng-if="::update_user == null"
-							ng-style="::{'color': 'hsl(100, 70%, 50%)'}"
+							ng-style="$ctrl.getUserCSSStyle(update_user);"
 						) #{translate("anonymous")}
 					li.history-entry-metadata-user(ng-if="::$ctrl.entry.meta.users.length == 0")
 						span.name(
-							ng-style="::{'color': 'hsl(100, 70%, 50%)'}"
+							ng-style="$ctrl.getUserCSSStyle();"
 						) #{translate("anonymous")}

services/web/public/coffee/ide/file-tree/controllers/FileTreeEntityController.coffee

@@ -1,6 +1,7 @@
 define [
 	"base"
-], (App) ->
+	"ide/file-tree/util/iconTypeFromName"
+], (App, iconTypeFromName) ->
 	App.controller "FileTreeEntityController", ["$scope", "ide", "$modal", ($scope, ide, $modal) ->
 		$scope.select = (e) ->
 			if e.ctrlKey or e.metaKey
@@ -70,18 +71,7 @@ define [
 		$scope.$on "delete:selected", () ->
 			$scope.openDeleteModal() if $scope.entity.selected
 
-		$scope.iconTypeFromName = (name) ->
-			ext = name.split(".").pop()?.toLowerCase()
-			if ext in ["png", "pdf", "jpg", "jpeg", "gif"]
-				return "image"
-			else if ext in ["csv", "xls", "xlsx"]
-				return "table"
-			else if ext in ["py", "r"]
-				return "file-text"
-			else if ext in ['bib']
-				return 'book'
-			else
-				return "file"
+		$scope.iconTypeFromName = iconTypeFromName
 	]
 
 	App.controller "DeleteEntityModalController", [

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

@@ -3,9 +3,7 @@ define [
 	"ide/colors/ColorManager"
 	"ide/history/util/displayNameForUser"
 	"ide/history/controllers/HistoryListController"
-	"ide/history/controllers/HistoryV2ListController"
 	"ide/history/controllers/HistoryDiffController"
-	"ide/history/controllers/HistoryV2DiffController"
 	"ide/history/directives/infiniteScroll"
 ], (moment, ColorManager, displayNameForUser) ->
 	class HistoryManager

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

@@ -3,11 +3,14 @@ define [
 	"ide/colors/ColorManager"
 	"ide/history/util/displayNameForUser"
 	"ide/history/util/HistoryViewModes"
-	"ide/history/controllers/HistoryListController"
-	"ide/history/controllers/HistoryDiffController"
+	"ide/history/controllers/HistoryV2ListController"
+	"ide/history/controllers/HistoryV2DiffController"
+	"ide/history/controllers/HistoryV2FileTreeController"
 	"ide/history/directives/infiniteScroll"
 	"ide/history/components/historyEntriesList"
 	"ide/history/components/historyEntry"
+	"ide/history/components/historyFileTree"
+	"ide/history/components/historyFileEntity"
 ], (moment, ColorManager, displayNameForUser, HistoryViewModes) ->
 	class HistoryManager
 		constructor: (@ide, @$scope) ->
@@ -26,6 +29,9 @@ define [
 
 			# @$scope.$watch "history.selection.pathname", () =>
 			# 	@reloadDiff()
+			@$scope.$watch "history.selection.pathname", (pathname) =>
+				if pathname?
+					@loadFileAtPointInTime()
 
 		show: () ->
 			@$scope.ui.view = "history"
@@ -50,16 +56,28 @@ define [
 						toV: null
 					}
 				}
+				files: []
 				diff: null
 			}
 
 		restoreFile: (version, pathname) ->
 			url = "/project/#{@$scope.project_id}/restore_file"
+
 			@ide.$http.post(url, {
 				version, pathname,
 				_csrf: window.csrfToken
 			})
 
+		loadFileTreeForUpdate: (update) ->
+			{fromV, toV} = update
+			url = "/project/#{@$scope.project_id}/filetree/diff"
+			query = [ "from=#{toV}", "to=#{toV}" ]
+			url += "?" + query.join("&")
+			@ide.$http
+				.get(url)
+				.then (response) =>
+					@$scope.history.files = response.data.diff
+
 		MAX_RECENT_UPDATES_TO_SELECT: 5
 		autoSelectRecentUpdates: () ->
 			return if @$scope.history.updates.length == 0
@@ -76,8 +94,7 @@ define [
 
 		autoSelectLastUpdate: () ->
 			return if @$scope.history.updates.length == 0
-			@$scope.history.updates[0].selectedTo = true
-			@$scope.history.updates[0].selectedFrom = true
+			@selectUpdate @$scope.history.updates[0]
 
 		selectUpdate: (update) ->
 			selectedUpdateIndex = @$scope.history.updates.indexOf update
@@ -88,6 +105,7 @@ define [
 				update.selectedFrom = false
 			@$scope.history.updates[selectedUpdateIndex].selectedTo = true
 			@$scope.history.updates[selectedUpdateIndex].selectedFrom = true
+			@loadFileTreeForUpdate @$scope.history.updates[selectedUpdateIndex]
 
 		BATCH_SIZE: 10
 		fetchNextBatchOfUpdates: () ->
@@ -105,6 +123,18 @@ define [
 						@$scope.history.atEnd = true
 					@$scope.history.loading = false
 
+		loadFileAtPointInTime: () ->
+			pathname = @$scope.history.selection.pathname
+			toV =  @$scope.history.selection.updates[0].toV
+			url = "/project/#{@$scope.project_id}/diff"
+			query = ["pathname=#{encodeURIComponent(pathname)}", "from=#{toV}", "to=#{toV}"]
+			url += "?" + query.join("&")
+			@ide.$http
+				.get(url)
+				.then (response) =>
+					{ data } = response
+				.catch () ->
+
 		reloadDiff: () ->
 			diff = @$scope.history.diff
 			{updates} = @$scope.history.selection