Bug 1193006 - Show icons next to non-default permissions in the Permissions section of the Control Center; r?paolo draft
authorgasolin <gasolin@gmail.com>
Fri, 20 May 2016 12:00:34 +0800
changeset 381089 b9cb2c5b95331365bc487c0ebbb91528041775f3
parent 381087 9c245b0c0aaf91fda68d421ed7c74f4ea968f70a
child 523884 a360a96d7af3bdac1fc6f49b8b2501a88f2ea8a0
push id21394
push userbmo:gasolin@mozilla.com
push dateFri, 24 Jun 2016 06:31:29 +0000
reviewerspaolo
bugs1193006
milestone50.0a1
Bug 1193006 - Show icons next to non-default permissions in the Permissions section of the Control Center; r?paolo MozReview-Commit-ID: 1YeU5ECOHYL
browser/base/content/browser.js
browser/base/content/test/general/browser_permissions.js
browser/modules/SitePermissions.jsm
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/glyphs.svg
browser/themes/shared/notification-icons.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -7248,18 +7248,23 @@ var gIdentityHandler = {
     menulist.setAttribute("id", "identity-popup-permission:" + aPermission.id);
 
     let label = document.createElement("label");
     label.setAttribute("flex", "1");
     label.setAttribute("class", "identity-popup-permission-label");
     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);
 
     // The menuitem text can be long and we don't want the dropdown
     // to expand to the width of unselected labels.
     // Need to set this attribute after it's appended, otherwise it gets
     // overridden with sizetopopup="pref".
     menulist.setAttribute("sizetopopup", "none");
--- a/browser/base/content/test/general/browser_permissions.js
+++ b/browser/base/content/test/general/browser_permissions.js
@@ -40,16 +40,20 @@ add_task(function* testMainViewVisible()
   is(labels[0].textContent, labelText, "Correct value");
 
   let menulists = permissionsList.querySelectorAll("menulist");
   is(menulists.length, 1, "One permission visible in main view");
   is(menulists[0].id, "identity-popup-permission:install", "Install permission visible");
   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();
   ok(!is_hidden(emptyLabel), "List of permissions is empty");
   gIdentityHandler._identityPopup.hidden = true;
 });
 
 add_task(function* testIdentityIcon() {
--- a/browser/modules/SitePermissions.jsm
+++ b/browser/modules/SitePermissions.jsm
@@ -248,9 +248,8 @@ var gPermissionObject = {
   "indexedDB": {},
 
   "pointerLock": {
     exactHostMatch: true
   }
 };
 
 const kPermissionIDs = Object.keys(gPermissionObject);
-
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -175,16 +175,19 @@
   white-space: pre-wrap;
   font-size: 110%;
   margin: 0;
 }
 
 .identity-popup-headline {
   margin: 3px 0 4px;
   font-size: 150%;
+  /* 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-headline.host {
   word-wrap: break-word;
   /* 1em + 2em + 24px is #identity-popup-security-content padding
    * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
   max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
 }
@@ -344,25 +347,36 @@ description#identity-popup-content-verif
 }
 
 /* PERMISSIONS */
 
 #identity-popup-permissions-content {
   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 }
 
+#identity-popup-permission-list {
+  /* Offset the padding set on #identity-popup-permissions-content,
+    so that it shows up just below the section. The perm icons (16px wide)
+    should be right aligned with the section icon. */
+  margin-inline-start: calc(-1em - 16px);
+}
+
 #identity-popup-permission-list menulist {
   min-width: 60px;
 }
 
 #identity-popup-permission-list:not(:empty) {
   margin-top: 5px;
 }
 
 #identity-popup-permission-list:not(:empty) + description {
   display: none;
 }
 
 .identity-popup-permission-label {
-  margin-inline-start: 0;
+  margin-inline-start: 1em;
   word-wrap: break-word;
 }
 
