Bug 1193006 - Show icons next to non-default permissions in the Permissions section of the Control Center. r=paolo

MozReview-Commit-ID: 1YeU5ECOHYL

--HG--
extra : rebase_source : 9f79b819312c1dda77daf2841e561a8bcc60b418

browser/base/content/browser.js

@@ -7242,8 +7242,13 @@ var gIdentityHandler = {
     label.setAttribute("control", menulist.getAttribute("id"));
     label.textContent = aPermission.label;
 
+    let img = document.createElement("image");
+    img.setAttribute("class",
+      "identity-popup-permission-icon " + aPermission.id + "-icon");
+
     let container = document.createElement("hbox");
     container.setAttribute("align", "center");
+    container.appendChild(img);
     container.appendChild(label);
     container.appendChild(menulist);
 

browser/base/content/test/general/browser_permissions.js

@@ -45,6 +45,10 @@ add_task(function* testMainViewVisible() {
   is(menulists[0].value, "1", "Correct value on install menulist");
   gIdentityHandler._identityPopup.hidden = true;
 
+  let img = menulists[0].parentNode.querySelector("image");
+  ok(img, "There is an image for the permissions");
+  ok(img.classList.contains("install-icon"), "proper class is in image class");
+
   gIdentityHandler.setPermission("install", SitePermissions.getDefault("install"));
 
   gIdentityHandler._identityBox.click();

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

@@ -87,7 +87,8 @@
       <!-- Permissions Section -->
       <hbox class="identity-popup-section">
         <vbox id="identity-popup-permissions-content" flex="1">
-          <label class="identity-popup-headline"
+          <label id="identity-popup-permissions-headline"
+                 class="identity-popup-headline"
                  value="&identity.permissions;"/>
           <vbox id="identity-popup-permission-list"/>
           <description>&identity.permissionsEmpty;</description>

browser/modules/SitePermissions.jsm

@@ -253,4 +253,3 @@ var gPermissionObject = {
 };
 
 const kPermissionIDs = Object.keys(gPermissionObject);
-

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

@@ -349,6 +349,19 @@ description#identity-popup-content-verifier,
   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 }
 
+#identity-popup-permissions-headline {
+  /* Make sure the label is as tall as the icon so that the permission list
+     which is aligned with the icon doesn't cover it up. */
+  min-height: 24px;
+}
+
+#identity-popup-permission-list {
+  /* Offset the padding set on #identity-popup-permissions-content so that it
+     shows up just below the section. The permission icons are 16px wide and
+     should be right aligned with the section icon. */
+  margin-inline-start: calc(-1em - 16px);
+}
+
 #identity-popup-permission-list menulist {
   min-width: 60px;
 }
@@ -361,8 +374,12 @@ description#identity-popup-content-verifier,
   display: none;
 }
 
-.identity-popup-permission-label {
-  margin-inline-start: 0;
-  word-wrap: break-word;
+.identity-popup-permission-icon {
+  width: 16px;
+  height: 16px;
 }
 
+.identity-popup-permission-label {
+  margin-inline-start: 1em;
+  word-wrap: break-word;
+}

browser/themes/shared/glyphs.svg

@@ -22,5 +22,6 @@
   <path id="microphone" d="m 8,14 0,4 a 8,8 0 0 0 6,7.7 l 0,2.3 -2,0 a 2,2 0 0 0 -2,2 l 12,0 a 2,2 0 0 0 -2,-2 l -2,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 -2,0 0,4 a 6,6 0 0 1 -12,0 l 0,-4 z m 4,4 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
   <path id="microphone-detailed" d="m 8,18 a 8,8 0 0 0 6,7.7 l 0,2.3 -1,0 a 3,2 0 0 0 -3,2 l 12,0 a 3,2 0 0 0 -3,-2 l -1,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 a 1,1 0 0 0 -2,0 l 0,4 a 6,6 0 0 1 -12,0 l 0,-4 a 1,1 0 0 0 -2,0 z m 4,0 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" />
   <path id="pointerLock" d="m 8,24 6,-5 5,10 4,-2 -5,-10 7,-1 -17,-14 z" />
+  <path id="popup" d="m 2,24 a 4,4 0 0 0 4,4 l 8,0 a 10,10 0 0 1 -2,-4 l -4,0 a 2,2 0 0 1 -2,-2 l 0,-12 18,0 0,2 a 10,10 0 0 1 4,2 l 0,-8 a 4,4 0 0 0 -4,-4 l -18,0 a 4,4 0 0 0 -4,4 z m 12,-2.1 a 8,8 0 1 1 0,0.2 m 10.7,-4.3 a 5,5 0 0 0 -6.9,6.9 z m -5.4,8.4 a 5,5 0 0 0 6.9,-6.9 z" />
   <path id="screen" d="m 2,18 a 2,2 0 0 0 2,2 l 2,0 0,-6 a 4,4 0 0 1 4,-4 l 14,0 0,-6 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z m 6,10 a 2,2 0 0 0 2,2 l 18,0 a 2,2 0 0 0 2,-2 l 0,-14 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z" />
 </svg>

browser/themes/shared/notification-icons.inc.css

@@ -81,6 +81,7 @@
 .login-icon,
 .microphone-icon,
 .pointerLock-icon,
+.popup-icon,
 .screen-icon,
 .desktop-notification-icon,
 .popup-notification-icon[popupid="geolocation"],
@@ -179,6 +180,10 @@
   list-style-image: url(chrome://browser/skin/glyphs.svg#pointerLock);
 }
 
+.popup-icon {
+  list-style-image: url("chrome://browser/skin/glyphs.svg#popup");
+}
+
 /* EME */
 
 .popup-notification-icon[popupid="drmContentPlaying"],