fix popover positioning

Author: redmunds

src/editor/Editor.js

@@ -1528,11 +1528,12 @@ define(function (require, exports, module) {
      */
     Editor.prototype.displayErrorMessageAtCursor = function (errorMsg) {
         var arrowBelow, cursorPos, cursorCoord, popoverRect,
-            top, left, clip, arrowLeft,
+            top, left, clip, arrowCenter, arrowLeft,
             self = this,
             $editorHolder = $("#editor-holder"),
             POPOVER_MARGIN = 10,
-            POPOVER_ARROW_HALF_WIDTH = 10;
+            POPOVER_ARROW_HALF_WIDTH = 10,
+            POPOVER_ARROW_HALF_BASE = POPOVER_ARROW_HALF_WIDTH + 3; // 3 is border radius
 
         function _removeListeners() {
             $(self).off(".msgbox");
@@ -1611,8 +1612,14 @@ define(function (require, exports, module) {
         // Popover text and arrow are positioned individually
         this._$messagePopover.css({"top": top, "left": left});
 
-        // Position popover arrow exactly centered over/under cursor
-        arrowLeft = cursorCoord.left - left - POPOVER_ARROW_HALF_WIDTH;
+        // Position popover arrow centered over/under cursor...
+        arrowCenter = cursorCoord.left - left;
+
+        // ... but don't let it slide off text box
+        arrowCenter = Math.min(popoverRect.width - POPOVER_ARROW_HALF_BASE,
+                               Math.max(arrowCenter, POPOVER_ARROW_HALF_BASE));
+
+        arrowLeft = arrowCenter - POPOVER_ARROW_HALF_WIDTH;
         if (arrowBelow) {
             this._$messagePopover.find(".arrowBelow").css({"margin-left": arrowLeft});
         } else {

test/spec/InlineEditorProviders-test-files/test1.html

@@ -15,6 +15,6 @@
     <div id="anotherDiv{{6}}"></div>
     <div{{8}} {{7}}class="foo"></{{9}}div>
     <div class="{{10}}embeddedClass" title="abc{{12}}xyz"></div>
-    <div class="embeddedClass" title="abc xyz">This is a long line of text so that cursor position at end of line will have to be scrolled into view</div>{{13}}
+    <div class="embeddedClass" title="abc xyz">This is a long line of text so that cursor position at end of line will have to be scrolled into view. This is a long line of text so that cursor position at end of line will have to be scrolled into view.</div>{{13}}
 </body>
 </html>

test/spec/InlineEditorProviders-test.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, browser: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, describe, it, xit, expect, beforeEach, afterEach, waits, waitsFor, waitsForDone, waitsForFail, runs, $, brackets, beforeFirst, afterLast */
+/*global define, describe, it, expect, beforeEach, afterEach, waits, waitsFor, waitsForDone, waitsForFail, runs, $, brackets, beforeFirst, afterLast */
 
 define(function (require, exports, module) {
     'use strict';
@@ -580,7 +580,7 @@ define(function (require, exports, module) {
                 });
             });
 
-            xit("should scroll cursor into view and position message popover inside right edge of window", function () {
+            it("should scroll cursor into view and position message popover inside right edge of window", function () {
                 var $popover, scrollPos, editor,
                     openFile = "test1.html";