+.identity-popup-permission-icon {
+  width: 16px;
+  height: 16px;
+}
--- a/browser/themes/shared/glyphs.svg
+++ b/browser/themes/shared/glyphs.svg
@@ -16,11 +16,12 @@
   <path id="geo-windows" d="m 2,14 0,4 2,0 a 12,12 0 0 0 10,10 l 0,2 4,0 0,-2 a 12,12 0 0 0 10,-10 l 2,0 0,-4 -2,0 a 12,12 0 0 0 -10,-10 l 0,-2 -4,0 0,2 a 12,12 0 0 0 -10,10 z m 4,1.9 a 10,10 0 1 1 0,0.2 z m 4,0 a 6,6 0 1 1 0,0.2 z" />
   <path id="geo-windows-detailed" d="m 2,14.5 0,3 2,0.5 a 12,12 0 0 0 10,10 l 0.5,2 3,0 0.5,-2 a 12,12 0 0 0 10,-10 l 2,-0.5 0,-3 -2,-0.5 a 12,12 0 0 0 -10,-10 l -0.5,-2 -3,0 -0.5,2 a 12,12 0 0 0 -10,10 z m 4,1.4 a 10,10 0 1 1 0,0.2 z m 3,0 a 7,7 0 1 1 0,0.2 z" />
   <path id="indexedDB" d="m 2,24 a 4,4 0 0 0 4,4 l 2,0 0,-4 -2,0 0,-16 20,0 0,16 -2,0 0,4 2,0 a 4,4 0 0 0 4,-4 l 0,-16 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 8,-2 6,7 6,-7 -4,0 0,-8 -4,0 0,8 z" />
   <path id="login" d="m 2,26 0,4 6,0 0,-2 2,0 0,-2 1,0 0,-1 2,0 0,-3 2,0 2.5,-2.5 1.5,1.5 3,-3 a 8,8 0 1 0 -8,-8 l -3,3 2,2 z m 20,-18.1 a 2,2 0 1 1 0,0.2 z" />
   <path id="login-detailed" d="m 1,27 0,3.5 a 0.5,0.5 0 0 0 0.5,0.5 l 5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1.5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-2 2,0 2.5,-2.5 q 0.5,-0.5 1,0 l 1,1 c 0.5,0.5 1,0.5 1.5,-0.5 l 1,-2 a 9,9 0 1 0 -8,-8 l -2,1 c -1,0.5 -1,1 -0.5,1.5 l 1.5,1.5 q 0.5,0.5 0,1 z m 21,-19.1 a 2,2 0 1 1 0,0.2 z" />
   <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="pointer" 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" />
   <path id="web-notifications" d="m 2,20 a 4,4 0 0 0 4,4 l 13,0 7,7 0,-7 a 4,4 0 0 0 4,-4 l 0,-12 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 5,-2 a 1,1 0 1 1 0,-2 l 10,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 14,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 18,0 a 1,1 0 1 1 0,2 z" />
 </svg>
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -76,16 +76,17 @@
 .webRTC-sharingDevices-notification-icon,
 .webRTC-sharingMicrophone-notification-icon,
 .camera-icon,
 .geo-icon,
 .indexedDB-icon,
 .login-icon,
 .microphone-icon,
 .pointer-icon,
+.popup-icon,
 .screen-icon,
 .web-notifications-icon,
 .popup-notification-icon[popupid="geolocation"],
 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
 .popup-notification-icon[popupid="password"],
 .popup-notification-icon[popupid="pointerLock"],
 .popup-notification-icon[popupid="webRTC-shareDevices"],
 .popup-notification-icon[popupid="webRTC-shareMicrophone"],
@@ -174,16 +175,20 @@
   list-style-image: url(chrome://browser/skin/glyphs.svg#web-notifications);
 }
 
 .popup-notification-icon[popupid="pointerLock"],
 .pointer-icon {
   list-style-image: url(chrome://browser/skin/glyphs.svg#pointer);
 }
 
+.popup-icon {
+  list-style-image: url("chrome://browser/skin/glyphs.svg#popup");
+}
+
 /* EME */
 
 .popup-notification-icon[popupid="drmContentPlaying"],
 .drm-icon {
   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
 }
 
 .drm-icon:hover:active {