Skip to content

Commit 6080d2b

Browse files
bkdotcombkdotcom
committed
further work on xdebug "plugin" POC
1 parent 8a53fe8 commit 6080d2b

5 files changed

Lines changed: 324 additions & 146 deletions

File tree

‎src/js/main.js‎

Lines changed: 161 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2311,6 +2311,7 @@
23112311
$container.addClass('bg-danger');
23122312
}
23132313
}
2314+
$container.trigger('endOutput');
23142315
},
23152316
errorNotConsoled: function (logEntry, info) {
23162317
var $container = info.$container;
@@ -2560,27 +2561,25 @@
25602561
}
25612562
$node = buildEntryNode(logEntry);
25622563
$node.attr(attribs);
2563-
if (method === 'error') {
2564-
if (meta.trace && meta.trace.length > 1) {
2565-
$node.append(
2566-
$('<ul>', { class: 'list-unstyled no-indent' }).append(
2567-
methods.trace({
2568-
method: 'trace',
2569-
args: [meta.trace],
2570-
meta: meta
2571-
}).attr('data-detect-files', 'true')
2572-
)
2573-
);
2574-
$node.find('.m_trace').debugEnhance();
2575-
if ($node.is('.error-fatal')) {
2576-
this.endOutput(logEntry, info);
2577-
}
2578-
} else if (meta.context) {
2579-
console.log('context', meta.context);
2580-
$node.append(
2581-
buildContext(meta.context, meta.line)
2582-
);
2564+
if (meta.trace && meta.trace.length > 1) {
2565+
$node.append(
2566+
$('<ul>', { class: 'list-unstyled no-indent' }).append(
2567+
methods.trace({
2568+
method: 'trace',
2569+
args: [meta.trace],
2570+
meta: meta
2571+
}).attr('data-detect-files', 'true')
2572+
)
2573+
);
2574+
$node.find('.m_trace').debugEnhance();
2575+
if ($node.is('.error-fatal')) {
2576+
this.endOutput(logEntry, info);
25832577
}
2578+
} else if (meta.context) {
2579+
console.log('context', meta.context);
2580+
$node.append(
2581+
buildContext(meta.context, meta.line)
2582+
);
25842583
}
25852584
return $node
25862585
}
@@ -2881,25 +2880,13 @@
28812880
$node.attr('data-detect-files', meta.detectFiles);
28822881
$node.attr('data-found-files', meta.foundFiles ? meta.foundFiles : []);
28832882
}
2883+
$node.closest('.m_group.empty').removeClass('empty').trigger('updated.debug.group');
28842884
if ($node.is(':visible:not(.filter-hidden)')) {
28852885
$node.debugEnhance();
28862886
}
2887-
$node.closest('.m_group').removeClass('empty');
28882887
} catch (err) {
28892888
console.warn('Logger.processEntry error', err);
28902889
console.log('logEntry', logEntry);
2891-
/*
2892-
processEntry({
2893-
method: 'error',
2894-
args: [
2895-
'%cDebugWampClient: %cerror processing %c' + method + '()',
2896-
'font-weight:bold;',
2897-
'',
2898-
'font-family:monospace;'
2899-
],
2900-
meta: meta
2901-
})
2902-
*/
29032890
}
29042891
}
29052892

@@ -3214,28 +3201,55 @@
32143201

