Bug 348576, addonsMsg should use standard Notification styles, r=rob_strong

toolkit/mozapps/extensions/content/extensions.css

@@ -96,10 +96,6 @@ richlistitem[opType="needs-disable"] hbox.addon-description {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#addon-needs-disable");
 }
 
-addonsmessage {
-  -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#addonsmessage");
-}
-
 #viewGroup radio {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#viewbutton");
   -moz-box-orient: vertical;

toolkit/mozapps/extensions/content/extensions.js

@@ -57,6 +57,7 @@ var gCheckCompat      = true;
 var gUpdatesOnly      = false;
 var gAppID            = "";
 var gPref             = null;
+var gPriorityCount    = 0;
 
 const PREF_EM_CHECK_COMPATIBILITY           = "extensions.checkCompatibility";
 const PREF_EXTENSIONS_GETMORETHEMESURL      = "extensions.getMoreThemesURL";
@@ -103,6 +104,43 @@ function getExtensionString(key, strings) {
   return gExtensionStrings.getString(key);
 }
 
+function MessageButton(aLabel, aAccesskey, aData) {
+  this.label = aLabel;
+  this.accessKey = aAccesskey;
+  this.data = aData || "addons-message-dismiss";
+}
+MessageButton.prototype = {
+  label: null,
+  accessKey: null,
+  data: null,
+
+  callback: function (aNotification, aButton) {
+    var os = Components.classes["@mozilla.org/observer-service;1"]
+                       .getService(Components.interfaces.nsIObserverService);
+    os.notifyObservers(null, "addons-message-notification", aButton.data);
+    aNotification.close();
+    return true;
+  }
+};
+
+function showMessage(aIconURL, aMessage, aButtonLabel, aButtonAccesskey,
+                     aShowCloseButton, aNotifyData) {
+  var addonsMsg = document.getElementById("addonsMsg");
+  var buttons = null;
+  if (aButtonLabel)
+    buttons = [new MessageButton(aButtonLabel, aButtonAccesskey, aNotifyData)];
+  var oldMessage = addonsMsg.getNotificationWithValue(aMessage);
+  if (oldMessage)
+    addonsMsg.removeNotification(oldMessage);
+  if (addonsMsg.currentNotification)
+    gPriorityCount += 0.0001;
+  else
+    gPriorityCount = 0;
+  addonsMsg.appendNotification(aMessage, aMessage, aIconURL,
+                               addonsMsg.PRIORITY_WARNING_LOW + gPriorityCount,
+                               buttons).hideclose = !aShowCloseButton;
+}
+
 // dynamically creates a template
 var AddonsViewBuilder = {
   _bindingList: null,
@@ -460,7 +498,7 @@ function flushDataSource()
 function noUpdatesDismiss(aEvent)
 {
   window.removeEventListener("command", noUpdatesDismiss, true);
-  if (aEvent.target.localName == "addonsmessage")
+  if (aEvent.target.localName == "notification")
     return;
 
   var children = gExtensionsView.children;
@@ -469,7 +507,7 @@ function noUpdatesDismiss(aEvent)
     if (child.hasAttribute("updateStatus"))
       child.removeAttribute("updateStatus");
   }
-  document.getElementById("addonsMsg").hideMessage();
+  document.getElementById("addonsMsg").removeCurrentNotification();
 }
 
 function setRestartMessage(aItem)
@@ -547,16 +585,14 @@ function Startup()
     var buttonLabel = getExtensionString("enableButtonLabel");
     var buttonAccesskey = getExtensionString("enableButtonAccesskey");
     var notifyData = "addons-enable-compatibility";
