Fix DFL-3374: Tooltip is not placed correctly if the target element is very high and on the right side of the viewport.

Author: hzr

src/ecma-debugger/templates.js

@@ -471,7 +471,7 @@
     return [
       ["li",
         ["div",
-          ["span",
+          ["div",
             "↱",
            "class", "return-value-arrow return-value-arrow-from",
            "handler", "goto-script-line",
@@ -487,14 +487,17 @@
         ],
         (value_template.length
         ? ["div",
-            ["span",
-              "↳",
-             "class", "return-value-arrow return-value-arrow-to",
+            ["div",
+              ["div",
+                "↳",
+               "class", "return-value-arrow-to",
+               "data-tooltip", "return-value-tooltip",
+               "data-tooltip-text", ui_strings.S_RETURN_VALUES_FUNCTION_TO
+                                              .replace("%s", to_uri)
+                                              .replace("%s", retval.positionTo.lineNumber)
+              ],
+             "class", "return-value-arrow",
              "handler", "goto-script-line",
-             "data-tooltip", "return-value-tooltip",
-             "data-tooltip-text", ui_strings.S_RETURN_VALUES_FUNCTION_TO
-                                            .replace("%s", to_uri)
-                                            .replace("%s", retval.positionTo.lineNumber),
              "data-script-id", String(retval.positionTo.scriptID),
              "data-script-line", String(retval.positionTo.lineNumber)
             ],

src/ui-style/debugger_style.css

@@ -1639,11 +1639,6 @@ d
   display: table-cell;
 }
 
-.return-value .return-value-arrow-to
-{
-  padding-left: 14px;
-}
-
 .return-function-from .folder-key
 {
   display: none;
@@ -1653,21 +1648,28 @@ d
 {
   display: inline-block;
   vertical-align: top;
-  width: 15px;
-  height: 16px;
+  width: 14px;
+  height: 15px;
   background-repeat: no-repeat;
   cursor: pointer;
-  content: "";
+}
+
+.return-value .return-value-arrow
+{
+  width: 28px;
 }
 
 .return-value-arrow-from
 {
+  content: "";
   background: transparent url("../ui-images/arrow_roundl.png") 0 50% no-repeat;
 }
 
 .return-value-arrow-to
 {
-  background: transparent url("../ui-images/arrow_tail.png") 14px 2px no-repeat;
+  content: "";
+  height: 100%;
+  background: transparent url("../ui-images/arrow_tail.png") 13px 2px no-repeat;
 }
 
 .return-function-from:hover .return-value-arrow-from