Embedding browser elements into a page

[IndigoGolem]

I use a custom startpage for my browsers that's made mostly of SVG (i find Inkscape easier than hand-coding CSS, and i don't need especially good code for something that'll only ever be on my screen). It currently is just input boxes for search engines, and links with icons to sites i visit often. But since i figured out how to use Firefox' browser toolbox, i've been doing stuff with userChrome.css (custom CSS for styling the browser itself) and i'd like to offload more buttons to the custom startpage.

Today i figured, Firefox' UI looks like XML. So i should be able to just copy and paste that into the HTML for my startpage. It's not that simple, unfortunately.

I'm starting with my bookmarks toolbar. It's not hard to open the browser toolbox (burger menu > More Tools > Browser Toolbox) then use its element inspector to grab the thing i want. Find the highest element in the tree that's just the thing i want, right click > Edit As XML, select all, copy, paste into the HTML for the page. And nothing happens. Add some CSS, now there's a border around the XML so i can see that it is in the page, it's just invisible. display and visibility properties don't help, so it's probably that the browser doesn't know how to render it here because it's missing important stuff i didn't copy into the page. Or it just won't do XML like this, but the fact that the element is in the page and can be styled makes me think that's not it.

So i clean up and indent the code, just so it's a little easier to read and work with. The idea here is i can pick out all the ids of various elements and search the browser toolbox to see what targets those. The element highest up the tree is a <toolbaritem id="personal-bookmarks">, so i search the debugger for that id. I don't know any JS, but the code is commented so i can try to understand anyway. Exploring a little instead of copying bits of code right away, i see "This object handles the initialization and uninitialization of the bookmarks toolbar. It also has helper functions for the managed bookmarks button." Sounds like what i need.

I'm getting tired of this so i just copy the whole JS file and link it with a <script> tag. The page still doesn't work. So i do the same with the other JS files that mention that id. Still doesn't work. At this point i'm hungry and tired of this and ready to admit defeat.

So this thread is a request for help and not a tutorial. Has what i'm trying to do been done before? Is it definitely impossible? Does a known solution exist?

I guess even if this isn't possible i could probably use userChrome.css to position and style the bookmarks bar and make it only visible on that page. I think that's a thing.

[Dan Q]

Yes, Firefox's user interface is implemented in XML! If I remember correctly, the specific dialect it uses is called XUL (pronounced like Zuul, the evil demigoddess from Ghostbusters). You can absolutely style it with CSS and it should pretty-much Just Work so long as you do a lot of heavy lifting.

However, doing any kind of clever interactivity probably won't work like you want. You can't just take some JavaScript that normally runs "in the browser" and ask it to run "in a webpage". If that JavaScript's purpose is to, say, load all of your bookmarks and render them... that simply won't work when run from a webpage, because your browser will refuse to give up your bookmarks to the code. That's an important security feature: you wouldn't want just any webpage to be able to see what pages you have bookmarked, would you?

If I'm understanding you right: you want to design a custom homepage that includes your bookmarks (and possibly other data)? If so, a good starting point might be to explore the places Firefox stores your profile data, or ask it to export the data you want. E.g. if you set browser.bookmarks.autoExportHTML in your about:config the Firefox will automatically maintain an (old, Netscape-style) HTML file with a list of your bookmarks every time you quit (IIRC), right in your profile folder: neat! Might be a launchpad for your explorations.

Or if I've misunderstood what you're trying to achieve, let me know!