mirror of
https://github.com/gorhill/uBlock.git
synced 2024-10-04 16:47:15 +02:00
Replace toolbar icon tooltip with message section in panel
Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/2585 Related feedback: - https://www.reddit.com/r/uBlockOrigin/comments/126rn4f/yellow_toolbar_icon_exclamation_mark_badge/jfns0pc/
This commit is contained in:
parent
dad862f063
commit
bf5f343548
@ -732,7 +732,6 @@ if ( webext.browserAction instanceof Object ) {
|
|||||||
{
|
{
|
||||||
const browserAction = vAPI.browserAction;
|
const browserAction = vAPI.browserAction;
|
||||||
const titleTemplate = `${browser.runtime.getManifest().browser_action.default_title} ({badge})`;
|
const titleTemplate = `${browser.runtime.getManifest().browser_action.default_title} ({badge})`;
|
||||||
const browserLaunchIssue = browser.i18n.getMessage('unprocessedRequestTooltip');
|
|
||||||
const icons = [
|
const icons = [
|
||||||
{ path: {
|
{ path: {
|
||||||
'16': 'img/icon_16-off.png',
|
'16': 'img/icon_16-off.png',
|
||||||
@ -866,10 +865,9 @@ if ( webext.browserAction instanceof Object ) {
|
|||||||
// - the platform does not support browserAction.setIcon(); OR
|
// - the platform does not support browserAction.setIcon(); OR
|
||||||
// - the rendering of the badge is disabled
|
// - the rendering of the badge is disabled
|
||||||
if ( browserAction.setTitle !== undefined ) {
|
if ( browserAction.setTitle !== undefined ) {
|
||||||
const title = hasUnprocessedRequest && browserLaunchIssue ||
|
const title = titleTemplate.replace('{badge}',
|
||||||
titleTemplate.replace('{badge}',
|
state === 1 ? (badge !== '' ? badge : '0') : 'off'
|
||||||
state === 1 ? (badge !== '' ? badge : '0') : 'off'
|
);
|
||||||
);
|
|
||||||
browserAction.setTitle({ tabId: tab.id, title });
|
browserAction.setTitle({ tabId: tab.id, title });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -202,7 +202,7 @@ body.needSave #revertRules {
|
|||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
body.mobile.no-tooltips .toolRibbon .tool {
|
:root.mobile.no-tooltips .toolRibbon .tool {
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -228,6 +228,27 @@ body.mobile.no-tooltips .toolRibbon .tool {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#unprocessedRequestWarning {
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fc0;
|
||||||
|
color: rgb(var(--ink-80));
|
||||||
|
stroke: rgb(var(--ink-80));
|
||||||
|
display: none;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: var(--font-size-smaller);
|
||||||
|
padding: var(--popup-gap-thin);
|
||||||
|
}
|
||||||
|
:root.warn #unprocessedRequestWarning {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#unprocessedRequestWarning > .dismiss {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: calc(var(--font-size) - 2px);
|
||||||
|
}
|
||||||
|
#unprocessedRequestWarning > .dismiss > svg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#moreOrLess {
|
#moreOrLess {
|
||||||
column-gap: 0;
|
column-gap: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -496,9 +496,10 @@ const popupDataFromTabId = function(tabId, tabTitle) {
|
|||||||
popupPanelDisabledSections: µbhs.popupPanelDisabledSections,
|
popupPanelDisabledSections: µbhs.popupPanelDisabledSections,
|
||||||
popupPanelLockedSections: µbhs.popupPanelLockedSections,
|
popupPanelLockedSections: µbhs.popupPanelLockedSections,
|
||||||
popupPanelHeightMode: µbhs.popupPanelHeightMode,
|
popupPanelHeightMode: µbhs.popupPanelHeightMode,
|
||||||
tabId: tabId,
|
tabId,
|
||||||
tabTitle: tabTitle,
|
tabTitle,
|
||||||
tooltipsDisabled: µbus.tooltipsDisabled
|
tooltipsDisabled: µbus.tooltipsDisabled,
|
||||||
|
hasUnprocessedRequest: vAPI && vAPI.net.hasUnprocessedRequest(tabId),
|
||||||
};
|
};
|
||||||
|
|
||||||
if ( µbhs.uiPopupConfig !== 'unset' ) {
|
if ( µbhs.uiPopupConfig !== 'unset' ) {
|
||||||
@ -647,6 +648,11 @@ const onMessage = function(request, sender, callback) {
|
|||||||
let response;
|
let response;
|
||||||
|
|
||||||
switch ( request.what ) {
|
switch ( request.what ) {
|
||||||
|
case 'dismissUnprocessedRequest':
|
||||||
|
vAPI.net.removeUnprocessedRequest(request.tabId);
|
||||||
|
µb.updateToolbarIcon(request.tabId, 0b110);
|
||||||
|
break;
|
||||||
|
|
||||||
case 'hasPopupContentChanged': {
|
case 'hasPopupContentChanged': {
|
||||||
const pageStore = µb.pageStoreFromTabId(request.tabId);
|
const pageStore = µb.pageStoreFromTabId(request.tabId);
|
||||||
const lastModified = pageStore ? pageStore.contentLastModified : 0;
|
const lastModified = pageStore ? pageStore.contentLastModified : 0;
|
||||||
|
@ -133,7 +133,9 @@ const hashFromPopupData = function(reset = false) {
|
|||||||
if ( reset ) {
|
if ( reset ) {
|
||||||
cachedPopupHash = hash;
|
cachedPopupHash = hash;
|
||||||
}
|
}
|
||||||
dom.cl.toggle(dom.body, 'needReload', hash !== cachedPopupHash);
|
dom.cl.toggle(dom.body, 'needReload',
|
||||||
|
hash !== cachedPopupHash || popupData.hasUnprocessedRequest === true
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
@ -673,6 +675,9 @@ const renderPopup = function() {
|
|||||||
total ? Math.min(total, 99).toLocaleString() : ''
|
total ? Math.min(total, 99).toLocaleString() : ''
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Unprocesseed request(s) warning
|
||||||
|
dom.cl.toggle(dom.root, 'warn', popupData.hasUnprocessedRequest === true);
|
||||||
|
|
||||||
dom.cl.toggle(dom.html, 'colorBlind', popupData.colorBlindFriendly === true);
|
dom.cl.toggle(dom.html, 'colorBlind', popupData.colorBlindFriendly === true);
|
||||||
|
|
||||||
setGlobalExpand(popupData.firewallPaneMinimized === false, true);
|
setGlobalExpand(popupData.firewallPaneMinimized === false, true);
|
||||||
@ -687,6 +692,17 @@ const renderPopup = function() {
|
|||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
|
dom.on('.dismiss', 'click', ( ) => {
|
||||||
|
messaging.send('popupPanel', {
|
||||||
|
what: 'dismissUnprocessedRequest',
|
||||||
|
tabId: popupData.tabId,
|
||||||
|
}).then(( ) => {
|
||||||
|
dom.cl.remove(dom.root, 'warn');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/******************************************************************************/
|
||||||
|
|
||||||
// https://github.com/gorhill/uBlock/issues/2889
|
// https://github.com/gorhill/uBlock/issues/2889
|
||||||
// Use tooltip for ARIA purpose.
|
// Use tooltip for ARIA purpose.
|
||||||
|
|
||||||
|
@ -62,6 +62,9 @@
|
|||||||
<a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
|
<a href="logger-ui.html#_" class="fa-icon tool enabled" target="uBOLogger" tabindex="0" data-i18n-title="popupTipLog">list-alt<span class="caption" data-i18n="popupTipLog"></span></a>
|
||||||
<a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></a>
|
<a href="dashboard.html" class="fa-icon tool enabled" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></a>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="unprocessedRequestWarning">
|
||||||
|
<span data-i18n="unprocessedRequestTooltip"></span><span class="dismiss"><svg viewBox="0 0 20 20"><path d="M0,0 20,20M0,20 20,0" /></svg></span>
|
||||||
|
</div>
|
||||||
<hr data-more="f">
|
<hr data-more="f">
|
||||||
<div class="itemRibbon" data-more="f">
|
<div class="itemRibbon" data-more="f">
|
||||||
<span data-i18n="popupVersion"></span><span id="version"></span>
|
<span data-i18n="popupVersion"></span><span id="version"></span>
|
||||||
|
Loading…
Reference in New Issue
Block a user