[MERGE]Merge trunk-website-al.

bzr revid: bth@tinyerp.com-20131017131139-whjjmuin6g9cby9r

13 files changed, 364 insertions, 156 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index ebcb7f43826..dc9bb076e59 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -304,53 +305,87 @@ table.editorbar-panel td.selected {
 }
 
 /* ---- SNIPPETS DROP ZONES ---- */
-.oe_drop_zone.oe_insert {
+#dark_for_dropzone {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.4;
+  z-index: 1000;
+  pointer-events: none;
+}
+#dark_for_dropzone td {
+  background: black;
+}
+#dark_for_dropzone td.center.active {
+  background: transparent;
+}
+
+.oe_drop_zone, .oe_drop_zone_style {
+  border: none;
+  background: rgba(100, 255, 255, 0.9);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+.oe_drop_zone div, .oe_drop_zone_style div {
+  margin: 0;
+  line-height: 48px;
+  text-align: center;
+  color: magenta;
+  font-weight: bold;
+  font-size: 24px;
+}
+.oe_drop_zone .oe_active, .oe_drop_zone_style .oe_active {
+  display: none;
+}
+
+.oe_drop_zone_style div {
+  line-height: 24px;
+}
+
+.oe_drop_zone {
   display: block;
   height: 48px;
   margin: 0px;
   margin-top: -4px;
   margin-bottom: -44px;
-  -webkit-transition: margin 250ms linear;
-  -moz-transition: margin 250ms linear;
-  -o-transition: margin 250ms linear;
-  transition: margin 250ms linear;
+  z-index: 1002;
   width: 100%;
   position: absolute;
-  z-index: 1000;
 }
-.oe_drop_zone.oe_insert:not(.oe_vertical):before {
+.oe_drop_zone:not(.oe_vertical):before {
   content: "";
   display: block;
   border-top: dashed 2px rgba(209, 178, 255, 0.72);
   position: relative;
   top: 0px;
 }
-.oe_drop_zone.oe_insert.oe_hover:before {
+.oe_drop_zone.oe_hover:before {
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }
-.oe_drop_zone.oe_insert.oe_vertical {
+.oe_drop_zone.oe_vertical {
   width: 48px;
   float: left;
   position: relative;
-  margin: 0px -24px !important;
+  margin: 4px -24px !important;
 }
-.oe_drop_zone.oe_insert.oe_overlay {
+.oe_drop_zone.oe_vertical div {
+  display: none;
+}
+.oe_drop_zone.oe_overlay {
   border-radius: 3px;
-  background: rgba(153, 0, 255, 0.5);
 }
-
-.oe_drop_zone, .oe_drop_zone_style {
-  border: none;
-  background: rgba(153, 0, 255, 0.3);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
+.oe_drop_zone.oe_drop_active {
+  background: rgba(100, 255, 255, 0.3);
+}
+.oe_drop_zone.oe_drop_active div {
+  display: none;
 }
-.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
-  background: rgba(0, 255, 133, 0.3);
-  z-index: 1001;
+.oe_drop_zone.oe_drop_active .oe_active {
+  display: block;
 }
 
 .oe_drop_zone_style {
@@ -602,34 +637,29 @@ table.editorbar-panel td.selected {
 
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
-  -webkit-transition: all 0.2s ease-in;
-  -moz-transition: all 0.2s ease-in;
-  -o-transition: all 0.2s ease-in;
-  transition: all 0.2s ease-in;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
-  opacity: 0.3;
   position: fixed;
   top: 51px;
   right: 0;
   z-index: 1000;
   height: 100%;
+  width: 720px;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title {
   width: 100%;
-  padding-top: 4px;
-  padding-left: 4px;
-  height: 40px;
+  padding-top: 0;
+  padding-left: 0;
+  height: 30px;
   background: #2f3129;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
   width: 50%;
-  height: 32px;
+  height: 30px;
   font-size: 14px;
   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
   line-height: normal;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .btn {
-  height: 32px;
+  height: 30px;
   padding: 0 4px 0 4px;
   font-size: 14px;
   font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
@@ -637,21 +667,18 @@ table.editorbar-panel td.selected {
 }
 .oe_ace_view_editor .ace_editor {
   position: absolute;
-  top: 40px;
+  top: 30px;
   right: 0;
   bottom: 51px;
   left: 0;
   width: 720px;
 }
-.oe_ace_view_editor:hover {
+.oe_ace_view_editor.oe_ace_open {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
-.oe_ace_view_editor.oe_ace_open {
-  width: 720px;
-}
 .oe_ace_view_editor.oe_ace_closed {
-  width: 0;
+  z-index: -1000;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 1ef6d67bb49..bc8b238736e 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -4,15 +4,15 @@
 @import "compass/css3/user-interface"
 @import "compass/css3/transition"
 
-//smartphones, iPhone, portrait 480x320 phones 
+//smartphones, iPhone, portrait 480x320 phones
 $smart_phone: 320px
 //portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
-$small-tablet: 481px 
+$small-tablet: 481px
 //portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
-$portrait-tablet: 641px 
-//tablet, landscape iPad, lo-res laptops ands desktops 
+$portrait-tablet: 641px
+//tablet, landscape iPad, lo-res laptops ands desktops
 $tablet: 961px
-//big landscape tablets, laptops, and desktops  
+//big landscape tablets, laptops, and desktops
 $desktop: 1025px
 
 /* ---- CKEditor Minimal Reset ---- */
@@ -179,7 +179,7 @@ table.editorbar-panel
                 background: black !important
             > a
                 padding: 2px 10px !important
-                width: 100% 
+                width: 100%
                 display: block
                 border: 0
         z-index: 1
@@ -189,13 +189,13 @@ table.editorbar-panel
         display: inline-block
         white-space: nowrap
         background: black
-        > div   
+        > div
             background: rgb(0,0,0)
             label
                 width: 44px
                 color: #fff
                 padding-left: 10px
-                
+
                 div
                     width: 100px
                     text-align: center
@@ -242,16 +242,45 @@ table.editorbar-panel
 
 /* ---- SNIPPETS DROP ZONES ---- */
 
-.oe_drop_zone.oe_insert
+#dark_for_dropzone
+    width: 100%
+    position: absolute
+    top: 0
+    left: 0
+    opacity: 0.4
+    z-index: 1000
+    pointer-events: none
+    td
+        background: #000
+        &.center.active
+            background: transparent
+
+.oe_drop_zone, .oe_drop_zone_style
+    border: none
+    background: rgba(100, 255, 255, .9)
+    +border-radius(4px)
+    div
+        margin: 0
+        line-height: 48px
+        text-align: center
+        color: #FF00FF
+        font-weight: bold
+        font-size: 24px
+    .oe_active
+        display: none
+
+.oe_drop_zone_style div
+    line-height: 24px
+
+.oe_drop_zone
     display: block
     height: 48px
     margin: 0px
     margin-top: -4px
     margin-bottom: -44px
-    @include transition(margin 250ms linear)
+    z-index: 1002
     width: 100%
     position: absolute
-    z-index: 1000
     &:not(.oe_vertical):before
         content: ""
         display: block
@@ -264,22 +293,17 @@ table.editorbar-panel
         width: 48px
         float: left
         position: relative
-        margin: 0px -24px !important
+        margin: 4px -24px !important
+        div
+            display: none
     &.oe_overlay
         border-radius: 3px
-        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
-        //background-size: 100px 100px
-        background: rgba(153, 0, 255,.5)
-        
-.oe_drop_zone, .oe_drop_zone_style
-    border: none
-    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
-    //background-size: 100px 100px
-    background: rgba(153, 0, 255, .3)
-    +border-radius(4px)
-    &.oe_hover
-        background: rgba(0, 255, 133, .3)
-        z-index: 1001
+    &.oe_drop_active
+        background: rgba(100, 255, 255, .3)
+        div
+            display: none
+        .oe_active
+            display: block
 
 .oe_drop_zone_style
     color: white
@@ -293,7 +317,7 @@ table.editorbar-panel
     display: none
     position: absolute
     background: transparent
-    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) 
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
     +border-radius(3px)
     @include transition(opacity 100ms linear)
     +box-sizing(border-box)
@@ -467,7 +491,7 @@ $highlighted_text_color: #ffffff
 /* ---- ACE EDITOR ---- */
 
 $ace_width: 720px
-$editorbar_height: 40px
+$editorbar_height: 30px
 // TODO Fix => might break with themes
 $navbar_height: 51px
 
@@ -476,25 +500,24 @@ $navbar_height: 51px
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
     line-height: normal
 .oe_ace_view_editor
-    @include transition(all 0.2s ease-in)
-    +opacity(0.3)
     position: fixed
     top: $navbar_height
     right: 0
     z-index: 1000
     height: 100%
+    width: $ace_width
     .oe_ace_view_editor_title
         width: 100%
-        padding-top: 4px
-        padding-left: 4px
+        padding-top: 0
+        padding-left: 0
         height: $editorbar_height
         background: #2F3129
         .oe_view_list
             width: 50%
-            height: $editorbar_height - 8px
+            height: $editorbar_height
             @include editor-font
         .btn
-            height: $editorbar_height - 8px
+            height: $editorbar_height
             padding: 0 4px 0 4px
             @include editor-font
     .ace_editor
@@ -504,12 +527,10 @@ $navbar_height: 51px
         bottom: $navbar_height
         left: 0
         width: $ace_width
-    &:hover
-        +opacity(1)
     &.oe_ace_open
-        width: $ace_width
+        +opacity(1)
     &.oe_ace_closed
-        width: 0
+        z-index: -1000
         +opacity(0)
 
 /* ---- EDITOR TOUR ---- */
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 63e8fbefa76..c6bb24d04f0 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -216,5 +216,4 @@
 [data-snippet-id] {
     min-height: 10px;
     min-width: 10px;
-}
-
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index ce87e592136..c5b58815c67 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -235,7 +235,10 @@ footer {
 }
 
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
-  position: static;
+  position: relative;
+}
+.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child div, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child div {
+  display: none;
 }
 
 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 5197653429c..2735dfe9fc8 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -161,7 +161,9 @@ footer
     height: 220px !important
 
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
-    position: static
+    position: relative
+    div
+        display: none
 
 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
     content: 'Click Edit To Create Content'
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index 1a0417ff11a..faf3e8f7e04 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -66,6 +66,9 @@
     });
 
     website.ace.ViewEditor = openerp.Widget.extend({
+        resizing: false,
+        refX: 0,
+        minWidth: 40,
         template: 'website.ace_view_editor',
         events: {
             'change #ace-view-list': 'displaySelectedView',
@@ -89,6 +92,32 @@
                 self.loadViews.call(self, views);
                 self.open.call(self);
             });
+
+            var $editor = self.$('.ace_editor');
+            function resizeEditor (target) {
+                var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), self.minWidth));
+                $editor.width(width);
+                self.aceEditor.resize();
+                self.$el.width(width);
+            }
+            function startResizing (e) {
+                self.refX = e.pageX;
+                self.resizing = true;
+            }
+            function stopResizing () {
+                self.resizing = false;
+            }
+            function updateWidth (e) {
+                if (self.resizing) {
+                    var offset = e.pageX - self.refX;
+                    var width = self.$el.width() - offset;
+                    self.refX = e.pageX;
+                    resizeEditor(width);
+                }
+            }
+            document.body.addEventListener('mouseup', stopResizing, true);
+            self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
+            $(document).mousemove(updateWidth);
         },
         loadViews: function (views) {
             var self = this;
@@ -205,11 +234,7 @@
         },
         close: function () {
             window.location.hash = "";
-            var self = this;
-            this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
-                globalEditor = null;
-                self.destroy.call(self);
-            }).removeClass('oe_ace_open').addClass('oe_ace_closed');
+            this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
         },
     });
 
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 81fe087a59e..485ba48e35b 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -307,7 +307,7 @@
             });
         },
         cancel: function () {
-            window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
+            website.reload();
         },
     });
 
