[Info Bubble] Refine positioning, add comments

Refine positioning to behave correctly when mouse is on
right and/or lower part of screen; listen for scope
destruction to avoid cases where an element is removed
before mouseleave is ever called. WTD-884.

platform/commonUI/inspect/res/bubble.html

@@ -1,4 +1,4 @@
-	<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.bubbleLayout}}">
+	<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.bubbleLayout}}" style="position: relative;">
 		<div class="l-infobubble">
 			<div ng-show="bubble.bubbleTitle.length > 0"
 				 class="title">

platform/commonUI/inspect/src/gestures/InfoGesture.js

@@ -8,28 +8,37 @@ define(
         function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
-                mousePosition;
+                mousePosition,
+                scopeOff;
 
             function hideBubble() {
+                // If a bubble is showing, dismiss it
                 if (dismissBubble) {
                     dismissBubble();
                     element.off('mouseleave', hideBubble);
                     dismissBubble = undefined;
                 }
+                // If a bubble will be shown on a timeout, cancel that
                 if (pendingBubble) {
                     $timeout.cancel(pendingBubble);
                     pendingBubble = undefined;
                 }
+                // Also clear mouse position so we don't have a ton of tiny
+                // arrays allocated while user mouses over things
                 mousePosition = undefined;
             }
 
             function trackPosition(event) {
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
                 mousePosition = [ event.clientX, event.clientY ];
             }
 
             function showBubble(event) {
                 trackPosition(event);
 
+                // Show the bubble, after a suitable delay (if mouse has
+                // left before this time is up, this will be canceled.)
                 pendingBubble = $timeout(function () {
                     dismissBubble = infoService.display(
                         "info-table",
@@ -45,13 +54,23 @@ define(
                 element.on('mouseleave', hideBubble);
             }
 
-            element.on('mousemove', trackPosition);
+            // Show bubble (on a timeout) on mouse over
             element.on('mouseenter', showBubble);
 
+            // Also need to track position during hover
+            element.on('mousemove', trackPosition);
+
+            // Also make sure we dismiss bubble if representation is destroyed
+            // before the mouse actually leaves it
+            scopeOff = element.scope().$on('$destroy', hideBubble);
+
             return {
                 destroy: function () {
+                    // Dismiss any active bubble...
                     hideBubble();
+                    // ...and detach listeners
                     element.off('mouseenter', showBubble);
+                    scopeOff();
                 }
             };
         }

platform/commonUI/inspect/src/services/InfoService.js

@@ -40,12 +40,12 @@ define(
                 // Position the bubble
                 bubble.css('position', 'absolute');
                 if (goLeft) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                    bubble.css('right', (winDim[0] - position[0] - OFFSET[0]) + 'px');
                 } else {
                     bubble.css('left', position[0] - OFFSET[0] + 'px');
                 }
                 if (goUp) {
-                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
+                    bubble.css('bottom', (winDim[1] - position[1] - OFFSET[1]) + 'px');
                 } else {
                     bubble.css('top', position[1] - OFFSET[1] + 'px');
                 }