[MERGE] Merged lp:~openerp-dev/openobject-addons/trunk-website-al

bzr revid: psa@tinyerp.com-20131022115302-t5a9ftki0yt2pxvk
bzr revid: psa@tinyerp.com-20131024051639-ijmy82htxvy3c23r
bzr revid: psa@tinyerp.com-20131028063631-7ndbt6c4x09ad283

10 files changed, 321 insertions, 241 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index a009bf61f23..8fa0ad80f5f 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -112,6 +111,11 @@ table.editorbar-panel td.selected {
   background-color: #b1c9d9;
 }
 
+.oe_translate_or {
+  color: white;
+  padding: 0 0.2em;
+}
+
 .oe_translate_examples li {
   margin: 10px;
   padding: 4px;
@@ -169,6 +173,11 @@ table.editorbar-panel td.selected {
   white-space: pre-wrap;
 }
 
+.oe_carlos_danger {
+  outline: 1px solid red !important;
+  background-color: #ffd9dd !important;
+}
+
 /* ---- SNIPPET EDITOR ---- */
 #oe_snippets {
   position: fixed;
@@ -608,7 +617,6 @@ table.editorbar-panel td.selected {
   right: 0;
   z-index: 1000;
   height: 100%;
-  width: 720px;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title {
   width: 100%;
@@ -637,11 +645,13 @@ table.editorbar-panel td.selected {
   right: 0;
   bottom: 51px;
   left: 0;
-  width: 720px;
+}
+.oe_ace_view_editor .ace_editor .ace_gutter {
+  cursor: ew-resize;
 }
 .oe_ace_view_editor.oe_ace_open {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  opacity: 1;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
+  opacity: 0.97;
 }
 .oe_ace_view_editor.oe_ace_closed {
   z-index: -1000;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 461667d8e54..5dbe7a8eee9 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -106,6 +106,9 @@ table.editorbar-panel
         background-color: #b1c9d9
 
 // ---- TRANSLATIONS ---- {{{
+.oe_translate_or
+    color: white
+    padding: 0 0.2em
 .oe_translate_examples li
     margin: 10px
     padding: 4px
@@ -151,6 +154,10 @@ table.editorbar-panel
     content: " "
     white-space: pre-wrap
 
+.oe_carlos_danger
+    outline: 1px solid red !important
+    background-color: #ffd9dd !important
+
 /* ---- SNIPPET EDITOR ---- */
 
 #oe_snippets
@@ -466,7 +473,6 @@ $highlighted_text_color: #ffffff
 
 /* ---- ACE EDITOR ---- */
 
-$ace_width: 720px
 $editorbar_height: 30px
 // TODO Fix => might break with themes
 $navbar_height: 51px
@@ -481,7 +487,6 @@ $navbar_height: 51px
     right: 0
     z-index: 1000
     height: 100%
-    width: $ace_width
     .oe_ace_view_editor_title
         width: 100%
         padding-top: 0
@@ -502,9 +507,10 @@ $navbar_height: 51px
         right: 0
         bottom: $navbar_height
         left: 0
-        width: $ace_width
+        .ace_gutter
+            cursor: ew-resize
     &.oe_ace_open
-        +opacity(1)
+        +opacity(0.97)
     &.oe_ace_closed
         z-index: -1000
         +opacity(0)
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index faf3e8f7e04..02f5eb68d5e 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -100,6 +100,13 @@
                 self.aceEditor.resize();
                 self.$el.width(width);
             }
+            function storeEditorWidth() {
+                window.localStorage.setItem('ace_editor_width', self.$el.width());
+            }
+            function readEditorWidth() {
+                var width = window.localStorage.getItem('ace_editor_width');
+                return parseInt(width || 720, 10);
+            }
             function startResizing (e) {
                 self.refX = e.pageX;
                 self.resizing = true;
@@ -113,16 +120,23 @@
                     var width = self.$el.width() - offset;
                     self.refX = e.pageX;
                     resizeEditor(width);
+                    storeEditorWidth();
                 }
             }
             document.body.addEventListener('mouseup', stopResizing, true);
             self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
             $(document).mousemove(updateWidth);
+            $('button[data-action=edit]').click(function () {
+               self.close();
+            });
+            resizeEditor(readEditorWidth());
         },
         loadViews: function (views) {
             var self = this;
-            var activeViews = _.filter(views, function (view) {
+            var activeViews = _.uniq(_.filter(views, function (view) {
                return view.active;
+            }), false, function (view) {
+                return view.id;
             });
             var $viewList = self.$('#ace-view-list');
             _.each(activeViews, function (view) {
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index c1f05d9b661..6fb0f459a22 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -56,7 +56,7 @@
 
                 //noinspection JSValidateTypes
                 editor.addCommand('link', {
-                    exec: function (editor, data) {
+                    exec: function (editor) {
                         link_dialog(editor);
                         return true;
                     },
@@ -65,7 +65,7 @@
                 });
                 //noinspection JSValidateTypes
                 editor.addCommand('image', {
-                    exec: function (editor, data) {
+                    exec: function (editor) {
                         image_dialog(editor);
                         return true;
                     },
@@ -177,7 +177,7 @@
         var editor = new website.EditorBar();
         var $body = $(document.body);
         editor.prependTo($body).then(function () {
-            if (location.search.indexOf("unable_editor") >= 0) {
+            if (location.search.indexOf("enable_editor") >= 0) {
                 editor.edit();
             }
         });
@@ -219,7 +219,7 @@
                 var view_id = $(event.currentTarget).data('view-id');
                 openerp.jsonRpc('/website/customize_template_toggle', 'call', {
                     'view_id': view_id
-                }).then( function(result) {
+                }).then( function() {
                     window.location.reload();
                 });
             });
@@ -253,7 +253,6 @@
             );
         },
         edit: function () {
-            var self = this;
             this.$buttons.edit.prop('disabled', true);
             this.$('#website-top-view').hide();
             this.$('#website-top-edit').show();
@@ -273,30 +272,58 @@
             editor.destroy();
             // FIXME: select editables then filter by dirty?
             var defs = this.rte.fetch_editables(root)
-                .removeClass('oe_editable cke_focus')
-                .removeAttr('contentEditable')
                 .filter('.oe_dirty')
+                .removeAttr('contentEditable')
+                .removeClass('oe_dirty oe_editable cke_focus oe_carlos_danger')
                 .map(function () {
                     var $el = $(this);
                     // TODO: Add a queue with concurrency limit in webclient
                     // https://github.com/medikoo/deferred/blob/master/lib/ext/function/gate.js
                     return self.saving_mutex.exec(function () {
                         return self.saveElement($el)
-                            .fail(function () {
-                                var data = $el.data();
-                                console.error(_.str.sprintf('Could not save %s(%d).%s', data.oeModel, data.oeId, data.oeField));
+                            .then(undefined, function (thing, response) {
+                                // because ckeditor regenerates all the dom,
+                                // we can't just setup the popover here as
+                                // everything will be destroyed by the DOM
+                                // regeneration. Add markings instead, and
+                                // returns a new rejection with all relevant
+                                // info
+                                var id = _.uniqueId('carlos_danger_');
+                                $el.addClass('oe_dirty oe_carlos_danger');
+                                $el.addClass(id);
+                                return $.Deferred().reject({
+                                    id: id,
+                                    error: response.data,
+                                });
                             });
                     });
                 }).get();
             return $.when.apply(null, defs).then(function () {
                 website.reload();
+            }, function (failed) {
+                // If there were errors, re-enable edition
+                self.rte.start_edition(true).then(function () {
+                    // jquery's deferred being a pain in the ass
+                    if (!_.isArray(failed)) { failed = [failed]; }
+
+                    _(failed).each(function (failure) {
+                        $(root).find('.' + failure.id)
+                            .removeClass(failure.id)
+                            .popover({
+                                trigger: 'hover',
+                                content: failure.error.message,
+                                placement: 'auto top',
+                            })
+                            // Force-show popovers so users will notice them.
+                            .popover('show');
+                    })
+                });
             });
         },
         /**
          * Saves an RTE content, which always corresponds to a view section (?).
          */
         saveElement: function ($el) {
-            $el.removeClass('oe_dirty');
             var markup = $el.prop('outerHTML');
             return openerp.jsonRpc('/web/dataset/call', 'call', {
                 model: 'ir.ui.view',
@@ -350,6 +377,7 @@
                 // The detail attribute indicates the number of times a mouse button has been pressed
                 // we just want the triple click
                 if (e.detail !== 3) { return; }
+                e.preventDefault();
 
                 // Get closest block-level element to the triple-clicked
                 // element (using ckeditor's block list because why not)
@@ -422,15 +450,25 @@
 
             return true;
         },
-        start_edition: function ($elements) {
+        /**
+         * Makes the page editable
+         *
+         * @param {Boolean} [restart=false] in case the edition was already set
+         *                                  up once and is being re-enabled.
+         * @returns {$.Deferred} deferred indicating when the RTE is ready
+         */
+        start_edition: function (restart) {
             var self = this;
             // create a single editor for the whole page
             var root = document.getElementById('wrapwrap');
-            $(root).on('dragstart', 'img', function (e) {
-                e.preventDefault();
-            });
-            this.webkitSelectionFixer(root);
-            this.tableNavigation(root);
+            if (!restart) {
+                $(root).on('dragstart', 'img', function (e) {
+                    e.preventDefault();
+                });
+                this.webkitSelectionFixer(root);
+                this.tableNavigation(root);
+            }
+            var def = $.Deferred();
             var editor = this.editor = CKEDITOR.inline(root, self._config());
             editor.on('instanceReady', function () {
                 editor.setReadOnly(false);
@@ -446,7 +484,9 @@
                 document.execCommand("enableInlineTableEditing", false, "false");
 
                 self.trigger('rte:ready');
+                def.resolve();
             });
+            return def;
         },
 
         setup_editables: function (root) {
@@ -477,13 +517,12 @@
 
         fetch_editables: function (root) {
             return $(root).find('[data-oe-model]')
-                // FIXME: propagation should make "meta" blocks non-editable in the first place...
                 .not('link, script')
                 .not('.oe_snippet_editor')
                 .filter(function () {
                     var $this = $(this);
                     // keep view sections and fields which are *not* in
-                    // view sections for toplevel editables
+                    // view sections for top-level editables
                     return $this.data('oe-model') === 'ir.ui.view'
                        || !$this.closest('[data-oe-model = "ir.ui.view"]').length;
                 });
@@ -854,7 +893,7 @@
             this.preview_image();
         },
 
-        file_selection: function (e) {
+        file_selection: function () {
             this.$('button.filepicker').removeClass('btn-danger btn-success');
 
             var self = this;
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 963a0b1664d..682a6175086 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -21,9 +21,6 @@
         templates.push(template);
     };
     website.load_templates = function(templates) {
-        var def = $.Deferred();
-        var count = templates.length;
-
         var dones = _(templates).map(function (t) {
             return new $.Deferred(function (d) {
                 openerp.qweb.add_template(t, function(err) {
@@ -39,8 +36,8 @@
     };
     website.reload = function () {
         location.hash = "scrollTop=" + window.document.body.scrollTop;
-        if (location.search.indexOf("unable_editor") > -1) {
-            window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/g, '');
+        if (location.search.indexOf("enable_editor") > -1) {
+            window.location.href = window.location.href.replace(/enable_editor(=[^&]*)?/g, '');
         } else {
             window.location.reload();
         }
@@ -151,7 +148,7 @@
                 });
         });
 
-        $(document).on('click', '.js_publish_management .js_publish_btn', function (e) {
+        $(document).on('click', '.js_publish_management .js_publish_btn', function () {
             var $data = $(this).parents(".js_publish_management:first");
             var $btn = $data.find('.btn:first');
             var publish = $btn.hasClass("btn-success");
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index e411ee7065c..c29325c8de8 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -25,8 +25,8 @@
         save: function () {
             this.snippets.make_active(false);
 
-	    // TODO TOFIX: call clean_for_save on all snippets of the page, not only modified ones
-	    // important for banner of parallax that changes data automatically.
+            // FIXME: call clean_for_save on all snippets of the page, not only modified ones
+            // important for banner of parallax that changes data automatically.
             this.snippets.clean_for_save();
             remove_added_snippet_id();
             this._super();
@@ -196,7 +196,7 @@
                     }
                     self.make_active($target);
                 });
-            $("[data-oe-model]").on('click', function (ev) {
+            $("[data-oe-model]").on('click', function () {
                     if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
                         self.make_active(false);
                     }
@@ -224,6 +224,7 @@
         },
         clean_for_save: function () {
             for (var k in this.snippets) {
+                if (!this.snippets.hasOwnProperty(k)) { continue; }
                 var editor = $(this.snippets[k]).data("snippet-editor");
                 if (editor) {
                     editor.clean_for_save();
@@ -341,13 +342,13 @@
                     });
                 },
                 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;
-			}
-		    }
+                    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();
                     if (dropped) {
@@ -460,7 +461,7 @@
                 // count += $zones.length;
                 // $zones.remove();
 
-                $zones = $('.oe_drop_zone > .oe_drop_zone:not(.oe_vertical)').remove();   // no recusrive zones
+                $zones = $('.oe_drop_zone > .oe_drop_zone:not(.oe_vertical)').remove();   // no recursive zones
                 count += $zones.length;
                 $zones.remove();
             } while (count > 0);
@@ -471,14 +472,13 @@
                 var zone = $(this);
                 var prev = zone.prev();
                 var next = zone.next();
-                var float_prev = zone.prev().css('float')   || 'none';
-                var float_next = zone.next().css('float')   || 'none';
-                var disp_prev  = zone.prev().css('display') ||  null;
-                var disp_next  = zone.next().css('display') ||  null;
+                var float_prev = prev.css('float')   || 'none';
+                var float_next = next.css('float')   || 'none';
+                var disp_prev  = prev.css('display') ||  null;
+                var disp_next  = next.css('display') ||  null;
                 if(     (float_prev === 'left' || float_prev === 'right')
                     &&  (float_next === 'left' || float_next === 'right')  ){
                     zone.remove();
-                    return;
                 }else if( !( disp_prev === null
                           || disp_next === null
                           || disp_prev === 'block'
@@ -689,7 +689,7 @@
             var self = this;
             var $styles = this.$overlay.find('.oe_options');
             var $ul = $styles.find('ul:first');
-            _.each(this.parent.style_templates, function (val, key) {
+            _.each(this.parent.style_templates, function (val) {
                 if (!self.parent.dom_filter(val.selector).is(self.$target)) {
                     return;
                 }
@@ -757,7 +757,7 @@
 
         /*
         *  build_snippet
-        *  This method is called just after that a thumbnail is drag and droped into a drop zone
+        *  This method is called just after that a thumbnail is drag and dropped into a drop zone
         *  (after the insertion of this.$body, if this.$body exists)
         */
         build_snippet: function ($target) {
@@ -771,7 +771,7 @@
         },
 
         /* onFocus
-        *  This method is called when the user click outide the snippet in the dom, after a focus
+        *  This method is called when the user click outside the snippet in the dom, after a focus
         */
         onBlur : function () {
             this.$overlay.removeClass('oe_active');
@@ -790,7 +790,7 @@
             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
+            // bind event on options
             var $li = $ul.find("li");
             $li.on('click', function (event) {
                     if ($(this).data("value")) {
@@ -893,7 +893,8 @@
                     var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
 
                     var cursor = $handle.css("cursor")+'-important';
-                    $("body").addClass(cursor);
+                    var $body = $(document.body);
+                    $body.addClass(cursor);
 
                     var body_mousemove = function (event){
                         event.preventDefault();
@@ -920,15 +921,15 @@
                             self.parent.cover_target(self.$overlay, self.$target);
                         }
                     };
-                    $('body').mousemove(body_mousemove);
 
                     var body_mouseup = function(){
-                        $('body').unbind('mousemove', body_mousemove);
-                        $('body').unbind('mouseup', body_mouseup);
-                        $("body").removeClass(cursor);
+                        $body.unbind('mousemove', body_mousemove);
+                        $body.unbind('mouseup', body_mouseup);
+                        $body.removeClass(cursor);
                         self.parent.editor_busy = false;
                     };
-                    $('body').mouseup(body_mouseup);
+                    $body.mousemove(body_mousemove);
+                    $body.mouseup(body_mouseup);
                 });
         },
         getSize: function () {
@@ -998,7 +999,7 @@
             if (compass !== 'w')
                 return;
 
-            // don't change the rigth border position when we change the offset (replace col size)
+            // don't change the right border position when we change the offset (replace col size)
             var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
             var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
             var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
@@ -1077,14 +1078,6 @@
                 self.$target.carousel();
             });
 
-            this.$target.on('dblclick', '.item.active .carousel-image img', function (event) {
-                var $img = $(event.currentTarget);
-                var editor = new website.editor.ImageDialog();
-                editor.on('start', self, function (o) {o.url = $img.attr("src");});
-                editor.on('save', self, function (o) {$img.attr("src", o.url);});
-                editor.appendTo($('body'));
-            });
-
             this.rebind_event();
         },
         // rebind event to active carousel on edit mode
@@ -1136,7 +1129,6 @@
             var style = false;
             var $el = this.$inner.find('.item.active');
             var $ul = this.$editor.find('ul[name="carousel-style"]');
-            var $li = $ul.find("li");
 
             if ($el.hasClass('text_only'))
                 style = 'text_only';
@@ -1168,7 +1160,6 @@
                 });
         },
         change_size: function () {
-            var self = this;
             var $el = this.$target;
 
             var size = 'oe_big';
@@ -1205,7 +1196,6 @@
             this.change_size();
         },
         scroll: function(){
-            var self = this;
             var $ul = this.$editor.find('ul[name="parallax-scroll"]');
             var $li = $ul.find("li");
             var $parallax = this.$target.find('.parallax');
@@ -1215,7 +1205,7 @@
             $li.on('click', function (event) {
                 $li.removeClass("active");
                 $(this).addClass("active");
-                var speed =  $(this).data('value')
+                var speed =  $(this).data('value');
                 $parallax.attr('data-stellar-background-ratio', speed);
             });
 
diff --git a/addons/website/static/src/js/website.tour.basic.js b/addons/website/static/src/js/website.tour.basic.js
new file mode 100644
index 00000000000..876d2a7b5b9
--- /dev/null
+++ b/addons/website/static/src/js/website.tour.basic.js
@@ -0,0 +1,163 @@
+(function () {
+    'use strict';
+
+    var website = openerp.website;
+
+    var render = website.tour.render;
+
+    website.EditorBasicTour = website.EditorTour.extend({
+        id: 'add_banner_tour',
+        name: "Insert a banner",
+        init: function (editor) {
+            var self = this;
+            var $body = $(document.body);
+            self.steps = [
+                {
+                    stepId: 'welcome',
+                    orphan: true,
+                    backdrop: true,
+                    title: "Welcome to your website!",
+                    content: "This tutorial will guide you to build your first page. We will start by adding a banner.",
+                    template: render('website.tour_popover', { next: "Start Tutorial", end: "Skip It" }),
+                },
+                {
+                    stepId: 'edit-page',
+                    element: 'button[data-action=edit]',
+                    placement: 'bottom',
+                    reflex: true,
+                    title: "Edit this page",
+                    content: "Every page of your website can be modified through the <i>Edit</i> button.",
+                    template: render('website.tour_popover'),
+                },
+                {
+                    stepId: 'add-block',
+                    element: 'button[data-action=snippet]',
+                    placement: 'bottom',
+                    title: "Insert building blocks",
+                    content: "To add content in a page, you can insert building blocks.",
+                    template: render('website.tour_popover'),
+                    onShow: function () {
+                        function refreshAddBlockStep () {
+                            self.tour.showStep(self.indexOfStep('add-block'));
+                            editor.off('rte:ready', editor, refreshAddBlockStep);
+                        }
+                        editor.on('rte:ready', editor, refreshAddBlockStep);
+                        $('button[data-action=snippet]').click(function () {
+                            self.movetoStep('drag-banner');
+                        });
+                    }
+                },
+                {
+                    stepId: 'drag-banner',
+                    element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
+                    placement: 'bottom',
+                    title: "Drag & Drop a Banner",
+                    content: "Drag the <em>Banner</em> block and drop it in your page. <p class='text-muted'>Tip: release the mouse button when you are in a valid zone, with a preview of the banner.</p>",
+                    template: render('website.tour_popover'),
+                    onShow: function () {
+                        function beginDrag () {
+                            $('.popover.tour').remove();
+                            function goToNextStep () {
+                                $('#oe_snippets').hide();
+                                self.movetoStep('edit-title');
+                                $body.off('mouseup', goToNextStep);
+                            }
+                            $body.off('mousedown', beginDrag);
+                            $body.on('mouseup', goToNextStep);
+                        }
+
+                        $body.on('mousedown', beginDrag);
+                    },
+                },
+                {
+                    stepId: 'edit-title',
+                    element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
+                    placement: 'left',
+                    title: "Customize banner's text",
+                    content: "Click in the text and start editing it. Click continue once it's done.",
+                    template: render('website.tour_popover', { next: "Continue" }),
+                    onHide: function () {
+                        var $banner = $("#wrap [data-snippet-id=carousel]:first");
+                        if ($banner.length) {
+                            $banner.click();
+                        }
+                    },
+                },
+                {
+                    stepId: 'customize-banner',
+                    element: '.oe_overlay_options .oe_options',
+                    placement: 'left',
+                    title: "Customize the banner",
+                    content: "You can customize components of your page through the <em>Customize</em> menu. Try to change the background of your banner.",
+                    template: render('website.tour_popover', { next: "Continue" }),
+                    onShow: function () {
+                        $('.dropdown-menu [name=carousel-background]').click(function () {
+                            self.movetoStep('save-changes');
+                        });
+                    },
+                },
+                {
+                    stepId: 'save-changes',
+                    element: 'button[data-action=save]',
+                    placement: 'right',
+                    reflex: true,
+                    title: "Save your modifications",
+                    content: "Once you click on save, your website page is updated.",
+                    template: render('website.tour_popover'),
+                    onHide: function () {
+                        self.saveStep('part-2');
+                    },
+
+                },
+                {
+                    stepId: 'part-2',
+                    orphan: true,
+                    title: "Congratulation!",
+                    content: "Your homepage have been updated. Now, we suggest you to insert others building blocks like texts and images to structure your page.",
+                    template: render('website.tour_popover', { next: "Continue" }),
+                },
+                {
+                    stepId: 'show-tutorials',
+                    element: '#help-menu-button',
+                    placement: 'left',
+                    title: "Help is always available",
+                    content: "But you can always click here if you want more tutorials.",
+                    template: render('website.tour_popover', { end: "Close" }),
+                }
+            ];
+            return this._super();
+        },
+        startOfPart2: function () {
+            var currentStepIndex = this.currentStepIndex();
+            var secondPartIndex = this.indexOfStep('part-2');
+            var showTutorialsIndex = this.indexOfStep('show-tutorials');
+            return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended();
+        },
+        canResume: function () {
+            return this.startOfPart2() || this._super();
+        },
+    });
+
+    website.EditorBar.include({
+        start: function () {
+            var menu = $('#help-menu');
+            var basicTour = new website.EditorBasicTour(this);
+            var $menuItem = $($.parseHTML('<li><a href="#">'+basicTour.name+'</a></li>'));
+            $menuItem.click(function () {
+                basicTour.reset();
+                basicTour.start();
+            });
+            menu.append($menuItem);
+            var url = new website.UrlParser(window.location.href);
+            if (url.search.indexOf('?tutorial=true') === 0 || basicTour.startOfPart2()) {
+                basicTour.start();
+            }
+            $('.tour-backdrop').click(function (e) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+            });
+            return this._super();
+        },
+    });
+
+}());
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index bfb9a0461d9..f5d3237c28d 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -4,9 +4,11 @@
     var website = openerp.website;
     website.templates.push('/website/static/src/xml/website.tour.xml');
 
-    function render (template, dict)  {
-        return openerp.qweb.render(template, dict);
-    }
+    website.tour = {
+        render: function render (template, dict)  {
+            return openerp.qweb.render(template, dict);
+        }
+    };
 
     website.EditorTour = openerp.Class.extend({
         tour: undefined,
@@ -19,7 +21,7 @@
                 keyboard: false,
             });
             this.tour.addSteps(_.map(this.steps, function (step) {
-               step.title = render('website.tour_popover_title', { title: step.title });
+               step.title = website.tour.render('website.tour_popover_title', { title: step.title });
                return step;
             }));
             this.monkeyPatchTour();
@@ -81,137 +83,6 @@
         },
     });
 
-    website.EditorBasicTour = website.EditorTour.extend({
-        id: 'add_banner_tour',
-        name: "Insert a banner",
-        init: function (editor) {
-            var self = this;
-            self.steps = [
-                {
-                    stepId: 'welcome',
-                    orphan: true,
-                    backdrop: true,
-                    title: "Welcome to your website!",
-                    content: "This tutorial will guide you to build your first page. We will start by adding a banner.",
-                    template: render('website.tour_popover', { next: "Start Tutorial", end: "Skip It" }),
-                },
-                {
-                    stepId: 'edit-page',
-                    element: 'button[data-action=edit]',
-                    placement: 'bottom',
-                    reflex: true,
-                    title: "Edit this page",
-                    content: "Every page of your website can be modified through the <i>Edit</i> button.",
-                    template: render('website.tour_popover'),
-                },
-                {
-                    stepId: 'add-block',
-                    element: 'button[data-action=snippet]',
-                    placement: 'bottom',
-                    title: "Insert building blocks",
-                    content: "To add content in a page, you can insert building blocks.",
-                    template: render('website.tour_popover'),
-                    onShow: function () {
-                        function refreshAddBlockStep () {
-                            self.tour.showStep(self.indexOfStep('add-block'));
-                            editor.off('rte:ready', editor, refreshAddBlockStep);
-                        }
-                        editor.on('rte:ready', editor, refreshAddBlockStep);
-                        $('button[data-action=snippet]').click(function () {
-                            self.movetoStep('drag-banner');
-                        });
-                    }
-                },
-                {
-                    stepId: 'drag-banner',
-                    element: '#website-top-navbar [data-snippet-id=carousel].ui-draggable',
-                    placement: 'bottom',
-                    title: "Drag & Drop a Banner",
-                    content: "Drag the <em>Banner</em> block and drop it in your page. <p class='text-muted'>Tip: release the mouse button when you are in a valid zone, with a preview of the banner.</p>",
-                    template: render('website.tour_popover'),
-                    onShow: function () {
-                        function beginDrag () {
-                            $('.popover.tour').remove();
-                            $('body').off('mousedown', beginDrag);
-                            function goToNextStep () {
-                                $('#oe_snippets').hide();
-                                self.movetoStep('edit-title');
-                                $('body').off('mouseup', goToNextStep);
-                            }
-                            $('body').on('mouseup', goToNextStep);
-                        }
-                        $('body').on('mousedown', beginDrag);
-                    },
-                },
-                {
-                    stepId: 'edit-title',
-                    element: '#wrap [data-snippet-id=carousel]:first .carousel-caption',
-                    placement: 'left',
-                    title: "Customize banner's text",
-                    content: "Click in the text and start editing it. Click continue once it's done.",
-                    template: render('website.tour_popover', { next: "Continue" }),
-                    onHide: function () {
-                        var $banner = $("#wrap [data-snippet-id=carousel]:first");
-                        if ($banner.length) {
-                            $banner.click();
-                        }
-                    },
-                },
-                {
-                    stepId: 'customize-banner',
-                    element: '.oe_overlay_options .oe_options',
-                    placement: 'left',
-                    title: "Customize the banner",
-                    content: "You can customize components of your page through the <em>Customize</em> menu. Try to change the background of your banner.",
-                    template: render('website.tour_popover', { next: "Continue" }),
-                    onShow: function () {
-                        $('.dropdown-menu [name=carousel-background]').click(function () {
-                            self.movetoStep('save-changes');
-                        });
-                    },
-                },
-                {
-                    stepId: 'save-changes',
-                    element: 'button[data-action=save]',
-                    placement: 'right',
-                    reflex: true,
-                    title: "Save your modifications",
-                    content: "Once you click on save, your website page is updated.",
-                    template: render('website.tour_popover'),
-                    onHide: function () {
-                        self.saveStep('part-2');
-                    },
-
-                },
-                {
-                    stepId: 'part-2',
-                    orphan: true,
-                    title: "Congratulation!",
-                    content: "Your homepage have been updated. Now, we suggest you to insert others building blocks like texts and images to structure your page.",
-                    template: render('website.tour_popover', { next: "Continue" }),
-                },
-                {
-                    stepId: 'show-tutorials',
-                    element: '#help-menu-button',
-                    placement: 'left',
-                    title: "Help is always available",
-                    content: "But you can always click here if you want more tutorials.",
-                    template: render('website.tour_popover', { end: "Close" }),
-                },
-            ];
-            return this._super();
-        },
-        startOfPart2: function () {
-            var currentStepIndex = this.currentStepIndex();
-            var secondPartIndex = this.indexOfStep('part-2');
-            var showTutorialsIndex = this.indexOfStep('show-tutorials');
-            return (currentStepIndex === secondPartIndex || currentStepIndex === showTutorialsIndex) && !this.tour.ended();
-        },
-        canResume: function () {
-            return this.startOfPart2() || this._super();
-        },
-    });
-
     website.UrlParser = openerp.Class.extend({
         init: function (url) {
             var a = document.createElement('a');
@@ -227,30 +98,4 @@
         },
     });
 
-    website.EditorBar.include({
-        start: function () {
-            website.tutorials = {
-                basic: new website.EditorBasicTour(this),
-            };
-            var menu = $('#help-menu');
-            _.each(website.tutorials, function (tutorial) {
-                var $menuItem = $($.parseHTML('<li><a href="#">'+tutorial.name+'</a></li>'));
-                $menuItem.click(function () {
-                    tutorial.reset();
-                    tutorial.start();
-                });
-                menu.append($menuItem);
-            });
-            var url = new website.UrlParser(window.location.href);
-            if (url.search.indexOf('?tutorial=true') === 0 || website.tutorials.basic.startOfPart2()) {
-                website.tutorials.basic.start();
-            }
-            $('.tour-backdrop').click(function (e) {
-                e.stopImmediatePropagation();
-                e.preventDefault();
-            });
-            return this._super();
-        },
-    });
-
 }());
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index fddb5ef7b51..7e237598530 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -6,11 +6,16 @@
     var nodialog = 'website_translator_nodialog';
 
     website.EditorBar.include({
+        events: _.extend({}, website.EditorBar.prototype.events, {
+            'click a[data-action=edit_master]': 'edit_master',
+        }),
         start: function () {
             var self = this;
             this.initial_content = {};
             return this._super.apply(this, arguments).then(function () {
-                self.$('button[data-action=edit]').text("Translate");
+                self.$('button[data-action=edit]')
+                    .text("Translate")
+                    .after(openerp.qweb.render('website.TranslatorAdditionalButtons'));
                 self.$('[data-action=snippet]').hide();
                 self.$('#customize-menu-button').hide();
             });
@@ -24,7 +29,7 @@
                 dialog.on('activate', this, function () {
                     localStorage[nodialog] = dialog.$('input[name=do_not_show]').prop('checked') || '';
                     dialog.$el.modal('hide');
-                    this.translate().then(function () {
+                    self.translate().then(function () {
                         mysuper.call(self);
                     });
                 });
@@ -34,6 +39,14 @@
                 });
             }
         },
+        edit_master: function (ev) {
+            ev.preventDefault();
+            var link = $('.js_language_selector a[data-default-lang]')[0];
+            if (link) {
+                link.search += (link.search ? '&' : '?') + 'enable_editor=1';
+                window.location = link.attributes.href.value;
+            }
+        },
         translate: function () {
             var self = this;
             this.translations = null;
@@ -44,7 +57,7 @@
                 self.translations = translations;
                 self.processTranslatableNodes();
                 // Disable non translatable t-fields
-                $('[data-oe-type][data-oe-translate=0]').removeAttr('data-oe-type');
+                $('[data-oe-type][data-oe-translate="0"]').removeAttr('data-oe-type');
             });
         },
         processTranslatableNodes: function () {
@@ -143,7 +156,6 @@
                 if (node.attributes['data-oe-translate'].value == '1') {
                     node.className += ' oe_translatable_field';
                 }
-                return;
             } else if (node.childNodes.length === 1
                     && this.isTextNode(node.childNodes[0])
                     && !node.getAttribute('data-oe-model')) {
@@ -175,7 +187,7 @@
             $(root).click(function (ev) {
                 ev.preventDefault();
             });
-            return $('[data-oe-translate=1]');
+            return $('[data-oe-translate="1"]');
         }
     });
 
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
index f35cf583da9..dac074688d8 100644
--- a/addons/website/static/src/xml/website.translator.xml
+++ b/addons/website/static/src/xml/website.translator.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
+<t t-name="website.TranslatorAdditionalButtons">
+    <strong class="oe_translate_or">or</strong>
+    <a class="btn btn-default" data-action="edit_master" href="#">Edit Master</a>
+</t>
 <t t-name="website.TranslatorDialog">
     <div class="modal fade oe_website_translator" tabindex="-1" role="dialog">
         <div class="modal-dialog">