Closed Bug 1471713 Opened 6 years ago Closed 6 years ago

Add an animation for the tracking protection icon

Categories

(Firefox :: Site Identity, enhancement, P1)

Product:
Firefox
Component:
Site Identity
Type:
enhancement

Tracking

()

Status:
VERIFIED FIXED
Milestone:
Firefox 63
Tracking Flags:
Tracking Status
firefox63 --- verified

People

(Reporter: johannh, Assigned: johannh)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Bug 1471713 - Add an animation for the tracking protection icon.
59 bytes, text/x-review-board-request
sfoster
: review+
Details
tracking-protection-animation.svg (de-duplicated paths)
85.54 KB, image/svg+xml
Details 
(Quoting Tanvi Vyas - ooo[:tanvi] from bug 1465228 comment #0)
> Users who have TP on and experience breakage may not see the Shield in the
> URL bar.  If we animated it, it may be more discoverable.
> 
> This bug is to create a design for such an animation.  Then we can have a
> separate implementation bug.
> 
> We also need to define when the animation should appear (ex: all the time,
> first 5 times trackers are blocked, every few days, until the user opens
> control center for the first time, etc etc etc).

This is the implementation bug.
UX said they'd like to start off with showing the animation all the time (I personally think it may get a little annoying after a while, so we should keep an eye on that).

There are three colors in this animation, the regular identity block icon grey, a pink-ish overlay and the "tracking protection" purple. I only made two of these controlled by context-fill for now and didn't provide any color change for dark mode. I think it looks fine enough in dark theme to land it for now and get some input for adjusting the colors later, if needed.
(Manually) eliminated lots of duplicated paths. I have a start on a plugin to do this but haven't given it time to get it finished. Makes a big difference in the filesize and no negative runtime consequences that I have observed.
Comment on attachment 8990135 [details]
Bug 1471713 - Add an animation for the tracking protection icon.

https://reviewboard.mozilla.org/r/255140/#review263168

This looks great. No quibbles with the animation implementation. I did attach a version of the svg you might want to swap in that takes it down to ~80k vs. 200k.
I know the animation itself isnt very practical to test for, but maybe a test to verify the cosmeticAnimation pref is doing its thing might be worthwhile? r+ as that can be a follow-up.
Attachment #8990135 - Flags: review?(sfoster) → review+
Cool, thanks, that looks like an improvement to me!

> I know the animation itself isnt very practical to test for, but maybe a test to verify the cosmeticAnimation pref is doing its thing might be worthwhile? r+ as that can be a follow-up.

I'll add a test to this patch, shouldn't be hard
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s c7e67d125d5db27246eb426ea7db9ea62674a9a2 -d d610dd7bfbcd: rebasing 472441:c7e67d125d5d "Bug 1471713 - Add an animation for the tracking protection icon. r=sfoster" (tip)
merging browser/base/content/browser.js
merging browser/base/content/browser.xul
merging browser/base/content/test/trackingUI/browser_trackingUI_state.js
warning: conflicts while merging browser/base/content/test/trackingUI/browser_trackingUI_state.js! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
Pushed by jhofmann@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/66d9b0f57c81
Add an animation for the tracking protection icon. r=sfoster
Backed out changeset 66d9b0f57c81 (bug 1471713) for build bustage 

Backout: https://hg.mozilla.org/integration/autoland/rev/6328ec03933623db13897541c2d7f285608742b9

Failure push: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=66d9b0f57c81576e0e43c2a4415078b82721dda6

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=187762387&repo=autoland&lineNumber=941

task 2018-07-12T07:22:37.562Z] 07:22:37     INFO -    File "/builds/worker/workspace/build/src/python/mozbuild/mozbuild/frontend/emitter.py", line 1319, in emit_from_context
[task 2018-07-12T07:22:37.563Z] 07:22:37     INFO -      for obj in self._process_test_manifests(context):
[task 2018-07-12T07:22:37.563Z] 07:22:37     INFO -    File "/builds/worker/workspace/build/src/python/mozbuild/mozbuild/frontend/emitter.py", line 1440, in _process_test_manifests
[task 2018-07-12T07:22:37.563Z] 07:22:37     INFO -      for obj in self._process_test_manifest(context, info, path, manifest):
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -    File "/builds/worker/workspace/build/src/python/mozbuild/mozbuild/frontend/emitter.py", line 1553, in _process_test_manifest
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -      context)
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  mozbuild.frontend.reader.SandboxValidationError:
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  ==============================
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  FATAL ERROR PROCESSING MOZBUILD FILE
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  ==============================
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  The error occurred while processing the following file or one of the files it includes:
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -      /builds/worker/workspace/build/src/browser/base/moz.build
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -  The error occurred when validating the result of the execution. The reported error is:
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -      Error processing test manifest file /builds/worker/workspace/build/src/browser/base/content/test/trackingUI/browser.ini: Traceback (most recent call last):
[task 2018-07-12T07:22:37.564Z] 07:22:37     INFO -        File "/builds/worker/workspace/build/src/python/mozbuild/mozbuild/frontend/emitter.py", line 1482, in _process_test_manifest
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -          path, ', '.join(missing)), context)
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      SandboxValidationError:
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      ==============================
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      FATAL ERROR PROCESSING MOZBUILD FILE
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      ==============================
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      The error occurred while processing the following file or one of the files it includes:
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -          /builds/worker/workspace/build/src/browser/base/moz.build
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -      The error occurred when validating the result of the execution. The reported error is:
[task 2018-07-12T07:22:37.565Z] 07:22:37     INFO -          Test manifest (/builds/worker/workspace/build/src/browser/base/content/test/trackingUI/browser.ini) lists test that does not exist: browser_trackingUI_animation.js
[task 2018-07-12T07:22:38.002Z] 07:22:38     INFO -  *** Fix above errors and then restart with\
[task 2018-07-12T07:22:38.002Z] 07:22:38     INFO -                 "/usr/bin/make -f client.mk build"
[task 2018-07-12T07:22:38.002Z] 07:22:38     INFO -  client.mk:123: recipe for target 'configure' failed
[task 2018-07-12T07:22:38.002Z] 07:22:38     INFO -  make: *** [configure] Error 1
[task 2018-07-12T07:22:38.082Z] 07:22:38    ERROR - Return code: 2
[task 2018-07-12T07:22:38.082Z] 07:22:38  WARNING - setting return code to 2
[task 2018-07-12T07:22:38.082Z] 07:22:38    FATAL - 'mach build -v' did not run successfully. Please check log for errors.
[task 2018-07-12T07:22:38.082Z] 07:22:38    FATAL - Running post_fatal callback...
[task 2018-07-12T07:22:38.082Z] 07:22:38    FATAL - Exiting -1
[task 2018-07-12T07:22:38.082Z] 07:22:38     INFO - [mozharness: 2018-07-12 07:22:38.082739Z] Finished build step (failed)
[task 2018-07-12T07:22:38.082Z] 07:22:38     INFO - Running post-run listener: _summarize
[task 2018-07-12T07:22:38.082Z] 07:22:38    ERROR - # TBPL FAILURE #
[task 2018-07-12T07:22:38.083Z] 07:22:38     INFO - [mozharness: 2018-07-12 07:22:38.082972Z] FxDesktopBuild summary:
[task 2018-07-12T07:22:38.083Z] 07:22:38    ERROR - # TBPL FAILURE #
Flags: needinfo?(jhofmann)
Duh, forgot to check in the test...
Flags: needinfo?(jhofmann)
Pushed by jhofmann@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/27335463acd1
Add an animation for the tracking protection icon. r=sfoster
Backed out changeset 27335463acd1 (bug 1471713) for browser-chrome failures at browser/components/uitour/test/browser_trackingProtection.js

