[Info Bubble] Fix display issues

Intermediary commit; fix some display issues with info bubbles,
add some delay. WTD-884.

platform/commonUI/inspect/bundle.json

@@ -39,7 +39,11 @@
             {
                 "key": "info",
                 "implementation": "gestures/InfoGesture.js",
-                "depends": [ "infoService" ]
+                "depends": [
+                    "$timeout",
+                    "infoService",
+                    "INFO_HOVER_DELAY"
+                ]
             }
         ],
         "services": [
@@ -53,6 +57,12 @@
                     "$rootScope"
                 ]
             }
+        ],
+        "constants": [
+            {
+                "key": "INFO_HOVER_DELAY",
+                "value": 500
+            }
         ]
     }
 }

platform/commonUI/inspect/res/bubble.html

@@ -1,9 +1,9 @@
 	<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.bubbleLayout}}">
 		<div class="l-infobubble">
-			<div ng-show="bubble.mctTitle.length > 0"
+			<div ng-show="bubble.bubbleTitle.length > 0"
 				 class="title">
                 {{bubble.bubbleTitle}}
 			</div>
-			<ng-transclude></ng-transclude>
+			<span ng-transclude></span>
 		</div>
 	</div>

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

@@ -5,8 +5,10 @@ define(
     function () {
         "use strict";
 
-        function InfoGesture(infoService, element, domainObject) {
+        function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
-            var dismissBubble;
+            var dismissBubble,
+                pendingBubble,
+                mousePosition;
 
             function hideBubble() {
                 if (dismissBubble) {
@@ -14,20 +16,36 @@ define(
                     element.off('mouseleave', hideBubble);
                     dismissBubble = undefined;
                 }
+                if (pendingBubble) {
+                    $timeout.cancel(pendingBubble);
+                    pendingBubble = undefined;
+                }
+                mousePosition = undefined;
+            }
+
+            function trackPosition(event) {
+                mousePosition = [ event.clientX, event.clientY ];
             }
 
             function showBubble(event) {
+                trackPosition(event);
+
+                pendingBubble = $timeout(function () {
                     dismissBubble = infoService.display(
                         "info-table",
-                    domainObject.getName(),
+                        domainObject.getModel().name,
                         [
                             { name: "ID", value: domainObject.getId() }
                         ],
-                    [ event.clientX, event.clientY ]
+                        mousePosition
                     );
+                    pendingBubble = undefined;
+                }, DELAY);
+
                 element.on('mouseleave', hideBubble);
             }
 
+            element.on('mousemove', trackPosition);
             element.on('mouseenter', showBubble);
 
             return {

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

@@ -5,20 +5,19 @@ define(
     function () {
         "use strict";
 
-        var BUBBLE_TEMPLATE = "<mct-container key=\"'bubble'\" " +
+        var BUBBLE_TEMPLATE = "<div><mct-container key=\"bubble\" " +
                 "bubble-title=\"{{bubbleTitle}}\" " +
-                "bubble-layout=\"{{bubbleLayout}}\" " +
+                "bubble-layout=\"{{bubbleLayout}}\">" +
-                "<mct-include key=\"'info-table'\" " +
+                "<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" +
-                "ng-model=\"bubbleModel\">" +
                 "</mct-include>" +
-                "</mct-container>";
+                "</mct-container></div>";
 
         /**
          * Displays informative content ("info bubbles") for the user.
          * @constructor
          */
         function InfoService($compile, $document, $window, $rootScope) {
-            var template = $compile(BUBBLE_TEMPLATE);
+            var template;
 
             function display(templateKey, title, content, position) {
                 var body = $document.find('body'),
@@ -28,8 +27,12 @@ define(
                     goUp = position[1] > (window[1] / 2),
                     bubble;
 
+                // Lazily initialize template
+                template = template || $compile(BUBBLE_TEMPLATE);
+
                 // Pass model & container parameters into the scope
                 scope.bubbleModel = content;
+                scope.bubbleTemplate = templateKey;
                 scope.bubbleLayout = (goUp ? 'arw-btm' : 'arw-top') + ' ' +
                         (goLeft ? 'arw-right' : 'arw-left');
                 scope.bubbleTitle = title;