Показывать количество открытых табов в адресной строке ( Firefox 24+)
Автор: bunda1
Версия: от 10.05.2019.
Описание: Код создаёт кнопку в адресной строке которая показывает количество всех открытых табов и количество открытых табов текущей группы вкладок. Кнопка открывает меню со списком вкладок текущей группы, в меню название текущей вкладки отображается красным цветом а не прочитанные или незагружеые вкладки синим цветом. Меню вкладок даёт возможность левым кликом переключится на нужную вкладку и правым кликом удалять вкладки не закрывая меню. Меню вкладок автоматически закрывается при уводе курсора, длительность увода можно установить в коде.
// Показывать количество открытых табов в адресной строке, от 10.05.2019. .................. (()=> { // Создать в адресной строке счётчик вкладок .... var tabCounter = document.createElement("toolbarbutton"); tabCounter.setAttribute("id", "tabCounter"); tabCounter.setAttribute("context", "event.stopPropagation()"); tabCounter.setAttribute("tooltiptext", "Показать меню всех вкладок"); var urlbarIcons = document.getElementById("page-action-buttons"); urlbarIcons.insertBefore(tabCounter, urlbarIcons.firstChild); addDestructor(()=> tabCounter.remove() ); // Отслеживать клик на счетчике .... tabCounter.onclick =e=> { if ( e.target.localName == "menuitem" ) return; tabCounter.textContent = ""; // удалить старое меню // создать новое меню всех вкладок текущей группы var array = ["label", "image", "selected", "unread", "pending"]; var menu = tabCounter.appendChild(document.createElement("menupopup")); gBrowser.visibleTabs.forEach(tab=> { var mItem = menu.appendChild(document.createElement("menuitem")); mItem.tab = tab; mItem.setAttribute("class", "menuitem-iconic bookmark-item"); array.forEach(atrr=> mItem.setAttribute(atrr, tab.getAttribute(atrr)) ); }); // периодически запускать обновление меню menu.interval = setInterval(()=> menuReload(), 200); addEventListener("popuphidden", ()=> clearInterval(menu.interval), false, menu); // обновить меню function menuReload() { [...menu.children].forEach(el=> { array.forEach(atrr=> el.setAttribute(atrr, el.tab.getAttribute(atrr)) ); }) }; // автоматически закрывать меню при ухода курсора, длительность увода - 450 мс menu.onmouseover =()=> this.f = true; menu.onmouseleave =()=> { this.f = false; setTimeout(()=> !this.f && menu.hidePopup(), 450) }; // отслеживать клики на пунктах меню menu.onmouseup =e=> { e.preventDefault(); var mItem = e.target, tab = mItem.tab; if ( e.button == 0 ) gBrowser.selectedTab = tab; else { mItem.remove(); gBrowser.removeTab(tab); } menuReload(); }; // фокус на активную вкладку в меню при открытии var box = document.getAnonymousElementByAttribute(menu, "class", "popup-internal-box"); addEventListener("popupshowing", ()=> { var menuitem = [...menu.children].filter(el=> el.getAttribute("selected", "true") )[0]; menuitem.setAttribute('_moz-menuactive', true); var menuitemCenter = menuitem.boxObject.screenY + menuitem.boxObject.height/2; var boxCenter = box.boxObject.screenY + box.boxObject.height/2; box.scrollByPixels(menuitemCenter - boxCenter); }, false, menu); menu.openPopup(tabCounter, "after_start") }; // Css стиль для счётчика и меню .... var uri = makeURI('data:text/css,'+ encodeURIComponent('\ /* Стиль для кнопки */\ #tabCounter:hover { color: #FF1493 !important; }\ /* Стиль добавляет текст на кнопку */\ #tabCounter .toolbarbutton-icon { display: none !important; }\ #tabCounter .toolbarbutton-text { display: -moz-box !important; }\ #tabCounter { -moz-box-orient: horizontal !important; }\ /* Стиль для меню вкладок */\ #tabCounter > menupopup scrollbox { overflow-y: auto !important; }\ #tabCounter > menupopup > menuitem[unread="true"],\ #tabCounter > menupopup > menuitem[pending="true"] { color: blue !important; }\ #tabCounter { -moz-appearance: none !important; border: 0 !important; margin-right: -8px !important; }\ #tabCounter > menupopup > menuitem[selected="true"] { color: red !important; font-weight: bold !important; }\ ')); var sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService); sss.loadAndRegisterSheet(uri, 0); addDestructor(()=> sss.unregisterSheet(uri, 0) ); // Считать и показывать количество вкладок .... function count() { try { window.clearTimeout(count.timeout) } catch(e) {}; count.timeout = window.setTimeout(()=> { var all = gBrowser.tabs.length, visible = gBrowser.visibleTabs.length; tabCounter.label = (all > visible ? visible + '/' : '') + all; }, 350); }; count(); // Отслеживать открытие, закрытие вкладок и переключение групп вкладок .... var tabs = gBrowser.tabContainer; addEventListener("TabOpen", count, false, tabs); addEventListener("TabClose", count, false, tabs); function getChangeTabGroup() { addEventListener("TabHide", function c(e) { count(); setTimeout(()=> getChangeTabGroup(), 50); removeEventListener(e.type, c, false, tabs); }, false, tabs); }; getChangeTabGroup(); })();
Отредактировано bunda1 (21-08-2013 20:23:30)
Отсутствует
bunda1, спасибо.
Tab Utilities умеет выводить количество открытых табов в текущей группе по отношению к общему числу табов (во всех группах)
и при этом этот набор чисел объединяется с кнопкой меню "Список всех вкладок", при нажатии на которую выпадает список вкладок в активной группе
Можно ли:
1) организовать вывод в адресной строке "количество табов в активной группе/общее количество табов" (например, как на скриншоте)
2) можно ли организовать вывод аналогично TU, т.е. на панели вкладок и с объединением с кнопкой "Список всех вкладок"?
Отредактировано >ORG@niZM< (23-08-2013 00:02:37)
Отсутствует
Можно ли:
1) организовать вывод в адресной строке "количество табов в активной группе/общее количество табов" (например, как на скриншоте)
2) можно ли организовать вывод аналогично TU, т.е. на панели вкладок и с объединением с кнопкой "Список всех вкладок"?
Хорошо, я сделаю.
Отсутствует
bunda1
хорошо, буду ждать сколько потребуется. А Tab Utilities уже отключен (RIP).
Отсутствует
... организовать вывод в адресной строке "количество табов в активной группе/общее количество табов" и с объединением с кнопкой "Список всех вкладок"?
// Показывать количество открытых табов в адресной строке +, от 25.08.2013. (function () { // Создать в адресной строке счётчик вкладок .... var tabCounter = document.createElement("statusbarpanel"); var urlbarIcons = document.getElementById("urlbar-icons"); urlbarIcons.insertBefore( tabCounter, urlbarIcons.firstChild ); addDestructor(function() { urlbarIcons.removeChild( tabCounter ) }); tabCounter.id = "tabCounter"; // Отслеживать клик на счетчике .... tabCounter.onclick = function(e) { if ( e.button ) return; tabCounter.textContent = ""; var menu = tabCounter.appendChild( document.createElement("menupopup") ); // создать и открыть новое меню menu.setAttribute("onmouseup", "gBrowser.selectedTab = gBrowser.visibleTabs[event.target.index]"); menu.setAttribute("onmouseleave", "this.hidePopup()"); gBrowser.visibleTabs.forEach(function( tab, i ) { var mItem = document.createElement("menuitem"); mItem.index = i; mItem.setAttribute("label", tab.label ); mItem.setAttribute("image", tab.image ); mItem.setAttribute("class", "menuitem-iconic bookmark-item"); mItem.setAttribute("selected", tab.selected ); mItem.setAttribute("unread", tab.hasAttribute("unread")); menu.appendChild( mItem ); }); menu.showPopup( tabCounter, -1, -1, "popup", "bottomleft", "topleft"); }; // Стиль для счётчика и меню .... var uri = makeURI('data:text/css,'+ encodeURIComponent('\ #tabCounter { -moz-appearance: none !important; border: 0px !important; margin-right: -5px !important; }\ #urlbar-icons > statusbarpanel:first-child scrollbox { overflow-y: auto !important; }\ .menuitem-iconic.bookmark-item[unread="true"]:not(:hover) { color: blue !important; }\ .menuitem-iconic.bookmark-item[selected="true"]:not(:hover) { color: red !important; }\ ')); const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); addDestructor(function() { sss.unregisterSheet(uri, sss.AGENT_SHEET) }); // Считать и показывать количество вкладок .... function count() { setTimeout(function() { var all = gBrowser.tabs.length, visible = gBrowser.visibleTabs.length; tabCounter.label = ( all > visible ? gBrowser.visibleTabs.length + '/' : '' ) + all; }, 50 ); }; count(); // Отслеживать открытие, закрытие вкладок и переключение групп вкладок .... var tabs = gBrowser.tabContainer; addEventListener("TabOpen", count, false, tabs ); addEventListener("TabClose", count, false, tabs ); function getChangeTabGroup() { addEventListener("TabHide", function c(e) { count(); setTimeout(function() { getChangeTabGroup() }, 50 ) removeEventListener( e.type, c, false, tabs ); }, false, tabs ); }; getChangeTabGroup(); })();
Отредактировано bunda1 (25-08-2013 16:16:01)
Отсутствует
bunda1
Как вариант - очень хорошо!
но скорей всего, >ORG@niZM< имел ввиду вывод не в адресную строку, а выводить счетчик прямо на кнопку "Список всех вкладок". Именно так и было реализовано в TU. И удобно и практично.
Отсутствует
bunda1
но скорей всего, >ORG@niZM< имел ввиду вывод не в адресную строку, а выводить счетчик прямо на кнопку "Список всех вкладок". Именно так и было реализовано в TU. И удобно и практично.
А вот и не удобно и не практично, на панели вкладок должны быть только вкладки.
Отсутствует
А вот и не удобно и не практично, на панели вкладок должны быть только вкладки.
ага, вкладки и индикатор их количества
ок, не буду спорить
пусть все решает автор кнопки, т.е. ты
Отсутствует
А вот и не удобно и не практично, на панели вкладок должны быть только вкладки.
+1
bunda1
Идея очень хорошая, но в работает некорректно, при выборе вкладок из списка во второй группе перекидывает в первую группу. Правда мне список не очень и нужен, тк пользуюсь для этого жестами Поэтому удалил
// Отслеживать клик на счетчике .... tabCounter.onclick = function(e) { alert(self._handlers.length); if ( e.button !== 0 ) return; var menu = tabCounter.appendChild( document.createElement("menupopup") ); // создать и открыть новое меню Array.slice( gBrowser.visibleTabs ).forEach(function( tab, i ) { var mItem = document.createElement("menuitem"); mItem.index = i; mItem.setAttribute("label", tab.label ); mItem.setAttribute("image", tab.image ); mItem.setAttribute("class", "menuitem-iconic bookmark-item"); mItem.setAttribute("selected", tab.selected ); mItem.setAttribute("unread", tab.hasAttribute('unread') ); menu.appendChild( mItem ); }); menu.showPopup( tabCounter, -1, -1, "popup", "bottomleft", "topleft"); addEventListener("mouseup", function(e) gBrowser.selectedTab = gBrowser.visibleTabs[e.target.index], true, menu ); addEventListener("popuphiding", function f(e) { // удалить меню после закрытия tabCounter.removeChild( e.target ) }, false, menu ); };
Добавлено 25-08-2013 12:19:41
И удобно и практично.
Когда делаешь такие заявления надо добавлять ИМХО. А не делать заявления от всех. ИМХО
Отредактировано voqabuhe (25-08-2013 12:19:41)
Отсутствует
Ну всё, всё, затоптали
bunda1
Для таких "неправильных", как я и мне подобных, сделай пожалуйста вариант:
выводить счетчик прямо на кнопку "Список всех вкладок"
и все споры утихнут навсегда
Отсутствует
№5
bunda1, спасибо. И такой вариант мне по душе. Просто в качестве альтернативы можно, если не сложно
организовать вывод аналогично TU, т.е. на панели вкладок и с объединением с кнопкой "Список всех вкладок"
В любом случае спасибо - TU мне больше не нужен.
Отредактировано >ORG@niZM< (26-08-2013 07:50:24)
Отсутствует
bunda1
по свободе может сделаешь?
Для таких "неправильных", как я и мне подобных, сделай пожалуйста вариант:
выводить счетчик прямо на кнопку "Список всех вкладок"
и все споры утихнут навсегда
по аналогии, самому получается поместить счетчик на кнопку рядом с дропмаркером, но как прописать его вместо - умений не хватает...
Отсутствует
bunda1
Тогда и я выскажу свою хотелку, может понравится. А что если количеством заменить звезду, уж очень она вид портит. Но только чтобы цифра сохраняла все функции звезды, или это фантастика?
Отсутствует
Показывать количество открытых табов на кнопке "Список всех вкладок" ( Firefox 17+)
Автор: bunda1
Версия: от 01.09.2013.
Описание: Код показывает количество всех открытых табов на кнопке "Список всех вкладок".
Использование: создайте новую Custom Buttons кнопку и положите код в инициализацию. Не обязательно создавать новую CB кнопку, можно использовать уже существующую.
// Показывать количество открытых табов на кнопке "Список всех вкладок", от 01.09.2013. ................................ (function () { var alltabs = document.getElementById('alltabs-button'); if ( alltabs == null ) return; // Стиль добавляет текст на кнопку .... var uri = makeURI('data:text/css,'+ encodeURIComponent('\ %button% .toolbarbutton-icon {\ display: none !important;\ }\ %button% .toolbarbutton-text {\ display: -moz-box !important;\ }\ %button% {\ -moz-box-orient: horizontal !important;\ }\ '.replace(/%button%/g, "#alltabs-button" ) )); const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); addDestructor(function() { sss.unregisterSheet(uri, sss.AGENT_SHEET) }); // Фокус на активную вкладку в меню всех вкладок .... (function() { const popup = document.getElementById("alltabs-popup"); const box = document.getAnonymousElementByAttribute(popup, "class", "popup-internal-box"); addEventListener("popupshowing", function() { var [menuitem] = Array.filter(popup.childNodes, function(menuitem) menuitem.hasAttribute("selected")); var boxCenter = box.boxObject.screenY + box.boxObject.height / 2; var menuitemCenter = menuitem.boxObject.screenY + menuitem.boxObject.height / 2; box.scrollByPixels(menuitemCenter - boxCenter); }, false, popup); })(); // Считать и показывать количество вкладок .... function count(e) { try { window.clearTimeout( tabTimeout ) } catch(e) {}; tabTimeout = window.setTimeout(function() { var all = gBrowser.tabs.length, visible = gBrowser.visibleTabs.length; alltabs.label = ( all > visible ? gBrowser.visibleTabs.length + '/' : '' ) + all; }, 50 ); }; count(); // Отслеживать открытие, закрытие вкладок и переключение групп вкладок .... var tabs = gBrowser.tabContainer; addEventListener("TabOpen", count, false, tabs); addEventListener("TabClose", count, false, tabs); function getChangeTabGroup() { addEventListener("TabHide", function c(e) { count(); setTimeout(function () { getChangeTabGroup() }, 50 ); removeEventListener(e.type, c, false, tabs); }, false, tabs); }; getChangeTabGroup(); })();
Отредактировано bunda1 (01-09-2013 22:35:21)
Отсутствует
bunda1
Замечательно, спасибо.
А как немного расширить по горизонтали зону нажатия? а то когда одиночная цифра, трудно попадать
Как расширить, изменить цвет фона или что ?
Отсутствует
bunda1
огромное спасибо - то, что нужно
Отсутствует
Как расширить, изменить цвет фона или что ?
когда курсор подводишь, то выделяется зона всей кнопки и вот она узковата получается...
спасибо, но уже сам поправил с помощью margin-left
теперь всё просто супер!
Отсутствует
Вопрос: как сделать «звёздочку» кастом баттона в таком же стиле дизайна, как и остальные кнопки ?
Если тебя не помнят — значит тебя не существовало... ©
Отсутствует
DarkHeavy
Может не правильно понял, просто заменить звездочку на нужную иконку. Редактировать -Изображение-Обзор, не?
Лучше спросить у знающих - чем лезть не зная.
Отсутствует
villa7
О! Спасибо, надо будет попробовать Я считал, что «обзор» это не для изображения, а для вставки кода из какого-то файла текстового. Даже не додумался её нажать.
Если тебя не помнят — значит тебя не существовало... ©
Отсутствует
DarkHeavy
Желательно ещё конвертировать в base64 нажав на кнопку рядом, тогда иконка не будет привязана к местоположению на диске.
Лучше спросить у знающих - чем лезть не зная.
Отсутствует