fix tab tooltip issues

plugins/c9.ide.ace/style.less

@@ -206,7 +206,7 @@
     color : @gutter-tooltip-color;
     .font-smoothing(@gutter-tooltip-font-smoothing);
 }
-.ace_dark .ace_tooltip {
+.ace_dark .ace_tooltip, .ace_dark.ace_tooltip {
     box-shadow : @gutter-tooltip-dark-shadow !important;
     background : @gutter-tooltip-dark-background !important;
     border : 1px solid @gutter-tooltip-dark-border;

plugins/c9.ide.editors/pane.js

@@ -204,40 +204,98 @@ define(function(require, module, exports) {
             /***** Methods *****/
             
             function addCustomTooltipHandler(el) {
-                el.addEventListener("mousemove", function(e) {
+                var tooltipTimer;
-                    var target = e.target;
+                var tooltipHideTimer;
-                    var amlTab = apf.findHost(target); 
+                var currentTarget;
+                function hide() {
+                    console.log("hide", currentTarget)
+                    if (tooltipTimer) tooltipTimer = clearTimeout(tooltipTimer);
+                    if (tooltipHideTimer) tooltipHideTimer = clearTimeout(tooltipHideTimer);
+                    if (tooltip) tooltip.hide();
+                    currentTarget = null;
+                }
+                function findTab(e) {
+                    var amlTab = apf.findHost(e.target); 
                     var tab = amlTab && amlTab.cloud9tab;
-                    if (!tab) return tooltip && tooltip.hide();
+                    return tab;
+                }
+                el.addEventListener("mousemove", function(e) {
+                    if (apf.isMousePressed)
+                        return tooltip && tooltip.hide();
+                    var tab = findTab(e);
+                    if (tooltip && tooltip.isOpen) {
+                        tooltipHideTimer = clearTimeout(tooltipHideTimer);
+                        if (currentTarget != tab) {
+                            currentTarget = tab;
+                            updateTooltip();
+                        }
+                    } else {
+                        if (currentTarget != tab || !tooltipTimer) {
+                            tooltipTimer = clearTimeout(tooltipTimer);
+                            tooltipTimer = setTimeout(updateTooltip, 150);
+                            currentTarget = tab;
+                        }
+                    }
+                });
+
+                function updateTooltip() {
+                    console.log("show", currentTarget)
+                    tooltipTimer = clearTimeout(tooltipTimer);
+                    tooltipHideTimer = clearTimeout(tooltipHideTimer);
+                    var tab = currentTarget;
+                    if (!tab) return hide();
                     
                     var tooltipTitle = tab.tooltip || tab.title;
                     
-                    if (!tooltipTitle) return tooltip && tooltip.hide();
+                    if (!tooltipTitle) return hide();
                     
                     if (!tooltip)
                         tooltip = new Tooltip(document.body);
                     
+                    var activeTab = tab.pane.activeTab || tab;
+                    
+                    if (activeTab.classList.contains("dark"))
+                        tooltip.getElement().classList.add("ace_dark");
+                    else
+                        tooltip.getElement().classList.remove("ace_dark");
+
                     var rect = tab.aml.$button.getBoundingClientRect();
                     var style = tooltip.getElement().style;
                     style.top = rect.bottom + 10 + "px";
                     style.textAlign = "center";
-                    
+                    style.minWidth = rect.width + "px";
-                    tooltip.setText(tooltipTitle);
+                    style.maxWidth = "40em";
+                    style.whiteSpace = "pre-wrap";
+                    style.wordWrap = "normal";
+
+                    tooltip.setText(tooltipTitle.replace(/[/.-]/g, "\u200b$&"));
                     tooltip.show();
                     var tooltipRect = tooltip.getElement().getBoundingClientRect();
-                    style.minWidth = rect.width + "px";
                     var left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-                    if (left + tooltipRect.width > window.innerWidth)
+                    if (left + tooltipRect.width > window.innerWidth - 2)
-                        left = Math.max(0, window.innerWidth - tooltipRect.width);
+                        left = Math.max(0, window.innerWidth - 2 - tooltipRect.width);
+                    if (left < 2)
+                        left = 2;
+                    if (tooltipRect.width > window.innerWidth - 4)
+                        style.maxWidth = window.innerWidth - 4 + "px";
                     style.left = left + "px";
-                });
+                }
                 
                 el.addEventListener("mouseout", function(e) {
-                    tooltip && tooltip.hide();
+                    if (tooltip && tooltip.isOpen) {
+                        clearTimeout(tooltipHideTimer);
+                        tooltipHideTimer = setTimeout(hide, 100);
+                    }
+                    if (tooltipTimer)
+                        tooltipTimer = clearTimeout(tooltipTimer);
                 });
+                el.addEventListener("mousedown", hide);
                 plugin.on("beforeUnload", function() {
-                    tooltip && tooltip.destroy();
+                    if (tooltip) {
-                    tooltip = null;
+                        hide();
+                        tooltip.destroy();
+                        tooltip = null;
+                    }
                 });
             }
             

plugins/c9.ide.layout.classic/themes/default-flat-dark.less

@@ -792,7 +792,7 @@
 @gutter-tooltip-shadow: @language-tooltip-box-shadow;
 @gutter-tooltip-background: @language-tooltip-background;
 @gutter-tooltip-border: @language-tooltip-border-color;
-@gutter-tooltip-color: darken(#e0e3e8, @darken-chrome);
+@gutter-tooltip-color: darken(#333, @darken-chrome);
 @gutter-tooltip-font-smoothing: false;
 
 @gutter-tooltip-dark-shadow: 1px 1px 6px darken(rgba(0, 0, 0, 0.8), @darken-chrome);

plugins/c9.ide.ui/ui.js

@@ -50,10 +50,12 @@ define(function(require, module, exports) {
             apf.initialize('<a:application xmlns:a="http://ajax.org/2005/aml" />');
             
             window.addEventListener("mousedown", function() {
+                apf.isMousePressed = true;
                 document.body.classList.add("disableIframe");
             }, true);
             
             window.addEventListener("mouseup", function() {
+                apf.isMousePressed = false;
                 document.body.classList.remove("disableIframe");
             }, true);
         }