// ==UserScript==
// @name ToolbarAutoHide.uc.js
// ==/UserScript==
/* userChrome.cssで
/* #navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group : 1;}
/* 等と、-moz-box-ordinal-group を指定してあると表示が乱れる場合があります。
/* 各自、修正してください。
/* もっとスマートに低負荷にできると思いますが、私のスキルではこれが限界です。
/* 誰でも改造してより良いものを作ってください。
*/
(function () {
if (location != 'chrome://browser/content/browser.xhtml') return;
try {
let navbox = document.getElementById('navigator-toolbox');
let menubar = document.getElementById('toolbar-menubar');
let tabsbar = document.getElementById('TabsToolbar');
let navbar = document.getElementById('nav-bar');
let perbar = document.getElementById('PersonalToolbar');
// toolbarの属性変化を監視
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
toolbarFlag(mutation);
});
});
let config = {
attributes: true,
attributeOldValue: true,
attributeFilter: ['customizing', 'autohide', 'collapsed', 'barAuto']
};
observer.observe(menubar, config);
observer.observe(tabsbar, config);
observer.observe(navbar, config);
observer.observe(perbar, config);
// tabsbarのリサイズを監視
let resizeObserver = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
toolbarFlag(entry);
});
});
resizeObserver.observe(tabsbar);
/**/
// タブバー、ナビバーも隠せるように
tabsbar.setAttribute('toolbarname', tabsbar.getAttribute('aria-label'));
navbar.setAttribute('toolbarname', navbar.getAttribute('aria-label'));
/*
// ブックマークバーはデフォルトで自動開閉に
menubar.removeAttribute('barAuto');
tabsbar.removeAttribute('barAuto');
navbar.removeAttribute('barAuto');
perbar.setAttribute('barAuto', 'true');
*/
// 自動開閉するかどうかをfirefoxに保存
menubar.setAttribute('persist', 'barAuto');
tabsbar.setAttribute('persist', 'barAuto');
navbar.setAttribute('persist', 'barAuto');
perbar.setAttribute('persist', 'barAuto');
// タブバーは不具合多発なので起動時は自動開閉しないように
tabsbar.removeAttribute('barAuto');
// 全消し用にナビゲーションボックスに空要素追加 ダブルクリックで復活
let box = MozXULElement.parseXULToFragment(`
`);
navbox.appendChild(box);
/*
// コンテキストメニューのヘッドにツールバーのコンテキストメニュー追加
document.getElementById('context-navigation').setAttribute('context', 'toolbar-context-menu');
*/
// ツールバーメニューに項目追加
let menu = MozXULElement.parseXULToFragment(`
`);
document.getElementById('menu_customizeToolbars').before(menu);
// ナビゲーション上の右クリックメニューに追加
let contextmenu = MozXULElement.parseXULToFragment(`
`);
document.getElementById('viewToolbarsMenuSeparator').after(contextmenu);
let uccss = `
#navigator-toolbox #titlebar {
-moz-box-ordinal-group : 0;
}
#navigator-toolbox #toolbar-menubar {
-moz-box-ordinal-group : 1;
}
#navigator-toolbox #TabsToolbar {
-moz-box-ordinal-group : 2;
}
#navigator-toolbox #nav-bar {
-moz-box-ordinal-group : 3;
}
#navigator-toolbox #PersonalToolbar {
-moz-box-ordinal-group : 4;
}
#navigator-toolbox[barsAuto]:not([custommode]) {
z-index : 100 !important;
position : relative !important;
}
#navigator-toolbox[barsAuto]:not(:-moz-lwtheme, [custommode]) {
background-color : var(--toolbar-bgcolor) !important;
background-image : var(--toolbar-bgimage) !important;
}
#navigator-toolbox[barsAuto]:-moz-lwtheme:not([custommode]) {
background-color : var(--lwt-accent-color) !important;
background-image : var(--lwt-header-image, var(--lwt-additional-images)) !important;
}
#navigator-toolbox:not([inFullscreen], [custommode]) #nav-box-escape[notShown] {
-moz-box-ordinal-group : 10;
transition : all 0.3s ease 0s;
height : 5px;
cursor : alias;
}
#navigator-toolbox:not([inFullscreen], [custommode]) #nav-box-escape:not([notShown]) {
display : none;
}
#navigator-toolbox:not([inFullscreen], [custommode]) #nav-box-escape[allAuto] {
margin-block-end : -5px;
}
#navigator-toolbox:not([inFullscreen], [custommode]):hover #nav-box-escape[allAuto] {
height : 0;
margin-block-end : 0;
}
#navigator-toolbox[barsAuto]:not([inFullscreen], [custommode]) {
margin-block-end : 0;
transition : all 0.3s ease 0s !important;
}
#navigator-toolbox[barsAuto]:not([inFullscreen], [custommode]):hover {
margin-block-end : calc(var(--barshide-height) * -1px);
}
#navigator-toolbox:not([inFullscreen], [custommode]) > #titlebar[barsAuto] {
margin-block-start : calc(var(--ttlhide-height) * -1px) !important;
transition : all 0.3s ease 0s !important;
}
#navigator-toolbox:not([inFullscreen], [custommode]):hover > #titlebar[barsAuto] {
margin-block-start : 0 !important;
}
#navigator-toolbox:not([inFullscreen], [custommode]) > #titlebar[barsAuto] #toolbar-menubar:not([barAuto]),
#navigator-toolbox:not([inFullscreen], [custommode]) > #titlebar[barsAuto] #TabsToolbar:not([barAuto]) {
-moz-box-ordinal-group : 2;
}
#navigator-toolbox:not([inFullscreen], [custommode]) #toolbar-menubar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]) #TabsToolbar[barAuto] {
-moz-box-ordinal-group : 1;
transition : all 0.3s ease 0s !important;
opacity : 0 !important;
}
#navigator-toolbox:not([inFullscreen], [custommode]):hover #toolbar-menubar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]):hover > #titlebar[barsAuto] #TabsToolbar:not([barAuto]) {
-moz-box-ordinal-group : 1;
}
#navigator-toolbox:not([inFullscreen], [custommode]):hover > #titlebar[barsAuto] #toolbar-menubar:not([barAuto]),
#navigator-toolbox:not([inFullscreen], [custommode]):hover #TabsToolbar[barAuto] {
-moz-box-ordinal-group : 2;
}
#navigator-toolbox:not([inFullscreen], [custommode]) #nav-bar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]) #PersonalToolbar[barAuto] {
margin-block-start : calc(var(--barhide-height) * -1px) !important;
transition : all 0.3s ease 0s !important;
opacity : 0 !important;
}
#navigator-toolbox:not([inFullscreen], [custommode]):hover #toolbar-menubar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]):hover #TabsToolbar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]):hover #nav-bar[barAuto],
#navigator-toolbox:not([inFullscreen], [custommode]):hover #PersonalToolbar[barAuto] {
margin-block-start : 0 !important;
opacity : 1 !important;
}
`;
let ucuri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(uccss));
let ucsss = Cc['@mozilla.org/content/style-sheet-service;1']
.getService(Ci.nsIStyleSheetService);
ucsss.loadAndRegisterSheet(ucuri, ucsss.AGENT_SHEET);
} catch (e) { };
})();
// 起動時にセット
window.addEventListener('MozAfterPaint', toolbarsset, { once: true });
// ESCキーでTabsToolbar,nav-barを強制表示
document.addEventListener('keydown', function (event) {
if (event.keyCode == 27) navescape();
});
// 全消し時のバーをダブルクリックで復活
document.getElementById('nav-box-escape').addEventListener('dblclick', navescape);
function navescape() {
document.getElementById('nav-bar').setAttribute('collapsed', 'false');
document.getElementById('nav-bar').removeAttribute('barAuto');
document.getElementById('TabsToolbar').setAttribute('collapsed', 'false');
document.getElementById('TabsToolbar').removeAttribute('barAuto');
}
// ツールバーの属性値変化(カスタマイズ、非表示)
function toolbarFlag(aEvent) {
let barelm = aEvent.target;
let attribute = aEvent.attributeName;
// タブ追加でタブバーが表示されるのをキャンセル
if ((barelm.id == 'TabsToolbar')
&& (attribute == 'collapsed')
&& !(barelm.hasAttribute('collapsed'))) {
barelm.setAttribute('collapsed', aEvent.oldValue);
}
toolbarsset();
}
function toolbarsset() {
let boxelm = document.getElementById('navigator-toolbox');
let ttlbar = document.getElementById('titlebar');
let escbox = document.getElementById('nav-box-escape');
let barelm, hidingAttr, barheight, hasShown;
let barshide = 0, barsAuto = false, custommode = false, notShown = true;
let ttlhide = 0, tbarsAuto = false, allAuto = false;
let toolbarsid = ['toolbar-menubar', 'TabsToolbar', 'nav-bar', 'PersonalToolbar'];
for (let toolbar of toolbarsid) {
barelm = document.getElementById(toolbar);
hidingAttr = (barelm.getAttribute('type') == 'menubar') ? 'autohide' : 'collapsed';
if (hasShown = (barelm.getAttribute(hidingAttr) == 'true')) barelm.removeAttribute('barAuto');
barheight = barelm.clientHeight;
if (barelm.hasAttribute('barAuto')) {
barsAuto = true;
allAuto = true;
barelm.style.setProperty("--barhide-height", barheight);
barshide += barheight;
if ((toolbar == 'toolbar-menubar') || (toolbar == 'TabsToolbar')) {
tbarsAuto = true;
ttlhide += barheight;
}
} else {
if (!hasShown) notShown = false;
barelm.style.setProperty("--barhide-height", 0);
}
if (barelm.hasAttribute('customizing')) custommode = true;
}
if (barsAuto) boxelm.setAttribute('barsAuto', 'true');
else boxelm.removeAttribute('barsAuto');
if (tbarsAuto) ttlbar.setAttribute('barsAuto', 'true');
else ttlbar.removeAttribute('barsAuto');
if (custommode) boxelm.setAttribute('custommode', 'true');
else boxelm.removeAttribute('custommode');
if (notShown) {
escbox.setAttribute('notShown', 'true');
if (allAuto) escbox.setAttribute('allAuto', 'true');
else escbox.removeAttribute('allAuto');
} else {
escbox.removeAttribute('notShown');
}
boxelm.style.setProperty("--barshide-height", barshide);
ttlbar.style.setProperty("--ttlhide-height", ttlhide);
}
// メニュー作成
function autoHideToolbarsPopupShowing(aEvent) {
let popup = aEvent.target;
if (popup != aEvent.currentTarget) return;
while (popup.firstChild) popup.removeChild(popup.firstChild); // メニュークリア
let toolbarsid = ['toolbar-menubar', 'TabsToolbar', 'nav-bar', 'PersonalToolbar'];
let barelm, hidingAttr;
for (let toolbar of toolbarsid) {
barelm = document.getElementById(toolbar);
hidingAttr = (barelm.getAttribute('type') == 'menubar') ? 'autohide' : 'collapsed';
let menuitem = MozXULElement.parseXULToFragment(`
`);
popup.append(menuitem);
}
}
// 自動開閉メニューチェック
function autoHideToolbar(aEvent) {
let eventelm = aEvent.target;
let barid = eventelm.getAttribute('toolbarId');
let barelm = document.getElementById(barid);
if (eventelm.getAttribute('checked') == "true") {
barelm.setAttribute('barAuto', 'true');
} else {
barelm.removeAttribute('barAuto');
}
}