Improvements to the linkExposure content script

[jonathanmayer]

Feedback from an initial code review:

• [x] We should pull the DOM element visibility logic into a new Utilities module, since it’ll likely be valuable for any module with a content script that wants to test visibility.
• [x] The timeout values should be defined in constants at the start of the content script.
• [x] We shouldn’t be arbitrarily waiting after the DOM loads to start parsing out links. Instead, as I mentioned previously, we should handle React-like dynamic content loads by treating the first tick as the initial set of links (i.e., handle the case where there are 0 links initially and then links at the first tick) rather than always waiting for the initial set of links.
• [x] The visibility checking logic should include checking whether CSS is set to display: none.
• [x] We need to include logic for checking whether the user is paying attention to the tab. The logic right now just sends the tab visibility state from when the page initially loaded (?). As a short-term implementation, we can use document.visibilityState. The long-term fix is to connect this content script to events from the PageEvents module.
• [x] We need to include logic for storing and reporting how long each link was in the viewport and how long each link was in the viewport and had user attention. See the attention span tracking in the Navigation module for an example.
• [x] The DOM expando attribute logic isn’t right—this code is setting ordinary element attributes, which will be visible to the actual page. We should be using expando attributes so that they’re hidden from the page. (The downside is we can’t use a CSS selector on expando attributes, but that’s probably a minimal performance impact.)
• [x] We should be consistent about using descriptive names for functions and variables. For example: x - what's x? assoc - associating what?
• [x] We should have comments that explain, at minimum, each of the functions and constants.
• [x] There’s inconsistent use of camel case in the module. We should stick to that for consistency and readability.
• [x] Handle relative URLs. See: https://github.com/citp/web-science/pull/43#discussion_r357493634
• [x] Remove console.log.
• [x] Use the existing width and height properties from Element.getBoundingClientRect.
• [x] Use a term other than visited for links that have been processed.
• [x] Use the Intersection Observer API to monitor link visibility.

[jonathanmayer]

Chatted with @benjaminhkaiser about attention tracking for link exposure. We think two metrics for link exposure make sense, at least for the initial pilot:

• How long was the link in the tab viewport?
• How long was the link in the tab viewport while the tab had user attention?

We'll likely want to eventually use a simple threshold in combination with one of these metrics.

[PranayAnchuri]

Done. LinkExposure uses a threshold (10 secs) for the links that are considered for accounting.