From 5b4019dd3d8d4c7719976798c048928f2d34481c Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 16 Jan 2017 10:29:00 +0000
Subject: [PATCH] Add colour swatches to debug when hex colour matched

---
 editor/js/ui/utils.js  | 6 ++++--
 editor/sass/debug.scss | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/editor/js/ui/utils.js b/editor/js/ui/utils.js
index ab95d740c..ab47d84cd 100644
--- a/editor/js/ui/utils.js
+++ b/editor/js/ui/utils.js
@@ -106,8 +106,10 @@ RED.utils = (function() {
                     $('<pre class="debug-message-type-string"></pre>').text(obj).appendTo(row);
                 });
             }
-            $('<span class="debug-message-type-string debug-message-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
-
+            e = $('<span class="debug-message-type-string debug-message-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
+            if (/^#[0-9a-f]{6}$/i.test(obj)) {
+                $('<span class="debug-message-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
+            }
 
         } else if (typeof obj === 'number') {
             e = $('<span class="debug-message-type-number"></span>').text(""+obj).appendTo(entryObj);
diff --git a/editor/sass/debug.scss b/editor/sass/debug.scss
index a02f1d7b3..0834c1e00 100644
--- a/editor/sass/debug.scss
+++ b/editor/sass/debug.scss
@@ -183,3 +183,11 @@
 .debug-message-buffer-string > .debug-message-array-rows {
     display: none;
 }
+.debug-message-type-string-swatch {
+    display: inline-block;
+    width: 1.1em;
+    height: 0.9em;
+    vertical-align: middle;
+    border-radius: 3px;
+    margin: 0 4px;
+}