Closed Bug 1333994 Opened 4 years ago Closed 2 years ago

The network tab should flag resources on the tracking protection list

Categories

(DevTools :: Netmonitor, defect, P3)

defect

Tracking

(firefox63 fixed)

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: francois, Assigned: Honza)

References

(Depends on 1 open bug, Blocks 2 open bugs)

Details

(Keywords: dev-doc-complete)

Attachments

(3 files, 1 obsolete file)

Now that bug 1170190 has landed (currently behind the privacy.trackingprotection.annotate_channels pref), we will start annotating channels with whether or not they are from a URL on the tracking protection list.

We should flag these trackers in the network tab of the devtools to help developers know which resources might be blocked and avoid having their sites break when these resources are missing.

For example, that could be a tracking icon next to the hostname in the "domain" column. It could link to the MDN page on tracking protection: https://developer.mozilla.org/Firefox/Privacy/Tracking_Protection
Component: Developer Tools → Developer Tools: Netmonitor
FWIW the only reason privacy.trackingprotection.annotate_channels is off right now is that nothing that is turned on needs to use it.  We can turn it on whenever we want, as the only thing controlled by the pref is whether the channels are annotated, and it shouldn't affect anything else right now.
Depends on: 1170190
Depends on: 1334241
@francois: Are there any docs/examples showing how to use: isTrackingResource, notifyTrackingResource, etc.?

