blob: 6882334638b3abb812bfd20334ff82e5a1bedb72 [file] [log] [blame]
/**
* @implements {SDK.TargetManager.Observer}
* @unrestricted
*/
export default class CobaltPanel extends UI.VBox {
constructor() {
const trace_files = [
['Trace', 'console_trace.json'],
['Timed Trace', 'timed_trace.json']
];
const timed_trace_durations = ['5', '10', '20', '60'];
super(true, false);
SDK.targetManager.observeTargets(this);
this._target = UI.context.flavor(SDK.Target);
this._runtimeAgent = this._target.runtimeAgent();
this._cobaltAgent = this._target.cobaltAgent();
this.element = this._shadowRoot.createChild('div');
this.element.textContent = 'Cobalt Console';
let download_element = this._shadowRoot.createChild('a', 'download');
download_element.style.display = 'none';
const traceContainer = this.element.createChild('div', 'trace-container');
traceContainer.appendChild(UI.createTextButton(Common.UIString('Start Trace'), event => {
console.log("Start Trace");
const filename = trace_files[0][1];
this.run(`(function() { window.h5vcc.traceEvent.start('${filename}');})()`);
console.log("Started Trace");
}));
traceContainer.appendChild(UI.createTextButton(Common.UIString('Stop Trace'), event => {
console.log("Stop Trace");
this.run(`(function() { window.h5vcc.traceEvent.stop();})()`);
console.log("Stopped Trace");
}));
traceContainer.appendChild(UI.createLabel('Navigate Timed Trace:'));
timed_trace_durations.forEach((duration) => {
traceContainer.appendChild(UI.createTextButton(Common.UIString(duration + 's'), event => {
console.log("Request Navigate Timed Trace. " + duration);
this._cobaltAgent.invoke_sendConsoleCommand({
command: 'navigate_timed_trace', message: duration
});
console.log("Requested Navigate Timed Trace.");
}));
});
trace_files.forEach((file) => {
traceContainer.appendChild(UI.createTextButton(Common.UIString('Download ' + file[0]), event => {
console.log("Download Trace");
const filename = file[1];
this.run(`(function() { return window.h5vcc.traceEvent.read('${filename}');})()`).then(function (result) {
download_element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(result.result.value));
download_element.setAttribute('download', filename);
console.log("Downloaded Trace");
download_element.click();
download_element.setAttribute('href', undefined);
});
}));
});
const netLogContainer = this.element.createChild('div', 'netlog-container');
netLogContainer.appendChild(UI.createTextButton(Common.UIString('Start NetLog'), event => {
console.log("Start NetLog");
this.run(`(function() { window.h5vcc.netLog.start();})()`);
console.log("Started NetLog");
}));
netLogContainer.appendChild(UI.createTextButton(Common.UIString('Stop NetLog'), event => {
console.log("Stop NetLog");
this.run(`(function() { window.h5vcc.netLog.stop();})()`);
console.log("Stopped NetLog");
}));
netLogContainer.appendChild(UI.createTextButton(Common.UIString('Download NetLog'), event => {
console.log("Download Trace");
this.run(`(function() { return window.h5vcc.netLog.stopAndRead();})()`).then(function (result) {
const netlog_file = 'net_log.json';
download_element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(result.result.value));
download_element.setAttribute('download', netlog_file);
console.log("Downloaded NetLog");
download_element.click();
download_element.setAttribute('href', undefined);
});
}));
const debugLogContainer = this.element.createChild('div', 'debug-log-container');
debugLogContainer.appendChild(UI.createTextButton(Common.UIString('DebugLog On'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({
command: 'debug_log', message: 'on'
});
}));
debugLogContainer.appendChild(UI.createTextButton(Common.UIString('DebugLog Off'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({
command: 'debug_log', message: 'off'
});
}));
const lifecycleContainer = this.element.createChild('div', 'lifecycle-container');
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Blur'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'blur' });
}));
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Focus'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'focus' });
}));
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Conceal'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'conceal' });
}));
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Freeze'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'freeze' });
}));
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Reveal'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'reveal' });
}));
lifecycleContainer.appendChild(UI.createTextButton(Common.UIString('Quit'), event => {
this._cobaltAgent.invoke_sendConsoleCommand({ command: 'quit' });
}));
const consoleContainer = this.element.createChild('div', 'console-container');
consoleContainer.appendChild(UI.createLabel('Debug Command:'));
var commandInput = consoleContainer.appendChild(UI.createInput('debug-command', 'text'));
commandInput.addEventListener("keypress", event => {
if (event.key === "Enter") {
event.preventDefault();
const consoleResponse = document.getElementsByClassName('console-response')[0];
const command = document.getElementsByClassName('debug-command')[0].value;
if (command.length == 0) {
const result = this._cobaltAgent.invoke_getConsoleCommands().then(result => {
consoleResponse.innerHTML = JSON.stringify(result.commands, undefined, 2);
});
} else {
const result = this._cobaltAgent.invoke_sendConsoleCommand({
command: command,
message: document.getElementsByClassName('debug-message')[0].value
}).then(result => {
consoleResponse.innerHTML = result;
});
}
}
});
consoleContainer.appendChild(UI.createLabel('Message:'));
consoleContainer.appendChild(UI.createInput('debug-message', 'text'));
consoleContainer.appendChild(UI.createTextButton(Common.UIString('Download Response'), event => {
const command = document.getElementsByClassName('debug-command')[0].value;
const filename = "commmand_" + command + '.txt';
download_element.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(document.getElementsByClassName("console-response")[0].value));
download_element.setAttribute('download', filename);
download_element.click();
download_element.setAttribute('href', undefined);
}));
const textAreaContainer = consoleContainer.createChild('div');
textAreaContainer.setAttribute("style", "display: flex; flex-direction:column;");
textAreaContainer.setAttribute("width", "100%");
textAreaContainer.setAttribute("height", "100%");
const consoleResponse = textAreaContainer.createChild('textarea', 'console-response');
consoleResponse.setAttribute("style", "margin: 0;");
consoleResponse.setAttribute("rows", "25");
consoleResponse.setAttribute("wrap", "off");
}
async run(expression) {
return await this._runtimeAgent.invoke_evaluate({ expression, returnByValue: true });
}
/**
* @override
*/
focus() {
}
/**
* @override
*/
wasShown() {
super.wasShown();
if (this._model) {
this._model.enable();
}
}
/**
* @override
*/
willHide() {
if (this._model) {
this._model.disable();
}
super.willHide();
}
/**
* @override
* @param {!SDK.Target} target
*/
targetAdded(target) {
if (this._model) {
return;
}
if (!this._model) {
return;
}
}
/**
* @override
* @param {!SDK.Target} target
*/
targetRemoved(target) {
if (!this._model || this._model.target() !== target) {
return;
}
}
}
/* Legacy exported object */
self.Cobalt = self.Cobalt || {};
/**
* @constructor
*/
self.Cobalt.CobaltPanel = CobaltPanel;