How can I open or create a bottom frame in which to populate with components (akin to Firebug)?

I’m interested in developing an add-on that opens up a panel (or splits the frame) at the bottom of the browser screen in the same way that Firebug does. In the bottom panel I want to add various form elements that allow the user to interact with website content as displayed in the top frame/browser. Right now I’m just trying to figure out the feasibility, terminology and documentation for this.

First off, what is the panel/frame at the bottom called? I can’t find the proper term for this. It’s the same kind of think that Firebug opens up at the bottom of the browser. The individual components are not important–I do not want to develop an extension for Firebug. I just need to know what the containing frame is called in Mozilla add-on terminology.

Second, is it possible to do this as an add-on? Firebug is an add-on, so I believe so. BUT, I can’t find the documentation for doing this. In the UI section of the add-on documentation, there is only mention of toolbar buttons, pop-ups, menu items, and context menus. Nothing is said akin to opening a whole frame up or other UI components.

Can I do this? If so, what’s the terminology and where’s the documentation?

Thanks for the help!

I know this is possible for sure I use this addon which does do it:

https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

There is another one I recall I’ll try to share that with you.