-    var addonsMsg = document.getElementById("addonsMsg");
-    addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                          msgText, buttonLabel, buttonAccesskey,
-                          true, notifyData);
+    showMessage("chrome://mozapps/skin/extensions/question.png",
+                msgText, buttonLabel, buttonAccesskey,
+                true, notifyData);
   }
   if (gInSafeMode) {
-    var addonsMsg = document.getElementById("addonsMsg");
-    addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                          getExtensionString("safeModeMsg"),
-                          null, null, true, null);
+    showMessage("chrome://mozapps/skin/extensions/question.png",
+                getExtensionString("safeModeMsg"),
+                null, null, true, null);
   }
 
   if ("arguments" in window) {
@@ -571,10 +607,9 @@ function Startup()
         document.getElementById("viewGroup").hidden = true;
         document.getElementById("extensionsView").setAttribute("norestart", "");
         showView("updates");
-        var addonsMsg = document.getElementById("addonsMsg");
-        addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                              getExtensionString("newUpdatesAvailableMsg"),
-                              null, null, true, null);
+        showMessage("chrome://mozapps/skin/extensions/question.png",
+                    getExtensionString("newUpdatesAvailableMsg"),
+                    null, null, true, null);
         document.title = getExtensionString("newUpdateWindowTitle", [getBrandShortName()]);
       }
     }
@@ -606,7 +641,8 @@ function Shutdown()
                      .getService(Components.interfaces.nsIObserverService);
   os.removeObserver(gAddonsMsgObserver, "addons-message-notification");
   os.removeObserver(gDownloadManager, "xpinstall-download-started");
-  if (document.getElementById("addonsMsg").notifyData == "addons-no-updates")
+  var currentNotification = document.getElementById("addonsMsg").currentNotification;
+  if (currentNotification && currentNotification.value == "addons-no-updates")
     window.removeEventListener("command", noUpdatesDismiss, true);
 }
 
@@ -843,10 +879,9 @@ UpdateCheckListener.prototype = {
     if (this._updateFound)
       showView("updates");
     else {
-      var addonsMsg = document.getElementById("addonsMsg");
-      addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                            getExtensionString("noUpdatesMsg"),
-                            null, null, true, "addons-no-updates");
+      showMessage("chrome://mozapps/skin/extensions/question.png",
+                  getExtensionString("noUpdatesMsg"),
+                  null, null, true, "addons-no-updates");
       window.addEventListener("command", noUpdatesDismiss, true);
     }
   },
@@ -1253,10 +1288,9 @@ function isXPInstallEnabled() {
   var buttonLabel = locked ? null : getExtensionString("enableButtonLabel");
   var buttonAccesskey = locked ? null : getExtensionString("enableButtonAccesskey");
   var notifyData = locked ? null : "addons-enable-xpinstall";
-  var addonsMsg = document.getElementById("addonsMsg");
-  addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                        msgText, buttonLabel, buttonAccesskey,
-                        !locked, notifyData);
+  showMessage("chrome://mozapps/skin/extensions/question.png",
+              msgText, buttonLabel, buttonAccesskey,
+              !locked, notifyData);
   return false;
 }
 
@@ -1264,12 +1298,11 @@ function isOffline(messageKey) {
   var ioService = Components.classes["@mozilla.org/network/io-service;1"]
                             .getService(nsIIOService);
   if (ioService.offline) {
-    var addonsMsg = document.getElementById("addonsMsg");
-    addonsMsg.showMessage("chrome://mozapps/skin/extensions/question.png",
-                          getExtensionString(messageKey, [getBrandShortName()]),
-                          getExtensionString("goOnlineButtonLabel"),
-                          getExtensionString("goOnlineButtonAccesskey"),
-                          true, "addons-go-online");
+    showMessage("chrome://mozapps/skin/extensions/question.png",
+                getExtensionString(messageKey, [getBrandShortName()]),
+                getExtensionString("goOnlineButtonLabel"),
+                getExtensionString("goOnlineButtonAccesskey"),
+                true, "addons-go-online");
   }
   return ioService.offline;
 }
