mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Namespace CSS for Debug, Keyboard, Clipboard, Settings
This commit is contained in:
@@ -52,12 +52,12 @@ RED.debug = (function() {
|
||||
'<span class="button-group"><a id="debug-tab-open" class="red-ui-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
|
||||
'</div>');
|
||||
|
||||
messageList = $('<div class="debug-content debug-content-list"/>').appendTo(content);
|
||||
messageList = $('<div class="red-ui-debug-content debug-content-list"/>').appendTo(content);
|
||||
sbc = messageList[0];
|
||||
messageTable = $('<div class="debug-content debug-content-table hide"/>').appendTo(content);
|
||||
messageTable = $('<div class="red-ui-debug-content debug-content-table hide"/>').appendTo(content);
|
||||
|
||||
var filterDialog = $('<div class="debug-filter-box hide">'+
|
||||
'<div class="debug-filter-row">'+
|
||||
var filterDialog = $('<div class="red-ui-debug-filter-box hide">'+
|
||||
'<div class="red-ui-debug-filter-row">'+
|
||||
'<span class="button-group">'+
|
||||
'<a class="red-ui-sidebar-header-button-toggle debug-tab-filter-option selected" id="debug-tab-filterAll" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+
|
||||
'<a class="red-ui-sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterSelected" href="#"><span data-i18n="node-red:debug.sidebar.filterSelected"></span></a>'+
|
||||
@@ -66,10 +66,10 @@ RED.debug = (function() {
|
||||
'</div>'+
|
||||
'</div>').appendTo(toolbar);//content);
|
||||
|
||||
// var filterTypeRow = $('<div class="debug-filter-row"></div>').appendTo(filterDialog);
|
||||
// var filterTypeRow = $('<div class="red-ui-debug-filter-row"></div>').appendTo(filterDialog);
|
||||
// $('<select><option>Show all debug nodes</option><option>Show selected debug nodes</option><option>Show current flow only</option></select>').appendTo(filterTypeRow);
|
||||
|
||||
var debugNodeListRow = $('<div class="debug-filter-row hide" id="debug-filter-node-list-row"></div>').appendTo(filterDialog);
|
||||
var debugNodeListRow = $('<div class="red-ui-debug-filter-row hide" id="debug-filter-node-list-row"></div>').appendTo(filterDialog);
|
||||
var flowCheckboxes = {};
|
||||
var debugNodeListHeader = $('<div><span data-i18n="node-red:debug.sidebar.debugNodes"></span><span></span></div>');
|
||||
var headerCheckbox = $('<input type="checkbox">').appendTo(debugNodeListHeader.find("span")[1]).checkboxSet();
|
||||
@@ -118,7 +118,7 @@ RED.debug = (function() {
|
||||
parent: flowCheckboxes[node.z]
|
||||
}).on("change", function(e) {
|
||||
filteredNodes[node.id] = !$(this).prop('checked');
|
||||
$(".debug-message-node-"+node.id.replace(/\./g,"_")).toggleClass('hide',filteredNodes[node.id]);
|
||||
$(".red-ui-debug-msg-node-"+node.id.replace(/\./g,"_")).toggleClass('hide',filteredNodes[node.id]);
|
||||
});
|
||||
if (!node.active || RED.nodes.workspace(node.z).disabled) {
|
||||
container.addClass('disabled');
|
||||
@@ -282,11 +282,11 @@ RED.debug = (function() {
|
||||
activeWorkspace = _activeWorkspace.replace(/\./g,"_");
|
||||
}
|
||||
if (filterType === "filterAll") {
|
||||
$(".debug-message").removeClass("hide");
|
||||
$(".red-ui-debug-msg").removeClass("hide");
|
||||
} else {
|
||||
$(".debug-message").each(function() {
|
||||
$(".red-ui-debug-msg").each(function() {
|
||||
if (filterType === 'filterCurrent') {
|
||||
$(this).toggleClass('hide',!$(this).hasClass('debug-message-flow-'+activeWorkspace));
|
||||
$(this).toggleClass('hide',!$(this).hasClass('red-ui-debug-msg-flow-'+activeWorkspace));
|
||||
} else if (filterType === 'filterSelected') {
|
||||
var id = $(this).data('source');
|
||||
if (id) {
|
||||
@@ -320,7 +320,7 @@ RED.debug = (function() {
|
||||
var msg = m.el;
|
||||
var sourceNode = m.source;
|
||||
if (sourceNode) {
|
||||
var wrapper = $("<div>",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
|
||||
var wrapper = $("<div>",{id:"red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
|
||||
wrapper.append(msg);
|
||||
}
|
||||
});
|
||||
@@ -336,16 +336,16 @@ RED.debug = (function() {
|
||||
function showMessageMenu(button,dbgMessage,sourceId) {
|
||||
activeMenuMessage = dbgMessage;
|
||||
if (!menuOptionMenu) {
|
||||
menuOptionMenu = RED.menu.init({id:"debug-message-option-menu",
|
||||
menuOptionMenu = RED.menu.init({id:"red-ui-debug-msg-option-menu",
|
||||
options: [
|
||||
{id:"debug-message-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
|
||||
{id:"red-ui-debug-msg-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
|
||||
activeMenuMessage.collapse();
|
||||
}},
|
||||
{id:"debug-message-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
|
||||
{id:"red-ui-debug-msg-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
|
||||
activeMenuMessage.clearPinned();
|
||||
}},
|
||||
null,
|
||||
{id:"debug-message-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
|
||||
{id:"red-ui-debug-msg-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
|
||||
var candidateNodes = RED.nodes.filterNodes({type:'debug'});
|
||||
candidateNodes.forEach(function(n) {
|
||||
filteredNodes[n.id] = true;
|
||||
@@ -354,7 +354,7 @@ RED.debug = (function() {
|
||||
$("#debug-tab-filterSelected").trigger("click");
|
||||
refreshMessageList();
|
||||
}},
|
||||
{id:"debug-message-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
|
||||
{id:"red-ui-debug-msg-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
|
||||
$("#debug-tab-filterAll").trigger("click");
|
||||
refreshMessageList();
|
||||
}}
|
||||
@@ -373,8 +373,8 @@ RED.debug = (function() {
|
||||
if (sourceNode && sourceNode.type !== 'debug') {
|
||||
filterOptionDisabled = true;
|
||||
}
|
||||
RED.menu.setDisabled('debug-message-menu-item-filter',filterOptionDisabled);
|
||||
RED.menu.setDisabled('debug-message-menu-item-clear-filter',filterOptionDisabled);
|
||||
RED.menu.setDisabled('red-ui-debug-msg-menu-item-filter',filterOptionDisabled);
|
||||
RED.menu.setDisabled('red-ui-debug-msg-menu-item-clear-filter',filterOptionDisabled);
|
||||
|
||||
var elementPos = button.offset();
|
||||
menuOptionMenu.css({
|
||||
@@ -404,7 +404,7 @@ RED.debug = (function() {
|
||||
var sourceNode = o._source;
|
||||
|
||||
msg.onmouseenter = function() {
|
||||
$(msg).addClass('debug-message-hover');
|
||||
$(msg).addClass('red-ui-debug-msg-hover');
|
||||
if (o._source) {
|
||||
config.messageMouseEnter(o._source.id);
|
||||
if (o._source._alias) {
|
||||
@@ -414,7 +414,7 @@ RED.debug = (function() {
|
||||
|
||||
};
|
||||
msg.onmouseleave = function() {
|
||||
$(msg).removeClass('debug-message-hover');
|
||||
$(msg).removeClass('red-ui-debug-msg-hover');
|
||||
if (o._source) {
|
||||
config.messageMouseLeave(o._source.id);
|
||||
if (o._source._alias) {
|
||||
@@ -427,10 +427,10 @@ RED.debug = (function() {
|
||||
var property = sanitize(o.property?o.property:'');
|
||||
var payload = o.msg;
|
||||
var format = sanitize((o.format||"").toString());
|
||||
msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'')+
|
||||
msg.className = 'red-ui-debug-msg'+(o.level?(' red-ui-debug-msg-level-'+o.level):'')+
|
||||
(sourceNode?(
|
||||
" debug-message-node-"+sourceNode.id.replace(/\./g,"_")+
|
||||
(sourceNode.z?" debug-message-flow-"+sourceNode.z.replace(/\./g,"_"):"")
|
||||
" red-ui-debug-msg-node-"+sourceNode.id.replace(/\./g,"_")+
|
||||
(sourceNode.z?" red-ui-debug-msg-flow-"+sourceNode.z.replace(/\./g,"_"):"")
|
||||
):"");
|
||||
|
||||
if (sourceNode) {
|
||||
@@ -446,22 +446,22 @@ RED.debug = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
var metaRow = $('<div class="debug-message-meta"></div>').appendTo(msg);
|
||||
$('<span class="debug-message-date">'+ getTimestamp()+'</span>').appendTo(metaRow);
|
||||
var metaRow = $('<div class="red-ui-debug-msg-meta"></div>').appendTo(msg);
|
||||
$('<span class="red-ui-debug-msg-date">'+ getTimestamp()+'</span>').appendTo(metaRow);
|
||||
if (sourceNode) {
|
||||
$('<a>',{href:"#",class:"debug-message-name"}).text('node: '+(sourceNode.name||sourceNode.id))
|
||||
$('<a>',{href:"#",class:"red-ui-debug-msg-name"}).text('node: '+(sourceNode.name||sourceNode.id))
|
||||
.appendTo(metaRow)
|
||||
.on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
config.messageSourceClick(sourceNode.id);
|
||||
});
|
||||
} else if (name) {
|
||||
$('<span class="debug-message-name">'+name+'</span>').appendTo(metaRow);
|
||||
$('<span class="red-ui-debug-msg-name">'+name+'</span>').appendTo(metaRow);
|
||||
}
|
||||
|
||||
payload = RED.utils.decodeObject(payload,format);
|
||||
|
||||
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
|
||||
var el = $('<span class="red-ui-debug-msg-payload"></span>').appendTo(msg);
|
||||
var path = o.property||'';
|
||||
var debugMessage = RED.utils.createObjectElement(payload, {
|
||||
key: /*true*/null,
|
||||
@@ -481,17 +481,17 @@ RED.debug = (function() {
|
||||
errorLvl = 30;
|
||||
errorLvlType = 'warn';
|
||||
}
|
||||
$(msg).addClass('debug-message-level-' + errorLvl);
|
||||
$('<span class="debug-message-topic">function : (' + errorLvlType + ')</span>').appendTo(metaRow);
|
||||
$(msg).addClass('red-ui-debug-msg-level-' + errorLvl);
|
||||
$('<span class="red-ui-debug-msg-topic">function : (' + errorLvlType + ')</span>').appendTo(metaRow);
|
||||
} else {
|
||||
var tools = $('<span class="debug-message-tools button-group"></span>').appendTo(metaRow);
|
||||
var tools = $('<span class="red-ui-debug-msg-tools button-group"></span>').appendTo(metaRow);
|
||||
var filterMessage = $('<button class="editor-button editor-button-small"><i class="fa fa-caret-down"></i></button>').appendTo(tools);
|
||||
filterMessage.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
showMessageMenu(filterMessage,debugMessage,sourceNode&&sourceNode.id);
|
||||
});
|
||||
$('<span class="debug-message-topic">'+
|
||||
$('<span class="red-ui-debug-msg-topic">'+
|
||||
(o.topic?topic+' : ':'')+
|
||||
(o.property?'msg.'+property:'msg')+" : "+format+
|
||||
'</span>').appendTo(metaRow);
|
||||
@@ -510,9 +510,9 @@ RED.debug = (function() {
|
||||
messageList.append(msg);
|
||||
} else {
|
||||
if (sourceNode) {
|
||||
var wrapper = $("#debug-message-source-"+sourceNode.id.replace(/\./g,"_"));
|
||||
var wrapper = $("#red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_"));
|
||||
if (wrapper.length === 0 ) {
|
||||
wrapper = $("<div>",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
|
||||
wrapper = $("<div>",{id:"red-ui-debug-msg-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
|
||||
}
|
||||
wrapper.empty();
|
||||
wrapper.append(msg);
|
||||
@@ -531,7 +531,7 @@ RED.debug = (function() {
|
||||
}
|
||||
|
||||
function clearMessageList(clearFilter) {
|
||||
$(".debug-message").remove();
|
||||
$(".red-ui-debug-msg").remove();
|
||||
config.clear();
|
||||
if (!!clearFilter) {
|
||||
clearFilterSettings();
|
||||
|
@@ -17,7 +17,7 @@ $(function() {
|
||||
|
||||
var uiComponents = RED.debug.init(options);
|
||||
|
||||
$(".debug-window").append(uiComponents.content);
|
||||
$(".red-ui-debug-window").append(uiComponents.content);
|
||||
|
||||
window.addEventListener('message',function(evt) {
|
||||
if (evt.data.event === "message") {
|
||||
|
@@ -1,11 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="../../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
<link rel="stylesheet" href="../../red/style.min.css">
|
||||
<link rel="stylesheet" href="../../vendor/font-awesome/css/font-awesome.min.css">
|
||||
<title>Node-RED Debug Tools</title>
|
||||
</head>
|
||||
<body class="debug-window">
|
||||
<body class="red-ui-debug-window">
|
||||
</body>
|
||||
<script src="../../vendor/vendor.js"></script>
|
||||
<script src="../../red/red.min.js"></script>
|
||||
|
Reference in New Issue
Block a user