The network tab should flag resources on the tracking protection list

RESOLVED FIXED in Firefox 63

Status

P3
normal
RESOLVED FIXED
2 years ago
2 months ago

People

(Reporter: francois, Assigned: Honza)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs, {dev-doc-complete})

unspecified
Firefox 63
dev-doc-complete
Dependency tree / graph
Bug Flags:
qe-verify -

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

2 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

Updated

2 years ago
Component: Developer Tools → Developer Tools: Netmonitor

Comment 1

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

Updated

2 years ago
Depends on: 1170190

Updated

2 years ago
Depends on: 1334241
@francois: Are there any docs/examples showing how to use: isTrackingResource, notifyTrackingResource, etc.?

Honza
Flags: needinfo?(francois)
Priority: -- → P3
(Reporter)

Comment 3

2 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?
Flags: needinfo?(francois) → needinfo?(ehsan)

Comment 4

2 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.)
Flags: needinfo?(ehsan)

Comment 5

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

Updated

2 years ago
See Also: → bug 1387681
(Reporter)

Updated

11 months ago
Blocks: 1460058
(Reporter)

Updated

11 months ago
See Also: → bug 1461524
(Reporter)

Updated

10 months ago
No longer blocks: 1460058

Updated

10 months ago
Product: Firefox → DevTools
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
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)

Comment 10

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

Comment 12

7 months ago
(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)
Posted 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
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

Comment 15

7 months 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?
Flags: needinfo?(mcroud)

Comment 16

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

Comment 19

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

Comment 21

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

Comment 25

7 months 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
(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)

Comment 27

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8221a40c73b0
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Keywords: dev-doc-needed

Updated

7 months ago
Depends on: 1487274
Depends on: 1487913

Comment 28

7 months 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.
Flags: needinfo?(odvarko)
Keywords: dev-doc-needed → dev-doc-complete

Comment 29

7 months ago
Ignore the previous message. Wrong Bug!! I have restored dev-doc-needed
Keywords: dev-doc-complete → dev-doc-needed
Flags: qe-verify-
Flags: needinfo?(odvarko)

Comment 30

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

Comment 33

6 months 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.
Flags: needinfo?(odvarko)
(Reporter)

Comment 34

6 months 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.

Comment 35

6 months 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.
Thanks Irene for updating the docs!

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

Honza
Flags: needinfo?(odvarko)

Comment 37

6 months 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.
Depends on: 1512027

Updated

2 months ago
Keywords: dev-doc-needed → dev-doc-complete
You need to log in before you can comment on or make changes to this bug.