DFL-3545 Streamlined list of event listener in the JS tooltip

Author: Chris K

src/ecma-debugger/eventlisteners/evlisteners.css

@@ -12,6 +12,8 @@
 {
   margin: 0;
   margin-top: -13px;
+  white-space: pre;
+  min-width: 180px;
 }
 
 .list-selected-node
@@ -58,6 +60,7 @@
 .ev-type
 {
   font: inherit;
+  position: relative;
 }
 
 .ev-listener-tooltip .ev-type,
@@ -76,7 +79,17 @@
 
 .ev-phase
 {
-  float: right;
+  /*
+    Propably an expensive way to right align text. But a common float causes an unstable
+    box with horizontal scrollbars which disappears on hover with an ugly jumping tooltip.
+  */
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 8px;
+  text-align: right;
   font-style: italic;
   color: hsl(0, 0%, 50%);
 }

src/ui-scripts/tooltip/tooltip.js

@@ -276,14 +276,7 @@ Tooltips.CSS_TOOLTIP_SELECTED = "tooltip-selected";
                      _cur_ctx.last_handler_ele.getAttribute(DATA_TOOLTIP_TEXT),
                      "class", "basic-tooltip"];
 
-      if (content)
-      {
-        _cur_ctx.tooltip_ele.scrollTop = 0;
-        _cur_ctx.tooltip_ele.scrollLeft = 0;
-        ret = typeof content == "string"
-            ? (_cur_ctx.tooltip_ele.textContent = content)
-            : _cur_ctx.tooltip_ele.clearAndRender(content);
-      }
+      _cur_ctx.tooltip_ele.innerHTML = "";
 
       if (!box && _cur_ctx.last_box)
       {
@@ -391,8 +384,16 @@ Tooltips.CSS_TOOLTIP_SELECTED = "tooltip-selected";
           }
         }
       }
-    }
 
+      if (content)
+      {
+        _cur_ctx.tooltip_ele.scrollTop = 0;
+        _cur_ctx.tooltip_ele.scrollLeft = 0;
+        ret = typeof content == "string"
+            ? (_cur_ctx.tooltip_ele.textContent = content)
+            : _cur_ctx.tooltip_ele.clearAndRender(content);
+      }
+    }
     return ret;
   };