Set Devtools Protocol event listener in DevTools-on-DevTools - google-chrome-devtools

In DevTools-on-DevTools it's possible to run DevTools protocol commands like this:
let Main = await import('./devtools-frontend/front_end/entrypoints/main/main.js');
await Main.MainImpl.sendOverProtocol('Network.enable');
(https://chromedevtools.github.io/devtools-protocol/#monitor)
In a Chrome extension it's possible to listen to the protocol events like this: chrome.debugger.onEvent.addListener(eventHandler);
Is there a similar way to attach a custom function to the protocol events in DevTools-on-DevTools?

Judging by the source code, there are onMessageSent and onMessageReceived hooks:
(await import('./devtools-frontend/front_end/core/protocol_client/protocol_client.js'))
.InspectorBackend.test.onMessageSent = (msg, target) => { /* do something */ }

Related

Listen to keyboard input in the whole Blazor page

I'm trying to implement a Blazor app that listens to keyboard input all the time (some kind of full screen game, let's say).
I can think of a key down event listener as a possible implementation for it, since there's not really an input field to auto-focus on.
Is there a better solution to just react to key-presses in any part of the screen?
In case that's the chosen one, how can I add an event listener from a client-side Blazor app? I've failed trying to do so by having a script like this:
EDIT: I modified a little bit the code below to actually make it work after fixing the original, key mistake that I was asking about.
scripts/event-listener.js
window.JsFunctions = {
addKeyboardListenerEvent: function (foo) {
let serializeEvent = function (e) {
if (e) {
return {
key: e.key,
code: e.keyCode.toString(),
location: e.location,
repeat: e.repeat,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey,
type: e.type
};
}
};
// window.document.addEventListener('onkeydown', function (e) { // Original error
window.document.addEventListener('keydown', function (e) {
DotNet.invokeMethodAsync('Numble', 'JsKeyDown', serializeEvent(e))
});
}
};
index.html
<head>
<!-- -->
<script src="scripts/event-listener.js"></script>
</head>
Invoking it through:
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("JsFunctions.addKeyboardListenerEvent");
}
and having the following method trying to receive the events:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
namespace Numble;
public static class InteropKeyPress
{
[JSInvokable]
public static Task JsKeyDown(KeyboardEventArgs e)
{
Console.WriteLine("***********************************************");
Console.WriteLine(e.Key);
Console.WriteLine("***********************************************");
return Task.CompletedTask;
}
}
I manage to get the script executed, but I'm not receiving any events.
The name of the event is keydown, not onkeydown.

VSCode API - 'textInputFocus' for webview or custom undo handling

I am working on VSCode extension implementation.
I am using webview for my extension - in result there is something similar to visual editor, when you can select items and edit.
In result I want to implement custom undo/redo handling for webview.
I have following code to handle VSCode's 'undo'/'redo' commands:
let undoCommand: Disposable;
let redoCommand: Disposable;
const registerCommands = () => {
undoCommand = commands.registerCommand('undo', async (args) => {
// Call custom undo handler
triggerCustomUndo(appJsonFilePath, extensionWebView.webview);
// Execute default undo handler
return commands.executeCommand('default:undo', args);
});
redoCommand = commands.registerCommand('redo', async (args) => {
// Call custom redo handler
triggerCustomRedo(appJsonFilePath, extensionWebView.webview);
// Execute default redo handler
return commands.executeCommand('default:redo', args);
});
};
extensionWebView.onDidChangeViewState((action: WebviewPanelOnDidChangeViewStateEvent) => {
if (!action.webviewPanel.visible || !action.webviewPanel.active) {
undoCommand.dispose();
redoCommand.dispose();
} else {
registerCommands();
}
});
registerCommands();
It works for me.
In result my custom undo/redo handler is called when I select 'undo'/'redo' from VSCode's menu:
Problem is that when I am using 'Ctrl+Z'|'Command+Z' shortcut, then 'undo' command is not called for webview.
This happens because of following 'when' clause in default keybindings:
If I remove 'textInputFocus' statement from 'when' clause, then 'undo' command is called for webview when keyboard shortcut is used.
Some information regarding 'when' contexts - https://github.com/microsoft/vscode-docs/blob/master/docs/getstarted/keybindings.md#contexts
Question:
Is there a way how I can set 'textInputFocus' to 'true', when I am using webview?
Alternative way could be:
I can read keybinding attachments
Default - 'vscode://defaultsettings/keybindings.json'
Custom/Overwritten:
Windows - %APPDATA%\Code\User\keybindings.json;
MacOS - $HOME/Library/Application Support/Code/User/keybindings.json;
Linux - $HOME/.config/Code/User/keybindings.json;
Attach to keyboard key down event manually and handle event to detect 'undo'/'redo' key combination;
That should work, but if I could somehow set 'textInputFocus' to 'true' for webview then it would be much easier.
Or maybe there is other simpler solution available?
I found way how to set 'textInputFocus' manually:
vscode.commands.executeCommand('setContext', 'textInputFocus', true);