Honza
Flags: needinfo?(francois)
Priority: -- → P3
(In reply to Jan Honza Odvarko [:Honza] from comment #2)
> @francois: Are there any docs/examples showing how to use:
> isTrackingResource, notifyTrackingResource, etc.?

I don't think any users of that code have landed yet. Ehsan?
Flags: needinfo?(francois) → needinfo?(ehsan)
They have!  Let me explain how to use the API.

Firstly, you want to make sure that the channel in question is loaded with the LOAD_CLASSIFY_URI load flag.  This load flag tells Necko to try to classify the channel, and if the channel doesn't have this load flag it will not be classified as tracking.  Most of the channels that we open on behalf of Web Content should already have this load flag.

On such a channel, once the connection has been establised, you can QI to nsIHttpChannel and then check the isTrackingResource property <http://searchfox.org/mozilla-central/rev/8fa84ca6444e2e01fb405e078f6d2c8da0e55723/netwerk/protocol/http/nsIHttpChannel.idl#472>.  If the channel has loaded a tracking resource, this property will be true.  Note that in private windows where we enable tracking protection, the load of these channels is canceled with the NS_ERROR_TRACKING_URI error, so you shouldn't see any channels that haven't been canceled and return true from isTrackingResource.

You don't need to call anything else to get this to work.  For example, notifyTrackingResource is an internal function you shouldn't need to call.

As an example, you can see the unit test for this feature <http://searchfox.org/mozilla-central/rev/8fa84ca6444e2e01fb405e078f6d2c8da0e55723/netwerk/test/unit/test_trackingProtection_annotateChannels.js#36> where this property is accessed in the onStartRequest handler (since at that point the connection has been established.)
Flags: needinfo?(ehsan)
(Also note that I just landed bug 1334241 on inbound so the pref is on right now.)
See Also: → 1387681
Blocks: antitracking
See Also: → 1461524
No longer blocks: antitracking
Product: Firefox → DevTools
FYI: I was testing API mentioned in comment #4 (nsIHTTPChannel.isTrackingResource) and it works as expected.

Honza
Attached image tracking-resources.jpg
@Victoria: the Network panel should visually mark resources that are being tracked by Tracking Protection feature.

The idea is to use an icon and put it after (or before) the host name in the Domain column.

I made a quick mockup - using the icon Firefox is shows in the URL bar (you can load e.g. cnn.com to see the icon). I like using a 'standard' icons, but it feels a bit too big on that mockup (comparing to the padlock) and also I am not sure if this is what we want.

What do you think we could do here?
Any better ideas?

Honza
Flags: needinfo?(victoria)
Cc also Matt.
(please see comment #7)

Honza
Flags: needinfo?(mcroud)
No longer blocks: 1462372
Thanks Honza, Matt has created some designs for this and he will post them soon.
Flags: needinfo?(victoria)
(In reply to Jan Honza Odvarko [:Honza] from comment #8)
> Cc also Matt.
> (please see comment #7)
> 
> Honza

Hi Honza,

My initial ideas are currently being discussed with the UX team on Slack for feedback, I've also plopped it on Invision for you: https://mozilla.invisionapp.com/share/WENLM2BKFCH
Flags: needinfo?(mcroud)
(In reply to Matthew Croud from comment #10)
> My initial ideas are currently being discussed with the UX team on Slack for
> feedback, I've also plopped it on Invision for you:
> https://mozilla.invisionapp.com/share/WENLM2BKFCH

This looks great Matt!

Could I get the blocking icon (between the SSL padlock and domain name) as SVG?

Honza
Flags: needinfo?(mcroud)
(In reply to Jan Honza Odvarko [:Honza] from comment #11)
> (In reply to Matthew Croud from comment #10)
> > My initial ideas are currently being discussed with the UX team on Slack for
> > feedback, I've also plopped it on Invision for you:
> > https://mozilla.invisionapp.com/share/WENLM2BKFCH
> 
> This looks great Matt!
> 
> Could I get the blocking icon (between the SSL padlock and domain name) as
> SVG?
> 
> Honza

Absolutely, I used two variants with slightly different line thicknesses so have them both:
Shield 2x thickness: https://drive.google.com/file/d/1Ruh7uQiWyLjpjHwLReVUE_HUOKYe9MEX/view?usp=sharing
Shield 4x thickness: https://drive.google.com/file/d/1A7wrBmQ0fxMK0P0WWc4adHImixkRdDXm/view?usp=sharing
Flags: needinfo?(mcroud)
Attached image tracking-resources2.jpg (obsolete) —
Thanks!

I used the "Shield 4x thickness" and changed its size to 10x14.
Screenshot attached.

But, your mockup looks better. Is it because I changed the size.
Perhaps the entire SVG (the path) should be adopted to the new size?

Honza
Flags: needinfo?(mcroud)
Attachment #9002516 - Attachment is obsolete: true
Attached image tracking-resources3.jpg
Sorry, I uploaded wrong screenshot.

Attaching the latest one.

- I put both icons (padlock and shield) a bit closer together to save a few pixels of space.
- The changed the size of the shield icon to 12x14px

Please, let me know if I should change something.

Honza
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
It could be a mixture between the Sketch default export and the fact the SVG's have been resized.
I've made the shields Photon compliant in Illy by fitting them in a 12 x 12 grid so the SVG below shouldn't need resizing and will fit neatly as a 12px x 12px square: 

https://drive.google.com/file/d/1ax3wyMmWuko7LrskVY426lD5irA4qGXt/view?usp=sharing

Looking at your attachement, the only think I would mention is that in the mockup I aligned the left side of the shield icon with the vertical column of "www"s, so you should be able to draw a line down the page and have the shield left aligned with the first "w" (or whatever character) in the domain name list. 

I'm not having much luck finding the network panel on Github, does it live there?
Flags: needinfo?(mcroud)
Sorry Honza, there's ongoing conversation in Firefox DevTools #ux Slack as to whether a shield is an appropriate icon for simply signifying a tracker as opposed to Firefox having defended or blocked it. I wouldn't want you to spend time placing an icon which might be replaced, Although if the above icon looks good in place then at least I know how to set up the approved icon going forward. Regardless I'll let you know how the discussion goes.
(In reply to Matthew Croud from comment #15)
> I'm not having much luck finding the network panel on Github, does it live
> there?
Nope, it lives in m-c
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor

(In reply to Matthew Croud from comment #16)
> Sorry Honza, there's ongoing conversation in Firefox DevTools #ux Slack as
> to whether a shield is an appropriate icon for simply signifying a tracker
> as opposed to Firefox having defended or blocked it. I wouldn't want you to
> spend time placing an icon which might be replaced, Although if the above
> icon looks good in place then at least I know how to set up the approved
> icon going forward. Regardless I'll let you know how the discussion goes.
I see, thanks for the heads up!
Please keep me updated, I am NI you, so it's on your radar.

There is soft-freeze on Thursday. I was hoping we can land this one yet in 64.

Thanks for the help!
Honza
Flags: needinfo?(mcroud)
(In reply to Jan Honza Odvarko [:Honza] from comment #17)
> There is soft-freeze on Thursday. I was hoping we can land this one yet in
> 64.

I meant 63

Honza
Updated designs attached, currently getting opinions from #UX on which combination they prefer. There were previous comments on using the existing tracking protection icon for clarity, My personal preference is A or B but I'll be getting more feedback as the day goes on.
Flags: needinfo?(mcroud)
(In reply to Matthew Croud from comment #19)
> Created attachment 9003071 [details]
> highlight-trackers-2.png
> 
> Updated designs attached, currently getting opinions from #UX on which
> combination they prefer. There were previous comments on using the existing
> tracking protection icon for clarity, My personal preference is A or B but
> I'll be getting more feedback as the day goes on.

Thanks for the mockups, they look great!

As I mentioned on Slack, I think that grey is just fine. I don't think that trackers represent an issue the user should be warned about. But, I don't have strong opinion.

Honza
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ab8b409edb0e
The network tab should flag resources on the tracking protection list; r=ochameau
Follow up bug 1485416 reported to cover the part in the Headers side panel.

Honza
There were also dt failures "DevToolsUtils.assert threw an exception: Error: Assertion failure: Actor should have an actorID"
Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=195340563&repo=autoland&lineNumber=2606
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8221a40c73b0
The network tab should flag resources on the tracking protection list; r=ochameau
(In reply to Narcis Beleuzu [:NarcisB] from comment #24)
> There were also dt failures "DevToolsUtils.assert threw an exception: Error:
> Assertion failure: Actor should have an actorID"
> Log link:
> https://treeherder.mozilla.org/logviewer.
> html#?job_id=195340563&repo=autoland&lineNumber=2606
This intermittent has been already reported as bug 1483676

(In reply to Narcis Beleuzu [:NarcisB] from comment #23)
> Backed out for dt failures on browser_webconsole_check_stubs_network_event. 
> Log link:
> https://treeherder.mozilla.org/logviewer.
> html#?job_id=195340771&repo=autoland&lineNumber=4807

Fixed, re-landing.

Honza
Flags: needinfo?(odvarko)
https://hg.mozilla.org/mozilla-central/rev/8221a40c73b0
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Depends on: 1487274
Depends on: 1487913
Added this text to the Browser Console page (https://developer.mozilla.org/en-US/docs/Tools/Browser_Console):

Restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

Also added a note to the 61 release notes:

The Browser Console now includes a command to restart the browser. Use Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) to restart the browser with the same tabs open as before the restart.
Flags: needinfo?(odvarko)
Ignore the previous message. Wrong Bug!! I have restored dev-doc-needed
Flags: qe-verify-
Flags: needinfo?(odvarko)
This time I have a question about this bug...

I'm looking at the Network tab, and what I'm seeing doesn't match any of the attached screenshots. The icon shows up as described above, but there is no message of any kind in the details area about it the URL matching a known tracker. Was that a change in intention or is there something I should be activating that I haven't yet?

And the message we want to send to users of the DevTools is that they would want to check for resources that would break their site if the end user has tracking protection turned on? Or am I missing something else?
Flags: needinfo?(odvarko)
(In reply to Irene Smith from comment #30)
> This time I have a question about this bug...
> 
> I'm looking at the Network tab, and what I'm seeing doesn't match any of the
> attached screenshots. The icon shows up as described above, but there is no
> message of any kind in the details area about it the URL matching a known
> tracker. Was that a change in intention or is there something I should be
> activating that I haven't yet?
The message displayed in the Headers panel (the details area) should
be added in bug 1485416

Sorry, I should have lined to that followup to make this clear.

> And the message we want to send to users of the DevTools is that they would
> want to check for resources that would break their site if the end user has
> tracking protection turned on? Or am I missing something else?
Yes, precisely.

Honza
Flags: needinfo?(odvarko)
There is yet one follow-up: bug 1485604
This bug suggests some further improvements.

Honza
Added an updated screenshot to the section of the page about the network security icons (https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor) under the section "Security icons".

Added a closeup of the existing icon and this text to the table: "Indicates that the URL belongs to a known tracker that would be blocked with content blocking enabled."

Also added the following paragraph under the table:

It is important to turn off tracking protection when testing a web page to identify resources that would break the site when the end user has tracking protection turned on.

I am aware that the entire page needs updated images. I am also planning on breaking up the page into an over page and multiple sub-pages to make the content more accessible.
Flags: needinfo?(odvarko)
(In reply to Irene Smith from comment #33)
> Also added the following paragraph under the table:
> 
> It is important to turn off tracking protection when testing a web page to
> identify resources that would break the site when the end user has tracking
> protection turned on.

I'm not sure about this part.

If developers have tracking protection enabled while testing their page, they will see exactly what end users will see when they enable tracking protection. That's even better than looking for the icons in the network tab IMHO.
Yes.  Note that Tracking Protection is turned on by default in private windows, so it's a rather usual way for people to browse websites in Firefox.
Thanks Irene for updating the docs!

I agree with comment #34 and #35 I think you can remove it.

Honza
Flags: needinfo?(odvarko)
(In reply to Jan Honza Odvarko [:Honza] from comment #36)
> Thanks Irene for updating the docs!
> 
> I agree with comment #34 and #35 I think you can remove it.
> 
> Honza

Removed the suggested paragraph.
Depends on: 1512027
Duplicate of this bug: 1545739
You need to log in before you can comment on or make changes to this bug.