Bug 1566810 - Part 1: Add the granted permission indicator on the lock icon. r=johannh

This patch adds a permission indictor on the lock icon and it is only
shown if there is any permission has been granted.

Differential Revision: https://phabricator.services.mozilla.com/D42119

--HG--
extra : moz-landing-system : lando

browser/themes/shared/identity-block/identity-block.inc.css

@@ -12,6 +12,8 @@
      Individual icons can override this. */
   fill: currentColor;
   fill-opacity: .6;
+  /* This is needed in order to position the permission indicator. */
+  position: relative;
 }
 
 /* The tracking protection icon will be hidden if it is a chrome page. There
@@ -175,6 +177,21 @@
   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg);
 }
 
+#urlbar[pageproxystate="valid"] > #identity-box.grantedPermissions::before {
+  background: url(chrome://browser/skin/badge-blue.svg);
+  content: "";
+  position: absolute;
+  bottom: 15px;
+  left: 14px;
+  height: 14px;
+  width: 14px;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.grantedPermissions:-moz-locale-dir(rtl)::before {
+  left: unset;
+  right: 16px;
+}
+
 /* SHARING ICON */
 
 #webrtc-sharing-icon[sharing="camera"] {