From 87fdc74ed09665621195ea641a041efedd2ee14e Mon Sep 17 00:00:00 2001
From: Dave C-J <dave@conway-jones.co.uk>
Date: Mon, 28 Oct 2013 10:01:12 +0000
Subject: [PATCH] Make debug button move/partially hide when disabled to make
 it obvious. Also thicken border of node selected from within debug window -
 again to make it "pop" so it is obvious. Fixes #47

---
 nodes/core/58-debug.html | 65 +++++++++++++++++++++-------------------
 public/red/ui/view.js    | 20 ++++++-------
 public/style.css         | 14 ++++-----
 3 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/nodes/core/58-debug.html b/nodes/core/58-debug.html
index a76f2e82c..eb32ed33d 100644
--- a/nodes/core/58-debug.html
+++ b/nodes/core/58-debug.html
@@ -29,14 +29,14 @@
 </script>
 
 <script type="text/x-red" data-help-name="debug">
-	<p>The Debug node can be connected to the output of any node. It will display the timestamp, <b>msg.topic</b> and <b>msg.payload</b> fields of any messages it receives in the debug tab of the sidebar.
-	<br/>The sidebar can be accessed under the options drop-down in the top right corner.</p>
-	<p>The button to the right of the node will toggle it's output on and off so you can de-clutter the debug window.</p>
-	<p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p>
-	<p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p>
-	<p>Selecting any particular message will highlight (in red) the debug node that reported it. This is useful if you wire up multiple debug nodes.</p>
-	<p>Optionally can show the complete msg object - but the screen can get messy.</p>
-	<p>In addition any calls to node.warn or node.error will appear here.</p>
+    <p>The Debug node can be connected to the output of any node. It will display the timestamp, <b>msg.topic</b> and <b>msg.payload</b> fields of any messages it receives in the debug tab of the sidebar.
+    <br/>The sidebar can be accessed under the options drop-down in the top right corner.</p>
+    <p>The button to the right of the node will toggle it's output on and off so you can de-clutter the debug window.</p>
+    <p>If the payload is an object it will be stringified first for display and indicate that by saying "(Object) ".</p>
+    <p>If the payload is a buffer it will be stringified first for display and indicate that by saying "(Buffer) ".</p>
+    <p>Selecting any particular message will highlight (in red) the debug node that reported it. This is useful if you wire up multiple debug nodes.</p>
+    <p>Optionally can show the complete msg object - but the screen can get messy.</p>
+    <p>In addition any calls to node.warn or node.error will appear here.</p>
 </script>
 
 <script type="text/javascript">
@@ -62,31 +62,34 @@
             color: function() {
                  return (typeof this.active === 'undefined') ? ("#87a980" ) : (this.active ? "#87a980" : "#b9b9b9");
             },
+            wide: function() {
+                 return (typeof this.active === 'undefined') ? 100 : (this.active ? 100 : 110);
+            },
             onclick: function() {
                 var label = this.name||"debug";
                 var node = this;
                 d3.xhr("debug/"+this.id).post(function(err,resp) {
-                        if (err) {
-                            if (err.status == 404) {
-                                RED.notify("<strong>Error</strong>: debug node not deployed","error");
-                            } else if (err.status == 0) {
-                                RED.notify("<strong>Error</strong>: no response from server","error");
-                            } else {
-                                RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error");
-                            }
-                        } else if (resp.status == 200) {
-                            RED.notify("Successfully activated: "+label,"success");
-                            node.active = true;
-                            node.dirty = true;
-                            RED.view.redraw();
-                        } else if (resp.status == 201) {
-                            RED.notify("Successfully deactivated: "+label,"success");
-                            node.active = false;
-                            node.dirty = true;
-                            RED.view.redraw();
+                    if (err) {
+                        if (err.status == 404) {
+                            RED.notify("<strong>Error</strong>: debug node not deployed","error");
+                        } else if (err.status == 0) {
+                            RED.notify("<strong>Error</strong>: no response from server","error");
                         } else {
-                            RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error");
+                            RED.notify("<strong>Error</strong>: unexpected error: ("+err.status+")"+err.response,"error");
                         }
+                    } else if (resp.status == 200) {
+                        RED.notify("Successfully activated: "+label,"success");
+                        node.active = true;
+                        node.dirty = true;
+                        RED.view.redraw();
+                    } else if (resp.status == 201) {
+                        RED.notify("Successfully deactivated: "+label,"success");
+                        node.active = false;
+                        node.dirty = true;
+                        RED.view.redraw();
+                    } else {
+                        RED.notify("<strong>Error</strong>: unexpected response: ("+resp.status+") "+resp.response,"error");
+                    }
                 });
             }
         }