32153202
function Xdebug(pubSub) {
32163203
var self = this;
3217-
console.warn('Xdebug init');
3204+
var $root = $('#debug-cards');
32183205
this.pubSub = pubSub;
3219-
$('body').on('click', '.xdebug-commands .btn[data-cmd]', function () {
3206+
this.contextMsgReceived = null;
3207+
this.contextTimer = null;
3208+
$root.on('click', '.xdebug-commands .btn[data-cmd]', function () {
32203209
var cmd = $(this).data('cmd');
3221-
console.warn('clicked', cmd);
3222-
self.pubSub.publish('wamp', 'publish', 'bdk.debug.xdebug', [cmd]);
3210+
var appId = $(this).closest('.card-body').find('.xdebug').data('appId');
32233211
$(this).blur();
3212+
self.sendCmd(appId, cmd);
32243213
});
3225-
$('body').on('shown.bs.collapse', '.card-body', function (e) {
3214+
$root.on('click', '.xdebug-menu-bar .btn[data-target]', function () {
3215+
var $node = $(this).closest('.card-body').find($(this).data('target'));
3216+
$(this).blur();
3217+
self.scrollIntoView($node);
3218+
});
3219+
$root.on('expanded.debug.array expanded.debug.object', '.max-depth', function (e) {
3220+
var appId = $(this).closest('.card-body').find('.xdebug').data('appId');
3221+
// console.log('xdebug expanded .max-depth', this)
3222+
$(this).find('.array-inner, .object-inner').html(
3223+
'<i class="fa fa-spinner fa-pulse fa-lg"></i>'
3224+
);
3225+
self.sendCmd(
3226+
appId,
3227+
'property_get',
3228+
{
3229+
n: $(this).data('fullname')
3230+
}
3231+
);
3232+
});
3233+
$root.on('shown.bs.collapse', '.card-body', function (e) {
32263234
var $menuBar = $(this).find('.xdebug-menu-bar');
32273235
self.positionToolbar($menuBar);
32283236
});
3237+
$root.on('endOutput', '.card', function (e) {
3238+
self.remove(this);
3239+
});
32293240
}
32303241

3242+
Xdebug.prototype.sendCmd = function (appId, cmd, args, data) {
3243+
this.pubSub.publish(
3244+
'wamp',
3245+
'publish',
3246+
'bdk.debug.xdebug',
3247+
[appId, cmd, args, data]
3248+
);
3249+
};
3250+
32313251
Xdebug.prototype.positionToolbar = function($menuBar) {
3232-
console.warn('positionToolbar', $menuBar);
32333252
var $card = $menuBar.closest('.card');
3234-
console.warn({
3235-
navbarHeight: $('nav.navbar').outerHeight(),
3236-
cardHeaderOuterHeight: $card.find('> .card-header').outerHeight(),
3237-
debugMenuBarOuterHeight: $card.find('> .card-body > .debug-menu-bar').outerHeight()
3238-
});
32393253
$menuBar.css('top',
32403254
(
32413255
$('nav.navbar').outerHeight() +
@@ -3246,39 +3260,89 @@
32463260
};
32473261

32483262
Xdebug.prototype.processEntry = function (logEntry) {
3249-
console.log('Xdebug.processEntry', JSON.parse(JSON.stringify(logEntry)));
3250-
var info = this.getNodeInfo();
32513263
var method = logEntry.method;
32523264
var meta = logEntry.meta;
3265+
var nodeInfo = this.getNodeInfo(meta.appId);
32533266
var $node;
3267+
var $node2;
3268+
var self = this;
3269+
// console.log('Xdebug.processEntry', JSON.parse(JSON.stringify(logEntry)))
32543270
try {
3255-
if (methods[method]) {
3256-
$node = methods[method](logEntry, info);
3257-
} else {
3258-
$node = methods.default(logEntry, info);
3259-
}
3271+
if (meta.status === 'break') {
3272+
// console.info('received break')
3273+
this.contextMsgReceived = null;
3274+
this.contextTimer = setTimeout(function () {
3275+
if (self.contextMsgReceived === null) {
3276+
// console.warn('received break status, but no context')
3277+
// get globals
3278+
self.sendCmd(
3279+
meta.appId,
3280+
'context_get',
3281+
{ c: 1 }
3282+
);
3283+
// get local
3284+
self.sendCmd(
3285+
meta.appId,
3286+
'context_get',
3287+
{ c: 0 }
3288+
);
3289+
}
3290+
}, 250);
3291+
} else if (meta.command === 'context_get') {
3292+
this.contextMsgReceived = logEntry;
3293+
clearTimeout(self.contextTimer);
3294+
}
3295+
if (method === 'xdebug') {
3296+
// if (meta.status === 'stopping') {
3297+
// }
3298+
if (['property_get', 'property_value'].indexOf(meta.command) > -1) {
3299+
$node = methods.default(logEntry, nodeInfo).find('> *'); // array = span, object = div
3300+
// find open .max-depth where data-fullname = meta.fullname
3301+
$node2 = nodeInfo.$node.find('.max-depth.expanded').filter(function (i, nodeTemp) {
3302+
return $(nodeTemp).data('fullname') === meta.fullname
3303+
});
3304+
$node2.replaceWith($node);
3305+
$node.debugEnhance().debugEnhance('expand');
3306+
}
3307+
return
3308+
}
3309+
$node = methods[method]
3310+
? methods[method](logEntry, nodeInfo)
3311+
: methods.default(logEntry, nodeInfo);
32603312
if (!$node) {
32613313
return
32623314
}
3315+
if (meta.status === 'break') {
3316+
nodeInfo.$node.html('<li class="m_info" style="display:block; margin: 8px -10px; border-bottom: solid 1px; font-weight:bold;">Xdebug</li>');
3317+
self.scrollIntoView(nodeInfo.$node);
3318+
}
32633319
if (meta.detectFiles) {
32643320
// using attr so can find via css selector
32653321
$node.attr('data-detect-files', meta.detectFiles);
32663322
$node.attr('data-found-files', meta.foundFiles ? meta.foundFiles : []);
32673323
}
3268-
info.$node.append($node);
3324+
nodeInfo.$node.append($node);
3325+
$node.debugEnhance();
32693326
} catch (err) {
3270-
console.warn('Xdebug.processEntry error', err);
3271-
console.log('logEntry', logEntry);
3327+
console.warn('Xdebug.processEntry error', err, logEntry);
32723328
}
32733329
};
32743330

3275-
Xdebug.prototype.getNodeInfo = function () {
3331+
Xdebug.prototype.getNodeInfo = function (appId) {
32763332
var id = 'xdebug';
32773333
// var $container = $('#' + id)
32783334
var $container = $('#debug-cards .card.working').filter(function () {
3279-
var data = $(this).data();
3280-
console.warn('data', data);
3281-
return true
3335+
var dataCard = $(this).data() || {};
3336+
var dataXdebug = $(this).find('.xdebug').data() || {};
3337+
if (dataXdebug.appId === appId) {
3338+
// xdebug appId match
3339+
return true
3340+
}
3341+
if (dataCard.meta.processId == appId) {
3342+
// card processId match
3343+
return true
3344+
}
3345+
return false
32823346
}).last();
32833347
var info = {};
32843348
var channelNameRoot = 'general';
@@ -3328,34 +3392,59 @@
33283392
if ($xdebug.length === 0) {
33293393
$menuBar = $('' +
33303394
'<header class="debug-bar xdebug-menu-bar">' +
3331-
'<div class="btn-group xdebug-commands" role="group" aria-label="Xdebug Commands">' +
3332-
'<button type="button" class="btn btn-secondary" data-cmd="run" title="Run"><i class="fa fa-play"></i></button>' +
3333-
'<button type="button" class="btn btn-secondary" data-cmd="step_into" title="Step Into"><img src="?action=img&amp;src=icon/step_into.svg" style="width:18px; height:18px;" /></button>' +
3334-
'<button type="button" class="btn btn-secondary" data-cmd="step_over" title="Step Over"><img src="?action=img&amp;src=icon/step_over.svg" style="width:18px; height:18px;" /></button>' +
3335-
'<button type="button" class="btn btn-secondary" data-cmd="step_out" title="Step Out"><img src="?action=img&amp;src=icon/step_out.svg" style="width:18px; height:18px;" /></button>' +
3336-
'<button type="button" class="btn btn-secondary" data-cmd="stop" title="Stop Script"><i class="fa fa-stop"></i></button>' +
3337-
'<button type="button" class="btn btn-secondary" data-cmd="detatch" title="Stop Debugging"><i class="fa fa-sign-out"></i></button>' +
3338-
'</div>' +
3395+
'<div class="btn-toolbar" role="toolbar" aria-label="Xdebug">' +
3396+
'<div class="btn-group xdebug-commands mr-2" role="group" aria-label="Xdebug Commands">' +
3397+
'<button type="button" class="btn btn-secondary" data-cmd="run" title="Run"><i class="fa fa-play"></i></button>' +
3398+
'<button type="button" class="btn btn-secondary" data-cmd="step_into" title="Step Into"><img src="?action=img&amp;src=icon/step_into.svg" style="width:18px; height:18px;" /></button>' +
3399+
'<button type="button" class="btn btn-secondary" data-cmd="step_over" title="Step Over"><img src="?action=img&amp;src=icon/step_over.svg" style="width:18px; height:18px;" /></button>' +
3400+
'<button type="button" class="btn btn-secondary" data-cmd="step_out" title="Step Out"><img src="?action=img&amp;src=icon/step_out.svg" style="width:18px; height:18px;" /></button>' +
3401+
'<button type="button" class="btn btn-secondary" data-cmd="stop" title="Stop Script"><i class="fa fa-stop"></i></button>' +
3402+
'<button type="button" class="btn btn-secondary" data-cmd="detatch" title="Stop Debugging"><i class="fa fa-sign-out"></i></button>' +
3403+
'</div>' +
3404+
'<div class="btn-group" role="group">' +
3405+
'<button type="button" class="btn btn-secondary" data-target=".xdebug" title="Jump to Xdebug Info"><i class="fa fa-link"></i></button>' +
3406+
'</div>' +
3407+
'</div>' +
33393408
'</header>'
33403409
);
33413410
$xdebug = $('<ul class="xdebug group-body"></ul>');
3411+
$xdebug.data('appId', appId);
33423412
$container.find('.debug > header').after($menuBar);
33433413
$container.find('.tab-primary .tab-body').append($xdebug);
33443414
this.positionToolbar($menuBar);
33453415
}
33463416

33473417
info = {
33483418
$container: $container,
3349-
$node: $xdebug
3350-
// $tabPane: null,
3351-
// channelName: channelName,
3352-
// channelNameRoot: channelNameRoot,
3353-
// channelNameTop: channelSplit.shift(), // ie channelName of tab
3354-
// channels: []
3419+
$node: $xdebug,
3420+
$toolbar: $container.find('.xdebug-menu-bar')
33553421
};
33563422
return info
33573423
};
33583424

3425+
Xdebug.prototype.remove = function ($container) {
3426+
$container = $($container);
3427+
$container.find('.xdebug-menu-bar').remove();
3428+
$container.find('.xdebug.group-body').remove();
3429+
};
3430+
3431+
Xdebug.prototype.scrollIntoView = function (node) {
3432+
var toolbarBottom = $(node).closest('.card-body').find('.xdebug-menu-bar')[0].getBoundingClientRect().bottom;
3433+
var nodePos;
3434+
var adjustY;
3435+
node = $(node)[0];
3436+
nodePos = node.getBoundingClientRect();
3437+
adjustY = nodePos.top - toolbarBottom;
3438+
/*
3439+
console.warn('scrollIntoView', {
3440+
toolbarBottom: toolbarBottom,
3441+
nodePosTop: nodePos.top,
3442+
adjustY: adjustY
3443+
})
3444+
*/
3445+
window.scrollBy(0, adjustY);
3446+
};
3447+
33593448
function nameToClassname$1 (name) {
33603449
return 'debug-tab-' + name.toLowerCase().replace(/\W+/g, '-')
33613450
}

‎src/js/main.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js_src/Logger/Logger.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,25 +61,13 @@ export function processEntry (logEntry) {
6161
$node.attr('data-detect-files', meta.detectFiles)
6262
$node.attr('data-found-files', meta.foundFiles ? meta.foundFiles : [])
6363
}
64+
$node.closest('.m_group.empty').removeClass('empty').trigger('updated.debug.group')
6465
if ($node.is(':visible:not(.filter-hidden)')) {
6566
$node.debugEnhance()
6667
}
67-
$node.closest('.m_group').removeClass('empty')
6868
} catch (err) {
6969
console.warn('Logger.processEntry error', err)
7070
console.log('logEntry', logEntry)
71-
/*
72-
processEntry({
73-
method: 'error',
74-
args: [
75-
'%cDebugWampClient: %cerror processing %c' + method + '()',
76-
'font-weight:bold;',
77-
'',
78-
'font-family:monospace;'
79-
],
80-
meta: meta
81-
})
82-
*/
8371
}
8472
}
8573

0 commit comments

Comments
 (0)