@@ -394,7 +394,7 @@
             // - contextmenu & tabletools (disable contextual menu)
             // - bunch of unused plugins
             var plugins = [
-                'a11yhelp', 'basicstyles', 'bidi', 'blockquote',
+                'a11yhelp', 'basicstyles', 'blockquote',
                 'clipboard', 'colorbutton', 'colordialog', 'dialogadvtab',
                 'elementspath', 'enterkey', 'entities', 'filebrowser',
                 'find', 'floatingspace','format', 'htmlwriter', 'iframe',
@@ -927,7 +927,7 @@
     }
 
 
-    var Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
+    website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
     var OBSERVER_CONFIG = {
         childList: true,
         attributes: true,
@@ -935,7 +935,7 @@
         subtree: true,
         attributeOldValue: true,
     };
-    var observer = new Observer(function (mutations) {
+    var observer = new website.Observer(function (mutations) {
         // NOTE: Webkit does not fire DOMAttrModified => webkit browsers
         //       relying on JsMutationObserver shim (Chrome < 18, Safari < 6)
         //       will not mark dirty on attribute changes (@class, img/@src,
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 1f4e54b43df..963a0b1664d 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -38,7 +38,12 @@
         return $.when.apply(null, dones);
     };
     website.reload = function () {
-        window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?|#.*/g, '');
+        location.hash = "scrollTop=" + window.document.body.scrollTop;
+        if (location.search.indexOf("unable_editor") > -1) {
+            window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/g, '');
+        } else {
+            window.location.reload();
+        }
     };
 
     var all_ready = null;
@@ -167,6 +172,11 @@
             website.init_kanban(this);
         });
 
