Replace toolbar icon tooltip with message section in panel

Related issue: - uBlockOrigin/uBlock-issues#2585 Related feedback: - https://www.reddit.com/r/uBlockOrigin/comments/126rn4f/yellow_toolbar_icon_exclamation_mark_badge/jfns0pc/
gorhill · Apr 10, 2023 · bf5f343 · bf5f343
1 parent dad862f
commit bf5f343
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>