@@ -116,10 +119,10 @@
         var sbc = document.getElementById("debug-content");
 
         var errornotification = null;
-        
+
         var messageCount = 0;
-        
-        
+
+
         function debugConnect() {
             //console.log("debug ws connecting");
             var ws = new WebSocket("ws://"+location.hostname+":"+location.port+document.location.pathname+"/debug");
@@ -165,7 +168,7 @@
                 var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5;
                 messageCount++;
                 $(messages).append(msg);
-                
+
                 if (messageCount > 200) {
                     $("#debug-content .debug-message:first").remove();
                     messageCount--;
diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index 42d815666..527b69168 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -99,7 +99,7 @@ RED.view = function() {
                 .attr("height",0)
                 .attr("class","lasso");
             d3.event.preventDefault();
-			}
+            }
         }
     }
 
@@ -155,7 +155,7 @@ RED.view = function() {
             var delta = Math.sqrt(dy*dy+dx*dx);
             var scale = lineCurveScale;
             var scaleY = 0;
-            
+
             if (delta < node_width) {
                 scale = 0.75-0.75*((node_width-delta)/node_width);
             }
@@ -165,7 +165,7 @@ RED.view = function() {
                     scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
                 }
             }
-            
+
             drag_line.attr("d",
                 "M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+y)+
                 " C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+y+scaleY*node_height)+" "+
@@ -655,7 +655,7 @@ RED.view = function() {
                             .attr("x",0).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;})
                             .attr("width","15")
                             .attr("height", function(d){return Math.min(50,d.h);});
-                            
+
                         if (d._def.align) {
                             icon.attr('class','node_icon node_icon_'+d._def.align);
                         }
@@ -755,8 +755,8 @@ RED.view = function() {
                         });
                         thisNode.selectAll(".node_icon").attr("height",function(d){return Math.min(50,d.h);}).attr("y",function(d){return (d.h-Math.min(50,d.h))/2;});
 
-                        thisNode.selectAll('.node_right_button_group').attr("transform",function(d){return "translate("+(d.w-100)+","+0+")";});
-                        thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w-100)+","+0+")";}).attr("fill",function(d) {
+                        thisNode.selectAll('.node_right_button_group').attr("transform",function(d){return "translate("+(d.w - d._def.button.wide.call(d))+","+0+")";});
+                        thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w - d._def.button.wide.call(d))+","+0+")";}).attr("fill",function(d) {
                                  return typeof d._def.button.color  === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
                         });
 
@@ -814,14 +814,14 @@ RED.view = function() {
                 if (delta < node_width) {
                     scale = 0.75-0.75*((node_width-delta)/node_width);
                 }
-                
+
                 if (dx < 0) {
                     scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
                     if (Math.abs(dy) < 3*node_height) {
                         scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
                     }
                 }
-                
+
                 d.x1 = d.source.x+d.source.w/2;
                 d.y1 = d.source.y+y;
                 d.x2 = d.target.x-d.target.w/2;
@@ -878,11 +878,11 @@ RED.view = function() {
                 var root_node = new_ms[0].n;
                 var dx = root_node.x;
                 var dy = root_node.y;
-                
+
                 if (mouse_position == null) {
                     mouse_position = [0,0];
                 }
-                
+
                 for (var i in new_ms) {
                     new_ms[i].n.selected = true;
                     new_ms[i].n.x -= dx - mouse_position[0];
diff --git a/public/style.css b/public/style.css
index 5a27d7099..8673fe5d4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -318,7 +318,8 @@ a.brand img {
    stroke: #ff7f0e;
 }
 .node_highlighted {
-   stroke: #ff0000;
+   stroke: #a51616;
+   stroke-width: 4;
 }
 .node_hovered {
   dstroke: #ff7f0e;
@@ -414,11 +415,11 @@ button.input-append-right {
 }
 
 .form-tips {
-	background: lightgoldenrodyellow;
-	font-size: 12px;
-	padding: 8px;
-	border-radius: 5px;
-	border: 1px solid #999;
+    background: lightgoldenrodyellow;
+    font-size: 12px;
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid #999;
 }
 .form-tips code {
     border: none;
@@ -552,7 +553,6 @@ div.node-info {
 #node-select-library li.list-hover {
     background: #ffffd0;
 }
-
 .node-text-editor {
     border:1px solid #ccc;
     border-radius:5px;