On property change event handler

In a VSCode extension I'm looking for a way to react when the user modify an extension property defined in contributes.configuration section of package.json.
Does it exists an event like onPropertyChange or some other way to register an event handler?
After re-reading vscode documentation I found myself an answer:
workspace.onDidChangeConfiguration callback receive a ConfigurationChangeEvent when a config property is modified.
with the method affectsConfiguration it is then possible to react at the specific property change, for example:
export function activate(context: vscode.ExtensionContext) {
vscode.workspace.onDidChangeConfiguration(event => {
let affected = event.affectsConfiguration("riot.compiler");
if (affected) {
// rebuild cpp project settings
setup();
}
})
...

Listen to Router events using ChaplinJS's mediator

I currently trying out ChaplinJS for a new project and I'm running into a problem.
I want to have a controller (for my navigation) that's listening to the changes of the router. I want to have callbacks for events like changeURL or route. I'm not sure how Chaplin's mediator works but I thought the router is throwing events using the mediator which I should be able to catch. I tried this:
mediator = require 'mediator'
Controller = require 'controllers/base/controller'
Menu = require 'models/menu'
MenuView = require 'views/menu-view'
module.exports = class MenuController extends Controller
listen:
'router:changeURL mediator': #test
initialize: ->
super
#menu = new Menu()
#view = new MenuView model: #menu
mediator.subscribe 'router:changeURL', #test
test: ->
console.log 'testlisten'
You should use beforeAction method to accomplish this.
The method receives all arguments actions receive. http://docs.chaplinjs.org/chaplin.controller.html
There is no listen in controllers.

Toast Notification Arguments Open Web Browser

I need to send my toast notification arguments and open a web browser. Here is my code:
private void DoNotification()
{
var notifications = serviceClient.GetNotificationsAsync(App.CurrentRestaurantLocation.ID);
foreach (RestaurantNotification note in notifications.Result)
{
IToastNotificationContent toastContent = null;
IToastText02 templateContent = ToastContentFactory.CreateToastText02();
templateContent.TextHeading.Text = note.Title;
templateContent.TextBodyWrap.Text = note.Message;
toastContent = templateContent;
// Create a toast, then create a ToastNotifier object to show
// the toast
ToastNotification toast = toastContent.CreateNotification();
toast.Activated += toast_Activated;
// If you have other applications in your package, you can specify the AppId of
// the app to create a ToastNotifier for that application
ToastNotificationManager.CreateToastNotifier().Show(toast);
}
}
async void toast_Activated(ToastNotification sender, object args)
{
await Launcher.LaunchUriAsync(new Uri("http://www.google.com"));
}
My activated event happens, however, no web browser opens. That launcher code works without the toast notification.
How do I populate args with a url? My web service returns note.RedirectUrl and I want to feed it in there.
Instead of using the Activated event handler on the ToastNotification, use the OnLaunched handler in the main Application class (which allows launch context to be easily accessed).
For the handler to be invoked, a launch argument needs to be provided in the toast XML. Using the code above, you can add the argument to the the IToastContent object like so:
toastContent.Launch = note.RedirectUrl;
Then in the Application's OnLaunched method, the app can retrieve the launch argument:
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
if (!String.IsNullOrEmpty(args.Argument)) {
var redirectUrl = args.Argument;
}
}
Calling LaunchUriAsync should work as expected when used from OnLaunched.