Add visual cue as to whether the workspace is focused

editor/js/ui/common/tabs.js

@@ -73,6 +73,9 @@ RED.tabs = (function() {
         ul.children().addClass("red-ui-tab");
 
         function onTabClick() {
+            if (options.onclick) {
+                options.onclick(tabs[$(this).attr('href').slice(1)]);
+            }
             activateTab($(this));
             return false;
         }

editor/js/ui/view.js

@@ -384,6 +384,12 @@ RED.view = (function() {
                 }
             }
         });
+        $("#chart").focus(function() {
+            $("#workspace-tabs").addClass("workspace-focussed")
+        });
+        $("#chart").blur(function() {
+            $("#workspace-tabs").removeClass("workspace-focussed")
+        });
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
         RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});

editor/js/ui/workspaces.js

@@ -39,6 +39,7 @@ RED.workspaces = (function() {
                 RED.nodes.dirty(true);
             }
         }
+        RED.view.focus();
         return ws;
     }
     function deleteWorkspace(ws) {
@@ -139,6 +140,10 @@ RED.workspaces = (function() {
                 RED.events.emit("workspace:change",event);
                 window.location.hash = 'flow/'+tab.id;
                 RED.sidebar.config.refresh();
+                RED.view.focus();
+            },
+            onclick: function(tab) {
+                RED.view.focus();
             },
             ondblclick: function(tab) {
                 if (tab.type != "subflow") {

editor/sass/workspace.scss

@@ -51,3 +51,10 @@
 #workspace-footer {
     @include component-footer;
 }
+
+#workspace-tabs:not(.workspace-focussed) {
+    opacity:0.8;
+    li.red-ui-tab.active a {
+        color:#666;
+    }
+}