From 75c86d739f763ca99c3437676806299589a1881c Mon Sep 17 00:00:00 2001
From: gasolin <gasolin@gmail.com>
Date: Fri, 24 Jun 2016 13:02:08 +0100
Subject: [PATCH] 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               |  5 ++++
 .../test/general/browser_permissions.js       |  4 ++++
 .../controlcenter/content/panel.inc.xul       |  3 ++-
 browser/modules/SitePermissions.jsm           |  1 -
 .../themes/shared/controlcenter/panel.inc.css | 23 ++++++++++++++++---
 browser/themes/shared/glyphs.svg              |  1 +
 .../themes/shared/notification-icons.inc.css  |  5 ++++
 7 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 8dca38b1c0d8..45a07cc3fc05 100755
--- a/browser/base/content/browser.js
+++ b/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);
 
diff --git a/browser/base/content/test/general/browser_permissions.js b/browser/base/content/test/general/browser_permissions.js
index 80b437ff6e01..0d5541fad343 100644
--- a/browser/base/content/test/general/browser_permissions.js
+++ b/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();
diff --git a/browser/components/controlcenter/content/panel.inc.xul b/browser/components/controlcenter/content/panel.inc.xul
index 15e82f240afd..f2e0e24ba152 100644
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/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>
diff --git a/browser/modules/SitePermissions.jsm b/browser/modules/SitePermissions.jsm
index c17503890d97..bfe07c638b2f 100644
--- a/browser/modules/SitePermissions.jsm
+++ b/browser/modules/SitePermissions.jsm
@@ -253,4 +253,3 @@ var gPermissionObject = {
 };
 
 const kPermissionIDs = Object.keys(gPermissionObject);
-
diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css
index bcd03560ae4c..689faf992cc3 100644
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/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;
+}
diff --git a/browser/themes/shared/glyphs.svg b/browser/themes/shared/glyphs.svg
index afc90368d518..ee771d03c5fc 100644
--- a/browser/themes/shared/glyphs.svg
+++ b/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>
diff --git a/browser/themes/shared/notification-icons.inc.css b/browser/themes/shared/notification-icons.inc.css
index 7e63024e265e..6c9fe93e25d5 100644
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/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"],