Hi Jiachen

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

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.

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?

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:

• https://reactjs.org/docs/context.html
• https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2

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.

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;

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

Honza

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

Looks great, thanks!

Landed

Honza

https://hg.mozilla.org/mozilla-central/rev/c68cc2526fbd

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

Hi Irene

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