fix broken doc tooltip positioning logic

Author: nightwing

src/autocomplete.js

@@ -687,48 +687,46 @@ class Autocomplete {
 
         var leftSize = rect.left;
         var rightSize = window.innerWidth - rect.right - scrollBarSize;
-        var topSize = popup.isTopdown ? rect.top : window.innerHeight - scrollBarSize - rect.bottom;
+        var topSize = popup.isTopdown ?  window.innerHeight - scrollBarSize - rect.bottom : rect.top;
         var scores = [
             Math.min(rightSize / targetWidth, 1),
             Math.min(leftSize / targetWidth, 1),
-            Math.min(topSize / targetHeight * 0.9),
+            Math.min(topSize / targetHeight, 1) * 0.9,
         ];
         var max = Math.max.apply(Math, scores);
         var tooltipStyle = tooltipNode.style;
         tooltipStyle.display = "block";
 
-        if (max == scores[0]) {
+        if (max == scores[0] || scores[0] >= 1) {
             tooltipStyle.left = (rect.right + 1) + "px";
             tooltipStyle.right = "";
             tooltipStyle.maxWidth = targetWidth * max + "px";
             tooltipStyle.top = rect.top + "px";
             tooltipStyle.bottom = "";
             tooltipStyle.maxHeight = Math.min(window.innerHeight - scrollBarSize - rect.top, targetHeight) + "px";
-        } else if (max == scores[1]) {
+        } else if (max == scores[1] || scores[1] >= 1) {
             tooltipStyle.right = window.innerWidth - rect.left + "px";
             tooltipStyle.left = "";
             tooltipStyle.maxWidth = targetWidth * max + "px";
             tooltipStyle.top = rect.top + "px";
             tooltipStyle.bottom = "";
             tooltipStyle.maxHeight = Math.min(window.innerHeight - scrollBarSize - rect.top, targetHeight) + "px";
         } else if (max == scores[2]) {
-            tooltipStyle.left = window.innerWidth - rect.left + "px";
-            tooltipStyle.maxWidth = Math.min(targetWidth, window.innerWidth) + "px";
+            tooltipStyle.left = rect.left + "px";
+            tooltipStyle.right = "";
+            tooltipStyle.maxWidth = Math.min(targetWidth, window.innerWidth - rect.left) + "px";
 
             if (popup.isTopdown) {
                 tooltipStyle.top = rect.bottom + "px";
-                tooltipStyle.left = rect.left + "px";
-                tooltipStyle.right = "";
                 tooltipStyle.bottom = "";
                 tooltipStyle.maxHeight = Math.min(window.innerHeight - scrollBarSize - rect.bottom, targetHeight) + "px";
             } else {
-                tooltipStyle.top = popup.container.offsetTop - tooltipNode.offsetHeight + "px";
-                tooltipStyle.left = rect.left + "px";
-                tooltipStyle.right = "";
-                tooltipStyle.bottom = "";
-                tooltipStyle.maxHeight = Math.min(popup.container.offsetTop, targetHeight) + "px";
+                tooltipStyle.top = "";
+                tooltipStyle.bottom = (window.innerHeight  - rect.top) + "px";
+                tooltipStyle.maxHeight = Math.min(rect.top, targetHeight) + "px";
             }
         }
+        dom.$fixPositionBug(tooltipNode);
     }
 
     hideDocTooltip() {

src/autocomplete/popup.js

@@ -389,6 +389,7 @@ class AcePopup {
 
             el.style.left = left + "px";
             el.style.right = "";
+            dom.$fixPositionBug(el);
 
             if (!popup.isOpen) {
                 popup.isOpen = true;
@@ -399,7 +400,6 @@ class AcePopup {
             popup.anchorPos = pos;
             popup.anchor = anchor;
 
-            dom.$fixPositionBug(el);
 
             return true;
         };

src/autocomplete_test.js

@@ -1719,14 +1719,14 @@ module.exports = {
                             value: "completion1",
                             docHTML: longDoc
                         },
-                        // {
-                        //     caption: "completion2",
-                        //     value: "completion2"
-                        // },
-                        // {
-                        //     caption: "completion3",
-                        //     value: "completion3"
-                        // }
+                        {
+                            caption: "completion2",
+                            value: "completion2"
+                        },
+                        {
+                            caption: "completion3",
+                            value: "completion3"
+                        }
                     ]);
                 }
             }
@@ -1735,8 +1735,7 @@ module.exports = {
 
         editor.resize();
         await editor.renderer.once("afterRender");
-
-        user.type("c");
+        editor.completer.showPopup(editor);
 
         var popup = editor.completer.popup;
         var popupRect, tooltipRect;
@@ -1758,8 +1757,10 @@ module.exports = {
         editor.container.style.height = "100px";
         editor.container.style.left = "0px";
         editor.container.style.top = "0px";
-        popup.container.style.positionHint = editor.completer.tooltipNode.style.positionHint = "fixed"
-
+        popup.container.style.positionHint = "fixed"
+        
+        
+        user.type("c");
         await waitForDocTooltip();
         assert.ok(tooltipRect.left > popupRect.right, "Tooltip should appear on the right");
 
@@ -1772,17 +1773,16 @@ module.exports = {
 
         editor.container.style.left = "400px";
         editor.container.style.top = "0px";
-        popup.isTopdown = true;
+        popup.container.style.width = (window.innerWidth - 100) + "px"; 
         user.type("Escape");
         user.type("Enter");
         user.type("c");
 
         await waitForDocTooltip();
-        assert.ok(tooltipRect.top > popupRect.bottom, "Tooltip should appear below");
+        assert.ok(tooltipRect.top >= popupRect.bottom, "Tooltip should appear below");
 
         editor.container.style.top = (window.innerHeight - 100) + "px";
         editor.container.style.left = "0px";
-        popup.isTopdown = false;
         user.type("Escape");
         user.type("Enter");
         user.type("c");

src/test/mockdom.js

@@ -471,7 +471,11 @@ function Node(name) {
             }
             if (!this.style.top &&  this.style.bottom) {
                 top = rect.width - bottom - height;
-            }            
+            }
+            if (!isFixed) {
+                top += rect.top;
+                left += rect.left;
+            }
         }
         return {top: top, left: left, width: width, height: height, right: left + width, bottom: top + height};
     };