Bug 1576072 - Add a new icon for granted permissions in the identity block + panel. r=nhnt11

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

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

browser/base/content/browser.xhtml

@@ -893,6 +893,8 @@
                 <image id="identity-icon"
                        consumeanchor="identity-box"
                        onclick="PageProxyClickHandler(event);"/>
+                <image id="permissions-granted-icon"
+                       tooltiptext="&urlbar.permissionsGranted.tooltip;"/>
                 <box mousethrough="always">
                     <image class="sharing-icon" id="webrtc-sharing-icon"/>
                     <image class="sharing-icon geo-icon" id="geo-sharing-icon"/>

browser/components/controlcenter/content/identityPanel.inc.xul

@@ -66,10 +66,10 @@
             when-connection="not-secure secure secure-ev secure-cert-user-overridden file extension">
         <vbox id="identity-popup-permissions-content" flex="1" role="group"
               aria-labelledby="identity-popup-permissions-headline">
-          <hbox align="center">
+          <hbox id="identity-popup-permissions-header" align="center">
             <label id="identity-popup-permissions-headline"
                    role="heading" aria-level="2"
-                   value="&identity.permissions2;"/>
+                   value="&identity.permissions3;"/>
           </hbox>
           <vbox id="identity-popup-permission-list"/>
           <description id="identity-popup-permission-reload-hint">&identity.permissionsReloadHint;</description>

browser/locales/en-US/chrome/browser/browser.dtd

@@ -199,6 +199,8 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!ENTITY urlbar.emeNotificationAnchor.tooltip             "Manage use of DRM software">
 <!ENTITY urlbar.midiNotificationAnchor.tooltip            "Open MIDI panel">
 
+<!ENTITY urlbar.permissionsGranted.tooltip       "You have granted this website additional permissions.">
+
 <!ENTITY urlbar.cameraBlocked.tooltip            "You have blocked your camera for this website.">
 <!ENTITY urlbar.microphoneBlocked.tooltip        "You have blocked your microphone for this website.">
 <!ENTITY urlbar.screenBlocked.tooltip            "You have blocked this website from sharing your screen.">
@@ -714,8 +716,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 
 <!ENTITY identity.clearSiteData "Clear Cookies and Site Data…">
 
-<!-- LOCALIZATION NOTE (identity.permissions2): "set" as in "configured for this website" -->
-<!ENTITY identity.permissions2 "Permissions Set">
+<!ENTITY identity.permissions3 "Permissions">
 <!ENTITY identity.permissionsEmpty "You have not granted this site any special permissions.">
 <!ENTITY identity.permissionsReloadHint "You may need to reload the page for changes to apply.">
 

browser/themes/shared/controlcenter/panel.inc.css

@@ -122,6 +122,7 @@
   margin-bottom: 0;
 }
 
+#identity-popup-permissions-header,
 .identity-popup-security-connection,
 #identity-popup-security-description {
   /* icon indent + 16px icon width + 6px description margin
@@ -145,6 +146,17 @@
   padding-bottom: 1em;
 }
 
+#identity-popup-permissions-header {
+  background-image: url(chrome://browser/skin/permissions.svg);
+  background-repeat: no-repeat;
+}
+
+#identity-popup-permissions-header,
+#identity-popup-permission-list {
+  /* 16px icon width + 12px margin */
+  padding-inline-start: 28px;
+}
+
 #protections-popup-content {
   background-repeat: no-repeat;
   background-position: 1em 1em;
@@ -853,10 +865,6 @@ description#identity-popup-content-verifier,
 
 /* PERMISSIONS */
 
-#identity-popup-permissions-content {
-  padding-bottom: 1.5em;
-}
-
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
   /* The extra padding-bottom is there to work around XUL flex (Bug 1368281).
      This rule and the 1.5em above can both be removed once we are only using CSS flex. */
@@ -865,16 +873,6 @@ description#identity-popup-content-verifier,
   }
 }
 
-#identity-popup-permissions-headline {
-  color: #737373;
-  font-weight: 500;
-  margin-inline-start: 0;
-}
-
-:root[lwt-popup-brighttext] #identity-popup-permissions-headline {
-  color: #f9f9fa;
-}
-
 .protections-popup-category,
 .identity-popup-permission-item {
   min-height: 24px;
@@ -892,7 +890,7 @@ description#identity-popup-content-verifier,
 #identity-popup-permission-reload-hint,
 #identity-popup-permission-empty-hint,
 #identity-popup-permission-list:not(:empty) {
-  margin-top: 5px;
+  margin-top: 8px;
 }
 
 .identity-popup-permission-icon {

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

@@ -21,6 +21,7 @@
   padding-inline-start: 8px;
 }
 
+#identity-box[pageproxystate="invalid"] > #permissions-granted-icon,
 #identity-box[pageproxystate="invalid"] > #blocked-permissions-container,
 #identity-box[pageproxystate="invalid"] > #notification-popup-box,
 #identity-box[pageproxystate="invalid"] > #identity-icon-labels,
@@ -116,6 +117,7 @@
 
 .sharing-icon,
 #identity-icon,
+#permissions-granted-icon,
 #tracking-protection-icon,
 .notification-anchor-icon,
 #blocked-permissions-container > .blocked-permission-icon {
@@ -183,6 +185,14 @@
   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg);
 }
 
+#permissions-granted-icon {
+  list-style-image: url(chrome://browser/skin/permissions.svg);
+}
+
+#identity-box:not(.grantedPermissions) > #permissions-granted-icon {
+  display: none;
+}
+
 /* SHARING ICON */
 
 #webrtc-sharing-icon[sharing="camera"] {

browser/themes/shared/identity-block/permissions.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm0-4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zM12 14a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm0-4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zM14 4H7.86A4.09 4.09 0 0 1 8 5a4.09 4.09 0 0 1-.14 1H14a1 1 0 0 0 0-2zM8 11a4.09 4.09 0 0 1 .14-1H2a1 1 0 0 0 0 2h6.14A4.09 4.09 0 0 1 8 11z"/>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -57,6 +57,7 @@
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
+  skin/classic/browser/permissions.svg                         (../shared/identity-block/permissions.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)