Add 30 sec. countdown on the Browser Assistant icon (during `Do not filter for 30 seconds`)

[contribucious]

Hi, :wave:

  It might be a good idea IMHO to display the 30 second countdown on the extension icon, when using the Don't filter for 30 seconds option.

Useful, as we don't know where we are in time when we close the Browser Assistant popup and use the website. :relaxed:

:small_blue_diamond: Possible subtlety: trigger its display only when the popup is closed. This, in order to prevent a double display of the countdown while the popup is still open — i.e. on the extension icon + in the popup. And … leave it or not on the extension icon if/when the popup is reopened (up to you).  

Visual rendering

:arrow_right_hook: _Like this but with a gray shield and displaying 19s instead — if there are 19s left in the countdown for example. :hourglass_flowingsand:

:information_source: Versus blocking counter visually? In addition to the presence of the character "s", and the decrease every second clearly recognizable, all this in addition on a gray shield in this situation and as a result of the user's immediate own action, to be possibly even more visually distinct from a possible/probable future blocking counter — already present in AdGuard Browser extension —, just change the background color + text color + possibly round the corners or display it within a circle or an oval instead. And/Or … either display at his side an animated-or-not hourglass (:hourglass_flowing_sand:) or a vertical bar (such as a capital i) that decreases from top to bottom, or instead, if displayed within a circle, simply animate the "unfilling" of the border of the circle itself to show that a countdown is in progress.

:bulb: Future-proof: Once the 30s delay is over, the shield will turn green again (once this issue is fixed though) and … a potential future blocking counter will take over instead. To count the new blocked XHR & co requests for example. Not incompatible with the future, therefore. :heavy_check_mark:

 

---

Thank you in advance. :thumbsup:

Environment Browser Assistant 1.3.13 on Firefox 103.0.2 AdGuard 7.10.2 on Windows 10 Pro 21H2 (OS Build 19044.1865)

[contribucious]

:mag: Possible visual result

Main

View it …

 ([Source image](https://miro.medium.com/max/1200/1*w2BLYXPt7yMiPVKT2_HLvQ.gif) / [Source webpage](https://medium.com/swlh/unity-tips-simple-ui-countdown-81a16074c5d4)) — Ideal one (colors / font size to be adapted however). 3 characters in it.

Alternative

View it …

 ([Source image](https://www.jqueryscript.net/images/Circular-Countdown-Clock-Plugin-For-jQuery-CircularCountDownJs.jpg) / [Source webpage](https://www.jqueryscript.net/time-clock/Circular-Countdown-Clock-Plugin-For-jQuery-CircularCountDownJs.html)) — Simplified version, if there is not enough space for 3 characters. Pure graphic version (i.e. like this image but … _without_ any character inside). So, more [like so](https://user-images.githubusercontent.com/4764956/184336803-7a889d73-19c7-41ac-9ffd-b0c3bb404a6a.jpg) in fact ([source image](https://i.pinimg.com/originals/79/a1/34/79a1345034619d70145a13590aa23f96.jpg) / [source webpage](https://www.pinterest.com/pin/395331673518544248/)).

:up: Another alternative (variant, less visible in small size as a badge however)

View it …

 ([Source image](https://miro.medium.com/max/1838/0*rJgzoWGbdWAsBCU4.png) / [Source webpage](https://medium.com/@DrawandCode/how-to-draw-an-animated-timer-in-android-b4951304881e)) — Variant. Nothing inside either. Or possibly with a [stopwatch icon](https://www.google.com/search?q=stopwatch%20icon&tbm=isch) like :stopwatch: in it.

:new: Another one (2 big characters only)

View it …

 ([Source image](https://cdn1.vectorstock.com/i/1000x1000/20/15/circle-countdown-clock-counter-timer-on-white-vector-21552015.jpg) / [Source webpage](https://www.vectorstock.com/royalty-free-vector/circle-countdown-clock-counter-timer-on-white-vector-21552015)) — Like the bottom ones of this image, but without the text below them.    ([Source image](https://imagescdn.gettyimagesbank.com/500/18/277/128/0/1073158424.jpg) / [Source webpage](https://m.gettyimagesbank.com/view/countdown-clock-counter-timer-ui-app-digital-count-down-circle-board-meter-with-circle-time-pie-diagram-scoreboard-of-day-hour-minutes-and-seconds-for-web-page-coming-soon-event-template/1073158424)) — Almost the same as above but with a thicker font size. More visible.

[Birbber]

@contribucious Great idea, will consider implementing it.

[maximtop]

We can't style the badge as you proposed in the second comment.

[contribucious]

@maximtop

You're right. Badge is very limited in fact — unlike Icon — regarding animation.

Badge (chrome.browserAction.setBadgeText) seems OK for a countdown (30s … 29s … 28s …), but it's the Icon (chrome.browserAction.setIcon) that should be updated for a possible animation.

:gear: Although possible using canvas _(note: despite the generic "badge" word in the blog post title, technically it's the icon that is animated there)_ (source), this in order "to create more dynamic UIs", it's more typically used for a "loading" (i.e. perpetual spinning) icon visibly.

:arrow_right_hook: Need to see if possible regarding a possible "slow" countdown one, more adapted. Even possibly a very basic one like a "I" with 3 vertical bricks (like a "AA battery"): from 30 to 20 (3/3 shown), from 20 to 10 (2/3 shown), from 10 to 0 (1/3 shown).

But unfortunately, if I understand correctly, during the 30 seconds, the gray shield will have to be replaced by this animation (which uses canvas). We cannot have both at the same time, except … to create a very complex canvas.

[maximtop]

to create a very complex canvas.

I prefer it to be an easy solution

[contribucious]

Of course. I just mentioned this as a bonus, as the only possibility AFAIK to do this (i.e. to have both animation + keeping the gray shield icon), but not as a real de facto solution. :wink:

[zubrRB]

Keep in mind that there are plans to add blocked element statistics to the icon.

[contribucious]

@maximtop

I think the simplest and most adequate solution here will be just to update the badge itself (30s … 29s … 28s …) using chrome.browserAction.setBadgeText.

And possibly to use chrome.browserAction.setBadgeBackgroundColor with a more pronounced color during these 30 seconds to differentiate* from a future probable blocking counter to come (as already said in my issue, @zubrRB :wink:).  

---

* In addition to the "s" character (i.e. 30s vs 30) + the decreasing each second clearly recognizable + the "gray shield only" situation + the fact that this follows an immediate user action (i.e. clicking on Do not filter for 30 seconds). All already described in Versus blocking counter visually? and Future-proof parts of my issue.

[gork7777]

@Birbber @maximtop I edited the badge little. This contour will start at 12 o'clock and decrease clockwise. I think it could be better this way.

Badge


[contribucious]

@gork7777 Very nice one! :thumbsup: Although the icon should be gray during these 30 seconds (as it is now), since the protection is switched off during this time (action is Do not filter for 30 seconds). :wink:

@maximtop To avoid having to use canvas, especially because not required here (i.e. no "perpetual loading" icon with complex animation), could we imagine having simply 30x the static image of @gork7777 for each second of the countdown (i.e. icon-30s.png, icon-29s.png, …) and just updating this static image every second using chrome.browserAction.setIcon in an appropriate setInterval? — Ideally, without unpleasant flickering?

(And possibly, as a bonus to this already explicit visual, displaying the number of seconds like 29s using chrome.browserAction.setBadgeText and chrome.browserAction.setBadgeBackgroundColor?)

[contribucious]

Update

  If this feature sees the light of day, it is better to go for its light version.

Because unfortunately, here is what the Manifest V3 documentation says:

The action.setIcon() API is intended to set a static image. It should not be used to simulate animation.

And, just for info/context (source):

The chrome.action API replaced the browserAction and pageAction APIs in Manifest V3.