Bug 1379175 - Add a blue badge to the plugin icon in the URL bar when there are plugins to be activated. r=Felipe

MozReview-Commit-ID: 5tlQhEF5D62

--HG--
extra : rebase_source : b0c0717edaf5ad4958172a4840fc7349c0091af8

browser/base/content/browser-plugins.js

@@ -159,6 +159,7 @@ var gPluginHandler = {
         expireTime = Date.now() + Services.prefs.getIntPref(this.PREF_SESSION_PERSIST_MINUTES) * 60 * 1000;
         histogram.add(0);
         aPluginInfo.fallbackType = Ci.nsIObjectLoadingContent.PLUGIN_ACTIVE;
+        aNotification.options.extraAttr = "active";
         break;
 
       case "allowalways":
@@ -168,6 +169,7 @@ var gPluginHandler = {
           Services.prefs.getIntPref(this.PREF_PERSISTENT_DAYS) * 24 * 60 * 60 * 1000;
         histogram.add(1);
         aPluginInfo.fallbackType = Ci.nsIObjectLoadingContent.PLUGIN_ACTIVE;
+        aNotification.options.extraAttr = "active";
         break;
 
       case "block":
@@ -185,12 +187,14 @@ var gPluginHandler = {
           default:
             aPluginInfo.fallbackType = Ci.nsIObjectLoadingContent.PLUGIN_CLICK_TO_PLAY;
         }
+        aNotification.options.extraAttr = "inactive";
         break;
 
       // In case a plugin has already been allowed in another tab, the "continue allowing" button
       // shouldn't change any permissions but should run the plugin-enablement code below.
       case "continue":
         aPluginInfo.fallbackType = Ci.nsIObjectLoadingContent.PLUGIN_ACTIVE;
+        aNotification.options.extraAttr = "active";
         break;
       default:
         Cu.reportError(Error("Unexpected plugin state: " + aNewState));
@@ -241,11 +245,16 @@ var gPluginHandler = {
       pluginData = new Map();
     }
 
+    let hasInactivePlugins = true;
     for (var pluginInfo of plugins) {
       if (pluginData.has(pluginInfo.permissionString)) {
         continue;
       }
 
+      if (pluginInfo.fallbackType == Ci.nsIObjectLoadingContent.PLUGIN_ACTIVE) {
+        hasInactivePlugins = false;
+      }
+
       // If a block contains an infoURL, we should always prefer that to the default
       // URL that we construct in-product, even for other blocklist types.
       let url = Services.blocklist.getPluginInfoURL(pluginInfo.pluginTag);
@@ -285,7 +294,19 @@ var gPluginHandler = {
       primaryPlugin: primaryPluginPermission,
       pluginData,
       principal,
+      extraAttr: hasInactivePlugins ? "inactive" : "active",
     };
+
+    let badge = document.getElementById("plugin-icon-badge");
+    badge.setAttribute("animate", "true");
+    badge.addEventListener("animationend", function animListener(event) {
+      if (event.animationName == "blink-badge" &&
+          badge.hasAttribute("animate")) {
+        badge.removeAttribute("animate");
+        badge.removeEventListener("animationend", animListener);
+      }
+    });
+
     PopupNotifications.show(browser, "click-to-play-plugins",
                             "", "plugins-notification-icon",
                             null, null, options);

browser/base/content/browser.xul

@@ -871,8 +871,11 @@
                          tooltiptext="&urlbar.indexedDBNotificationAnchor.tooltip;"/>
                   <image id="password-notification-icon" class="notification-anchor-icon login-icon" role="button"
                          tooltiptext="&urlbar.passwordNotificationAnchor.tooltip;"/>
-                  <image id="plugins-notification-icon" class="notification-anchor-icon plugin-icon" role="button"
-                         tooltiptext="&urlbar.pluginsNotificationAnchor.tooltip;"/>
+                  <stack id="plugins-notification-icon" class="notification-anchor-icon" role="button" align="center"
+                         tooltiptext="&urlbar.pluginsNotificationAnchor.tooltip;">
+                    <image class="plugin-icon" />
+                    <image id="plugin-icon-badge" />
+                  </stack>
                   <image id="web-notifications-notification-icon" class="notification-anchor-icon desktop-notification-icon" role="button"
                          tooltiptext="&urlbar.webNotificationAnchor.tooltip;"/>
                   <image id="webRTC-shareDevices-notification-icon" class="notification-anchor-icon camera-icon" role="button"

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

@@ -241,13 +241,45 @@ html|*#webRTC-previewVideo {
 
 .plugin-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
+  transition: fill 1.5s;
 }
 
-.plugin-icon.plugin-blocked {
+#plugin-icon-badge {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-badge);
+  opacity: 0;
+  transition: opacity 1.5s;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > .plugin-icon {
+  fill: #bfbfbf;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
+  opacity: 1;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
+  animation: blink-badge 1000ms ease 0s 5 alternate both;
+}
+
+@keyframes blink-badge {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.plugin-blocked > .plugin-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
   fill: #d92215 !important;
 }
 
+.plugin-blocked > #plugin-icon-badge {
+  visibility: collapse;
+}
+
 #notification-popup-box[hidden] {
   /* Override display:none to make the pluginBlockedNotification animation work
      when showing the notification repeatedly. */

browser/themes/shared/notification-icons.svg

@@ -6,6 +6,7 @@
   <style>
     :root > use:not(:target),
     :root > g:not(:target),
+    :root > circle:not(:target),
     #strikeout {
       display: none;
     }
@@ -16,6 +17,10 @@
       clip-path: url(#blocked-clipPath);
     }
 
+    #badge {
+      fill: #3088d4;
+    }
+
     #update-icon {
       stroke: #fff;
       stroke-width: 3px;
@@ -86,6 +91,7 @@
   <use id="persistent-storage-blocked" class="blocked" href="#persistent-storage-icon" />
   <use id="plugin" href="#plugin-icon" />
   <use id="plugin-blocked" class="blocked" href="#plugin-icon" />
+  <use id="plugin-badge" href="#badge" />
   <use id="popup" href="#popup-icon" />
   <use id="screen" href="#screen-icon" />
   <use id="screen-sharing" href="#screen-icon"/>
@@ -94,4 +100,5 @@
   <use id="update" href="#update-icon" />
 
   <path id="strikeout" d="m 2,28 2,2 26,-26 -2,-2 z"/>
+  <circle id="badge" cx="27" cy="5" r="5"/>
 </svg>

toolkit/modules/PopupNotifications.jsm

@@ -1161,6 +1161,11 @@ PopupNotifications.prototype = {
       let anchorElm = notification.anchorElement;
       if (anchorElm) {
         anchorElm.setAttribute(ICON_ATTRIBUTE_SHOWING, "true");
+
+        if (notification.options.extraAttr) {
+          anchorElm.setAttribute("extraAttr", notification.options.extraAttr);
+        }
+
       }
     }
   },