Skip to content

Commit 80746de

Browse files
yanaminkovayanaminkova
authored
feat: fired events section added (#276)
Fired events section is added in the Events tab.
1 parent 68518b7 commit 80746de

File tree

5 files changed

+372
-75
lines changed

5 files changed

+372
-75
lines changed

‎app/scripts/devtools/panel/ui5/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,17 @@
182182
data: event.data,
183183
frameId: framesSelect.getSelectedId()
184184
});
185+
},
186+
/**
187+
* Method fired when Clear fired events button is clicked.
188+
* @param {Object} changeData
189+
*/
190+
onClearEvents(changeData) {
191+
port.postMessage({
192+
action: 'do-control-clear-events',
193+
target: changeData.controlId,
194+
tabId: chrome.devtools.inspectedWindow.tabId
195+
});
185196
}
186197
}, sharedDataViewOptions));
187198

@@ -512,6 +523,18 @@
512523
}
513524
},
514525

526+
/**
527+
* Event update handler.
528+
* @param {Object} message
529+
*/
530+
531+
'on-event-update': function (message, messageSender) {
532+
var frameId = messageSender.frameId;
533+
if (framesSelect.getSelectedId() === frameId) {
534+
controlEvents.setData(message.controlEvents);
535+
}
536+
},
537+
515538
/**
516539
* Handler for ControlTree element selecting.
517540
* @param {Object} message

‎app/scripts/injected/main.js‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -131,18 +131,42 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
131131
*/
132132
'do-control-select': function (event) {
133133
var controlId = event.detail.target;
134-
var controlProperties = ToolsAPI.getControlProperties(controlId);
135-
var controlBindings = ToolsAPI.getControlBindings(controlId);
136-
var controlAggregations = ToolsAPI.getControlAggregations(controlId);
134+
var control = controlUtils.getElementById(controlId);
135+
136+
if (ToolsAPI._lastSelectedControl !== control) {
137+
ToolsAPI.removeEventListeners(ToolsAPI._lastSelectedControl);
138+
ToolsAPI._lastSelectedControl = control;
139+
ToolsAPI.attachEventListeners(control);
140+
}
141+
142+
if (control) {
143+
var controlProperties = ToolsAPI.getControlProperties(controlId);
144+
var controlBindings = ToolsAPI.getControlBindings(controlId);
145+
var controlAggregations = ToolsAPI.getControlAggregations(controlId);
146+
var controlEvents = ToolsAPI.getControlEvents(controlId);
147+
148+
message.send({
149+
action: 'on-control-select',
150+
controlProperties: controlUtils.getControlPropertiesFormattedForDataView(controlId, controlProperties),
151+
controlBindings: controlUtils.getControlBindingsFormattedForDataView(controlBindings),
152+
controlAggregations: controlUtils.getControlAggregationsFormattedForDataView(controlId, controlAggregations),
153+
controlEvents: controlUtils.getControlEventsFormattedForDataView(controlId, controlEvents),
154+
controlActions: controlUtils.getControlActionsFormattedForDataView(controlId)
155+
});
156+
}
157+
},
158+
159+
/**
160+
* Updates the fired events section.
161+
* @param {Object} event
162+
*/
163+
'do-event-fired': function (event) {
164+
var controlId = event.detail.controlId;
137165
var controlEvents = ToolsAPI.getControlEvents(controlId);
138166

139167
message.send({
140-
action: 'on-control-select',
141-
controlProperties: controlUtils.getControlPropertiesFormattedForDataView(controlId, controlProperties),
142-
controlBindings: controlUtils.getControlBindingsFormattedForDataView(controlBindings),
143-
controlAggregations: controlUtils.getControlAggregationsFormattedForDataView(controlId, controlAggregations),
144-
controlEvents: controlUtils.getControlEventsFormattedForDataView(controlId, controlEvents),
145-
controlActions: controlUtils.getControlActionsFormattedForDataView(controlId)
168+
action: 'on-event-update',
169+
controlEvents: controlUtils.getControlEventsFormattedForDataView(controlId, controlEvents)
146170
});
147171
},
148172

