thejustsoul
Advanced Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Код:
// Индикатор загрузки в виде полоски.........
(function () {
// Css стиль для индикатора загрузки вкладок ....
var uri = makeURI('data:text/css,'+ encodeURIComponent('\
/* binding для добавления индикатора под "xul:label" каждой вкладки */\
tabs.tabbrowser-tabs label.tab-text {\
-moz-binding: url("data:application/xml,%3Cbindings%20id%3D%22tabprogressbarBindings%22%0A%09xmlns%3D%22http%3A%2F%2Fwww.mozilla.org%2Fxbl%22%0A%09xmlns%3Axul%3D%22http%3A%2F%2Fwww.mozilla.org%2Fkeymaster%2Fgatekeeper%2Fthere.is.only.xul%22%0A%09xmlns%3Axbl%3D%22http%3A%2F%2Fwww.mozilla.org%2Fxbl%22%3E%0A%3Cbinding%20id%3D%22tab-label%22%20extends%3D%22xul%3Ahbox%22%3E%0A%09%3Ccontent%3E%0A%09%09%3Cxul%3Avbox%20class%3D%22tab-label-inner-box%22%20flex%3D%221%22%3E%0A%09%09%09%3Cxul%3Astack%20xbl%3Ainherits%3D%22flex%22%20flex%3D%221%22%3E%0A%09%09%09%09%3Cxul%3Ahbox%20class%3D%22label-behind-box%22%20flex%3D%221%22%2F%3E%0A%09%09%09%09%3Cxul%3Avbox%20class%3D%22tab-progress-box%22%20flex%3D%221%22%3E%0A%09%09%09%09%09%3Cxul%3Aprogressmeter%0A%09%09%09%09%09%09class%3D%22tab-progress%22%0A%09%09%09%09%09%09mode%3D%22normal%22%0A%09%09%09%09%09%09xbl%3Ainherits%3D%22value%3Dtab-progress%22%2F%3E%0A%09%09%09%09%3C%2Fxul%3Avbox%3E%0A%09%09%09%09%3Cxul%3Ahbox%0A%09%09%09%09%09flex%3D%221%22%0A%09%09%09%09%09align%3D%22center%22%3E%0A%09%09%09%09%09%3Cxul%3Alabel%0A%09%09%09%09%09%09class%3D%22tab-real-text%22%0A%09%09%09%09%09%09flex%3D%221%22%0A%09%09%09%09%09%09xbl%3Ainherits%3D%22value%2Ccrop%2Caccesskey%22%2F%3E%0A%09%09%09%09%3C%2Fxul%3Ahbox%3E%0A%09%09%09%3C%2Fxul%3Astack%3E%0A%09%09%3C%2Fxul%3Avbox%3E%0A%09%3C%2Fcontent%3E%0A%3C%2Fbinding%3E%0A%3C%2Fbindings%3E#tab-label");\
}\
/* цвет, тень и фоновое изображение прогресса в base64 */\
.tab-progress > .progress-remainder {\
background-color: rgba(255, 255, 255, 0) !important;\
}\
.tab-progress > .progress-bar {\
//box-shadow: 0 0 2px rgba(34, 153, 221, 0.26);\
box-shadow: 0 0 2px rgba(255, 255, 255, 0);\
background: #2299DD url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAACCAIAAAD5BB1nAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAhSURBVEhLY1CaeXcUjaJRNIqGBBotsEbRKBpFQwTNvAsAqmb7PRUziHUAAAAASUVORK5CYII=") no-repeat right;\
}\
/* когда показывать, размеры, расположение */\
.tabbrowser-tab[busy="true"]:not([progress="true"]) .tab-progress,\
.tabbrowser-tab:not([busy="true"]) .tab-progress,\
label.tab-text:not([tab-progress]) .tab-progress {\
visibility: collapse;\
}\
.tab-progress,\
.tab-real-text,\
label.tab-text > .tab-label-inner-box,\
label.tab-text > .tab-label-inner-box > *,\
label.tab-text > .tab-label-inner-box > stack > *,\
label.tab-text > .tab-label-inner-box > stack > * > spacer {\
margin: 0 !important;\
padding: 0 !important;\
text-indent: 0 !important;\
}\
.tab-progress {\
min-width: 0 !important;\
height: 2px !important;\
min-height: 2px !important;\
max-height: 2px !important;\
-moz-appearance: none !important;\
border: none !important;\
outline: none !important;\
margin: 0 0 -4px !important;\
position: relative !important;\
}\
.tab-progress > .progress-bar,\
.tab-progress > .progress-remainder {\
-moz-appearance: none !important;\
}\
.tab-progress-box { -moz-box-pack: end !important; }\
\
/* удалить стандартный индикатор загрузки( throbber ) */\
.tab-throbber:not([pinned="true"]) { display: none !important; }\
.tab-icon-image:not([pinned="true"]) { display: block !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) );
// Отслеживать прогресс загрузки всех вкладок ....
var tabsProgressListener = {
onProgressChange: function( browser, w, r, c, m, curProgr, maxProgr ) {
if ( !maxProgr ) return;
// добавлять атрибут с прогрессом загрузки к 'xul:label' каждой вкладки
var percentage = parseInt(curProgr * 100 / maxProgr);
var tab = gBrowser._getTabForBrowser( browser );
var label = document.getAnonymousElementByAttribute( tab, 'class', 'tab-content').querySelector(".tab-text.tab-label");
label.setAttribute('tab-progress', percentage );
}
};
gBrowser.addTabsProgressListener( tabsProgressListener );
addDestructor(function() gBrowser.removeTabsProgressListener( tabsProgressListener ) );
})();
|
|
