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/

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 });
         }
 

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;

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;

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.
 

src/popup-fenix.html

@@ -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="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 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">
         <div class="itemRibbon" data-more="f">
             <span data-i18n="popupVersion"></span><span id="version"></span>