Bug 1576072 - Add a new icon for granted permissions in the identity block + panel. r=nhnt11
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 29 Aug 2019 15:30:51 +0000
changeset 554412 4c2f7afa73da98e626db22ab8108d11b915d5760
parent 554411 6b7bd6cb5ce0cb0776215116ad1f0cd4d2b0b44a
child 554413 9ba13ab83751e14ac5c7465abbd9eb6296ffc5e6
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1576072
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1576072 - Add a new icon for granted permissions in the identity block + panel. r=nhnt11 Differential Revision: https://phabricator.services.mozilla.com/D43950
browser/base/content/browser.xhtml
browser/components/controlcenter/content/identityPanel.inc.xul
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/identity-block/permissions.svg
browser/themes/shared/jar.inc.mn
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -888,16 +888,18 @@
                    aria-label="&urlbar.viewSiteInfo.label;"
                    pageproxystate="invalid"
                    onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
                    onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
                    ondragstart="gIdentityHandler.onDragStart(event);">
                 <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"/>
                 </box>
                 <box id="blocked-permissions-container" align="center">
                   <image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
                          tooltiptext="&urlbar.geolocationBlocked.tooltip;"/>
                   <image data-permission-id="desktop-notification" class="blocked-permission-icon desktop-notification-icon" role="button"
--- a/browser/components/controlcenter/content/identityPanel.inc.xul
+++ b/browser/components/controlcenter/content/identityPanel.inc.xul
@@ -61,20 +61,20 @@
                 oncommand="gIdentityHandler.showSecuritySubView(); gIdentityHandler.recordClick('security_subview_btn');"/>
       </hbox>
 
       <!-- Permissions Section -->
       <hbox class="identity-popup-section"
             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>
           <description id="identity-popup-permission-empty-hint">&identity.permissionsEmpty;</description>
         </vbox>
       </hbox>
 
       <!-- Clear Site Data Button -->
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -194,16 +194,18 @@ convenience of Safari and Chrome users o
 <!ENTITY urlbar.webRTCShareScreenNotificationAnchor.tooltip       "Manage sharing your windows or screen with the site">
 
 <!ENTITY urlbar.servicesNotificationAnchor.tooltip        "Open install message panel">
 <!ENTITY urlbar.translateNotificationAnchor.tooltip       "Translate this page">
 <!ENTITY urlbar.translatedNotificationAnchor.tooltip      "Manage page translation">
 <!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.">
 <!ENTITY urlbar.geolocationBlocked.tooltip       "You have blocked location information for this website.">
 <!ENTITY urlbar.webNotificationsBlocked.tooltip  "You have blocked notifications for this website.">
 <!ENTITY urlbar.persistentStorageBlocked.tooltip "You have blocked persistent storage for this website.">
 <!ENTITY urlbar.popupBlocked.tooltip             "You have blocked pop-ups for this website.">
 <!ENTITY urlbar.autoplayMediaBlocked.tooltip     "You have blocked autoplay media with sound for this website.">
@@ -709,18 +711,17 @@ you can use these alternative items. Oth
 
 <!ENTITY identity.removeCertException.label "Remove Exception">
 <!ENTITY identity.removeCertException.accesskey "R">
 
 <!ENTITY identity.moreInfoLinkText2 "More Information">
 
 <!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.">
 
 <!ENTITY protections.etpON.header "Enhanced Tracking Protection is ON for this site">
 <!ENTITY protections.etpOFF.header "Enhanced Tracking Protection is OFF for this site">
 <!-- LOCALIZATION NOTE:
      protections.etpMoreInfo.label: The text a screen reader speaks when focused on the info button. -->
 <!ENTITY protections.etpMoreInfo.label "More information about Enhanced Tracking Protection">
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -117,16 +117,17 @@
   background-position-x: right 2em
 }
 
 .identity-popup-security-connection > description {
   margin-top: 0;
   margin-bottom: 0;
 }
 
+#identity-popup-permissions-header,
 .identity-popup-security-connection,
 #identity-popup-security-description {
   /* icon indent + 16px icon width + 6px description margin
      (total of 12px margin with the native 6px description margin) */
   padding-inline-start: calc(2em + 22px);
   padding-inline-end: 1em;
 }
 
@@ -140,16 +141,27 @@
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content {
   padding-top: 1em;
   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;
   background-size: 24px auto;
   -moz-context-properties: fill;
   padding: 0.5em 0 1em;
   padding-inline-start: calc(2em + 24px);
   padding-inline-end: 1em;
@@ -848,38 +860,24 @@ description#identity-popup-content-verif
 }
 
 .tracking-protection-button:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 /* 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. */
   #identity-popup-permissions-content {
     padding-bottom: 1em;
   }
 }
 
-#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;
 }
 
 .protections-popup-category {
   padding: 0 var(--horizontal-padding);
 }
@@ -887,17 +885,17 @@ description#identity-popup-content-verif
 .identity-popup-permission-item {
   padding-inline-end: 8px;
   margin-top: 0.25em;
 }
 
 #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 {
   margin-inline-start: 3px;
 }
 
 .protections-popup-category-icon,
 .identity-popup-permission-icon {
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -16,16 +16,17 @@
 
 /* The tracking protection icon will be hidden if it is a chrome page. There
    will be only the brand icon in the url bar. So, we need to change the padding
    start for proper positing the icon. */
 #identity-box[pageproxystate="valid"].chromeUI {
   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,
 #identity-box[pageproxystate="invalid"] > #remote-control-icon {
   display: none;
 }
 
 #identity-box[pageproxystate="invalid"] {
@@ -111,16 +112,17 @@
 }
 
 .urlbar-label {
   margin: 0;
 }
 
 .sharing-icon,
 #identity-icon,
+#permissions-granted-icon,
 #tracking-protection-icon,
 .notification-anchor-icon,
 #blocked-permissions-container > .blocked-permission-icon {
   width: 16px;
   height: 16px;
   margin-inline-start: 4px;
   -moz-context-properties: fill, fill-opacity;
 }
@@ -178,16 +180,24 @@
 }
 
 #identity-box[pageproxystate="valid"].notSecure > #identity-icon,
 #identity-box[pageproxystate="valid"].insecureLoginForms > #identity-icon,
 #identity-box[pageproxystate="valid"].mixedActiveContent > #identity-icon {
   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"] {
   list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
 }
 
 #webrtc-sharing-icon[sharing="microphone"] {
   list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
new file mode 100644
--- /dev/null
+++ b/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>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -52,16 +52,17 @@
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
   skin/classic/browser/downloads/download-blocked.svg          (../shared/downloads/download-blocked.svg)
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
   skin/classic/browser/downloads/download-icons.svg            (../shared/downloads/download-icons.svg)
   skin/classic/browser/downloads/notification-start-animation.svg  (../shared/downloads/notification-start-animation.svg)
   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)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
   skin/classic/browser/info.svg                                (../shared/info.svg)
   skin/classic/browser/newInstall.css                          (../shared/newInstall.css)
   skin/classic/browser/newInstallPage.css                      (../shared/newInstallPage.css)