+        setTimeout(function () {
+            if (window.location.hash.indexOf("scrollTop=") > -1) {
+                window.document.body.scrollTop = +location.hash.match(/scrollTop=([0-9]+)/)[1];
+            }
+        },0);
     });
 
     return website;
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 0d20253290a..342837f43c1 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -241,7 +241,8 @@
             return hashIndex >= 0 ? url.substring(0, hashIndex) : url;
         },
         title: function () {
-            return ($('title').length > 0) && $('title').text() && $('title').text().trim();
+            var $title = $('title');
+            return ($title.length > 0) && $title.text() && $title.text().trim();
         },
         changeTitle: function (title) {
             // TODO create tag if missing
@@ -250,7 +251,7 @@
         },
         description: function () {
             var $description = $('meta[name=description]');
-            return ($description.length > 0) && $description.attr('value') && $description.attr('value').trim();
+            return ($description.length > 0) && ($description.attr('value') && $description.attr('value').trim());
         },
         changeDescription: function (description) {
             // TODO create tag if missing
@@ -322,6 +323,9 @@
             'click button[data-action=update]': 'update',
             'hidden.bs.modal': 'destroy',
         },
+        canEditTitle: false,
+        canEditDescription: false,
+        canEditKeywords: false,
         maxTitleSize: 65,
         maxDescriptionSize: 155,
         start: function () {
@@ -331,13 +335,13 @@
             $modal.find('.js_seo_page_url').text(htmlPage.url());
             $modal.find('input[name=seo_page_title]').val(htmlPage.title());
             $modal.find('textarea[name=seo_page_description]').val(htmlPage.description());
-            self.suggestImprovements();
-            self.imageList = new website.seo.ImageList(self, { page: htmlPage });
-            if (htmlPage.images().length === 0) {
-                $modal.find('.js_image_section').remove();
-            } else {
-                self.imageList.appendTo($modal.find('.js_seo_image_list'));
-            }
+            // self.suggestImprovements();
+            // self.imageList = new website.seo.ImageList(self, { page: htmlPage });
+            // if (htmlPage.images().length === 0) {
+            //     $modal.find('.js_image_section').remove();
+            // } else {
+            //     self.imageList.appendTo($modal.find('.js_seo_image_list'));
+            // }
             self.keywordList = new website.seo.KeywordList(self, { page: htmlPage });
             self.keywordList.on('list-full', self, function () {
                 $modal.find('input[name=seo_page_keywords]')
@@ -356,8 +360,27 @@
                 self.keywordList.add(word);
             });
             self.keywordList.appendTo($modal.find('.js_seo_keywords_list'));
+            self.disableUnsavableFields();
             $modal.modal();
         },
+        disableUnsavableFields: function () {
+            var self = this;
+            var $modal = self.$el;
+            self.loadMetaData().then(function (data) {
+                self.canEditTitle = data && ('website_meta_title' in data);
+                self.canEditDescription = data && ('website_meta_description' in data);
+                self.canEditKeywords = data && ('website_meta_keywords' in data);
+                if (!self.canEditTitle) {
+                    $modal.find('input[name=seo_page_title]').attr('disabled', true);
+                }
+                if (!self.canEditDescription) {
+                    $modal.find('textarea[name=seo_page_description]').attr('disabled', true);
+                }
+                if (!self.canEditTitle && !canEditDescription && !canEditKeywords) {
+                    $modal.find('button[data-action=update]').attr('disabled', true);
+                }
+            });
+        },
         suggestImprovements: function () {
             var tips = [];
             var self = this;
@@ -397,11 +420,16 @@
         },
         update: function () {
             var self = this;
-            var data = {
-                website_meta_title: self.htmlPage.title(),
-                website_meta_description: self.htmlPage.description(),
-                website_meta_keywords: self.keywordList.keywords().join(", "),
-            };
+            var data = {};
+            if (self.canEditTitle) {
+                data.website_meta_title = self.htmlPage.title();
+            }
+            if (self.canEditDescription) {
+                data.website_meta_description = self.htmlPage.description();
+            }
+            if (self.canEditKeywords) {
+                data.website_meta_keywords = self.keywordList.keywords().join(", ");
+            }
             self.saveMetaData(data).then(function () {
                self.$el.modal('hide');
             });
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index e4e41e802fa..17dd829708f 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -24,6 +24,7 @@
         },
         save: function () {
             this.snippets.make_active(false);
+            this.snippets.clean_for_save();
             remove_added_snippet_id();
             this._super();
         },
@@ -44,7 +45,14 @@
     /* ----- SNIPPET SELECTOR ---- */
     
     website.snippet = {};
-
+    var observer = new website.Observer(function (mutations) {
+        if (!_(mutations).find(function (m) {
+                    return m.type === 'childList' && m.addedNodes.length > 0;
+                })) {
+            return;
+        }
+        hack_to_add_snippet_id()
+    });
 
     // puts $el at the same absolute position as $target
     function hack_to_add_snippet_id () {
@@ -78,7 +86,12 @@
             }
             this.$active_snipped_id = false;
             hack_to_add_snippet_id();
-            $("body").on('DOMNodeInserted', hack_to_add_snippet_id);
+            this.snippets = [];
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
         },
         dom_filter: function (dom, sibling) {
             if (typeof dom === "string") {
@@ -206,6 +219,14 @@
                 }
             }
         },
+        clean_for_save: function () {
+            for (var k in this.snippets) {
+                var editor = $(this.snippets[k]).data("snippet-editor");
+                if (editor) {
+                    editor.clean_for_save();
+                }
+            }
+        },
         make_active: function ($snipped_id) {
             if ($snipped_id && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snipped_id.get(0)) {
                 return;
@@ -214,6 +235,9 @@
                 this.snippet_blur(this.$active_snipped_id);
             }
             if ($snipped_id) {
+                if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) {
+                    this.snippets.push($snipped_id.get(0));
+                }
                 this.$active_snipped_id = $snipped_id;
                 this.create_overlay(this.$active_snipped_id);
                 this.snippet_focus($snipped_id);
@@ -295,17 +319,32 @@
 
                     }
 
+                    var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone'))
+                        .css('height', $("body")[0].scrollHeight + 'px');
+                    $("body").append($dark);
+
                     $('.oe_drop_zone').droppable({
                         over:   function(){
                             if( action === 'insert'){
                                 dropped = true;
-                                $(this).first().after($toInsert);
+                                $(this).first().addClass("oe_drop_active").after($toInsert);
+                                $dark.find("td:first")
+                                    .css('height', $toInsert.offset().top+'px');
+                                $dark.find("tr:eq(1) td:first")
+                                    .css('width', $toInsert.offset().left+'px');
+                                $dark.find("td.center")
+                                    .addClass("active")
+                                    .css('height', $toInsert.outerHeight()+'px')
+                                    .css('width', $toInsert.outerWidth()+'px');
                             }
                         },
                         out:    function(){
                             if( action === 'insert'){
+                                $(this).removeClass("oe_drop_active");
                                 dropped = false;
                                 $toInsert.detach();
+                                $dark.find("td.center").removeClass("active");
+                                $("body").scroll(); // trigger a scroll to reset position for jquery api
                             }
                         },
                         drop:   function(){
@@ -314,15 +353,8 @@
                     });
                 },
                 stop: function(ev, ui){
-		    if (action === 'insert' && ! dropped) {
-		        var el = $('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first()
-			if (el) {
-			    el.after($toInsert)
-			    dropped = true;
-			}
-		    }
-
                     $('.oe_drop_zone').droppable('destroy').remove();
+                    $("#dark_for_dropzone").remove();
                     if (dropped) {
                         var $target = false;
                         if(action === 'insert'){
@@ -373,7 +405,7 @@
             var sibling_selector = selector.siblings;
             var vertical_child_selector   =  selector.vertical_children;
 
-            var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
+            var zone_template = openerp.qweb.render('website.snippet_drop_zone');
 
             if(child_selector){
                 self.dom_filter(child_selector).each(function (){
@@ -393,7 +425,7 @@
                     var temp_left = 0;
                     $zone.find('> *:not(.oe_drop_zone):visible').each(function () {
                         var $col = $(this);
-                        $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px');
+                        $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")) - 8)+'px');
                         $lastinsert = $template.clone();
                         $(this).after($lastinsert);
 
@@ -562,7 +594,8 @@
         *       Displayed into the overlay options on focus
         */
         _readXMLData: function() {
-            this.$el = this.parent.$snippets.siblings("[data-snippet-id='"+this.snippet_id+"']").clone();
+            var self = this;
+            this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone();
             this.$editor = this.$el.find(".oe_snippet_options");
             var $options = this.$overlay.find(".oe_overlay_options");
             this.$editor.prependTo($options.find(".oe_options ul"));
@@ -597,18 +630,28 @@
             });
         },
         _drag_and_drop_after_insert_dropzone: function (){},
-        _drag_and_drop_active_drop_zone: function ($zones){
+        _drag_and_drop_active_drop_zone: function (){
             var self = this;
-            $zones.droppable({
+            var $dark = $("#dark_for_dropzone");
+            $('.oe_drop_zone').droppable({
                 over:   function(){
-                    $(".oe_drop_zone.hide").removeClass("hide");
-                    $(this).addClass("hide").first().after(self.$target);
+                    $(this).first().addClass("oe_drop_active").after(self.$target);
+                    $dark.find("td:first")
+                        .css('height', self.$target.offset().top+'px');
+                    $dark.find("tr:eq(1) td:first")
+                        .css('width', self.$target.offset().left+'px');
+                    $dark.find("td.center")
+                        .addClass("active")
+                        .css('height', self.$target.outerHeight()+'px')
+                        .css('width', self.$target.outerWidth()+'px');
                     self.dropped = true;
                 },
                 out:    function(){
-                    $(this).removeClass("hide");
+                    $(this).removeClass("oe_drop_active");
+                    $dark.find("td.center").removeClass("active");
                     self.$target.detach();
                     self.dropped = false;
+                    $("body").scroll(); // trigger a scroll to reset position for jquery api
                 },
             });
         },
@@ -632,8 +675,12 @@
 
             $("body").addClass('move-important');
             
+            var $dark = $(openerp.qweb.render('website.snippet_dark_for_dropzone'))
+                .css('height', $("body")[0].scrollHeight + 'px');
+            $("body").append($dark);
+
             self._drag_and_drop_after_insert_dropzone();
-            self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
+            self._drag_and_drop_active_drop_zone();
         },
         _drag_and_drop_stop: function (){
             var self = this;
@@ -643,6 +690,7 @@
             self.$overlay.removeClass("hidden");
             $("body").removeClass('move-important');
             $('.oe_drop_zone').droppable('destroy').remove();
+            $('#dark_for_dropzone').remove();
             $(".oe_drop_clone, .oe_drop_to_remove").remove();
             self.parent.editor_busy = false;
             self.get_parent_block();
@@ -718,8 +766,9 @@
         start: function () {
             var self = this;
             this.$overlay.on('click', '.oe_snippet_remove', function () {
-                self.$target.detach();
                 self.onBlur();
+                var index = _.indexOf(self.parent.snippets, self.$target.get(0));
+                delete self.parent.snippets[index];
                 self.$target.remove();
                 return false;
             });
@@ -749,10 +798,18 @@
             this.$overlay.removeClass('oe_active');
         },
 
+        /* clean_for_save
+        *  function called just before save vue
+        */
+        clean_for_save: function () {
+
+        },
+
         change_background: function (bg, ul_options) {
             var self = this;
             this.set_options_background(bg, ul_options);
             var $ul = this.$editor.find(ul_options);
+            var bg_value = (typeof bg === 'string' ? this.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
 
             // bind envent on options
             var $li = $ul.find("li");
@@ -931,23 +988,25 @@
 
         _drag_and_drop_after_insert_dropzone: function(){
             var self = this;
-            var $zones = $(".row:has(> .oe_drop_zone)").each(function () {
-                var $row = $(this);
-                var width = $row.innerWidth();
-                var pos = 0;
-                while (width > pos + self.size.width) {
-                    var $last = $row.find("> .oe_drop_zone:last");
-                    $last.each(function () {
-                        pos = $(this).position().left;
-                    });
-                    if (width > pos + self.size.width) {
-                        $row.append("<div class='col-md-1 oe_drop_to_remove'/>");
-                        var $add_drop = $last.clone();
-                        $row.append($add_drop);
-                        self._drag_and_drop_active_drop_zone($add_drop);
-                    }
-                }
-            });
+            // commented for perf
+
+            // var $zones = $(".row:has(> .oe_drop_zone)").each(function () {
+            //     var $row = $(this);
+            //     var width = $row.innerWidth();
+            //     var pos = 0;
+            //     while (width > pos + self.size.width) {
+            //         var $last = $row.find("> .oe_drop_zone:last");
+            //         $last.each(function () {
+            //             pos = $(this).position().left;
+            //         });
+            //         if (width > pos + self.size.width) {
+            //             $row.append("<div class='col-md-1 oe_drop_to_remove'/>");
+            //             var $add_drop = $last.clone();
+            //             $row.append($add_drop);
+            //             self._drag_and_drop_active_drop_zone($add_drop);
+            //         }
+            //     }
+            // });
         },
         _drag_and_drop_start: function () {
             this._super();
@@ -983,6 +1042,11 @@
         },
     });
 
+    website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({
+        start: function () {
+            this.$target.carousel();
+        },
+    });
     website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
         build_snippet: function() {
             var id = 0;
@@ -1005,6 +1069,13 @@
             this._super();
             this.$target.carousel('cycle');
         },
+        clean_for_save: function () {
+            this._super();
+            this.$target.find(".item").removeClass("next prev left right");
+            if(!this.$target.find(".item.active").length) {
+                this.$target.find(".item:first").addClass("active");
+            }
+        },
         start : function () {
             this._super();
 
@@ -1029,18 +1100,14 @@
                 self.$target.carousel();
             });
 
-            this.$target.on('dblclick', '.item.active .carousel-image img', function (event) {
-                $('#oe_rte_toolbar .cke_button__image .cke_button__image_icon').click();
-            });
-
             this.rebind_event();
         },
         // rebind event to active carousel on edit mode
         rebind_event: function () {
             var self = this;
-            this.$target.on('click', '.carousel-control', function () {
+            this.$target.off('click').on('click', '.carousel-control', function () {
                 self.$target.carousel($(this).data('slide')); });
-            this.$target.on('click', '.carousel-indicators [data-target]', function () {
+            this.$target.off('click').on('click', '.carousel-indicators [data-target]', function () {
                 self.$target.carousel(+$(this).data('slide-to')); });
         },
         on_add: function (e) {
@@ -1050,8 +1117,13 @@
             var index = $active.index();
             this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
             this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
-            $active.clone().removeClass('active').insertAfter($active);
+            
+            var $clone = this.$el.find(".item.active").clone();
+            var bg = this.$editor.find('ul[name="carousel-background"] li:not([data-value="'+ $active.css("background-image").replace(/.*:\/\/[^\/]+|\)$/g, '') +'"]):first').data("value");
+            $clone.css("background-image", "url('"+ bg +"')");
+            $clone.removeClass('active').insertAfter($active);
             this.$target.carousel().carousel(++index);
+            this.rebind_event();
         },
         on_remove: function (e) {
             e.preventDefault();
@@ -1068,7 +1140,8 @@
                 });
                 setTimeout(function () {
                     new_index = index % cycle;
-                    self.$target.carousel( new_index + 1 );
+                    self.$target.carousel().carousel( new_index + 1 );
+                    self.rebind_event();
                 }, 500);
             } else {
                 this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden");
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 96a38a75d32..580779283ad 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -48,12 +48,13 @@
                                 </div>
                             </div>
                         </section>
+                        <!--
                         <section class="js_image_section">
                             <h3 class="page-header">3. Describe your images</h3>
                             <div class="row js_seo_image_list">
-                                <!-- filled in JS -->
                             </div>
                         </section>
+                        -->
                     </div><div class="modal-footer">
                         <button data-action="discard" data-dismiss="modal" href="#" class="btn btn-default">Discard</button>
                         <button type="button" data-action="update" class="btn btn-primary">Apply Changes</button>
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index e5dde368154..6aaf256b523 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -31,8 +31,8 @@
                             this one:
                         </p>
                         <div class="row">
-                            <div class="col-sm-4 col-sm-offset-4 oe_drop_zone_style text-center">
-                                <span class="mt16">drop in this zone</span>
+                            <div class="col-sm-6 col-sm-offset-3 oe_drop_zone_style text-center">
+                                <div>drop in this zone</div>
                             </div>
                         </div>
                         <div class="text-muted">
@@ -57,6 +57,25 @@
         <div id='oe_snippets'></div>
     </t>
 
+    <t t-name="website.snippet_drop_zone">
+        <div class='oe_drop_zone oe_insert'>
+            <div>Drag your block here (move your mouse in this zone)</div>
+            <div class="oe_active">Drop your block</div>
+        </div>
+    </t>
+
+    <t t-name="website.snippet_dark_for_dropzone">
+        <div id="dark_for_dropzone">
+            <table width="100%" height="100%">
+                <tbody>
+                    <tr><td colspan="3"></td></tr>
+                    <tr><td></td><td class="center"></td><td></td></tr>
+                    <tr><td colspan="3"></td></tr>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
     <t t-name="website.snippet_overlay">
         <div class="oe_overlay">
             <div class="oe_overlay_options">
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index b3e4cacd32a..409d73f1f27 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -35,7 +35,7 @@
                             </ul>
                         </li>
                         <li>
-                            <a href="/admin#action=website.action_module_website">Apps</a>
+                            <a href="/web#action=website.action_module_website">Apps</a>
                         </li>
                     </ul>
                 </div>