Forums : Xul, Xbl, JS...

Salut,

Le web regorge de script javascript permettant de faire ça.. Le principe est simple : utilisation de setTimeout avec une fonction qui à chaque appel va augmenter la taille visible.

Sinon, regarde comment ils font dans firefox.

Oui, en effet, j'ai tout simplement copié la méthode que Firefox utilise pour faire l'effet glissant des notifications et cela fonctionne très bien.

Merci.

Pour ceux qui cherchent et qui souhaitent en être inspirés :

Code XUL/JS

function _showNotification(aNotification, aSlideIn) {

   
   if (this._timer) {
       clearInterval(this._timer);
       if (this.currentNotification) {
           this.currentNotification.style.marginTop = "0px";
           this.currentNotification.style.opacity = 1;
       }
       if (this._closedNotification) 
           this._closedNotification.parentNode.removeChild(this._closedNotification);
       this._setBlockingState(this.currentNotification);
   }
   
this.slideSteps = 15;

   var height = aNotification.boxObject.height;
   var change = height / this.slideSteps;
   if (aSlideIn) {
       if (this.currentNotification &&
       this.currentNotification.boxObject.height > height) 
           height = this.currentNotification.boxObject.height;
       
       this.currentNotification = aNotification;
       this._closedNotification = null;
       aNotification.style.removeProperty("position");
       aNotification.style.removeProperty("top");
       aNotification.style.marginTop = -height + "px";
       aNotification.style.opacity = 0;
   }
   else {
       change = -change;
       this._closedNotification = aNotification;
       var notifications = this.allNotifications;
       var idx = notifications.length - 2;
       if (idx >= 0) 
           this.currentNotification = notifications[idx];
       else 
           this.currentNotification = null;
   }
   var opacitychange = change / height;
   
   var self = this;
   var slide = function slideInFn(){
       var done = false;
       
       var style = window.getComputedStyle(aNotification, null);
       var margin = style.getPropertyCSSValue("margin-top").getFloatValue(CSSPrimitiveValue.CSS_PX);
       
       if (change > 0 && margin + change >= 0) {
           aNotification.style.marginTop = "0px";
           aNotification.style.opacity = 1;
           done = true;
       }
       else 
           if (change < 0 && margin + change <= -height) {
               aNotification.style.marginTop = -height + "px";
               done = true;
           }
           else {
               aNotification.style.marginTop = (margin + change).toFixed(4) + "px";
               if (opacitychange) 
                   aNotification.style.opacity = Number(aNotification.style.opacity) + opacitychange;
           }
       
       if (done) {
           clearInterval(self._timer);
           self._timer = null;
           //if (self._closedNotification) 
           //    self._closedNotification.parentNode.removeChild(self._closedNotification);
           self._setBlockingState(self.currentNotification);
       }
   }
   
   this._timer = setInterval(slide, 50);
}

function _setBlockingState(aNotification) {

var isblock = aNotification && aNotification.priority == this.PRIORITY_CRITICAL_BLOCK;
           var canvas = this._blockingCanvas;
           if (isblock) {
             if (!canvas)
               canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
             const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
             var content = this.firstChild;
             if (!content ||
                  content.namespaceURI != XULNS ||
                  content.localName != "browser")
               return;
             var width = content.boxObject.width;
             var height = content.boxObject.height;
             content.collapsed = true;
             canvas.setAttribute("width", width);
             canvas.setAttribute("height", height);
             canvas.setAttribute("flex", "1");
             this.appendChild(canvas);
             this._blockingCanvas = canvas;
             var bgcolor = "white";
             try {
               var prefService = Components.classes["@mozilla.org/preferences-service;1"].
                                   getService(Components.interfaces.nsIPrefBranch);
               bgcolor = prefService.getCharPref("browser.display.background_color");
               var win = content.contentWindow;
               var context = canvas.getContext("2d");
               context.globalAlpha = 0.5;
               context.drawWindow(win, win.scrollX, win.scrollY,
                                  width, height, bgcolor);
             }
             catch(ex) { };
           }
           else if (canvas) {
             canvas.parentNode.removeChild(canvas);
             this._blockingCanvas = null;
             var content = this.firstChild;
             if (content)
               content.collapsed = false;
           }

}

N'oublie pas de respecter la licence du code source ;-) Si ce morceau de code provient de Firefox, le fichier dans lequel tu as copié doit être sous licence MPL.

Absolument.