diff --git a/platform/common/vapi-background.js b/platform/common/vapi-background.js index 1c971f9e1c1f0..6bbfd075d7549 100644 --- a/platform/common/vapi-background.js +++ b/platform/common/vapi-background.js @@ -732,7 +732,6 @@ if ( webext.browserAction instanceof Object ) { { const browserAction = vAPI.browserAction; const titleTemplate = `${browser.runtime.getManifest().browser_action.default_title} ({badge})`; - const browserLaunchIssue = browser.i18n.getMessage('unprocessedRequestTooltip'); const icons = [ { path: { '16': 'img/icon_16-off.png', @@ -866,10 +865,9 @@ if ( webext.browserAction instanceof Object ) { // - the platform does not support browserAction.setIcon(); OR // - the rendering of the badge is disabled if ( browserAction.setTitle !== undefined ) { - const title = hasUnprocessedRequest && browserLaunchIssue || - titleTemplate.replace('{badge}', - state === 1 ? (badge !== '' ? badge : '0') : 'off' - ); + const title = titleTemplate.replace('{badge}', + state === 1 ? (badge !== '' ? badge : '0') : 'off' + ); browserAction.setTitle({ tabId: tab.id, title }); } diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 28672bc5356b4..94a4ea20989e0 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -202,7 +202,7 @@ body.needSave #revertRules { margin-top: 6px; text-align: center; } -body.mobile.no-tooltips .toolRibbon .tool { +:root.mobile.no-tooltips .toolRibbon .tool { font-size: 1.6em; } @@ -228,6 +228,27 @@ body.mobile.no-tooltips .toolRibbon .tool { 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 { column-gap: 0; display: grid; diff --git a/src/js/messaging.js b/src/js/messaging.js index 4bfb82ee974a3..8565d24ced57c 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -496,9 +496,10 @@ const popupDataFromTabId = function(tabId, tabTitle) { popupPanelDisabledSections: µbhs.popupPanelDisabledSections, popupPanelLockedSections: µbhs.popupPanelLockedSections, popupPanelHeightMode: µbhs.popupPanelHeightMode, - tabId: tabId, - tabTitle: tabTitle, - tooltipsDisabled: µbus.tooltipsDisabled + tabId, + tabTitle, + tooltipsDisabled: µbus.tooltipsDisabled, + hasUnprocessedRequest: vAPI && vAPI.net.hasUnprocessedRequest(tabId), }; if ( µbhs.uiPopupConfig !== 'unset' ) { @@ -647,6 +648,11 @@ const onMessage = function(request, sender, callback) { let response; switch ( request.what ) { + case 'dismissUnprocessedRequest': + vAPI.net.removeUnprocessedRequest(request.tabId); + µb.updateToolbarIcon(request.tabId, 0b110); + break; + case 'hasPopupContentChanged': { const pageStore = µb.pageStoreFromTabId(request.tabId); const lastModified = pageStore ? pageStore.contentLastModified : 0; diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index 1849a7aa9561d..b78c0b35a7e23 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -133,7 +133,9 @@ const hashFromPopupData = function(reset = false) { if ( reset ) { 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() : '' ); + // Unprocesseed request(s) warning + dom.cl.toggle(dom.root, 'warn', popupData.hasUnprocessedRequest === true); + dom.cl.toggle(dom.html, 'colorBlind', popupData.colorBlindFriendly === 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 // Use tooltip for ARIA purpose. diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 9cf700c2d5154..b6180f6b97a9f 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -62,6 +62,9 @@ list-alt cogs +
+ +