ツールバーの追加 - userChrome.js作成メモWiki

ツールバーボックスの最後（ブックマークツールバーの下）にツールバーを追加

try {
  // この部分がないと新規ウィンドウを開いた時の最初のタブが表示されない
  if(gBrowser.selectedBrowser.getAttribute('blank'))
    gBrowser.selectedBrowser.removeAttribute('blank');
} catch(e) {}
 
// ツールバーのノードを作成
const df = window.MozXULElement.parseXULToFragment(
`
<toolbar id="AdditionalToolbar" toolbarname="追加のツールバー" customizable="true"
         class="browser-toolbar customization-target"
         fullscreentoolbar="true" mode="icons" context="toolbar-context-menu" accesskey="A">
</toolbar>
`
);
document.getElementById('navigator-toolbox').appendChild(df);
 
// 作成したツールバーを登録
CustomizableUI.registerArea('AdditionalToolbar', { type: CustomizableUI.TYPE_TOOLBAR });
CustomizableUI.registerToolbarNode(document.getElementById('AdditionalToolbar'));
 
// CSSを登録（カスタマイズ画面での見た目のため。なくてもいい）
const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(
`
#AdditionalToolbar[customizing] {
  outline: 1px dashed;
  outline-offset: -3px;
  -moz-outline-radius: 2px;
}
`
), null, null);
const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); 

メニューバーの下にツールバーを追加

TabsInTitlebarへの対応で色々と面倒

try {
  // この部分がないと新規ウィンドウを開いた時の最初のタブが表示されない
  if(gBrowser.selectedBrowser.getAttribute('blank'))
    gBrowser.selectedBrowser.removeAttribute('blank');
} catch(e) {}
 
// ツールバーのノードを作成
const df = window.MozXULElement.parseXULToFragment(
`
<toolbar id="AdditionalToolbar" toolbarname="追加のツールバー" customizable="true"
         class="browser-toolbar titlebar-color"
         customizationtarget="AdditionalToolbar-customization-target"
         fullscreentoolbar="true" mode="icons" context="toolbar-context-menu" accesskey="A">
  <hbox class="titlebar-spacer" type="pre-tabs"/>
  <hbox class="toolbar-items" flex="1">
    <hbox id="AdditionalToolbar-customization-target" class="customization-target" flex="1"/>
  </hbox>
  <hbox class="titlebar-spacer" type="post-tabs"/>
</toolbar>
`
);
const toolbar = df.getElementById('AdditionalToolbar');
toolbar.appendChild(document.querySelector('.titlebar-buttonbox-container').cloneNode(true));
document.getElementById('toolbar-menubar').after(df);
 
// 作成したツールバーを登録
CustomizableUI.registerArea('AdditionalToolbar', { type: CustomizableUI.TYPE_TOOLBAR });
CustomizableUI.registerToolbarNode(document.getElementById('AdditionalToolbar'));
 
// CSSを登録（必須）
const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(
`
/* ツールバーの左右スペースとシステムボタンの表示設定 */
#toolbar-menubar:not([autohide=true]) ~ toolbar > .titlebar-buttonbox-container,
#toolbar-menubar:not([autohide=true]) ~ toolbar > .titlebar-spacer,
#AdditionalToolbar:not([collapsed=true]) + #TabsToolbar > .titlebar-buttonbox-container,
#AdditionalToolbar:not([collapsed=true]) + #TabsToolbar > .titlebar-spacer {
  display: none;
}
#toolbar-menubar[autohide=true]:not([inactive]) ~ toolbar > .titlebar-buttonbox-container {
  visibility: hidden;
}
/* タイトルバーのドラッグ領域の設定 */
:root[sizemode="normal"][chromehidden~="menubar"] #AdditionalToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #AdditionalToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #AdditionalToolbar[collapsed=true] + #TabsToolbar > .toolbar-items {
  padding-top: var(--space-above-tabbar);
}
:root[sizemode="normal"][chromehidden~="menubar"] #AdditionalToolbar:not([collapsed=true]) + #TabsToolbar > .toolbar-items {
  padding-top: 0; /* browser.css の設定を打ち消す */
}
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
@media (-moz-os-version: windows-win7) {
  :root[sizemode="normal"][chromehidden~="menubar"] #AdditionalToolbar > .toolbar-items,
  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #AdditionalToolbar > .toolbar-items,
  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #AdditionalToolbar[collapsed=true] + #TabsToolbar > .toolbar-items {
    padding-top: calc(var(--space-above-tabbar) + 4px);
  }
}
/* カスタマイズ画面でのアウトライン */
#AdditionalToolbar[customizing] > .toolbar-items {
  outline: 1px dashed;
  outline-offset: -3px;
  -moz-outline-radius: 2px;
}
`
), null, null);
const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);