Use CSS animation when possible to make it lighter

core/src/plugins/gui.ajax/res/js/ajaxplorer/class.AjxpUsersCompleter.js

@@ -32,15 +32,15 @@ Class.create("AjxpUsersCompleter", Ajax.Autocompleter, {
         li.insert({bottom:'<span style="display: none;" class="delete_user_entry icon-remove-sign">&nbsp;</span>'});
 
         if(!skipObservers){
-            li.setStyle({opacity:0});
+            /*li.setStyle({opacity:0});*/
             li.observe("mouseover", function(event){li.down('span.delete_user_entry').show();});
             li.observe("mouseout", function(event){li.down('span.delete_user_entry').hide();});
             li.down("span.delete_user_entry").observe("click", function(){
-                Effect.Fade(li, {duration:0.3, afterFinish:li.remove.bind(li)});
+                Effect.RowFade(li, {duration:0.3, afterFinish:li.remove.bind(li)});
             });
             li.appendToList = function(htmlObject){
                 htmlObject.insert({bottom:li});
-                Effect.Appear(li, {duration:0.3});
+                Effect.RowAppear(li, {duration:0.3});
             };
         }
 

core/src/plugins/gui.ajax/res/js/ajaxplorer/class.FilesList.js

@@ -1205,14 +1205,13 @@ Class.create("FilesList", SelectableElements, {
                         this.initRowsBuffered();
                     }.bind(this), 10);
                 }else{
-                    new Effect.Fade(item, {afterFinish:function(){
+                    new Effect.RowFade(item, {afterFinish:function(){
                         try{
                             item.remove();
                         }catch(e){if(console) console.log(e);}
                         delete item;
                         this.initRowsBuffered();
                     }.bind(this), duration:0.2});
-
                 }
                 /*
                 item.remove();

core/src/plugins/gui.ajax/res/js/ajaxplorer/class.Modal.js

@@ -612,7 +612,7 @@ Class.create("Modal", {
 	closeMessageDiv: function(){
 		if(this.messageDivOpen)
 		{
-			new Effect.Fade(this.messageBox);
+			new Effect.MessageFade(this.messageBox);
 			this.messageDivOpen = false;
 		}
 	},
@@ -656,7 +656,7 @@ Class.create("Modal", {
 			left:leftPosition+'px',
 			width:boxWidth+'px'
 		});
-		new Effect.Appear(this.messageBox);
+		new Effect.MessageAppear(this.messageBox);
 		this.tempoMessageDivClosing();
 	},
 	/**

core/src/plugins/gui.ajax/res/js/ajaxplorer_list.txt

@@ -19,6 +19,7 @@ js/lib/scriptaculous/src/effects.js
 js/lib/scriptaculous/src/dragdrop.js
 js/lib/scriptaculous/src/controls.js
 js/lib/scriptaculous/src/slider.js
+js/lib/prototype/cssfx.js
 js/lib/prototype/proto.scroller.js
 js/lib/prototype/carousel.js
 js/lib/prototype/accordion.js

core/src/plugins/gui.ajax/res/js/lib/prototype/cssfx.js

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2007-2013 Charles du Jeu - Abstrium SAS <team (at) pyd.io>
+ * This file is part of Pydio.
+ *
+ * Pydio is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pydio is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pydio.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * The latest code can be found at <http://pyd.io/>.
+ */
+
+
+Effect.CSS_SUPPORTED = Modernizr.csstransitions && Modernizr.cssanimations;
+
+Effect.CSS_ANIMATE = function(effectName, element, options){
+
+    var className;
+    var originalMethod;
+    var endStyle = {};
+    switch (effectName){
+        case "RowFade":
+            className = 'quick bounceOutLeft';
+            originalMethod = 'Fade';
+            break;
+        case "RowAppear":
+            className = 'quick fadeInLeft';
+            originalMethod = 'Appear';
+            break;
+        case "MessageAppear":
+            className = 'long fadeInUpBig';
+            endStyle = {opacity: 1};
+            originalMethod ='Appear';
+            break;
+        case "MessageFade":
+            className = 'long fadeOutDownBig';
+            endStyle = {opacity: 0};
+            originalMethod ='Appear';
+            break;
+        case "MenuAppear":
+            className = 'super-quick fadeIn';
+            endStyle = {opacity: 1};
+            originalMethod ='Appear';
+            break;
+    }
+
+    if(Effect.CSS_SUPPORTED){
+
+        ["webkitAnimationEnd", "mozAnimationEnd", "oAnimationEnd", "animationEnd"].map(
+            function(event){
+                element.observe(event, function(){
+                    element.removeClassName(className);
+                });
+                if(endStyle) element.setStyle(endStyle);
+                if(options && options.afterFinish) element.observe(event, options.afterFinish);
+            }
+        );
+        element.addClassName('animated ' + className);
+
+    }else{
+
+        new Effect[originalMethod](element, options);
+
+    }
+
+};
+
+
+/**
+ * Migrating original Scriptaculous effects to CSS3-based effects when possible
+ * @param element
+ * @param options Same options
+ * @constructor
+ */
+Effect.RowFade = function(element, options){ Effect.CSS_ANIMATE("RowFade", element, options);};
+Effect.RowAppear = function(element, options){ Effect.CSS_ANIMATE("RowAppear", element, options); };
+Effect.MessageFade = function(element, options){ Effect.CSS_ANIMATE("MessageFade", element, options);};
+Effect.MessageAppear = function(element, options){ Effect.CSS_ANIMATE("MessageAppear", element, options); };
+Effect.MenuAppear = function(element, options){ Effect.CSS_ANIMATE("MenuAppear", element, options); };
+