Popup redesign with field data

[rviscomi]

Fixes #53

https://user-images.githubusercontent.com/1120896/102698818-3de00900-420e-11eb-9b12-08590199d007.mov

Screenshots

Page-level data


Origin-level data


Hovercard


Local data only


No local data


[rviscomi]

This is ready for review but we should figure out a solution to https://github.com/GoogleChrome/web-vitals-extension/pull/82#discussion_r546263102 before merging.

Remaining TODOs on my end:

• [x] Figure out what to do with the info icon in the top right (awaiting feedback from Jiwoong)
• [x] Figure out how to incorporate the inflated LCP disclaimer when tab was loaded in the background (awaiting feedback from Jiwoong)
• [x] Implement the metric overlay on hover (ready to implement, see mockup below)
• [ ] Cache field data for up to 24 hours
• [ ] Pass local ECT as API input, retry without as needed (not blocking)

[addyosmani]

After installing the implementation from this PR and pinning it (post creating the secrets file with the API key):

I navigated to The Verge. It shows local metrics only and highlights that field data is unavailable.

Debug errors from about:extensions:

We know of course that the Verge does have field data available:

The same appears when I try to navigate to the BBC:

I verified this in both stable and Canary.

I haven't had a chance to debug this further just yet, but will take a look at what else may be causing it. From the stack traces, it looks like data is failing to be fetched at all from CrUX.

[addyosmani]

@rviscomi In terms of next steps, how would you feel about us doing an internal Fish Food of the new version of the extension to get feedback before moving forward with the current UX?

[rviscomi]

SGTM

[rviscomi]

Updated the branch to include an option for users to use phone field data. The device used for field data (desktop or phone) is now indicated in the UI in a few places:

• The popup header status, eg "Local metrics compared to desktop field data"
• A footer icon prefixing the URL/origin used for field data
• The metric tooltip, eg "Your experience is similar to 96% of real-user desktop FID experiences on this page."

The option can be toggled by right clicking on the extension icon in the toolbar, selection "Options", and (un)checking the "Compare local experiences to phone field data" field.