François Marier [:francois] Reporter
	Description • 7 years ago

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

	(no longer active)
	Comment 1 • 7 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 2 • 7 years ago

@francois: Are there any docs/examples showing how to use: isTrackingResource, notifyTrackingResource, etc.?

Honza

	François Marier [:francois] Reporter
	Comment 3 • 7 years ago

(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?

	(no longer active)
	Comment 4 • 7 years ago

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.)

	(no longer active)
	Comment 5 • 7 years ago

(Also note that I just landed bug 1334241 on inbound so the pref is on right now.)

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 6 • 6 years ago

FYI: I was testing API mentioned in comment #4 (nsIHTTPChannel.isTrackingResource) and it works as expected.

Honza

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 7 • 6 years ago

@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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 8 • 6 years ago

Cc also Matt.
(please see comment #7)

Honza

	Victoria Wang [:victoria]
	Comment 9 • 6 years ago

Thanks Honza, Matt has created some designs for this and he will post them soon.

	mcroud
	Comment 10 • 6 years ago

(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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 11 • 6 years ago • Edited

(In reply to mcroud 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

	mcroud
	Comment 12 • 6 years ago • Edited

(In reply to Jan Honza Odvarko [:Honza] from comment #11)
> (In reply to mcroud 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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 13 • 6 years ago

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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 14 • 6 years ago

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

	mcroud
	Comment 15 • 6 years ago

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?

	mcroud
	Comment 16 • 6 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 17 • 6 years ago • Edited

(In reply to mcroud 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 mcroud 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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 18 • 6 years ago

(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

	mcroud
	Comment 19 • 6 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 20 • 6 years ago • Edited

(In reply to mcroud 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

	Pulsebot
	Comment 21 • 6 years ago

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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 22 • 6 years ago

Follow up bug 1485416 reported to cover the part in the Headers side panel.

Honza

	Narcis Beleuzu [:NarcisB]
	Comment 23 • 6 years ago

Backed out for dt failures on browser_webconsole_check_stubs_network_event. 

Backout link: https://hg.mozilla.org/integration/autoland/rev/eab9b539b249646a7c4f9f6384e834dfdba4af9a
Push link: https://hg.mozilla.org/integration/autoland/rev/ab8b409edb0eb65164855cc3d237cf767fb382a5
Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=195340771&repo=autoland&lineNumber=4807

	Narcis Beleuzu [:NarcisB]
	Comment 24 • 6 years ago

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

	Pulsebot
	Comment 25 • 6 years ago

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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 26 • 6 years ago

(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

	Cosmin Sabou [:CosminS]
	Comment 27 • 6 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/8221a40c73b0

	Irene Smith
	Comment 28 • 6 years ago

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.

	Irene Smith
	Comment 29 • 6 years ago

Ignore the previous message. Wrong Bug!! I have restored dev-doc-needed

	Irene Smith
	Comment 30 • 6 years ago

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?

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 31 • 6 years ago

(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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 32 • 6 years ago

There is yet one follow-up: bug 1485604
This bug suggests some further improvements.

Honza

	Irene Smith
	Comment 33 • 6 years ago

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.

	François Marier [:francois] Reporter
	Comment 34 • 6 years ago

(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.

	(no longer active)
	Comment 35 • 6 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 36 • 6 years ago

Thanks Irene for updating the docs!

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

Honza

	Irene Smith
	Comment 37 • 6 years ago

(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.