Connected indicator info popup

[danjm]

This PR adds the popover containing info on the connected status indicator. It is intended to be shown to the user the first time they see it, but no more after that. Figma: https://www.figma.com/file/CvD7nhQVeSEB1QuSy3XhtY/oCap-%2F-Login-Per-Site?node-id=952%3A512

Demo video: https://streamable.com/n5k7kd

[metamaskbot]

Builds ready [c85a390]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (659 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	35	53	41	5	2
		domContentLoaded	350	803	658	113	54
		load	351	804	659	113	54
		domInteractive	349	803	657	113	54

[Gudahtt]

Note that we only want to show this to existing users, not new users, so this should default to "shown". We'll have to add a migration to set it to "false", so existing users see it once.

[danjm]

@Gudahtt Migration added in d056126

[metamaskbot]

Builds ready [093402d]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (645 ± 59 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	37	51	42	4	2
		domContentLoaded	396	899	644	124	59
		load	397	901	645	124	59
		domInteractive	396	899	643	124	59

[metamaskbot]

Builds ready [593fdff]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (801 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	NaN	NaN	NaN	NaN	NaN
		domContentLoaded	335	1131	798	185	89
		load	341	1140	801	185	89
		domInteractive	335	1131	798	185	89

[Gudahtt]

I found a few more minor things. I haven't tested this locally yet to see how it looks, but I'll do that tomorrow.

[danjm]

All comments addressed.

Latest screen capture:

[metamaskbot]

Builds ready [9bfe721]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (610 ± 48 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	33	51	37	4	2
		domContentLoaded	325	759	609	100	48
		load	326	760	610	100	48
		domInteractive	325	758	608	100	48

[Gudahtt]

LGTM!

[Gudahtt]

Nit: It looks a bit strange to have just this button rounded, while the rest are still rectangular. I know this matches the design, but there's a separate ticket to update the button designs across the entire app, and that would seem like the better time to make the buttons rounded rather than doing it in just this one place.

[metamaskbot]

Builds ready [e3735f8]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts