Port to Firefox

[betaveros]

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.

[betaveros]

Another small change to the code to get the Firefox extension working well would be:

diff --git a/sidebar.js b/sidebar.js
index f029bde..fdba85c 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -12,7 +12,7 @@ async function updateSidebar() {
        }
 
        try {
-               var info = await eval(`(${getInfo})($0)`);
+               var info = await eval(`(${getInfo})($0 || document)`);
 
                render(info);
        }

If the Mavo inspector is on a completely different panel, the user could open it before opening the normal inspector, in which case $0 would be undefined, so this diff fixes that case. With these two changes the Firefox extension seems to work well enough for basic debugging.

[LeaVerou]

A big part of what the Mavo inspector does is just displaying JSON objects. It sounds like we can still do that side by side in the Elements panel. Then, we can add a panel for the expression evaluation. What do you think?