Fixed UI for passive (display) mixed content

[luixxiul]

Test plan

#7571 (comment)

---

Describe the issue you encountered: I tried to add a class to urlbarIcon on mixed content pages, and noticed that isMixedContent did not seem to be ready yet though it was mentioned here: https://github.com/brave/browser-laptop/blob/master/js/components/siteInfo.js#L18

Because of it the siteInfo panel on https://mixed-script.badssl.com/ says that the site is secure where it should not, though the script is blocked.

[bbondy]

This is probably legacy from when we were based on Gecko. cc @diracdeltas

[diracdeltas]

yup, isMixedContent is not hooked up to anything yet. it's fine that we show https://mixed-script.badssl.com/ as secure since the active mixed content (scripts) is blocked from running by the mixed content blocker. we should show a warning of some kind for passive mixed content though.

[luixxiul]

I see, then how about changing This site is secure to Secure connection on the siteinfo panel as Firefox does?

Also the complete info of cert on the lock icon has been asked for. See: #1248 (comment)

[diracdeltas]

@luixxiul sure, i would accept that

[bridiver]

Related #3447
#3651
Wondering if we should provide a visual notification that mixed content was blocked?

[ayumi]

bump

Saw that some amazon product pages (example) load some images over http. It would be sweet to allow blocking of passive mixed content or at least show an icon.

Chrome – for comparison:

[diracdeltas]

chrome shows the insecure UI for passive mixed-content pages. i propose we show the insecure (unlocked) icon but in grey instead of red so it's somewhat less scary.