Backout: https://hg.mozilla.org/integration/autoland/rev/32389e41f1ce0f5288a3883c27a51ea8376abb77

Failure push: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=27335463acd1c7da4bd3a2441d8e6a657315cb75&selectedJob=187797020

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=187797020&repo=autoland&lineNumber=2628

11:05:26     INFO -  403 INFO TEST-START | browser/components/uitour/test/browser_trackingProtection.js
11:05:33     INFO -  TEST-INFO | started process screenshot
11:05:33     INFO -  TEST-INFO | screenshot: exit 0
11:05:33     INFO -  Buffered messages logged at 11:05:26
11:05:33     INFO -  404 INFO Entering test bound setup_test
11:05:33     INFO -  405 INFO Leaving test bound setup_test
11:05:33     INFO -  406 INFO Entering test bound test_benignPage
11:05:33     INFO -  407 INFO Load a test page not containing tracking elements
11:05:33     INFO -  Buffered messages logged at 11:05:29
11:05:33     INFO -  408 INFO TEST-PASS | browser/components/uitour/test/browser_trackingProtection.js | Info panel didn't appear on a benign page -
11:05:33     INFO -  409 INFO Leaving test bound test_benignPage
11:05:33     INFO -  410 INFO Entering test bound test_trackingPages
11:05:33     INFO -  411 INFO Load a test page containing tracking elements
11:05:33     INFO -  412 INFO Console message: [JavaScript Warning: "The resource at “http://tracking.example.com/” was blocked because tracking protection is enabled." {file: "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html" line: 0}]
11:05:33     INFO -  Buffered messages finished
11:05:33    ERROR -  413 INFO TEST-UNEXPECTED-FAIL | browser/components/uitour/test/browser_trackingProtection.js | Timeout waiting for popup at anchor: Intro panel should appear -
11:05:33     INFO -  Stack trace:
11:05:33     INFO -  chrome://mochitests/content/browser/browser/components/uitour/test/head.js:waitForCondition/<:39
11:05:33     INFO -  setTimeout handler*chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest_setTimeoutShim:676
11:05:33     INFO -  chrome://mochitests/content/browser/browser/components/uitour/test/head.js:checkCondition:30
11:05:33     INFO -  setTimeout handler*chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest_setTimeoutShim:676
Flags: needinfo?(jhofmann)
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s b6c4d03b54016a1534f02740cd1a9d6759427fe3 -d 3e71248ff093: rebasing 472496:b6c4d03b5401 "Bug 1471713 - Add an animation for the tracking protection icon. r=sfoster" (tip)
merging browser/base/content/browser-trackingprotection.js
merging browser/base/content/browser.js
merging browser/base/content/browser.xul
merging browser/base/content/test/general/browser_trackingUI_4.js
merging browser/base/content/test/general/browser_trackingUI_5.js
merging browser/base/content/test/general/browser_trackingUI_6.js
merging browser/base/content/test/trackingUI/browser.ini
merging browser/base/content/test/trackingUI/browser_trackingUI_open_preferences.js
merging browser/base/content/test/trackingUI/browser_trackingUI_reload_hint.js
merging browser/base/content/test/trackingUI/browser_trackingUI_state.js
merging browser/base/content/test/trackingUI/head.js
merging browser/themes/shared/identity-block/identity-block.inc.css
merging browser/themes/shared/jar.inc.mn
warning: conflicts while merging browser/base/content/browser-trackingprotection.js! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
Flags: needinfo?(jhofmann)
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s bbf69a8b3724e800b6a41542c43e87135559a46e -d 1d78b255d77b: rebasing 472499:bbf69a8b3724 "Bug 1471713 - Add an animation for the tracking protection icon. r=sfoster" (tip)
merging browser/base/content/browser-trackingprotection.js
merging browser/base/content/browser.js
merging browser/base/content/browser.xul
merging browser/base/content/test/general/browser_trackingUI_4.js
merging browser/base/content/test/general/browser_trackingUI_5.js
merging browser/base/content/test/general/browser_trackingUI_6.js
merging browser/base/content/test/trackingUI/browser.ini
merging browser/base/content/test/trackingUI/browser_trackingUI_open_preferences.js
merging browser/base/content/test/trackingUI/browser_trackingUI_reload_hint.js
merging browser/base/content/test/trackingUI/browser_trackingUI_state.js
merging browser/base/content/test/trackingUI/head.js
merging browser/themes/shared/identity-block/identity-block.inc.css
merging browser/themes/shared/jar.inc.mn
warning: conflicts while merging browser/base/content/browser-trackingprotection.js! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
I'll wait until things have calmed down on autoland before landing this again...
Flags: needinfo?(jhofmann)
Pushed by jhofmann@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/540f0f87e031
Add an animation for the tracking protection icon. r=sfoster
Flags: needinfo?(jhofmann)
https://hg.mozilla.org/mozilla-central/rev/540f0f87e031
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Hi, I prefer to use the Tracking Protection Feature instead of using an Adblocker Extension, but this new icon animation is really annoying and distracting. Please keep this icon simple again. Thank you.
I found it funny that the animation (which looks awesome!) was so obtruding here on Bugzilla (oh the irony) that I had to reenable uBlock Origin. ;)
So I would plead for showing it with its current behavior (that the URL is slowly jumping to the right) only once after starting Firefox or after opening a window, to advertise this feature.
Otherwise it should be shown instantly as if the pref was set to false: Maybe still with that nice color change, maybe not.
I can confirm this enhancement is implemented, I verified using Fx 63.0a1, build ID: 20180722220044, on Windows 10 x64, Ubuntu 14.04 LTS and mac OS 10.13.5 beta.
Status: RESOLVED → VERIFIED
status-firefox63: fixed → verified
Depends on: 1478637
Depends on: 1506996
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: