Make a few UI improvements to syncing

services/web/public/coffee/pdf/SyncButtonsView.coffee

@@ -6,40 +6,58 @@ define [
 		template: $("#syncButtonsTemplate").html()
 
 		events:
-			"click .sync-code-to-pdf": () -> @trigger "click:sync-code-to-pdf"
-			"click .sync-pdf-to-code": () -> @trigger "click:sync-pdf-to-code"
+			"click .sync-code-to-pdf": () ->
+				ga('send', 'event', 'editor-interaction', 'sync-code-to-pdf')
+				@trigger "click:sync-code-to-pdf"
+			"click .sync-pdf-to-code": () ->
+				ga('send', 'event', 'editor-interaction', 'sync-pdf-to-code')
+				@trigger "click:sync-pdf-to-code"
 
 		initialize: (options) ->
 			@render()
 			@ide = options.ide
 			@ide.editor.on "resize", => @repositionLeft()
-			@ide.editor.on "cursor:change", => @repositionTop()
 
 		render: () ->
 			@setElement($(@template))
+
+			### These keep screwing up in the UI :(
+			@$(".sync-code-to-pdf").tooltip({
+				title: "Go to code location in the output"
+				animate: false
+				placement: "top"
+				trigger: "hover"
+				delay:
+					show: 800
+					hide: 0
+			})
+			@$(".sync-pdf-to-code").tooltip({
+				html: true
+				title: "Go to output location in the code<br/>(Or double click the output)"
+				animate: false
+				placement: "bottom"
+				trigger: "hover"
+				delay:
+					show: 800
+					hide: 0
+			})
+			###
 			return @
 
 		hide: () -> @$el.hide()
 
-		show: () -> @$el.show()
+		show: () ->
+			state = @ide.editor.$splitter.layout().readState()
+			if !state.east?.initClosed
+				@$el.show()
 
 		repositionLeft: () ->
 			state = @ide.editor.$splitter.layout().readState()
 			if state.east?
 				@$el.css({right: state.east.size - 8})
+				if state.east.initClosed
+					@hide()
+				else
+					@show()
 
-		repositionTop: () ->
-			# The cursor hasn't actually moved yet.
-			setTimeout () =>
-				cursor = @ide.editor.getCursorElement()
-				container = @ide.editor.getContainerElement()
-				top = cursor.offset().top - container.offset().top
-				top = top - 6
-
-				max = @ide.editor.getContainerElement().outerHeight() - @$el.outerHeight()
-				top = 0 if top < 0
-				top = max if top > max
-
-				@$el.css({top: top})
-			, 10
 

services/web/public/js/libs/pdfListView/PdfListView.js

@@ -144,6 +144,8 @@ RenderController.prototype = {
     finishedRendering: function(pageView) {
         var idx = this.renderList.indexOf(pageView);
 
+        pageView.callAfterRenderedCallbacks();
+
         // If the finished pageView is in the list of pages to render,
         // then remove it from the list and render start rendering the
         // next page.
@@ -408,7 +410,11 @@ ListView.prototype = {
         for (i = 0; i < highlights.length; i++) {
             var pageIndex = highlights[i].page;
             var pageView = this.pageViews[pageIndex];
-            pageView.addHighlight(highlights[i].highlight, fromTop);
+            (function(pageView, highlight) {
+                pageView.doWhenRendered(function() {
+                    pageView.addHighlight(highlight.highlight, fromTop);
+                });
+            })(pageView, highlights[i]);
         }
     },
 
@@ -489,6 +495,7 @@ function PageView(page, listView) {
 
     this.isRendered = false;
     this.renderState = RenderingStates.INITIAL;
+    this.afterRenderCallbacks = [];
 
     var dom = this.dom = document.createElement('div');
     dom.className = "plv-page-view page-view";
@@ -699,6 +706,22 @@ PageView.prototype = {
             }
             this.highlightsLayer.addHighlight(left, top, width, height);
         }
+    },
+
+    doWhenRendered: function(callback) {
+        if (this.isRendered) {
+            callback()
+        } else {
+            this.afterRenderCallbacks.push(callback);
+        }
+    },
+
+    callAfterRenderedCallbacks: function () {
+        var callbacks = this.afterRenderCallbacks;
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i]();
+        }
+        this.afterRenderCallbacks = [];
     }
 };
 

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

@@ -207,7 +207,7 @@ body.editor {
 		.sync-buttons {
 			z-index: 3;
 			position: absolute;
-			top: 0;
+			top: 45px;
 			right: 0;
 			padding: 2px;
 			background-color: #eee;
@@ -242,7 +242,7 @@ body.editor {
 	#pdfArea {
 		background-color: #eee;
 		#pdfToolBar{
-			padding: 5px 10px 3px 10px;
+			padding: 5px 5px 3px 5px;
 			margin: 0;
 			background-color: white;
 			border-bottom: 1px solid #aaa;