firefox - How can I move the tabs bar to the bottom of the window with a Firefox extension?

Question

I need for my extension to move the bar with tabs (a <toolbar> element with ID TabsToolbar) to the bottom of the window, under the #browser <hbox> element.

I know how to add and modify elements with extensions, but I'm not sure how to place an existing element somewhere else in the page with an overlay. What is the proper way to do this?

UPDATE:

I found another add on that does this among other things, called https://addons.mozilla.org/en-US/firefox/addon/tab-mix-plus/.

It appears that when tabs are set to the bottom, this plug adds an empty <toolbox> element with id tabmix-bottom-toolbox below the #browser <hbox> element. Even though the tabs appear on the bottom, the actual tab XUL markup is still in it's regular place inside the TabsToolbar <toolbar> element at the top.

I think what the author does is:

1. Insert a XUL placeholder element under the browser area, and set the placeholder to the height of the TabsToolbar.
2. Then give TabsToolbar a fixed position via css, and
3. Set the "top" property based on the offset of the placeholder.

I haven't confirmed this yet by trying it in my own plug-in though. I've also found that absolute positioning does wonky things in XUL.

Answer 1

你可以试一试：

1. 在 ID 为“browser-bottombox”的 vbox 之前插入一个 hbox（比如说 ID 为 bottom-tabs-container）

2. 在javascript中，使用类似的东西

   var tabsToolbar = document.getElementById("TabsToolbar");
   document.getElementById("bottom-tabs-container").appendChild(tabsToolbar);
   

这应该保留已经绑定的任何事件处理程序。但是请注意，您可能会破坏很多与外观相关的东西。