@@ -296,7 +320,26 @@ sap.ui.require(['ToolsAPI'], function (ToolsAPI) {
296320
selectedElement = document.getElementById(elementID);
297321
log('\n' + '%cCopy HTML ⬇️', 'color:#12b1eb; font-size:12px');
298322
console.log(selectedElement);
323+
324+
},
325+
326+
/**
327+
* Clears the logged fired events.
328+
* @param {Object} event
329+
*/
330+
'do-control-clear-events': function (event) {
331+
var controlId = event.detail.target;
332+
var clearedEvents = ToolsAPI.clearEvents(controlId);
333+
334+
if (clearedEvents) {
335+
message.send({
336+
action: 'on-event-update',
337+
controlEvents: controlUtils.getControlEventsFormattedForDataView(controlId, clearedEvents),
338+
});
339+
}
340+
299341
},
342+
300343
/**
301344
* Handler to copy the element into a temp variable on the console
302345
* @param {Object} event

‎app/scripts/modules/injected/controlUtils.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,19 @@ var controlEvents = (function () {
581581
evts[key] = _formatEventValues(key, evts[key].paramsType, listenerConfig);
582582
}
583583

584+
// Format fired events
585+
if (events.fired && Array.isArray(events.fired)) {
586+
events.fired = _assembleDataToView({
587+
title: 'Fired Events',
588+
data: events.fired.map(function (eventDetails) {
589+
return _assembleDataToView({
590+
title: eventDetails,
591+
expandable: false,
592+
});
593+
})
594+
});
595+
}
596+
584597
events[OWN] = _assembleDataToView({
585598
controlId: controlId,
586599
expandable: false,

‎app/scripts/modules/ui/DataView.js‎

Lines changed: 111 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,13 @@ function DataView(target, options) {
6666
this.onCopyControlHTMLToConsole = function (target) {
6767
};
6868

69+
/**
70+
* Method fired when the Clear button is clicked.
71+
* @param {Object} target
72+
*/
73+
this.onClearEvents = function (target) {
74+
};
75+
6976
/**
7077
* Method fired when the Invalidate button is clicked.
7178
* @param {Object} target - target control to be invalidated
@@ -87,6 +94,7 @@ function DataView(target, options) {
8794
this.onControlFocused = options.onControlFocused || this.onControlFocused;
8895
this.onCopyControlToConsole = options.onCopyControlToConsole || this.onCopyControlToConsole;
8996
this.onCopyControlHTMLToConsole = options.onCopyControlHTMLToConsole || this.onCopyControlHTMLToConsole;
97+
this.onClearEvents = options.onClearEvents || this.onClearEvents;
9098

9199
this.onValueClick = options.onValueClick || this.onValueClick;
92100

@@ -326,12 +334,12 @@ DataView.prototype._generateHTML = function () {
326334

327335
if (key === 'actions' && currentObject.data && currentObject.data.length) {
328336
for (var action = 0; action < currentObject.data.length; action++) {
329-
var currentAction = currentObject.data[action];
330-
var disclaimer = currentAction === 'Focus' ? 'When focusing an element, to see the visual focus, you need to close the DevTools panel.' : '';
331-
html += DVHelper.addDisclaimer(disclaimer);
332-
html += this._addSectionTitle({options: {title: currentAction + ' control'}},
333-
DVHelper.addToolsButtons(viewObjects.own ? viewObjects.own.options : {}, currentAction));
334-
}
337+
var currentAction = currentObject.data[action];
338+
var disclaimer = currentAction === 'Focus' ? 'When focusing an element, to see the visual focus, you need to close the DevTools panel.' : '';
339+
html += DVHelper.addDisclaimer(disclaimer);
340+
html += this._addSectionTitle({options: {title: currentAction + ' control'}},
341+
DVHelper.addToolsButtons(viewObjects.own ? viewObjects.own.options : {}, currentAction));
342+
}
335343
break;
336344
}
337345

@@ -341,7 +349,25 @@ DataView.prototype._generateHTML = function () {
341349
continue;
342350
}
343351

344-
html += this._addSectionTitle(currentObject, this._generateHTMLSection(currentObject));
352+
html += this._addSectionTitle(currentObject, this._generateHTMLSection(currentObject));
353+
354+
// Check if there are fired events and display Clear button
355+
if (key === 'fired') {
356+
var clearButton = '<button class="tools-button clear-events-btn" id="control-clear">Clear Events</button>';
357+
358+
html += this._addSectionTitle(
359+
{
360+
options: {
361+
title: 'Clear Fired Events',
362+
controlId: 'clear-events' // Add a control ID
363+
}
364+
},
365+
DVHelper.addToolsButtons(
366+
viewObjects.own ? viewObjects.own.options : { controlId: 'clear-events' },
367+
'Clear'
368+
)
369+
);
370+
}
345371
}
346372

347373
this._DataViewContainer.innerHTML = html;
@@ -386,6 +412,70 @@ DataView.prototype._isEditableValue = function (element) {
386412
return element.nodeName === 'VALUE' && element.contentEditable === 'true';
387413
};
388414

415+
// ===== Helper Methods =====
416+
// These methods help to break down the complexity
417+
418+
DataView.prototype._handleEditableValue = function(targetElement) {
419+
if (this._isEditableValue(targetElement)) {
420+
this._onBlurHandler(targetElement);
421+
DVHelper.selectEditableContent(targetElement, this._selectValue);
422+
this._selectValue = false;
423+
}
424+
};
425+
426+
DataView.prototype._handleClickableValue = function(targetElement, event) {
427+
if (targetElement.nodeName === 'CLICKABLE-VALUE') {
428+
var attributes = event.target.attributes;
429+
var key = attributes.key.value;
430+
var parent = attributes.parent.value;
431+
var currData = this.getData();
432+
var eventData;
433+
434+
if (currData[parent]) {
435+
eventData = DVHelper.getObjectProperty(currData[parent].data, key).eventData;
436+
} else {
437+
eventData = DVHelper.getObjectProperty(currData, parent + key).eventData;
438+
}
439+
440+
this.onValueClick({
441+
target: key,
442+
data: eventData
443+
});
444+
}
445+
};
446+
447+
DataView.prototype._handleSelectElement = function(targetElement) {
448+
if (targetElement.nodeName === 'SELECT') {
449+
this._onChangeHandler(targetElement);
450+
}
451+
};
452+
453+
DataView.prototype._handleInputElement = function(targetElement) {
454+
if (targetElement.nodeName === 'INPUT') {
455+
this._onCheckBoxHandler(targetElement);
456+
}
457+
};
458+
459+
DataView.prototype._handleButtonClick = function(targetElement) {
460+
if (targetElement.nodeName === 'BUTTON') {
461+
switch (targetElement.id) {
462+
case 'control-invalidate': this._onInvalidateElement(targetElement); break;
463+
case 'control-focus': this._onFocusElement(targetElement); break;
464+
case 'control-copy to console': this._onCopyElementToConsole(targetElement); break;
465+
case 'control-copy html to console': this._onCopyElementHTMLToConsole(targetElement); break;
466+
case 'control-clear': this._onClearEvents(targetElement); break;
467+
}
468+
}
469+
};
470+
471+
DataView.prototype._handleControlIdSpan = function(targetElement) {
472+
if (targetElement.nodeName === 'SPAN' && targetElement.classList.contains('controlId')) {
473+
this._onCopyElementToConsole(targetElement);
474+
}
475+
};
476+
477+
// ===== End of Helper Methods =====
478+
389479
/**
390480
* Mouse click event handler for the editable values.
391481
* @private
@@ -407,53 +497,12 @@ DataView.prototype._onClickHandler = function () {
407497

408498
DVHelper.toggleCollapse(target);
409499

410-
if (that._isEditableValue(targetElement)) {
411-
that._onBlurHandler(targetElement);
412-
DVHelper.selectEditableContent(targetElement, that._selectValue);
413-
that._selectValue = false;
414-
}
415-
416-
if (targetElement.nodeName === 'CLICKABLE-VALUE') {
417-
var attributes = event.target.attributes;
418-
var key = attributes.key.value;
419-
var parent = attributes.parent.value;
420-
var currData = that.getData();
421-
var eventData;
422-
423-
if (currData[parent]) {
424-
eventData = DVHelper.getObjectProperty(currData[parent].data, key).eventData;
425-
} else {
426-
// In case of event listeners
427-
eventData = DVHelper.getObjectProperty(currData, parent + key).eventData;
428-
}
429-
430-
that.onValueClick({
431-
target: key,
432-
data: eventData
433-
});
434-
}
435-
436-
if (targetElement.nodeName === 'SELECT') {
437-
that._onChangeHandler(targetElement);
438-
}
439-
440-
if (targetElement.nodeName === 'INPUT') {
441-
that._onCheckBoxHandler(targetElement);
442-
}
443-
444-
if (targetElement.nodeName === 'BUTTON') {
445-
switch (targetElement.id) {
446-
case 'control-invalidate' : that._onInvalidateElement(targetElement); break;
447-
case 'control-focus' : that._onFocusElement(targetElement); break;
448-
case 'control-copy to console' : that._onCopyElementToConsole(targetElement); break;
449-
case 'control-copy html to console' : that._onCopyElementHTMLToConsole(targetElement); break;
450-
}
451-
}
452-
453-
if (targetElement.nodeName === 'SPAN' && targetElement.classList.contains('controlId')) {
454-
that._onCopyElementToConsole(targetElement);
455-
}
456-
500+
that._handleEditableValue(targetElement);
501+
that._handleClickableValue(targetElement, event);
502+
that._handleSelectElement(targetElement);
503+
that._handleInputElement(targetElement);
504+
that._handleButtonClick(targetElement);
505+
that._handleControlIdSpan(targetElement);
457506
};
458507
};
459508

@@ -522,6 +571,14 @@ DataView.prototype._onCopyElementHTMLToConsole = function (target) {
522571

523572
};
524573

574+
DataView.prototype._onClearEvents = function (target) {
575+
var controlId = this._data.own.options.controlId;
576+
577+
this.onClearEvents({
578+
controlId: controlId
579+
});
580+
};
581+
525582
/**
526583
* Blur event handler for the editable values.
527584
* @param {element} target - HTML DOM element

0 commit comments

Comments
 (0)