Namespace CSS for Debug, Keyboard, Clipboard, Settings

This commit is contained in:
Nick O'Leary
2019-05-02 22:33:29 +01:00
parent 0e02e21967
commit ad77565508
22 changed files with 533 additions and 549 deletions

View File

@@ -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();

View File

@@ -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") {

View File

@@ -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>