@@ -1391,10 +1424,8 @@ function installUpdatesAll() {
   if (!isXPInstallEnabled())
     return;
 
-  if (gUpdatesOnly) {
-    var addonsMsg = document.getElementById("addonsMsg");
-    addonsMsg.hideMessage();
-  }
+  if (gUpdatesOnly)
+    document.getElementById("addonsMsg").removeCurrentNotification();
 
   var items = [];
   var children = gExtensionsView.children;

toolkit/mozapps/extensions/content/extensions.xml

@@ -588,214 +588,4 @@
     </implementation>
   </binding>
 
-<!-- based on browser.xml browsermessage -->
-  <binding id="addonsmessage" extends="xul:hbox">
-    <resources>
-      <stylesheet src="chrome://mozapps/skin/extensions/extensions.css"/>
-    </resources>
-
-    <content align="center">
-      <xul:hbox align="center" flex="1">
-        <xul:image anonid="messageImage" class="messageImage"/>
-        <xul:description anonid="messageText" class="messageText" flex="1"/>
-      </xul:hbox>
-      <xul:button anonid="messageButton" class="messageButton"/>
-      <xul:spacer class="addonsmessage-spacer"/>
-      <xul:hbox hidden="true" anonid="messageClose" align="center" pack="end"
-                class="addonsmessage-closebutton-box">
-        <xul:toolbarbutton ondblclick="event.stopPropagation();"
-                           anonid="closeButton"
-                           class="addonsmessage-close-button close-button"
-                           tooltiptext="&closeMessage.tooltip;"/>
-      </xul:hbox>
-    </content>
-    <implementation implements="nsIAccessibleProvider">
-      <property name="accessibleType" readonly="true">
-        <getter>
-          <![CDATA[
-            return Components.interfaces.nsIAccessibleProvider.XULAlert;
-          ]]>
-        </getter>
-      </property>
-
-      <method name="showMessage">
-        <parameter name="aIconURL"/>
-        <parameter name="aMessage"/>
-        <parameter name="aButtonLabel"/>
-        <parameter name="aButtonAccesskey"/>
-        <parameter name="aShowCloseButton"/>
-        <parameter name="aNotifyData"/>
-        <body>
-          <![CDATA[
-            if (!this.hidden) {
-              // Prevent duplicate messages.
-              for (var i = 0; i < this.queue.length; ++i) {
-                if (this.queue[i][1] == aMessage) {
-                  this.queue.splice(i, 1);
-                  break;
-                }
-              }
-              // Only add new messages to the queue
-              if (this.text != aMessage)
-                this.queue.push([this.image, this.text, this.buttonText,
-                                 this.buttonAccesskey, !this.closeButton.hidden,
-                                 this.notifyData]);
-            }
-
-            this.image = aIconURL;
-            this.text = aMessage;
-            this.buttonText = aButtonLabel;
-            this.buttonAccesskey = aButtonAccesskey;
-            this.hidden = false;
-            this.notifyData = aNotifyData ? aNotifyData : null;
-            this.closeButton = aShowCloseButton;
-            // Fire event for accessibility APIs after reflow,
-            // so that accessibility code sees visible frame for
-            // the notification and can create accessible object for it
-            function fireA11yAlertEvent(self) {
-              var event = self.ownerDocument.createEvent("Events");
-              event.initEvent("AlertActive", true, true);
-              self.dispatchEvent(event);              
-            }
-            setTimeout(fireA11yAlertEvent, 0, this);
-          ]]>
-        </body>
-      </method>
-
-      <field name="notifyData">null</field>
-
-      <field name="queue">[]</field>
-      <method name="hideMessage">
-        <body>
-          <![CDATA[
-            this.hidden = true;
-            if (this.queue.length > 0) {
-              this.showMessage(this.queue[0][0], this.queue[0][1], this.queue[0][2],
-                               this.queue[0][3], this.queue[0][4], this.queue[0][5]);
-              this.queue.splice(0, 1);
-            }
-          ]]>
-        </body>
-      </method>
-
-      <field name="_imageElement">
-        document.getAnonymousElementByAttribute(this, "anonid", "messageImage");
-      </field>
-      <property name="image">
-        <getter>
-          <![CDATA[
-            return this._imageElement.getAttribute("src");
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            this._imageElement.setAttribute("src", val);
-            return val;
-          ]]>
-        </setter>
-      </property>
-
-      <field name="_textElement">
-        document.getAnonymousElementByAttribute(this, "anonid", "messageText");
-      </field>
-      <field name="_text">
-        "";
-      </field>
-      <property name="text">
-        <getter>
-          <![CDATA[
-            return this._text;
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            this._text = val;
-            while (this._textElement.hasChildNodes())
-              this._textElement.removeChild(this._textElement.firstChild);
-            this._textElement.appendChild(document.createTextNode(val));
-            return val;
-          ]]>
-        </setter>
-      </property>
-      
-<!-- _buttonElement uses visibility hidden so the height of the notification
-     box is consistent whether the button is displayed or not. -->
-      <field name="_buttonElement">
-        document.getAnonymousElementByAttribute(this, "anonid", "messageButton");
-      </field>
-      <property name="buttonText">
-        <getter>
-          <![CDATA[
-            return this._buttonElement.label;
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            if (val) {
-              if (this._buttonElement.hasAttribute("style"))
-                this._buttonElement.removeAttribute("style");
-              this._buttonElement.label = val;
-            }
-            else {
-              if (this._buttonElement.hasAttribute("label"))
-                this._buttonElement.removeAttribute("label");
-              this._buttonElement.setAttribute("style", "max-width: 1px; visibility: hidden;");
-            }
-            return val;
-          ]]>
-        </setter>
-      </property>
-
-      <property name="buttonAccesskey">
-        <getter>
-          <![CDATA[
-            return this._buttonElement.getAttribute("accesskey");
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            if (val)
-              this._buttonElement.setAttribute("accesskey", val);
-            else if (this._buttonElement.hasAttribute("accesskey"))
-              this._buttonElement.removeAttribute("accesskey");
-            return val;
-          ]]>
-        </setter>
-      </property>
-
-      <property name="closeButton">
-        <getter>
-          <![CDATA[
-            return document.getAnonymousElementByAttribute(this, "anonid", "messageClose");
-          ]]>
-        </getter>
-        <setter>
-          <![CDATA[
-            var elm = document.getAnonymousElementByAttribute(this, "anonid", "messageClose");
-            elm.hidden = !val;
-            return val;
-          ]]>
-        </setter>
-      </property>
-    </implementation>
-
-    <handlers>
-      <handler event="command">
-        <![CDATA[
-          var id = event.originalTarget.getAttribute("anonid");
-          if (id != "messageButton" && id != "closeButton")
-            return;
-          var notifyData = this.notifyData;
-          if (!this.notifyData || id == "closeButton" &&
-              this._buttonElement.style.visibility != "hidden")
-            notifyData = "addons-message-dismiss";
-          var os = Components.classes["@mozilla.org/observer-service;1"]
-                             .getService(Components.interfaces.nsIObserverService);
-          os.notifyObservers(null, "addons-message-notification", notifyData);
-          this.hideMessage();
-        ]]>
-      </handler>
-    </handlers>
-  </binding>
-
 </bindings>

toolkit/mozapps/extensions/content/extensions.xul

@@ -163,33 +163,34 @@
       <spacer flex="1"/>
     </vbox>
   </stack>
-  <addonsmessage id="addonsMsg" hidden="true"/>
-  <hbox id="extensionsBox" flex="1">
-    <richlistbox id="extensionsView" flex="1" 
-                 datasources="rdf:null" context="addonContextMenu"
-                 ondragenter="nsDragAndDrop.dragEnter(event, gExtensionsDNDObserver);"
-                 ondragover="nsDragAndDrop.dragOver(event, gExtensionsDNDObserver);"
-                 ondragdrop="nsDragAndDrop.drop(event, gExtensionsDNDObserver);"
-                 ondblclick="onViewDoubleClick(event);"/>
+  <notificationbox id="addonsMsg" flex="1">
+    <hbox id="extensionsBox" flex="1">
+      <richlistbox id="extensionsView" flex="1" 
+                   datasources="rdf:null" context="addonContextMenu"
+                   ondragenter="nsDragAndDrop.dragEnter(event, gExtensionsDNDObserver);"
+                   ondragover="nsDragAndDrop.dragOver(event, gExtensionsDNDObserver);"
+                   ondragdrop="nsDragAndDrop.drop(event, gExtensionsDNDObserver);"
+                   ondblclick="onViewDoubleClick(event);"/>
 
-    <splitter id="themeSplitter" hidden="true" collapse="after" persist="state"/>
+      <splitter id="themeSplitter" hidden="true" collapse="after" persist="state"/>
 
-    <vbox id="themePreviewArea" hidden="true" width="220" persist="width">
-      <deck id="previewImageDeck" flex="1">
-        <vbox id="noThemeSelected" pack="center" align="center">
-          <label class="previewText">&previewNoThemeSelected.label;</label>
-        </vbox>
-        <vbox id="noPreviewImage" pack="center" align="center">
-          <label class="previewText">&previewNoPreviewImage.label;</label>
-        </vbox>
-        <vbox id="previewImageContainer" align="center" pack="center">
-          <description>
-            <image id="previewImage"/>
-          </description>
-        </vbox>
-      </deck>
-    </vbox>
-  </hbox>
+      <vbox id="themePreviewArea" hidden="true" width="220" persist="width">
+        <deck id="previewImageDeck" flex="1">
+          <vbox id="noThemeSelected" pack="center" align="center">
+            <label class="previewText">&previewNoThemeSelected.label;</label>
+          </vbox>
+          <vbox id="noPreviewImage" pack="center" align="center">
+            <label class="previewText">&previewNoPreviewImage.label;</label>
+          </vbox>
+          <vbox id="previewImageContainer" align="center" pack="center">
+            <description>
+              <image id="previewImage"/>
+            </description>
+          </vbox>
+        </deck>
+      </vbox>
+    </hbox>
+  </notificationbox>
   <vbox>
     <hbox id="commandBarBottom" align="center">
       <button id="installFileButton" label="&cmd.installLocalFile.label;"

toolkit/themes/pinstripe/mozapps/extensions/extensions.css

@@ -348,51 +348,3 @@ radio#installs-view:hover, radio#installs-view[selected="true"] {
 richlistitem[selected="true"] .includeUpdate {
   -moz-user-focus: normal;
 }
-
-/* Notifcation Bar */
-addonsmessage {
-  background-color: #E6E6E6;
-  border: 1px solid #C8C8C8;
-  -moz-border-radius: 7px;
-  margin: 0 10px 0 10px;
-  padding: 4px;
-  font: icon;
-  color: #505050;
-}
-
-.messageImage {
-  margin: 0px 6px 0px 2px;
-}
-
-.messageText {
-  margin: 0px 0px 0px 1px;
-}
-
-.messageButton {
-  font-weight: normal;
-  color: #000;
-  margin: 0px 4px 0px 8px;
-}
-
-.addonsmessage-close-button {
-  list-style-image: url("chrome://global/skin/icons/closetab.png") !important;
-  list-style-image: none;
-  border: none;
-}
-
-.addonsmessage-close-button:hover > .toolbarbutton-icon {
-  background-image: none !important;
-}
-
-.addonsmessage-close-button:hover:active {
-  list-style-image: url("chrome://global/skin/icons/closetab-active.png") !important;
-}
-
-.addonsmessage-close-button > .toolbarbutton-text {
-  display: none;
-}
-
-.addonsmessage-spacer {
-  width: 3px;
-  border-bottom-width: 0px;
-}

toolkit/themes/winstripe/mozapps/extensions/extensions.css

@@ -415,55 +415,3 @@ radio#installs-view:hover, radio#installs-view[selected="true"] {
 richlistitem[selected="true"] .includeUpdate {
   -moz-user-focus: normal;
 }
-
-/* Notifcation Bar */
-addonsmessage {
-  background-color: InfoBackground;
-  border-bottom: 1px solid ThreeDDarkShadow;
-  color: InfoText;
-  padding: 3px;
-}
-
-.messageImage {
-  width: 16px;
-  height: 16px;
-  border: 1px solid transparent;
-}
-
-.messageText {
-  -moz-margin-start: 5px;
-}
-
-.messageButton {
-  margin: 0px 5px 0px 5px;
-}
-
-.addonsmessage-close-button > .toolbarbutton-icon {
-  -moz-margin-end: 0px !important;
-}
-
-.addonsmessage-close-button {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-appearance: none;
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-  -moz-margin-start: 2px;
-  margin-top: 0px;
-  border: none !important;
-  padding: 0px;
-  opacity: 1.0;
-}
-
-.addonsmessage-close-button:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-  opacity: 1.0;
-}
-
-.addonsmessage-close-button:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-  opacity: 1.0;
-}
-
-.addonsmessage-spacer {
-  width: 3px;
-  border-bottom-width: 0px;
-}