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

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.

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

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

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

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

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

@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

Cc also Matt. (please see comment #7) Honza

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

(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

(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

(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

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

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

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?

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

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

(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

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

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

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

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.

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

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?

(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

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.

(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

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