mavoweb / inspector Goto Github PK

The Mavo panel shows the values of expressions when an element is selected, but doesn't update those values if they are changed through interactions with the page.

It would be great if I could use this inspector in Firefox. I looked into it and there's essentially a single incompatibility: it looks like Firefox's ExtensionSidebarPane only allows you to display JSON objects or DOM nodes (as expandable trees, not actually displaying them in the DOM). That is, ExtensionSidebarPane doesn't support setPage.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane
https://developer.chrome.com/extensions/devtools_panels#type-ExtensionSidebarPane

Unfortunately I think this means that right now, the best we can do is to add an entire new panel aka tab in devtools and display the Mavo page there, so you can't have the DOM inspector and the Mavo inspector both showing. This is still useful though, you can sort of look at Mavo data by inspecting a node and then switching to the Mavo tab.

Thoughts? I can make a working Firefox extension as I just described just by changing inspector.js to:

chrome.devtools.panels.create(
	"Mavo",
	"logo.png",
	"sidebar.html",
).then((newPanel) => {
	window.sidebar = newPanel;
});

However I can't find a nice way to do feature detection in a way that might let us make the extension display the inspector in an ExtensionSidebarPane when possible, and in an entirely separate panel if not.