From 1161e4f6c1761e9e5c745c547b438fc7f43dc5ad Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 5 Oct 2018 17:56:42 +0100
Subject: [PATCH] Add tooltips to debug elements

---
 .../editor-client/src/js/ui/common/popover.js | 26 +++++++++++++------
 .../editor-client/src/sass/popover.scss       |  5 ++--
 .../@node-red/nodes/core/core/58-debug.html   |  3 +++
 .../nodes/core/core/lib/debug/debug-utils.js  |  3 +++
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
index 71820392e..c498a6741 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
@@ -81,33 +81,43 @@ RED.popover = (function() {
                 var divWidth = div.width();
 
                 var viewportTop = $(window).scrollTop();
+                var viewportLeft = $(window).scrollLeft();
                 var viewportBottom = viewportTop + $(window).height();
+                var viewportRight = viewportLeft + $(window).width();
                 var top = 0;
                 var left = 0;
-                if (direction === 'right') {
+                var d = direction;
+                if (d === 'right') {
                     top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
                     left = targetPos.left+targetWidth+deltaSizes[size].leftRight;
-                } else if (direction === 'left') {
+                } else if (d === 'left') {
                     top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
                     left = targetPos.left-deltaSizes[size].leftLeft-divWidth;
-                } else if (direction === 'bottom') {
+                } else if (d === 'bottom') {
                     top = targetPos.top+targetHeight+deltaSizes[size].top;
                     left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
-                    if (top+divHeight > viewportBottom) {
-                        direction = 'top'
+                    if (left+divWidth > viewportRight) {
+                        d = "left";
+                        top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
+                        left = targetPos.left-deltaSizes[size].leftLeft-divWidth;
+                        if (top+divHeight+targetHeight/2 + 5 > viewportBottom) {
+                            top -= (top+divHeight+targetHeight/2 - viewportBottom + 5)
+                        }
+                    } else if (top+divHeight > viewportBottom) {
+                        d = 'top';
                         top = targetPos.top-deltaSizes[size].topTop-divHeight;
                         left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
                     }
-                } else if (direction === 'top') {
+                } else if (d === 'top') {
                     top = targetPos.top-deltaSizes[size].topTop-divHeight;
                     left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
                     if (top < 0) {
-                        direction = 'bottom';
+                        d = 'bottom';
                         top = targetPos.top+targetHeight+deltaSizes[size].top;
                         left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
                     }
                 }
-                div.addClass('red-ui-popover-'+direction).css({top: top, left: left});
+                div.addClass('red-ui-popover-'+d).css({top: top, left: left});
 
                 if (instant) {
                     div.show();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 62f98843e..bfc182ec4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -139,9 +139,10 @@
 }
 
 .red-ui-popover-key {
+    font-size: 11px;
     font-family: monospace;
-    margin-left: 5px;
+    margin-left: 3px;
     border: 1px solid #999;
     border-radius:3px;
-    padding: 2px 3px;
+    padding: 1px 2px;
 }
diff --git a/packages/node_modules/@node-red/nodes/core/core/58-debug.html b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
index 4c0b4c77f..70c8103b8 100644
--- a/packages/node_modules/@node-red/nodes/core/core/58-debug.html
+++ b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
@@ -217,6 +217,9 @@
                     subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*");
                 };
             });
+            RED.popover.tooltip($("#debug-tab-open"),RED._('node-red:debug.sidebar.openWindow'));
+
+
 
             $(window).unload(function() {
                 if (subWindow) {
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
index 2d47155ba..8e7971ce9 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
@@ -221,6 +221,9 @@ RED.debug = (function() {
             e.preventDefault();
             clearMessageList(false);
         });
+        RED.popover.tooltip(toolbar.find("#debug-tab-clear"),RED._('node-red:debug.sidebar.clearLog'));
+
+
 
         return {
             content: content,