Highlight tracker in the Headers side panel

RESOLVED FIXED in Firefox 67

Status

enhancement
P3
normal
RESOLVED FIXED
Last year
3 months ago

People

(Reporter: Honza, Assigned: tanhengyeow, Mentored)

Tracking

({good-first-bug})

unspecified
Firefox 67
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox67 fixed)

Details

(Whiteboard: good-first-bug,)

Attachments

(5 attachments)

This is a follow up for bug 1333994.

The headers panel should render a note about tracker resources.

See this mockup:
https://bugzilla.mozilla.org/attachment.cgi?id=9003071&action=edit

Honza
Priority: -- → P3
Mentor: odvarko
Keywords: good-first-bug
Whiteboard: good-first-bug,
Attaching a mockup of the required UI.
This is the version we agreed on.
Honza
Some instructions for anyone interested in this bug:

1) Here is the file/component that represents the Headers side panel
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/HeadersPanel.js

2) Here is usage of the property that can be used to see whether a resource is tracker or not:
https://searchfox.org/mozilla-central/rev/dd965445ec47fbf3cee566eff93b301666bda0e1/devtools/client/netmonitor/src/components/RequestListColumnDomain.js#58

3) The Headers panel needs to check that prop and display the additional message (see the mockup for design)

Honza
It would not highlight and I was able to reproduce the error. Could I be assigned to this bug and get access to the docs?
Done!

Honza
Assignee: nobody → joshuaaguilar20
Status: NEW → ASSIGNED
@Joshua: any progress on this bug? Can I help you somehow?
Honza
Flags: needinfo?(joshuaaguilar20)
Assignee: joshuaaguilar20 → nobody
Status: ASSIGNED → NEW
Hello! 
I need some time to make sense, but I want to try.
Can I access the documents?
Yes, I would be interested!  Could I get assigned to the bug?
Flags: needinfo?(odvarko)
Assignee: nobody → jcjiang42
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)
(In reply to catherinelesnova from comment #7)
> Hello! 
> I need some time to make sense, but I want to try.
> Can I access the documents?
Hi!
not sure what documents do you have in mind...?
But if you are interested in fixing a bug and you are looking for first-good-bug, please look at this list: https://mzl.la/2zCcSFE You can pick a bug and post a comment saying that you want to be assigned to it.

Honza

Hi Jiachen

Are you still working on this? Do you require any assistance? :)

Flags: needinfo?(jcjiang42)

Include highlight tracker in the Headers side panel

Points to note:

  • Although the mockup places a Learn more hyperlink for users to find out more about Tracking Protection, I used the ? icon instead to ensure consistency between all other MDN helper links in the Headers panel.
  • How it looks on both light and dark themes are shown in the attached images.
Flags: needinfo?(jcjiang42) → needinfo?(odvarko)
Assignee: jcjiang42 → E0032242
Flags: needinfo?(odvarko)

Hi Honza

Also I have an interesting question that popped up in my mind while cracking on this bug. What is the ideal workflow for the netmonitor to pass data between components? Not necessarily between parent/child components but components living far apart from each other). I know there are 2 ways currently:

  1. Pass the value to the root parent component that manages both components that are affected using callbacks/states, then pass the value down to the desired child component
  2. Using react/redux

I guess the second way is preferred and I've seen some react/redux function calls in the codebase. But is there a more concrete example in the codebase I can refer to for this type of interaction?

Posted image image.png

Thanks for working on this!

See my attached screenshot. It would be great if the info (tracking icon + description + learn more icon) would be rendered on the same line -> to save space when the side bar is rather thinner.

Honza

(In reply to Heng Yeow (:tanhengyeow) from comment #15)

I guess the second way is preferred and I've seen some react/redux function calls in the codebase.

Yes

But is there a more concrete example in the codebase I can refer to for this type of interaction?

We are usually using Redux's connect method:
see e.g. here:
https://searchfox.org/mozilla-central/rev/dc0adc07db3df9431a0876156f50c65d580010cb/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js#76-86

module.exports = connect(
  (state) => ({
    activeTabId: state.ui.detailsPanelSelectedTab,
    request: getSelectedRequest(state),
  }),
  (dispatch) => ({
    cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
    selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
    toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
  }),
)(NetworkDetailsPanel);

This way you can access any data in the store/reducer and pass them as props in the component
You can also use selectors (e.g. getSelectedRequest from the example above), which might pre-proccess data and perhaps also memoize them.

We could also use 'react context', see:

It isn't utilized by Net panel yet, but I wouldn't be against that - for cases where Redux state is not applicable.

Honza

Hi Honza

Thanks for the detailed explanation!

I've updated the patch to not use flexbox, the reason why it behaved the way you saw in the screenshot. The desired behaviour can be seen now.

However, the items are slightly misaligned now because it can't be nicely aligned in the center using flexbox. I tried a few variations but the best way to keep the desired behaviour is to not use flexbox:
It would be great if the info (tracking icon + description + learn more icon) would be rendered on the same line -> to save space when the side bar is rather thinner.

Flags: needinfo?(odvarko)

Thanks for the update!

Some comments:

  1. Can we apply the following CSS props

.tracking-protection
// To increase spacing from other labels (I think the mockup is also using some spacing)
margin-top: 2px;
margin-bottom: 2px;

// .tracking-resource
// To improve the v-alignment a bit
vertical-align: middle;

  1. The tracking-resource icon should be white in both dark/light mode (just like if it's selected in the list of resources)

Honza

Flags: needinfo?(odvarko)

Hi Honza

Updated the patch! White doesn't go well with grey background so I used black instead (same as what mockup suggested). But I'm using white for dark mode.

Try results here:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=8a9cb00c43c40c82e7d5362949ae838ff0baf5b6

Flags: needinfo?(odvarko)

Looks great, thanks!

Landed

Honza

Flags: needinfo?(odvarko)
Flags: needinfo?(joshuaaguilar20)
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c68cc2526fbd
Highlight tracker in the Headers side panel. r=Honza
Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

On the headers section of the Network Request details page, I added the following information along with a screenshot:

Starting in Firefox 67, in addition to showing information about known trackers in the list, the request information section of the Headers panel also shows an icon and a message if the request is to a site that is associated with a known tracker ({{bug("1485416")}}).

Flags: needinfo?(E0032242)

Hi Irene

Thanks for the update! The changes look good to me :)

Flags: needinfo?(E0032242)
You need to log in before you can comment on or make changes to this bug.